Week1_Day1_회의록

진행사항

11:00 ~ 12:00 아이스브레이킹
13:00 ~ 18:00
- Backlog 작성
- 이슈 목록 페이지 컴포넌트 설계
- DB 설계
- Backend, Frontend 개발환경 설정

첫 화면

이슈 목록 페이지

이슈 목록 보여주기
- 오픈 상태의 이슈 보여주기(기본)
- {제목, 마일스톤, 레이블, 이슈 번호, 이슈 작성 시간, 작성자, 담당자} 표시
- 이슈 제목 선택 시 -> 상세 화면 페이지로 이동
이슈 목록 필터
- 필터 종류 팝업(5가지 옵션)
- 필터가 적용된 상태일 경우 필터 초기화 버튼 생성
- 필터 적용 -> 검색창에 필터 적용 상태 표시(초기: is:open is:issue)
- 검색창 텍스트 삭제(Seach all issues) 후 검색 -> 모든 이슈 목록(클로즈 포함)보여줌
- 추가 필터(작성자, 레이블, 마일스톤, 담당자) 선택 시 목록 팝업 띄우기
- 필터 결과 없을 경우 -> 'No results matched your search' 표시
체크박스
- 전체선택/해제
- 체크박스 선택 시 상단에 개수 표시(ex) 1 selected)
- 체크박스 하나라도 선택 시 목록 이슈 필터 버튼 -> Mark as 버튼으로 변경
- Mark as 버튼
  - 팝업으로 체크박스 선택된 모든 이슈에 오픈/클로즈 상태 일괄적용 -> 이슈목록 업데이트
Detail 이슈/New 이슈/레이블/마일스톤 목록 화면 이동
레이블/마일스톤 개수 표시

새로운 이슈 생성 페이지

작성자의 프로필과 제목 작성 영역 표시
글자 수 세기 -> 2초간 타이핑하지 않으면 2초간 나타났다가 사라짐
이미지 선택 기능
- 이미지 선택창 띄워주기
- 이미지 선택 시 서버에 업로드
- 이미지 주소(마크다운)가 내용 작성영역에 추가됨
cancel 버튼 클릭 -> 변화 없이 이슈 목록 화면으로 이동
Submit new issue 버튼
- 이슈 제목 입력 시 활성화
- 클릭 시 저장하고
- 이슈 상세 화면으로 이동
Assignees 클릭
- 담당자 목록 팝업
- 담당자 선택하면 No one 텍스트 -> 할당된 담당자로 변경
- assign yourself 클릭 시 본인을 담당자로 할당
- (선택)여러개 선택 가능
Labels 클릭
- 레이블 목록 팝업
- 선택하면 None yet 텍스트 -> 선택된 레이블로 변경
- (선택)여러개 선택 가능
Milestones 클릭
- 마일스톡 목록 팝업
- 선택하면 No milestone 텍스트 -> 할당된 마일스톤으로 변경
- 진행률 막대기로 표시

이슈 상세 페이지

이슈 제목, 이슈 번호, 오픈 여부, 작성자, 해당 이슈가 오픈된 시간, 코멘트 개수 표시
이슈 제목 수정 기능
- Edit 버튼 클릭
  - 제목이 input 박스로 변경
  - [Save], [Cancel] 버튼으로 변경
- [Save]수정된 제목 반영 및 디자인 적용 / [Cancel]원래 제목으로 돌아감
Assignees와 Lables, Milestone 표시(이슈 작성 화면과 동일)
이슈 작성자 표시
- 작성자의 프로필과 아이디, 작성 시간, 이슈 내용이 코멘트 디자인으로 표시
- ex) Owner, Author..
- 다른 사용자가 단 코멘트에는 Edit 버튼 없음
- 이모티콘 기능 (선택)
자신이 작성한 코멘트 수정 기능
- 상단의 제목 Edit 버튼은 삭제되고 하단에 Cancel과 Update Comment 버튼이 나타남
- 새로운 이슈를 생성하는 화면이랑 동일 👨‍👨‍👧‍👦짝코딩👨‍👨‍👧‍👦
새로운 코멘트 작성
- 코멘트 목록 최하단에 표시
- 코멘트 편집 화면과 동일한 구조(버튼 내용이 다름)
- [Close issue] 버튼
  - 이슈 클로즈
  - [Reopen issue]로 변경
- [Reopen issue] 버튼
  - 이슈 리오픈
  - [Close issue]로 변경
- 코멘트 내용 작성 -> Comment 버튼 활성화

레이블 목록 페이지

레이블/마일스톤 탭
전체 레이블 목록 표시
- 레이블 목록 상단에 전체 레이블 개수 표시
- 이름/배경색/설명(한줄)으로 구성됨
- 모든 레이블은 우측에 Edit, Delete버튼을 가짐
New Label 버튼
- 새로운 레이블 생성
레이블 추가 기능
- 이름/설명/색깔 작성 시 미리보기 가능
- [Cancel] 버튼을 누르면 변화 없이 레이블 목록만 보여줌
- 레이블 이름 입력 시 [Create Label] 버튼이 활성화되어 새로운 레이블이 추가됨
레이블 삭제 기능
- [Delete] 버튼 -> '정말 이 레이블을 삭제하시겠습니까?' 와 같은 확인 메시지 팝업 띄움
- [확인] 버튼 누르면 삭제
- [취소] 버튼 누르면 취소
레이블 수정 기능
- [Edit] 버튼 -> 편집 영역 나타남
- 레이블 이름, 색깔 변경 시 바로 반영(미리 확인 가능)
- 이름, 설명, 색 수정 가능
- [Save changes] 버튼 -> 레이블 수정 -> 편집 영역 사라짐

마일스톤 목록 페이지

레이블/마일스톤 탭
전체 마일스톤 목록
- 마일스톤 이름, 완료일, 설명 표시
- 완료일 없을 경우 'No due date' 표시
- 우측에 진행률과 해당 마일스톤과 관련된 오픈/클로즈 이슈 개수 표시
- 진행률 아래에 [Edit], [Close], [Delete] 버튼 위치
마일스톤 추가 기능
- 제목, 완료날짜(옵션값), 설명(옵션값) 입력 가능
- 날짜 형식이 유효하지 않을 경우 해당 값을 빨간색으로 표시
- [Create milestone] 버튼 클릭 시 새로운 마일스톤이 만들어지고, 마일스톤 목록 화면으로 이동
마일스톤 수정 기능
- 제목, 완료 날짜(옵션값), 설명(옵션값) 수정 가능
- [Cancel] 버튼 -> 마일스톤 목록 화면
- [Save changes] 버튼 -> 마일스톤 수정 -> 마일스톤 목록 화면

id	화면	컴포넌트	기능	우선순위	주차
1	첫 화면	User	GitHub OAuth	1	1
2	이슈 목록 화면	IssueList, IssueHeader, ListHeader, List, Issue	이슈 목록 컴포넌트 구현	1	1
3	이슈 목록 화면	ListHeader, List, Card	이슈 목록 API 구현	1	1
4	이슈 목록 화면	IssueHeader	필터 초기화	1	1
5	이슈 목록 화면	IssueHeader, ListHeader	필터 팝업기능 구현	3	1
6	이슈 목록 화면	IssueHeader, List, Issue	검색 필터 적용	1	1
7	이슈 목록 화면	IssueHeader, ListHeader, List, Issue	팝업 필터 적용	1	1
8	이슈 목록 화면	IssueHeader, ListHeader, List, Issue	검색창 관리(필터 적용상태 반영/ 삭제시 모든 이슈 목록)	3	1
9	이슈 목록 화면	IssueHeader, ListHeader, List, Issue	추가 필터들 선택 시 해당 목록 팝업 띄우기	2	1
10	이슈 목록 화면	IssueHeader, List, Issue	'보여줄 이슈목록이 없음' 메세지 표시 구현	2	1
11	이슈 목록 화면	IssueHeader	체크박스 선택 시 상단에 개수 표시, 필터 버튼 -> Mark as버튼	2	1
12	이슈 목록 화면	IssueHeader	Mark as 버튼 기능 구현 (체크된 이슈 오픈/클로즈 상태적용)	2	1
13	이슈 목록 화면	IssueHeader	레이블, 마일스톤 개수 표시	3	1