← 포트폴리오 목록

당일 여성의류 렌탈 예약 플랫폼

여성의류 당일 렌탈 이커머스 서비스의 온라인 고객용 예약 웹을 구현하는 프로젝트입니다.

예약 기간 겹침 판정 엔진 설계PostgreSQL 배타 제약 조건으로 예약 기간 겹침을 방지하는 동시성 제어 구조를 설계합니다.
결제 중 재고 임시확보 트랜잭션 구현결제 진행 중 재고를 임시로 확보하고 타임아웃 시 자동 반환하는 트랜잭션 구조를 구현합니다.
결제 수단별 분기 처리 구조 설계카드·계좌이체·현장결제·쿠폰 회차권 4가지 수단의 확정시점과 환불 규칙을 분리한 전략 패턴을 적용합니다.
서비스 타입Web
업종이커머스
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrisma포트원(PG) 연동AWS S3
주요 기능
  • 상품 탐색 & 가용성 확인
  • 예약 작성
  • 결제
  • 예약 관리
Overview

프로젝트 개요

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

여성의류 당일 렌탈 이커머스 서비스의 온라인 고객용 예약 웹을 구현하는 프로젝트입니다. 상품 탐색부터 날짜별 가용성 확인, 다중 착용자 예약 작성, 4가지 결제 수단 처리까지 하나의 흐름으로 구현하며 React와 Node.js, PostgreSQL 기반으로 설계합니다.

작업 범위

  • 상품 탐색 & 가용성 확인: 카테고리·스타일별 상품을 탐색하고, 상세 페이지에서 사이즈와 렌탈 기간을 선택하면 날짜별 예약 가능 여부를 즉시 확인할 수 있습니다
  • 예약 작성: 여러 착용자를 등록하고 배송 슬롯·배송지·회수지를 분리 입력하며, 1인 1벌 렌탈 정책을 자동으로 검증합니다
  • 결제: 카드·계좌이체·현장결제·쿠폰 회차권 4가지 수단 중 선택해 결제하며, 결제 진행 중에는 재고가 임시로 확보됩니다
  • 예약 관리: 예약 내역과 쿠폰을 조회하고, 수거지를 변경하거나 이전 예약 정보를 그대로 불러와 재주문할 수 있습니다

주요 업무

  • 상품 탐색 & 가용성 확인 화면: 날짜 범위 겹침 판정 쿼리와 재고 캘린더 집계를 통해 선택 기간의 가용 재고를 실시간으로 계산하는 구조를 설계합니다
  • 예약 작성 화면: 착용자별 사이즈 정보와 배송·회수 주소를 별도 테이블로 분리 저장하고, 정책 위반 시 폼 제출 전 검증하는 구조를 설계합니다
  • 결제 화면: 결제 수단별로 확정 시점과 취소환불 규칙이 다르게 분기되며, 결제 세션이 만료되면 임시 확보된 재고는 자동으로 반환되는 구조를 설계합니다
  • 예약 관리 화면: 수거지 변경 시 배송 가능 지역을 재확인하고 변경 이력을 기록하며, 재주문은 이전 예약 데이터를 자동으로 채워 넣는 구조를 설계합니다
당일 여성의류 렌탈 예약 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

여러 착용자와 사이즈를 등록하는 예약 폼에서 배송지·회수지를 분리 입력해도 데이터 정합성이 깨지지 않는 검증 로직 설계가 필요합니다

동시에 여러 고객이 같은 날짜의 재고를 예약할 때 결제 중 임시확보와 타임아웃 반환의 경합 조건을 안전하게 처리해야 합니다

카드·계좌이체·현장결제·쿠폰 회차권 4수단마다 다른 확정 시점과 취소환불 규칙을 하나의 결제 상태 머신으로 통합 설계해야 합니다

1인 1벌 렌탈 정책을 예약 작성 단계에서부터 강제하면서도 다중 착용자 등록 흐름을 자연스럽게 유지하는 구조 설계가 필요합니다

구현 내용

핵심 기능 상세

핵심 기능 1

상품 탐색 & 가용성 확인

카테고리·스타일별 상품을 탐색하고, 상세 페이지에서 사이즈와 렌탈 기간을 선택하면 날짜별 예약 가능 여부를 즉시 확인할 수 있습니다.

  • PostgreSQL Exclusion Constraint 기반 예약 기간 겹침 판정 쿼리 설계
  • React Query로 상품·가용성 데이터를 캐싱하고 staleTime을 분리해 재요청을 최소화
  • 필터 chips와 검색 세그먼트 조합을 URL 쿼리 파라미터와 동기화

날짜 기반 재고 가용성을 서버 사이드에서 실시간 판정하고, 필터·검색 상태를 URL과 동기화하는 구조를 구현합니다.

상품 탐색 & 가용성 확인
상품 탐색 & 가용성 확인 실제 화면
핵심 기능 2

예약 작성

여러 착용자를 등록하고 배송 슬롯·배송지·회수지를 분리 입력하며, 1인 1벌 렌탈 정책을 자동으로 검증합니다.

  • React Hook Form과 Zod 스키마로 다중 착용자 동적 폼 검증 구현
  • 주소 검색 API 연동으로 배송지·회수지 별도 입력 처리
  • 1인 1벌 정책을 서버 사이드 검증 미들웨어로 이중 방어

다중 착용자·배송 슬롯 입력을 단계별 폼으로 구성하고, 정책 검증을 클라이언트·서버 양쪽에 적용하는 구조를 구현합니다.

예약 작성
예약 작성 실제 화면
핵심 기능 3

결제

카드·계좌이체·현장결제·쿠폰 회차권 4가지 수단 중 선택해 결제하며, 결제 진행 중에는 재고가 임시로 확보됩니다.

  • 포트원(PG) SDK 연동으로 카드·계좌이체 결제 처리
  • 결제 수단별 확정 로직을 Strategy 패턴으로 분리 설계
  • PostgreSQL SELECT FOR UPDATE 기반 트랜잭션으로 결제 중 재고 임시 확보·자동 해제 구현

결제 진행 상태와 재고 확보를 하나의 상태 머신으로 관리하여, 결제 실패·타임아웃 시에도 재고 정합성을 보장하는 구조를 설계합니다.

결제
결제 실제 화면
핵심 기능 4

예약 관리

예약 내역과 쿠폰을 조회하고, 수거지를 변경하거나 이전 예약 정보를 그대로 불러와 재주문할 수 있습니다.

  • 이전 예약 데이터를 폼 초기값으로 매핑하는 재주문 프리필 로직 구현
  • 수거지 변경 이력을 append-only 테이블로 기록
  • 배송 가능 지역 재확인 API로 변경 요청 유효성 검증

예약 변경 이력을 append-only 구조로 남겨 추적 가능성을 확보하고, 재주문 시 이전 데이터를 즉시 재사용하는 흐름을 구현합니다.

예약 관리
예약 관리 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

렌탈 도메인 분석 및 예약 스키마 설계 · 2026.09

의류 자산·예약·결제 수단별 데이터 모델 설계, PostgreSQL 테이블 20~24개 정의 및 관계 매핑

STEP 2

가용성 판정 & 예약 API 개발 · 2026.09

날짜별 재고 가용성 판정, 기간 겹침 검사, 결제 중 재고 임시확보 API 구현

STEP 3

결제 다수단 연동 및 프론트엔드 구현 · 2026.09

React 기반 상품 탐색·예약·결제 화면 구현, 포트원 PG 4수단 연동

STEP 4

통합 테스트 및 반응형 최적화 · 2026.09

예약 동시성 시나리오 테스트, PC·모바일 반응형 크로스 브라우저 검증

프로젝트 성과

주요 성과

예약 기간 겹침 판정 엔진 설계PostgreSQL 배타 제약 조건으로 예약 기간 겹침을 방지하는 동시성 제어 구조를 설계합니다.
결제 중 재고 임시확보 트랜잭션 구현결제 진행 중 재고를 임시로 확보하고 타임아웃 시 자동 반환하는 트랜잭션 구조를 구현합니다.
결제 수단별 분기 처리 구조 설계카드·계좌이체·현장결제·쿠폰 회차권 4가지 수단의 확정시점과 환불 규칙을 분리한 전략 패턴을 적용합니다.
Highlights

기술적 주안점

  • 날짜 기반 재고 가용성을 서버 사이드에서 실시간 판정하고, 필터·검색 상태를 URL과 동기화하는 구조를 구현합니다
  • 다중 착용자·배송 슬롯 입력을 단계별 폼으로 구성하고, 정책 검증을 클라이언트·서버 양쪽에 적용하는 구조를 구현합니다
  • 결제 진행 상태와 재고 확보를 하나의 상태 머신으로 관리하여, 결제 실패·타임아웃 시에도 재고 정합성을 보장하는 구조를 설계합니다

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

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

무료 상담 시작하기