← 포트폴리오 목록

협력업체 납기 확인 포털

협력업체 담당자가 자사 발주만 조회하고 품목별 납품예정일, 분할 납품 일정, 납기 미정 사유, 특이사항을 직접 입력하는 포털을 제안합니다.

프로젝트 납품 요약

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

서비스 타입Web
업종플랫폼
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaDocker ComposeNginx
주요 기능
  • 오늘 납기 확인 홈
  • 발주 조회와 요청 납기 확인
  • 납품예정일과 분할 납품 입력
  • 사유·특이사항 입력과 이력 조회

프로젝트 개요

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

협력업체 담당자가 자사 발주만 조회하고 품목별 납품예정일, 분할 납품 일정, 납기 미정 사유, 특이사항을 직접 입력하는 포털을 제안합니다. 이메일·엑셀 왕복 없이 구매팀과 같은 데이터를 보는 구조를 React + Node.js + PostgreSQL 기반 맞춤 데모로 구현합니다.

작업 범위

  • 오늘 납기 확인 홈: 로그인한 담당자의 첫 화면에 오늘과 내일 납기가 도래하는 품목, 납품예정일 입력 대기 품목, 최근 변경 알림이 한 장면으로 보입니다
  • 발주 조회와 요청 납기 확인: 발주 번호, 품목, 수량, 요청 납기일을 목록과 상세로 조회하고 상태별로 걸러 봅니다
  • 납품예정일과 분할 납품 입력: 품목별 납품예정일을 입력하고 일부 수량을 먼저 납품하는 분할 일정을 회차별 날짜와 수량으로 등록합니다
  • 사유·특이사항 입력과 이력 조회: 납기 미정 사유와 품목별 특이사항을 입력하고, 완료된 발주와 과거 입력 이력을 업체별로 조회합니다

주요 업무

  • 오늘 납기 확인 홈 화면: 업체 ID 기준 행 단위 격리 쿼리로 자사 발주만 조회하고, 납기 임박 품목을 우선 정렬합니다
  • 발주 조회와 요청 납기 확인 화면: 발주 상세에서 품목 줄별 요청 납기, 납품예정일, 입고 수량을 한 표로 보여 줍니다
  • 납품예정일과 분할 납품 입력 화면: 분할 합계가 발주 수량을 넘으면 제출 단계에서 막고, 변경 시 구매팀 알림 큐에 이벤트를 남깁니다
  • 사유·특이사항 입력과 이력 조회 화면: 사유는 선택 항목과 자유 입력을 함께 받고, 이력은 변경 시각 순으로 전/후 값을 보여 줍니다
협력업체 납기 확인 포털
요구사항 정의

프로젝트 핵심 과제

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

협력업체 20곳이 같은 테이블을 공유하므로 업체별 행 격리를 화면이 아닌 데이터 접근 계층에서 보장하는 설계가 필요하며

공통 미들웨어와 테스트로 대응합니다

분할 납품 회차 수정 중 발주 수량이 구매팀에서 바뀌는 경우의 충돌을 낙관적 잠금 버전 칼럼으로 처리할 계획입니다

외부 접속이 열리는 사내 서버 환경이라 로그인 시도 제한과 세션 만료 정책을 함께 설계할 계획입니다

엑셀로 관리하던 납기 사유 표현이 업체마다 달라 사유 코드와 자유 입력을 병행하는 입력 구조 설계가 필요합니다

구현 내용

핵심 기능 상세

핵심 기능 1

오늘 납기 확인 홈

로그인한 담당자의 첫 화면에 오늘과 내일 납기가 도래하는 품목, 납품예정일 입력 대기 품목, 최근 변경 알림이 한 장면으로 보입니다.

  • Prisma 쿼리에 업체 ID 조건을 공통 미들웨어로 강제하여 타사 발주 조회 차단 구조 설계
  • React Query로 홈 화면 목록 캐싱과 입력 직후 무효화 처리
  • 납기 임박 순 정렬과 입력 대기 필터를 서버 쿼리 파라미터로 통일

업체 격리를 화면이 아닌 데이터 접근 계층에서 강제하는 구조를 구현합니다.

오늘 납기 확인 홈
오늘 납기 확인 홈 실제 화면
핵심 기능 2

발주 조회와 요청 납기 확인

발주 번호, 품목, 수량, 요청 납기일을 목록과 상세로 조회하고 상태별로 걸러 봅니다. 발주 상세에서 품목 줄별 요청 납기, 납품예정일, 입고 수량을 한 표로 보여 줍니다.

  • 서버 측 페이지네이션과 상태·기간 필터를 URL 쿼리와 동기화
  • 발주 헤더와 품목 줄을 분리한 정규화 스키마로 PO 단위 조회 구현
  • 표는 가로 스크롤 컨테이너와 모바일 카드 목록으로 이중 구성

PO 헤더와 품목 줄 구조를 그대로 살려 발주 한 건의 납기 상태를 한 화면에서 판단하게 구성합니다.

발주 조회와 요청 납기 확인
발주 조회와 요청 납기 확인 실제 화면
핵심 기능 3

납품예정일과 분할 납품 입력

품목별 납품예정일을 입력하고 일부 수량을 먼저 납품하는 분할 일정을 회차별 날짜와 수량으로 등록합니다. 분할 합계가 발주 수량을 넘으면 제출 단계에서 막고, 변경 시 구매팀 알림 큐에 이벤트를 남깁니다.

  • 분할 회차 합계와 발주 수량 일치 검증을 서버와 폼에서 동시에 적용
  • 납기 변경 이벤트를 트랜잭션 안에서 이력 테이블과 알림 큐 테이블에 함께 기록
  • 입력 폼은 제출 시점 검사와 칸 단위 오류 문구로 구성

분할 납품 회차와 수량 합계를 한 트랜잭션으로 저장하여 부분 저장 상태를 막는 구조를 설계합니다.

납품예정일과 분할 납품 입력
납품예정일과 분할 납품 입력 실제 화면
핵심 기능 4

사유·특이사항 입력과 이력 조회

납기 미정 사유와 품목별 특이사항을 입력하고, 완료된 발주와 과거 입력 이력을 업체별로 조회합니다. 사유는 선택 항목과 자유 입력을 함께 받고, 이력은 변경 시각 순으로 전/후 값을 보여 줍니다.

  • 사유 코드 테이블과 자유 입력 칸을 함께 저장하여 구매팀 집계에 재사용
  • 이력 화면은 발주·품목·기간 조건으로 서버 필터링
  • 완료 발주는 읽기 전용 상태로 분리하여 수정 경로 차단

입력 사유를 코드와 문장으로 함께 보관하여 구매팀 화면에서 집계와 원문 확인이 모두 가능하게 설계합니다.

사유·특이사항 입력과 이력 조회
사유·특이사항 입력과 이력 조회 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

발주·납기 데이터 모델 설계 · 2026.10

PO 헤더, 품목 줄, 분할 납품 회차, 사유 코드 테이블 ERD 설계와 업체 격리 키 정의

STEP 2

업체 격리 API 구현 · 2026.10

Express 라우트 공통 미들웨어로 업체 ID 조건을 강제하고 발주·납기 입력 API 구현

STEP 3

포털 화면 구현 · 2026.10

오늘 납기 홈, 발주 상세, 분할 납품 입력 폼을 React로 구현하고 오류 문구 정리

STEP 4

사내 서버 설치 구성 · 2026.10

Docker Compose 구성, Nginx 리버스 프록시 HTTPS 설정 가이드와 백업·복구 스크립트 작성

개발 결과

업체 데이터 격리 계층 설계Prisma 확장으로 모든 쿼리에 업체 ID 조건을 강제하고 타사 접근 시도 테스트 케이스를 작성합니다
분할 납품 합계 검증 트랜잭션 구현회차별 수량 합계를 서버 트랜잭션과 폼에서 이중 검증하여 부분 저장을 차단하는 구조를 설계합니다
납기 변경 이벤트 기록 구조 구축납품예정일 수정마다 전/후 값, 입력자, 시각을 이력 테이블과 알림 큐에 한 번에 기록합니다
사내 서버 설치 패키지 구성Docker Compose 3개 서비스와 Nginx 설정, 백업·복구 스크립트를 한 묶음으로 설계합니다

기술적 주안점

  • 업체 격리를 화면이 아닌 데이터 접근 계층에서 강제하는 구조를 구현합니다
  • PO 헤더와 품목 줄 구조를 그대로 살려 발주 한 건의 납기 상태를 한 화면에서 판단하게 구성합니다
  • 분할 납품 회차와 수량 합계를 한 트랜잭션으로 저장하여 부분 저장 상태를 막는 구조를 설계합니다

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

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

프로젝트 문의