FE_ Story&Task

공통 컴포넌트 찾기!!

1. 이슈 목록 이슈 작성 버튼: matiral ui 버튼 필터 옆에 filled input : material ui filled 인풋 레이블 컴포넌트 {color , label_name} - 이 데이터는 쌍으로 서버에 저장. (+ 라벨 아이디?)

2. 이슈 작성

   • 담당자, 레이블, 마일스톤 이렇게 비슷한 것들 - div 만들어두고 styled.(만든div)``

3. 이슈 상세

   • 담당자 프로필 사진 및 아이디

Material UI 에서 쓸만한 것들

메뉴 - 필터 팝업에 적용 가능할 듯 체크 박스 각종 버튼류

로그인

routing : / 리다이렉트 url = /login

1. 로그인은 반드시 깃헙 오오스 지원해야한다.
2. 인증후에는 이슈 목록으로 넘어간다.
3. 이미 발행한 oauth 토큰이 있는 경우 로그인 화면 생략 (?)
4. 로그인 페이지(/login) 에서 jwt 토큰 받기.
5. jwt 토큰을 로컬스토리지에 저장 후 /issues 리다이렉트.
6. 첫 페이지(/) 렌더 되기 전에 저장되어있는 토큰을 서버에 보냄 . 서버에서 유저를 인증후 /issues 리다이렉트.
7. 저장이 되어있지 않다면 로그인 페이지 보여주기.

이슈목록

routing : /issues

0. 렌더링 전에 api 요청을 보낸다. => 이슈 목록 , 레이블 갯수 , 마일스톤 갯수
1. issueList component 만들기 {isOpen: boolean, 이슈 제목:string , 라벨 리스트[] , 이슈 번호 : number , 작성자: {name: string , profileImg: string } , 타임 스탬프 정보 : number , 마일스톤 : string }

https://www.npmjs.com/package/react-time-ago 라이브러리 쓰는게 좋은지 추가로 논의

라벨 리스트[ { color : , title : }]

2. 라우팅 처리할 것들-

   • 레이블(/labels)
   • 마일스톤(/milestones)
   • 이슈 상세 화면(/issues/#이슈번호)
   • 새 이슈 작성(/new-issue)

3. 목록에는 오픈상태의 이슈만 보여준다 (기본)

4. 목록에서 열린이슈 와 닫힌 이슈의 갯수와 목록이 보여진다.

이슈 목록 / 필터

1. 필터바 => Material UI Menu 적용
2. input => Material UI Text Field 적용
3. is:open => open => 상태값이 open 인 이슈들 filter
4. 메뉴 열린 이슈 클릭 => input value , is:open

이슈 목록 / 다중 선택

1. 체크 박스 하나라도 눌리면 오른쪽 위 메뉴탭 "상태 수정" 으로 바뀜.
2. 체크 박스 => Material UI Check Box 적용 onChange 함수 사용

새로운 이슈작성

routing : /new-issue 일단 담당자에 대한 부분은 제외함.

0. 버튼 클릭했을때 서버 api 요청 현재 라벨 리스트, 마일스톤 리스트
1. 코멘트를 입력하세요 => 마크다운 (라이브러리) 일단쓰자.
2. 파일첨부 오톰이 어렵지 않았다고한다.- 나중에 생각하기
3. 완료 버튼 클릭 시
   • 서버에 post 요청
     • (담당자 일단 제외), 레이블, 마일스톤, 제목, 코멘트 다 상태로 관리해서 post 요청에 넣어 보낸다.
   • 라우팅 처리 - 이슈 상세 화면(/issues/#이슈번호)

이슈 상세

routing : issues/#이슈번호

0. api 백엔드와 이야기 필요.

1. 이슈 닫기를 누르면 ,

   • 백엔드 서버에 post 보냄
   • 열린이슈 레이블이 닫힌이슈 레이블로 바뀜
   • 열림 상태값을 변경하여 이슈 닫기 버튼이 이슈 열림 버튼으로 바뀜

2. 이슈 열기를 누르면 ,

   • 반대로 동작

3. 코멘트 작성을 누르면 ,

   • 백엔드 서버에 post 보냄
   • 리렌더링

4. 파일첨부 - 나중에 생각하기

5. 이슈 삭제 - 나중에 생각 (기획서에 없음)

레이블 목록

routing : /labels

1. 박스 모양 (li)는 이슈 목록과 공통으로
2. labelList{ labeltitle:string ,color:string, detail:string}
3. Creatinglabel => Label name . description , color 입력
4. 편집과 삭제 버튼 - 자세한 건 나중에 생각

마일스톤

routing : /milestones

1. 박스 모양 (li)는 이슈 목록과 공통으로
2. milestoneList{ milestoneTitle: string, dueDay: number, detail: string, issueCount: {opened: number, closed: number}}
3. 나머지 나중에 생각