[Feat/#25] 행사 신청 폼 화면 구현

[sangrae2325]

#️⃣연관된 이슈

• Closes 행사 신청 폼 화면 구현 #25

🎯 해결하려는 문제가 무엇인가요?

행사 신청서 작성 화면이 없었습니다. 문항은 관리자가 행사마다 설정하기 때문에, 화면을 고정된 폼으로 짜면 안 되고 문항 목록 데이터를 받아 유형별로 렌더링하는 구조가 필요합니다.

❓ 왜 해결해야 하나요?

행사 신청 플로우(Figma 1165:63390)의 첫 화면입니다. 이후 작업인 신청 확인 모달, 제출 로딩, 완료·마감 페이지가 전부 이 화면 위에 붙기 때문에, 폼과 검증 구조를 먼저 잡아야 다음 이슈를 진행할 수 있습니다.

⭐ 어떻게 해결했나요?

• ScreenLayout에 hasBottomNav 옵션 추가: 하단 탭 대신 제출 버튼이 있는 화면을 위한 라우트 그룹을 나눴습니다. 기본값이 true라 기존 화면은 그대로입니다.
• features/events/ 구성: 화면(EventsApplicationScreen)이 답변 상태와 검증을 전부 들고, 컴포넌트(EventsSummaryCard, EventsQuestionField)는 그리기만 합니다.
• 문항 유형 4종을 컴포넌트 하나로 처리: question.type(복수 선택 / 단일 선택 / 단답형 50자 / 장문형 500자)으로 분기합니다. 카드 틀·제목·필수 *가 공통이라 컨벤션대로 유니온 타입 하나로 뒀습니다.
• 기타(직접 입력): 복수 선택 문항에서 기타를 체크하면 밑줄 입력칸이 나옵니다. 50자 제한이고, 해제하면 입력 내용도 초기화합니다.
• 제출 활성화: 필수 문항을 모두 채워야 활성화됩니다. 답변 상태에서 매번 계산하고 따로 저장하지 않습니다.
• Figma 보정: 제출 버튼 높이(WDS 48px → Figma 56px), 버튼 아래 여백 34px, TextArea의 width/minRows 기본값을 맞췄습니다. 근거는 docs/conventions/wds-component-usage.md에 기록했습니다.

/figma-check로 새 프레임(1658:183386)과 교차검증했고, 색상 하드코딩 없이 5개 항목 모두 일치합니다.
동작화면: https://github.com/user-attachments/assets/06811a4c-f993-45b8-8106-44bfe4e2c9f6

🧩 이 PR의 한계 & 트레이드오프

• 제출 버튼을 눌러도 아무 동작이 없습니다. 신청 확인 모달과 제출 API가 다음 이슈 범위입니다.
• 뒤로가기에 작성 중단 확인이 없습니다. 게다가 주소로 직접 들어온 경우 navigate(-1)이 앱 밖으로 나갑니다. 진입 동선이 생기고 중단 모달을 붙일 때 함께 처리하려고 남겨뒀습니다.
• 목업 데이터로 동작합니다. 라우트의 eventId는 아직 쓰지 않습니다. 선택지 문구와 단답형 문항은 Figma에 없어 임의로 채웠습니다.
• 선택지 문구를 답변 값과 key로 씁니다. 같은 문구의 선택지가 두 개면 함께 선택됩니다. API에서 선택지 id가 오면 교체할 예정입니다.
• ActionAreaButton의 세로 padding을 sx로 덮어썼습니다. WDS에 56px 크기가 없어서인데, WDS 내부 스타일을 건드리는 방식입니다.

⛓️ 기존 기능에 미치는 영향

• ScreenLayout은 prop 하나가 추가됐고 기본값이 기존 동작이라, 홈·빌릴게 화면은 영향이 없습니다(하단 탭이 그대로 뜨는 것을 브라우저로 확인).
• index.css에 색상 토큰 --color-background-elevated-normal 하나를 추가했습니다. WDS 변수를 연결한 것이라 다크 테마도 따라갑니다.
• 그 외 기존 파일 수정은 없습니다.

🔀 Edge Case & 실패 시나리오

• 필수 텍스트 문항에 공백만 입력하면 미충족으로 봅니다.
• 기타를 체크하고 내용을 비우거나 공백만 넣으면 제출이 비활성화됩니다.
• 기타를 해제하면 입력해둔 내용도 지웁니다(해제 상태로 제출되는 값 방지).
• 한글 입력 중에는 조합 때문에 잠깐 51자가 되지만, 글자가 확정되면 50자로 잘립니다(브라우저에서 확인).
• 긴 선택지 문구가 카드를 밀지 않도록 fieldset에 min-w-0을 줬습니다.

📋 검토한 대안과 선택 이유

• 레이아웃: Bottom Nav 없는 레이아웃을 새로 만드는 방안도 봤지만, 제출 버튼을 화면이 직접 두는 구조라 레이아웃은 "하단 탭을 그릴지"만 정하면 돼서 prop 하나로 해결했습니다. 신청 화면들이 탭 화면과 크게 달라지면 그때 분리하면 됩니다.
• 문항 컴포넌트: 유형별로 파일을 나누는 대신 유니온 타입 하나로 뒀습니다(component-convention.md 규칙). 기타 입력 등으로 더 커지면 그때 나눕니다.
• 필수 *: WDS Label required는 색은 같지만 * 크기가 14px로 고정이라 Figma(16px Bold)와 달라서 Typography로 직접 그렸습니다.
• 기타 입력칸: WDS TextField는 테두리 있는 박스형이라 Figma의 밑줄 형태와 달라 <input>으로 만들었습니다.

💬 리뷰 포인트

• [r] 복수 선택 답변 타입을 { selected, otherText } 객체로 바꿨습니다. 백엔드 스펙이 나오면 맞춰야 하는 부분이라 형태를 봐주세요.
• [c] ActionAreaButton의 sx 오버라이드. 같은 문제로 빌릴게 대여 바텀시트 버튼도 Figma는 56px인데 48px로 렌더링됩니다(이 PR 범위 밖이라 wds-component-usage.md에 기록만 해뒀습니다).
• [a] 목업의 선택지 문구와 단답형 문항은 임의로 채운 값입니다.

PR #22, #24가 머지되면 base를 main으로 바꿔야 합니다.