🌍 GlobalNomad — 로컬 체험 예약 플랫폼 프로젝트 소개
다양한 지역의 체험을 손쉽게 예약하고 공유할 수 있는 웹 플랫폼, GlobalNomad
📆 개발 기간
- 2025.05.29 ~ 2025.06.24
🔗 배포 URL
🧭 프로젝트 개요
GlobalNomad는 사용자가 전 세계의 다양한 지역 체험 콘텐츠를 탐색하고, 예약하고, 후기를 남길 수 있는 체험 예약 플랫폼입니다.
- 키워드 검색, 카테고리 필터링, 정렬 기능 등을 통해 원하는 체험을 빠르게 찾을 수 있습니다.
- 예약 후 리뷰 작성을 통해 다른 사용자와 경험을 공유할 수 있습니다.
🎯 핵심 목표
- 공통 디자인 컴포넌트 문서화를 위한 Storybook 적용
- 클라이언트 전역 상태 관리를 위한 Zustand, 서버 상태 관리를 위한 React Query 사용
- 스타일링의 편의성과 일관성을 위한 Tailwind CSS 적용
- Next.js 기반의 SSR/SSG 지원 구조로 성능 최적화
👥 팀원 소개
김태욱 이수정 이지은 이현석 @dkozowlk @callu9 @LeeJiEuns @leeunduck
⚙️ 기술 스택
개발 환경
- Next.js, React, TypeScript
- React Query, Zustand, Axios
- Tailwind CSS
프로젝트 관리 및 문서화
- GitHub, Jira, Storybook
배포
- Vercel
📐 컨벤션
✅ 네이밍
- 변수, 함수:
camelCase- 상수:
SCREAMING_SNAKE_CASE- 클래스, 컴포넌트:
PascalCase- 폴더, 라우트:
nocase- HTML 속성:
skewer-case
✅ 커밋 메시지 규칙
태그 설명 feat:기능 추가 fix:버그 수정 docs:문서 수정 style:스타일 수정 refactor:리팩토링 test:테스트 코드 추가 chore:빌드/패키지 설정 rename:파일/폴더 이름 변경 remove:파일 삭제
🧩 내 담당 페이지 및 주요 기능
🏠 메인 페이지
- 키워드 기반 체험 검색 기능을 구현하여 사용자가 원하는 체험을 쉽게 탐색할 수 있도록 했습니다.
- 카테고리 필터 및 정렬 기능을 통해 검색 결과를 더욱 정교하게 조정할 수 있도록 했습니다.
- 인기 체험을 슬라이더 형태로 제공하여 주목할 만한 콘텐츠를 효과적으로 노출시켰습니다.
- 전체 체험 목록에 페이지네이션을 적용하여 많은 데이터를 효과적으로 보여줄 수 있게 했습니다.
- 각 체험 카드를 클릭 시 상세 페이지로 이동하도록 연결해 사용자 흐름을 자연스럽게 구성했습니다.
📅 예약내역 페이지
- 사용자가 직접 예약한 체험 목록을 확인할 수 있는 UI를 구현했습니다.
- 예약 상태(진행 예정, 완료, 취소)에 따라 필터링할 수 있어 원하는 정보를 빠르게 찾을 수 있습니다.
- 예약된 체험의 예약 취소 기능을 구현했습니다.
- 후기 작성이 가능한 모달 컴포넌트
ReviewModal을 구현하여 UX를 개선했습니다.- 예약 상태별 배지를 보여주는
StatusBadgeGroup컴포넌트를 커스텀 제작해 시각적 정보 전달력을 높였습니다.
