← 포트폴리오 목록

안과 거래처 주문 통합 운영 플랫폼

렌즈·용액 주문의 접수부터 출고까지 전체 흐름을 칸반 보드로 시각화하고, 재고 연동·정산 집계·알림 발송까지 확장 가능한 구조로 설계하는 운영 플랫폼 프로젝트입니다.

칸반 기반 주문 흐름 시각화 구현드래그앤드롭으로 상태를 전환하는 칸반 보드와 지연 위험 매트릭스를 함께 구현합니다.
재고 임계치 연동 구조 설계제품 마스터에 재고 필드를 확장하고 임계치 이하 품목을 자동 강조하는 구조를 설계합니다.
거래처별 정산 집계 로직 구현출고완료 건을 기준으로 거래처별·기간별 정산 금액을 자동 집계하는 쿼리 구조를 구현합니다.
서비스 타입Web
업종헬스케어
기술 스택
ReactTypeScriptNext.js API RoutesTailwind CSSSupabase (PostgreSQL + Auth + RLS)Rechartsdnd-kitSupabase Realtime
주요 기능
  • 주문 처리 흐름 칸반 보드
  • 제품·재고 연동 구조
  • 정산 집계 구조
  • 알림 큐·처리 현황 분석
Overview

프로젝트 개요

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

렌즈·용액 주문의 접수부터 출고까지 전체 흐름을 칸반 보드로 시각화하고, 재고 연동·정산 집계·알림 발송까지 확장 가능한 구조로 설계하는 운영 플랫폼 프로젝트입니다. MVP 단계의 주문 관리를 넘어 거래처 수 증가에 대비한 운영 인프라를 함께 제안합니다.

작업 범위

  • 주문 처리 흐름 칸반 보드: 접수→확인→출고준비→출고완료 단계별로 렌즈·용액 주문을 칸반 컬럼에서 한눈에 파악하고 드래그로 상태를 전환할 수 있는 화면입니다
  • 제품·재고 연동 구조: 렌즈·용액 SKU별 재고 수량을 조회하고 임계치 이하로 내려간 품목을 알림 표시로 확인할 수 있는 화면입니다
  • 정산 집계 구조: 거래처별 공급단가 필드를 기준으로 기간별 주문 금액을 집계해 정산 내역을 미리 확인할 수 있는 화면입니다
  • 알림 큐·처리 현황 분석: 출고 완료·거래중지 등 주요 이벤트를 알림 큐로 관리하고, 주문 처리 현황을 기간별 차트로 분석하는 화면입니다

주요 업무

  • 주문 처리 흐름 칸반 보드 화면: 컬럼별 카운트 배지와 지연 위험 매트릭스를 함께 배치해 정체된 주문을 관리자가 빠르게 식별하도록 설계합니다
  • 제품·재고 연동 구조 화면: 제품 관리 테이블에 재고 필드를 확장 연동하는 구조를 설계해 향후 입출고 기반 자동 재고 차감으로 이어질 수 있도록 준비합니다
  • 정산 집계 구조 화면: 출고 완료 건을 기준으로 거래처별·기간별 집계 테이블을 구성해 추후 세금계산서 연동 확장에 대비하는 구조를 설계합니다
  • 알림 큐·처리 현황 분석 화면: 알림 발송 이력을 큐 형태로 관리하는 구조를 설계하고, 렌즈/용액 주문 비율과 처리 소요일을 시각화하는 분석 대시보드를 구현합니다
안과 거래처 주문 통합 운영 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

드래그 앤 드롭으로 상태를 전환할 때 동시에 여러 관리자가 같은 주문을 조작하는 경우의 충돌 방지 로직 설계가 필요합니다

재고 임계치 알림을 출고 처리와 실시간으로 연동하려면 재고 차감 트랜잭션의 정합성을 보장하는 설계가 필요합니다

거래처별 정산 집계가 공급단가 변경 이력과 어긋나지 않

시점 기준 스냅샷 처리 방식 설계가 필요합니다

알림 큐가 커질 경우 발송 실패 건을 재처리하는 재시도 로직과 큐 적체 모니터링 설계가 필요합니다

구현 내용

핵심 기능 상세

핵심 기능 1

주문 처리 흐름 칸반 보드

접수→확인→출고준비→출고완료 단계별로 렌즈·용액 주문을 칸반 컬럼에서 한눈에 파악하고 드래그로 상태를 전환할 수 있는 화면입니다.

  • 드래그 앤 드롭으로 주문 카드를 상태 컬럼 간 이동시키는 칸반 인터랙션 구현
  • 컬럼별 주문 수 카운트 배지와 우선순위·지연 위험 매트릭스 패널 설계
  • 칸반 카드에 거래처명·제품유형·경과일을 메타 정보로 표시하는 컴포넌트 구현

주문 접수부터 출고완료까지의 흐름을 칸반 보드로 시각화해 정체 구간을 한눈에 식별할 수 있는 구조를 구현합니다.

주문 처리 흐름 칸반 보드
주문 처리 흐름 칸반 보드 실제 화면
핵심 기능 2

제품·재고 연동 구조

렌즈·용액 SKU별 재고 수량을 조회하고 임계치 이하로 내려간 품목을 알림 표시로 확인할 수 있는 화면입니다.

  • SKU별 재고 수량과 임계치를 관리하는 재고 테이블 구조 설계
  • 임계치 이하 품목을 목록 상단에 강조 표시하는 정렬·필터 로직 구현
  • 출고 처리와 재고 차감을 연결할 수 있는 확장 인터페이스 구조 설계

제품 마스터에 재고 필드를 확장 연동해 임계치 알림 기반의 재고 관리 구조를 설계합니다.

제품·재고 연동 구조
제품·재고 연동 구조 실제 화면
핵심 기능 3

정산 집계 구조

거래처별 공급단가 필드를 기준으로 기간별 주문 금액을 집계해 정산 내역을 미리 확인할 수 있는 화면입니다.

  • 거래처별 공급단가 필드를 기준으로 기간별 주문 금액을 집계하는 쿼리 구조 설계
  • Recharts 기반 거래처별 정산 금액 비교 차트 구현
  • 정산 내역 테이블에 출고완료 건만 반영되도록 필터링 로직 구현

출고완료 건을 기준으로 거래처별 정산 금액을 자동 집계하는 구조를 구현해 정산 확장에 대비합니다.

정산 집계 구조
정산 집계 구조 실제 화면
핵심 기능 4

알림 큐·처리 현황 분석

출고 완료·거래중지 등 주요 이벤트를 알림 큐로 관리하고, 주문 처리 현황을 기간별 차트로 분석하는 화면입니다.

  • 출고완료·거래중지 등 이벤트 발생 시 알림 큐에 적재하는 구조 설계
  • 알림 발송 상태(대기/발송완료/실패)를 큐 목록에서 추적하는 UI 구현
  • Recharts로 렌즈/용액 주문 비율, 상태별 처리 건수를 시각화하는 분석 차트 구현

이벤트 기반 알림 큐 구조와 처리 현황 분석 차트를 함께 구현해 운영 가시성을 높이는 대시보드를 설계합니다.

알림 큐·처리 현황 분석
알림 큐·처리 현황 분석 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

칸반 보드 데이터 구조 및 상태 전이 설계 · 2026.09

주문 상태 컬럼 정의, 드래그 전환 시 상태값 갱신 로직 및 Supabase 스키마 확장 설계

STEP 2

칸반 보드·매트릭스 UI 구현 · 2026.09

드래그앤드롭 칸반 컴포넌트, 지연 위험 매트릭스 패널 구현

STEP 3

재고·정산 집계 화면 구현 · 2026.09

재고 임계치 알림, 거래처별 정산 집계 테이블·차트 구현

STEP 4

알림 큐·분석 대시보드 구현 및 QA · 2026.09

이벤트 기반 알림 큐, 처리 현황 분석 차트 구현 및 전 구간 QA 검증

프로젝트 성과

주요 성과

칸반 기반 주문 흐름 시각화 구현드래그앤드롭으로 상태를 전환하는 칸반 보드와 지연 위험 매트릭스를 함께 구현합니다.
재고 임계치 연동 구조 설계제품 마스터에 재고 필드를 확장하고 임계치 이하 품목을 자동 강조하는 구조를 설계합니다.
거래처별 정산 집계 로직 구현출고완료 건을 기준으로 거래처별·기간별 정산 금액을 자동 집계하는 쿼리 구조를 구현합니다.
이벤트 기반 알림 큐 설계주요 이벤트 발생 시 알림 큐에 적재하고 발송 상태를 추적하는 구조를 설계합니다.
Highlights

기술적 주안점

  • 주문 접수부터 출고완료까지의 흐름을 칸반 보드로 시각화해 정체 구간을 한눈에 식별할 수 있는 구조를 구현합니다
  • 제품 마스터에 재고 필드를 확장 연동해 임계치 알림 기반의 재고 관리 구조를 설계합니다
  • 출고완료 건을 기준으로 거래처별 정산 금액을 자동 집계하는 구조를 구현해 정산 확장에 대비합니다

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

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

무료 상담 시작하기