Airbnb Clone — 숙소 검색·예약

에어비앤비의 홈 → 검색 → 목록 → 상세 → 예약 흐름을 PC·모바일 모두 실제 서비스 수준으로 구현한 프로젝트입니다.

Next.js 16 (App Router · RSC) · React 19 · TypeScript · Redux Toolkit · CSS Modules · Vitest

핵심 포인트

	무엇을	왜 / 어떻게
🔗	검색 상태 = URL	검색 조건과 탭을 쿼리스트링에 둬서 새로고침·뒤로가기·링크 공유가 그대로 동작. 필터링은 서버 컴포넌트에서
🧭	서버/클라이언트 경계	페이지는 전부 서버 컴포넌트, 인터랙션 부분만 "use client". 목업 데이터가 브라우저 번들에 들어가지 않음(빌드 결과로 확인)
📅	날짜를 값으로 저장	"7월 15일" 같은 라벨 대신 "오늘부터 N일 뒤"로 저장 → 시간이 지나도 데이터가 낡지 않음. "오늘"은 KST로 맞춰 hydration 불일치 방지
🔍	검색바 인터랙션	서로 다른 두 검색바를 FLIP 애니메이션으로 하나처럼 전환, 팝업 하나를 미끄러지듯 이동, 키보드로 전부 조작 가능
📱	모바일은 별도 구조	축소한 PC가 아니라 실제 에어비앤비 모바일 웹 구조(전체 화면 검색, 하단 탭바, 하단 예약 바). PC와 검색 상태 공유
🧾	예약 API · 무한 스크롤	Route Handler로 예약 API·목록 API 직접 구현. 첫 페이지는 서버 렌더링, 이후는 API로 이어 붙임

주요 기능

• 홈 — 숙소·체험·서비스 탭, 카드 캐러셀, 스크롤 시 검색바 압축
• 검색 — 여행지 자동완성 · 날짜(캘린더) · 인원 필터, 탭별 결과 페이지
• 목록 — 카드 사진 넘기기, 우측 지도(모바일은 지도 토글), 무한 스크롤
• 상세 — 사진 갤러리 + 사진 모두 보기, PC 스크롤 탭, 예약 카드 → 확인 모달 → 예약 요청
• 기타 — 위시리스트(새로고침 유지, /wishlists), 공유 링크 복사, 페이지별 메타데이터·OG
• 접근성 — 모달 포커스 트랩, 검색바 키보드 조작

💡 예약 실패 화면은 상세 URL에 ?demo=fail을 붙이면 볼 수 있습니다. 예: /rooms/1?demo=fail

실행

npm install
npm run dev    # http://localhost:3000
npm test       # 단위 테스트 (날짜·필터·예약 검증·검색 상태 등 순수 로직)

구조

src/
├── app/         # 라우트(서버 컴포넌트) + api/ (listings, reservations)
├── components/  # common(헤더·검색바) · home · listing · detail · layout
├── lib/         # 순수 로직 + 테스트
├── data/        # 목업 데이터 (서버에서만 사용)
└── store/       # Redux (위시리스트)

범위 밖

데이터는 전부 목업이고 결제·로그인·후기·필터 칩은 구현하지 않았습니다. 지도는 Google Maps embed라 숙소별 가격 마커가 없습니다.