Base Component를 작성하고 새로운 Component를 작성할 때 이를 활용하기로 결정함

• Atom

  • Btn
  • Input
  • Icon
  • Label
  • Divider

• Molecules

  • Card
  • IconBtn

• Organisms

  • Footer
  • Header

• 로그인 / 메인
  • 로그인과 메인의 레이아웃 먼저 구성 후에, 컴포넌트를 이어서 작성.
  • Testing 에 대한 길라잡이.

• #16 Logo
• #20 ModifyFormContainer
• #21 SignUpBtn

Page

이벤트 상세 페이지

Components

• EventBannerContainer
  • BannerImg
  • DescContainer
    • Title
    • Location
    • Date
    • HostContainer
      • Img
      • Name

• TicketBuyContainer
  • Title
  • Price
  • ParticipantCnt
  • BuyBtn

• EventDesc

• TicketList
  • TicketListLabel
  • TicketContainer
    • Price
    • Name
    • Desc
    • LeftCnt
    • LimitCntPerPerson
    • EndDate
    • ParticipantCnt

• LocationContainer

  • Label
  • Place
  • Address
  • Desc

• Refactoring

  • template / organisms 분리

금요일 배포 이전, 12시까지 코드리뷰에 제출할 코드 정리하고 이야기

test

• Front-end Component별 정리

• 디렉토리 구조 설정
• Lint 등 설정
• issue template

LoginBtn (로그인 버튼)

페이지

로그인 페이지 #17

설명

• 클릭 시, OAuth과정을 거친 후 해당 유저의 데이터가 데이터베이스에
  • 있으면 메인 페이지로 이동 (로그인)
  • 없으면 회원가입 페이지로 이동 (회원가입)

스프린트 1주차

1인당 페이지 단위 개발

1일차

• Backlog 정리
• 디렉토리 / lint 등 프로젝트 개발 환경 세팅

2일차

• DB 구조 작성 (migration + modeling)
• API 문서 작성 (Swagger.io)
• Infra 확정 (예약 서버에 대한 redis 검증 / FE 배포 인프라 확정)
• TEST 구성
  • BE, FE 에 대한 디렉토리 / branch 별 테스팅에 대한 config 설정해야함
  • DB 테스팅을 위한 Travis - BE 테스트 환경 조성해야함
• front 개발 시작
  • 로그인 / 메인
    • 로그인과 메인의 레이아웃 먼저 구성 후에, 컴포넌트를 이어서 작성.
    • Testing 에 대한 길라잡이.

3일차

• 2일차 프로젝트 리뷰
  • 미흡한 부분 추출 / TEST 코드에 대한 공부 및 검증
• 2일차에서 미비했던 Feature 이어서 개발
  • FE 레이아웃 작성 이어서 시작
  • Backend API / DB 작성 완료시, 개발시작과 함께 Test 검증해야함.
• backend 개발 시작
  • Frontend 에 필요한 데이터 우선 (로그인과 메인페이지)
  • Oauth 공부 feature 뽑아내기;

4일차: 19시 코드 프리징

• 3일차 프로젝트 리뷰
  • BE, FE 에 대한 초기 코드 검증
• 3일차 Feature 이어서 개발
  • 컴포넌트와 테스팅에 관련된 모든 것들 가져오기
• 배포
  • Server-Master, Client-Master 에 PR 및 배포
  • CD 구성은 아직 안되어있기에 일단 수동 배포

5일차: 배포

• 코드리뷰 받을 코드 정리
  • 이야기하기 (그때 뽑힌거 보고 ㄱ)

Logo (로고)

페이지

로그인

설명

• BookUs! 로고
• 단순 로고

LoginBtn (로그인 버튼)

페이지

로그인 페이지

설명

• 클릭 시, OAuth과정을 거친 후 해당 유저의 데이터가 데이터베이스에
• 있으면 메인 페이지로 이동 (로그인)
• 없으면 회원가입 페이지로 이동 (회원가입)

서버에 대한 메소드 호출 로그, 접근 로그 등을 어떤식으로 남길지 결정해야 합니다.

자동 배포를 하기 전 수동 배포를 먼저 구성해보기

Component

NaverMapContainer (네이버 지도 API)

Screenshot

Page

#61

Explanation

주소를 통해서 네이버 지도에 위치를 보여줌

Explanation

이벤트의 상세정보를 보기 위해서 이벤트 정보를 가져올 수 있는 API를 작성해야함.

Explanation

README.md 꾸미기..
어떤 내용이 들어가면 좋을까요

Explanation

• Nomalize : CSS 초기화
• GlobalStyles : (*, body ... )에 전역적인 스타일 설정
• Theme : 사이트에 적용되는 테마 스타일

React App, Storybook에 적용

Explanation

각 이벤트의 상세 정보를 볼 때 구매 가능한 티켓 유형을 파악하고 이것을 가져와야함.

#61 #66

Component

HeaderContainer (공통 헤더)

Screenshot

Page

공통 헤더

Explanation

• 공통으로 사용되는 컴포넌트를 작성
• 로그인 상태에 따른 분기는 되지 않고 레이아웃만 존재

Page

메인 페이지

Components

• MainBannerContainer
  • MainBannerBtn

• EventCardGrid
• EventCard
  • Img
  • Date
  • Title
  • HostName
  • Price

BE, FE 에 대한 초기 코드 검증

• 가로축 (시간별, 날짜별, 아님 둘다)

SignUpBtn (로그인 버튼)

페이지

#19 SignUpPage

설명

클릭 시, SignUpPage 에 입력된 값들이 Validation 되면서 회원가입 api 를 호출함.

테스트 환경

수행 절차

오류 내용

스토리북 상에서 LogoBtn 컴포넌트의 이름이 Logo로 되어있습니다.
확인부탁드립니다.

기대 결과

참고(스크린샷 등)

테스트 환경

Local

수행 절차

??

오류 내용

commit 시 lint 및 타입 체크가 정상적으로 작동하지 않습니다. (husky, lint-staged)
yarn lint 로 확인하면 통과하지 못함에도 커밋이 작동하고 있습니다.

기대 결과

commit 시 commitlint, eslint, prettier, ts type check 가 모두 잘 작동해야 합니다

참고(스크린샷 등)

ModifyFormContainer (로그인 버튼)

페이지

#19 회원가입 페이지

설명

• Lable 과 Inputbox로 구성되어있는 컴포넌트
• 이메일, 성, 이름, 휴대폰 번호 네가지가 만들어져야 하며, 이메일의 경우, Oauth 에서 넘어온 이메일로 쓰여지고, input이 disabled 된다

테스트 환경

로컬

수행 절차

Decorator 에 대한 파일을 커밋

오류 내용

커밋시 type check 통과 실패
type check 를 하는 tsc options 에 experimentalDecorators 가 없어서 나는 것 같음

기대 결과

커밋이 잘 작동해야 함

참고(스크린샷 등)

Explanation

• 스토리북의 디렉터리 구조를 변경
  (BEFORE) sub directory stories 에 존재했음
  (AFTER) 각 컴포넌트와 sibling하게 존재하도록 수정
  

• addon

  • info와 기능이 중복되는 story-source제거

Explanation

지금 Frontend 디렉토리 구조 상 뎁스가 매우 깊습니다.
앞으로도 계속해서 깊어질 것 같은데,
이를 Webpack의 alias 같은 설정을 찾아서 설정하면
코드의 깔끔함과 편리함을 찾을 수 있을 것 같습니다!

Explanation

메인페이지에서 이벤트를 보여줄 때 사용하는 API임.

이벤트에 대한 정보를 가져오면서 Lazyloading(pagination) 또한 이 API에서 동일하게 구현해야함.

• #16 Logo (로고)
• #18 LoginBtn (로그인 버튼)

Explanation

제목과 동일하며 토큰을 발급하는 Shared-Middleware을 만들 예정임.

Explanation

회원가입에 필요한 API를 작성해야함.

각각은 Validation이 필요하며, 로그인할 때의 google id와 긴밀하게 연결되어있어야함.

Explanation

React-Router 세팅을 해주어야함. 각각의 라우터 이름은 Festa.io의 이름을 그대로 따라감

Logo (로고)

페이지

로그인 페이지 #17

설명

BookUs! 로고
단순 로고

Explanation

Festa 클론 프로젝트에 쓰일 Mock Data를 만듦

(예약 서버에 대한 redis 검증 / FE 배포 인프라 확정)

Backend

• BE, FE 에 대한 디렉토리 / branch 별 테스팅에 대한 config 설정해야함
• DB 테스팅을 위한 Travis - BE 테스트 환경 조성해야함

Frontend

• Cypress script (React App에 대한 테스트, Storybook에 대한 테스트)