이슈트래커 (FE)
첫 화면 (로그인)
이슈 트래커 첫 화면은 다음과 같다.
➊ 아이디는 최소 6자리에서 16자리까지 입력할 수 있다.
➋ 비밀번호는 최소 6자리에서 12자리까지 입력할 수 있다.
�➌ 로그인은 GitHub OAuth를 지원해야 한다. (필수)
- 인증되고 나면 이슈 목록 화면으로 넘어간다.
- 앱이 시작할 때 이미 발행한 OAuth 토큰이 있는 경우 이 화면은 생략하고 바로 이슈 목록 화면을 표시한다.
➍ 로그인과 회원가입 기능은 선택 사항이다. ➌의 GitHub OAuth 방식을 우선 구현한다.
이슈 목록 화면
이슈 목록 화면은 다음과 같다.
➊ 이슈 목록을 보여준다.
- 오픈 상태의 이슈만 보여주는 게 기본 상태이다.
- 제목, 마일스톤, 레이블, 이슈 번호, 이슈 작성 시간, 작성자, 담당자를 표시한다. 해당 값이 없으면 보여주지 않아도 된다.
- 이슈 제목을 선택하면 선택한 이슈에 대한 상세 화면 페이지로 이동한다.
➋ New issue 버튼을 누르면 새로운 이슈를 생성하는 화면으로 이동한다.
➌ Labels 버튼을 누르면 레이블 목록 화면으로 이동한다.
- Labels 버튼 옆에 현재 사용하는 레이블 개수를 같이 표시해준다.
➍ Milestones 버튼을 누르면 마일스톤 목록 화면으로 이동한다.
- Milestones 버튼 옆에 현재 진행 중인(오픈 상태인) 마일스톤 개수를 같이 표시해준다.
➊ 이슈 목록에서 체크 박스가 다음과 같이 동작한다.�- 이슈 목록에서 선택한 개수만큼 이슈 목록 상단 영역에 표시된다.
- 이슈 목록 상단 영역의 체크 박스를 클릭하면 전체선택 또는 전체해제로 동작한다.
➋ 이슈 목록 상단 영역 우측에는 Author, Label, Milestones, Assignee 네 개의 필터 버튼이 위치한다. 자세한 내용은 이슈 목록 필터 슬라이드 참고.
➌ 이슈 목록에서 체크 박스를 하나라도 클릭하면 이슈 목록 상단 영역 우측에 “Mark as” 버튼이 나타난다. 모든 체크 박스가 해제되면 다시 “Mark as” 버튼은 사라지고 ➋번과 같이 필터 버튼으로 돌아간다.
➍ “Mark as” 버튼을 클릭하면 다음과 같은 팝업이 뜬다.
- 팝업에서 Open 또는 Closed를 선택하여 체크 박스로 선택된 모든 이슈에 오픈/클로즈 상태를 일괄 적용할 수 있다.
- 적용 후 팝업은 닫히고, 변경된 상태가 반영되어 이슈 목록이 업데이트된다.
전체선택/전체해제로 동작
이슈 목록 필터 기능
➊ 이슈 목록 화면 왼쪽 상단에 [Filters] 버튼을 클릭하면 다음과 같이 필터 종류 팝업이 뜬다.
- 필터 종류는 열린 이슈들/내가 작성한 이슈들/나한테 할당된 이슈들/내가 댓글을 남긴 이슈들/닫힌 이슈들 총 5가지 옵션이 있다.
- 필터 종류 중 하나를 선택하면 필터 종류 팝업이 닫히면서 바로 필터 조건이 적용된 목록만 나타난다.
- 필터 종류를 선택하지 않고 팝업 외 다른 영역을 클릭하면 필터가 적용되지 않고 팝업이 닫힌다.
➋ 필터가 적용된 상태일 땐, 다음과 같이 필터 버튼과 목록 사이에 필터를 초기화 할 수 있는 버튼이 생긴다.
- 해당 버튼을 누르면 적용된 필터가 초기화되고 이슈 목록도 원래대로 오픈된 이슈 전체 목록이 나타나게 된다.
➌ [Filters] 버튼 옆에 있는 검색창에 필터 적용 상태가 텍스트 형식으로 표시된다.
- 초기 상태는 is:open is:issue 이다. (오픈된 이슈 목록이 나타남)
- 반드시 is:open… 이런 형식으로 표시될 필요는 없다. 자유롭게 알아볼 수 있도록 표시한다.
- 검색창에 있는 텍스트를 모두 지우면 검색창에 “Search all issues”라고 연하게 나타나며, 검색창의 모든 텍스트를 지운 채로 엔터를 누르면 클로즈된 이슈를 포함한 모든 이슈 목록이 나타난다. “Search all issues” 상태일때도 ➋번 동작이 동일하게 적용된다.
➊ 이슈 목록 상단 영역에 다음과 같이 추가 필터 조건이 위치한다.
- 추가 필터 조건은 작성자, 레이블, 마일스톤, 담당자 총 4가지이다.
- 각 조건을 선택하면 다음과 같이 목록 팝업이 뜬다.
- 레이블, 마일스톤, 담당자 목록에는 “레이블 없음", “마일스톤 없음", 담당자 없음" 옵션을 선택할 수 있다.
- 각 조건의 목록 팝업에서 원하는 목록을 선택하면 팝업이 닫히면서 해당 값의 조건이 적용된 목록만 필터링 되어 나타난다.
- 다른 필터링 기능과 마찬가지로 이전 슬라이드의 ➋번과 ➌번 기능이 적용된다.
- 각 조건 목록 팝업에서 아무 값도 선택하지 않고 팝업 외 영역을 클릭하면 필터가 적용되지 않고 팝업이 닫힌다.
- 모든 필터는 함께 조합해서 사용할 수 있다.
- 필터링 결과 보여줄 목록이 없다면 다음과 같이 표시된다.
새로운 이슈 생성 화면
0 characters
새로운 이슈를 작성하는 화면은 다음과 같다.
➊ 작성자의 프로필과 제목 작성 영역이 나타난다.
➋ 새로운 이슈의 내용을 작성할 수 있다.
- 이슈 내용 작성 중, 글자를 타이핑하지 않고 2초가 지나면 내용 영역 우측 하단에 현재 입력된 글자 수가 2초간 나타났다가 사라진다.
➌ 해당 영역을 클릭하면 이미지를 선택할 수 있는 창이 뜬다. 이미지를 선택하면 서버에 업로드되고, 저장된 이미지 주소가 마크다운 형식으로 내용 작성 영역에 추가된다.
➍ [Cancel] 버튼을 누르면 아무런 변화 없이 이슈 목록 화면으로 이동한다.
➎ 이슈의 제목을 입력하면 [Submit new issue] 버튼이 다음과 같이 활성화된다. 해당 버튼을 누르면 작성한 사항을 저장하고 이슈 상세 화면으로 이동한다.
➊ Assignees 부분을 클릭하면 담당자 목록 팝업이 뜨고 선택할 수 있다. 담당자 목록에서 담당자를 선택하면 No one 텍스트가 다음과 같이 할당된 담당자로 변경된다.
- assign yourself 텍스트를 클릭하면 바로 No one 텍스트가 없어지고 본인이 담당자로 할당된다.
➋ Labels 부분을 클릭하면 레이블 목록 팝업이 뜨고 선택할 수 있다. 레이블 목록에서 레이블을 선택하면 None yet 텍스트가 다음과 같이 어떤 레이블이 선택됐는지를 알 수 있도록 변경된다.
➌ Milestone 부분을 클릭하면 마일스톤 목록 팝업이 뜨고 선택할 수 있다. 마일스톤 목록에서 마일스톤을 선택하면 No milestone 텍스트가 다음과 같이 어떤 마일스톤을 선택했는지를 알 수 있도록 변경된다.
이슈 상세 화면
이슈 목록에서 이슈를 선택한 후 나타나는 상세 화면은 다음과 같다.
�➊ 이슈 제목, 이슈 번호, 오픈 여부, 작성자, 해당 이슈가 오픈된 시간, 코멘트 개수를 표시한다.
➋ 이슈 제목 오른쪽에는 [Edit] 버튼이 있고, 버튼을 클릭하면 이슈 제목을 수정할 수 있도록 제목이 input 박스로 변경되며 [Edit] 버튼은 [Save], [Cancel] 버튼으로 바뀐다.
- 제목 수정 후 [Save] 버튼을 누르면 수정된 제목이 반영되며 원래의 제목 디자인으로 돌아간다.
- [Cancel] 버튼을 누르면 아무 내용도 반영되지 않고 원래의 제목으로 돌아간다.
➌ 이슈 작성 화면과 동일하게 Assignees와 Lables, Milestone이 표시된다.
➍ 이슈 작성자의 프로필과 아이디, 작성 시간, 이슈 내용이 코멘트 디자인으로 표시된다. 다른 사용자가 단 코멘트도 같은 디자인으로 표시된다. 다만 [Edit] 버튼은 없다.
➎ 이슈 작성자가 누군지 알 수 있게 표시한다. ex) Owner, Author..
- 이모티콘 기능은 선택사항이다.
➊ 자신이 작성한 이슈(또는 코멘트)에서 [Edit] 버튼을 누르면 내용을 수정할 수 있도록 같은 화면에서 다음과 같이 텍스트 박스 형태로 변경된다.
- 상단 [Edit] 버튼은 사라지고 텍스트 박스 하단에 [Cancel]과 [Update comment] 버튼이 나타난다.
- 새로운 이슈를 생성하는 화면과 동일하게 내용 작성 영역 우측 하단에 현재 입력된 글자 수가 2초간 나타났다 사라지는 기능이 있으며, “Attach files…” 영역을 누르면 이미지를 첨부할 수 있다.
- 내용 수정 후 [Update comment] 버튼을 누르면 수정된 내용이 반영되고, 원래의 코멘트 디자인으로 돌아간다.
- [Cancel] 버튼을 누르면 아무 내용도 반영되지 않고 원래의 코멘트 디자인으로 돌아간다.
➋ 담당자, 레이블, 마일스톤 영역도 새로운 이슈를 작성하는 화면과 동일한 동작으로 수정할 수 있다.
0 characters
0 characters
➊ 코멘트 목록 최하단에는 새로운 코멘트를 작성할 수 있는 영역이 표시된다.
- 코멘트 편집 화면과 동일한 구조를 갖는다. 다만 [Cancel], [Update comment] 대신 [Close issue]와 [Comment] 버튼이 표시된다.
➋ [Close issue] 버튼을 클릭하면 해당 이슈가 클로즈되고 [Reopen issue]로 버튼이 변경된다. [Reopen issue] 버튼을 다시 클릭하면 해당 이슈가 다시 오픈되고 [Close issue]로 버튼이 다시 바뀐다.
- 화면은 이슈 상세 화면 그대로 유지된다.
➌ 코멘트 내용을 작성하면 [Comment] 버튼이 활성화된다. 아무 내용도 없으면 다시 버튼이 비활성화된다.
- 내용 작성 후 [Comment] 버튼을 누르면 상단의 다른 코멘트들과 같은 디자인으로 코멘트가 달린다.
레이블 목록 화면
레이블 목록 화면은 다음과 같다.
�➊ 현재 화면이 레이블 목록 화면이라는 걸 알 수 있도록 표시한다. 마일스톤 버튼을 누르면 마일스톤 목록 화면으로 이동한다.
➋ 전체 레이블 목록이 표시된다.
- 레이블 목록 상단에 전체 레이블 개수가 표시된다.
- 레이블 이름과 배경색이 표시된다.
- 레이블 설명이 한 줄로 표시된다.
- 모든 레이블 목록은 우측에 Edit과 Delete 버튼을 함께 가진다.
➌ 레이블 목록 화면 상단 우측에 [New label] 버튼이 위치한다.
➍ 레이블 목록에서 특정 레이블의 Delete 버튼을 누르면 “정말 이 레이블을 삭제하시겠습니까?” 와 같은 확인 메세지 팝업이 뜬다.
- 확인 메세지 팝업에서 [확인] 버튼을 누르면 해당 레이블은 삭제되고, 레이블 목록 화면에도 반영되어 업데이트된다.
- 확인 메세지 팝업에서 [취소] 버튼을 누르면 레이블 삭제는 진행되지 않는다.
[New label] 버튼 클릭 시, 다음과 같은 새로운 레이블을 추가할 수 있는 영역이 나타난다. 한 번 더 클릭하면 해당 영역이 다시 사라진다.
➊ 레이블 이름과 색깔 입력 시 바로 이곳에 반영되어, 만들어질 레이블의 모양을 미리 확인할 수 있다.
➋ 레이블 이름을 입력할 수 있다. 이름을 입력하면 ➊번의 텍스트가 변경된다.
➌ 레이블 설명을 입력할 수 있다. 레이블 설명은 옵션값이다. 반드시 입력하지 않아도 레이블을 생성할 수 있다.
➍ 색상 코드는 초기값이 입력되어 있고, 해당 색깔이 색상 코드 왼쪽 리프레시 버튼에 표현된다.
- 사용자가 다른 색상 코드를 입력해서 변경할 수 있다.
- 리프레시 버튼을 누르면 랜덤하게 색상 코드를 생성해서 변경해준다.
- 색상 코드가 변경되면 리프레시 버튼 배경색과 함께 ➊번의 색깔도 같이 변경된다.
➎ Cancel 버튼을 누르면 아무런 반영 없이 새로운 레이블 추가 영역이 사라지고 이전 슬라이드와 같이 레이블 목록만 보여진다.
➏ 레이블 이름을 입력하면 Create label 버튼이 활성화된다.
- Create label 버튼을 누르면 입력한 내용대로 새로운 레이블이 추가되고, 레이블 추가 영역이 사라진다.
레이블 추가 영역
레이블 목록에서 [Edit] 버튼 클릭 시, 다음과 같이 해당 레이블 목록 바로 아래에 레이블을 편집할 수 있는 영역이 나타난다.
➊ 레이블 이름과 색깔 변경 시 바로 이곳에 반영되어, 만들어질 레이블의 모양을 미리 확인할 수 있다.
➋ 레이블 이름을 수정할 수 있다. 이름을 수정하면 ➊번의 텍스트가 변경된다.
➌ 레이블 설명을 수정할 수 있다. 레이블 설명은 옵션값이다. 따라서 빈칸으로도 수정할 수 있다.
➍ 레이블 추가 영역과 동일하게 동작한다. 색상 코드가 변경되면 리프레시 버튼 배경색과 함께 ➊번의 색깔도 같이 변경된다.
➎ Cancel 버튼을 누르면 아무런 반영 없이 레이블 편집 영역이 사라지고 이전 슬라이드와 같이 레이블 목록만 보여진다.
➏ Save changes 버튼을 누르면 입력한 내용대로 레이블이 수정되고, 레이블 편집 영역이 사라진다.
레이블 편집 영역
마일스톤 목록 화면
마일스톤 목록 화면은 다음과 같다.
�➊ 현재 화면이 마일스톤 목록 화면이라는 걸 알 수 있도록 표시한다. 레이블 버튼을 누르면 레이블 목록 화면으로 이동한다.
➋ 전체 마일스톤 목록이 표시된다.
- 마일스톤 이름과 완료일이 표시된다. 완료일이 없다면 “No due date”와 같이 표시한다.
- 마일스톤에 대한 설명이 한 줄로 표시된다. 설명이 없다면 표시하지 않는다.
➌ 마일스톤 목록 우측에 진행률과 해당 마일스톤과 관련된 오픈/클로즈 이슈의 개수가 표시된다.
➍ 마일스톤 진행률 아래에 Edit, Close, Delete 버튼이 위치한다. [Edit] 버튼을 누르면 마일스톤 편집 화면으로 이동한다.
➎ 마일스톤 목록 화면 상단 우측에 [New milestone] 버튼이 위치한다. 해당 버튼을 누르면 새로운 마일스톤을 생성하는 화면으로 이동한다.
새로운 마일스톤 생성 화면은 다음과 같다.
�➊ 마일스톤 제목을 입력할 수 있다.
➋ 마일스톤 완료 날짜를 입력할 수 있다. 완료 날짜는 옵션값이다. 반드시 입력하지 않아도 마일스톤을 생성할 수 있다.
- “연도. 월. 일.” 형식으로 이루어진 유효한 날짜값인지 확인한다. 유효하지 않을 경우 해당 값을 빨간색으로 표시한다.
➌ 마일스톤에 대한 설명을 작성할 수 있다. 설명도 옵션값이다. 반드시 입력하지 않아도 마일스톤을 생성할 수 있다.
➍ [Create milestone] 버튼을 누르면 입력한 내용대로 새로운 마일스톤이 만들어지고, 마일스톤 목록 화면으로 이동한다.
마일스톤 편집 화면은 다음과 같다. 새로운 마일스톤 생성 화면과 거의 유사하다.
➊ 현재 화면이 마일스톤 화면이라는 걸 알 수 있도록 표시한다. 레이블 버튼을 누르면 레이블 목록 화면으로 이동한다.
�➋ 마일스톤 제목을 수정할 수 있다.
➌ 마일스톤 완료 날짜를 수정할 수 있다. 완료 날짜는 옵션값이다. 따라서 빈칸으로 수정해도 변경사항을 적용할 수 있다.
- 새로운 마일스톤 생성과 동일하게 “연도. 월. 일.” 형식으로 이루어진 유효한 날짜값인지 확인한다. 유효하지 않을 경우 해당 값을 빨간색으로 표시한다.
➍ 마일스톤에 대한 설명을 수정할 수 있다. 설명도 옵션값이다. 반드시 입력하지 않아도 마일스톤을 생성할 수 있다.
➎ Cancel 버튼을 누르면 아무런 반영 없이 마일스톤 목록 화면으로 돌아간다.
➏ Save changes 버튼을 누르면 입력한 내용대로 마일스톤이 수정되고, 마일스톤 목록 화면으로 돌아간다.