← 포트폴리오 목록
키즈아웃 나들이 코스 추천
레저·여행·교육 도메인에서 아이 동반 가족 외출을 위한 코스 추천 서비스를, 지도 기반 반경검색, 사용자정의 코스구성, 체험 프로그램 예약 신청·확정·취소, 카카오·네이버 소셜 로그인을 중심으로 React와 Node.js 기반 풀스택 구조로 설계합니다.
반경 기반 지도 마커 클러스터링 엔진 설계카카오맵 SDK 위에 반경 1~2km 필터와 마커 클러스터링 로직을 구현해 다수 장소를 그룹화 표시하는 구조를 설계합니다.
방문 순서 재배치 코스 빌더 구현드래그 앤 드롭 기반 순서 변경 UI와 코스 저장 API를 설계해 나만의 외출 코스를 구성하는 구조를 구현합니다.
예약 상태 전이 트랜잭션 설계신청 대기·확정·취소 3단계 상태 전이를 원자적 트랜잭션으로 처리하는 예약 API를 설계합니다.
Overview
프로젝트 개요
레저·여행·교육 도메인에서 아이 동반 가족 외출을 위한 코스 추천 서비스를, 지도 기반 반경검색, 사용자정의 코스구성, 체험 프로그램 예약 신청·확정·취소, 카카오·네이버 소셜 로그인을 중심으로 React와 Node.js 기반 풀스택 구조로 설계합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
체험처 반경 내 다수 장소를 실시간으로 필터링하면서 지도 렌더링 성능을 유지하는 마커 클러스터링 전략 설계가 필요합니다
사용자가 자유롭게 재배열한 코스 순서 데이터를 안정적으로 저장하고 재구성하는 정렬 데이터 구조 설계가 필요합니다
현장 결제 방식의 예약 신청·확정·취소 전이 과정에서 동시 예약 충돌을 방지하는 트랜잭션 격리 수준 설계가 필요합니다
카카오·네이버 두 소셜 로그인 제공자의 토큰 정책 차이를 흡수하는 통합 인증 어댑터 설계가 필요합니다
구현 내용
핵심 기능 상세
핵심 기능 1
반경 검색 지도
체험처를 중심으로 반경검색 범위를 1~2km에서 조절하며 지도 위에 아이 동반 가능한 식당·카페를 표시하고, 각 장소의 유아편의시설(주차, 아기의자, 수유실) 정보를 확인합니다
핵심 기능 2
코스 구성
지도에서 선택한 장소들의 방문 순서를 자유롭게 조정하는 사용자정의 코스구성 기능을 제공하고, 완성된 코스를 카카오톡으로 공유합니다
핵심 기능 3
예약 관리
체험 프로그램 예약을 신청하고 신청 대기·예약 확정·취소 상태로 관리하며, 결제는 현장에서 진행하는 방식으로 설계합니다. 예약 상태 전이 API와 상태별 색상 배지, 취소 사유 입력 폼을 구현합니다
핵심 기능 4
마이페이지
카카오·네이버 계정으로 간편 가입하고, 마이페이지에서 저장한 코스와 예약 내역, 작성한 리뷰를 확인합니다. OAuth2 인증 어댑터와 마이페이지 통합 조회 API를 구현합니다
구현 과정
프로젝트 진행 단계
STEP 1
지도 API 연동 및 DB 스키마 설계
카카오맵 API 연동 구조 설계, 장소·체험처·리뷰 등 PostgreSQL 테이블 12개 정의
STEP 2
반경 검색 및 코스 구성 API 개발
Express 기반 반경 필터 API, 코스 순서 저장 API 등 18개 엔드포인트 구현
STEP 3
지도 기반 프론트엔드 UI 개발
React 기반 지도 홈·코스 상세·예약 화면 등 8개 화면 구현, Tailwind 반응형 적용
STEP 4
소셜 로그인 연동 및 통합 테스트
카카오·네이버 OAuth 연동, 예약 상태 전이 테스트 등 32개 케이스 검증
프로젝트 성과
주요 성과
반경 기반 지도 마커 클러스터링 엔진 설계카카오맵 SDK 위에 반경 1~2km 필터와 마커 클러스터링 로직을 구현해 다수 장소를 그룹화 표시하는 구조를 설계합니다.
방문 순서 재배치 코스 빌더 구현드래그 앤 드롭 기반 순서 변경 UI와 코스 저장 API를 설계해 나만의 외출 코스를 구성하는 구조를 구현합니다.
예약 상태 전이 트랜잭션 설계신청 대기·확정·취소 3단계 상태 전이를 원자적 트랜잭션으로 처리하는 예약 API를 설계합니다.
소셜 로그인 통합 인증 모듈 구현카카오·네이버 OAuth2를 표준화된 인증 미들웨어로 통합해 로그인 흐름을 일관되게 처리하는 구조를 설계합니다.
Review
기술적 주안점
- 지도 SDK 위에 반경 필터와 유아 편의시설 태그를 결합한 탐색 구조를 구현합니다
- 드래그 앤 드롭 순서 변경과 SNS 공유를 결합한 코스 빌더 구조를 구현합니다
- 예약 상태 전이를 트랜잭션으로 관리해 신청부터 확정·취소까지 일관되게 추적하는 구조를 구현합니다
