-
+ {header}
- {children}
-
-
-
+
+ {header}
+ {/* 스크롤 처리는 각 화면이 스스로 결정한다(예: 상단 토글/필터는 고정하고 목록만 스크롤).
+ overflow-y-auto가 동작하려면 자식 높이가 명확해야 해서, 화면마다 h-full을 직접
+ 챙기지 않아도 되도록 여기서 기본으로 보장한다. */}
+
+
+
+
+
+ navigate(BOTTOM_NAV_PATHS[value])}
+ value={bottomNavValue}
+ />
+
+ {/* BottomSheet 포털 대상 — 헤더/본문/Bottom Nav보다 위(z-50)에 겹쳐서, 화면 하나가
+ 열어도 375×812 프레임 전체를 딤 처리할 수 있다. 시트가 닫혀있을 때는 빈 오버레이가
+ 클릭을 가로채지 않도록 pointer-events-none — BottomSheet가 열릴 때 자기 자신에만
+ pointer-events-auto를 되돌려준다. */}
+
+
+ {/* 대여/반납 토글 + 카테고리 필터는 화면마다 값·동작이 달라 헤더가 아니라 화면이 직접 그린다.
+ 목록만 스크롤되도록 여기는 고정(shrink-0)한다. */}
+ setRentalSheetOpen(false)}
+ open={rentalSheetOpen}
+ />
+
+ );
+}
+
+export default BililgeListScreen;
diff --git a/src/features/bililge/components/BililgeCategoryFilter.tsx b/src/features/bililge/components/BililgeCategoryFilter.tsx
new file mode 100644
index 0000000..774c542
--- /dev/null
+++ b/src/features/bililge/components/BililgeCategoryFilter.tsx
@@ -0,0 +1,55 @@
+import { Typography } from "@wanteddev/wds";
+
+const BILILGE_CATEGORIES = [
+ "전체",
+ "전자기기",
+ "생활잡화",
+ "상비약",
+ "위생용품",
+];
+
+interface BililgeCategoryFilterProps {
+ value: string;
+ onChange: (category: string) => void;
+}
+
+// Figma: 빌릴게 Filter Row (nodeId 1243:73337) — WDS Chip이 아니라 Stream 로컬 커스텀 칩.
+// 카테고리·물품 매핑 API가 아직 없어 필터링 없이 선택 상태만 표시한다.
+function BililgeCategoryFilter({
+ value,
+ onChange,
+}: BililgeCategoryFilterProps) {
+ return (
+
+
+ 대여
+ 반납
+
+
+
+
+
+
+
+ {tab === "rent" ? (
+
+
+
+ {BILILGE_ITEMS.map((item) => (
+ {
+ // 바텀시트를 여는 것(슬라이드 애니메이션)은 즉시 반영하고, 그 안의 휠
+ // 피커(특히 분 60개) 마운트처럼 무거운 작업은 startTransition으로 낮은
+ // 우선순위로 미뤄서 첫 프레임이 버벅이지 않게 한다 — 처음 열 때만 해당하고,
+ // rentalItem은 닫아도 null로 안 돌아가서 두 번째부터는 이 마운트 비용 자체가 없다.
+ setRentalSheetOpen(true);
+ startTransition(() => {
+ setRentalItem(item);
+ });
+ }}
+ quantity={item.quantity}
+ />
+ ))}
+
+ ) : (
+
+ 반납 화면은 아직 준비 중이에요
+
+ )}
+
+ {BILILGE_CATEGORIES.map((category) => {
+ const active = category === value;
+ return (
+
+ );
+ })}
+
+ );
+}
+
+export default BililgeCategoryFilter;
diff --git a/src/features/rental/components/RentalItemCard.tsx b/src/features/bililge/components/BililgeItemCard.tsx
similarity index 74%
rename from src/features/rental/components/RentalItemCard.tsx
rename to src/features/bililge/components/BililgeItemCard.tsx
index 3e8a65b..5462401 100644
--- a/src/features/rental/components/RentalItemCard.tsx
+++ b/src/features/bililge/components/BililgeItemCard.tsx
@@ -1,10 +1,10 @@
// Figma: Rental Item Card (nodeId 1041:61407)
-import { Button } from "@wanteddev/wds";
+import { Button, Typography } from "@wanteddev/wds";
import circleMinusFill from "@/assets/icons/circle-minus-fill.svg";
import circlePlusFill from "@/assets/icons/circle-plus-fill.svg";
-interface RentalItemCardProps {
+interface BililgeItemCardProps {
icon: string;
itemName: string;
quantity: number;
@@ -19,7 +19,7 @@ interface RentalItemCardProps {
// 그 이름과 1:1 대응하는 코드 export는 없다 — 대신 WDS `Button`(size="small")이 padding(7px/14px)·
// radius(8px)·타이포(label2)까지 정확히 일치해서 그걸 쓰고, Button 공개 variant엔 없는 "연한 파랑 배경
// + 파랑 텍스트" 조합만 sx로 보정했다. 스테퍼 +/- 아이콘은 여전히 WDS 미확정이라 하드코딩 — docs/plans 참고.
-function RentalItemCard({
+function BililgeItemCard({
icon,
itemName,
quantity,
@@ -28,7 +28,7 @@ function RentalItemCard({
stepperValue = 1,
onStepperDecrease,
onStepperIncrease,
-}: RentalItemCardProps) {
+}: BililgeItemCardProps) {
const isStepper = trailingControl === "stepper";
return (
@@ -39,10 +39,22 @@ function RentalItemCard({
-
+ 수량 {quantity}
+
+
수량 {quantity}
+ +