담당 역할
- 행사 정보, 신청, 결제와 확인 흐름을 포함한 제품 구조 설계
- 사용자 신청 폼과 카드 결제 연동 구현
- 서버 측 결제 확인과 신청 상태 연결
- 관리자 운영 화면과 접근 제어 구성
- 공통 UI, API, 타입과 유틸리티를 공유하는 모노레포 구조 설계
웹 구축 사례
MBN 마라톤: 행사 안내부터 신청·결제·관리까지 연결한 웹 구축
행사 웹사이트는 소개 화면만으로 끝나지 않습니다. 신청 데이터와 결제 상태가 어긋나지 않도록 사용자 화면, 서버 검증, 관리자 운영을 함께 설계했습니다. 공개 페이지에는 저장소에서 확인되는 역할, 기술과 산출물만 정리했습니다.
기술 구성
- Next.js App Router, React, TypeScript
- Feature-Sliced Design 기반 기능 분리
- React Hook Form과 Zod 입력 검증
- PortOne 카드 결제 연동과 서버 검증
- Supabase SSR 인증과 미들웨어 접근 제어
- Sentry 오류 추적, Turborepo와 pnpm 워크스페이스
핵심 산출물
- 행사 소개, 코스, 리워드와 주의사항 화면
- 개인·단체 신청을 처리하는 입력과 검증 흐름
- 카드 결제 요청, 결과 확인과 신청 상태 연결
- 신청 내역과 운영 데이터를 확인하는 관리자 기능
- 여러 행사 앱에서 재사용할 수 있는 공통 패키지
운영 안정성을 위한 접근
- 연속 클릭과 중복 요청을 막는 잠금 처리를 신청·결제 흐름에 적용했습니다.
- 브라우저가 전달한 값만 믿지 않고 서버에서 결제 결과와 신청 정보를 다시 확인하도록 구성했습니다.
- 신청 가능 상태와 관리자 접근을 미들웨어와 인증 흐름에서 분리했습니다.
- 입력 스키마와 공통 API 규칙을 패키지로 공유해 사용자 화면과 관리자 화면의 데이터 계약을 맞췄습니다.
관련 사례와 가이드
현재 상황과 필요한 범위부터 함께 정리합니다
가격이나 기간을 추측해 제시하지 않습니다. 목표, 준비된 자료와 필수 기능을 확인한 뒤 작업 범위와 견적 산정 근거를 설명합니다.
문의 내용 정리하기