Loventure

Frontend
2025.09 ~ 2025.10Frontend Developer

AI가 커플의 취향과 실시간 컨디션을 분석해서 서울 지역 맞춤형 데이트 코스를 추천해주고, 지도·다이어리·지역락 시스템으로 경험을 확장한 웹 서비스입니다. 카카오엔터프라이즈 SW 아카데미의 현장미러형 프로젝트로 진행했습니다.

GitHubDemo
Loventure 이미지

사용 기술

React 19TypeScriptViteTanStack QueryZustandReact RouterTailwind CSSMUIMapbox GL JSAxiosMSW

Mapbox GL JS데이트 코스라는 도메인 특성상 시작점 선택과 추천 경로·마커·거리/시간 시각화가 핵심 UX라서 지도 렌더링 자유도가 높은 Mapbox를 사용했습니다.

Zustand + TanStack Query온보딩 → 커플 매칭 → 지역 해금 → 완료로 이어지는 권한 단계별 라우팅 가드를 만들기 위해, 서버 상태와 클라이언트 권한 상태를 분리해 관리했습니다.

주요 기능

  • ▸온보딩 취향 정보와 데이트 시간·컨디션·음주 여부·불호 음식 등의 옵션을 결합해 AI 기반 데이트 코스를 추천합니다.
  • ▸Mapbox 지도를 활용해 시작점을 선택하고, 추천 코스를 경로·마커·거리/시간 정보와 함께 시각화합니다.
  • ▸커플 룸·커플 매칭, 서울 25개 구를 단계적으로 해금하는 지역락, 다녀온 코스를 기록하는 다이어리까지 하나의 플로우로 제공합니다.

담당 역할

  • •Feature-Sliced Design(FSD) 기반으로 auth, course, diary, mapbox, mypage 등 기능별 모듈 구조를 설계하고 구현했습니다.
  • •Zustand + TanStack Query 조합으로 권한 단계(ONBOARDING_REQUIRED, COUPLE_MATCHING_REQUIRED, ROCK_REQUIRED, COMPLETED)에 따른 라우팅 가드와 상태 플로우를 구성했습니다.
  • •Mapbox 연동, 코스 추천·저장·다이어리 작성/댓글/마이페이지 등 주요 화면과 UX를 모두 프론트엔드에서 구현했습니다.
모든 프로젝트 보기