2022newkrew/fe-w4-issue-tracker

fe-w4-issue-tracker's Issues

[lin.s] 환경설정

• webpack 설정
• babel 설정
• development/product 모드 구분하기
• Firebase 추가 및 설정
• 프로젝트 구조잡기
• router 설정 - react-router-dom 추가

[ edward.kk ] 프로젝트 세팅 문서 정의

No CRA / React + Typescript + Webpack

최종 결정한 프로젝트 스팩입니다.

역할
프레임워크	react
언어	typescript
빌드도구	webpack + tsconfig
스타일도구(css-in-js)	stitches
코드 컨벤션	eslint + prettier
디랙토리 컨벤션	VAC 패턴
전역 상태 관리	Context API

커밋 컨벤션

feat. 버튼 마크업 구현

코드
feat	기능을 구현한 커밋에 사용
fix	기능에 갖고 있는 버그를 고침
style	현 로직에 변동을 주지않는 코드 컨벤션(style)를 변경
chore	라이브러리를 추가
refector	디랙토리 구조를 변경

할 일

• 프로젝트 스펙 설정하기
• 프로젝트 webpack typescript 세팅하기
• feature issue 정리하기

[ aiden.dw ] 이슈 작성 화면

예상 소요시간: 1d

• UI 구현
• 이미지 첨부 기능 구현
• 이슈 저장 기능 구현

[ aiden.dw ] 로그인 화면

예상 소요시간: 1.5d

• UI 구현
• GitHub OAuth 연동

(선택) 회원가입 및 로그인

[ edward.kk ] 이슈 상세 화면

예상시간

3시간

• 마크업 레이아웃
• 이슈 닫기, 다시 열기 기능
• 제목 편집 기능

[ edward.kk ] 레이블, 마일스톤 목록

예상시간

3시간

• Tab 네비게이터 구현
• 레이블 목록 마크업
• 마일스톤 목록 마크업
• data-json 서버 연동하기

[ aiden.dw ] 레이블/마일스톤 변경 화면

예상 소요시간: 2d

• UI 구현
• 레이블/마일스톤 토글 기능 구현
• 레이블 목록 출력 구현
• 마일스톤 목록 출력 구현
• 레이블 생성 기능 구현
• 마일스톤 생성 기능 구현

[ aiden.dw ] 환경설정

• webpack, babel 설정
• firebase 연결
• feature list 작성

[jade.kjo] 이슈 목록 페이지

컴포넌트

• Header
• Dropdown
• Text Input
• Taps
• Button
• Label
• IssueTable
• IssueTableHeader
• IssueTableCell
• CheckBox

기능

• 초기 화면에는 오픈 상태의 이슈만 보여주기
• 열린 이슈/닫힌 이슈 목록 분리하여 구현하기
• 이슈 상세 페이지/레이블 목록 페이지/마일스톤 목록 페이지/이슈 생성 페이지 라우팅
• 이슈/담당자/레이블/마일스톤/작성자 필터
• 이슈 다중 선택
• 선택된 모든 이슈에 Open/Closed 상태 일괄 적용

[ edward.kk ] 홈 화면 & 이슈 목록

예상시간

3시간

• 레이아웃 마크업 작성
• 이슈 목록 json-server 연동

---

예상시간

2시간

• 이슈목록 필터링
• 이슈목록 다중선택

[ edward.kk ] 설연휴 이후 개발 목표

핵심 목표

• recoil + react-query 을 통한 서버 데이터 바인딩 및 전역 상태 관리
• 테스트 코드 (?)

TASK

• 백엔드 API 구축
  ( 동기들과 공용 백엔드 서버를 구축?! )
• 프론트 API 서비스 작성
• React 앱 배포 (nestify?, github pages?)

1차 목표

• auth routing 설정
• 이슈목록 필터링 (열린, 닫힌 / 담당자, 레이블, 마일스톤 작성자)
• 이슈목록 필터링 FilterBar 연동
• 이슈목록 다중 선택하여 상태변경
• 새로운 이슈 작성 (+ 담당자, 레이블, 마일스톤)
• 이슈 제목 편집
• 이슈 닫기 (+ 자동 댓글 추가)
• 이슈 댓글 작성

2차 목표

• 레이블 작성 및 조회
• 마일스톤 작성 및 조회
• 마일스톤 필터링
• 마일스톤 닫기 기능

우선 순위 밖

• github OAuth 연동
• 회원가입
• 파일(이미지) 첨부하면 마크다운 형식으로 내용 추가 및 서버에 이미지 옵로드
• 레이블 편집
• 마일스톤 편집
• 이슈 댓글 편집

[lin.s] 개별/다중 이슈 선택

• 다중 이슈들 선택 후, 개수 표시하기
• 이슈 선택 시 상태 수정 버튼 나타내기
• 선택한 이슈 일괄 열기 적용
• 선택한 이슈 일괄 닫기 적용

[lin.s] 새로운 이슈 생성

• TextArea 컴포넌트 구현
• Sidebar 컴포넌트 구현
• 이슈 작성 View 구현
• 완료 버튼 클릭 시 이슈 상세 화면으로 이동
• 파일 첨부
  • 이미지 선택 창 띄우기
  • 이미지 주소 마크다운 형식으로 추가하기

[lin.s] 상세 이슈 페이지

• 상세 이슈 페이지 View 구현
• 이슈 닫기 버튼 클릭 시 이슈 보관하기
• 이슈 다시 열기 버튼 클릭 시 이슈 오픈하기
• 이슈 제목 편집하기

[ aiden.dw ] 이슈 상세 화면

예상 소요시간: 1d

• UI 구현
• 이슈 닫기/열기 구현
• 데이터 편집(코멘트, 라벨, 마일스톤, 제목 변경 등) 구현
• 이슈 삭제 구현

[ edward.kk ] 새로운 이슈 작성 화면

예상시간

3시간

• 화면 마크업
• 파일(이미지) 첨부하면 마크다운 형식으로 내용 추가
• 제목만 입력해도 완료 버튼 활성화
• 서버에 이미지 옵로드

[lin.s] 이슈 목록

• Filter Bar 컴포넌트 구현
• Taps 컴포넌트 구현
• Label 컴포넌트 구현
• 아이콘 컴포넌트화하기
• 모든 이슈 가져오기
• 오픈 상태의 이슈와 닫힌 상태의 이슈 구분하기
• 레이블 탭 클릭 시 레이블 목록으로 이동
• 마일스톤 탭 클릭 시 마일스톤 목록으로 이동

[ aiden.dw ] 이슈 목록 화면

예상 소요시간: 3d

• UI 구현
• 이슈 목록 출력 구현
• 이슈 체크박스(다중선택) 구현
• 이슈 상태 수정 기능 구현
• 필터 구현
• 이슈 체크박스 구현
• DB 연동

[lin.s] 레이블 목록 페이지

• ColorCode 컴포넌트 구현
• 모든 레이블 나타내기
• 레이블 생성하기 (레이블 이름, 색, 설명)
• 레이블 편집하기
• 레이블 삭제하기

[ edward.kk ] 로그인 화면

예상시간

3시간

• 로그인 화면 마크업
• #71
• github OAuth 연동
• 회원가입 화면 (선택)

[lin.s] 로그인

• 버튼 컴포넌트 구현
• TextInput 컴포넌트 구현
• 로그인 화면 만들기
• Github OAuth 연동
• 회원가입/로그인 (선택사항)

[ edward.kk ] 디자인 시스템 구축

예상 시간

8시간

• stitches 설정

• typography 전역 스타일
• 색상코드 전역 스타일
• 로고 svg 컴포넌트
• icon svg 컴포넌트

• Button
• Dropdown + Filter Bar
• Taps
• Label

• 이외 컴포넌트는 화면을 구현하면서 필요시 구현하도록 한다.

로그인 기능

[lin.s] 마일스톤 목록 페이지

• 모든 마일스톤 나타내기
• 마일스톤 생성하기
• 마일스톤 편집하기
• 마일스톤 삭제하기

[lin.s] 이슈 필터링

• DropDown:Panels 컴포넌트 구현
• 열린 이슈 필터링
• 내가 작성한 이슈 필터링
• 나에게 할당된 이슈 필터링
• 내가 댓글을 남긴 이슈 필터링
• 닫힌 이슈 필터링