codesquad-member-2020 / issue-tracker-03 Goto Github PK

공용 컴포넌트 구현

• ButtonPanel (Component)
  

• SubmitButton (Component)
  

• NavigationButton (Component)
  

SON 형태 변경 - 이슈 목록 props 전달 객체 수정

• 세부 기능 내역 1
• 세부 기능 내역 2
• 세부 기능 내역 3

전체 페이지에서 필요한 Header Container 설계 및 기능 정의

1. 로그인 되어있지 않을 경우

• ISSUES 버튼: 이슈 목록 화면으로 이동
• Sign in 버튼: OAuth 인증 페이지로 이동

2. 로그인 되었을 경우

2-1. 기본 상태

- ISSUES 버튼: 이슈 목록 화면으로 이동
- + 버튼: 사용자가 선택 가능한 기능을 Dropdown
- User Avatar: 유져 아이디 및 Logout 기능을 Dropdown

2-2. 기능 버튼 활성화 상태

- New Issue 버튼 표시
- New Milestone 버튼 표시
- New Label 버튼 표시

2-3. 유져 버튼 활성화 상태

- User Id 표시
- Sign out 버튼 표시

• db에 기본적으로 insert될 mock data를 수정
• 이전 구현에 필요한 데이터들 삭제

확인이 필요한 사항

1. 깃헙 OAuth 링크 주소
2. 이슈생성 (http://34.206.34.207/api/issues, POST), 이슈수정 (http://34.206.34.207/api/issues, PUT) 두 API 의 response 형식
3. Mock API 및 Service API 에서 두 API 에 대해 같은 response 를 보내주고 있는지 궁금합니다.
4. 이슈 상세: 제목 수정에 대한 API, 본문 수정 API, 코멘트 (생성API, 수정 API)
5. 레이블: 레이블 생성 API, 레이블 수정 API
6. 마일스톤: 마일스톤 생성 API, 마일스톤 수정 API
7. Filter URL 형식 정의.
8. 서비스 API 들의 주소.
9. 배포 확인은 언제쯤? (배포가 되어야 실제 쿠키를 통한 로그인 관련 기능을 확인 할 수 있음.)

• 답변은 아래 코멘트로 달아주시길 바랍니다~

pages : containers 1:1 동일

예) IssueListPage => IssueListContainer

container에서 담당하는 컴포넌트를 호풀하여 레이아웃 구성 (공통 레이아웃 포함)

예) IssueListContainer => Search + Filters + List를 호출하여 container를 구성 (공통 Header/Footer)

컴포넌트는 해당되는 컨테이너 디렉토리에 포함

IssueList 컴포넌트 디렉토리 구조
--IssueList 디렉토리

----Search 디렉토리

• index.js : 검색 컴포넌트 파일 + 버튼영역 컴포넌트 파일
• 검색 컴포넌트 파일
• 버튼영역 컴포넌트 파일

----Filters 디렉토리

• index.js : 전체체크 컴포넌트 파일 + 필터리스트 컴포넌트 파일
• 전체체크박스 컴포넌트 파일
• 필터리스트 컴포넌트 파일

----List 디렉토리

• index.js : article 리스트
• article

라우터 구조 수정

• Header 및 Footer 가 AppRouter 안에 존재하도록 수정
  -> 기존 구조에서는 Router 객체가 2개 생성이 되어 Header 에서 useHistory 사용이 불가능

nginx

• add header

spring boot

• config

이슈 상세페이지 구현

• 이슈 ID를 조회 하는 redux thunk 함수 구현
• 이슈 상세 리덕스 모듈 구현
• 이슈 페이지, 이슈 컨테이너 구현
  • 이슈 페이지 : 페이지용 (컨테이너를 가지고 있다)
  • 이슈 컨테이너 : 통신 데이터를 전달
• 이슈 상세 컴포넌트 스타일링

로그인 기능 수정

• Server 로부터 전달받은 토큰을 파싱하는 코드 추가

url

• /api/issues
• 기본 is:open 상태
• : 으로 parsing 하기

필터

• open, closed 조회기능

main/issues -> open 이슈
issues?q=is:open -> open 이슈
issue?q=is:close -> close 이슈
issues?q= -> open or close 이슈

Issue

• id, title, createdBy, labels, milestone, createTimeAt, assignee, commentCount
• CRUD

author

• 팀원 4명 조회기능만
• table
• entity
• R 기능

label

• 기본 라벨 조회기능만
• table
• entity
• R 기능
• github에서 사용하는 기본 label data add

mileStones

• 1,2,3 주차 마일스톤 조회기능만
• table
• entity
• R 기능

assignee

• author 와 동일
• table
• entity
• R 기능

이슈목록 - 이슈리스트 컨테이너 리덕스 모듈 구현

• 세부 기능 내역 1
• 세부 기능 내역 2
• 세부 기능 내역 3

개념적 DB 설계

• 사각형: Entity
• 타 원: Attribute
• 마름모: Relation

논리적 DB 설계

기능

• 세부 기능 내역 1
• 세부 기능 내역 2
• 세부 기능 내역 3

detail-issue 페이지에서, 이미지 업로드가 가능한 API 만들기

url

• POST: api/issue/image..?

aws configure

• 필요한 Key 추가

s3 client

• 생성
• ProfileProvider를 사용해서 ./aws/credential에 있는 값을 이용
• 이미지 업로드시, 생성된 url 반환

이슈 목록 요청 샘플 함수 작성

• redux-thunk 에 대한 의존성 추가
• issue list API 호출을 위한 환성설정 파일 추가
• asyncUtil 추가
• 관련 reducer (rootReducer, issueList) 추가
• 관련 api (issueList) 추가

기능

Issue 상세화면

• Label 추가
• Label 삭제
• Milestone 추가
• Milestone 삭제

개발 환경 구축

이슈 생성할 때

• 로그인한 유저만 할 수 있도록

side에 해당하는 API를 만들자

issueReponse

• GET : api/issues
• 이슈에 해당하는 목록이 나오도록
• 변수명 조정

label

• GET: api/labels
• label 목록 반환

author

• GET: api/authors
• author 목록 반환

milestones

• GET : api/milestones
• 마일스톤 목록 반환

assignee

• GET: api/assignees
• assginee 가능한 유저 목록 반환 (가입된 유저)
• 아니면 author와 동일한 api 일듯

이슈 목록 기능 정의 및 설계

• 이슈 리스트 컴포넌트 (이슈 아이템이 모인 리스트, 목록 화면)
• 이슈 아이템 컴포넌트

각 컴포넌트 구성과 어떤 상태를 가지고 있어야 하는가?

기본

• 양방향
• 이슈에서도 연결된 라벨을 탐색할 수 있고, 라벨을 기반으로 이슈들을 탐색할 수 있도록

기능

• 세부 기능 내역 1
• 세부 기능 내역 2
• 세부 기능 내역 3

Issue

메인

• 맨 처음 화면에 들어갔을 때
• 현재 open 상태인 이슈중에서 가장 최근에 생성된 이슈들이 제일 위에 배치되도록

이슈 생성화면 개발 (SidePanel 제외)

• 제목을 입력하는 input 컴포넌트 구현
• 내용을 입력하는 contents 컴포넌트 구현
• cancel 버튼을 눌렀을 때 이슈목록 화면으로 이동하는 기능 구현
• submit new issue 버튼을 눌렀을때 생성된 이슈에 대항하는 상세 페이지로 이동

개인적으로 구현할 사항

테이블 구성

• issueAssginee Entity 생성 (연관관계 주인)
• 해당 table 생성
• 1:다 -- 다:1맵핑

1. 로그인, 회원가입 화면

• oauth (필수) 1주차에 구현
  • JWT (Set Cookie)
• 로그인, 회원가입기능 (선택사항) --> 추후 2주차?
• User Table

2. 이슈 목록 화면

• R은 비로그인도 가능
• CUD 할 때는 로그인 필요, 안되어 있을 시에 로그인 화면으로 전달해주는 것도 필요할듯
• Issue , Labels, Milestones Table
• [Mark as] -> 일괄적으로 Open or Close 상태로 변경하는 API
• 페이지 기능 한 페이지당 25개씩

3. 이슈 목록 필터 기능

• 5가지 옵션에 필요한 API
• 검색창에 모든 텍스트를 지우면, Open, Closed된 모든 이슈들이 나타남.
• Author, Label, Milestones, Assignee

4. 새로운 이슈 생성 화면

• 이미지 업로드 API --> aws s3 저장
• Assignees , Label, Milestone API가 있어야함
• 이슈 생성 API (로그인 한 사람만 가능하도록)

5. 이슈 상세 화면

• 이슈번호 issue Id
• 이슈 update API
• 이슈 작성자를 나타내는 컬럼이 있어야할듯
• 이모티콘은 선택사항 (DB는 가능하도록 설정하기)
• Comment Table

6. 레이블 목록 화면

• label C U D 만들어야됨 (로그인된 유저만)

7. 마일스톤 목록 화면

• C U D 기능에 해당하는 API 생성 (로그인 한 유저만 가능하도록)
• 이슈와 연관관계를 맺아야 할 것 같음
• complete는 프론트쪽에서 연산

AccountDTO

• login, name, email, avatar_url

Account

• id, login, name, email, avatar_url, password
• table
• entity
• C, R 기능

Flow

1. /api/github-login
2. Redirect To github
3. 사용자 인증
4. 해당 정보 없으면 저장 있으면 로그인으로 token 발행
5. Set Cookie 하여 Main으로 Redirect

• 끝!!

라우트 API 개발

• 각 화면 (Issue List, Create Issue, Modify Issue, Label, Milestone List, Create Milestone, Modify Milestone) 으로 라우팅 하기 위한 API 개발)

체크박스 기능 수정

• Article 의 check box 여부를 리듀서를 통한 state 를 참조하도록 수정
• 변화된 값에 의해 재 렌더링이 되도록 module 의 return 부분 수정
• check, reset, check all 기능에 대해 count 를 조작하도록 수정

마일스톤 페이지 구현

• 세부 기능 내역 1
• 세부 기능 내역 2
• 세부 기능 내역 3

이슈목록 -> 이슈상세 라우트 연동

이슈 목록 화면 스타일링& 컨텐츠 공통 레이아웃

• 세부 기능 내역 1
• 세부 기능 내역 2
• 세부 기능 내역 3

기능

• 세부 기능 내역 1
• 세부 기능 내역 2
• 세부 기능 내역 3

마일스톤 수정 페이지 구현

• 세부 기능 내역 1
• 세부 기능 내역 2
• 세부 기능 내역 3

화면천이 플로우 설계

• : 사용자의 action 에 따라 일어나는 화면 천이에 대한 Flow

기능

• 마일스톤 open/closed 기능 추가
• 생성, 수정시간 추가

mock

• 배포

server

• apiResult, error 클래스 생성
• issueCRUD
• IssueDetailReponse

테스트

• issueCRUD에 test

Spring

• JPA
  • 김영환님 JPA 참조하기
• Lombok
• yml
• acturator (app 환경에 대해)
• swagger
• log 생성하자
  • 해당 날짜로 log가 생성될 수 있도록
• test DB : H2
• JWT 어디에 넣을까? (Authorization, Cookie)

DB

• MySQL 5.7
  • local, RDS
• db_name : issue
• username : issue3
• password : 위와 동일

CI, CD

• Github Action 사용 (FE, BE 같이 배포!! ~ 6월 12일까지)

Wiki

• 문서화는 PostMan or wiki, notion 수동 (프론트 분들과 협의)
• 백엔드 개발하면서 발생하는, 정리가 필요한 이슈들을 wiki에 정리해보기 (공부차원)

ETC

• 코어 집중 시간 : 1~5시
• 스프린트는 1주 간격, 매주 회고 시간에 내부 시연이 있었으면 좋을듯.
• 화이트 보드 사용해보자(서로 뭐하는지 볼 수 있다)
• 매주 금요일 회고 전에 리뷰 보내기 (Han)

• 마일스톤 생성

• 마일스톤 전체리스트 출력

• 마일스톤 수정하기

기능

• 세부 기능 내역 1
• 세부 기능 내역 2
• 세부 기능 내역 3

마일스톤 생성 페이지 구현

• 세부 기능 내역 1
• 세부 기능 내역 2
• 세부 기능 내역 3

• dev-be branch 생성
• Spring project 생성 및 push
  • web, mysql, h2, jpa, acturator, lombok, validation, jwt, flyway
  • gitignore 설정
• EC2 생성
• RDS 생성
• 각자 Docker MySQL 생성
• yml 설정
  • mysql
    • local
    • dev
  • log
• oauth app 만들기

기능

• 세부 기능 내역 1
• 세부 기능 내역 2
• 세부 기능 내역 3