행사 신청 폼 화면 구현

[sangrae2325]

어떤 기능인가요?

행사 신청서 작성 화면("신청서 작성")을 구현한다. 문항은 관리자가 행사마다 설정하므로, 문항 목록 데이터를 받아 유형(복수 선택 / 단일 선택 / 단답형 50자 / 장문형 500자)별로 렌더링하고, 필수 문항은 제목 옆 *로 표시한다. 필수 문항을 모두 채워야 제출 버튼이 활성화된다.

계획: docs/plans/#25-events-application-form.md (로컬 전용 문서, 저장소에는 안 올라감)
베이스 브랜치: refactor/#23-unified-screen-header (PR #22, #24 머지 선행 필요)

📝 작업 상세 내용

• ScreenLayout에 hasBottomNav 옵션 추가 (신청 폼처럼 Bottom Nav 없는 화면용)
• 행사 신청 문항 타입과 목업 데이터 추가
• 행사 정보 카드 EventsSummaryCard 추가 (일러스트는 prop, 연필 일러스트 하나로 목업)
• 문항 컴포넌트 EventsQuestionField 추가 (체크박스 / 라디오 / 단답형·장문형 TextArea + 글자 수 카운터, 필수 * 표시)
• 행사 신청 화면 조립과 /events/:eventId/apply 라우트 추가 (필수 문항 충족 시 제출 버튼 활성화)
• 복수 선택 문항에 기타(직접 입력) 추가 — 체크 시 밑줄 입력칸 노출, 50자 제한, 해제 시 입력 내용 초기화
• wds-component-usage.md에 이번에 확정한 WDS 매핑 추가
• /figma-check로 Figma와 교차검증

구현 중 확정한 것

• 문항 제목의 필수 *는 WDS Label required 대신 Typography로 직접 그린다 — WDS의 *는 14px, Figma는 16px Bold라 크기가 다르다.
• 제출 버튼 높이는 WDS 기본값(48px)이 Figma(56px)와 달라 sx로 세로 padding만 맞췄다.
• 기타 입력칸은 WDS TextField(박스형)와 생김새가 달라 밑줄만 있는 <input>으로 만들었다.
• 필수 문항에서 기타를 골랐으면 입력 내용까지 있어야 제출 버튼이 활성화된다.

이번 범위에서 제외 (다음 이슈)

• 신청 확인 모달, 작성 중단 모달, 제출 중 로딩, 제출 실패 토스트, 신청 완료·마감 페이지, 제출 API 연동
• 하단 탭 경로 정리(/event → /events, /board → 용어 사전 기준) — 연결된 화면이 없어 지금은 영향 없음. 행사 목록 화면 이슈에서 게시판(게시판 - 공지 목록/탭 화면 추가 #15) 경로와 함께 정리

📁 참고 자료 (선택)

• Figma - 행사 신청하기 상세 (nodeId 1658:183386)
• Figma - 기타(직접 입력) Other Option (nodeId 1658:183954)
• Figma - 행사 신청 플로우 섹션 (nodeId 1165:63390)