← 포트폴리오 목록
비철금속 스크랩 거래마켓
비철금속·고철 스크랩을 판매자와 구매자가 직접 탐색하고 제안·확정까지 진행하는 B2B 거래마켓을 React + Node.js 기반으로 설계·구현합니다.
거래번호 자동 채번 트랜잭션 설계제안 수락 시 물량·제안·거래처 정보를 원자적으로 연결하는 트랜잭션 로직 구현, 중복 확정 방지 락 적용
동적 검색 필터 쿼리 빌더 구현품목·등급·지역·수량 4종 필터를 조합 가능한 쿼리 빌더 설계, URL 쿼리스트링 상태 동기화 적용
이미지 업로드 파이프라인 구축Multer + Sharp 기반 첨부 사진 리사이징 파이프라인 구현, 업로드 전 클라이언트 미리보기 제공
Overview
프로젝트 개요
비철금속·고철 스크랩을 판매자와 구매자가 직접 탐색하고 제안·확정까지 진행하는 B2B 거래마켓을 React + Node.js 기반으로 설계·구현합니다. 품목·등급·지역·수량 조건별 검색 필터와 거래번호 자동생성 트랜잭션을 핵심으로 합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
비철금속 품목·등급별 시세 변동을 반영한 희망가격 입력 검증 로직 설계
동일 물량에 복수 구매 제안이 동시에 접수될 때 거래 확정 트랜잭션의 동시성 제어 설계
판매자·구매자·운영자 3개 역할의 접근 범위가 겹치는 화면에서 권한별 UI 분기 설계
출고 가능일과 실제 배차·운송 일정이 어긋나는 경우를 대비한 물량 상태 롤백 로직 설계
구현 내용
핵심 기능 상세
핵심 기능 1
거래시장 물량 탐색
판매자가 등록한 비철금속 물량을 품목·등급·지역·수량 조건으로 검색하고 카드 그리드에서 한눈에 비교하는 화면. 검색 조건을 URL 쿼리스트링으로 동기화해 필터 상태 공유가 가능한 거래시장 페이지를 구현합니다
핵심 기능 2
판매 물량 등록
판매자가 품목·등급·예상중량·지역·희망가격·출고 가능일을 입력하고 사진을 첨부해 물량을 등록하는 화면. 단계별 입력 폼과 이미지 업로드 미리보기를 결합해 등록 완료 후 즉시 거래시장에 반영되는 구조로 구현합니다
핵심 기능 3
구매 제안 및 거래 확정
구매자가 물량에 구매수량·단가·거래조건을 제안하고, 판매자가 수락하면 거래번호가 자동 생성되며 거래가 확정되는 화면
핵심 기능 4
마이페이지
판매자·구매자가 본인이 등록한 물량, 제안 현황, 거래 이력과 단계별 증빙자료를 한 화면에서 조회하는 마이페이지
구현 과정
프로젝트 진행 단계
STEP 1
거래 도메인 분석 및 ERD 설계
물량·제안·거래·정산 흐름 분석, PostgreSQL 테이블 18개 정의 및 관계 매핑
STEP 2
거래시장 검색 API 및 필터 엔진 개발
Express 기반 물량 검색 API 구현, 품목·등급·지역·수량 4종 동적 필터 쿼리 빌더 설계
STEP 3
물량 등록·구매 제안 화면 개발
React 기반 등록 폼·제안 플로우 구현, React Hook Form + Zod 검증 적용
STEP 4
거래 확정 트랜잭션 및 통합 테스트
거래번호 자동 채번 트랜잭션 구현, API-프론트엔드 통합 테스트 및 크로스 브라우저 검증
프로젝트 성과
주요 성과
거래번호 자동 채번 트랜잭션 설계제안 수락 시 물량·제안·거래처 정보를 원자적으로 연결하는 트랜잭션 로직 구현, 중복 확정 방지 락 적용
동적 검색 필터 쿼리 빌더 구현품목·등급·지역·수량 4종 필터를 조합 가능한 쿼리 빌더 설계, URL 쿼리스트링 상태 동기화 적용
이미지 업로드 파이프라인 구축Multer + Sharp 기반 첨부 사진 리사이징 파이프라인 구현, 업로드 전 클라이언트 미리보기 제공
물량 상태 머신 설계판매중·거래중·거래완료 3단계 Enum 상태 머신 구현, 상태 전이 규칙을 서버에서 단일 검증
Highlights
기술적 주안점
- 필터 조건을 URL 쿼리스트링과 동기화하는 구조를 설계하여 검색 결과 링크 공유가 가능한 거래시장 화면을 구현합니다
- 등록 폼 검증부터 이미지 업로드, 상태 배지 표시까지 하나의 플로우로 묶어 판매자가 1회 진입으로 물량 등록을 완료할 수 있는 구조를 구현합니다
- 제안 수락과 동시에 거래번호를 자동 생성하고 물량·제안·거래처 데이터를 원자적으로 연결하는 트랜잭션 구조를 구현합니다
