+
+
+
+
+
+ }
+ variant="display"
+ >
+ 빌릴게
+
+
+
+
+ {/* background 기본값(true)은 iOS 반투명 스타일이라 뒤 배경이 비쳐 보인다. Figma는 별도 배경 없이 화면 배경을 그대로 쓴다. */}
+
+
+ 대여
+ 반납
+
+
+ }
+ trailingContent={
+ <>
+
+
+
+
+
+
+ {tab === "rent" ? (
+
+ {RENTAL_ITEMS.map((item) => (
+
+ ) : (
+
+ 반납 화면은 아직 준비 중이에요
+
+ )}
+
+
+
+ );
+}
+
+export default RentalListScreen;
diff --git a/src/features/rental/components/RentalCategoryFilter.tsx b/src/features/rental/components/RentalCategoryFilter.tsx
new file mode 100644
index 0000000..d34d04b
--- /dev/null
+++ b/src/features/rental/components/RentalCategoryFilter.tsx
@@ -0,0 +1,40 @@
+const RENTAL_CATEGORIES = [
+ "전체",
+ "전자기기",
+ "생활잡화",
+ "상비약",
+ "위생용품",
+];
+
+interface RentalCategoryFilterProps {
+ value: string;
+ onChange: (category: string) => void;
+}
+
+// Figma: 빌릴게 Filter Row (nodeId 1243:73337) — WDS Chip이 아니라 Stream 로컬 커스텀 칩.
+// 카테고리·물품 매핑 API가 아직 없어 필터링 없이 선택 상태만 표시한다.
+function RentalCategoryFilter({ value, onChange }: RentalCategoryFilterProps) {
+ return (
+
+ {RENTAL_CATEGORIES.map((category) => {
+ const active = category === value;
+ return (
+
+ );
+ })}
+
+ );
+}
+
+export default RentalCategoryFilter;
diff --git a/src/features/rental/components/RentalItemCard.tsx b/src/features/rental/components/RentalItemCard.tsx
new file mode 100644
index 0000000..3e8a65b
--- /dev/null
+++ b/src/features/rental/components/RentalItemCard.tsx
@@ -0,0 +1,90 @@
+// Figma: Rental Item Card (nodeId 1041:61407)
+import { Button } from "@wanteddev/wds";
+
+import circleMinusFill from "@/assets/icons/circle-minus-fill.svg";
+import circlePlusFill from "@/assets/icons/circle-plus-fill.svg";
+
+interface RentalItemCardProps {
+ icon: string;
+ itemName: string;
+ quantity: number;
+ trailingControl?: "button" | "stepper";
+ onRentRequest?: () => void;
+ stepperValue?: number;
+ onStepperDecrease?: () => void;
+ onStepperIncrease?: () => void;
+}
+
+// "대여 신청" 버튼은 Figma상 `Menu/Resource/Action Area/Trailing Content/Button`(WDS) 인스턴스지만,
+// 그 이름과 1:1 대응하는 코드 export는 없다 — 대신 WDS `Button`(size="small")이 padding(7px/14px)·
+// radius(8px)·타이포(label2)까지 정확히 일치해서 그걸 쓰고, Button 공개 variant엔 없는 "연한 파랑 배경
+// + 파랑 텍스트" 조합만 sx로 보정했다. 스테퍼 +/- 아이콘은 여전히 WDS 미확정이라 하드코딩 — docs/plans 참고.
+function RentalItemCard({
+ icon,
+ itemName,
+ quantity,
+ trailingControl = "button",
+ onRentRequest,
+ stepperValue = 1,
+ onStepperDecrease,
+ onStepperIncrease,
+}: RentalItemCardProps) {
+ const isStepper = trailingControl === "stepper";
+
+ return (
+
+
+ );
+}
+
+export default RentalItemCard;
diff --git a/src/features/rental/constants/rentalItems.ts b/src/features/rental/constants/rentalItems.ts
new file mode 100644
index 0000000..c3680f9
--- /dev/null
+++ b/src/features/rental/constants/rentalItems.ts
@@ -0,0 +1,75 @@
+import eightPinCharger from "@/assets/icons/rental-items/8pin-charger.svg";
+import alcoholSwab from "@/assets/icons/rental-items/alcohol-swab.svg";
+import bandAid from "@/assets/icons/rental-items/band-aid.svg";
+import curlingIron from "@/assets/icons/rental-items/curling-iron.svg";
+import eyeDrops from "@/assets/icons/rental-items/eye-drops.svg";
+import hairDryer from "@/assets/icons/rental-items/hair-dryer.svg";
+import laptopCharger from "@/assets/icons/rental-items/laptop-charger.svg";
+import mask from "@/assets/icons/rental-items/mask.svg";
+import ointment from "@/assets/icons/rental-items/ointment.svg";
+import painReliefPatch from "@/assets/icons/rental-items/pain-relief-patch.svg";
+import pill from "@/assets/icons/rental-items/pill.svg";
+import powerBank from "@/assets/icons/rental-items/power-bank.svg";
+import sanitaryPad from "@/assets/icons/rental-items/sanitary-pad.svg";
+import umbrella from "@/assets/icons/rental-items/umbrella.svg";
+import usbCCharger from "@/assets/icons/rental-items/usb-c-charger.svg";
+
+export interface RentalItem {
+ id: string;
+ name: string;
+ quantity: number;
+ icon: string;
+}
+
+// Figma: 빌릴게 Item Grid (nodeId 1243:73343) 순서·물품명·수량을 그대로 옮긴 목데이터 — 실 API 연동 전까지 사용
+export const RENTAL_ITEMS: RentalItem[] = [
+ { icon: curlingIron, id: "curling-iron", name: "고데기", quantity: 28 },
+ {
+ icon: laptopCharger,
+ id: "laptop-charger",
+ name: "노트북 충전기(C타입)",
+ quantity: 28,
+ },
+ { icon: hairDryer, id: "hair-dryer", name: "드라이기", quantity: 28 },
+ { icon: mask, id: "mask", name: "마스크", quantity: 28 },
+ { icon: bandAid, id: "band-aid", name: "밴드", quantity: 28 },
+ { icon: powerBank, id: "power-bank", name: "보조배터리", quantity: 28 },
+ {
+ icon: sanitaryPad,
+ id: "sanitary-pad-large",
+ name: "생리대(대형)",
+ quantity: 28,
+ },
+ {
+ icon: sanitaryPad,
+ id: "sanitary-pad-small",
+ name: "생리대(소형)",
+ quantity: 28,
+ },
+ { icon: alcoholSwab, id: "alcohol-swab", name: "알콜스왑", quantity: 28 },
+ { icon: umbrella, id: "umbrella", name: "우산", quantity: 28 },
+ { icon: pill, id: "stomach-medicine", name: "위장약", quantity: 28 },
+ { icon: pill, id: "easyen-6", name: "이지엔6", quantity: 28 },
+ { icon: eyeDrops, id: "eye-drops", name: "인공눈물", quantity: 28 },
+ { icon: pill, id: "cold-medicine", name: "종합감기약", quantity: 28 },
+ {
+ icon: usbCCharger,
+ id: "usb-c-cable",
+ name: "케이블(C to C)",
+ quantity: 28,
+ },
+ { icon: pill, id: "tylenol", name: "타이레놀", quantity: 28 },
+ {
+ icon: painReliefPatch,
+ id: "pain-relief-patch",
+ name: "파스",
+ quantity: 28,
+ },
+ { icon: ointment, id: "ointment", name: "후시딘", quantity: 28 },
+ {
+ icon: eightPinCharger,
+ id: "8pin-charger",
+ name: "8핀 충전기",
+ quantity: 28,
+ },
+];
diff --git a/src/main.tsx b/src/main.tsx
index cd7e812..3a3dd4d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,16 @@
import { ThemeProvider } from "@wanteddev/wds";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
import App from "./app/App.tsx";
import "./index.css";
createRoot(document.getElementById("root")!).render(
+
+
+ 
+
+
+ {!isStepper && (
+
+ )}
+
+ {isStepper && (
+
+
+ + {itemName} +
+수량 {quantity}
+
+
+
+ {stepperValue}
+
+
+
+ )}
+
-
-
- }
- onBottomNavValueChange={setBottomNavValue}
- >
- STREAM
-
- 화면 콘텐츠는 각 기능에서 채운다
-
-
+ STREAM
+ + } + onBottomNavValueChange={handleBottomNavValueChange} + > +
+
+ + 홈 화면은 아직 준비 중이에요 +
+ + 빌릴게 화면 보기 + +
-
- {/* background 기본값(true)은 iOS 반투명 스타일이라 뒤 배경이 비쳐 보인다. Figma는 별도 배경 없이 화면 배경을 그대로 쓴다. */}
+
빌릴게
+ }
+ onBottomNavValueChange={handleBottomNavValueChange}
+ >
+
);
}
+
-
-
+ ) : (
+
-
-
-
+ {RENTAL_ITEMS.map((item) => (
+
-
- {tab === "rent" ? (
-
- {RENTAL_ITEMS.map((item) => (
-
- ) : (
-
- 반납 화면은 아직 준비 중이에요
-
- )}
-
-
-
+ 반납 화면은 아직 준비 중이에요
+
+ )}
+