📗  원티드 프리온보딩 5번째 과제 - 기프티콘 서비스 구현

🖥  배포 주소

👉 배포링크 바로가기

👩  팀원소개 및 담당페이지

• 상세 구현 사항은 아래에 정리해두었습니다.

이가윤	신혜리	한재성	이선재
상품리스트 페이지, 고객센터 페이지	홈페이지, 브랜드 페이지	-	상품 상세 페이지
Github	Github	Github	Github

🎮  사용한 기술 스택

• Typescript
• Styled-component
• Next.js
• Cypress

🎮  구현 사항

페이지

• 홈 페이지
• 브랜드 페이지
• 상품 리스트 페이지
• 상품 상세 페이지
• 고객 센터 페이지

페이지 이동	상품 옵션 선택
사이드바/ 고객센터 페이지

페이지 라우팅 설계

1. 홈: https://ncnc.app](https://ncnc.app/
2. 브랜드페이지: https://ncnc.app/categories/$category1Id
3. 상품리스트: https://ncnc.app/brands/$category2Id
4. 상품상세: https://ncnc.app/items/$conItemId
5. 마이페이지 사이드바 (좌측 상단 햄버거를 눌렀을때 노출)
   1. 고객 센터 페이지: https://ncnc.app/contacts

E2E Testing

Cypress를 사용한 E2E 테스트 진행

🧗‍  프로젝트 과정 소개

👉 개별 업무 분담

이선재

• 상품 상세페이지

  • '옵션 선택하기' 버튼 클릭 시 드롭다운 메뉴 노출
  • 리스팅된 옵션 선택시 구매하기 버튼 활성화
  • 선택한 옵션 표시

• 공통 컴포넌트: 단일 상품 컴포넌트

신혜리

• 홈 페이지

  • 홈페이지 캐러셀 구현
  • 카테고리 영역 클릭시 브랜드 페이지로 이동

• 브랜드 페이지

  • 선택한 카테고리에 해당하는 브랜드 노출
  • 브랜드 페이지 내 카테고리 슬라이드 영역 구현
  • 오늘의 땡처리콘 영역 구현

이가윤

• 상품 목록페이지
  • 선택한 브랜드의 상품 목록 노출
• 고객 센터 페이지
  • 항목별 자주 묻는 질문 리스트 표시
  • 아코디언 형 FAQ 목록 구현
• 좌측 사이드바(마이페이지)
  • 메뉴 햄버거 버튼 클릭 시 노출
• 공통 컴포넌트: 헤더
  • 페이지 뒤로가기 기능 구현

👉 협업 툴

• Notion: 칸반보드, 회의록 : 노션 페이지 바로가기
• Slack: 기본 메신저
• Discord, Vsc Liveshare: 실시간 페어프로그래밍 / 코드 리뷰

세부 일정 계획	칸반보드로 진행상황 공유
페이지별 렌더링 방식 결정 (SSR, CSR, Static)

👉 Git 커밋 컨벤션

Option: 내용(상세 내용)

• Feat - 새로운 기능 추가
• Fix - 버그 수정
• Docs - 제품 코드 수정 없음
• Style - 코드 형식, 정렬, 주석 등의 변경
• Refactor - 코드 리팩토링
• Test - 테스트 코드 추가
• Chore - 환경설정, 빌드 업무, 패키지 매니저 설정등..

Rebase를 사용한 커밋내역 관리

• 한 브랜치에서 PR 제출 시 커밋 내역은 한 개로 관리
• 한 개의 커밋 메시지는 작업 내용을 포괄하도록 작성

⚙  프로젝트 설치 및 시작

프로젝트 클론

$ git clone

패키지 설치

$ npm install

서버 실행

$ npm start