비철금속 스크랩 거래마켓

판매자가 등록한 비철금속 물량을 품목·등급·지역·수량 조건으로 검색하고 카드 그리드에서 한눈에 비교하는 화면. 검색 조건을 URL 쿼리스트링으로 동기화해 필터 상태 공유가 가능한 거래시장 페이지를 구현합니다.

• React Query로 물량 목록 서버 상태를 캐싱하고 필터 변경 시 staleTime 30초로 재조회를 최소화
• 품목·등급·지역·수량 4종 필터를 조합 가능한 동적 쿼리 빌더로 구현
• Intersection Observer 기반 무한스크롤로 대량 물량 목록을 점진적으로 렌더링

필터 조건을 URL 쿼리스트링과 동기화하는 구조를 설계하여 검색 결과 링크 공유가 가능한 거래시장 화면을 구현합니다.

판매자가 품목·등급·예상중량·지역·희망가격·출고 가능일을 입력하고 사진을 첨부해 물량을 등록하는 화면. 단계별 입력 폼과 이미지 업로드 미리보기를 결합해 등록 완료 후 즉시 거래시장에 반영되는 구조로 구현합니다.

• React Hook Form + Zod로 품목·중량·가격 등 필수 입력값 스키마를 검증
• Multer + Sharp로 첨부 사진을 리사이징해 업로드 용량을 최적화
• 물량 상태(판매중/거래중/거래완료)를 상태 배지로 표시하는 상태관리 컴포넌트를 설계

등록 폼 검증부터 이미지 업로드, 상태 배지 표시까지 하나의 플로우로 묶어 판매자가 1회 진입으로 물량 등록을 완료할 수 있는 구조를 구현합니다.

구매자가 물량에 구매수량·단가·거래조건을 제안하고, 판매자가 수락하면 거래번호가 자동 생성되며 거래가 확정되는 화면.

• 제안 상태(대기/수락/거절/철회)를 Enum 기반 상태 머신으로 관리
• 거래 확정 시 물량·제안·거래처 정보를 하나의 트랜잭션으로 연결하는 거래번호 자동 채번 로직을 구현
• Optimistic UI로 제안 수락 클릭 직후 상태를 즉시 반영하고 실패 시 자동 롤백

제안 수락과 동시에 거래번호를 자동 생성하고 물량·제안·거래처 데이터를 원자적으로 연결하는 트랜잭션 구조를 구현합니다.

판매자·구매자가 본인이 등록한 물량, 제안 현황, 거래 이력과 단계별 증빙자료를 한 화면에서 조회하는 마이페이지.

• 탭별 데이터를 React Query 개별 쿼리 키로 분리해 탭 전환 시 캐시를 재사용
• 거래 이력에 12단계 상태 중 현재 단계를 타임라인 컴포넌트로 표시
• 개인정보 수정 폼에 낙관적 업데이트 패턴을 적용

물량·제안·거래이력을 탭 구조로 분리하고 각 탭에 독립적인 캐시 전략을 적용해 전환 시 재요청을 최소화하는 마이페이지를 구현합니다.