제주제주
제주도의 모든 여행코스를 한눈에 보고, 나만의 여행코스를 짤 수 있는 여행 플랫폼입니다
🕸️ 모바일
🕸️ PC
다크모드
업체
여행코스후기
여행 일정 변경
여행 지도
🕸️ 기능 설명
로그인/로그아웃
- 사용자 계정 관리를 통해 개인화된 여행 코스를 저장하고 접근할 수 있습니다.
여행코스 공유 (카카오톡)
- 여행 코스를 카카오톡을 통해 친구나 가족과 쉽게 공유할 수 있습니다.
여행코스 공유 (카카오톡)
- 여행 코스를 카카오톡을 통해 친구나 가족과 쉽게 공유할 수 있습니다.
다크모드 지원
- 다크모드,라이트모드 지원
상품 담기
- 여행 중 필요한 상품들을 내 여행지로 담아 관리할 수 있습니다.
여행 코스 스크롤 이동으로 짜기 가능
- 스크롤 이동을 통해 편리하게 여행 코스를 구성할 수 있습니다.
여행 장소들 마커 정보 확인
- 지도에 표시된 마커를 클릭하여 해당 여행 장소의 정보를 확인할 수 있습니다.
마이페이지
- 개인 정보 관리, 예약 내역 조회, 나의 여행 코스 관리 등의 기능을 제공합니다.
공지사항
- 플랫폼 관련 공지사항을 통해 최신 소식을 확인할 수 있습니다.
문의하기
- 플랫폼 사용 중 궁금한 점이나 문제를 문의할 수 있는 채널을 제공합니다.
여행후기
- 여행을 다녀온 후 후기를 작성하고 다른 사용자의 후기를 확인할 수 있습니다.
카카오지도와 길찾기 API 활용하여 여행코스 거리 시간 계산 기능
- 카카오지도와 길찾기 API를 사용하여 여행 코스의 거리와 예상 시간을 계산할 수 있습니다.
웹앱 반응형 디자인
- 모바일, 태블릿, 데스크탑 등 다양한 디바이스에서 최적화된 화면을 제공합니다.
모달창 뜨면 Next.js Parallel Routes, Intercepting Routes 기술 도입하여 주소 바뀌는 기능
- 모달창이 열릴 때 Next.js의 Parallel Routes와 Intercepting Routes를 활용하여 URL이 동적으로 변경됩니다.
- UX 경험 향상을 고려하여 모바일일때 모달창인 경우 제스처가 먹지 않아 도입하였습니다.
Next.js App route 적용
- App route 폴더 구조 적용
메인 페이지 Next.js SSR 적용
- 메인 페이지에 Next.js의 서버사이드 렌더링(SSR)을 적용하여 초기 로딩 속도를 개선하였습니다.
- SEO 강화
MSW 적용으로 미리 데이터 확인 작업
- MSW(Mock Service Worker)를 적용하여 API 호출을 미리 시뮬레이션하고 데이터 확인 작업을 수행합니다.
🕸️ 파일 구조
📦src
┣ 📂app
┃ ┣ 📂(page)
┃ ┃ ┣ 📂@modal
┃ ┃ ┃ ┣ 📂(.)info
┃ ┃ ┃ ┃ ┗ 📂[...slug]
┃ ┃ ┃ ┣ 📂(.)rinfo
┃ ┃ ┃ ┃ ┗ 📂[...slug]
┃ ┃ ┃ ┗ 📜default.tsx
┃ ┃ ┣ 📂faq
┃ ┃ ┣ 📂info
┃ ┃ ┃ ┗ 📂[...slug]
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂mypage
┃ ┃ ┣ 📂notice
┃ ┃ ┣ 📂rinfo
┃ ┃ ┃ ┗ 📂[...slug]
┃ ┃ ┣ 📂travelreview
┃ ┃ ┣ 📜layout.tsx
┃ ┃ ┗ 📜page.tsx
┃ ┣ 📂(trip)
┃ ┃ ┗ 📂trip
┃ ┃ ┃ ┣ 📂info
┃ ┃ ┃ ┃ ┗ 📂[...slug]
┃ ┣ 📂api
┃ ┣ 📂components
┃ ┃ ┣ 📂Skeleton
┃ ┃ ┣ 📂account
┃ ┃ ┣ 📂detail
┃ ┃ ┣ 📂faq
┃ ┃ ┣ 📂journey
┃ ┃ ┣ 📂loading
┃ ┃ ┣ 📂map
┃ ┃ ┣ 📂mypage
┃ ┃ ┣ 📂nav
┃ ┃ ┣ 📂product
┃ ┃ ┣ 📂trip
┃ ┃ ┣ 📂tripreview
┃ ┃ ┣ 📂ui
┣ 📂config
┣ 📂lib
┣ 📂mocks
┣ 📂service
┣ 📂stores
┣ 📂type
┗ 📂utility
┃ ┣ 📂hooks
┃ ┣ 📂utils 🕸️ WEB DEV
🍧 DESIGN TOOLS
⚙️ BACKEND DEV
📅 DATABASES
🛠️ DEVOPS TOOLS
☁️ CLOUDS
