[Feat/#114] 홈 화면 버튼 라우터 연결

[sangrae2325]

#️⃣연관된 이슈

• Closes 홈 화면 버튼 라우터 연결 #114

⚠️ #113(내 내역 화면)·#116(행사 신청내역) 위에 쌓은 브랜치입니다. 두 PR이 머지되기 전까지는 이 PR의 diff에 두 PR 변경이 같이 보입니다. 이 PR의 변경은 merge 커밋(668a248) 뒤의 커밋 5개뿐이고, 두 PR이 머지되면 main 위로 옮겨(rebase) 정리합니다.
설정(#97)·알림(#108)·학생회비 송금(#107)·아카이빙(#40)이 머지되면 그 연결도 이 브랜치에 추가한 뒤 머지합니다.

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

홈 화면(#93)은 화면만 만들고 다른 화면으로 넘어가는 버튼·카드를 대부분 연결하지 않았다.

❓ 왜 해결해야 하나요?

홈에서 공지·신청·대여·내 내역으로 들어갈 수 없어서, 홈이 요약만 보여 주고 끝난다.

실제 동작 영상

다른 화면들 모두 머지/반영후에 추가하겠습니다

⭐ 어떻게 해결했나요?

1. 빌릴게 대여/반납 탭을 경로로 (31716a2)

• 대여 /bililge, 반납 /bililge/returns. 행사 목록([Feat/#115] 행사 신청내역 화면 구현 (목록·빈 상태·상세·신청취소) #116)과 같은 방식으로 같은 화면이 주소로 탭을 고르고, 탭 전환은 replace
• 하단 탭은 /bililge/returns에서도 "빌릴게"가 선택된다

2. 목데이터 정리 (9e1be5f)

• 행사 목데이터에 모집중 행사 추가(홈 신청 카드가 가리키는 행사)
• 홈 공지 배너·신청 카드·신청한 행사에 열 대상 id(noticeId·eventId·applicationId)와 신청 카드 종류(행사/사물함) 추가

3. 홈 이동 연결 (86b90fc)

홈에서 누르는 곳	이동
공지 배너	공지 상세 /notices/:noticeId
신청 카드(행사)	카드 → 행사 상세, 신청하기 → 행사 신청
신청 카드(사물함)	카드·신청하기 둘 다 → 사물함 신청 /lockers/apply
대여 N건 더보기 / 빈 상태 대여하러 가기	/bililge/returns / /bililge
신청한 행사 행 / N건 더보기 / 빈 상태 행사 둘러보기	/events/applications/:applicationId / /events/applications / /events
내 정보 학생회비 납부 여부·열린피드백·사물함	/my/fee·/my/feedbacks·/my/locker

• 사물함 신청 완료 화면 신청내역 보기도 없는 /my/applications 대신 /my/locker로
• 화면을 쌓는 이동은 슬라이드(viewTransition), 하단 탭 화면으로는 바로 전환
• 누를 수 있는 줄·카드를 버튼으로 바꿨다. 화면 모양은 바꾸기 전과 픽셀 단위로 같다

4. 홈에서 반납 신청 (8e8a19a)

• 반납 신청을 누르면 홈에서 바로 확인 모달 → 완료 토스트
• 빌릴게 반납 탭의 모달·토스트를 useBililgeReturnRequest 훅으로 꺼내 두 화면이 같이 쓴다
• 모달 왼쪽 버튼 문구를 Figma(1133:50014)대로 수정 → 닫기로 바로잡았다

5. 문서 (f51baa8) — wds-component-usage.md 홈 절에 연결 표와 규칙 추가

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

• 아직 연결하지 않은 곳: 헤더 설정·알림, 학생회비 미납 줄의 납부하기, 아카이빙 배너 — 각 화면 PR 머지 후 이 브랜치에 추가
• 목데이터끼리 내용이 다르다: 배너 문구와 열리는 공지, 홈 신청한 행사 이름과 열리는 신청내역 행사명이 다르다. 홈 Figma 문구를 유지하려고 id만 맞췄다
• 행사 목록 모집중 필터의 빈 상태는 모집중 목데이터를 빼야 볼 수 있다

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

• 빌릴게 목록: 탭이 주소로 바뀐다. 반납 탭 빈 상태의 "대여하러 가기"도 대여 탭 주소로 간다
• 빌릴게 반납 모달: 버튼 문구 수정 → 닫기(동작은 그대로 모달만 닫음)
• 행사 목록: 모집중 행사 카드가 하나 생긴다
• 사물함 신청 완료: 신청내역 보기가 준비 중 화면 대신 사물함 배정 상태로 간다

🔀 Edge Case & 실패 시나리오

• 공지가 없을 때의 기본 배너는 열 공지가 없어 누를 수 없다
• 공지 배너 맨 끝의 복제 카드(무한 넘김용)는 키보드 포커스를 받지 않는다
• 학생회비 미납이면 그 줄은 아직 누를 수 없다(송금 화면 대기)

📋 검토한 대안과 선택 이유

• 탭: 쿼리 파라미터·navigate state vs 경로 — 주소가 깔끔하면서 새로고침·다른 화면에서의 진입에도 탭이 유지되는 경로(복수형)로 했다
• 신청 카드 선택 영역 — 버튼 안에 버튼을 둘 수 없어 카드 전체 대신 배지·제목 영역만 누를 수 있게 했다(행사 목록 카드와 같은 방식)
• 반납 신청: 빌릴게로 이동 vs 홈에서 바로 — 홈에서 바로 처리하기로 해서 모달 흐름을 훅으로 꺼냈다

💬 리뷰 포인트

• [c] 빌릴게·행사 탭 경로(/bililge/returns, /events/applications) 이름
• [c] 반납 모달 닫기 문구 변경
• [a] 목데이터 간 문구 차이는 API 연동 때 해소

[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: 01187a6b-1f65-4791-84cd-7d9f0a21f5a2

---

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