제품을 대여해서 미리 사용해보고 체험해 볼 수 있는 서비스
https://200-cherry.vercel.app/
- 개발 기간 : 2025.08.11 ~ 2025.09.15
- 참여 인원 : 프론트 2명
- Language :
TypeScript(코드 안정성과 유지보수성 향상) - Framework / Library :
Next(App Router)(SEO 최적화, 빠른 페이지 로딩) - UI :
Tailwind CSS(빠른 개발, 일관된 디자인, 협업 효율 향상) - State Management :
Tanstack Query(서버 상태 관리),Zustand(UI 상태 관리) - Build Tool / Bundler :
Vite(빠른 개발 서버와 빌드 속도, 간편한 설정) - HTTP Client :
Axios(간결한 API 요청 처리, 응답 인터셉터로 공통 로직 관리 용이)
| 담당 페이지 | 주요 기능 |
|---|---|
| 홈 페이지 | 로그인 여부에 따라 달라지는 웰컴 배너 기능, 스와이퍼를 활용한 하단 이미지 배너 기능 |
| 메뉴 햄버거 페이지 | 병렬 라우팅 사용 로그인 상태별 메뉴 구성 기능 |
| 상품 페이지 | 상품 목록 데이터 출력, 브랜드와 정렬 기준에 따른 정렬 기능, 무한 스크롤 기능(Tanstack Query) |
| 이용 내역 페이지 | 배송 상태에 따른 이용 내역 데이터 출력,배송 상태 및 리뷰 상태에 따른 하단 버튼 변경, 무한 스크롤 기능(Tanstack Query) |
| 주문 상세 페이지 | 체험 정보 및 결제 내역 데이터 출력 기능 |
| 담당 페이지 | 주요 기능 |
|---|---|
| 로그인 페이지 | 카카오 oAuth를 활용한 간편 로그인 기능, 닉네임, 아이디 중복확인 기능 |
| 상품 상세 페이지 | 상품 상세 데이터 출력, 장바구니 담기 기능(Tanstack Query를 활용해 헤더에 장바구니 개수 출력), 바로 결제 기능 |
| 장바구니 페이지 | 장바구니 데이터 출력, 장바구니 상품 삭제 기능, 선택 상품 결제 기능 |
| 체험 신청 페이지 (결제) | 장바구니 리스트 결제/바로 결제 분기 처리, 달력 라이브러리, 다음 도로명 API호출, 유효성 검사 기능 |
| 리포트 페이지 | 리포트 작성 가능/ 이미 작성한 리포트 탭 분리, 무한 스크롤 기능 |
| 마이 페이지 | UI 작업 |
| 페이지 | |
|---|---|
| 메인 페이지 | ![]() |
| 상품 페이지 | ![]() |
| 상품 상세 페이지 | ![]() |
| 장바구니 페이지 | ![]() |
| 체험 신청 페이지 | ![]() |
| 리포트 페이지 | ![]() |
| 이용 내역 페이지 | ![]() |
| 마이 페이지 | ![]() |
-
Git : GitHub Flow, Merge
- main : 배포용 브랜치
- develope : 개발용 브랜치
- feature/기능 이름 : 기능별 브랜치
-
코드 컨벤션
- 파일명 :
camelCase - 컴포넌트명 :
PascalCase - Prettier사용
- 파일명 :
-
커밋 컨벤션
| 커밋 메세지 | 상태 |
|---|---|
| ✨ feat | 새로운 기능 추가 |
| 🐛 fix | 버그 수정 |
| 📝 docs | 문서 수정 |
| 💄 style | 코드 포맷팅, 세미콜론 등 변경 (기능 변화 없음) |
| ♻️ refactor | 코드 리팩토링 (기능 변화 없음) |
| 🔧 chore | 빌드/도구/설정/환경 업데이트 (의존성, CI, 스크립트, 설정 파일 등) |







