의류 도매 거래처 주문·정산 웹
거래처가 자기 계정으로 로그인해 단가가 적용된 상품 목록을 보고, 색상·사이즈 수량을 한 번에 입력해 주문하고, 출고·반품·미수금까지 조회하는 거래처 주문 웹을 구현하는 프로젝트입니다.
프로젝트 개요
거래처가 자기 계정으로 로그인해 단가가 적용된 상품 목록을 보고, 색상·사이즈 수량을 한 번에 입력해 주문하고, 출고·반품·미수금까지 조회하는 거래처 주문 웹을 구현하는 프로젝트입니다.
작업 범위
- 상품 목록: 로그인한 거래처의 등급·개별 단가가 카드마다 표시되고 분류 칩으로 목록을 좁힙니다. 카드를 누르면 색상별 주문 가능 수량이 열립니다
- 주문서: 색상 행과 사이즈 열에 수량을 채우면 합계가 바로 바뀌고, 가용 수량을 넘기면 칸에 안내가 나타납니다
- 주문 내역: 접수부터 확인·배정·부분 출고·완료까지 주문의 진행 단계가 타임라인으로 보입니다
- 거래 내역·미수금: 월별 주문금액·입금액·미수금이 합산되어 보이고 거래 내역 행을 눌러 명세를 확인합니다
주요 업무
- 상품 목록 화면: 품목 마스터와 거래처 단가 테이블을 조인해 목록 응답에 적용 단가를 함께 내려줍니다
- 주문서 화면: 수량 칸 입력을 로컬 상태로 모으고 주문 접수 시 한 번에 품목 단위로 저장합니다
- 주문 내역 화면: 주문 상태 머신을 서버에서 관리하고 거래처 조회 API는 본인 주문만 반환합니다
- 거래 내역·미수금 화면: 주문 라인과 입금 매칭 결과에서 금액을 계산하고 화면에는 저장된 합계를 그대로 쓰지 않습니다



프로젝트 핵심 과제
색상×사이즈 조합이 많은 상품의 수량 입력 화면이 휴대폰에서 좁아지는 리스크
표를 카드 목록으로 접는 반응형 구조로 대응합니다
거래처별 개별 단가가 등급 단가와 섞여 금액이 어긋날 리스크
단가 해석을 한 함수로 모아 대응합니다
부분 출고와 반품이 겹친 주문의 미수금이 틀어질 리스크
주문·출고·반품을 같은 계산 규칙으로 집계해 대응합니다
핵심 기능 상세
상품 목록
로그인한 거래처의 등급·개별 단가가 카드마다 표시되고 분류 칩으로 목록을 좁힙니다. 카드를 누르면 색상별 주문 가능 수량이 열립니다.
- Prisma 관계 쿼리로 상품-색상-사이즈 품목 조합을 한 번에 조회
- 등급 단가와 개별 단가를 우선순위 규칙으로 병합하는 단가 해석 함수 설계
- React Query 캐시 키에 거래처·필터를 포함해 목록 캐싱 전략 설계
거래처 세션에서 단가 정책을 해석해 카드마다 해당 거래처의 단가를 표시하는 구조를 설계합니다.


주문서
색상 행과 사이즈 열에 수량을 채우면 합계가 바로 바뀌고, 가용 수량을 넘기면 칸에 안내가 나타납니다. 수량 칸 입력을 로컬 상태로 모으고 주문 접수 시 한 번에 품목 단위로 저장합니다.
- 색상×사이즈 매트릭스 입력 컴포넌트와 키보드 이동(Tab·방향키) 처리
- 가용 수량 초과 칸 실시간 검증과 인라인 안내
- 장바구니 합계를 적용 단가 기준으로 계산하는 순수 함수 분리
여러 품목의 색상·사이즈 수량을 한 화면에서 입력하고 단가 기준 합계를 확인하는 주문서를 구현합니다.


주문 내역
접수부터 확인·배정·부분 출고·완료까지 주문의 진행 단계가 타임라인으로 보입니다. 주문 상태 머신을 서버에서 관리하고 거래처 조회 API는 본인 주문만 반환합니다.
- 상태 전이 표(접수→확인→배정→부분 출고→완료·반품)를 서버 상태 머신으로 구현
- 거래처 ID 기준 행 단위 접근 제어를 미들웨어로 적용
- Prisma 트랜잭션으로 상태 변경과 이력 기록을 함께 처리
주문 상태 전이를 단일 규칙으로 관리해 거래처 화면과 직원 화면이 같은 진행 단계를 보도록 설계합니다.


거래 내역·미수금
월별 주문금액·입금액·미수금이 합산되어 보이고 거래 내역 행을 눌러 명세를 확인합니다. 주문 라인과 입금 매칭 결과에서 금액을 계산하고 화면에는 저장된 합계를 그대로 쓰지 않습니다.
- 주문 라인 합계와 입금액을 SQL 집계로 계산해 월별 미수금 산출
- 금액을 정수(원) 단위로만 다뤄 반올림 오차 차단
- 월 마감 이후 변경 건은 별도 조정 행으로 기록하는 구조 설계
주문·입금·반품 금액을 한 계산 규칙으로 집계해 거래처가 보는 미수금과 직원이 보는 장부가 일치하도록 설계합니다.


프로젝트 진행 단계
품목·단가·주문 데이터 모델 설계 · 2026.11
상품-색상-사이즈 품목, 거래처 등급·개별 단가, 주문 상태 전이 테이블 ERD 설계
거래처 인증·주문 API 개발 · 2026.11
Express 기반 REST API, 거래처 행 단위 접근 제어, 단가 해석 함수 구현
주문서·조회 화면 개발 · 2026.11
매트릭스 주문서, 주문 진행 타임라인, 출고·반품·미수금 화면 구현
통합 테스트와 반응형 점검 · 2026.11
휴대폰·PC 반응형 점검, 금액 정합성 테스트, 발주사 인수 문서 정리
개발 결과
기술적 주안점
- 거래처 세션에서 단가 정책을 해석해 카드마다 해당 거래처의 단가를 표시하는 구조를 설계합니다
- 여러 품목의 색상·사이즈 수량을 한 화면에서 입력하고 단가 기준 합계를 확인하는 주문서를 구현합니다
- 주문 상태 전이를 단일 규칙으로 관리해 거래처 화면과 직원 화면이 같은 진행 단계를 보도록 설계합니다