← 포트폴리오 목록

키즈아웃 나들이 코스 추천

레저·여행·교육 도메인에서 아이 동반 가족 외출을 위한 코스 추천 서비스를, 지도 기반 반경검색, 사용자정의 코스구성, 체험 프로그램 예약 신청·확정·취소, 카카오·네이버 소셜 로그인을 중심으로 React와 Node.js 기반 풀스택 구조로 설계합니다.

반경 기반 지도 마커 클러스터링 엔진 설계카카오맵 SDK 위에 반경 1~2km 필터와 마커 클러스터링 로직을 구현해 다수 장소를 그룹화 표시하는 구조를 설계합니다.
방문 순서 재배치 코스 빌더 구현드래그 앤 드롭 기반 순서 변경 UI와 코스 저장 API를 설계해 나만의 외출 코스를 구성하는 구조를 구현합니다.
예약 상태 전이 트랜잭션 설계신청 대기·확정·취소 3단계 상태 전이를 원자적 트랜잭션으로 처리하는 예약 API를 설계합니다.
서비스 타입Web
업종교육 플랫폼
기술 스택
React 18TypeScriptTailwind CSSNode.jsExpressPostgreSQLPrisma카카오맵 API카카오 로그인 SDK
주요 기능
  • 반경 검색 지도
  • 코스 구성
  • 예약 관리
  • 마이페이지
Overview

프로젝트 개요

범위: 개발, 디자인, 기획

레저·여행·교육 도메인에서 아이 동반 가족 외출을 위한 코스 추천 서비스를, 지도 기반 반경검색, 사용자정의 코스구성, 체험 프로그램 예약 신청·확정·취소, 카카오·네이버 소셜 로그인을 중심으로 React와 Node.js 기반 풀스택 구조로 설계합니다.

작업 범위

  • 반경 검색 지도: 체험처를 중심으로 반경검색 범위를 1~2km에서 조절하며 지도 위에 아이 동반 가능한 식당·카페를 표시하고, 각 장소의 유아편의시설(주차, 아기의자, 수유실) 정보를 확인합니다
  • 코스 구성: 지도에서 선택한 장소들의 방문 순서를 자유롭게 조정하는 사용자정의 코스구성 기능을 제공하고, 완성된 코스를 카카오톡으로 공유합니다
  • 예약 관리: 체험 프로그램 예약을 신청하고 신청 대기·예약 확정·취소 상태로 관리하며, 결제는 현장에서 진행하는 방식으로 설계합니다
  • 마이페이지: 카카오·네이버 계정으로 간편 가입하고, 마이페이지에서 저장한 코스와 예약 내역, 작성한 리뷰를 확인합니다

주요 업무

  • 반경 검색 지도 화면: 카카오맵 SDK 위에 반경 필터와 마커 클러스터링을 구현하고, 장소 상세 API로 편의시설 데이터를 함께 조회하는 구조를 설계합니다
  • 코스 구성 화면: 드래그 앤 드롭 순서 변경 UI와 코스 저장 API, 카카오톡 공유 SDK 연동 구조를 설계합니다
  • 예약 관리 화면: 예약 상태 전이 API와 상태별 색상 배지, 취소 사유 입력 폼을 구현합니다
  • 마이페이지 화면: OAuth2 인증 어댑터와 마이페이지 통합 조회 API를 구현합니다
키즈아웃 나들이 코스 추천
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

체험처 반경 내 다수 장소를 실시간으로 필터링하면서 지도 렌더링 성능을 유지하는 마커 클러스터링 전략 설계가 필요합니다

사용자가 자유롭게 재배열한 코스 순서 데이터를 안정적으로 저장하고 재구성하는 정렬 데이터 구조 설계가 필요합니다

현장 결제 방식의 예약 신청·확정·취소 전이 과정에서 동시 예약 충돌을 방지하는 트랜잭션 격리 수준 설계가 필요합니다

카카오·네이버 두 소셜 로그인 제공자의 토큰 정책 차이를 흡수하는 통합 인증 어댑터 설계가 필요합니다

구현 내용

핵심 기능 상세

핵심 기능 1

반경 검색 지도

체험처를 중심으로 반경검색 범위를 1~2km에서 조절하며 지도 위에 아이 동반 가능한 식당·카페를 표시하고, 각 장소의 유아편의시설(주차, 아기의자, 수유실) 정보를 확인합니다.

  • 카카오맵 SDK와 커스텀 오버레이로 반경 필터·마커 클러스터링 구현
  • 장소·편의시설 조인 쿼리로 아기의자·수유실 등 태그 정보를 지도 마커에 매핑
  • Zustand로 지도 뷰포트·반경·필터 상태를 전역 관리

지도 SDK 위에 반경 필터와 유아 편의시설 태그를 결합한 탐색 구조를 구현합니다.

반경 검색 지도
핵심 기능 2

코스 구성

지도에서 선택한 장소들의 방문 순서를 자유롭게 조정하는 사용자정의 코스구성 기능을 제공하고, 완성된 코스를 카카오톡으로 공유합니다.

  • 드래그 앤 드롭 라이브러리(dnd kit 계열) 기반으로 코스 내 장소 순서 변경 구현
  • 코스-장소 다대다 관계를 중간 테이블로 설계해 순서 값을 정수로 관리
  • 카카오톡 공유 SDK로 코스 요약 카드를 메시지로 전송

드래그 앤 드롭 순서 변경과 SNS 공유를 결합한 코스 빌더 구조를 구현합니다.

코스 구성
핵심 기능 3

예약 관리

체험 프로그램 예약을 신청하고 신청 대기·예약 확정·취소 상태로 관리하며, 결제는 현장에서 진행하는 방식으로 설계합니다. 예약 상태 전이 API와 상태별 색상 배지, 취소 사유 입력 폼을 구현합니다.

  • 예약 상태(대기/확정/취소) 전이를 Prisma 트랜잭션으로 원자적 처리
  • 상태별 색상 배지와 타임라인 UI로 예약 진행 상황 시각화
  • 취소 시 사유 선택 폼과 재신청 가능 여부 플래그 구현

예약 상태 전이를 트랜잭션으로 관리해 신청부터 확정·취소까지 일관되게 추적하는 구조를 구현합니다.

예약 관리
핵심 기능 4

마이페이지

카카오·네이버 계정으로 간편 가입하고, 마이페이지에서 저장한 코스와 예약 내역, 작성한 리뷰를 확인합니다. OAuth2 인증 어댑터와 마이페이지 통합 조회 API를 구현합니다.

  • 카카오·네이버 OAuth2 인증을 공통 어댑터 인터페이스로 통합
  • JWT 기반 세션 관리와 리프레시 토큰 자동 갱신 구현
  • 마이페이지에서 저장 코스·예약 내역·리뷰를 탭 전환으로 조회

두 소셜 로그인 제공자를 단일 인증 어댑터로 통합해 유지보수 지점을 줄이는 구조를 구현합니다.

마이페이지
구현 과정

프로젝트 진행 단계

STEP 1

지도 API 연동 및 DB 스키마 설계 · 2026.08

카카오맵 API 연동 구조 설계, 장소·체험처·리뷰 등 PostgreSQL 테이블 12개 정의

STEP 2

반경 검색 및 코스 구성 API 개발 · 2026.08

Express 기반 반경 필터 API, 코스 순서 저장 API 등 18개 엔드포인트 구현

STEP 3

지도 기반 프론트엔드 UI 개발 · 2026.08

React 기반 지도 홈·코스 상세·예약 화면 등 8개 화면 구현, Tailwind 반응형 적용

STEP 4

소셜 로그인 연동 및 통합 테스트 · 2026.08

카카오·네이버 OAuth 연동, 예약 상태 전이 테스트 등 32개 케이스 검증

프로젝트 성과

주요 성과

반경 기반 지도 마커 클러스터링 엔진 설계카카오맵 SDK 위에 반경 1~2km 필터와 마커 클러스터링 로직을 구현해 다수 장소를 그룹화 표시하는 구조를 설계합니다.
방문 순서 재배치 코스 빌더 구현드래그 앤 드롭 기반 순서 변경 UI와 코스 저장 API를 설계해 나만의 외출 코스를 구성하는 구조를 구현합니다.
예약 상태 전이 트랜잭션 설계신청 대기·확정·취소 3단계 상태 전이를 원자적 트랜잭션으로 처리하는 예약 API를 설계합니다.
소셜 로그인 통합 인증 모듈 구현카카오·네이버 OAuth2를 표준화된 인증 미들웨어로 통합해 로그인 흐름을 일관되게 처리하는 구조를 설계합니다.
Highlights

기술적 주안점

  • 지도 SDK 위에 반경 필터와 유아 편의시설 태그를 결합한 탐색 구조를 구현합니다
  • 드래그 앤 드롭 순서 변경과 SNS 공유를 결합한 코스 빌더 구조를 구현합니다
  • 예약 상태 전이를 트랜잭션으로 관리해 신청부터 확정·취소까지 일관되게 추적하는 구조를 구현합니다

유사한 프로젝트를 기획하고 계신가요?

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기