← 포트폴리오 목록

욕실용품 멀티 카탈로그 통합 운영 플랫폼

MVP 단품몰을 넘어 다품목 카탈로그와 내부 운영 관리로 확장하는 구현한 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종물류 시스템
기술 스택
React 18TypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaRedisAWS S3
주요 기능
  • 주문 관리 (마스터-디테일)
  • 다품목 카탈로그
  • 매출·재고 분석
  • 정산·배송 연동

프로젝트 개요

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

MVP 단품몰을 넘어 다품목 카탈로그와 내부 운영 관리로 확장하는 구현한 프로젝트입니다. 마스터-디테일 구조의 주문 관리, 매출·재고 분석 대시보드, 배송사 정산 연동까지 통합하여 다품목 판매 확장과 운영 자동화를 함께 지원하는 구조를 설계합니다.

작업 범위

  • 주문 관리 (마스터-디테일): 좌측 주문 리스트와 우측 상세 패널로 구성된 화면에서 고객정보·결제상태·배송현황·품목을 한눈에 확인하고 처리합니다
  • 다품목 카탈로그: 단품 구조에서 다품목으로 확장된 카테고리·옵션·재고 관리 화면을 구현합니다
  • 매출·재고 분석: 일별·카테고리별 매출 추이와 재고 회전을 시각화하는 분석 대시보드를 구현합니다
  • 정산·배송 연동: PG 정산 내역을 확인하고 택배사 API 연동으로 송장을 관리하는 화면을 구현합니다

주요 업무

  • 주문 관리 (마스터-디테일) 화면: 리스트-패널 간 선택 상태를 URL 쿼리와 동기화하고, 다중 주문 상태(결제대기/결제완료/배송중/완료/취소)를 배지 색상으로 구분하는 구조로 설계합니다
  • 다품목 카탈로그 화면: 카테고리-상품-옵션(SKU) 3단 계층 스키마와 CSV 일괄 업로드를 지원해 다품목 전환 시 수작업 등록 부담을 줄이는 구조로 설계합니다
  • 매출·재고 분석 화면: Materialized View 기반 집계 테이블을 설계하고 Recharts로 추이·비중 차트를 구성합니다
  • 정산·배송 연동 화면: 정산 배치 잡이 PG 정산 데이터와 주문 데이터를 매칭하고, 택배사 API 실패 건은 재처리 큐로 자동 이관하는 구조로 설계합니다
욕실용품 멀티 카탈로그 통합 운영 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

다품목 확장 시 카테고리별로 다른 옵션 조합(색상·사이즈·재질)을 하나의 스키마로 수용하는 구조 설계

택배사 API 응답 지연 시 정산 배치가 지연되지 않

비동기 큐와 재시도 정책 설계 필요

대량 주문 데이터 집계 시 조회 성능 저하를 방지하는 Materialized View 갱신 주기 설계

마스터-디테일 화면에서 리스트 스크롤 위치와 상세 패널 상태를 함께 유지하는 상태 관리 구조 설계

구현 내용

핵심 기능 상세

핵심 기능 1

주문 관리 (마스터-디테일)

좌측 주문 리스트와 우측 상세 패널로 구성된 화면에서 고객정보·결제상태·배송현황·품목을 한눈에 확인하고 처리합니다.

  • 리스트 선택 상태를 URL 쿼리 파라미터와 동기화해 새로고침·공유 시에도 선택 항목이 유지되는 구조를 설계합니다
  • 주문 상태값을 Enum 기반으로 관리하고 상태 전이 규칙을 서버 단에서 검증하는 State Machine 패턴을 적용합니다
  • 리스트 가상 스크롤을 적용해 대량 주문 목록에서도 스크롤 성능을 유지하는 구조를 설계합니다

좌측 리스트와 우측 상세 패널의 상태를 URL과 동기화하는 마스터-디테일 구조를 구현하여, 다수 주문을 빠르게 탐색하며 처리할 수 있는 운영 화면을 설계합니다.

주문 관리 (마스터-디테일)
주문 관리 (마스터-디테일) 실제 화면
핵심 기능 2

다품목 카탈로그

단품 구조에서 다품목으로 확장된 카테고리·옵션·재고 관리 화면을 구현합니다. 카테고리-상품-옵션(SKU) 3단 계층 스키마와 CSV 일괄 업로드를 지원해 다품목 전환 시 수작업 등록 부담을 줄이는 구조로 설계합니다.

  • 카테고리·상품·옵션(SKU) 3단 계층 스키마를 설계하고 옵션 조합별 재고를 독립 관리하는 구조를 구현합니다
  • CSV 일괄 업로드 파서를 구현해 다수 상품을 한 번에 등록·수정하는 기능을 설계합니다
  • 재고 임계치 도달 시 알림을 발생시키는 트리거 로직을 설계합니다

카테고리-상품-옵션 3단 계층 스키마와 CSV 일괄 업로드를 결합한 다품목 카탈로그 구조를 구현하여, 상품 1종에서 다품목으로의 전환 비용을 최소화하도록 설계합니다.

다품목 카탈로그
다품목 카탈로그 실제 화면
핵심 기능 3

매출·재고 분석

일별·카테고리별 매출 추이와 재고 회전을 시각화하는 분석 대시보드를 구현합니다. Materialized View 기반 집계 테이블을 설계하고 Recharts로 추이·비중 차트를 구성합니다.

  • PostgreSQL Materialized View로 일별·카테고리별 매출 집계 테이블을 설계하고 주기적 갱신 로직을 구현합니다
  • Recharts 기반 라인·바 차트 컴포넌트를 재사용 가능하게 설계해 매출 추이와 재고 회전을 동시에 표현합니다
  • 차트 컴포넌트에 기간 필터(일/주/월)를 적용해 동적 데이터 재조회 구조를 설계합니다

Materialized View 기반 집계와 Recharts 시각화를 결합한 분석 대시보드를 구현하여, 다품목 확장 이후에도 조회 성능 저하 없이 매출·재고 현황을 파악할 수 있는 구조를 설계합니다.

매출·재고 분석
매출·재고 분석 실제 화면
핵심 기능 4

정산·배송 연동

PG 정산 내역을 확인하고 택배사 API 연동으로 송장을 관리하는 화면을 구현합니다.

  • 정산 배치 잡을 구현해 PG 정산 내역과 주문 데이터를 자동 매칭하고 불일치 건을 별도 목록으로 분류합니다
  • 택배사 송장 API 연동 모듈을 설계하고 Bull Queue 기반 재시도 정책으로 실패 건을 자동 재처리합니다
  • 정산·배송 상태를 통합 타임라인 컴포넌트로 시각화하는 구조를 설계합니다

PG 정산 데이터 자동 매칭과 택배사 API 재시도 큐를 결합한 정산·배송 통합 관리 구조를 구현하여, 정산 불일치와 배송 실패를 운영자가 빠르게 확인할 수 있도록 설계합니다.

정산·배송 연동
정산·배송 연동 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

다품목 카탈로그 스키마 확장 설계 · 2026.09

카테고리-상품-옵션 3단 계층 스키마 설계, 기존 단품 데이터의 다품목 구조 이관 계획 수립

STEP 2

주문·정산 API 및 마스터-디테일 백엔드 구현 · 2026.09

Express 기반 주문 상태 State Machine, 정산 배치 잡, 택배사 API 연동 모듈 구현

STEP 3

매출·재고 분석 대시보드 프론트엔드 개발 · 2026.09

Materialized View 연동 Recharts 시각화 컴포넌트, 마스터-디테일 UI 구현

STEP 4

운영 자동화 통합 및 재시도 큐 안정화 · 2026.09

Bull Queue 기반 재시도 정책 적용, 정산 불일치 알림 로직 통합 테스트

개발 결과

마스터-디테일 주문 관리 UX 설계좌측 리스트+우측 상세 패널 구조로 다중 주문 상태를 배지 색상으로 구분, 선택 상태 URL 동기화 로직 구현
매출·재고 분석 집계 파이프라인 설계PostgreSQL Materialized View 기반 일별·카테고리별 집계 구현, Recharts 시각화 컴포넌트 설계
다품목 카탈로그 옵션 관리 구조 구축카테고리·옵션·SKU 3단 계층 스키마 설계, 대량 상품 등록용 CSV 일괄 업로드 파서 구현
배송사 API 연동 정산 모듈 설계택배사 송장 API 연동, PG 정산 내역 매칭 배치 잡 구현, 재시도 큐로 실패 건 자동 재처리

기술적 주안점

  • 좌측 리스트와 우측 상세 패널의 상태를 URL과 동기화하는 마스터-디테일 구조를 구현하여, 다수 주문을 빠르게 탐색하며 처리할 수 있는 운영 화면을 설계합니다
  • 카테고리-상품-옵션 3단 계층 스키마와 CSV 일괄 업로드를 결합한 다품목 카탈로그 구조를 구현하여, 상품 1종에서 다품목으로의 전환 비용을 최소화하도록 설계합니다
  • Materialized View 기반 집계와 Recharts 시각화를 결합한 분석 대시보드를 구현하여, 다품목 확장 이후에도 조회 성능 저하 없이 매출·재고 현황을 파악할 수 있는 구조를 설계합니다

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

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의