[Feat/#21] 빌릴게 페이지 목록 화면 구현 - #22
Open
xeoxxn wants to merge 18 commits into
Open
Conversation
TEAM-BEAT/BEAT-Client의 Layout 컴포넌트 + react-router 패턴을 참고했다. ScreenLayout이 useLocation으로 현재 경로에서 활성 탭을 계산하고 useNavigate로 직접 이동시켜서, 화면마다 중복되던 bottomNavValue state와 handleBottomNavValueChange 핸들러를 제거한다. URL이 유일한 진실의 원천이 된다
화면이 <ScreenLayout>을 직접 감싸는 방식은 새 화면을 추가할 때 감싸는 걸 깜빡하면 레이아웃이 화면마다 들쭉날쭉해질 수 있었다. App.tsx에서 ScreenLayout을 부모 route로 두고 화면들을 자식 route(Outlet)로 넣어서, 그 밑 화면은 구조적으로 무조건 같은 뼈대(375x812+Bottom Nav)를 받도록 바꾼다. 화면마다 다른 헤더(Top Navigation 등)는 useScreenHeader 훅으로 ScreenLayout에 등록한다(Context 기반, 새 의존성 없음)
Figma에서 행사·빌릴게 화면을 대조해보니 Top Navigation의 타이틀+검색/알림 아이콘 부분은 화면마다 완전히 동일한 공통 패턴이었다(세그먼트 토글 같은 Tool 슬롯은 화면마다 값·동작이 달라 제외). ScreenHeader로 분리해 재사용하고, HomeScreen도 이걸 쓰도록 정리한다
대여/반납 세그먼트 토글은 화면마다 다른 값/동작을 가지는 페이지 전용 요소라 useScreenHeader가 아니라 RentalListScreen 본문에서 직접 그리도록 옮긴다. 토글+카테고리 필터는 고정하고 물품 목록만 스크롤되도록 화면 내부 레이아웃을 분리했다(ScreenLayout의 Outlet 래퍼는 overflow-hidden으로 바꿔 스크롤 처리를 각 화면에 위임). 무한 스크롤 목록이라 스크롤바는 scrollbar-hidden 유틸리티로 숨긴다
백엔드 엔드포인트 네이밍과 프론트 도메인 용어(라우트 경로, features 폴더명 등)를 통일하기 위한 용어 사전을 만들고, coding-style.md 네이밍 규칙에서 참조하게 한다
용어 사전(docs/conventions/terminology.md)에 맞춰 '빌릴게' 도메인의 rental 네이밍을 bililge로 전부 바꾼다: features/rental → features/bililge, 컴포넌트/타입/상수명(RentalXxx → BililgeXxx), 라우트 경로(/rental → /bililge), BottomNavValue의 'rental' → 'bililge', asset 폴더/파일명까지. Figma 노드 실제 이름을 그대로 옮긴 주석(예: 'Rental Item Card')은 용어 사전 규칙대로 그대로 둔다
github-actions
Bot
requested review from
jjunh33,
leegain1,
sangrae2325 and
tnals0924
September 9, 2026 08:04
Collaborator
|
동작하는 영상을 같이 올려주시면 리뷰어 입장에서 용이할것 같습니다 ! |
지금까지 text-xs/text-[Npx] 등 Tailwind 값을 화면마다 손으로 맞춰왔는데, Bottom Nav 탭 라벨이 실제 Figma 값(11px)과 다른 12px로 굳어있던 걸 계기로 @wanteddev/wds의 Typography 컴포넌트(Figma 타입 스케일과 1:1 대응)로 교체했다.
leegain1
approved these changes
Sep 10, 2026
| <div className="relative flex h-[812px] w-[375px] flex-col overflow-hidden bg-background-alternative"> | ||
| <div className="shrink-0">{header}</div> | ||
| {/* 스크롤 처리는 각 화면이 스스로 결정한다(예: 상단 토글/필터는 고정하고 목록만 스크롤) */} | ||
| <div className="flex-1 overflow-hidden"> |
Collaborator
There was a problem hiding this comment.
현재 부모가 overflow-hidden이고 자식 영역 내부에서 스크롤을 만들어야하는 방향은 좋습니다! 하지만 h-full 등으로 자식 높이가 명확하게 잡혀 있어야 overflow-y-auto가 정상 동작하는 것으로 알고 있습니다.
그래서 각 화면에서 직접 적용하기보다 공통 레이아웃에서
<div className="flex-1 overflow-hidden">
<div className="h-full flex flex-col">
{Outlet /}
</div>
</div>
이런식으로 기본으로 적용해주는 게 더 안전할 것 같습니다!
sangrae2325
reviewed
Sep 11, 2026
| )} | ||
|
|
||
| <ActionArea> | ||
| <ActionAreaButton onClick={onClose}>대여 신청하기</ActionAreaButton> |
Collaborator
There was a problem hiding this comment.
바텀시트 버튼 크기가 디자인(56px)과 다른것 같은데 확인 부탁드립니다!
leegain1
reviewed
Sep 12, 2026
| @@ -0,0 +1,35 @@ | |||
| import { TopNavigation, TopNavigationButton } from "@wanteddev/wds"; | |||
Collaborator
There was a problem hiding this comment.
① 현재 WDS TopNavigation의 Navigation은 64px인데 피그마는 56px,
② 현재 필터 칩 높이가 35px인데 피그마는 32px 으로 불일치하는 부분이 있습니다
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#️⃣연관된 이슈
🎯 해결하려는 문제가 무엇인가요?
빌릴게 목록 화면을 라우터 기반 공통 레이아웃 위에서 실제로 조립하고, 도메인 용어 사전 기준으로
rental→bililge네이밍을 통일한다.❓ 왜 해결해야 하나요?
useScreenHeader훅으로 구조적으로 불가능하게 만들었다.rental이라는 이름이 백엔드 엔드포인트(bililge)와 달라서 코드 읽을 때 매핑 비용이 있었다.⭐ 어떻게 해결했나요?
ScreenLayout을App.tsx의 부모 라우트로 두고, 화면들은Outlet으로 렌더링되는 자식 라우트로 구성. Bottom Nav 활성 탭은 화면 state가 아니라 현재 라우트(useLocation)에서 파생.ScreenHeaderContext+useScreenHeader훅으로 등록 — 훅은 JSX를 반환하지 않고 마운트된 헤더 노드를 레이아웃에 등록만 한다.BililgeListScreen에서 대여/반납 토글 + 카테고리 필터는shrink-0으로 고정하고, 물품 목록만flex-1 overflow-y-auto scrollbar-hidden으로 스크롤.docs/conventions/terminology.md기준으로src/features/rental/**, 관련 asset, 타입/컴포넌트명을 전부bililge로 리네이밍.🧩 이 PR의 한계 & 트레이드오프
docs/conventions/component-convention.md,wds-component-usage.md에 남아있는RentalItemCard등 예전 경로 참조는 이번 PR 범위에서 갱신하지 않았다 (별도 후속 작업 필요).⛓️ 기존 기능에 미치는 영향
홈 화면도
ScreenLayout하위로 이동해useScreenHeader를 쓰도록 같이 바뀌었다. 이후 새 화면(게시판 등)도 이 구조를 따라야 한다.🔀 Edge Case & 실패 시나리오
useScreenHeader는ScreenHeaderContext.Provider밖에서 호출되면 에러를 던진다 — 라우터 구조상 항상ScreenLayout하위에서만 화면이 렌더링되므로 실제로는 발생하지 않는다.📋 검토한 대안과 선택 이유
useLayout()훅(레이아웃 JSX를 훅이 직접 반환)은 hooks-return-JSX 안티패턴이라 채택하지 않았다. 대신 참고 레퍼런스(BEAT-Client)의 "레이아웃은 컴포넌트, 화면별 상태는 Context 훅" 패턴을 따랐다.💬 리뷰 포인트
[c]ScreenLayout의 스크롤 처리를 각 화면에 위임한 구조(overflow-hidden부모 + 화면이 직접overflow-y-auto결정)가 이후 화면들에도 잘 맞을지 확인 부탁드립니다.