# 요구사항 분석

| No | 요구사항 |
| --- | ---------------------------------------------------------------- |
| 1 | [로그인 - 깃허브 계정 또는 회원가입을 통해 로그인할 수 있다.](#요구사항-1--로그인---깃허브-계정-또는-회원가입을-통해-로그인할-수-있다) |
| 2 | [이슈목록 - 기본](#요구사항-2--이슈목록---기본) |
| 3 | [이슈목록 - 필터](#요구사항-3--이슈목록---필터) |
| 4 | [이슈목록 - 다중선택](#요구사항-4--이슈목록---다중-선택) |
| 5 | [새로운 이슈 작성](#요구사항-5--새로운-이슈-작성) |
| 6 | [이슈 상세](#요구사항-6--이슈-상세) |
| 7 | [레이블 목록](#요구사항-7--레이블-목록) |
| 8 | [마일스톤 목록](#요구사항-8--마일스톤-목록) |

<br>

#### 요구사항 1 : 로그인 - 깃허브 계정 또는 회원가입을 통해 로그인할 수 있다.

| No | Task |
| --- | :------------------------------------------------------------------------ |
| 1-1 | 이미 발행한 OAuth 토큰이 있는 경우 바로 이슈 목록를 표시한다. |
| 1-2 | 아이디는 최소 6자리에서 16자리까지 입력할 수 있다. |
| 1-3 | 비밀번호는 최소 6자리에서 12자리까지 입력할 수 있다. |
| 1-4 | 아이디와 비밀번호가 모두 입력되었을 때 로그인 버튼이 활성화된다. |
| 1-5 | 로그인 버튼 클릭 시, 아이디와 비밀번호가 일치하지 않으면 에러를 표시한다. |
| 1-6 | 로그인을 하면 이슈 목록 페이지로 이동한다. |

<br>

#### 요구사항 2 : 이슈목록 - 기본

| No | Task |
| ----- | :---------------------------------------------------------------------------------------------------------------------------------- |
| 2-1 | 이슈목록 페이지는 기본으로 열린 이슈를 보여준다. |
| 2-1-1 | 이슈가 없는 경우 '이슈없음' 메시지를 보여준다. |
| 2-2 | 이슈 탭에는 열린 이슈, 닫힌 이슈 탭의 개수가 카운팅되어 표시된다. |
| 2-3 | 열린 이슈, 닫힌 이슈 탭을 클릭하면 해당하는 목록을 제공한다. |
| 2-4 | 이슈 목록에는 상태, 제목, 레이블, 이슈번호, 작성자 및 작성시간, 마일스톤, 담당자를 표시한다. (해당 값이 없을 경우 표시하지 않는다.) |
| 2-5 | 이슈 제목 버튼을 클릭하면 해당 이슈에 대한 상세화면으로 이동한다. |
| 2-6 | 레이블 탭을 누르면 레이블 목록 페이지로 이동한다. |
| 2-7 | 마일스톤 탭을 누르면 마일스톤 목록 페이지로 이동한다. |
| 2-8 | 레이블, 마일스톤 탭은 옆에 개수가 카운팅되어 표시된다. |

<br>

#### 요구사항 3 : 이슈목록 - 필터

| No | Task |
| ----- | :------------------------------------------------------------------------------------------------------ |
| 3-1 | 필터바 버튼을 클릭하면 이슈 필터 팝업이 뜬다. |
| 3-2 | 필터 종류 중 하나를 선택하면 |
| 3-2-1 | 이슈 필터가 닫힌다. |
| 3-2-2 | 검색창은 Filled 상태가 된다. |
| 3-2-3 | 검색창에 선택된 필터 검색어가 입력된다. |
| 3-2-4 | 목록에는 조건이 적용된 이슈만 나타난다. |
| 3-3 | 필터 팝업이 떠있을 때, 팝업 외 다른 영역을 클릭하면 팝업이 닫힌다. |
| 3-4 | 이슈 목록 우측상단의 조건버튼(담당자, 레이블, 마일스톤, 작성자)을 클릭하면 해당하는 조건팝업이 뜬다. |
| 3-4-1 | 조건 팝업이 떠있을 때, 팝업 외 다른 영역을 클릭하면 팝업이 닫힌다. |
| 3-4-2 | 다중 선택이 가능하다. |
| 3-5 | 이슈 목록 상단의 열린 이슈, 닫힌 이슈 탭을 클릭하면 |
| 3-5-1 | 검색창에 선택된 필터 검색어가 입력된다. |
| 3-5-2 | 목록에는 조건이 적용된 이슈만 나타난다. |

<br>

#### 요구사항 4 : 이슈목록 - 다중 선택

| No | Task |
| ----- | :----------------------------------------------------------------------------------------------------------------------------------------- |
| 4-1 | 체크 박스를 클릭하면 해당 이슈가 선택된다. |
| 4-1-1 | 선택한 개수만큼 이슈 목록 상단 영역에 카운팅되어 표시된다. |
| 4-2 | 체크 박스가 1개 이상 선택됐을 때, 이슈 목록 상단 우측 탭이 필터 버튼(담당자, 레이블, 마일스톤, 작성자 탭)에서 상태 수정 버튼으로 변경된다. |
| 4-2-1 | 모든 체크박스가 해제되면 다시 필터 버튼으로 돌아간다. |
| 4-3 | 이슈 목록 상단 영역의 체크 박스를 클릭하면 전체 선택 또는 전체 해제로 동작한다. |
| 4-4 | 이슈 목록 상단 우측의 상태 수정 버튼을 클릭하면 상태 변경 팝업이 나타난다. |
| 4-4-1 | 상태 변경 팝업이 떠있을 때, 팝업 외 다른 영역을 클릭하면 팝업이 닫힌다. |
| 4-5 | 팝업의 이슈 열기/닫기 버튼을 클릭하면 선택된 이슈에 오픈/클로즈 상태를 일괄 적용할 수 있다. |

<br>

#### 요구사항 5 : 새로운 이슈 작성

| No | Task |
| ----- | :---------------------------------------------------------------------------- |
| 5-1 | 제목이 입력되면 완료 버튼이 활성화 된다. |
| 5-2 | 본문을 작성하면 |
| 5-2-1 | 내용 작성 영역이 포커스되면 포커스 된 스타일이 적용된다.(하얀배경) |
| 5-2-2 | 내용 작성 영역 하단 우측에 띄어쓰기 포함 글자수를 표시한다. |
| 5-3 | 완료 버튼을 클릭하면 |
| 5-3-1 | 작성한 내용으로 이슈를 등록한다. |
| 5-3-2 | 새로 작성된 이슈의 상세 화면 페이지으로 이동한다. |
| 5-4 | 우측 상세정보영역(담당자, 레이블, 마일스톤)을 클릭하면 정보 선택 팝업이 뜬다. |
| 5-4-1 | 정보 선택 팝업이 떠있을 때, 팝업 외 다른 영역을 클릭하면 팝업이 닫힌다. |
| 5-4-2 | 다중 선택이 가능하다. |
| 5-5 | 파일 첨부하기 버튼을 클릭하면 이미지를 선택할 수 있는 창이 뜬다. |
| 5-5-1 | 이미지를 선택하면 서버에 업로드 된다. |
| 5-5-2 | 저장된 이미지 주소가 마크다운 형식으로 내용 작성 영역에 추가된다. |
| 5-6 | 작성 취소 버튼을 클릭하면 이슈 목록 화면으로 이동한다. |

<br>

#### 요구사항 6 : 이슈 상세

| No | Task |
| --- | :--- |
| 6-1 | 제목 편집 버튼을 클릭해 제목을 변경할 수 있다. |
| 6-1-1 | 제목 편집 버튼을 클릭하면 제목이 인풋창으로 변경된다. |
| 6-1-2 | 우측 버튼(제목 편집, 이슈 닫기)이 편집 취소, 편집 완료 버튼으로 변경된다. |
| 6-1-3 | 키보드로 입력하면 하얀 배경(포커스 스타일)으로 변경된다. |
| 6-1-4 | 편집 완료 버튼을 클릭하면 변경된 제목이 반영된다. |
| 6-1-5 | 편집 취소 버튼을 클릭하면 기존의 제목이 그대로 나타난다. |
| 6-2 | 이슈 닫기 버튼을 클릭해 이슈를 닫을 수 있다. |
| 6-2-1 | 이슈 닫기 버튼을 클릭하면 해당 이슈가 보관되고, 이슈 닫기 버튼이 다시 열기 버튼으로 변경된다. |
| 6-2-2 | 제목 아래 이슈 상태가 열린 이슈에서 닫힌 이슈로 변경된다. |
| 6-2-3 | 이슈 상태 텍스트(누가, 언제)를 변경한다. |
| 6-2-4 | 이슈가 닫혔다는 코멘트가 추가된다. |
| 6-3 | 코멘트를 남길 수 있다. |
| 6-3-1 | 입력창이 포커스되면 포커스 스타일로 변경된다. |
| 6-3-2 | 내용 작성 영역 하단 우측에 띄어쓰기 포함 글자수를 표시한다. |
| 6-3-3 | 내용을 작성하면 하단의 코멘트 작성 버튼이 활성화된다. |
| 6-3-4 | 코멘트 작성 버튼을 클릭하면 코멘트가 등록된다. |
| 6-4 | 파일 첨부하기 버튼을 클릭하면 파일을 첨부할 수 있다. (5-5와 동일) |
| 6-5 | 본인이 작성한 코멘트를 편집할 수 있다. |
| 6-5-1 | 편집 버튼을 클릭하면 코멘트 상자가 입력 상자로 변경된다. |
| 6-5-2 | 내용 작성은 6-3과 동일 |
| 6-5-3 | 하단에 편집 취소 버튼과 편집 완료 버튼이 나타난다. |
| 6-5-4 | 편집 취소 버튼을 클릭하면 입력 상자가 코멘트 상자로 변경된다. 내용은 그대로 |
| 6-5-5 | 편집 완료 버튼을 클릭하면 입력 상자가 코멘트 상자로 변경된다. 내용은 새로 입력한 내용 |
| 6-6 | 우측 상세정보영역(담당자, 레이블, 마일스톤)을 클릭하면 정보선택 팝업이 뜬다. |
| 6-6-1 | 정보 선택 팝업이 떠있을 때, 팝업 외 다른 영역을 클릭하면 팝업이 닫힌다. |
| 6-6-2 | 다중 선택이 가능하다. |
| 6-7 | 이슈 삭제 버튼을 클릭하면 이슈를 삭제할 수 있다. |
| 6-7-1 | 이슈를 삭제하면 이슈 목록 페이지로 이동한다. (기본 필터는 열린 이슈로 한다.) |

<br>

#### 요구사항 7 : 레이블 목록

| No | Task |
| --- | :--- |
| 7-1 | 레이블 탭을 클릭하면 레이블 목록 페이지로 이동한다. |
| 7-2 | 목록은 레이블 이름, 설명, 편집버튼, 삭제 버튼으로 구성된다. |
| 7-2-1 | 레이블 설명은 한 줄로 표시(특정 길이 넘어가면 말줄임 ... 표시)한다. |
| 7-2-2 | 레이블 설명이 없으면 표시하지 않는다. |
| 7-3 | 삭제 버튼을 클릭하면 해당 레이블이 삭제된다. |
| 7-3-1 | 삭제된 레이블을 갖고 있는 이슈들의 정보에서 삭제된 레이블을 제거한다. |
| 7-4 | 우측 상단 추가 버튼을 클릭하면 레이블을 추가할 수 있다. |
| 7-4-1 | 추가 버튼을 클릭하면 목록의 상단에 새로운 레이블 추가 입력창이 생성된다. |
| 7-4-2 | 레이블 이름이 입력되면 완료 버튼이 활성화된다. |
| 7-4-3 | 텍스트 색상은 어두운 색(검정)이 기본으로 선택된다. |
| 7-4-4 | 배경 색상은 #EFF0F6이 기본으로 선택된다. |
| 7-4-5 | 배경 색상 변경 버튼을 클릭 시 저장된 색상 중 랜덤으로 선택된다. |
| 7-4-6 | 배경 색상을 직접 키보드로 입력할 수 있다. |
| 7-4-7 | 배경 색상 입력 값이 유효하지 않으면 기본 색상(#EFF0F6)으로 적용된다. |
| 7-4-8 | 레이블 미리보기는 사용자 입력(이름, 설명, 배경색상, 텍스트색상)이 일정 ms이상 없을 때 최신화 된다. |
| 7-4-9 | 활성화된 완료 버튼을 클릭하면 레이블 목록 제일 아래에 새로 만든 레이블이 추가 된다. |
| 7-5 | 편집 버튼을 클릭하면 레이블을 편집할 수 있다. |
| 7-5-1 | 편집 버튼을 클릭하면 해당 목록의 레이블 아이템이 편집창으로 전환된다. |
| 7-5-2 | 취소 버튼을 클릭하면 편집창이 사라지고 기존 레이블 아이템으로 전환된다. |
| 7-5-3 | 활성화된 완료 버튼을 클릭하면 해당 레이블 아이템의 변경사항이 업데이트되고 편집창이 사라진다. |
| 7-5-4 | 편집창에서의 내용 입력은 7-4-2 ~ 7-4-8과 동일하다. |

<br>

#### 요구사항 8 : 마일스톤 목록

| No | Task |
| --- | :--- |
| 8-1 | 마일스톤 탭을 클릭하면 마일스톤 목록 페이지로 이동한다. 기본으로 열린 마일스톤을 보여준다. |
| 8-2 | 목록은 제목, 마감기한, 설명, 닫기 버튼, 편집 버튼, 삭제 버튼, 프로그래스 바, 열린 이슈 개수, 닫힌 이슈 개수로 구성된다. |
| 8-2-1 | 설명은 일정 길이가 넘어가면 다음 줄로 줄바꿈된다. 박스 크기도 입력에 따라 커진다. |
| 8-2-2 | 프로그래스 바의 진행률은 닫힌 이슈 개수 / 전체 이슈 개수로 계산한다. |
| 8-3 | 닫기 버튼을 클릭하면 마일스톤이 닫힌다. |
| 8-3-1 | 열린 마일스톤 목록을 업데이트 한다. |
| 8-3-2 | 닫힌 마일스톤의 갯수를 업데이트 한다. |
| 8-4 | 삭제 버튼을 클릭하면 마일스톤이 삭제된다. |
| 8-5 | 상단 우측의 추가 버튼을 클릭하면 마일스톤을 추가할 수 있다. |
| 8-5-1 | 추가 버튼을 클릭하면 입력 상자가 나타난다. |
| 8-5-2 | 추가 버튼이 닫기 버튼으로 변경된다. |
| 8-5-3 | 제목을 입력하면 완료 버튼이 활성화된다.|
| 8-5-4 | 완료일 입력시 숫자 입력 후 자동으로 -를 추가한다. |
| 8-6 | 활성화된 완료 버튼을 클릭하면 마일스톤을 추가한다. |
| 8-6-1 | 입력 상자가 사라진다. |
| 8-6-2 | 마일스톤 목록을 업데이트한다.|
| 8-6-3 | 마일스톤 목록 상단의 마일스톤 갯수를 업데이트한다. |
| 8-7 | 편집 버튼을 클릭하면 마일스톤을 편집할 수 있다.|
| 8-7-1 | 목록 아이템이 입력 상자로 변경된다. 하단에 취소 버튼과 완료 버튼이 있다. |
| 8-7-2 | 내용 입력은 8-5-3 ~ 8-6과 동일하다. |
| 8-7-3 | 취소 버튼을 클릭하면 편집이 취소된다. |