CEOS 20th
하루 한 잔 만나는 소소한 행복 'CupfeeDeal'
- 홈 배너는 로그인 여부와 구독권 개수 여부에 따라 동적으로 바뀌며, 키우고 있는 컵캣 표시
- 지도 그래픽을 통해 탐색 페이지로 이동
- 추천 카페와 새로 오픈한 카페 표시(스켈레톤 이미지 적용), 상세정보 페이지 라우팅
- 푸터의 약관이나 정보처리방침 등은 외부 페이지 연결로 확인 가능하며, 카카오 버튼을 누를 경우 카카오 채널 채팅방으로 연결
- 네이버 지도 API v3을 이용한 지도 탐색
- 사용자의 현위치로 이동 가능하며, 해당 위치 기준으로 가까운 카페 리스트 정렬
- 비로그인한 유저의 경우, 카페 검색기능 및 바텀시트를 통한 상세 정보 제공
- 로그인 유저의 경우, 특정 카페를 즐겨찾기로 저장한 후 저장한 카페를 필터링하여 탐색 가능
- 탐색 페이지 진입 시 구독 가능한 카페는 원두 마커로, 즐겨찾기 한 카페는 하트 마커로, 현재 선택된 카페는 말풍선 원두 마커로 구분하여 표기
- 페이지 진입과 바텀시트에 스켈레톤 적용으로 사용자 경험 개선
- 사용자의 현위치로부터 카페의 거리 표기 및 상세 정보 표시
- 즐겨찾기 설정/해제 기능
- 유저의 구독여부, 구독권 개수에 따라 구독하기 버튼 비활성화 및 안내
- 이미 구독중이에요 버튼 / 이미 3개의 구독권을 이용중이에요 안내 모달 렌더링
- 구매, 연장에 따라 다르게 보이는 결제 페이지
- 구매: 2주권, 4주권 선택 후 달력에서 시작일을 선택
- 연장: 2주권, 4주권을 선택하면 자동으로 달력에서 만료일 다음으로 시작일을 계산해서 보여줌 (달이 넘어갈 경우 달력 자동 넘김)
- 버튼도 구매일 경우, 연장일 경우를 나누어 텍스트를 다르게 띄움
- 시작일과 만료일이 설정되면 달력에서 해당 기간 사이의 배경을 표시
- 결제는 토스페이먼츠로 진행 (현재는 공개 클라이언트 키)
- 결제 성공 여부, 구독/연장 여부에 따라 적절한 안내 모달 렌더링
- /payment?type=new&id={현재 구독 중인 카페 id}, 혹은 /payment?type=extend&id={현재 구독 중이지 않은 카페 id}로 접근할 경우 에러 페이지 렌더링
- 현재 구독 중인 구독권들과 그 정보 표시
- 구독권은 총 3개까지만 가능하며 1개/2개/3개일 때 각각 케이스에 맞는 디자인으로 보여짐
- 카드들이 겹쳐있는 형상으로, 기본적으로는 가장 앞의 것이 활성화되어 있지만 뒤의 카드를 선택면 앞의 카드들이 내려가고 선택한 카드가 활성화됨
- 활성화 된 카드: 카페 이름, 구독 정보, 혜택 본 정도(있을 때만), 사용버튼(or 사용 완료 스탬프), 관리 버튼 표시
- 활성화되지 않은 카드: 카페 이름, 관리 버튼 표시
- 사용하기 버튼을 누를 경우 사용 완료 스탬프가 찍히며 그 날 하루는 해당 구독권을 사용할 수 없음. 다음 날에 다시 사용 버튼 활성화
- 발자국을 찍은 카드(혜택을 본 첫 시점부터 발자국 생성 및 모달 렌더링)가 있는 경우 배경에 발자국이 보여지며, 발자국 개수에 따라 1~3개까지 적절히 표시
- 첫 발자국을 찍은 이후엔 이득 본 정도를 컵 수와 문구로 카드에 표시
- 관리 버튼을 누르면 구독의 연장과 취소 가능. 취소의 경우엔 금액과 관련된 안내 모달 이후 승인 시 바로 적용되고 연장의 경우엔 위에서 서술한 결제 페이지로 이동
- 현재 유저의 레벨과 그에 따른 컵캣을 마이페이지 배너에서 표기
- 구독권 구매에 따른 레벨 상승 관련 정보 안내
- 구독 내역의 경우 자신이 지금까지 구매한 (사용 완료/ 사용 중/ 사용 예정) 구독권들을 모아 볼 수 있으며, 검색 및 사용 가능 구독권만 보기 필터링 제공
- 구독 내역에서 만료된 구독권은 다시 구독을, 구독 중인 카페는 연장 또는 취소 페이지로 이동
- 지나간 컵캣에서는 구독권 구매에 따라 획득한 컵캣을 카페 이름과 함께 모아보도록 표시
- 1일 뒤 재변경 가능한 닉네임 변경 기능
- 메일과 문의 유형, 내용을 입력하여 전송하는 문의하기 기능
- 로그아웃 및 회원탈퇴
| 송유선 | 최지원 |
|---|---|
 |
 |
| (auth) + onboarding/ home/ payment/ subscription/ |
search/(?id=#) search/nearList/ mypage/ previous, history, ask, +@ |
- main: 배포용 브랜치
- dev: 개발용 브랜치 (각 기능 브랜치에서 작업한 내용 통합)
- feat-issue#-{기능명}: 개인별 기능 개발 브랜치
- hotfix: 기능 브랜치 생성 후 버그가 생겼을 경우 수정하는 브랜치
- 작업 전 구현할 내용을 정리하여 이슈 템플릿에 따라 이슈 생성
- 해당 이슈번호로 브랜치 생성 ex. feat-12-탐색-api
- 각 브랜치에서 작업 후 PR 생성 및 dev로 Merge
| Type | Description |
|---|---|
| feat | 새로운 기능 추가 |
| fix | 버그 수정 |
| docs | README 수정 |
| style | 기능 수정 없는 코드 스타일 변경 |
| refactor | 코드 리팩토링 |
| chore | 패키지 매니저 수정, 그 외 기타 수정 |
| design | CSS 등 디자인 변경 |
| init | 개발 환경 세팅 |
📦src
┣ 📂api
┃ ┣ 📂client
┃ ┣ 📂server
┃ ┣ 📜client.ts
┃ ┣ 📜server.ts
┃ ┗ 📜token.ts
┣ 📂app
┃ ┣ 🔐(auth)
┃ ┃ ┣ 📂_components
┃ ┃ ┣ 📂oauth/callback/kakao
┃ ┃ ┣ 📂profile
┃ ┃ ┗ 📜page.tsx
┃ ┣ 🏠home
┃ ┃ ┣ 📂_components
┃ ┃ ┗ 📜page.tsx
┃ ┣ 👩🏻💻mypage
┃ ┃ ┣ 📂@modal
┃ ┃ ┣ 📂ask
┃ ┃ ┣ 📂history
┃ ┃ ┣ 📂level
┃ ┃ ┣ 📂nickname
┃ ┃ ┣ 📂quit
┃ ┃ ┣ 📂_components
┃ ┃ ┣ 📜layout.tsx
┃ ┃ ┗ 📜page.tsx
┃ ┣ ☕onboarding
┃ ┃ ┣ 📜OnboardingContent.tsx
┃ ┃ ┗ 📜page.tsx
┃ ┣ 💸payment
┃ ┃ ┣ 📂_clients
┃ ┃ ┣ 📂_components
┃ ┃ ┣ 📂_hook
┃ ┃ ┣ 📜page.tsx
┃ ┃ ┗ 📜PaymentWrapper.tsx
┃ ┣ 🔍search
┃ ┃ ┣ 📂nearList
┃ ┃ ┣ 📂_components
┃ ┃ ┣ 📂_constants
┃ ┃ ┣ 📂_hooks
┃ ┃ ┣ 📜layout.tsx
┃ ┃ ┗ 📜page.tsx
┃ ┣ 💳subscription
┃ ┃ ┣ 📂_components
┃ ┃ ┣ 📂_utils
┃ ┃ ┗ 📜page.tsx
┃ ┣ 📜error.tsx
┃ ┣ 📜font.ts
┃ ┣ 📜globals.css
┃ ┣ 📜layout.tsx
┃ ┗ 📜not-found.tsx
┣ 📂assets
┃ ┣ 📂icons
┃ ┗ 📂json
┣ 📂common
┣ 📂hooks
┣ 📂store
┗ 📂types