[Feat/#115] 행사 신청내역 화면 구현 (목록·빈 상태·상세·신청취소)

[sangrae2325]

#️⃣연관된 이슈

• Closes 행사 신청내역 화면 구현 (목록·빈 상태·상세·신청취소) #115

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

행사 목록의 신청내역 탭이 "신청내역은 아직 준비 중이에요" 문구로만 남아 있었고, 행사 신청 완료 화면의 신청내역 보기는 없는 주소(/my/applications)로 가서 준비 중 화면이 떴다. Figma 행사 신청내역 섹션(1133:44426)을 목데이터로 구현한다.

화면	주소	Figma
신청내역 목록	/events/applications	1133:46168
신청내역 빈 상태	/events/applications	1165:63551
신청내역 상세	/events/applications/:applicationId	1133:46181
신청취소 확인모달	(상세 위)	1133:46131
신청취소 상세 + 토스트	/events/applications/:applicationId	1133:46216

❓ 왜 해결해야 하나요?

신청한 행사를 확인하거나 취소할 곳이 없다. 홈의 신청한 행사 더보기·행(#114)도 이 화면으로 연결해야 한다.

실제뷰

⭐ 어떻게 해결했나요?

1. 데이터 (main 규칙: entities + mockupApi + use() + 스켈레톤)

• entities/events에 MyEventApplication 타입·목데이터·API 추가
  • fetchMyEventApplications(), fetchMyEventApplication(id), cancelMyEventApplication(id)
  • 신청내역이 신청 당시 문항과 답변을 같이 들고 있다. 행사 쪽 문항이 나중에 바뀌어도 내가 답한 그대로 보여 주기 위해서다
  • 취소 일시는 신청취소일 때만 있도록 타입을 상태별로 나눴다
• 신청 문항·답변 타입(EventsQuestion, EventsAnswer 등)을 features/events/constants에서 entities/events/types.ts로 옮겼다. 신청 폼은 import 경로만 바뀐다
• lib/mockupApi.ts에 바꾸는 요청용 mockupMutation, 캐시를 지우는 invalidateMockupApi 추가

2. 행사 목록 탭을 경로로 나눔

• 행사 /events, 신청내역 /events/applications. 같은 목록 화면이 주소로 탭을 고른다
• 탭 전환은 replace라 히스토리가 쌓이지 않고, 새로고침해도 탭이 유지된다
• 하단 탭은 /events/applications에서도 "행사"가 선택된다
• 행사 신청 완료 화면 신청내역 보기 → /events/applications

3. 신청내역 목록·빈 상태

• 카드: 회색 썸네일 + 신청완료(초록)/신청취소(빨강) 배지 + 행사명 + 신청/취소 일시 + 행사 상세·신청 상세
• 신청내역 탭에서는 Figma대로 상태 필터 행을 숨긴다
• 빈 상태는 EventsEmptyState를 재사용하고 행사 둘러보기 → 행사 탭

4. 신청내역 상세

• 행사 요약(행사·신청·취소 일시) + 내가 낸 답변을 신청 폼의 EventsQuestionField로 읽기 전용 표시
• 신청취소 상세는 입력들을 WDS 비활성 모양 + Label/Disable 글자로 흐리게

5. 신청 취소

• 신청 취소 → ConfirmModal tone="negative" → 취소 → 상세가 취소 상태로 바뀌고 "신청이 취소됐어요." 토스트
• 취소 API가 목데이터를 바꾸고 목록·상세 조회 캐시를 지워서, 목록으로 돌아가도 취소 상태로 보인다
• 다시 받는 동안 스켈레톤이 깜빡이지 않도록 다시 그리는 업데이트를 transition으로 묶었다

6. 공용 컴포넌트 수정

• EventsQuestionField: 읽기 전용 모드(변경 콜백을 안 넘기면)·disabled 추가, 읽기 전용이면 aria-readonly
• EventsQuestionField: WDS TextArea 글자가 16px로 고정돼 Figma(Label 1/Reading 14px)와 달라서 sx로 덮었다. 기존 신청 폼 입력칸도 14px로 바뀐다
• EventsEmptyState: 버튼 동작(onAction)·설명 굵기 옵션 추가, px 임의값을 Tailwind 크기로 정리

7. 문서 — wds-component-usage.md에 행사 신청내역 절 추가, 신청 폼 TextArea 항목에 글자 덮어쓰기 추가

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

• 목데이터라 새로고침하면 취소가 풀린다. 취소 일시도 누른 시각으로 찍힌다
• 취소할 수 없는 경우가 정의돼 있지 않다. Figma는 신청완료면 항상 신청 취소 버튼이 있어서, 행사가 끝났거나 취소 기한이 지난 경우도 지금은 버튼이 보인다
• 실패 토스트 문구("신청 취소에 실패했어요. 다시 시도해 주세요.")는 Figma에 없어서 임의로 정했다
• 썸네일은 행사 이미지 API가 없어서 회색 자리다
• 홈 신청한 행사 연결, 사물함 신청 완료 신청내역 보기(→ /my/locker)는 #114에서 한다

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

• 행사 신청 폼: 서술형 입력칸 글자가 16px → 14px(Figma 값)로 바뀐다. 자동 높이는 그대로 맞는다(빈 칸 22px, 세 줄 66px). 선택·입력 동작은 그대로다
• 행사 목록: 탭이 주소로 바뀌었다. 행사 탭에서 고른 필터는 신청내역 탭에 다녀와도 유지된다
• 행사 목록 빈 상태: 그림을 Figma보다 2px 치우친 위치 대신 가운데에 둔다(px 정리)
• 행사 신청 완료: 신청내역 보기가 준비 중 화면 대신 신청내역 탭으로 간다

🔀 Edge Case & 실패 시나리오

• 없는 신청내역 id로 상세에 들어오면 신청내역 목록으로 보낸다
• 주소로 바로 들어와 뒤로 갈 기록이 없으면 신청내역 목록으로 보낸다
• 취소 요청 중에는 버튼을 막아 두 번 보내지 않는다. 실패하면 실패 토스트를 띄우고 화면은 그대로 둔다
• 읽기 전용 상세에서 답하지 않은 서술형 문항은 입력 안내 문구 없이 빈 칸으로 둔다

📋 검토한 대안과 선택 이유

• 탭: 쿼리 파라미터(?tab=)·navigate state vs 경로 — 주소가 깔끔하면서 새로고침·다른 화면에서의 진입에도 탭이 유지되는 경로로 했다
• 상세 문항 데이터: features 상수 import vs 신청내역이 문항을 같이 보관 — 행사 문항이 바뀌어도 내가 답한 그대로 보여야 해서 신청 당시 문항을 같이 보관한다
• 취소 후 목록: 상세 화면 안에서만 반영 vs 목데이터·캐시까지 반영 — 실제 API와 같은 흐름을 미리 맞추려고 목록까지 반영했다
• 상세 요약 카드: EventsSummaryCard 재사용 vs 새로 — 기존 카드는 아이콘 + 일시·장소라 Figma의 "행사·신청·취소" 라벨 행과 달라서 새로 만들었다

💬 리뷰 포인트

• [c] lib/mockupApi.ts의 mockupMutation·invalidateMockupApi — 다른 화면의 "바꾸는 요청"에도 이 방식을 쓸지
• [a] 취소할 수 없는 경우(행사 종료·기한 경과) 처리는 디자인 확정 후

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 2bbfa43d-571c-408e-8609-0a6cda544346

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

_{Comment @coderabbitai help to get the list of available commands.}