Bookscape는 Book(예약)과 Landscape(지도/공간)의 합성어로, 지도 위의 풍경 속에서 경험을 탐색하고 예약한다는 의미를 담고 있습니다. 직관적인 UI를 통해 체험 탐색부터 예약, 관리까지 모든 흐름을 한눈에 확인할 수 있도록 돕는 서비스입니다.
💻 시연 영상 >
📊 PPT >
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 김혜원 | 남빛나 | 여수경 | 이서정 | 정다은 |
| 이름 | 담당 |
|---|---|
| 🚩이서정(팀장) | 공통 컴포넌트 드롭다운, empty 화면, 모달, 헤더, 공통 레이아웃 페이지 & 기능 마이페이지 - 예약 내역 & 내 체험 관리, 404 페이지, 500 페이지, 카카오 인증, 알림 기능 공통 훅/기능 무한 스크롤, 스켈레톤 UI 기타 인프라, 초기 세팅, 피그마 리디자인 |
| 김혜원 | 공통 컴포넌트 사이드바, 타이틀, 푸터, state 뱃지, 마이페이지 레이아웃 페이지 & 기능 마이페이지 - 내 정보 수정 & 예약 현황 기타 fetch 함수 세팅 |
| 남빛나 | 공통 컴포넌트 버튼, 인풋, 필터 버튼, Textarea 페이지 & 기능 마이페이지 - 내 체험 등록 & 내 체험 수정, 카카오 우편번호 주소 검색 기능 공통 훅/기능 유효성 검사, 메타 태그 정의 기타 Gemini 코드 리뷰 설정 |
| 여수경 | 공통 컴포넌트 검색 인풋, 프로필, 가격/인, 체험 카드(인기 체험, 예약 내역, 체험 관리) 페이지 & 기능 로그인 & 회원가입 페이지, 메인 & 검색 화면, 체험 목록 페이지 공통 훅/기능 스켈레톤 UI 기타 Tailwind CSS 설정, fetch 함수 세팅 |
| 정다은 | 공통 컴포넌트 토스트, 페이지네이션, 로고, 탭바, 페이지 헤더 페이지 & 기능 체험 상세 페이지, 카카오톡 공유 기능 기타 Storybook 설정 |
모든 화면은 PC / Tablet / Mobile 반응형을 고려해 구현했습니다.
| PC | Tablet | Mobile |
|---|---|---|
 |
 |
 |
| 메인 페이지(/) |
|---|
 |
| 카테고리 / 인기 체험 / 검색을 통한 체험 탐색 |
| 회원가입 & 로그인(/signup,/login) |
|---|
 |
| 일반 회원가입 및 로그인 - 유효성 검사, 카카오 소셜 로그인 |
| 체험 리스트(/activities) |
|---|
  |
| 카테고리 필터 / 가격 정렬 / 키워드 검색 |
| 체험 상세 페이지(/activity/[id]) |
|---|
  |
| 체험 정보 & 후기, 예약, 카카오톡 공유 |
| 알림 |
|---|
 |
| 예약 신청 / 승인 / 거절 알림 실시간 확인 & 삭제 |
| 내 정보(/mypage/info) |
|---|
 |
| 프로필 이미지 / 닉네임 / 비밀번호 변경 |
| 예약 내역(/mypage/reservation-list) |
|---|
  |
| 예약 상태별 확인, 예약 취소, 후기 작성 |
| 내 체험 관리(/mypage/activity) |
|---|
 |
| 등록한 체험 목록 확인 / 체험 삭제 |
| 체험 등록 & 수정(/activity/new, /activity/[id]/edit) |
|---|
  |
| 체험 등록 - 체험 정보 입력, 카카오 우편번호 주소 검색, 이미지 업로드, 예약 스케줄 등록 / 체험 수정 |
| 예약 현황(/mypage/reservation-status) |
|---|
|
| 캘린더로 예약 현황 확인 / 예약 승인 & 거절 |
📁 src
├── 📁 app # 페이지 라우팅 (Next.js App Router)
│ ├── 📁 (private) # 로그인 필요 라우트 그룹
│ │ ├── 📁 activity
│ │ └── 📁 mypage
│ ├── 📁 (public) # 공개 라우트 그룹
│ │ ├── 📁 (auth)
│ │ └── 📁 (explore)
│ ├── 📁 api # BFF Route Handlers
│ │ ├── 📁 activities
│ │ ├── 📁 auth
│ │ ├── 📁 my-activities
│ │ ├── 📁 my-notifications
│ │ ├── 📁 my-reservations
│ │ ├── 📁 oauth
│ │ └── 📁 users
│ ├── robots.ts
│ └── sitemap.ts
│
├── 📁 features # 도메인별 기능
│ ├── 📁 auth
│ ├── 📁 my-page
│ ├── 📁 notification
│ ├── 📁 reservation
│ └── 📁 user
│
└── 📁 shared # 공통 재사용 요소
├── 📁 apis ( base, bff )
├── 📁 assets ( fonts, icons, images, logo, lotties )
├── 📁 constants
├── 📁 hooks
├── 📁 providers
├── 📁 stores
├── 📁 styles
├── 📁 types
├── 📁 ui # 공통 UI 컴포넌트
└── 📁 utils