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

[sangrae2325]

#️⃣연관된 이슈

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

📚 스택 PR입니다 — base가 #116(feat/#115-events-applications) 브랜치예요. Files changed에는 이 PR 변경만 보입니다.
머지 순서: #113 → #116 → #117. 앞 PR이 머지되면 base가 자동으로 바뀌고, 그때 main을 한 번 merge해 정리한 뒤 머지합니다.
학생회비 송금(#107)이 머지되면 미납 줄의 납부하기 연결을 이 브랜치에 추가합니다.

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

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

❓ 왜 해결해야 하나요?

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

실제 동작 영상

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

⭐ 어떻게 해결했나요?

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

• 대여 /bililge, 반납 /bililge/returns. 행사 목록([Feat/#115] 행사 신청내역 화면 구현 (목록·빈 상태·상세·신청취소) #116)과 같은 방식으로 라우터가 tab prop("rent"/"return")을 넘기고, 탭 전환은 replace (31716a2, c997300)
• 하단 탭은 반납 라우트 handle.bottomNavValue로 "빌릴게"가 선택된다 — 화면·공용 레이아웃이 주소를 비교하지 않아 끝에 /가 붙어도 맞다

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

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

3. 홈 이동 연결 (86b90fc)

홈에서 누르는 곳	이동
공지 배너	공지 상세 /notices/:noticeId
신청 카드(행사)	카드 → 행사 상세, 신청하기 → 행사 신청
신청 카드(사물함)	카드·신청하기 둘 다 → 사물함 신청 /lockers/apply
대여 N건 더보기 / 빈 상태 대여하러 가기	/bililge/returns / /bililge
신청한 행사 행 / N건 더보기 / 빈 상태 행사 둘러보기	/events/applications/:applicationId / /events/applications / /events
내 정보 학생회비 납부 여부·열린피드백·사물함	FEE_PAYMENTS_PATH·MY_FEEDBACKS_PATH·LOCKER_ASSIGNMENT_PATH (d2ae095)
아카이빙 배너	아카이빙 목록 ARCHIVES_PATH — 배너 전체가 버튼 (53d3038)
헤더 알림	알림 목록 — #108이 main에서 연결(merge로 들어옴)

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

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

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

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

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

• 아직 연결하지 않은 곳: 학생회비 미납 줄의 납부하기([Feat/#105] 학생회비 계좌 송금 플로우 화면 구현 #107 머지 후 이 브랜치에 추가). 헤더 설정은 설정 PR([Feat/#96] 설정 화면과 전화번호 변경·회원 탈퇴 화면 구현 #97)이 직접 연결한다
• 목데이터끼리 내용이 다르다: 배너 문구와 열리는 공지, 홈 신청한 행사 이름과 열리는 신청내역 행사명이 다르다. 홈 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: 2226cdf7-1bd7-4377-b73b-0024fbbbd71d

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

[xeoxxn]

본문의 "아직 연결하지 않은 곳" 목록 중 헤더 설정은 #97에서 연결했습니다. 이 브랜치에서 또 하지 않으셔도 됩니다.

헤더 설정 버튼

#98이 Figma대로 아이콘 3개(설정·검색·알림)를 그리면서 설정 버튼에만 onClick이 비어 있었는데, #97이 설정 화면을 만들면서 그 한 줄을 채웠습니다.

<TopNavigationButton
  aria-label="설정"
  onClick={() => navigate(SETTINGS_PATHS.root, { viewTransition: true })}
  variant="icon"
>
  <IconSetting />
</TopNavigationButton>

• 경로는 src/features/settings/constants/settings.ts의 SETTINGS_PATHS에 모아뒀습니다(알림의 NOTIFICATIONS_PATH와 같은 방식). 설정 하위 화면 경로가 필요하시면 여기서 가져다 쓰시면 됩니다.
• 화면을 쌓는 이동이라 viewTransition을 켰습니다. 이 PR의 push() 헬퍼와 같은 동작이라, 머지 뒤에 push(SETTINGS_PATHS.root)로 바꾸셔도 결과는 같습니다.

충돌 걱정은 안 하셔도 될 것 같습니다. 이 브랜치의 HomeScreen.tsx 변경은 push 헬퍼 추가와 본문 섹션 쪽이고 헤더 아이콘 줄은 건드리지 않아서, #97의 변경(설정 버튼 한 줄)과 hunk가 겹치지 않습니다.

기다리신다고 적어두신 PR들 상태

본문에 "설정(#97)·알림(#108)·학생회비 송금(#107)·아카이빙(#40)이 머지되면 그 연결도 이 브랜치에 추가한 뒤 머지합니다"라고 하셨는데, 그중 둘은 이미 main에 있습니다.

PR	상태	홈에서 할 일
#108 알림	머지됨	헤더 알림은 #108이 직접 연결함(NOTIFICATIONS_PATH + 안 읽은 알림 점) — 할 일 없음
#40 아카이빙	머지됨	아카이빙 배너 연결 가능
#97 설정	리뷰 중	헤더 설정은 #97이 연결함 — 할 일 없음
#107 학생회비 송금	리뷰 중	학생회비 미납 줄의 "납부하기"만 남음

정리하면 이 브랜치에서 더 붙일 건 아카이빙 배너와 학생회비 납부하기 둘로 보입니다.

참고 — #97에서 바뀐 것 하나 더

알림 설정 화면이 #108과 중복이라(Figma가 설정 섹션과 알림 섹션에 같은 화면을 복제해 둔 탓입니다) #97 쪽 복제본을 지우고 /notifications/settings 한 벌로 합쳤습니다. 혹시 홈이나 다른 데서 /settings/notifications를 쓰실 일이 있으면 그 경로는 없어졌습니다.