청소년 창작 공모전 접수 플랫폼

국가·도시·분야·상태로 필터링 가능한 공모전 카드 갤러리에서 참가자가 관심 공모전을 탐색하고 상세 요강을 확인합니다.

• React Query로 공모전 목록/필터 서버 상태를 캐싱하고 staleTime을 분리 관리
• URL 쿼리 파라미터와 필터 상태를 동기화하여 공유 가능한 탐색 결과 링크 구현
• Intersection Observer 기반 무한 스크롤과 Skeleton UI로 카드 그리드 점진 로딩 구현

국가·도시·분야·상태 4축 필터를 조합 가능한 동적 쿼리 빌더로 구현하고, quick-view 드로어에서 상세 페이지 이동 없이 공모전 요강을 즉시 확인할 수 있는 구조를 설계합니다.

01 참가자정보 → 02 작품정보 → 03 파일업로드 → 04 확인/결제 → 05 접수완료로 이어지는 5단계 위저드로 참가자가 작품을 제출합니다.

• JSON 스키마 기반 동적 폼 렌더러를 구현하여 공모전별 제출 항목을 코드 변경 없이 구성
• React Hook Form + Zod로 단계별 유효성 검증과 에러 포커스 이동 구현
• 각 단계 전환 시 Debounced 자동저장 API 호출로 임시저장 상태 관리

위저드 이탈 후 재접속 시 서버에 저장된 마지막 단계로 자동 복귀시키는 세션 복구 로직을 구현하여, 미성년자 참가자가 보호자와 나눠 작성해도 작업이 유실되지 않는 흐름을 설계합니다.

참가비 결제와 해외 본선 참가비 별도 결제를 분리 처리하며, 결제 성공/실패에 따라 다른 안내 화면으로 분기합니다.

• PG SDK(토스페이먼츠/포트원) 연동으로 참가비·해외본선 참가비를 독립 트랜잭션으로 분리 처리
• 결제 웹훅 수신 후 서버에서 결제 상태를 재검증하는 이중 확인 로직 구현
• 결제 실패 사유(한도초과/카드오류/네트워크)별 재시도 및 문의 안내 분기 UI 구현

참가비와 해외 본선 참가비를 별도 트랜잭션으로 분리하면서도 하나의 접수 흐름 안에서 자연스럽게 이어지도록 상태 머신 기반 결제 단계 관리 구조를 설계합니다.

내 접수 현황, 심사 결과, 결제 내역, 인증서(영/국문), 해외 본선 신청을 5개 탭으로 확인·관리합니다.

• 탭 전환 시 React Query 캐시를 유지하여 재조회 없이 즉시 탭 전환 구현
• jsPDF 기반 인증서 미리보기 및 영/국문 템플릿 선택 다운로드 구현
• 상태별(접수완료/심사중/수상) 배지 컴포넌트를 재사용 가능하게 설계

접수·심사·결제·인증서·해외본선 5개 도메인의 데이터를 하나의 마이페이지 셸에서 탭 단위로 독립 로딩하는 구조를 설계하여, 미성년자 참가자의 보호자도 필요한 정보만 빠르게 확인할 수 있도록 구현합니다.