맵모리는 지도로 기억하자! 라는 말장난을 이용한 이름입니다.
사용자는 여행계획을 지도에 표시하고 기억할 수 있는 온라인 플랫폼 입니다.
📦 Mapmory
├─ public
└─ src
├─ main.jsx
├─ App.jsx
├─ app
│ ├─ ProtectedRouter.jsx
│ └─ Router.jsx
├─ components
│ ├─ commons
│ ├─ features
│ └─ layouts
├─ constants
├─ ilbs
│ ├─ api
│ ├─ hooks
│ ├─ providers
│ └─ utils
├─ pages
└─ styles
- 여행 계획 작성: NAVER MAPS Api를 사용하여 여행 계획을 세울 수 있습니다.
- 지도 마커와 라인 표시: 날짜와 시간에 맞춰 숫자 마커를 생성하고 라인을 그려 사용자 편의성을 제공합니다.
- 데이터 관리: zustand와 tanstack Query를 사용하여 전역 상태 관리를 수월하게 합니다.
| 페이지 | 경로 | 설명 |
|---|---|---|
| 홈 | / |
홈화면 페이지 |
| 여행 계획 생성 페이지 | /createPlan |
여행 계획 생성 페이지 (로그인 필요) |
| 여행 계획 페이지 | /myPlan |
여행 계획 리스트 페이지 (로그인 필요) |
| 여행 계획 상세 페이지 | /detailPlan |
여행 계획 상세 페이지 (로그인 필요) |
| 로그인 | /signIn |
사용자 로그인 페이지 |
| 회원가입 | /signUp |
새로운 사용자 등록 페이지 |
hyerin-kang |
SuimKim |
arendt9797 |
smileeeeely |
LSJ0706 |
|
홈 화면 구현 헤더 컴포넌트 구현 |
나의 여행 계획 페이지 구현 공통 컴포넌트 구현 |
여행 계획 생성 페이지 구현 naver map api 설정 |
여행 계획 상세 페이지 구현 tanstackQuery 데이터 관리 |
회원가입 / 로그인 페이지 구현 zustand 데이터 관리 |
$ git clone https://github.com/arendt9797/MapMory.git
$ pnpm install
$ pnpm dev
피그마 Link
노션 Link