요구사항 분석서

이슈트래커 34조

로그인

• github oAuth(필수)
• id, password(선택)

이슈 목록 화면

• 이슈 목록
  • 제목, 마일스톤, 레이블, 이슈 번호, 이슈 작성 시간, 작성자, 담당자를 표시
  • 이슈 제목 클릭시 상세 화면 페이지로 이동
• New issue 버튼
  • 클릭시 새로운 이슈 생성화면으로 이동
• Labels 버튼
  • 클릭시 레이블 목록 화면으로 이동
  • 버튼 옆에 현재 사용하는 레이블 개수를 표시
• Milestone 버튼
  • 클릭시 마일스톤 목록 화면으로 이동
  • 버튼 옆에 현재 진행중인(오픈 상태인) 마일스톤 개수를 표시
• 체크 박스
  • 이슈 목록에서 선택한 개수만큼 이슈 목록 상단 영역에 표시 ex)1 selected
  • 이슈 목록 상단 영역의 체크 박스를 클릭하면 전체선택 또는 전체해제 되어야함
• 목록 필터
  • Author, Label, Milestones, Assignee 필터 버튼
  • 체크 박스가 하나라도 체크되면 목록 필터 버튼 사라짐
• Mark as 버튼
  • 체크 박스가 하나라도 체크되면 나타남
  • 모든 체크 박스가 해제되면 목록 필터 버튼으로 돌아감
  • Mark as 버튼 클릭시 드롭다운 목록이 생성
  • 팝업창에는 Open, Closed 버튼이 있으며 선택된 이슈들의 상태를 일괄 적용할 수 있다.
  • 적용 후 팝업은 닫히고, 변경된 상태가 반영되어 이슈 목록이 업데이트됨

이슈 목록 필터 기능

• Filters 버튼
  • Filters 버튼을 클릭시 드롭다운 목록이 나타남
  • 팝업창에는 Open issues, Your issues, Everything assigend to you, Everyting mentioning you, Closed issues 총 5가지 옵션이 존재
  • 필터 종류 중 하나를 선택하면 필터 종류 드롭다운이 닫히면서 필터 조건이 적용된 목록만 나타남(옵션은 하나만 적용됨)
  • 필터 종류를 선택하지 않고 다른 영역 클릭 시 팝업이 닫힌다.
• 필터 초기화 버튼
  • 필터 적용 상태일 때 필터 버튼과 목록 사이에 생성
  • 해당 버튼을 누르면 적용된 필터 초기화후 초기 상태로 변함(is:issue is:open)
• 필터 검색창
  • 필터 적용 상태가 텍스트 형식으로 표시됨
  • 초기 상태는 is:issue is:open이다.(오픈된 이슈 목록이 나타남)
  • 검색창의 텍스트를 모두 지우면 "Search all issues"라고 연하게 텍스트가 나타난다. 이후 엔터를 누르면 모든 이슈 목록이 나타난다.
  • 사용자가 검색창에 적용된 텍스트를 수정하여 엔터를 하면 해당 텍스트에 맞는 필터가 적용된다.
  • 초기 상태가 아닌 경우 필터 초기화 버튼 나타남
• 추가 필터
  • 추가 필터 조건은 작성자, 레이블, 마일스톤, 담당자 총 4가지이다.
  • 각 추가 필터 버튼을 누르면 드롭다운이 나타난다.
  • 레이블, 마일스톤, 담당자 목록에는 "Unlabeled", "Issues with no milestone", "Assigned to nobody" 옵션을 선택 할 수 있다.
  • 원하는 목록을 선택하면 드롭다운이 닫히면서 해당 값의 조건이 적용된 목록만 필터링 된다.
  • 드롭다운 외 영역을 클릭하면 필터가 적용되지 않고 드롭다운이 닫힌다.

새로운 이슈 생성 화면

• 작성자의 프로필이 글 작성 왼쪽 영역에 표시됨.
• 글 작성 영역에서 프로필 오른쪽에 제목 작성 영역이 있음.
  • 제목 작성을 해야 오른쪽 하단의 Submit new issue 버튼 활성화.
• write 밑 본문 작성 부분에 새로운 이슈 내용을 작성할 수 있음.
• 이슈 내용 작성 중 글자를 타이핑하지 않고 2초가 지날 시 내용 영역 우측 하단에 현재 입력된 글자 수가 2초간 나타났다 사라짐.
• 본문 작성 아래쪽에 Attach files by selecting here 부분을 클릭 시 이미지를 선택할 수 있는 창이 뜸. 이미지 선택시 서버에 업로드, 저장된 이미지 주소가 마크다운 형식으로 작성 영역에 추가.
• 왼쪽 하단의 cancel 버튼을 누르면 이슈 목록 화면으로 이동.
• 오른쪽 하단의 Submit new issue 버튼을 누르면 작성한 사항을 저장하고 이슈 상세 화면으로 이동.
• 글 작성 영역 오른쪽에 Assigness, Labels, Milestone 을 설정할 수 있는 부분이 있음.
  • 각각은 클릭 시 글씨와 톱니바퀴가 파란색으로 변경.
• Assigness 영역
  • 초기값: No one--assign yourself
  • 클릭 시 담당자 목록 드롭다운이 뜨고 선택 가능. 선택시 해당 담당자로 텍스트가 변경됨.
  • assign yourself 텍스트를 클릭 시 바로 본인이 담당자로 할당됨.
  • 드롭다운 상단 글: Assign up to 10 people to this issue
  • 드롭다운 내용으로 프로필과 이름이 나옴.
• Labels 영역
  • 초기값: Not yet
  • 클릭 시 레이블 목록 드롭다운이 뜨고 선택 가능. 선택시 해당 레이블로 변경. 레이블 색상 적용.
  • 드롭다운 상단 글: Apply labels to this issue
  • 드롭다운 내용으로 각각의 label이 색깔, 내용을 포함해 나옴.
• Milestone 영역
  • 초기값: No milestone
  • 클릭 시 마일스톤 드롭다운이 뜨고 선택 가능. 선택시 어떤 마일스톤을 선택했는지 알 수 있도록 변경.
  • 드롭다운 상단 글: Set milestone
  • 드롭다운 내용으로 milestone 종류가 나옴.
  • 해당 마일스톤에 대한 진행률도 보임.

이슈 상세 화면

• 이슈 제목, 이슈 번호, 오픈 여부, 작성자, 해당 이슈가 오픈된 시간, 코멘트 개수 표시
• 이슈 제목 수정 기능
  • 이슈 제목 오른쪽에 Edit 버튼이 위치한다.
  • 버튼 클릭 시 이슈 제목 수정이 가능하도록 제목이 input 박스로 변경되며 Edit 버튼은 Save, Cancel 버튼으로 변경됨
  • 제목 수정 후 Save 버튼 클릭 시 수정된 제목 반영, 원래의 제목 디자인으로 돌아감
  • Cancel 버튼 클릭 시 아무 내용도 반영되지 않고 원래의 제목으로 돌아감
• 이슈 작성 화면과 동일하게 Assignees와 Labels, Milestone이 표시됨
• 이슈 작성자의 프로필과 아이디, 작성 시간, 이슈 내용이 코멘트 디자인으로 표시됨
• 다른 사용자가 단 코멘트도 같은 디자인으로 표시됨 (Edit 버튼은 없다.)
• 이슈 작성자가 누구인지 알 수 있게 표시. ex) Owner, Author...
• 이모티콘 기능 (선택)
• 자신이 작성한 이슈(또는 코멘트) 수정 기능
  • 자신이 작성한 이슈(또는 코멘트) Edit 버튼 클릭 시 내용 수정 가능한 텍스트 박스 형태로 변경됨
  • 상단 Edit 버튼 사라지고 텍스트 박스 하단에 Cancel과 Update comment 버튼 나타남
  • 내용 작성 영역 우측 하단에 현재 입력된 글자 수가 2초간 나타났다 사라짐
  • Attach files... 영역 클릭 시 이미지 첨부 가능
  • 내용 수정 후 Update comment 버튼 클릭 시 수정 내용 반영, 원래 코멘트 디자인으로 돌아감
  • Cancel 버튼 클릭 시 아무 내용도 반영되지 않고 원래의 코멘트 디자인으로 돌아감
• 담당자, 레이블, 마일스톤 영역도 동일한 동작으로 수정 가능
• 코멘트 작성 영역
  • 코멘트 목록 최하단에 새로운 코멘트 작성 영역 표시
  • 코멘트 편집 화면과 동일한 구조를 갖는다.
  • Cancel, Update comment 대신 Close issue와 Comment 버튼이 표시된다.
• 이슈 클로즈, 오픈
  • Close issue 버튼을 클릭하면 해당 이슈가 클로즈 되고 Reopen issue 버튼으로 변경된다.
  • Reopen issue 버튼 클릭 시 해당 이슈가 다시 오픈되고 Close issue로 버튼이 다시 바뀐다.
• 코멘트 작성
  • 코멘트 내용 작성 시 Comment 버튼 활성화
  • 아무 내용 없으면 버튼 비활성화
  • 내용 작성 후 Comment 버튼 클릭 시 상단의 다른 코멘트들과 같은 디자인으로 코멘트가 달린다.

레이블 목록 화면

• 마일스톤 버튼을 누르면 마일스톤 목록 화면으로 이동
• 전체 레이블 목록 표시
  • 레이블 목록 상단에 전체 레이블 개수를 표시 ex) 8 labels
  • 레이블 이름과 배경색이 표시
  • 레이블 설명을 한줄로 표시
  • 모든 레이블 목록은 우측에 Edit과 Delete 버튼을 함게 가진다.
• New label 버튼
  • 버튼 클릭 시 새로운 레이블을 추가할 수 있는 영역이 나타난다.
  • 레이블 이름과 색깔 입력 시 반영된 형태를 볼수 있는 미리보기 컴포넌트가 있다.
  • Label name을 입력할 수 있는 input 창이 있다.(입력시에 미리보기 컴포넌트가 업데이트 된다.)
  • 레이블 설명을 입력할 수 있는 input 창이 있다.(작성하지 않아도 레이블을 생성할 수 있다.)
  • 색상 코드는 초기값이 입력되어 있다.
  • 리프레시 버튼을 누르면 랜덤하게 색상 코드를 생성해서 변경해준다.
  • 색생 코드를 변경하면 리프레시 버튼과 미리보기의 색상이 변경된다.
  • Cancel 버튼을 누르면 새로운 레이블 추가 영역이 사라진다.
  • Create label버튼을 누르면 입력한 내용내로 새로운 레이블이 추가되고 레이블 추가 영역은 사라진다.
• Delete 버튼
  • 버튼을 누르면 확인 메세지 팝업이 뜬다.
  • 확인 버튼을 누르면 해당 레이블이 삭제되고 목록화면에 반영된다.
  • 취소 버튼을 누르면 레이블 삭제는 진행되지 않는다.
  • 해당 레이블을 가지고 있는 issue에 삭제가 모두 적용된다.
• Edit 버튼
  • 버튼 클릭시 해당 레이블 목록 바로 아래에 레이블을 편집할 수 있는 영역이 나타난다.
  • 레이블 추가 영역과 동일한 기능을 가지고 있으며 Delete 버튼이 우측 상단에 추가된다.
  • 레이블 추가 영역의 Create label버튼 대신 Save changes 버튼이 위치한다.

마일스톤

• 마일스톤 버튼 누를시 초기 화면은 마일스톤 목록 화면

마일스톤 목록 화면

• Labels, Milestones버튼( 마일 스톤 탭 하이라이트)

  • Labels 버튼 누를시에 labels 목록으로 갈 수 있다

• New milestone 버튼

  • 누르면 새로운 마일 스톤을 만들수 있는 페이지로 이동

• 전체 마일스톤 목록이 표시 된다.

• 바디 헤더에는 milestone의 icon + open 갯수 + "Open" 과 체크 아이콘 + closed 갯수 + "Closed"

• 마일스톤

  • 마일스톤 이름과 완료일이 표시된다. 완료일이 없다면 “No due date”와 같이 표시한다.
  • 마일스톤에 대한 설명이 한 줄로 표시된다. 설명이 없다면 표시하지 않는다.(일정 이상 길어지면 ...으로 나타나도록 설정)
  • 마일스톤 목록 우측에 진행률과 해당 마일스톤과 관련된 오픈/클로즈 이슈의 개수가 표시된다.
  • Edit 버튼
    • 누를 시에 마일스톤 편집 화면으로 이동
  • Close 버튼
    • 누를 시에 상태가 closed 로 변함
  • Delete 버튼
    • 누를 시에 해당 milestone만 삭제됨

마일스톤 생성 화면

• New milestone 텍스트 있음

• Create a new milestone to help organize your issues and pull requests. Learn more about milestones and issues. 텍스트 있음

• Title 입력창

• Due date 입력창

  • 선택 입력 사항 공백으로 놔둘수 있음
  • “연도. 월. 일.” 형식으로 이루어진 유효한 날짜값인지 확인한다. 유효하지 않을 경우 해당 값을 빨간색으로 표시한다.

• Description

  • 선택 입력 사항 공백으로 놔둘수 있음

• Create milestone 버튼

  • 버튼을 누르면 입력한 내용대로 새로운 마일스톤이 만들어지고, 마일스톤 목록 화면으로 이동한다

마일스톤 수정 화면

• Labels, Milestones버튼( 마일 스톤 탭 하이라이트)
  • Labels 버튼 누를시에 labels 목록으로 갈 수 있다
• Title 입력창
• Due date 입력창
  • 선택 입력 사항 공백으로 놔둘수 있음
  • “연도. 월. 일.” 형식으로 이루어진 유효한 날짜값인지 확인한다. 유효하지 않을 경우 해당 값을 빨간색으로 표시한다.
• Description
  • 선택 입력 사항 공백으로 놔둘수 있음
• cancel 버튼
  • Cancel 버튼을 누르면 아무런 반영 없이 마일스톤 목록 화면으로 돌아간다.
• Close milestone 버튼
  • (설명 없는거 보니 선택 사항인듯?)
• Save changes 버튼
  • Save changes 버튼을 누르면 입력한 내용대로 마일스톤이 수정되고, 마일스톤 목록 화면으로 돌아간다.