FE

FrontEnd

요구사항 분석 정리

페이지

3. 이슈 페이지 (이슈 목록)

Events 이슈 목록

이슈 제목 클릭 → 상세 페이지
레이블 탭 클릭 → 레이블 페이지 이동
마일스톤 탭 클릭 → 마일스톤 목록 페이지 이동
이슈 작성 버튼 클릭 → 이슈 작성 페이지 이동

Action 이슈 목록

이슈 목록 Fetch : {”type”: “GET_ISSUE” }
레이블 목록 Fetch : {”type”: “GET_LABEL” }
마일스톤 목록 Fetch : {”type”: “GET_MILESTONE” }

State 이슈 목록

issues: [
	{
		id:1, 
		number: 3, // 이슈 고유값
                status:'open', 
                title:'로그인 페이지 기능 작업', 
                manager:['muffin', 'cola'], 
                labels: ['feat', 'sub', 'bug'], 
                milestone: '1주차 이슈트래커', 
                author: ['name': 'muffin', 'iamgeUrl': 'http://xxx'], 
                date: '2022-12-17T03:24:00'
        }
]

labels: [	
	{
		id: 1,
		title: 'feat',
		description: 'feature...',
		bgColor: '#123456',
		textColor: '#ffffff',
	}
]

milestones: [
	{
		id: 1,
		title: 'week1 milestone',
          	author: ['name': 'muffin', 'iamgeUrl': 'http://xxx'], 
		description: '...',
		dueDate: '2022-06-19',
		issues: [ {}, {}, {} ], // 닫힌 이슈 / 전체 이슈 (진행률)
	}
]

4-9. 이슈 페이지 (이슈 목록 필터)

Events 이슈 필터

이슈 필터 클릭 → 검색 필터 선택창 팝업
팝업창 이벤트
- 필터 종류중 하나 클릭 → 팝업창 닫히면서 + 선택한 필터가 검색창에 채워짐
- 아무것도 선택하지 않고 팝업 외 다른 영역 클릭 → 팝업 닫힘

검색창 입력 이벤트

필터링 조건에 해당하는 명령어를 입력후 Submit → 5가지 필터 상태에 반영

// 검색어 필터 선택시 --> Input에 입력되는 값
is:open --> is:open
is:closed --> is:closed
author:@me --> is:open author: mjsdo
assignee:@me --> is:open assignee: mjsdo
comment:@me --> is:open comment: mjsdo

/*
  검색어 >> 필터 명령어로만 검색이 되는데, 
  나중에 제목으로도 검색되도록?
*/

Action 이슈 목록

payload : ‘open’, ‘close’, ‘mine’, ‘assignedToMe’ ‘comment’

이슈 필터시 목록 Fetch : (payload) ⇒ {”type”: “GET_ISSUE_FILTER”, payload}
담당자, 레이블, 마일스톤, 작성자는 클릭시 필터 팝업창이 띄워지면서 따로 액션없이 각 컴포넌트에서 atom을 구독하는 state를 가져와서 뿌려준다.
담당자, 레이블, 마일스톤, 작성자 필터 팝업에서 각 목록 클릭 시 ⇒ 기존 State 객체에서 클릭한 filter 속성만 변경 후 저장

State 이슈 필터 목록

// 전부 다 이슈 필터

// 검색어 필터
searchFilter: [
	open: boolean,
	close: boolean,
	mine: boolean,
	assignedToMe: boolean,
	comment: boolean,
]

// 담당자 필터 (Assignee)
assignee: [
	{ user: null, filter: true },
	{ user: 'nickname', filter: false },
	{ user: 'nickname', filter: false },	
]

// 레이블 필터
label: [
	{ title: null, filter: true },
	{ title: 'feat', filter: false },
	{ title: 'bug', filter: false },
]

// 마일스톤 필터
milestone: {
	{ title: null, filter: true },
	{ title: '마일스톤1', filter: false },
	{ title: '마일스톤2', filter: false },
}

// 작성자 필터 (Author)
author: [
	{ user: null, filter: true },
	{ user: 'nickname', filter: false },
	{ user: 'nickname', filter: false },	
]

10-11. 이슈 목록 다중선택

Events 이슈 체크박스

각 이슈 체크 박스 클릭 ⇒ (담당자,레이블,마일스톤,작성자) 탭 대신 상태 수정 탭이 보여진다.
상태 수정 버튼 클릭 ⇒ 팝업
- 선택한 이슈 열기/닫기 버튼 클릭 ⇒ 팝업 닫힘

Action 이슈 체크박스

이슈 체크 박스 하나라도 클릭시 ⇒ 탭을 감싸고 있는 컴포넌트에서 하위 컴포넌트 상태 탭으로 변경
상태 변경 팝업에서 선택한 이슈들 열기 or 닫기 클릭 시 ⇒ Fetch : (payload) ⇒ {”type”: PATCH_ISSUE_STATUS, payload} // payload: 체크한 issue id를 담는 배열

State 이슈 체크박스

// recoil selector를 이용하여 구현 해보기
[
	{
		issue: issue{},
		checked: true,
	},
	{
		issue: issue{},
		checked: false,
	}
]

12-14. 이슈 작성 페이지

Events 이슈 작성 페이지

파일 첨부하기 버튼 클릭 ⇒
1. 파일을 선택할 수 있도록 로컬 디렉토리 열기
2. 파일 선택 시 이미지 서버에 POST 요청
3. 응답값으로 url을 받아 코멘트에 형태로 추가 (추가되는 위치는 마우스 커서 위치에 추가되도록 한다.)
사이드바
- 공통: 각 메뉴마다 팝업 열기
- 담당자 +버튼 클릭 ⇒ 담당자 목록 보여주기 (다중 선택 가능)
  - 유저 아바타 + 유저 닉네임 보여주기
  - 담당자
- 레이블 +버튼 클릭 ⇒ 레이블 목록 보여주기 (다중 선택 가능)
  - 레이블 이름 + 색상 합쳐진 뱃지 보여주기
- 마일스톤 +버튼 클릭 ⇒ 마일스톤 목록 보여주기 (단일 선택)
  - 마일스톤 제목 + 마일스톤 Progress bar 보여주기
작성 취소 버튼 클릭 ⇒ 이슈 목록 페이지 이동
작성 완료 버튼 클릭
- 제목이 입력될 때만 활성화
- 이슈 상세 페이지로 이동, POST요청
코멘트 폼 작성 ⇒ 작성을 멈추면 글자 수 코멘트 영역 우측 하단에 2초간 보여주기

Action 이슈 작성 페이지

payload: title, comment, manager, labels, milestone

완료 버튼 클릭 시 ⇒ Fetch: (payload) ⇒ {”type”: ADD_ISSUE, payload}

State 이슈 체크박스

newIssue: {
	title: '새로운 이슈 작성하기',
	comment: '새로운 이슈 내용이 들어간다.',
	manager: ['muffin', 'cola'],
	labels: ['feat', 'sub'],
	milestone: '1주차 이슈트래커 마일스톤',
}

입력폼 상태

제목
{
}

코멘트 // (제어 컴포넌트)
{
  timer: ?
	length: 22, 
}

15-18. 이슈 상세 페이지

Events 이슈 상세 페이지

제목 편집 버튼 클릭 ⇒ 제목 부분 텍스트 인풋으로 변경, 제목 편집 버튼과 이슈닫기 버튼을 감싸는 컴포넌트 변경 (편집 취소, 편집 완료 버튼으로 토글 변경)
1. 편집 취소 버튼 클릭 ⇒ 제목 부분 원래의 텍스트형태로 변경
2. 편집 완료 버튼 클릭 ⇒ 제목 부분 수정된 내용으로 텍스트 형태로 변경
이슈 열기/닫기 버튼 클릭 ⇒ 버튼 토글 , 제목 아래 Big Label변경, 코멘트로 추가(열고 닫힘)
코멘트 입력폼
- 이슈 작성 페이지와 동일한 이벤트 (파일 첨부, 글자 세기)
코멘트 작성버튼
- 내용 입력시에만 활성화
- 코멘트 작성 버튼 클릭 ⇒ 입력폼 → 코멘트 디자인으로 변경
  - navigate('/issue/issue번호')로 이동
코멘트 수정버튼 (자신이 작성한 코멘트만 편집 텍스트가 보이며 수정 가능)
- 최초 상태와 다를 때만 활성화
- 편집 버튼, 취소 버튼 클릭 ⇒ 입력폼 → 코멘트 디자인으로 변경
화면 오른쪽 담당자,레이블,마일스톤 부분 각 영역 클릭 시 ⇒ 가지고 있는 데이터들을 보여준다. ⇒ 추가 / 제거 시 실시간으로 api를 보낸다.

Action 이슈 상세 페이지

편집 완료 버튼 클릭 ⇒ patch Fetch: (payload) ⇒ {”type”: PATCH_ISSUE_TITLE, payload}
1. payload: number(issue의 번호), title
이슈 열기 / 닫기 버튼 클릭 ⇒ patch Fetch: (payload) ⇒ {”type”: PATCH_ISSUE_STATUS, payload}
1. payload: number(issue의 번호)
코멘트 작성 버튼 클릭 ⇒ post Fetch: (payload) ⇒ {”type”: ADD_ISSUE_COMMENT, payload}
1. payload: number(issue의 번호), comment
코멘트 편집 버튼 클릭 ⇒ PATCH Fetch: (payload) ⇒ {”type”: PATCH_ISSUE_COMMENT, payload}
1. payload: number(issue의 번호), comment
담당자 추가 / 제거시 ⇒ PATCH Fetch: (payload) ⇒ {”type”: PATCH_ISSUE_MANAGER, payload}
1. payload: number(issue의 번호), user id
레이블 추가 / 제거시 ⇒ PATCH Fetch: (payload) ⇒ {”type”: PATCH_ISSUE_LABEL, payload}
1. payload: number(issue의 번호), label id
마일스톤 추가 / 제거시 ⇒ PATCH Fetch: (payload) ⇒ {”type”: PATCH_ISSUE_MILESTONE, payload}
1. payload: number(issue의 번호), milestone id

State 이슈 상세 페이지

// patch issue title api
// patch issue status api
// add issue comment api
// patch issue comment api
// patch issue manager api
// patch issue label api
// patch issue milestone api

19-23. 레이블 페이지

Events 레이블 목록 페이지

오른쪽 상단 추가 버튼 클릭 시 ⇒ 추가 버튼 닫기 버튼으로 토글, 새로운 레이블 추가 영역 바로 아래에 렌더링
1. 닫기 버튼 클릭 시 ⇒ 새로운 레이블 추가 영역 사라짐
작성 폼
- 배경색 리프레시 버튼 클릭 ⇒ 컬러코드 랜덤으로 입력
- 배경색 작성 ⇒ 텍스트로 작성
- 텍스트색 ⇒ 어두운색 / 밝은색 중 선택1
- 설명 ⇒ option
새로운 레이블 추가 영역 완료 버튼 클릭 시 ⇒ 재목, 배경색, 텍스트색 3개가 입력되었을때만 완료 버튼 활성화
1. 완료 버튼 클릭 시 ⇒ 목록에 레이블 추가됨
레이블 목록에서 편집 버튼 클릭 시 ⇒ 해당 레이블 편집 작성폼 영역으로 변경(레이블 생성 시 나오는 작성폼 영역과 동일한 이벤트)
1. 레이블에 변경사항이 있을경우에만 완료 버튼 활성화
2. 취소 버튼 클릭 시 기존 레이블 목록으로 다시 전환
3. 완료 버튼 클릭 시 ⇒ 인풋 레이블 영역이 닫히고 수정된 레이블 반영
레이블 목록에서 삭제 버튼 클릭 시 ⇒ 팝업창(”정말 이 레이블을 삭제하시겠습니까?”) 띄우기
1. 팝업 확인 버튼 클릭 시 ⇒ 해당 레이블 삭제, 레이블 목록에도 반영
2. 팝업 취소 버튼 클릭 시 ⇒ 팝업창만 닫아짐.

Action 레이블 목록 페이지

모든 레이블 데이터 가져오기 ⇒ GET Fetch: () ⇒ {”type”: GET_LABEL_ALL}
새로운 레이블 추가 영역 내 완료 버튼 클릭 시 ⇒ POST Fetch: (payload) ⇒ {”type”: ADD_LABEL, payload}
1. payload: title, description, bgColor, textColor
레이블 편집 중 완료 버튼 클릭 시 ⇒ PATCH Fetch: (payload) ⇒ {”type”: PATCH_LABEL, payload}
1. payload: 레이블 고유값 + title, description, bgColor, textColor
레이블 삭제 버튼 클릭 시 ⇒ DELETE Fetch: (payload) ⇒ {”type”: DELETE_LABEL, payload}
1. payload: 레이블 고유값

State 레이블 목록 페이지

// get label all api
// post label api
// patch label api
// delete label api

24-27. 마일스톤 목록

Events 마일스톤 목록 페이지

마일스톤 헤더쪽 열린 마일스톤 / 닫힌 마일스톤 토글
오른쪽 상단 추가 버튼 클릭 시 ⇒ 추가 버튼 닫기 버튼으로 토글, 새로운 마일스톤 추가 영역 바로 아래에 렌더링
1. 닫기 버튼 클릭 시 ⇒ 새로운 마일스톤이 영역 사라짐
작성 폼
- 마일스톤 이름 (필수)
- 완료일 (선택)
  - 입력 유효성 검사 (YYYY-MM-DD)
- 설명 (선택)
마일스톤 목록에서 편집 버튼 클릭 시 ⇒ 해당 마일스톤 편집 작성폼 영역으로 변경(마일스톤 생성 시 나오는 작성폼 영역과 동일한 이벤트)
1. 마일스톤에 변경사항이 있을경우에만 완료 버튼 활성화
2. 취소 버튼 클릭 시 기존 마일스톤 목록으로 다시 전환
3. 완료 버튼 클릭 시 ⇒ 인풋 마일스톤 영역이 닫히고 수정된 마일스톤 반영
마일스톤 목록에서 삭제 버튼 클릭 시 ⇒ 팝업창(”정말 이 마일스톤을 삭제하시겠습니까?”) 띄우기
1. 팝업 확인 버튼 클릭 시 ⇒ 해당 마일스톤 삭제, 마일스톤 목록에도 반영
2. 팝업 취소 버튼 클릭 시 ⇒ 팝업창만 닫아짐.
마일스톤 목록에서 열기/닫기 버튼 클릭 시 ⇒ 팝업창(”정말 이 마일스톤을 xx하시겠습니까?“) 띄우기
1. 팝업 확인 버튼 클릭 시 ⇒ 해당 마일스톤 상태 토글, 마일스톤 목록에 반영
2. 팝업 취소 버튼 클릭 시 ⇒ 팝업창만 닫아짐.

Action 마일스톤 목록 페이지

마일스톤 데이터 가져오기 ⇒ GET Fetch: () ⇒ {”type”: GET_MILESTONE_ALL}
마일스톤 헤더쪽 열기 / 닫기 토글 ⇒ {”type”: TOGGLE_MILESTONE}
새로운 마일스톤 추가 영역 내 완료 버튼 클릭 시 ⇒ POST FETCH: (payload) ⇒ {”type”: ADD_MILESTONE, payload}
1. payload: title, description, dueDate
마일스톤 목록에서 편집 중 완료 버튼 클릭 시 ⇒ PATCH FETCH: (payload) ⇒ { type: PATCH_MILESTONE, payload }
1. payload: 마일스톤 고유값 + title, description, dueDate
마일스톤 목록에서 삭제 버튼 클릭 시 ⇒ DELETE FETCH: (payload) ⇒ {”type”: DELETE_MILESTONE, payload}
1. payload: 마 스톤토고유값
마일스톤 목록에서 열기/닫기 버튼 클릭 시 ⇒ PATCH FETCH: (payload) ⇒ {”type”: PATCH_TOGGLE_MILESTONE}

State 마일스톤 목록 페이지

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FE

페이지