Loventure

Frontend

AI 기반 데이트 코스 추천 서비스

2025.09 ~ 2025.10Frontend Developer8인 팀

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

프로젝트 개요

목표: 커플의 취향과 당일 컨디션에 맞는 서울 데이트 코스를 추천하고, 지도 탐색부터 경험 기록까지 이어지는 서비스를 구현했습니다.
배경: 데이트 장소를 따로 검색하면 두 사람의 취향·시간·이동 경로를 함께 고려하기 어렵습니다. 온보딩 정보와 당일 조건을 하나의 추천 흐름으로 연결할 필요가 있었습니다.
주요 기능: 온보딩 취향 정보와 데이트 시간·컨디션·음주 여부·불호 음식 등의 옵션을 결합해 AI 기반 데이트 코스를 추천합니다.
Mapbox 지도를 활용해 시작점을 선택하고, 추천 코스를 경로·마커·거리/시간 정보와 함께 시각화합니다.
커플 룸·커플 매칭, 서울 25개 구를 단계적으로 해금하는 지역락, 다녀온 코스를 기록하는 다이어리까지 하나의 플로우로 제공합니다.

Frontend Developer

8인 팀에서 프론트엔드 개발자로 기능별 모듈과 사용자 권한 흐름을 설계하고 주요 화면을 구현했습니다.

프론트엔드 아키텍처 설계

FSD 기반 모듈 구조 설계
Feature-Sliced Design(FSD) 기반으로 auth, course, diary, mapbox, mypage 등 기능별 모듈 구조 설계 및 구현
권한 단계별 라우팅 가드 구성
Zustand + TanStack Query 조합으로 권한 단계(ONBOARDING_REQUIRED, COUPLE_MATCHING_REQUIRED, ROCK_REQUIRED, COMPLETED)에 따른 라우팅 가드와 상태 플로우 구성

주요 화면·UX 구현

React · TypeScript · FSD

Mapbox GL JS

Zustand · TanStack Query · React Router

선택 이유: 서버 데이터와 클라이언트 권한 상태를 구분하면서 단계별 진입 조건을 관리하기 위해 사용했습니다.
구현 내용: ONBOARDING_REQUIRED, COUPLE_MATCHING_REQUIRED, ROCK_REQUIRED, COMPLETED 상태를 라우팅 가드와 연결했습니다.

설계 요구: 추천 화면에 진입하려면 취향 입력, 커플 매칭, 지역 선택이 먼저 필요했습니다. 로그인 여부 하나만으로는 다음에 보여줄 화면을 결정할 수 없었습니다.
원인: 서비스 진입 조건이 인증뿐 아니라 사용자 준비 단계에도 의존했습니다.
추가 확인 사항: 각 단계 완료 후 서버 상태와 클라이언트의 화면 이동 기준이 일치해야 합니다.

사용자 준비 단계를 네 가지 상태로 구분하고, 상태에 맞는 페이지로 이동하도록 가드를 구성했습니다. 기능별 모듈 경계를 유지하며 지도·추천·저장 흐름을 연결했습니다.

Loventure · 사용자 준비 상태에 따른 단계별 라우팅 설계 비교
항목	설계 전 요구	구현 결과
진입 조건	로그인 여부만으로 판단 불가	네 가지 준비 상태로 판단
다음 화면 결정	선행 조건을 별도로 확인해야 함	권한 상태에 맞는 라우팅 가드

온보딩부터 코스 추천까지 사용자 상태에 맞게 진행하는 프론트엔드 흐름을 구현했습니다.