사물함 구역 선택 화면

[sangrae2325]

어떤 기능인가요?

사물함 신청에서 구역을 고르는 화면을 추가한다. 평면도 위에 구역 카드를 배치하고, 카드마다 잔여 수량과 혼잡도 뱃지를 보여준다. 하나를 고르면 하단 버튼이 열린다.

Figma 사물함 구역 선택 전(1737:218452) → 사물함 구역 선택완료(1737:218489).

#68에서 만든 유의사항 시트의 신청하기가 이 화면으로 오도록 연결하고, 그때 뒀던 임시 라우트(/lockers/apply)와 확인용 화면을 정리한다.

📝 작업 상세 내용

• 평면도 레이아웃 — 3열 고정(좌 124 / 중앙 67 / 우 124), 열 간격 10px, 카드 간격 6px
• 평면도 고정 요소 — 231호실·232호실·화장실·계단(점선 테두리), 복도·↑ 정릉시장 방향
• 화장실·계단 아이콘 SVG 받아 src/assets/에 커밋
• 구역 카드 컴포넌트 — 혼잡도 뱃지 + 구역명 + 잔여 N/M
• 혼잡도 3단계를 WDS ContentBadge로 (color="accent" + green/orange/red). BililgeRentalHistoryEntry.tsx 선례와 같은 방식
• 마감 상태 — 배경 Cool Neutral/97, 뱃지 Fill/Normal, 글자 Label/Assistive, 선택 불가
• 선택 상태 — 배경 Blue/95 + Primary/Normal 1px 테두리
• 하단 버튼 — 미선택 시 구역을 선택해 주세요(비활성) / 선택 시 선택하기
• Top Navigation — 뒤로가기 + 새로고침. 새로고침 아이콘은 IconRefresh/IconReset/IconRotate 중 글리프 대조 후 결정
• 구역 목데이터 (archiveId 무관, API 연동 전까지)
• 라우트 추가
• #68의 유의사항 시트 신청하기 → 이 화면으로 연결
• #68의 임시 라우트 /lockers/apply와 LockersApplyScreen 삭제
• 새로 확정된 WDS 매핑을 docs/conventions/wds-component-usage.md에 반영

이번 범위에서 제외

• 선택하기 이후 화면 — Figma에서 찾지 못했다. 디자인이 나오면 별도 이슈로 연결한다
• 평면도를 데이터로 그리기 — 231/232호실·화장실·계단 위치는 Figma 구조 그대로 하드코딩한다. API가 평면도를 내려줄 근거가 아직 없어서 과잉 설계를 피한다. 구역 목록·잔여 수량만 데이터로 받는다
• 새로고침 실제 동작 — 잔여 수량 API가 없어 표시만 한다
• 사물함 신청 API

참고

• 선택 전: https://www.figma.com/design/3QkxTuGLZkB17pZILTog9L/%F0%9F%8C%8A--Stream?node-id=1737-218452
• 선택 후: https://www.figma.com/design/3QkxTuGLZkB17pZILTog9L/%F0%9F%8C%8A--Stream?node-id=1737-218489
• 선행 이슈: 사물함 신청 전 유의사항 바텀시트 #68 (유의사항 시트)
• 용어 사전: 사물함 = lockers

Figma 실측 메모

상태	배경	뱃지	글자
여유	Background/Normal/Alternative	green #009632 8%	Label/Normal
보통	〃	orange #D17600 8%	〃
마감 임박	〃	red #E52222 8%	〃
마감	Cool Neutral/97	Fill/Normal + Label/Alternative	Label/Assistive
선택됨	Blue/95 + Primary/Normal 1px	원래 뱃지 유지	〃

카드 74px 높이, rounded-8, 내부 gap-4. 구역명 Caption 1/Medium(12px), 잔여 Caption 2/Regular(11px)에 숫자만 SemiBold.

Figma 아티팩트 2건 — 선택 상태만 px-16이고 나머지는 px-7인데 내용이 가운데 정렬 고정폭이라 화면상 차이는 없다. 1737:218476만 이름이 Locker Button이고 나머지는 Zone Button인데 구조·스타일은 같다.