[Feat/#13] 라우팅 도입 및 빌릴게 화면 라우트 연결

[xeoxxn]

#️⃣연관된 이슈

• Closes 라우팅 도입 및 빌릴게 화면 라우트 연결 #13

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

라우팅이 없어 App.tsx가 화면 하나만 직접 렌더링하고 있었다. 또 #11에서 공통 레이아웃으로 범위를 좁히며 빠진 빌릴게 대여 목록 화면을 다시 볼 수 있게 연결해야 했다.

❓ 왜 해결해야 하나요?

화면이 여러 개 생기기 시작하면 URL로 화면을 구분하고 이동할 수 있어야 한다. 이번에 react-router-dom으로 기반을 마련하고, 그 위에 이전에 만들어뒀던 빌릴게 화면을 실제로 연결해서 확인한다.

⭐ 어떻게 해결했나요?

• react-router-dom 설치, main.tsx에서 BrowserRouter로 감쌈
• App.tsx에 Routes 추가: / → HomeScreen, /rental → RentalListScreen
• #11에서 빼뒀던 RentalItemCard/RentalCategoryFilter/물품 목데이터/아이콘 asset을 git 히스토리에서 복원
• RentalListScreen이 자체 375x812/BottomNav 래핑 대신 ScreenLayout(공통 레이아웃(375x812) + Bottom Nav 뼈대 구현 #11)을 쓰도록 리팩터링 — header엔 Top Navigation, children엔 필터+목록만 남김
• HomeScreen 신설(placeholder, /rental로 가는 링크 포함)
• (추가) TEAM-BEAT/BEAT-Client의 Layout 컴포넌트 + react-router 패턴을 참고해서, Bottom Nav 활성 탭을 화면마다 useState로 들고 있던 걸 없애고 ScreenLayout이 useLocation()으로 현재 경로에서 직접 계산하도록 리팩터링했다. 탭 클릭도 ScreenLayout 안에서 useNavigate()로 바로 처리한다 — URL이 유일한 진실의 원천이 되면서 각 화면(HomeScreen, RentalListScreen)에 중복돼 있던 state·핸들러가 전부 사라졌다.

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

• 행사/게시판 탭은 화면이 없어 Bottom Nav에서 눌러도 해당 경로로만 이동하고(화면이 없어 빈 화면) 활성 표시만 바뀐다.
• 데이터 로더 등 라우터의 고급 기능(createBrowserRouter data router, nested route + Outlet)은 아직 안 씀 — 화면이 더 늘어나고 화면마다 다른 헤더까지 라우터 레벨에서 공유하고 싶어지면(예: BEAT-Client의 useHeader 전역 상태 패턴) 그때 검토.

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

App.tsx의 렌더링 방식이 직접 렌더링 → 라우트 기반으로 바뀐다. ScreenLayout의 public prop에서 bottomNavValue/onBottomNavValueChange가 빠졌다(breaking change지만 사용처가 이 PR 안의 두 화면뿐이라 영향 없음).

🔀 Edge Case & 실패 시나리오

• 존재하지 않는 경로 접근 시 404 처리가 없음 — 화면이 더 생기면 catch-all 라우트 추가 필요.
• /rental을 새로고침하거나 URL로 직접 들어와도 Bottom Nav 활성 탭이 정확히 "빌릴게"로 표시되는지 확인함(라우트 기반이라 당연히 되지만, 실제 브라우저에서 검증했다).

📋 검토한 대안과 선택 이유

• react-router의 data router(createBrowserRouter) 방식도 검토했으나, 화면이 2개뿐이고 로더/액션이 필요 없는 단계라 단순한 선언형 <Routes>로 시작했다.
• Bottom Nav 상태를 별도 훅(useBottomNavRouting 같은)으로 뺄지도 검토했으나, BEAT-Client 사례를 보고 애초에 상태 자체가 필요 없고(URL에서 파생 가능) ScreenLayout 컴포넌트 안에서 바로 처리하는 게 더 단순하다고 판단했다.

💬 리뷰 포인트

• [c] Bottom Nav 활성 탭을 ScreenLayout 안에서 라우트로부터 파생시키는 방식이 화면이 늘어나도 괜찮을지

[jjunh33]

react-router-dom 도입과 /, /rental 라우트 연결 구조 확인했습니다. 현재 화면 수가 적어 선언형 Routes로 시작한 방향도 확인했습니다.

[tnals0924]

지금 복지물품 이미지 파일이 웹에 들어가 있는데 이건 지금 운영 중인 빌릴게 구조처럼 관리자 페이지에서 이미지 파일을 등록하는 식으로 진행할 거라 서버에서 이미지 파일을 내려줄 예정입니다.
추후에 API 연동할 때 삭제 부탁드려요!