[Refactor/#120] 상태 요약 카드를 공용 컴포넌트로 통합

[sangrae2325]

#️⃣연관된 이슈

• Closes 상태 요약 카드를 공용 컴포넌트로 통합 #120

📚 스택 PR입니다 — base가 #117(feat/#114-home-routing) 브랜치예요. Files changed에는 이 PR 변경만 보입니다.
바꾸는 카드 셋이 #113(학생회비·사물함)과 #116(행사 신청내역)에 나뉘어 있어서, 셋이 다 있는 스택 맨 위에 쌓았습니다. 머지 순서: #113 → #116 → #117 → #120.

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

"상태 배지 + 제목 + 라벨/값 행" 요약 카드를 세 곳이 같은 마크업으로 각자 그리고 있었다(#116 리뷰에서 나온 의견).

화면	카드	행
행사 신청내역 상세	EventsApplicationSummary	행사·신청·(취소)
학생회비 납부내역	FeePaymentCard 위쪽	납부금액·납부일시·확인일시
사물함 배정 상태	LockersAssignmentContent 첫 카드	신청일시·사용기한

❓ 왜 해결해야 하나요?

컴포넌트 컨벤션의 "두 번째 화면에서 재사용되면 components/ui/로 옮긴다" 기준을 넘었다. 지금처럼 세 벌이면 배지 크기나 행 간격이 바뀔 때 한쪽을 빠뜨리기 쉽고, 실제로 학생회비 카드만 행 간격이 달랐다.

⭐ 어떻게 해결했나요?

1. 공용 StatusSummaryCard (7b65e56) — components/ui/StatusSummaryCard.tsx

<StatusSummaryCard badge={{ label, color }} title={...} rows={[{ label, value }]} />

• 배지 매핑(FEE_STATUS_BADGES 등)은 각 기능 constants에 그대로 두고 화면이 골라 넘긴다 — 공용 UI가 기능 상수를 import하지 않는다
• 행 내용은 각 기능이 만든다. 그리기만 공용 카드가 맡는다

2. 세 곳 교체 (7b65e56, 830dd33, e99321c)

• 사물함·행사: 바꾸기 전과 카드 캡처가 바이트 단위로 같다(행사는 신청완료·신청취소 둘 다)
• EventsApplicationSummary는 "행사·신청·(취소)" 행만 만드는 파일로 남겼다
• 학생회비 "학생회 확인 내용" 카드, 사물함 "배정된 사물함" 카드는 구조가 달라 각 기능에 그대로 뒀다

3. 스켈레톤도 공용으로 (f829a0c) — 같은 파일의 StatusSummaryCardSkeleton(행 수만큼 rowWidths)

• 기존 스켈레톤은 행 사이를 8px로 그려서 데이터가 들어올 때 카드가 2~4px 줄어들었다. 이제 스켈레톤과 카드 높이가 같다(학생회비 166, 사물함·행사 142)

4. 카드 사이 간격 8px (0b4ba53) — 디자이너가 카드 사이 간격을 8px로 통일했다(Figma 4174:101198 간격통일). 이 PR 화면인 학생회비 납부 건끼리, 사물함 요약↔배정 카드, 신청내역 상세 카드 사이를 12→8px로(스켈레톤 포함). 나머지 화면(행사 신청 폼·홈·열린피드백 작성내역)은 별도 이슈로

5. 문서 (13aca08, 16ae84b) — wds-component-usage.md 내 내역·행사 신청내역 절

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

• 취소된 신청은 행이 하나 더 있는데, 데이터를 받기 전에는 취소 여부를 몰라 스켈레톤은 2줄이다(원래도 그랬다)
• 홈 내 정보·신청내역 목록 카드처럼 배지를 쓰는 다른 카드는 구조가 달라 이번 대상이 아니다

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

• 학생회비 납부 카드 행 간격 8px → 6px — 디자이너 확인 완료, Figma(3147:147879)도 6px로 고쳐졌다. 카드 높이가 2px 줄어든다
• 카드 사이 간격 12px → 8px — 학생회비 납부 건끼리, 사물함 배정 상태, 신청내역 상세
• 나머지 화면 모양은 그대로다

🔀 Edge Case & 실패 시나리오

• 학생회비 확인필요일 때 아래 확인 내용 카드·문의하기는 그대로 붙는다(채널 주소가 없으면 문의하기는 숨김 — #113과 같음)

📋 검토한 대안과 선택 이유

• 학생회비 행 간격: 옵션으로 8px 유지 vs 6px 통일 — 디자이너 확인 결과 6px로 통일
• EventsApplicationSummary: 지우고 상세 화면에서 행을 만들기 vs 행만 만드는 파일로 남기기 — 학생회비·사물함도 각자 행을 만드니 같은 모양이 되도록 남겼다

💬 리뷰 포인트

• [a] 행 간격 6px·카드 사이 8px은 디자이너 확인 완료(3147:147879, 4174:101198)
• [a] 공용 카드 이름 StatusSummaryCard

[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: bdd45da0-3c36-4c38-91ae-cf92158a28e5

• 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.}