[Feat/#70] 사물함 구역 선택 화면

[sangrae2325]

#️⃣연관된 이슈

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

base가 main이 아니라 feat/#68-lockers-notice-sheet입니다.

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

사물함 신청에서 구역을 고르는 화면이 없다. Figma 사물함 구역 선택 전(1737:218452) → 선택완료(1737:218489)를 옮긴다.

#68에서 만든 유의사항 시트의 신청하기가 갈 곳도 여기다.

❓ 왜 해결해야 하나요?

유의사항 시트만 있고 그다음이 비어 있어서 신청 흐름이 끊긴다. 구역마다 잔여 수량과 혼잡도가 달라서, 평면도 위에서 어디가 남았는지 보고 고를 수 있어야 한다.

실제화면

⭐ 어떻게 해결했나요?

평면도

• 3열 배치(좌 124 / 중앙 67 / 우 124). 231·232호실, 화장실, 계단, 복도, ↑ 정릉시장 방향은 실제 건물 구조라 데이터가 아니라 레이아웃이 갖는다
• 구역과 잔여 수량만 데이터에서 온다

구역 카드 5상태

상태	배경	뱃지
여유 / 보통 / 마감 임박	Background/Normal/Alternative	ContentBadge color="accent" + green / orange / red
마감	Cool Neutral/97	color="neutral" (배경 Fill/Normal), 선택 불가
선택됨	Blue/95 + Primary/Normal 1px	원래 뱃지 유지

뷰포트에 맞춰 비례 배치 — Figma는 375×812 한 벌만 있는데 ScreenLayout은 폰이든 데스크톱 컬럼(480px)이든 높이를 뷰포트로 꽉 채운다. 치수를 고정하면 큰 화면에서 아래가 크게 빈다. Figma 값을 그대로 flex 비율로 옮겨(열 124:67:124, 왼쪽 열 186:74:186:134) 남는 공간을 비례 배분한다. 375×812에서는 Figma와 같은 치수가 나온다.

#68 시트와 연결 — 확인용 임시 화면이던 LockersApplyScreen을 신청 흐름의 첫 화면으로 바꿨다. 들어오면 시트를 띄우고 신청하기를 누르면 구역 선택으로 간다.

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

• 선택하기 이후 화면이 없다. Figma에서 찾지 못해 지금은 아무 동작도 하지 않는다
• 평면도 배치를 하드코딩했다. API가 평면도를 내려줄 근거가 없어 과잉 설계를 피했다. 구역·잔여 수량만 데이터다
• 아주 긴 창에서 카드가 계속 늘어난다. 1200px 창이면 카드가 128px까지 커지는데 글자는 1112px 그대로라 안이 허전해진다. 상한을 둘지는 정하지 못했다
• 새로고침이 window.location.reload()다. 잔여 수량 API가 붙으면 그 조회만 다시 하도록 바꿔야 한다
• 구역·잔여 수량이 목데이터다. 혼잡도는 잔여 비율에서 유도하지 않고 데이터로 받는다 — Figma 목업이 6/6은 여유인데 24/60은 보통, 24/40은 마감 임박이라 비율과 맞물리지 않는다
• 목데이터의 C 구역을 마감으로 뒀다. Figma 선택 전 프레임은 여유 24/100, 선택 후 프레임은 마감 0/100이다. 선택과 무관한 변화라 마감 상태를 보여주려는 의도로 읽었다

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

• base가 feat/#68-lockers-notice-sheet라 그 브랜치의 커밋이 함께 보인다
• index.css에 토큰 2개 추가 — cool-neutral-97(마감 배경), line-solid-normal(평면도 점선). 둘 다 WDS 변수 별칭이다
• /lockers/apply가 확인용 임시 라우트에서 실제 진입 화면이 됐다. 진입점(홈 퀵링크·공지 CTA)은 아직 없어서 URL로만 들어갈 수 있다
• 그 외는 전부 새 파일이다

🔀 Edge Case & 실패 시나리오

• 마감 구역: 버튼을 잠근다. Figma에 잠금 상태의 선택 모습이 없는 것도 고를 수 없다는 뜻으로 읽었다
• 미선택: 하단 버튼을 잠그기만 하고 문구는 신청하기 그대로다(Figma는 구역을 선택해 주세요로 바뀌지만 문구를 고정하기로 정했다)
• 선택 시 밀림: 선택할 때만 테두리가 생기면 콘텐츠 박스가 1px씩 줄어 내용이 밀린다. 평소에도 투명 테두리를 둬서 박스를 고정했다
• 큰 화면: 위 "비례 배치" 참고

📋 검토한 대안과 선택 이유

• 평면도를 데이터로 그리기 → API가 내려줄 근거가 없어 하드코딩했다
• 큰 화면에서 평면도를 고정 크기로 두고 가운데 정렬 → 도면이라 크기를 안 바꾸는 쪽도 검토했지만, ScreenLayout이 "높이는 뷰포트를 꽉 채운다"를 전제로 만들어져 있어 비례 배치로 갔다
• 혼잡도를 잔여 비율에서 유도 → Figma 목업 수치가 서로 맞물리지 않아 데이터로 받는다. 임계값 규칙이 정해지면 유도로 바꾼다
• sx={{ height: "56px" }}로 버튼 높이 맞추기 → 문구가 길어질 때 잘려서 문서화된 paddingBlock 쪽을 썼다

💬 리뷰 포인트

• [c] 평면도를 flex 비율로 옮긴 방식 — Figma에 375×812 외 기준이 없어서 이 PR에서 처음 정하는 규칙이다. 기존 화면은 전부 목록형(스크롤)이거나 짧은 내용형이라 선례가 없었다
• [c] 구역 용어를 section으로 통일했다(/lockers/apply/sections, LockersSectionCard). terminology.md에는 넣지 않았다 — 사전이 전부 최상위 도메인이라 그 하위 개념을 넣는 게 맞는지 애매했다
• [c] 임시 화면이던 LockersApplyScreen을 실제 진입 화면으로 승격시킨 것
• [a] 긴 창에서 카드 높이 상한을 둘지
• [a] 목데이터 C 구역을 마감으로 둔 것

🎨 디자인 확인 요청

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

✅ 검증

• tsc -b·biome check·vite build 통과
• getComputedStyle 실측으로 Figma 대조 — Floor Map 335×594, 열 간격 10, 왼쪽 열 gap 4 / 오른쪽 6, 카드 124×74·radius 8·px 7·gap 4, 마감 배경 #EAEBEC, 뱃지 32×20·px6 py3·11px·green 8%, 점선 #E1E2E4 모두 일치
• 375×812 / 430×932 / 데스크톱 480 컬럼에서 렌더 확인
• 선택 전후 카드 좌표가 동일한 것(밀림 없음)도 실측 확인

[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: 31e969b6-2833-4722-ae3c-5d2118b853a7

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.}