[Feat/#75] 사물함 구역별 사물함 선택 화면 구현 (A-1, A-2)

[leegain1]

실제 뷰

#️⃣연관된 이슈

• Closes 사물함 구역별 사물함 선택 화면 #75

base가 main이 아니라 feat/#70-lockers-zone-select(#71)입니다. 구역 선택 화면 다음 단계라 그 위에 쌓았습니다.

🎯 해결하려는 문제가 무엇인가요?

구역을 고른 뒤 그 구역 안에서 사물함 칸을 고르는 화면이 없다. Figma의 A-1구역(2159:110753), A-2구역(2159:109533), A-1구역 실제사진(2159:110174), 사물함 선택 시(2159:113197)를 옮긴다.

❓ 왜 해결해야 하나요?

#71의 구역 선택 화면에서 신청하기를 눌러도 갈 곳이 없어서 신청 흐름이 끊겨 있다. 구역마다 칸 배치가 실제 공간 구조대로 달라서, 도면처럼 보고 칸을 골라야 한다.

⭐ 어떻게 해결했나요?

화면 흐름

• 구역 선택 → 신청하기 → /lockers/apply/sections/:sectionId → 칸 선택
• 뒤로가기는 구역 선택 화면으로 돌아간다. 주소로 바로 들어와 이전 기록이 없어도 앱 밖으로 나가지 않고 구역 선택 화면으로 간다
• A-1·A-2만 배치가 있고, 나머지 구역은 준비 중 화면을 보여준다

칸 배치

• 구역별 배치 컴포넌트(LockersA1LockerMap, LockersA2LockerMap)를 둔다. 창문·벽면·옆 구역·호실은 실제 공간 구조라 [Feat/#70] 사물함 구역 선택 화면 #71 평면도처럼 레이아웃이 갖고, 칸 번호·선택 가능 여부만 데이터다
• A-1은 화면보다 넓어서(약 620px) 좌우로 스크롤한다. 위쪽 미니맵의 검은 테두리가 스크롤 위치를 따라간다
• 칸 3상태: 선택 가능(Orange/95) / 선택됨(Primary/Normal + 흰 SemiBold) / 선택 불가(범례와 같은 대각선 그림)

하단 선택 영역 — LockersSelectedLockerBar로 분리. 선택 전엔 선택한 사물함이 없어요. + 잠긴 사물함을 선택해 주세요, 선택 후엔 A-25(Primary SemiBold) + 사물함 신청하기

실제 사진 모달 — A-1 헤더의 사진 아이콘으로 연다. 사진 위에 칸 번호 핀을 Figma 좌표 그대로 얹었다(위쪽 칸부터 Orange/50 → 70 → 90). 딤 클릭·Esc로 닫힌다

WDS — ScreenHeader + TopNavigationButton, IconImage/IconReset/IconClose, IconButton, ActionArea/ActionAreaButton, Typography. 칸·칸 묶음·미니맵·범례·모달은 Stream 로컬이다(wds-component-usage.md에 정리).

🧩 이 PR의 한계 & 트레이드오프

• 사물함 신청하기 이후 동작이 없다. 신청 API가 없어서 버튼만 열어뒀다(onSubmit만 채우면 된다)
• 칸 데이터가 목데이터다. Figma 목업이 전부 선택 가능이라 그대로 뒀다
• 새로고침이 window.location.reload()다. [Feat/#70] 사물함 구역 선택 화면 #71 구역 선택 화면과 같은 방식이다
• 미니맵을 Figma처럼 따로 그리지 않았다. 본문 배치를 zoom: 0.31로 줄여 그려서 칸·글자 크기가 Figma 미니맵(칸 8px·글자 4px)과 조금 다르다. 대신 배치가 바뀌어도 미니맵을 따로 고칠 필요가 없고, 테두리를 스크롤 비율에 정확히 맞출 수 있다
• 사진은 원본(4096×3072, 7MB)을 960×720으로 줄여 커밋했다(약 155KB). 모달에서 300×224로 보이니 3배 화면까지 충분하다

⛓️ 기존 기능에 미치는 영향

• LockersSectionSelectScreen의 신청하기가 이제 칸 선택 화면으로 이동한다(원래는 아무 동작 없음)
• index.css에 토큰 5개 추가 — orange-95/90/70/50, line-solid-alternative. 전부 WDS 변수 별칭이다
• 그 외는 새 파일이다

🔀 Edge Case & 실패 시나리오

• 없는 구역 주소(/lockers/apply/sections/B-1 등): 준비 중 화면
• 주소로 바로 진입 후 뒤로가기: 구역 선택 화면으로 replace 이동
• 화면에 다 들어오는 구역(A-2): 미니맵을 띄우지 않고 128px 자리만 남긴다. Figma도 A-2 미니맵을 opacity: 0으로 숨겨 자리만 두었다
• 미니맵 안의 칸 버튼: 축소본이라 inert로 막아 Tab·스크린리더에 두 번 잡히지 않게 했다
• 구역이 바뀔 때: 같은 화면 컴포넌트가 재사용돼도 선택·스크롤이 남지 않도록 key={sectionId}로 새로 그린다

📋 검토한 대안과 선택 이유

• 칸 배치를 데이터로 그리기 → 창문·벽면·옆 구역 위치가 구역마다 제각각이라 스키마를 억지로 만들게 된다. [Feat/#70] 사물함 구역 선택 화면 #71 평면도와 같은 방침으로 구역별 컴포넌트를 뒀다
• 미니맵을 Figma 값(칸 8px·글자 4px)으로 따로 그리기 → 4px 글자는 브라우저 최소 글자 크기에 걸릴 수 있고, 배치를 두 벌 관리해야 한다
• 사진+핀을 PNG 한 장으로 export → 1배 export라 레티나에서 흐리고, 핀이 Figma에서 별도 레이어라 코드로 얹었다

💬 리뷰 포인트

• [c] 하단 사물함 번호 표기 — Figma가 B-1구역 25번을 B-25로 적어서, 구역 번호 없이 동 이름 + 칸 번호로 표기했다(A-25). 같은 동 안에서 칸 번호가 겹치지 않는다고 읽었다
• [c] 미니맵을 zoom으로 축소한 방식
• [a] A-1 Shelf Label — Figma 본문 프레임에서 높이가 1px로 깨져 있어서, 미니맵·A-2처럼 칸 묶음 높이(122px)에 맞췄다
• [a] 실제사진 모달 — Figma는 top 229px이지만 화면 높이가 기기마다 달라 세로 가운데에 뒀다

✅ 검증

• tsc -b·biome check·vite build 통과
• 375×812에서 A-1·A-2·실제사진 모달·선택 상태를 Figma 스크린샷과 대조
• 구역 선택 → A-1/A-2 → 뒤로가기, 주소 직접 진입 후 뒤로가기 흐름 확인

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 4a5fda71-7838-485b-9f81-2fd08124f1ac

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}