+ {}}
+ lockerLabel={selectedLocker?.lockerLabel ?? null}
+ />
+
+ setIsPhotoOpen(false)}
+ open={isPhotoOpen}
+ photoUrl={detail.photoUrl}
+ pins={LOCKERS_SECTION_PHOTO_PINS[detail.section] ?? []}
+ sectionName={detail.section}
+ />
+
+ );
+}
+
+export default LockersLockerSelectScreen;
diff --git a/src/features/lockers/LockersSectionSelectScreen.tsx b/src/features/lockers/LockersSectionSelectScreen.tsx
index 4fc4175..96c1262 100644
--- a/src/features/lockers/LockersSectionSelectScreen.tsx
+++ b/src/features/lockers/LockersSectionSelectScreen.tsx
@@ -13,7 +13,6 @@ import LockersFloorMap from "@/features/lockers/components/LockersFloorMap";
// Figma: 사물함 구역 선택 전 (nodeId 1737:218452), 선택완료 (1737:218489)
// 새로고침(Figma Icon/Normal/Reset)은 잔여 수량 API가 없어 지금은 페이지를 다시 읽는다.
-// 선택 후 이동할 화면은 아직 디자인이 없어서 지금은 아무것도 하지 않는다.
function LockersSectionSelectScreen() {
const [selectedSectionId, setSelectedSectionId] = useState
+ {/* Figma Minimap Section */}
+
+
+
+ {minimap ? (
+
+ {map}
+
+ ) : (
+
+ )}
+
+ {/* touch-pan: 두 손가락 동작을 페이지 확대 대신 이 영역의 확대로 받는다.
+ minWidth를 %가 아니라 px로 주는 이유: zoom을 걸면 %는 배율과 상관없이 화면 폭으로
+ 계산돼서, 화면보다 좁은 구역을 확대할 때 "fill" 상자가 비율대로 커지지 않는다 */}
+
+
+
+ {map}
+
+
- {children}
-
- );
-}
-
-function AreaLabel({ icon, label }: { icon?: string; label: string }) {
- return (
-
- {icon !== undefined && (
- 
- )}
-
- {label}
-
-
- );
-}
-
// Figma: 사물함 구역 선택 Floor Map (nodeId 1737:218457)
//
// 호실·화장실·계단·복도 위치는 실제 건물 구조라 데이터로 받지 않고 여기 레이아웃이 갖는다.
@@ -78,16 +43,14 @@ function LockersFloorMap({
return (
-
-
+
-
-
-
+
{/* 가운데 열은 복도다 — 카드가 없고 방향 표시만 있다.
@@ -121,9 +84,7 @@ function LockersFloorMap({
{LOCKERS_RIGHT_SECTIONS.map(renderCard)}
-
-
+
+ {block.children.map((child, index) => (
+
+ );
+ case "lockerGroup": {
+ const grid = (
+
+ {grid}
+
+ ) : (
+
+ {grid}
+
+ );
+ }
+ case "label":
+ return (
+
+
+ {block.text}
+
+
+ );
+ case "shelfLabel":
+ return (
+
+
+ );
+}
+
+export default LockersLayoutRenderer;
diff --git a/src/features/lockers/components/LockersLockerCell.tsx b/src/features/lockers/components/LockersLockerCell.tsx
new file mode 100644
index 0000000..a338328
--- /dev/null
+++ b/src/features/lockers/components/LockersLockerCell.tsx
@@ -0,0 +1,82 @@
+import { Typography } from "@wanteddev/wds";
+
+import lockerUnavailableIcon from "@/assets/icons/lockers/locker-unavailable.svg";
+import type { LockersSectionLocker } from "@/features/lockers/constants/lockersSectionDetails";
+
+interface LockersLockerCellProps {
+ locker: LockersSectionLocker;
+ isSelected: boolean;
+ onSelect: (lockerNumber: number) => void;
+}
+
+// Figma: Locker Cell (nodeId 2159:110833 외) — Stream 로컬. 28px 정사각형, Orange/95 배경에
+// 번호만 Caption 2/Regular로 가운데 둔다.
+//
+// 선택 불가 칸은 Figma 범례(2159:110819)와 같은 그림이다 — 회색 바탕에 대각선. 칸 번호는 Figma
+// 미니맵의 선택 불가 칸(2159:109565)처럼 지운다. 범례 SVG는 `preserveAspectRatio="none"`이라
+// 28px로 늘려도 모서리가 4px로 맞는다.
+//
+// 선택된 칸은 Figma "사물함 선택 시"(2159:113315)대로 Primary/Normal 배경에 번호를
+// Background/Normal/Normal(흰색) SemiBold로 바꾼다.
+//
+// 내 사물함은 Figma에 상태가 없어서 임시로 초록 테두리를 둔다(이미 신청한 칸이라 고를 수 없다).
+function LockersLockerCell({
+ locker,
+ isSelected,
+ onSelect,
+}: LockersLockerCellProps) {
+ if (locker.isMine) {
+ return (
+
+
+ {locker.lockerNumber}
+
+
+ );
+ }
+
+ if (!locker.isAvailable) {
+ return (
+
+ {rows.flatMap((row, rowIndex) =>
+ row.map((lockerNumber, columnIndex) => {
+ const locker =
+ lockerNumber === null ? undefined : lockers.get(lockerNumber);
+
+ if (locker === undefined) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+export default LockersLockerGrid;
diff --git a/src/features/lockers/components/LockersLockerLegend.tsx b/src/features/lockers/components/LockersLockerLegend.tsx
new file mode 100644
index 0000000..9824c9b
--- /dev/null
+++ b/src/features/lockers/components/LockersLockerLegend.tsx
@@ -0,0 +1,41 @@
+import { Typography } from "@wanteddev/wds";
+import type { ReactNode } from "react";
+
+import lockerUnavailableIcon from "@/assets/icons/lockers/locker-unavailable.svg";
+
+function LegendItem({ icon, label }: { icon: ReactNode; label: string }) {
+ return (
+
+ {icon}
+
+ {label}
+
+
+ );
+}
+
+// Figma: Legend (nodeId 2159:110814) — Stream 로컬. 칸 색이 무엇을 뜻하는지 알려준다.
+function LockersLockerLegend() {
+ return (
+
+
+ );
+}
+
+export default LockersLockerLegend;
diff --git a/src/features/lockers/components/LockersLockerMinimap.tsx b/src/features/lockers/components/LockersLockerMinimap.tsx
new file mode 100644
index 0000000..fc63bc7
--- /dev/null
+++ b/src/features/lockers/components/LockersLockerMinimap.tsx
@@ -0,0 +1,130 @@
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
+
+/** 칸 배치 전체 대비 지금 보이는 영역(0~1 비율) */
+export interface LockersLockerMinimapViewport {
+ left: number;
+ top: number;
+ width: number;
+ height: number;
+}
+
+interface LockersLockerMinimapProps {
+ /** 본문과 같은 칸 배치 — 축소해서 그린다 */
+ children: ReactNode;
+ /** 본문 칸 배치의 1배 기준 폭. 같은 폭으로 그려야 "fill" 상자 비율이 본문과 같다 */
+ layoutWidth: number;
+ viewport: LockersLockerMinimapViewport;
+ /** 스크롤이 없으면(전체가 보이면) 테두리를 숨긴다 */
+ isScrollable: boolean;
+}
+
+// Figma 미니맵 상자 110px, 안쪽 여백 8px. 테두리(Highlight Overlay)는 상자보다 위아래로 9px씩 크다(128px).
+const BOX_HEIGHT = 110;
+const BOX_PADDING = 8;
+const HIGHLIGHT_OVERHANG = 9;
+const AREA_HEIGHT = BOX_HEIGHT + HIGHLIGHT_OVERHANG * 2;
+// 테두리가 끝에 닿았는지 볼 때 반올림 오차를 봐준다
+const EDGE_EPSILON = 0.001;
+
+// Figma: Minimap (nodeId 2159:110757) — Stream 로컬
+// Figma는 칸·글자를 따로 줄여 그렸지만, 본문 배치를 zoom으로 줄여 그린다(배치를 두 벌 관리하지 않고,
+// 4px 글자가 브라우저 최소 글자 크기에 걸리지 않는다). 높이는 고정, 폭은 배치 비율에 맞추되 남은 폭을 넘지 않는다.
+function LockersLockerMinimap({
+ children,
+ layoutWidth,
+ viewport,
+ isScrollable,
+}: LockersLockerMinimapProps) {
+ const areaRef = useRef
+
+ );
+}
+
+export default LockersLockerMinimap;
diff --git a/src/features/lockers/components/LockersMapArea.tsx b/src/features/lockers/components/LockersMapArea.tsx
new file mode 100644
index 0000000..b3f9e3f
--- /dev/null
+++ b/src/features/lockers/components/LockersMapArea.tsx
@@ -0,0 +1,40 @@
+import { Typography } from "@wanteddev/wds";
+import type { CSSProperties } from "react";
+
+interface LockersMapAreaProps {
+ label: string;
+ icon?: string;
+ className?: string;
+ style?: CSSProperties;
+}
+
+// Figma: Room Label·Zone Label·Stairs Area — 호실·계단처럼 고를 수 없는 자리
+function LockersMapArea({
+ label,
+ icon,
+ className = "",
+ style,
+}: LockersMapAreaProps) {
+ return (
+
+ {/* 축소본 안의 칸 버튼이 Tab·스크린리더에 두 번 잡히지 않게 막는다 */}
+
+ {isScrollable && (
+
+ )}
+
+ {children}
+
+
+
+ );
+}
+
+export default LockersMapArea;
diff --git a/src/features/lockers/components/LockersMapLabel.tsx b/src/features/lockers/components/LockersMapLabel.tsx
new file mode 100644
index 0000000..2739daf
--- /dev/null
+++ b/src/features/lockers/components/LockersMapLabel.tsx
@@ -0,0 +1,45 @@
+import { Typography } from "@wanteddev/wds";
+import type { CSSProperties } from "react";
+
+interface LockersMapLabelProps {
+ text: string;
+ orientation?: "horizontal" | "vertical";
+ className?: string;
+ style?: CSSProperties;
+}
+
+// Figma는 세로 라벨을 한 글자씩 줄바꿈하고 단어 사이에 빈 줄을 둔다
+function toVerticalText(text: string) {
+ return [...text].map((char) => (char === " " ? "" : char)).join("\n");
+}
+
+// Figma: Direction Label·Aisle — 창문·벽면 표시
+function LockersMapLabel({
+ text,
+ orientation = "horizontal",
+ className = "",
+ style,
+}: LockersMapLabelProps) {
+ const isVertical = orientation === "vertical";
+
+ return (
+
+ {icon !== undefined && (
+
+ )}
+
+ {label}
+
+
+
+
+ {isVertical ? toVerticalText(text) : text}
+
+
+ );
+}
+
+export default LockersMapLabel;
diff --git a/src/features/lockers/components/LockersSectionPhotoModal.tsx b/src/features/lockers/components/LockersSectionPhotoModal.tsx
new file mode 100644
index 0000000..9612861
--- /dev/null
+++ b/src/features/lockers/components/LockersSectionPhotoModal.tsx
@@ -0,0 +1,182 @@
+import { IconButton, Typography } from "@wanteddev/wds";
+import { IconClose } from "@wanteddev/wds-icon";
+import type { KeyboardEvent } from "react";
+import { useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import { useScreenSheetPortal } from "@/components/ui/useScreenSheetPortal";
+import type {
+ LockersLayout,
+ LockersLayoutBlock,
+} from "@/features/lockers/constants/lockersSectionDetails";
+import type { LockersSectionPhotoPin } from "@/features/lockers/constants/lockersSectionPhotoPins";
+
+interface LockersSectionPhotoModalProps {
+ open: boolean;
+ sectionName: string;
+ photoUrl: string;
+ pins: LockersSectionPhotoPin[];
+ /** 핀 색을 칸의 행 위치로 정하는 데 쓴다 */
+ layout: LockersLayout;
+ onClose: () => void;
+}
+
+// 위쪽 행일수록 진하다 — 3행은 50·70·90, 5행은 50·60·70·80·90(Figma A-1·B-2 실제사진)
+const PIN_TONE_CLASS_NAMES = [
+ "bg-orange-50",
+ "bg-orange-60",
+ "bg-orange-70",
+ "bg-orange-80",
+ "bg-orange-90",
+];
+
+function getPinToneClassName(rowIndex: number, rowCount: number) {
+ if (rowCount <= 1) {
+ return PIN_TONE_CLASS_NAMES[0];
+ }
+ const step = Math.round(
+ (rowIndex / (rowCount - 1)) * (PIN_TONE_CLASS_NAMES.length - 1),
+ );
+ return PIN_TONE_CLASS_NAMES[step];
+}
+
+function collectPinToneClassNames(
+ block: LockersLayoutBlock,
+ toneClassNames: Map
+ {/* 딤은 Figma "딤드"(nodeId 2159:110298) 그대로 검정 60% */}
+
+
,
+ portalEl,
+ );
+}
+
+export default LockersSectionPhotoModal;
diff --git a/src/features/lockers/components/LockersSelectedLockerBar.tsx b/src/features/lockers/components/LockersSelectedLockerBar.tsx
new file mode 100644
index 0000000..6e42e53
--- /dev/null
+++ b/src/features/lockers/components/LockersSelectedLockerBar.tsx
@@ -0,0 +1,67 @@
+import { ActionArea, ActionAreaButton, Typography } from "@wanteddev/wds";
+
+interface LockersSelectedLockerBarProps {
+ /** 고르기 전이면 null */
+ lockerLabel: string | null;
+ onSubmit: () => void;
+}
+
+// Figma: Locker Selection Section (nodeId 1658:179182) — Stream 로컬. 위가 둥근 흰 카드에
+// "선택한 사물함" 줄(Figma Locker Selector, 1643:178050)과 WDS Action Area를 담는다.
+// 그림자는 Figma Shadow/Spread/Small 값 그대로다.
+//
+// 선택 전(State=Empty)은 안내 문구 + 잠긴 버튼, 선택 후(Figma "사물함 선택 시" 2159:113198)는
+// 사물함 이름을 Primary/Normal SemiBold로 보여주고 버튼을 연다.
+function LockersSelectedLockerBar({
+ lockerLabel,
+ onSubmit,
+}: LockersSelectedLockerBarProps) {
+ const hasSelection = lockerLabel !== null;
+
+ return (
+
+
+
+ {/* Figma 사진 틀 300×224. Figma의 회전·확대 보정은 사진을 자를 때 끝낸다 */}
+
+ 번호가 표시된 실제 배치 사진입니다.
+
+
+
+ 
+ {pins.map((pin) => (
+
+ {/* Figma에서도 이름 있는 타입 스타일이 아니라 Typography로 옮길 수 없다.
+ 사진이 테마와 무관해 글자도 검정 고정이다. 핀 크기는 Figma 두 값(12.4·14.9px)의 중간 */}
+
+ {pin.lockerNumber}
+
+
+ ))}
+
+ {/* Figma 2159:110379 — 카드 폭 전체에 가운데 정렬 */}
+
+
+ {/* 높이 보정 이유는 wds-component-usage.md "Action Area 메인 버튼 높이" 참고 */}
+
+ {hasSelection ? "사물함 신청하기" : "사물함을 선택해 주세요"}
+
+
+
+
+ );
+}
+
+export default LockersSelectedLockerBar;
diff --git a/src/features/lockers/components/LockersShelfLabel.tsx b/src/features/lockers/components/LockersShelfLabel.tsx
new file mode 100644
index 0000000..1ff65f9
--- /dev/null
+++ b/src/features/lockers/components/LockersShelfLabel.tsx
@@ -0,0 +1,51 @@
+import { Typography } from "@wanteddev/wds";
+
+import shelfDividerIcon from "@/assets/icons/lockers/shelf-divider.svg";
+
+interface LockersShelfLabelProps {
+ /** 칸 묶음 높이(px). 없으면 같은 줄 높이에 맞춰 늘어난다 */
+ height?: number;
+}
+
+function ShelfText({ children }: { children: string }) {
+ return (
+
+
+ 선택한 사물함
+
+ {hasSelection ? (
+
+ {lockerLabel}
+
+ ) : (
+
+ 선택한 사물함이 없어요.
+
+ )}
+
+
+ 위쪽 칸
+ 아래쪽 칸
+
+ );
+}
+
+export default LockersShelfLabel;
diff --git a/src/features/lockers/constants/lockersSectionDetails.ts b/src/features/lockers/constants/lockersSectionDetails.ts
new file mode 100644
index 0000000..f1ee28b
--- /dev/null
+++ b/src/features/lockers/constants/lockersSectionDetails.ts
@@ -0,0 +1,233 @@
+import sectionA1Photo from "@/assets/images/lockers/section-a-1-photo.jpg";
+
+// 구역 상세 응답(GET /v1/app/lockers/sections/{sectionId}). layout은 구조만 갖고 칸 상태는 lockers에서
+// 온다 — 둘은 lockerNumber로 잇는다.
+
+// "hug"는 내용 크기, "fill"은 부모의 남은 공간, 숫자는 px
+export type LockersLayoutSize = "hug" | "fill" | number;
+
+export type LockersLayoutAlign = "start" | "center" | "end" | "stretch";
+
+interface LockersLayoutBlockBase {
+ width?: LockersLayoutSize;
+ height?: LockersLayoutSize;
+}
+
+export interface LockersLayoutContainerBlock extends LockersLayoutBlockBase {
+ type: "row" | "column";
+ children: LockersLayoutBlock[];
+ gap?: number;
+ align?: LockersLayoutAlign;
+}
+
+// rows[0]이 맨 위 행(위쪽 칸), 숫자는 lockerNumber, null은 빈 자리
+export interface LockersLayoutLockerGroupBlock extends LockersLayoutBlockBase {
+ type: "lockerGroup";
+ rows: (number | null)[][];
+ bordered?: boolean;
+}
+
+export interface LockersLayoutLabelBlock extends LockersLayoutBlockBase {
+ type: "label";
+ text: string;
+ orientation?: "horizontal" | "vertical";
+}
+
+export interface LockersLayoutAreaBlock extends LockersLayoutBlockBase {
+ type: "area";
+ text: string;
+ icon?: "stairs";
+}
+
+export interface LockersLayoutTextBlock extends LockersLayoutBlockBase {
+ type: "text";
+ text: string;
+}
+
+export interface LockersLayoutShelfLabelBlock extends LockersLayoutBlockBase {
+ type: "shelfLabel";
+}
+
+export type LockersLayoutBlock =
+ | LockersLayoutContainerBlock
+ | LockersLayoutLockerGroupBlock
+ | LockersLayoutLabelBlock
+ | LockersLayoutAreaBlock
+ | LockersLayoutTextBlock
+ | LockersLayoutShelfLabelBlock;
+
+export interface LockersLayout {
+ version: 1;
+ root: LockersLayoutBlock;
+}
+
+export interface LockersSectionLocker {
+ lockerId: number;
+ lockerNumber: number;
+ // 관리자가 입력하는 값이라 번호에서 만들지 않는다
+ lockerLabel: string;
+ isAvailable: boolean;
+ isMine: boolean;
+}
+
+export interface LockersSectionDetail {
+ sectionId: number;
+ section: string;
+ layout: LockersLayout;
+ photoUrl: string;
+ lockers: LockersSectionLocker[];
+}
+
+// Figma 목업이 전부 선택 가능이라 그대로 두고, 이름은 Figma 표기("A-25")대로 만든다
+function createMockLockers(
+ building: string,
+ lockerNumbers: number[],
+): LockersSectionLocker[] {
+ return lockerNumbers.map((lockerNumber) => ({
+ isAvailable: true,
+ isMine: false,
+ lockerId: lockerNumber,
+ lockerLabel: `${building}-${lockerNumber}`,
+ lockerNumber,
+ }));
+}
+
+function range(from: number, to: number) {
+ return Array.from({ length: to - from + 1 }, (_, index) => from + index);
+}
+
+// Figma: A-1구역 (nodeId 2159:110753)
+const A1_SECTION: LockersSectionDetail = {
+ layout: {
+ root: {
+ align: "end",
+ children: [
+ {
+ align: "end",
+ children: [
+ { height: 122, type: "shelfLabel" },
+ {
+ align: "center",
+ children: [
+ { text: "창문", type: "label", width: 224 },
+ {
+ children: [
+ {
+ height: "fill",
+ orientation: "vertical",
+ text: "왼쪽 벽면",
+ type: "label",
+ },
+ {
+ bordered: true,
+ rows: [
+ [10, 11, 12],
+ [13, 14, 15],
+ [16, 17, 18],
+ ],
+ type: "lockerGroup",
+ },
+ {
+ bordered: true,
+ rows: [
+ [25, 26, 27, 28, 29, 30],
+ [22, 23, 24, 31, 32, 33],
+ [19, 20, 21, 34, 35, 36],
+ ],
+ type: "lockerGroup",
+ },
+ {
+ bordered: true,
+ rows: [
+ [1, 2, 3],
+ [4, 5, 6],
+ [7, 8, 9],
+ ],
+ type: "lockerGroup",
+ },
+ {
+ height: "fill",
+ orientation: "vertical",
+ text: "오른쪽 벽면",
+ type: "label",
+ },
+ ],
+ gap: 12,
+ type: "row",
+ },
+ ],
+ gap: 8,
+ type: "column",
+ },
+ ],
+ gap: 12,
+ type: "row",
+ },
+ { text: "복도", type: "text", width: 560 },
+ ],
+ gap: 32,
+ type: "column",
+ },
+ version: 1,
+ },
+ lockers: createMockLockers("A", range(1, 36)),
+ photoUrl: sectionA1Photo,
+ section: "A-1",
+ sectionId: 1,
+};
+
+// Figma: A-2구역 (nodeId 2159:109533)
+// A-2 사진이 아직 없어서 A-1 사진을 임시로 쓴다.
+const A2_SECTION: LockersSectionDetail = {
+ layout: {
+ root: {
+ children: [
+ { height: 96, type: "shelfLabel" },
+ {
+ align: "center",
+ children: [
+ {
+ children: [
+ {
+ rows: [
+ [82, 83, 84],
+ [85, 86, 87],
+ [88, 89, 90],
+ ],
+ type: "lockerGroup",
+ },
+ {
+ height: "fill",
+ text: "B-1구역",
+ type: "area",
+ width: "fill",
+ },
+ ],
+ gap: 12,
+ type: "row",
+ width: "fill",
+ },
+ { text: "복도", type: "text" },
+ { text: "231호실", type: "area", width: "fill" },
+ ],
+ gap: 32,
+ type: "column",
+ width: "fill",
+ },
+ ],
+ gap: 12,
+ type: "row",
+ },
+ version: 1,
+ },
+ lockers: createMockLockers("A", range(82, 90)),
+ photoUrl: sectionA1Photo,
+ section: "A-2",
+ sectionId: 2,
+};
+
+// 주소가 구역 라벨(/lockers/apply/sections/A-1)이라 라벨로 찾는다
+export const LOCKERS_SECTION_DETAILS: Record
+ 
+
+