← 포트폴리오 목록
아웃도어 캠핑장 예약 플랫폼
매거진형 큐레이션 피드로 캠핑장을 탐색하고, 실시간 예약 가능여부를 검색·필터링해 PG 카드결제까지 한 번에 완료하는 반응형 웹 예약 플랫폼을 구현합니다.
날짜 기반 재고 홀드 구조 설계결제 대기 중 이중 예약을 막는 TTL 임시 홀드 로직 구현, 만료 시 자동 재고 복구 처리
다중 필터 검색 쿼리 최적화지역×편의시설×날짜 조합 필터를 인덱스 기반 쿼리로 설계해 조건 조합에도 응답 구조 유지
매거진형 피드 렌더링 구조 구현Intersection Observer 지연 로딩과 masonry 카드 배치로 대형 이미지 피드 UI 구현
Overview
프로젝트 개요
매거진형 큐레이션 피드로 캠핑장을 탐색하고, 실시간 예약 가능여부를 검색·필터링해 PG 카드결제까지 한 번에 완료하는 반응형 웹 예약 플랫폼을 구현합니다. 예약 발생 시 관리자 대시보드로 즉시 연동되는 구조를 함께 설계합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
동일 사이트에 대한 동시 결제 시도 시 재고 잠금과 트랜잭션 격리 수준을 함께 설계할 필요가 있습니다
매거진형 피드의 대형 이미지 로딩과 초기 렌더링 속도 사이의 균형을 맞추는 지연 로딩 전략이 필요합니다
부가 예약 옵션의 정원 상한과 본 예약 재고를 별도 트랜잭션으로 정합성 있게 관리하는 구조가 필요합니다
PG 결제 웹훅 지연·실패 시나리오에서도 예약 상태가 꼬이지 않
재시도·롤백 정책을 설계할 필요가 있습니다
구현 내용
핵심 기능 상세
핵심 기능 1
매거진형 큐레이션 피드
SNS처럼 스크롤하며 에디터가 큐레이션한 캠핑장 컬렉션(반려동물 동반, 오션뷰, 글램핑 등)을 대형 사진 카드로 탐색합니다
핵심 기능 2
캠핑장 검색·필터링
지역·카테고리·편의시설로 필터링하고, 원하는 날짜를 선택하면 해당 날짜의 실시간 예약 가능여부가 카드에 즉시 반영됩니다
핵심 기능 3
예약 및 PG 카드결제
날짜 선택 → 예약자 정보 입력 → PG 카드결제까지 이어지는 예약 플로우를 한 화면 흐름으로 제공합니다. 포트원 결제 SDK 연동, 결제 승인 웹훅 처리, 결제 실패 시 예약 임시 홀드 자동 해제
핵심 기능 4
부가 예약 옵션
예약 폼에서 인근 음식점·액티비티 등 큐레이션된 부가 서비스를 함께 선택해 예약 금액에 합산할 수 있습니다. 부가 옵션 카탈로그 CRUD 연동, 옵션 조합별 합계 금액 실시간 계산
구현 과정
프로젝트 진행 단계
STEP 1
예약·결제 DB 설계 및 재고 모델링
캠핑장/사이트/예약/결제 테이블 설계, 날짜 범위 가용 재고 쿼리 구조 설계
STEP 2
검색·필터·매거진 피드 API 개발
다중 필터 조합 검색 API, 큐레이션 피드 페이지네이션 API 구현
STEP 3
예약·PG 결제 플로우 개발
포트원 결제 연동, 임시 홀드·웹훅 검증 로직, 부가 옵션 합산 로직 구현
STEP 4
반응형 UI 및 통합 검증
PC/모바일 반응형 레이아웃 적용, 결제 실패·홀드 만료 등 예외 시나리오 검증
프로젝트 성과
주요 성과
날짜 기반 재고 홀드 구조 설계결제 대기 중 이중 예약을 막는 TTL 임시 홀드 로직 구현, 만료 시 자동 재고 복구 처리
다중 필터 검색 쿼리 최적화지역×편의시설×날짜 조합 필터를 인덱스 기반 쿼리로 설계해 조건 조합에도 응답 구조 유지
매거진형 피드 렌더링 구조 구현Intersection Observer 지연 로딩과 masonry 카드 배치로 대형 이미지 피드 UI 구현
Review
기술적 주안점
- 무한 스크롤 피드에 지연 로딩과 캐싱 전략을 결합해 대형 이미지 위주 매거진 UI에서도 스크롤 체감 반응을 즉각적으로 유지하는 구조를 설계합니다
- 다중 필터와 날짜별 실시간 가용 재고 조회를 결합한 검색 엔진을 구현해, 사용자가 조건을 바꿀 때마다 예약 가능한 캠핑장만 즉시 걸러지는 탐색 경험을 설계합니다
- 결제 승인 웹훅 기반 서버 검증과 임시 재고 홀드 로직을 결합해, 동시에 여러 사용자가 같은 사이트를 결제 시도해도 이중 예약이 발생하지 않는 구조를 구현합니다
