+
{children}
diff --git a/src/features/lockers/LockersApplyScreen.tsx b/src/features/lockers/LockersApplyScreen.tsx
new file mode 100644
index 0000000..5147c13
--- /dev/null
+++ b/src/features/lockers/LockersApplyScreen.tsx
@@ -0,0 +1,45 @@
+import { Button, Typography } from "@wanteddev/wds";
+import { useState } from "react";
+
+import LockersNoticeSheet from "@/features/lockers/components/LockersNoticeSheet";
+
+// 임시 확인용 화면 — 시트를 띄울 진입점이 아직 없어서 둔 자리다.
+// 실제 진입점(홈 "사물함 상태" 퀵링크 `1737:218284` 또는 공지 상세 CTA)이 붙으면
+// 이 화면과 /lockers/apply 라우트는 지운다. docs/plans/#68-lockers-notice-sheet.md 참고.
+function LockersApplyScreen() {
+ const [isOpen, setIsOpen] = useState(false);
+ // 시트는 닫아도 380ms 동안 미끄러져 내려간다. 기간 여부를 open과 같은 state에서 파생시키면
+ // 그 사이 버튼이 비활성 문구로 바뀌는 게 보이므로, 닫을 때는 open만 끄고 이 값은 유지한다.
+ const [isApplyPeriod, setIsApplyPeriod] = useState(true);
+
+ const openSheet = (applyPeriod: boolean) => {
+ setIsApplyPeriod(applyPeriod);
+ setIsOpen(true);
+ };
+
+ return (
+
+ {/* pb-7: Figma Sheet Body의 Notice Section ↔ Action Area 간격(28px).
+ BottomSheet는 자식 사이에 간격을 두지 않아서 여기서 낸다. */}
+
+ {/* Figma Main Action은 56px인데 ActionAreaButton은 48px이다. 높이를 고정하면 비활성
+ 문구가 길어져 줄바꿈될 때 잘려서 padding으로 맞춘다(wds-component-usage.md 참고). */}
+
+ {isApplyPeriod ? "확인했어요" : "신청 기간이 아니에요"}
+
+
+
+ );
+}
+
+export default LockersNoticeSheet;
diff --git a/src/features/lockers/constants/lockersNotice.ts b/src/features/lockers/constants/lockersNotice.ts
new file mode 100644
index 0000000..3dd7046
--- /dev/null
+++ b/src/features/lockers/constants/lockersNotice.ts
@@ -0,0 +1,31 @@
+import applyPeriodIcon from "@/assets/icons/lockers/apply-period.svg";
+import onePerPersonIcon from "@/assets/icons/lockers/one-per-person.svg";
+import usagePeriodIcon from "@/assets/icons/lockers/usage-period.svg";
+
+export interface LockersNoticeItem {
+ icon: string;
+ label: string;
+ value: string;
+}
+
+// Figma: 사물함 신청 전 유의사항 Notice Items (nodeId 1737:218314)의 내용을 그대로 옮긴 목데이터.
+// 이용 기간·신청 기간 API가 붙으면 그 값으로 바뀔 자리다.
+// 위 일러스트 3개는 Figma export가 캔버스·섹션 배경까지 같이 구워 넣어서(42px 회색 네모)
+// 아이콘 그룹만 남기고 걷어낸 SVG다 — 다시 받으면 같은 정리가 필요하다.
+export const LOCKERS_NOTICE_ITEMS: LockersNoticeItem[] = [
+ {
+ icon: usagePeriodIcon,
+ label: "사물함 이용 기간",
+ value: "2026.09.01(화) - 2026.12.15(금)",
+ },
+ {
+ icon: onePerPersonIcon,
+ label: "중복 신청 불가",
+ value: "1인당 1개의 사물함만 신청 가능해요.",
+ },
+ {
+ icon: applyPeriodIcon,
+ label: "신청기간",
+ value: "2026.09.01(화) - 2026.12.15(금)",
+ },
+];
+
+ 사물함 유의사항 시트 확인용 임시 화면
+
+
+
+
+ setIsOpen(false)}
+ // 확인 후 이동할 사물함 구역 선택 화면(1737:218452)은 다음 이슈라 지금은 닫기만 한다
+ onConfirm={() => setIsOpen(false)}
+ open={isOpen}
+ />
+
+ );
+}
+
+export default LockersApplyScreen;
diff --git a/src/features/lockers/components/LockersNoticeSheet.tsx b/src/features/lockers/components/LockersNoticeSheet.tsx
new file mode 100644
index 0000000..ba1e3ba
--- /dev/null
+++ b/src/features/lockers/components/LockersNoticeSheet.tsx
@@ -0,0 +1,83 @@
+import { ActionArea, ActionAreaButton, Typography } from "@wanteddev/wds";
+
+import BottomSheet from "@/components/ui/BottomSheet";
+import { LOCKERS_NOTICE_ITEMS } from "@/features/lockers/constants/lockersNotice";
+
+interface LockersNoticeSheetProps {
+ open: boolean;
+ /** 지금이 사물함 신청 기간인지. 아니면 하단 버튼이 잠기고 문구가 바뀐다. */
+ isApplyPeriod: boolean;
+ onClose: () => void;
+ onConfirm: () => void;
+}
+
+// Figma: 사물함 신청 전 유의사항 Sheet Body (nodeId 1737:218310)
+//
+// 신청 기간이 아닐 때의 모습은 Figma에 없다 — 유의사항 3줄은 그대로 두고 하단 버튼만 잠가
+// "신청 기간이 아니에요"를 보여주기로 정했다(docs/plans/#68-lockers-notice-sheet.md 참고).
+function LockersNoticeSheet({
+ open,
+ isApplyPeriod,
+ onClose,
+ onConfirm,
+}: LockersNoticeSheetProps) {
+ return (
+
+
+ {/* Figma가 두 줄로 끊어둔 자리라 줄바꿈을 폭에 맡기지 않고 그대로 옮긴다 */}
+ 신청 전 아래 내용을
+
+ 확인해 주세요 +
+
+
+
+ + 확인해 주세요 +
+ {LOCKERS_NOTICE_ITEMS.map((item) => (
+
+
+ 
+
+ ))}
+
+
+ {item.label}
+
+
+ {item.value}
+
+
+