숙박시설 예약 서비스
🗂️ 배포한 사이트
🚨 주의! 회원가입 시 이미지 업로드는 아직 미구현이므로 이미지는 선택하지 않으셔도 됩니다. 회원가입 시 프로필 이미지는 "피카츄"입니다. 오류가 아니니 놀라지 마세요!
🗂️ PR 주소
🗂️ 프로젝트 기간
24.03.18 ~ 24.04.05
🗂️ 사용 기술
React.js / TypeScript / tailwind css / React Query / zustand
🗂️ 팀원 소개
임현성 |
이은주 |
박인배 |
🗂️ 디렉토리 구조
src
|-- components
| |-- 기능A
| |-- file a
|-- utils
|-- types
| |-- product.ts
|-- UI
| |-- Modal.tsx
| |-- Button.tsx
|-- pages
| |-- HomePage.tsx
| |-- SignupPage.tsx
| |-- LoginPage.tsx
| |-- ProductDetailPage.tsx
| |-- CartPage.tsx
| |-- MyPage.tsx
| |-- OrderDetailPage.tsx
| |-- PaymentPage.tsx
| |-- OrderCompletePage.tsx
|-- store
|-- hooks
|-- icons
|-- context
로그인 | 홈페이지 |
로그인 폼을 통해 로그인 및 회원가입 | 숙박시설 전체조회 및 카테고리 필터링 |
숙박시설 상세페이지 | 예약요청 페이지 |
객실형태, 체크인, 체크아웃, 인원 옵션 선택 후 예약하기 혹은 장바구니 담기 가능 |
선택한 옵션 내역 확인 및 수정 가능, 약관 동의 후 예약요청 |
예약완료 페이지 | 장바구니 페이지 |
예약 확정 및 예약 내역 확인 | 장바구니 담기 한 숙박시설 리스트 확인 및 주문 가능 |
마이페이지 |
내 정보, 예약내역 확인 가능 |
- SignupPage - /signup
- 회원가입
- LoginPage - /login
- 로그인
- PaymentPage - /payment/:id
- 만 14세 이상 이용 동의 ~~
- 결제하기 ⇒ 상품 주문 처리
- OrderCompletePage - /payment/:id/complete
- 결제 성공 시 주문 결과 출력
- OrderDetailPage - /order/:id
- 주문 내역 페이지를 통해 내역 확인 (상세)
- CartPage - /cart
- 장바구니 항목 조회
- 장바구니 항목 삭제
- 기타
- 라우트 관리
- homePage - /home
- 전체 숙박 상품 목록 조회
- 카테고리 분류
- 무한 스크롤
- ProductDetailPage - /product:id
- 개별 숙박 상품 상세 소개
- 상품 선택 시 장바구니 담기 선택
- 숙박 상품 옵션 선택
- 바로 결제
- MyPage - /mypage
- 회원 정보 조회
- 예약 내역(주문 내역) 조회
- 기타
- 깃허브 레파지토리 관리
- 배포 및 환경변수 설정
- main
- develop
- feature/a
- feature/b
- feature/c
- develop
- Add : 파일 생성
- ex) Add : Member Entity 생성
- Feat : 기능 추가
- ex) Feat : 회원가입 기능 추가
- Modify : 해당 기능 코드 수정
- ex) Modify : 회원가입 검증 수정
- Fix : 버그 수정 (디버깅)
- ex) Fix : 로그아웃 후 이동하는 페이지 변경
- Comment : 주석만 건드렸을 때
- Rename : 파일, 폴더명 수정 or 이동만 했을 때
- Remove : 파일 삭제만 했을 때
- Build : 빌드 관련 수정 (dependency 수정 등)
- Chore : import 정리, 포맷 정리 등 (필요하면 마지막에 쭉 돌리면 될 듯)
- Layout : Layout 구조 변경
- Lib : Library 변경 사항