[Refactor/#123] 카드 사이 간격 8px 통일 (행사 신청 폼·홈·열린피드백 작성내역)

[sangrae2325]

#️⃣연관된 이슈

• Closes 카드 사이 간격 8px 통일 (행사 신청 폼·홈·열린피드백 작성내역) #123

📚 스택 PR입니다 — base가 #122(refactor/#120-summary-card) 브랜치예요. Files changed에는 이 PR 변경만 보입니다.
바꾸는 화면 중 열린피드백 작성내역이 #113에 있어서 스택 맨 위에 쌓았습니다. 머지 순서: #113 → #116 → #117 → #122 → 이 PR.

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

회색 배경 위 흰 카드 사이 간격이 화면마다 12px·8px로 섞여 있었다. 디자이너가 모두 8px로 정리했다(Figma 4174:101198 간격통일).

❓ 왜 해결해야 하나요?

같은 모양의 카드 목록인데 화면마다 간격이 달라서 앱 전체가 들쭉날쭉해 보인다.

실제뷰

⭐ 어떻게 해결했나요?

1. 카드 사이 12px → 8px (7b260e5) — gap-3 → gap-2

화면	코드	Figma 변경 후와 비교
행사 신청하기 폼	EventsApplicationScreen	요약 카드 다음 카드 118 ✅
홈	HomeScreen 3곳(배너↔섹션, 섹션끼리, 신청 카드끼리)	269·365… 전부 8px ✅
열린피드백 작성내역	FeedbacksMineList + 스켈레톤	두 번째 카드 114 ✅

학생회비 납부내역·사물함 배정 상태·행사 신청내역 상세는 #122에서 같이 바꿨다. 빌릴게·설정·탈퇴 확인은 원래 8px이다.

2. 규칙 문서화 (95b7744) — component-convention.md 크기·위치 절에 "회색 배경 위 흰 카드 사이는 8px(gap-2)" 추가

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

• 코드에 flex-col gap-3이 더 남아 있지만 확인해 보니 흰 카드끼리 간격이 아니다 — 섹션 제목↔카드 묶음(빌릴게 반납), 질문·답변 블록 안쪽(열린피드백 상세), 구분선 목록(열린피드백 목록), 흰 배경 화면(아카이빙·행사 상세), 시트·모달 안쪽. 그대로 뒀다

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

• 위 세 화면의 카드 사이가 4px씩 좁아진다. 그 외 동작 변화 없음

🔀 Edge Case & 실패 시나리오

• 홈 신청 카드가 여러 장일 때도 카드끼리 8px

📋 검토한 대안과 선택 이유

• 화면별로 Figma 값을 따로 맞추는 대신 "회색 배경 위 흰 카드 사이는 8px"을 규칙으로 문서에 남겼다 — 다음 화면부터 같은 차이가 다시 생기지 않게

💬 리뷰 포인트

• [a] 남겨 둔 gap-3들이 카드 간격이 아닌지

[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: 151f1bf9-b203-41cd-9941-c6815772f756

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