dnd-side-project/dnd-8th-9-frontend

주문 제작 케이크를 위한 서비스, 🍰당도🍰의 프론트엔드 레파지토리입니다.

🍰 쉽고 즐거운 주문제작 케이크 업체 탐색입니당도 🍰

최근 3년간 주문제작 케이크에 대한 폭발적인 수요 증가와
많은 소비자들이 주문제작 케이크 업체 탐색에 불편함을 느끼고 있다는 점을 기반하여, 
주문제작 케이크 업체 탐색과정을 편리하게 만들어주는 앱 서비스를 기획했습니다.

---

🖥  배포 주소

👉 서버 내려갔습니다! gif 시연 영상을 참고해주세요

vllo.1.mp4

👉 프로젝트 소개 바로가기

🗳  사용한 기술 스택

🗓️ 개발기간

• 1차 MVP : 2023.01.08 ~ 2023.05 (약 5개월)

👀 기능 상세

🤔 추후 계획

• 성능 개선
• Suspense 추가
• SEO 최적화

👩🏻‍💻 팀원 소개

신혜리	김세린

dnd-8th-9-frontend's Issues

홈피드 상단 구현

type	title	labels	assignees
Feature	홈피드 상단 구현	feature	혜리

Description

• 홈피드 상단 구현

To Do

• 홈피드 상단 구현 (공통)
  • 로고 추가
  • 검색바 추가
    • 검색바 클릭시 검색 페이지로 이동
  • 인기 업체 카드 추가
• 홈피드 탭 탭 구현
• 인기 업체 mock data 만들기

Table 컴포넌트 구현

type	title	labels	assignees
Feat	Table 컴포넌트 구현	feature	세린

Description

재사용 가능한 표 컴포넌트를 구현한다.

To Do

• 업체 상세 / 공지사항 table 구현
• 업체 상세 / 정보 table 구현

리뷰 작성 컴포넌트 구현

type	title	labels	assignees
Feat	리뷰 작성 컴포넌트 구현	feature	세린

Description

multi-step form 리뷰 작성 컴포넌트를 구현한다.

To Do

• 01 메뉴 선택
• 02 호수, 당도 선택
• 03 상세 리뷰
  • 이런 점이 가장 좋았어요
  • 상세 리뷰 - 사진 등록
  • 상세 리뷰 - 텍스트 등록
• 04 작성 완료

Etc

Date 컴포넌트 구현

type	title	labels	assignees
feat	Date 컴포넌트 구현	feature	세린

Description

Date 객체를 YYYY-MM-DD 형태로 파싱한 컴포넌트를 구현한다.

To Do

• Date 객체를 YYYY-MM-DD 형태로 파싱한 컴포넌트 구현

상단 Navbar 컴포넌트 구현

type	title	labels	assignees
Feat	상단 Navbar 컴포넌트 구현	feature	혜리

Description

• 상단 Navbar 구현

To Do

• 필요한 아이콘 추가
• 뒤로가기 기능 추가
• 라우팅별 이름 대응시키기 (상수지정)
• scroll시 fixed 설정

주문 양식 컴포넌트 구현

type	title	labels	assignees
Feat	주문 양식 컴포넌트 구현	feature	세린

To Do

• 주문 양식 컴포넌트 작성
  • 주의 사항 확인 메시지 + 버튼
  • 주문 양식
  • 복사하기 버튼 + 복사 기능

Etc

Tab 컴포넌트 구현

type	title	labels	assignees
Feat	Tab Component 구현	feature	혜리

Description

To Do

• Tab Component 구현
• stories 추가
• swipe 기능 추가
• 반응형 테스팅

OverallStats 컴포넌트 리팩토링

type	title	labels	assignees
feat	Overstats 컴포넌트 리팩토링	refactoring	세린

Description

OverallStats 컴포넌트를 리팩토링한다.

To Do

• 리뷰 쓰기 버튼 타입 변경
• darkBlue theme에서 제거
• getOverallComment 당도별 문구 조건 수정
• OverallStats.tsx 에서 스타일 분리
• S.Comment 에서 S.Review로 styled component 이름 변경

Netlify 배포 (+ 스토리북)

type	title	labels	assignees
Feat	Netlify 배포	feature	혜리

Description

• netlify에 프로젝트 배포하기
• 스토리북도 netlify에 배포 시도해보기

To Do

• netlify에 배포
• storybook netlify 배포

Etc

• netlify mobile preview 이용해서 녹화

프로젝트 초기 세팅

type	title	labels	assignees
Chore	프로젝트 초기 세팅	Chore	세린 / 혜리

Description

프로젝트 초기 설정

To Do

• next.js + ts 설정
• 필수 라이브러리 설치
• prettier 설정
• eslint 설정
• husky 설정

Storybook 추가 설정

type	title	labels	assignees
Chore	Storybook 추가 설정	chore	혜리

Description

• Storybook addon : viewport / controls 추가
• Storybook emotion - css props 적용

To Do

• Storybook emotion - css props 설정
• Storybook addon : viewport 추가
• Storybook addon : controls 추가

하단 GNB 컴포넌트 구현

type	title	labels	assignees
Feat	하단 GNB 구현	feature	세린

Description

재사용되는 하단 GNB 컴포넌트를 구현한다.

To Do

• 하단 GNB 컴포넌트 구현

Etc

기타 사항

리뷰 사진 미리보기 컴포넌트 구현

type	title	labels	assignees
Feat	리뷰 사진 미리보기 컴포넌트 구현	feature	세린

Description

리뷰 사진 미리보기 컴포넌트를 구현한다.

To Do

• 모든 사진을 렌더링

Etc

Tanstack Query Devtools 안보이는 이슈

type	title	labels	assignees
BUG	Tanstack Query Devtools 안보이는 이슈	bug	혜리

Description

Tanstack Query Devtools 위치 이상 + 열었을때 아무것도 보이지 않음

To Do

• 해당 버그 고치기

View

업체페이지 메뉴 상세 상단 구현

type	title	labels	assignees
Feat	업체페이지 메뉴 상세 상단구현	feature	혜리

Description

• 업체페이지의 메뉴 상세 파트 구현

To Do

• 메뉴 기본 정보 구현

업체페이지 상단 컴포넌트 구현

type	title	labels	assignees
Feat	업체페이지 상단 컴포넌트 구현	feature	혜리

Description

• 업체페이지 상단 파트 구현

To Do

• 컴포넌트 구현
• 스토리 추가
• 반응형 테스팅
• 기존 모듈들 사용 (버튼 / 태그 / 탭)
• semantic tag 사용

Tag 컴포넌트 구현

type	title	labels	assignees
Feat	Tag 컴포넌트 구현	feature	혜리

Description

• tag 컴포넌트 구현

To Do

• 재활용 가능하도록 컴포넌트 구현
• 반응형 테스팅
• story 추가
• 접근성 고려한 마크업

Mock Data 추가

type	title	labels	assignees
Feat	Mock Data 추가	feature	혜리

Description

Mock Data 추가 및 타입 지정

To Do

• Menu mock data & type
• MenuList mock data & type
• Store mock data & type
• StoreList mock data & type
• Review mock data & type

자주 사용되는 Text 모듈화

type	title	labels	assignees
Feat	자주 사용되는 Text 모듈화	feature	혜리

Description

• 자주 사용되는 text들 모듈화

To Do

• 위치 모듈화
• 가격 모듈화
• 닉네임 모듈화
• info + 튤팁 모듈화
• 당도 모듈화
• 플랫폼 모듈화

리뷰 사진 모아보기 컴포넌트 구현

type	title	labels	assignees
Feat	리뷰 사진 모아보기 컴포넌트 구현	feature	세린

Description

리뷰 미리보기 사진을 클릭하면 모아보기 컴포넌트를 렌더링한다.

To Do

• 리뷰의 모든 사진을 렌더링한다.

Etc

홈피드 추천 탭 구현

type	title	labels	assignees
Feature	홈피드 추천 탭 구현	feature	혜리

Description

• 홈피드 추천 탭 구현

To Do

• 스토어 랭킹 구현
  • 캐러셀 구현
  • 카테고리 버튼 구현
• 디자인 추천 구현
• 리얼리뷰 구현
• 하단 텍스트 구현

Bug: 업체페이지 Info & Notice Table UI 에러

type	title	labels	assignees
Bug	Bug: 업체페이지 Info & Notice Table UI 에러	Bug	혜리

Description

• table ui 망가짐....

To Do

• table UI 다시 원상복귀
• 리팩토링 같이 진행

공통 Layout 적용

type	title	labels	assignees
Feat	공통 Layout 적용	feature	세린

Description

반응형 모바일 웹을 위한 공통 Layout 을 작성한다.

To Do

• 브라우저의 가로 폭을 고정 (max-width 설정)

Etc

참고

• 공식문서
• https://velog.io/@hayoung474/Next.js-%EA%B3%B5%ED%86%B5-layout-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

OverallStats 컴포넌트 구현

type	title	labels	assignees
Feat	OverallStats 컴포넌트 구현	feature	세린

Description

OverallStats 컴포넌트를 구현한다.

To Do

• OverallStats 컴포넌트 구현
• story 작성

Etc

Storybook에서 theme, global style 적용 안되는 이슈

type	title	labels	assignees
Bug	Storybook에서 theme, global style 적용 안되는 이슈	Bug	혜리

Description

Storybook에서 theme, global style 적용 안되는 이슈

To Do

• 버그 수정

업체페이지 Review 리팩토링

type	title	labels	assignees
Refactor	업체페이지 Review 리팩토링	refactoring	혜리

Description

• 업체페이지 Review 리팩토링

To Do

• review preview 모듈화
• review all 모듈화
• review 더보기 구분
• image all route 수정
  • review/all/images -> review/images
• 메뉴상세의 리뷰 더보기 라우트 에러 해결 (/2#review/all -> 2/review/all)

MSW 설치 및 세팅

type	title	labels	assignees
Chore	msw 설치 및 기본 세팅	chore	혜리

Description

msw 설치 및 기본 세팅

To Do

• msw 설치 및 기본 세팅

Storybook Next.js Router 이슈 해결

type	title	labels	assignees
Bug	Storybook Next.js Router 이슈 해결	Bug	혜리

Description

• storybook에서 next.js router 사용시 발생하는 에러 해결

To Do

• storybook next.js addon 추가 or next.js router만 지원하는 라이브러리 사용하여 해결
• 기존에 image, absolute path 및 설정했던 것 지우기 (addon 추가시)
• image, absolute path 등도 잘 동작하는지 재확인 (addon 추가시)

React Query, Storybook, Zustand, Emotion 설치 및 세팅

type	title	labels	assignees
Chore	React Query, Storybook, Zustand, Emotion 설치 및 세팅	chore	혜리

Description

React Query, Storybook, Zustand, Emotion 설치 및 세팅
Global Style, Theme, Font 추가

To Do

• Storybook 설치 및 세팅
• React Query 설치 및 세팅
• Zustand 설치 및 세팅
• Emotion 설치 및 세팅
• Global Style 추가
• Theme 추가
• Font 추가

Icon 컴포넌트 만들기 + 아이콘 모두 추가

type	title	labels	assignees
Feat	Icon 컴포넌트 만들기 + 아이콘 모두 추가	feature	혜리

Description

• 아이콘 사이즈별로 재사용 가능한 컴포넌트 만들기
• 아이콘 파일 모두 추가

To Do

• svg wrapper 컴포넌트 만들기
  • size별 width/height/stroke-width 지정
  • fill, stroke 변경 가능하도록 설정
  • base / selected status 추가
• svg icon과 name 대응하는 객체 constants에 추가
• 현재 피그마에 있는 모든 svg 파일 저장

Notice 컴포넌트 구현

type	title	labels	assignees
feat	Notice 컴포넌트 구현	feature	세린

Description

Table 컴포넌트 사용, 포장 안내 컴포넌트 구현

To Do

• 업체 공지
• 픽업 가능 시간
• 포장 안내

Etc

Review 컴포넌트 리팩토링

type	title	labels	assignees
Refactoring	Review 컴포넌트 리팩토링	refactoring	세린

Description

PR 피드백을 반영하고 추가 사항을 구현, 리팩토링한다.

To Do

• Review를 페이지에서 컴포넌트로 분리
• 캐러셀 스토리 추가
  • 이미지 0개 (없을 때)
  • 이미지 5개
  • 이미지 10개 (많을 때)
• 캐러셀 - 이미지 크기 다양한 경우 처리
• 리뷰 내용 길어질 때
• Container의 width와 height을 고정값에서 부모 컴포넌트의 사이즈에 맞게 변경
• 변경된 GUI 적용
  • border, color

업체페이지 메뉴 / 메뉴상세 붙이기

type	title	labels	assignees
Feat	업체페이지 메뉴 / 메뉴상세 붙이기	feature	혜리

Description

• 업체페이지 메뉴 / 메뉴상세 페이지 이어붙이기

To Do

• 업체페이지 메뉴 / 메뉴상세 페이지 이어붙이기

업체페이지 백엔드 API 붙이기

type	title	labels	assignees
Feat	백엔드 API 붙이기	feature	혜리

Description

• msw에서 백엔드 api로 대체

To Do

• 업체페이지 백엔드 붙이기

리뷰 페이지 구현

type	title	labels	assignees
Feat	리뷰 기능 추가	feature	세린

Description

업체 상세의 리뷰 페이지를 구현한다.

To Do

• 총점 컴포넌트 구현
• 리뷰 사진 캐러셀 구현
• 개별 리뷰 컴포넌트 구현
• #77
  • 전체 / 당도 리뷰 / 외부사이트 리뷰
  • 도움되는 순 - 최신순 / 당도 높은 순 / 당도 낮은 순

리뷰 페이지 렌더링

type	title	labels	assignees
Feat	리뷰 페이지 붙이기	feature	세린

To Do

• OverallStats 컴포넌트
• Review 컴포넌트를 매핑해 리뷰 페이지를 렌더링

Info 컴포넌트 구현

type	title	labels	assignees
feat	Info 컴포넌트 구현	feature	세린

Description

Table 컴포넌트를 활용해 Info 컴포넌트를 구현한다.

To Do

• 판매자 정보
• 식품 정보

Etc

메뉴 상세 페이지 구현

type	title	labels	assignees
Feat	메뉴 상세 페이지 구현	feature	혜리

Description

• 메뉴 상세 페이지 구현
• 리뷰 더보기 리팩토링
• tab 페이지내 섹션 이동 추가

UI 사진

To Do

• svg 제거 (+파일도 제거)
• 사이즈 섹션 구현
• 맛 섹션 구현
• 디자인 섹션 구현
• 주의사항 섹션 구현
• 탭 페이지내 섹션 이동 기능 추가
• 리뷰 더보기 Link 이용해서 데이터 전송

Theme color 리팩토링

type	title	labels	assignees
Refactor	Theme color 리팩토링	refactoring	혜리

Description

• 현재 color가 figma랑 다른 부분도 있고 추가가 안된 color들이 있어서 다시 한번 정리 후 theme에 넣기 + 변경사항 적용

To Do

• figma color 목록 뽑기
• color theme에 넣기
• 변경사항 지금 코드에 적용

Review 컴포넌트 UI 변경사항 추가

type	title	labels	assignees
feat	Review 컴포넌트 UI 변경사항 추가	feature	세린

Description

추가된 UI 를 적용한다.

To Do

• 단골 태그
• 맛있어요 태그
• 도움이 돼요 태그

Etc

Storybook Build Error

type	title	labels	assignees
Bug	Storybook Build Error	bug	혜리

Description

• storybook msw로 빌드에러

To Do

• msw add on 추가
• 에러 해결

Button 컴포넌트 구현

type	title	labels	assignees
Feature	Button 컴포넌트 구현	feature	혜리

Description

재사용 가능한 버튼 컴포넌트 구현

To Do

• Button 컴포넌트 구현
  • square button
  • circular button
• Button stories 추가
  • 페이지에서 사용되는 다양한 형태 모두 넣기
• 반응형 고려

Bug: 빌드 이슈

type	title	labels	assignees
Bug	빌드 이슈	bug	혜리

Description

• netlify build issue

Card 컴포넌트 구현

type	title	labels	assignees
Feat	Card 컴포넌트 구현	feature	혜리

Description

• 여러 형태의 card 컴포넌트 재사용 가능하도록 구현

To Do

• card 컴포넌트 구현
• stories 추가
• 반응형 테스팅

Storybook 배포

type	title	labels	assignees
Feat	Storybook 배포	feature	세린

Description

Storybook을 배포한다.

To Do

• Storybook 배포

Etc

로컬 repo의 develop 브랜치로 배포

업체페이지 관련 Routing 추가

type	title	labels	assignees
Feat	Basic Routing 추가	feature	혜리

Description

업체페이지 관련 필요한 페이지들 생성 및 폴더 구조 관리

To Do

• 업체 - 메뉴 페이지 추가
• 업체 - 메뉴 상세 페이지 추가
• 업체 - 주문양식 페이지 추가
• 업체 - 공지사항 페이지 추가
• 업체 - 리뷰 페이지 추가
• 업체 - 정보 페이지 추가
• 페이지마다 stories, styled, component 파일 분리

디렉토리 구조 및 파일명 리팩토링

type	title	labels	assignees
Refactor	디렉토리 구조 및 파일명 리팩토링	refactoring	혜리

Description

• 디렉토리 구조 및 파일명 리팩토링

To Do

• pages / ui (page의 stories / styled) 폴더로 구분된 것 pages로 다시 합치기
• 파일명 통일
  • 모두 대문자로 시작
  • styled.tsx / stories.tsx / .tsx 로 통일

Review 컴포넌트 구현

type	title	labels	assignees
Feat	Review 컴포넌트 구현	feature	세린

Description

재사용되는 리뷰 컴포넌트를 구현한다.

To Do

• Review 컴포넌트 구현
  • 캐러셀 컴포넌트 구현 (Swiper js 라이브러리 적용)

Etc

리뷰 필터링

type	title	labels	assignees
Feat	리뷰 필터링	feature	세린

Description

리뷰를 필터링한다.

To Do

• 전체 / 당도 리뷰 / 외부사이트 리뷰
• 도움되는 순 - 최신순 / 당도 높은 순 / 당도 낮은 순

업체페이지 Mocking

type	title	labels	assignees
Feat	업체페이지 Mocking	feature	혜리

Description

업체페이지 Mocking

To Do

• msw handler 추가
• react-query queries 추가
• data 렌더링 확인