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

[leegain1]

실제 뷰

최신화면입니다
https://github.com/user-attachments/assets/b0c48686-fca7-4c93-a046-6465b8a45466 (시연 영상)

#️⃣연관된 이슈

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

#69·#71 머지 후 base를 main으로 바꾸고 리베이스했습니다. 앞 8개 커밋은 leegain1 님 작업, 그 뒤 11개 커밋은 이어받은 작업입니다.

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

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

❓ 왜 해결해야 하나요?

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

Figma에는 구역이 8개(A-1~A-4, B-1, B-2, C, D) 있어서 구역마다 배치 컴포넌트를 짜면 코드가 계속 늘어난다. 백엔드와 구역별 배치·실제 사진을 서버에서 내려주기로 해서, 배치를 데이터로 그리는 구조로 바꿨다.

⭐ 어떻게 해결했나요?

화면 흐름

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

칸 배치 — 서버 layout JSON을 렌더러로 그린다

• 구역 상세 응답 형태(sectionId·section·layout·photoUrl·lockers)를 constants/lockersSectionDetails.ts에 정의하고 A-1·A-2 목데이터를 넣었다
• LockersLayoutRenderer가 layout(블록 7종: row·column·lockerGroup·label·area·text·shelfLabel)을 그린다. 크기는 hug·fill·px
• 칸 상태는 layout에 없고 lockers에서 lockerNumber로 찾는다
• 칸 3상태: 선택 가능(Orange/95) / 선택됨(Primary/Normal + 흰 SemiBold) / 선택 불가(범례와 같은 대각선 그림). 내 사물함은 디자인이 없어서 임시로 초록 테두리
• 점선 상자·회색 라벨은 [Feat/#70] 사물함 구역 선택 화면 #71 평면도와 같이 쓰는 LockersMapArea·LockersMapLabel로 뺐다

확대·축소 — 핀치(터치)·Ctrl+휠(트랙패드 핀치). CGV 좌석 선택처럼 1배로 가운데부터 보여주고, 최소는 배치 전체가 화면 폭에 들어오는 배율, 최대 3배. 확대하면 가로·세로로 스크롤된다

미니맵 — 본문 배치를 zoom으로 줄여 그린다. 높이 110px 고정, 폭은 배치 비율에 맞춘다. 모든 구역에 띄우고, 검은 테두리가 보이는 영역의 가로·세로를 따라간다(확대하면 작아진다). 스크롤이 없으면 테두리를 숨긴다

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

실제 사진 모달 — 헤더의 사진 아이콘으로 연다. 서버는 사진 주소만 주고, 핀 좌표는 프론트가 구역별 상수(lockersSectionPhotoPins.ts, 사진 대비 0~1 비율)로 관리한다. 핀 색은 칸이 묶음의 몇 번째 행인지로 정한다(위쪽일수록 진하게, 3행 50·70·90 / 5행 50·60·70·80·90). 딤 클릭·Esc로 닫힌다

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

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

• API가 없어 목데이터다. 구역 상세 응답 형태는 이 PR 기준으로 백엔드에 전달한다. A-1·A-2만 있다
• 사물함 신청하기 이후 동작이 없다. 신청 API가 없어서 버튼만 열어뒀다(onSubmit만 채우면 된다)
• A-2 실제 사진이 없다. 직접 찍기 전까지 A-1 사진을 임시로 쓰고, 번호가 맞지 않아 핀은 비워 뒀다
• 사진 핀 좌표는 프론트가 관리한다. 사진을 바꾸면 좌표도 같이 고쳐야 한다
• 내 사물함 표시는 임시다. Figma에 상태가 없어 초록 테두리로 뒀다
• 확대·축소는 브라우저로만 확인했다. 앱 WebView(iOS·안드로이드)에서 페이지 전체가 아니라 칸 배치만 확대되는지 실기기 확인이 필요하다
• 새로고침이 window.location.reload()다. [Feat/#70] 사물함 구역 선택 화면 #71 구역 선택 화면과 같은 방식이다
• 사진은 원본(4096×3072, 7MB)을 960×720으로 줄여 커밋했다(약 155KB)

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

• LockersSectionSelectScreen의 선택 완료가 이제 칸 선택 화면으로 이동한다
• LockersFloorMap([Feat/#70] 사물함 구역 선택 화면 #71)의 점선 상자를 공용 LockersMapArea로 바꿨다 — 렌더링은 같다
• index.css에 토큰 7개 추가 — orange-95/90/80/70/60/50, line-solid-alternative. 전부 WDS 변수 별칭이다

🔀 Edge Case & 실패 시나리오

• 없는 구역 주소(/lockers/apply/sections/B-1 등): 준비 중 화면
• 주소로 바로 진입 후 뒤로가기: 구역 선택 화면으로 replace 이동
• layout에 있는데 lockers에 없는 번호(서버 데이터 불일치): 칸 대신 빈 자리로 둔다
• 모르는 블록 type: 그 블록만 건너뛰고 나머지를 그린다
• 핀치 중 칸 선택: 두 손가락을 대는 순간부터 뗀 뒤 0.3초까지 칸 클릭을 막는다
• 미니맵 안의 칸 버튼: 축소본이라 inert로 막아 Tab·스크린리더에 두 번 잡히지 않게 했다
• 구역이 바뀔 때: key={sectionId}로 새로 그려서 선택·스크롤·배율이 남지 않는다

📋 검토한 대안과 선택 이유

• 구역별 배치 컴포넌트 → 처음엔 이 방식이었는데, 구역이 8개라 컴포넌트·상수가 계속 늘고 배치가 바뀌면 배포가 필요하다. 서버 layout JSON + 렌더러 하나로 바꿨다
• 핀치 줌 라이브러리 → 필요한 동작이 핀치·Ctrl+휠·스크롤 보정뿐이라 직접 구현했다. 미니맵 테두리 계산을 라이브러리 상태에 맞추지 않아도 된다
• transform: scale로 확대 → 스크롤 영역 크기에 반영되지 않아 확대해도 스크롤이 생기지 않는다. CSS zoom을 쓴다
• 미니맵을 Figma 값(칸 8px·글자 4px)으로 따로 그리기 → 4px 글자는 브라우저 최소 글자 크기에 걸릴 수 있고, 배치를 두 벌 관리해야 한다
• 미니맵 S/M/L 3단계 → 단계 폭과 배치 비율이 안 맞으면 빈 공간이 생긴다. Figma 미니맵 폭도 내용에 맞춘 값이라 높이 고정·폭 맞춤으로 했다

💬 리뷰 포인트

• [c] layout 블록 7종과 크기 규칙(fill이 부모 방향에 따라 다르게 동작) — 백엔드에 넘길 형태다
• [c] 확대·축소(useLockersPinchZoom) — 앱 WebView 실기기에서 확인 부탁
• [a] 내 사물함 초록 테두리, A-2 임시 사진

✅ 검증

• tsc -b·biome check·vite build 통과
• 375×812에서 A-1·A-2를 Figma와 대조, 렌더러 교체 전후 화면 비교(본문 동일)
• Chrome 터치 에뮬레이션으로 핀치 확대·축소(가운데 시작, 손가락 아래 칸 위치 유지, 1~3배, 핀치 중 선택 안 됨), 데스크톱 Ctrl+휠
• 미니맵 테두리가 확대·스크롤을 가로·세로로 따라가는지, 사진 핀 위치·색

백엔드 전달용 응답 가이드(블록 7종·필드·예시)는 별도로 전달한다.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 9c7bd4e9-f82a-45fd-b6d5-284fb43809dd

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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