장소 기반으로 일정을 관리할 수 있는 웹 어플리케이션
- 위치기반 일정관리 사이트 "Localendar"입니다.
- 위치의 "Location"과 달력의 "Calendar"를 합친 이름입니다.
- 장소 기반으로 자신의 일정을 시각적으로 관리할 수 있는 웹 애플리케이션입니다.
- 사용자는 지도 위에서 자신의 일정을 한눈에 확인하고 관리할 수 있습니다.
- 지난 일정을 아카이브 형태로 확인할 수 있어 과거 활동을 쉽게 되돌아볼 수 있습니다.
📅 개발 기간: 2025.02.26 ~ 2025.03.05 (총 7일)
💬 배포 주소: https://out-source-project.vercel.app/
로그인 전 메인페이지
로그인 후 메인페이지
마이페이지
- React 기반 웹 애플리케이션입니다.
- TanStack Query의 Infinite Query와 Prefetch를 사용하여 사용자 경험을 향상시켰습니다.
- TanStack Query와 함께 Suspense를 사용하여 개발자 경험을 향상시켰습니다.
- supabase를 이용하여 이메일 회원가입 및 로그인 기능을 제공합니다.
- 로그인된 유저의 인증 상태에 따라 ProtectedRoute를 적용하여 비인가 사용자의 접근을 제한합니다.
- 일정을 지도 위 마커로 시각화하여 위치 기반 일정 관리를 직관적으로 구현했습니다.
- 검색창을 통해 장소를 쉽게 찾고, 직관적인 모달을 통해 일정을 생성/수정할 수 있어 사용자 편의성을 높였습니다.
- 마이페이지에서 프로필 수정 및 지난 일정 기록과 가장 자주 방문한 장소를 한눈에 확인할 수 있도록 구성했습니다.
📦 out-source-project
├─ public
└─ src
├─ App.jsx
├─ main.jsx
├─ components
│ ├─ features
│ ├─ layouts
│ └─ ui
├─ config
├─ constants
├─ lib
│ ├─ apis
│ ├─ hooks
│ └─ utils
├─ pages
├─ stores
└─ styles
KIMgyeongmIN00 |
kjjyyy01 |
Aeri0730 |
|
protectedRouter 및 라우팅 경로 설계 API 정의 및 TanStackQuery Hook 구현 전역 상태 관리 |
supabase의 storage에 이미지 로드 프로필 이미지 및 닉네임 수정 기능 |
일정 생성/수정 모달 구현 지도에 일정 위치를 노란 마커로 표시 |
llddang |
sharet9446 |
|
|
사이드바 구현 로그인/회원가입 구현 |
전체적인 지도 API 구현 담당 장소 검색을 통한 지도 이동 구현 |