← 포트폴리오 목록

식품 시료 분석 의뢰관리 시스템

식품 시료 분석 기관을 위한 온라인 의뢰관리 시스템입니다.

상태 전이 검증 엔진 구현접수→검토중→보완요청→분석중→분석완료 상태를 유한 상태 기계로 모델링, 비정상 전이를 서버 단에서 차단
규격 스냅샷 보존 구조 설계제출 시점 식품규격·시험항목을 별도 스냅샷 테이블에 저장, 이후 마스터 변경과 완전히 분리되는 구조 구축
비회원 OTP 인증 플로우 구현접수번호와 이메일 조합의 일회용 인증번호 발급·검증 로직 구현, 회원가입 없이 안전한 진행조회 지원
서비스 타입Web
업종플랫폼
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaJWTAWS SES
주요 기능
  • 의뢰 접수·상세 관리
  • 온라인 분석의뢰서 작성
  • 비회원 진행상태 조회
  • 성적서 등록·발송 관리
Overview

프로젝트 개요

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

식품 시료 분석 기관을 위한 온라인 의뢰관리 시스템입니다. 고객의 분석의뢰서 작성부터 비회원 진행조회, 관리자의 접수·분석·성적서 발송까지 핵심 워크플로우를 마스터-디테일 구조로 구현하며, React와 Node.js/Express, PostgreSQL 기반 풀스택으로 설계합니다.

작업 범위

  • 의뢰 접수·상세 관리: 관리자가 접수된 의뢰 목록을 좌측 리스트에서 검색·필터링하고, 우측 상세 패널에서 시료 정보·시험항목·첨부파일·상태 이력을 한 화면에서 확인합니다
  • 온라인 분석의뢰서 작성: 고객이 의뢰기관·의뢰자 정보, 시료명·수량, 검사 업무구분, 식품규격·시험항목, 첨부파일(최대 20MB·5개)을 단계별 폼으로 입력하고 제출합니다
  • 비회원 진행상태 조회: 접수번호와 이메일로 본인확인 후, 분석·정산·전달 상태와 이메일 발송일시·우편 등기번호·방문수령 가능일을 조회합니다
  • 성적서 등록·발송 관리: 관리자가 확정 성적서 PDF를 업로드하고 수신정보를 확인한 뒤 발송을 실행하면, 이메일 첨부 발송과 발송 이력이 자동 기록됩니다

주요 업무

  • 의뢰 접수·상세 관리 화면: 마스터-디테일 레이아웃으로 목록 선택 시 상세 패널이 즉시 갱신되며, 상태 변경(접수→검토중→보완요청→분석중→분석완료)을 상세 패널에서 바로 처리하는 구조를 구현합니다
  • 온라인 분석의뢰서 작성 화면: 선택한 식품규격에 따라 관련 시험항목이 자동으로 조회되는 종속 폼을 구현하며, 제출 시점의 규격·시험항목 스냅샷을 별도 저장해 이후 마스터 데이터 변경과 분리합니다
  • 비회원 진행상태 조회 화면: 일회용 인증번호 발급·검증 플로우와 상태별 타임라인 UI를 구현하며, 보완요청 상태에서는 보완자료 제출 화면으로 바로 연결되는 구조를 설계합니다
  • 성적서 등록·발송 관리 화면: 업로드 직후 자동발송 대신 관리자 확인 단계를 거치는 2단계 발송 구조를 구현하며, 발송 실패·반송 건은 사유별로 분류되어 재발송 큐에 표시됩니다
식품 시료 분석 의뢰관리 시스템
요구사항 정의

프로젝트 핵심 과제

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

식품규격·시험항목 마스터 변경 이후에도 기존 접수 건의 스냅샷을 그대로 유지해야 하는 데이터 정합성 설계

비회원 진행조회의 본인확인을 회원가입 없이 안전하게 처리하는 인증 플로우 설계

성적서 발송 실패·반송 건을 사유별로 자동 분류하고 재발송 큐로 연결하는 예외 처리 구조

우편·이메일·방문수령이 혼재된 다채널 수령 방식을 하나의 상태 모델로 통합 관리하는 설계

구현 내용

핵심 기능 상세

핵심 기능 1

의뢰 접수·상세 관리

관리자가 접수된 의뢰 목록을 좌측 리스트에서 검색·필터링하고, 우측 상세 패널에서 시료 정보·시험항목·첨부파일·상태 이력을 한 화면에서 확인합니다.

  • React Query로 의뢰 목록·상세 데이터를 분리 캐싱하여 상세 패널 전환 시 재요청을 최소화하는 구조 구현
  • PostgreSQL 인덱스 설계로 접수번호·기관명·상태·담당자 복합 검색 쿼리를 최적화
  • 상태 변경 시 감사 로그 테이블에 변경 전후값을 함께 기록하는 트리거 구조 설계

리스트-상세 동기화 상태 관리와 상태 전이(state machine) 검증 로직을 함께 구현하여, 정의되지 않은 순서로의 상태 변경을 서버 단에서 차단하는 구조를 설계합니다.

의뢰 접수·상세 관리
의뢰 접수·상세 관리 실제 화면
핵심 기능 2

온라인 분석의뢰서 작성

고객이 의뢰기관·의뢰자 정보, 시료명·수량, 검사 업무구분, 식품규격·시험항목, 첨부파일(최대 20MB·5개)을 단계별 폼으로 입력하고 제출합니다.

  • React Hook Form과 Zod로 단계별 유효성 검증 및 다중 파일 업로드(최대 20MB·5개) 처리 구현
  • 식품규격 선택 시 시험항목 마스터를 자동 조회해 관련 항목만 노출하는 종속 셀렉트 구현
  • 제출 시점의 규격·시험항목 스냅샷을 별도 테이블에 저장해 이후 마스터 변경과 분리하는 구조 설계

식품규격·시험항목 마스터를 참조하는 동적 폼 엔진을 구현하여, 항목 추가·변경 시 폼 코드 수정 없이 마스터 데이터만으로 화면이 갱신되는 구조를 설계합니다.

온라인 분석의뢰서 작성
온라인 분석의뢰서 작성 실제 화면
핵심 기능 3

비회원 진행상태 조회

접수번호와 이메일로 본인확인 후, 분석·정산·전달 상태와 이메일 발송일시·우편 등기번호·방문수령 가능일을 조회합니다.

  • 접수번호와 이메일 조합으로 일회용 인증번호(OTP)를 발급·검증하는 비회원 인증 플로우 구현
  • 상태 이력을 타임라인 컴포넌트로 시각화하여 단계별 타임스탬프와 발송 채널을 표시
  • 보완요청 상태 감지 시 보완자료 제출 화면으로 라우팅하는 조건부 네비게이션 구현

회원가입 없이도 접수번호와 이메일만으로 안전하게 본인확인을 처리하는 OTP 인증 플로우를 구현하여, 비회원 조회의 보안성과 편의성을 함께 확보하는 구조를 설계합니다.

비회원 진행상태 조회
비회원 진행상태 조회 실제 화면
핵심 기능 4

성적서 등록·발송 관리

관리자가 확정 성적서 PDF를 업로드하고 수신정보를 확인한 뒤 발송을 실행하면, 이메일 첨부 발송과 발송 이력이 자동 기록됩니다.

  • PDF 업로드 후 관리자 확인 단계를 거치는 2단계 발송 워크플로우(업로드→확인→발송) 구현
  • 이메일 발송 API 연동과 발송 이력 테이블(일시·주소·성공·거부·반송) 설계
  • 발송 실패·반송 건을 사유별로 자동 분류해 재발송 큐에 노출하는 로직 구현

업로드 즉시 자동발송하지 않고 관리자 확인을 거치는 2단계 발송 구조와, 발송 실패 건을 자동 분류하는 재발송 큐를 함께 구현하여 오발송 리스크를 관리 가능한 구조로 설계합니다.

성적서 등록·발송 관리
성적서 등록·발송 관리 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

업무 프로세스 분석 및 ERD 설계 · 2026.09

의뢰-분석-정산 워크플로우 분석, PostgreSQL 테이블 18개 정의 및 상태 전이 모델 설계

STEP 2

의뢰 접수·마스터 데이터 API 개발 · 2026.09

Express 기반 의뢰 CRUD·식품규격/시험항목 마스터 조회 API 22개 구현

STEP 3

관리자 마스터-디테일 UI 및 비회원 인증 개발 · 2026.09

React 기반 접수관리·상세패널 화면과 비회원 OTP 인증 플로우 8개 구현

STEP 4

이메일 발송 연동 및 통합 테스트 · 2026.09

이메일 발송 API 연동, 발송 이력 관리 기능 구현, API 통합 테스트 30여 케이스 작성

프로젝트 성과

주요 성과

상태 전이 검증 엔진 구현접수→검토중→보완요청→분석중→분석완료 상태를 유한 상태 기계로 모델링, 비정상 전이를 서버 단에서 차단
규격 스냅샷 보존 구조 설계제출 시점 식품규격·시험항목을 별도 스냅샷 테이블에 저장, 이후 마스터 변경과 완전히 분리되는 구조 구축
비회원 OTP 인증 플로우 구현접수번호와 이메일 조합의 일회용 인증번호 발급·검증 로직 구현, 회원가입 없이 안전한 진행조회 지원
2단계 성적서 발송 워크플로우 설계PDF 업로드와 발송 실행을 분리한 2단계 구조 구현, 발송 실패·반송 건 자동 분류 재발송 큐 설계
Highlights

기술적 주안점

  • 리스트-상세 동기화 상태 관리와 상태 전이(state machine) 검증 로직을 함께 구현하여, 정의되지 않은 순서로의 상태 변경을 서버 단에서 차단하는 구조를 설계합니다
  • 식품규격·시험항목 마스터를 참조하는 동적 폼 엔진을 구현하여, 항목 추가·변경 시 폼 코드 수정 없이 마스터 데이터만으로 화면이 갱신되는 구조를 설계합니다
  • 회원가입 없이도 접수번호와 이메일만으로 안전하게 본인확인을 처리하는 OTP 인증 플로우를 구현하여, 비회원 조회의 보안성과 편의성을 함께 확보하는 구조를 설계합니다

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

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

무료 상담 시작하기