← 포트폴리오 목록

힐링스팟 파트너 통합 관리 플랫폼

1차 MVP 이후 확장을 대비해 샵 등록·수정·숨김·지역 노출 설정을 관리하는 관리자 콘솔과, 등록 현황·지역별 분포·노출 통계를 파악하는 운영 대시보드를 통합한 플랫폼을 React + Node.js 기반으로 설계·구현합니다.

지역별 노출 집계 파이프라인 설계PostgreSQL Materialized View 3개로 지역별 등록·노출 통계 집계, 증분 갱신 구조 설계
마스터-디테일 CRUD 패널 구현좌측 리스트-우측 인라인 편집 패널 구조로 샵 등록·수정·숨김을 한 화면에서 처리하는 구조 구현
지역 노출 토글 Optimistic UI 구현동 단위 노출 ON/OFF를 Optimistic UI로 즉시 반영, 실패 시 자동 롤백 처리 로직 설계
서비스 타입Web
업종데이터 분석
기술 스택
React 18TypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaRedisAWS S3
주요 기능
  • 운영 현황 대시보드
  • 샵 관리
  • 지역 노출 설정
  • 제휴 샵 관리
Overview

프로젝트 개요

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

1차 MVP 이후 확장을 대비해 샵 등록·수정·숨김·지역 노출 설정을 관리하는 관리자 콘솔과, 등록 현황·지역별 분포·노출 통계를 파악하는 운영 대시보드를 통합한 플랫폼을 React + Node.js 기반으로 설계·구현합니다. 제휴 여부 등 확장 필드에 대한 UI도 함께 마련하되, 예약·결제 기능 자체는 1차 견적 범위에서 제외합니다.

작업 범위

  • 운영 현황 대시보드: 등록된 샵 수, 지역별 분포, 노출 통계를 한 화면에서 파악할 수 있는 운영 대시보드를 구현합니다
  • 샵 관리: 샵 등록, 정보 수정, 노출 숨김, 사진 등록을 하나의 관리자 화면에서 처리할 수 있는 CRUD 관리 기능을 구현합니다
  • 지역 노출 설정: 동 단위로 서비스 노출 지역을 켜고 끌 수 있는 지역 설정 기능을 구현합니다
  • 제휴 샵 관리: 제휴 여부 등 확장 필드를 관리할 수 있는 제휴 샵 관리 화면을 구현합니다(예약·결제 기능은 1차 범위에서 제외)

주요 업무

  • 운영 현황 대시보드 화면: PostgreSQL Materialized View로 집계한 데이터를 Recharts 차트로 시각화하고 Redis 캐싱으로 조회 성능을 최적화하는 구조를 설계합니다
  • 샵 관리 화면: 좌측 리스트-우측 인라인 편집 패널 구조와 AWS S3 presigned URL 업로드 방식을 설계합니다
  • 지역 노출 설정 화면: 지역 코드를 시/구/동 계층으로 정규화하고, Optimistic UI 토글과 변경 이력 기록 구조를 설계합니다
  • 제휴 샵 관리 화면: 제휴 신청 상태를 대기/승인/반려로 관리하는 상태 머신과 제휴 등급 컬럼을 스키마에 설계합니다
힐링스팟 파트너 통합 관리 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

샵 등록·수정 시 사진 업로드와 지역 설정이 동시에 이루어질 때 트랜잭션 일관성 유지

제휴 여부·노출 우선순위 등 확장 필드가 늘어날 때 기존 리스트 정렬 로직과의 충돌 방지 설계

지역별 노출 통계 집계 시 실시간성과 조회 성능 사이의 균형을 맞추는 캐싱 정책 설계

관리자 권한별(등록/승인) 접근 제어와 변경 이력 기록을 함께 설계해야 하는 복잡도 존재

구현 내용

핵심 기능 상세

핵심 기능 1

운영 현황 대시보드

등록된 샵 수, 지역별 분포, 노출 통계를 한 화면에서 파악할 수 있는 운영 대시보드를 구현합니다.

  • PostgreSQL Materialized View로 지역별 등록 샵 수·노출 순위를 집계해 대시보드 조회 성능 최적화
  • Recharts로 지역별 분포 도넛 차트와 기간별 노출 추이 라인 차트를 구현
  • Redis에 집계 결과를 캐싱하고 TTL 5분으로 대시보드 조회 부하를 완화하는 구조 설계

등록 샵 현황과 지역별 노출 통계를 한눈에 파악할 수 있는 운영 대시보드를 설계합니다.

운영 현황 대시보드
운영 현황 대시보드 실제 화면
핵심 기능 2

샵 관리

샵 등록, 정보 수정, 노출 숨김, 사진 등록을 하나의 관리자 화면에서 처리할 수 있는 CRUD 관리 기능을 구현합니다.

  • 마스터-디테일 레이아웃으로 좌측 샵 리스트, 우측 인라인 편집 폼을 구성해 컨텍스트 전환 최소화
  • AWS S3 presigned URL 방식으로 샵 사진을 직접 업로드하고 리사이징 파이프라인을 설계
  • 숨김 처리는 소프트 삭제(is_hidden 플래그)로 설계해 복구 가능한 구조로 구현

샵 등록부터 수정·숨김까지 전체 라이프사이클을 하나의 인라인 패널에서 처리하는 CRUD 구조를 구현합니다.

샵 관리
샵 관리 실제 화면
핵심 기능 3

지역 노출 설정

동 단위로 서비스 노출 지역을 켜고 끌 수 있는 지역 설정 기능을 구현합니다. 지역 코드를 시/구/동 계층으로 정규화하고, Optimistic UI 토글과 변경 이력 기록 구조를 설계합니다.

  • 동 단위 노출 ON/OFF 토글을 Optimistic UI로 즉시 반영하고 실패 시 자동 롤백하는 패턴 적용
  • 지역별 노출 이력을 별도 테이블에 기록해 변경 추적이 가능한 구조로 설계
  • 지역 코드 테이블을 계층형(시/구/동)으로 정규화해 향후 지역 확장에 대응하는 스키마 설계

지역 단위로 노출 여부를 세밀하게 제어할 수 있는 토글 기반 노출 관리 구조를 구현합니다.

지역 노출 설정
지역 노출 설정 실제 화면
핵심 기능 4

제휴 샵 관리

제휴 여부 등 확장 필드를 관리할 수 있는 제휴 샵 관리 화면을 구현합니다(예약·결제 기능은 1차 범위에서 제외). 제휴 신청 상태를 대기/승인/반려로 관리하는 상태 머신과 제휴 등급 컬럼을 스키마에 설계합니다.

  • 제휴 여부(is_partner) 필드와 제휴 등급 컬럼을 스키마에 추가해 향후 정렬 가중치 확장에 대응하는 구조 설계
  • 제휴 샵 뱃지 컴포넌트를 재사용 가능한 형태로 분리 설계해 지도·리스트·상세 화면에서 공통 사용
  • 제휴 신청 상태(대기/승인/반려)를 관리하는 상태 머신 구조를 설계해 향후 승인 워크플로우 확장에 대응

예약·결제 기능 없이도 제휴 관계를 관리할 수 있는 확장 가능한 데이터 구조와 UI를 설계합니다.

제휴 샵 관리
제휴 샵 관리 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

운영 데이터 모델 확장 및 집계 설계 · 2026.09

제휴·노출 이력 테이블 추가, Materialized View로 지역별 집계 쿼리 설계

STEP 2

관리자 백엔드 API 개발 · 2026.09

샵 CRUD·이미지 업로드·지역 토글 API 20~24개 엔드포인트 구현, AWS S3 연동

STEP 3

운영 대시보드 및 관리자 UI 개발 · 2026.09

React 기반 마스터-디테일 관리 화면 구현, Recharts로 지역별 분포·노출 추이 시각화

STEP 4

캐싱 최적화 및 통합 테스트 · 2026.09

Redis 캐싱 계층 적용, 대시보드 조회 성능 검증 및 관리자 권한 시나리오 테스트

프로젝트 성과

주요 성과

지역별 노출 집계 파이프라인 설계PostgreSQL Materialized View 3개로 지역별 등록·노출 통계 집계, 증분 갱신 구조 설계
마스터-디테일 CRUD 패널 구현좌측 리스트-우측 인라인 편집 패널 구조로 샵 등록·수정·숨김을 한 화면에서 처리하는 구조 구현
지역 노출 토글 Optimistic UI 구현동 단위 노출 ON/OFF를 Optimistic UI로 즉시 반영, 실패 시 자동 롤백 처리 로직 설계
제휴 상태 관리 구조 설계제휴 신청 대기/승인/반려 상태 머신 설계, 향후 승인 워크플로우 확장에 대응하는 스키마 구축
Highlights

기술적 주안점

  • 등록 샵 현황과 지역별 노출 통계를 한눈에 파악할 수 있는 운영 대시보드를 설계합니다
  • 샵 등록부터 수정·숨김까지 전체 라이프사이클을 하나의 인라인 패널에서 처리하는 CRUD 구조를 구현합니다
  • 지역 단위로 노출 여부를 세밀하게 제어할 수 있는 토글 기반 노출 관리 구조를 구현합니다

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

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

무료 상담 시작하기