미술품 큐레이션 마켓플레이스

구매자가 작가·카테고리·가격대·사이즈별로 작품을 필터링하며 갤러리 그리드에서 탐색합니다. 필터 레일 + 반응형 카드 그리드 + 카드 클릭 시 퀵뷰 drawer 구조로 구현, 무한 스크롤과 결합.

• React Query로 작품 목록 서버 상태를 캐싱하고 staleTime을 분리 설정
• Intersection Observer 기반 무한 스크롤 + 이미지 lazy loading 적용
• 필터 조건(작가/카테고리/가격대)을 URL 쿼리 파라미터와 동기화해 공유 가능한 탐색 상태 구현

필터 상태를 URL과 동기화하는 구조로 검색 결과 공유와 뒤로가기 탐색을 자연스럽게 지원합니다

작품 상세 정보를 확인한 구매자가 PG사 REST API 연동으로 전자결제를 진행합니다. 결제 요청/승인/실패 상태를 관리하는 트랜잭션 상태 머신과 결제 실패 재시도 흐름을 구현.

• 포트원(아임포트) 계열 PG REST API 연동 구조로 결제 요청·검증 흐름 설계
• 결제 상태(대기/승인/실패/취소)를 관리하는 상태 머신 구현
• 결제 실패 시 사유별 안내와 재시도 플로우 설계

PG 응답을 서버에서 재검증하는 구조로 결제 위변조를 방지하는 흐름을 설계합니다

작가가 모바일 웹에서 회원가입 후 작품 정보와 이미지를 등록해 관리자 승인을 요청합니다. 다단계 등록 폼 + 이미지 업로드 + 승인 상태 추적 UI로 구현.

• 다단계(Step) 등록 폼 상태를 React Hook Form으로 관리하고 단계별 유효성 검증 적용
• 작품 이미지 업로드 시 클라이언트 사이드 리사이징 후 스토리지 업로드 구조 설계
• 승인 상태(대기/검토중/승인/반려)를 폴링으로 작가에게 노출

이미지 업로드 전 클라이언트 리사이징으로 업로드 대역폭을 고려한 구조를 설계합니다

구매자가 프로필, 주문 내역, 관심 작품을 마이페이지에서 관리합니다. 주문 상태별 필터링 + 관심 작품 리스트 + 프로필 수정 폼으로 구성.

• 주문 내역을 상태(결제완료/배송준비/완료)별로 필터링하는 탭 UI 구현
• 관심 작품(위시리스트) 로컬 상태와 서버 동기화 구조 설계
• 프로필 수정 폼에 낙관적 업데이트(Optimistic UI) 적용

위시리스트를 로컬 상태와 서버 상태로 이중 관리해 오프라인에서도 즉시 반응하는 UI를 설계합니다