← 포트폴리오 목록
청소년 창작 공모전 접수 플랫폼
국제 창작 공모전 참가자를 위한 접수·결제·마이페이지 플랫폼을 React와 Node.js 기반으로 설계합니다.
동적 제출폼 렌더러 설계JSON 스키마 기반 공모전별 필드 구성으로 신규 공모전 추가 시 코드 변경 없이 폼을 생성하는 구조 구현
이어작성 가능한 단계별 임시저장 구조 구현위저드 각 단계 이탈 시 서버 자동저장, 재로그인 시 마지막 단계로 복귀하는 세션 복구 로직 설계
다중 파일 유형 미리보기 컴포넌트 구축이미지·PDF·음원·영상 URL 등 5개 유형별 미리보기 컴포넌트 설계, Compound Component 패턴 적용
Overview
프로젝트 개요
국제 창작 공모전 참가자를 위한 접수·결제·마이페이지 플랫폼을 React와 Node.js 기반으로 설계합니다. 공모전별로 달라지는 제출 항목을 JSON 스키마 기반 동적 폼으로 구현하고, 5단계 위저드와 파일 업로드 미리보기, PG 결제 연동까지 하나의 흐름으로 통합합니다. 다국어(영/한) 처리와 미성년자 보호자 동의 절차도 함께 반영하여 국제 공모전 운영 요건을 충족하는 데모로 구현합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
공모전·분야별로 달라지는 제출 항목을 코드 수정 없이 반영하는 동적 폼 스키마 설계
미성년자 참가자의 보호자 동의 절차와 개인정보 공개 범위를 관리하는 구조 설계
위저드 이탈 후 재접속 시 정확한 단계로 복귀시키는 세션·임시저장 정합성 관리
참가비와 해외 본선 참가비를 별도 트랜잭션으로 처리하면서 결제 실패를 안전하게 분기하는 로직
구현 내용
핵심 기능 상세
핵심 기능 1
공모전 탐색
국가·도시·분야·상태로 필터링 가능한 공모전 카드 갤러리에서 참가자가 관심 공모전을 탐색하고 상세 요강을 확인합니다
핵심 기능 2
작품 접수
01 참가자정보 → 02 작품정보 → 03 파일업로드 → 04 확인/결제 → 05 접수완료로 이어지는 5단계 위저드로 참가자가 작품을 제출합니다
핵심 기능 3
결제·해외본선
참가비 결제와 해외 본선 참가비 별도 결제를 분리 처리하며, 결제 성공/실패에 따라 다른 안내 화면으로 분기합니다
핵심 기능 4
마이페이지
내 접수 현황, 심사 결과, 결제 내역, 인증서(영/국문), 해외 본선 신청을 5개 탭으로 확인·관리합니다
구현 과정
프로젝트 진행 단계
STEP 1
요구사항 분석 및 RBAC·다국어 스키마 설계
5개 역할 권한 모델, 공모전별 동적 폼 스키마, PostgreSQL 테이블 22개 설계
STEP 2
접수 위저드 및 결제 API 개발
Express 기반 5단계 위저드 API, 임시저장/이어작성 로직, PG 연동 API 18개 구현
STEP 3
참가자 화면 및 갤러리 UI 개발
React 기반 공모전 탐색·마이페이지 등 10개 화면 구현, 파일 업로드 미리보기 적용
STEP 4
다국어 처리 및 통합 테스트
영/한 i18n 전면 적용, 결제·업로드 흐름 E2E 테스트 40개 케이스 작성
프로젝트 성과
주요 성과
동적 제출폼 렌더러 설계JSON 스키마 기반 공모전별 필드 구성으로 신규 공모전 추가 시 코드 변경 없이 폼을 생성하는 구조 구현
이어작성 가능한 단계별 임시저장 구조 구현위저드 각 단계 이탈 시 서버 자동저장, 재로그인 시 마지막 단계로 복귀하는 세션 복구 로직 설계
다중 파일 유형 미리보기 컴포넌트 구축이미지·PDF·음원·영상 URL 등 5개 유형별 미리보기 컴포넌트 설계, Compound Component 패턴 적용
결제 실패 분기 및 재시도 흐름 설계참가비·해외본선 참가비를 별도 트랜잭션으로 분리하고 실패 사유별 재시도/문의 안내 로직 구현
Review
기술적 주안점
- 국가·도시·분야·상태 4축 필터를 조합 가능한 동적 쿼리 빌더로 구현하고, quick-view 드로어에서 상세 페이지 이동 없이 공모전 요강을 즉시 확인할 수 있는 구조를 설계합니다
- 위저드 이탈 후 재접속 시 서버에 저장된 마지막 단계로 자동 복귀시키는 세션 복구 로직을 구현하여, 미성년자 참가자가 보호자와 나눠 작성해도 작업이 유실되지 않는 흐름을 설계합니다
- 참가비와 해외 본선 참가비를 별도 트랜잭션으로 분리하면서도 하나의 접수 흐름 안에서 자연스럽게 이어지도록 상태 머신 기반 결제 단계 관리 구조를 설계합니다
