ModifyFormContainer (로그인 버튼)

페이지

#19 회원가입 페이지

설명

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

테스트 환경

로컬

수행 절차

Decorator 에 대한 파일을 커밋

오류 내용

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

기대 결과

커밋이 잘 작동해야 함

참고(스크린샷 등)

스프린트 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일차: 배포

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

Explanation

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

LoginBtn (로그인 버튼)

페이지

로그인 페이지 #17

설명

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

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

Component

HeaderContainer (공통 헤더)

Screenshot

Page

공통 헤더

Explanation

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

Logo (로고)

페이지

로그인

설명

• BookUs! 로고
• 단순 로고

LoginBtn (로그인 버튼)

페이지

로그인 페이지

설명

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

test

SignUpBtn (로그인 버튼)

페이지

#19 SignUpPage

설명

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

Explanation

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

Explanation

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

Explanation

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

React App, Storybook에 적용

Explanation

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

테스트 환경

수행 절차

오류 내용

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

기대 결과

참고(스크린샷 등)

Explanation

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

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

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

Explanation

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

• addon

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

• Front-end Component별 정리

Logo (로고)

페이지

로그인 페이지 #17

설명

BookUs! 로고
단순 로고

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 분리

Page

메인 페이지

Components

• MainBannerContainer
  • MainBannerBtn

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

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

Explanation

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

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

Backend

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

Frontend

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

Explanation

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

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

Explanation

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

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

테스트 환경

Local

수행 절차

??

오류 내용

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

기대 결과

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

참고(스크린샷 등)

Explanation

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

#61 #66

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

• Atom

  • Btn
  • Input
  • Icon
  • Label
  • Divider

• Molecules

  • Card
  • IconBtn

• Organisms

  • Footer
  • Header

Component

NaverMapContainer (네이버 지도 API)

Screenshot

Page

#61

Explanation

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

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

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

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

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

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