Global Nomad는 여행을 계획할 때 겪는 여러 고민을 해결하는 플랫폼입니다.
- 여행지에서의 체험 선택부터 비용까지, 계획에 필요한 모든 정보를 간편하게 제공합니다.
- 예약 가능한 날짜에 따라 인원 조절과 가격 변동을 한눈에 확인할 수 있습니다.
- 예약 현황에 따라 변화하는 캘린더와, 반응형 디자인을 통해 다양한 기기에서 최적화된 UI를 제공합니다.
- 카카오 지도 기능을 포함해, 사용자가 여행을 손쉽게 계획할 수 있도록 흥미로운 기능을 다양하게 구성했습니다.
서비스를 체험하기 위해 아래의 테스트 계정을 사용하세요
- 아이디: [email protected]
- 비밀번호: test1234
- 여행 준비 시간 단축: 한눈에 체험 상품을 확인하고 예약 과정을 간소화하여, 사용자에게 더 많은 자유 시간을 제공합니다.
- 맞춤형 경험 제공: 사용자의 상황에 맞춘 가격 조정 및 다양한 기기에서 편리하게 사용 가능한 UX/UI를 구현했습니다.
- 커뮤니티 기반 신뢰 형성: 리뷰 기능을 통해 사용자들이 실제 경험을 공유하며, 신뢰성 있는 정보 제공과 커뮤니티 활성화에 기여합니다.
2024.07.04 ~ 2024.08.09
 팀장 우제윤 |
 김은재 |
 정성혜 |
 이현승 |
 백승렬 |
예약현황 |
내 정보 수정 / 예약 내역 / 리뷰 작성 |
체험 상세 |
내 체험 관리 / 생성 / 수정 |
로그인 / 회원가입 / 메인 |
- Next.js: 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 통해 빠른 페이지 로딩과 SEO 최적화를 실현하기 위해 채택했습니다.
- TypeScript: 타입 안정성을 제공하여 런타임 오류를 줄이고 유지보수성을 높이기 위해 사용했습니다.
- Tailwind CSS: 간결하고 재사용 가능한 스타일을 적용하여 빠르고 유연한 UI 개발을 위해 채택했습니다.
- React Query와 Zustand: 비동기 데이터 상태 관리를 효율적으로 처리하고, 컴포넌트 간 전역 상태 공유를 쉽게 구현하기 위해 선택했습니다.
-
체험 상세 페이지
개발-
예약 카드 반응형 변화
디바이스 크기에 따라 예약 카드 UI가 유동적으로 변화됩니다.-
PC
-
Tablet
-
Mobile
-
-
중복 예약 경고 모달
이미 예약한 일정에 다시 예약을 시도할 경우, 경고 모달을 통해 알림을 제공합니다.
-
이미지 확대 및 다운로드
체험 상세 페이지에서 이미지를 클릭하면 스와이퍼 형태로 확대 가능하며, 원본 파일을 다운로드할 수 있습니다. 기본 로고 이미지는 제외됩니다.
-
모바일 이미지 슬라이더
모바일 버전에서는 이미지 슬라이더가 자동으로 넘겨지도록 설정되었습니다.
-
체험 설명 더보기 기능
체험 설명이 길 경우 '더보기' 버튼이 제공되며, 클릭 시 전체 내용을 확인할 수 있습니다. -
캘린더 예약 가능 날짜 시각적 표시
예약 가능한 날짜가 캘린더에 시각적으로 표시되어 사용자가 쉽게 확인할 수 있습니다. -
건물명 없는 경우 안내
주소지에 건물명이 없을 경우, 지도 인포 윈도우 창에 "건물명 없음"이라는 메시지가 표시됩니다.
-
후기 리스트 연동
후기 댓글 개수를 클릭하면 후기 리스트 페이지로 이동할 수 있습니다. -
마이페이지 리다이렉트
후기 리스트에서 프로필 이미지나 이름을 클릭하면 해당 사용자의 마이페이지로 이동됩니다.
-
-
📲 추가 기능 구현
-
로그인페이지 리다이렉트
비로그인 상태에서 체험 상세 페이지에 접근할 경우 로그인 페이지로 이동됩니다.
-
다크 모드 토글 버튼
사용자의 편의성을 높이기 위해 다크 모드 토글 버튼을 추가하고 상태는 Zustand로 관리합니다.
-
-
Component 작업
- Button
- Pagination
- Calendar
- CustomPopup
- DarkModeButton
- ExpandableText
- Floating Card
- ImageContainer
- Map
- ReservationContent
- ReviewList
- Slider