← 포트폴리오 목록

소모품 발주·거래처 통합관제 시스템

기계 제조·물류 현장의 거래처·품목·주문·발송·재고를 하나의 화면에서 관제하는 운영 대시보드를 React + Node.js 기반으로 설계·구현합니다.

단가 이력 기반 문서 정합성 구조 구현품목-단가를 effective_date 이력 테이블로 설계해 단가 변경 후에도 과거 견적서 금액이 보존되는 구조 구축
출고-재고 원자적 트랜잭션 설계PostgreSQL 트랜잭션으로 출고 처리와 재고 차감을 원자적으로 묶어 동시 출고 시 재고 음수화 방지 로직 구현
관제형 3단 레이아웃 컴포넌트 설계상태바·타임라인·우선순위 레일 3개 위젯을 독립 캐싱하는 Custom Hook으로 추상화해 재사용 구조 구축
서비스 타입Web
업종모니터링
기술 스택
React 18TypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaRechartsPDFKit
주요 기능
  • 통합 운영 관제 대시보드
  • 거래처·품목 단가 관리
  • 주문 접수 및 발송·출고 관리
  • 견적서·거래명세서 발행 및 자동 발송
Overview

프로젝트 개요

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

기계 제조·물류 현장의 거래처·품목·주문·발송·재고를 하나의 화면에서 관제하는 운영 대시보드를 React + Node.js 기반으로 설계·구현합니다. 견적서·거래명세서 PDF 자동 발행과 이메일·문자 발송 큐를 통합해 소모품 발주 업무 전체 흐름을 하나의 프로그램에서 처리합니다.

작업 범위

  • 통합 운영 관제 대시보드: 오늘의 주문·출고·재고부족 현황을 상단 상태바로 즉시 확인하고, 진행 중인 주문 타임라인과 우선 대응이 필요한 항목 큐를 한 화면에서 살펴볼 수 있는 관제 홈입니다
  • 거래처·품목 단가 관리: 거래처 정보를 등록·검색하고, 소모품 품목별 단가를 버전 관리하여 거래처마다 다른 단가 정책을 적용할 수 있습니다
  • 주문 접수 및 발송·출고 관리: 전화·문자로 접수한 주문을 폼에 기록하고, 접수부터 출고 완료까지 상태를 추적하며 실시간 재고 수량과 연동해 재고 부족 주문을 자동 식별합니다
  • 견적서·거래명세서 발행 및 자동 발송: 주문·품목 데이터를 기반으로 견적서와 거래명세서를 PDF 템플릿으로 즉시 생성하고, 거래처 이메일 또는 문자로 자동 발송하며 발송 이력을 관리합니다

주요 업무

  • 통합 운영 관제 대시보드 화면: 상태바(status-strip)는 실시간 집계 쿼리로 인라인 지표를 렌더링하고, 중앙 타임라인은 주문 단계(접수→처리→발송→완료)를 시각화하며, 우측 우선순위 레일은 재고 부족·발송 임박 항목을 마감순으로 정렬합니다
  • 거래처·품목 단가 관리 화면: 거래처 CRUD는 사업자번호·담당자·연락처 필드 검증을 포함하고, 품목-단가는 시작일 기준 이력 테이블로 설계해 과거 견적서 재발행 시에도 당시 단가를 그대로 참조합니다
  • 주문 접수 및 발송·출고 관리 화면: 주문 상태는 접수·확인·출고준비·발송완료 4단계로 관리하고, 출고 처리 시 재고 테이블 트랜잭션을 원자적으로 갱신하여 동시 주문 처리 시 재고 불일치를 방지합니다
  • 견적서·거래명세서 발행 및 자동 발송 화면: PDF 생성은 회사 로고·거래처 정보·품목 테이블을 템플릿 레이아웃에 바인딩하는 방식으로 구현하고, 발송은 이메일 API와 문자 API를 큐로 감싸 실패 시 재시도합니다
소모품 발주·거래처 통합관제 시스템
요구사항 정의

프로젝트 핵심 과제

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

동일 품목에 대한 동시 출고 요청 시 재고 수량 정합성을 보장하는 트랜잭션 격리 수준 설계

품목별 단가 변경 이력을 관리하면서도 과거 견적서·거래명세서의 금액을 그대로 보존하는 데이터 모델 설계

이메일·문자 두 발송 채널의 실패 유형을 구분해 채널별 재시도 정책을 다르게 적용하는 발송 큐 아키텍처 설계

전화·문자로 구두 접수되는 비정형 주문 정보를 정형 폼 데이터로 빠르게 변환할 수 있는 입력 UX 설계

구현 내용

핵심 기능 상세

핵심 기능 1

통합 운영 관제 대시보드

오늘의 주문·출고·재고부족 현황을 상단 상태바로 즉시 확인하고, 진행 중인 주문 타임라인과 우선 대응이 필요한 항목 큐를 한 화면에서 살펴볼 수 있는 관제 홈입니다.

  • React Query로 상태바·타임라인·우선큐 3개 위젯의 서버 상태를 독립 캐싱, staleTime 30초로 실시간감 유지
  • PostgreSQL 집계 쿼리를 Materialized View로 미리 계산하여 상태바 인라인 지표 조회 구조 설계
  • 우선순위 레일은 재고 임계치·발송 마감일 기준 정렬 알고리즘을 서버 사이드 정렬 API로 구현

카드 행 나열 대신 상태바·타임라인·우선순위 레일 3단 레이아웃으로 재구성해 운영자가 스크롤 없이 오늘 처리할 항목을 즉시 파악할 수 있는 관제 UX를 구현합니다.

통합 운영 관제 대시보드
통합 운영 관제 대시보드 실제 화면
핵심 기능 2

거래처·품목 단가 관리

거래처 정보를 등록·검색하고, 소모품 품목별 단가를 버전 관리하여 거래처마다 다른 단가 정책을 적용할 수 있습니다.

  • Prisma 스키마에 품목-단가 이력 테이블을 별도 설계해 시점별 단가 조회를 지원
  • 거래처 검색은 Debounced input + 서버 사이드 페이지네이션으로 대량 거래처 목록 처리
  • 품목 카탈로그는 카테고리 트리 구조로 설계해 소모품 분류 체계를 반영

단가를 고정값이 아닌 이력(effective_date) 구조로 설계하여 거래처별 협상 단가 변경 시에도 과거 문서의 단가 정합성을 보장하는 구조를 구현합니다.

거래처·품목 단가 관리
거래처·품목 단가 관리 실제 화면
핵심 기능 3

주문 접수 및 발송·출고 관리

전화·문자로 접수한 주문을 폼에 기록하고, 접수부터 출고 완료까지 상태를 추적하며 실시간 재고 수량과 연동해 재고 부족 주문을 자동 식별합니다.

  • 주문 접수 폼은 React Hook Form + Zod 스키마 검증으로 필수값·품목 조합 유효성 확보
  • 출고 처리는 PostgreSQL 트랜잭션으로 재고 차감과 주문 상태 변경을 원자적으로 묶어 처리
  • 재고 부족 임계치 이하 품목은 백그라운드 배치로 감지해 우선순위 레일에 자동 노출

출고 처리와 재고 차감을 하나의 DB 트랜잭션으로 묶어, 여러 주문이 동시에 같은 품목을 출고 처리해도 재고 수량이 음수로 떨어지지 않는 동시성 제어 구조를 구현합니다.

주문 접수 및 발송·출고 관리
주문 접수 및 발송·출고 관리 실제 화면
핵심 기능 4

견적서·거래명세서 발행 및 자동 발송

주문·품목 데이터를 기반으로 견적서와 거래명세서를 PDF 템플릿으로 즉시 생성하고, 거래처 이메일 또는 문자로 자동 발송하며 발송 이력을 관리합니다.

  • PDFKit 기반 견적서/거래명세서 템플릿 엔진 구현, 품목 테이블 행 수에 따라 자동 페이지 분할
  • Nodemailer로 이메일 발송, 문자 발송은 별도 API 모듈로 추상화해 발송 채널 확장 가능하게 설계
  • 문서 발송 이력 테이블에 발송 상태(성공/실패/대기)를 기록해 재발송 UI에서 참조

견적서·거래명세서 생성부터 이메일·문자 발송까지를 하나의 발행 플로우로 묶고, 발송 실패 건은 자동 재시도 큐에 적재하는 문서 발행 자동화 구조를 구현합니다.

견적서·거래명세서 발행 및 자동 발송
견적서·거래명세서 발행 및 자동 발송 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

업무 흐름 분석 및 ERD 설계 · 2026.09

거래처·품목·주문·재고·문서 업무 프로세스 분석, PostgreSQL 테이블 12개 정의 및 단가 이력 관계 매핑

STEP 2

주문·재고 트랜잭션 API 개발 · 2026.09

Express 기반 주문 CRUD·출고 트랜잭션·재고 차감 API 구현, Prisma 트랜잭션으로 동시성 제어

STEP 3

관제 대시보드 및 문서 발행 UI 개발 · 2026.09

React 상태바·타임라인·우선순위 레일 구현, PDFKit 견적서·거래명세서 템플릿 연동

STEP 4

발송 자동화 및 통합 테스트 · 2026.09

이메일·문자 발송 큐 연동, 발송 실패 재시도 로직 검증, 주요 플로우 통합 테스트

프로젝트 성과

주요 성과

단가 이력 기반 문서 정합성 구조 구현품목-단가를 effective_date 이력 테이블로 설계해 단가 변경 후에도 과거 견적서 금액이 보존되는 구조 구축
출고-재고 원자적 트랜잭션 설계PostgreSQL 트랜잭션으로 출고 처리와 재고 차감을 원자적으로 묶어 동시 출고 시 재고 음수화 방지 로직 구현
관제형 3단 레이아웃 컴포넌트 설계상태바·타임라인·우선순위 레일 3개 위젯을 독립 캐싱하는 Custom Hook으로 추상화해 재사용 구조 구축
문서 발행 자동화 파이프라인 구현PDF 생성-이메일/문자 발송-이력 기록을 하나의 큐 플로우로 묶고 실패 건 자동 재시도 로직 설계
Highlights

기술적 주안점

  • 카드 행 나열 대신 상태바·타임라인·우선순위 레일 3단 레이아웃으로 재구성해 운영자가 스크롤 없이 오늘 처리할 항목을 즉시 파악할 수 있는 관제 UX를 구현합니다
  • 단가를 고정값이 아닌 이력(effective_date) 구조로 설계하여 거래처별 협상 단가 변경 시에도 과거 문서의 단가 정합성을 보장하는 구조를 구현합니다
  • 출고 처리와 재고 차감을 하나의 DB 트랜잭션으로 묶어, 여러 주문이 동시에 같은 품목을 출고 처리해도 재고 수량이 음수로 떨어지지 않는 동시성 제어 구조를 구현합니다

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

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

무료 상담 시작하기