[Feat/#91] 사물함 신청 확인·진행·완료·오류 화면 구현

[sangrae2325]

#️⃣연관된 이슈

• Closes 사물함 신청 확인·진행·완료·오류 화면 #91

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

칸 선택 화면에서 사물함 신청하기를 눌러도 아무 동작이 없다. Figma의 사물함 선택 확인 모달(1737:218322), 신청 로딩(1737:218076), 신청 완료(1737:218058), 오류 5종(3013:99093·99116·99139·99162·99183)을 옮긴다.

❓ 왜 해결해야 하나요?

사물함 신청 흐름이 칸 선택에서 끊겨 있다. 신청은 선착순이라 다른 사람이 먼저 신청하거나 신청 중에 마감되는 경우가 실제로 생기므로, 실패 이유마다 다음에 할 행동을 안내해야 한다.

실제 뷰

https://github.com/user-attachments/assets/43a2b463-bd16-4983-bc94-c368eb3b99d3 (동작 영상)

⭐ 어떻게 해결했나요?

화면 흐름

• 칸 선택 → 사물함 신청하기 → 확인 모달(수정 / 신청하기) → 신청 중 화면 → 완료 또는 오류 화면
• 완료: /lockers/apply/sections/:sectionId/complete, 오류: /lockers/apply/sections/:sectionId/failure/:reason
• 결과 화면은 replace로 열어서 뒤로가기로 칸 선택 화면에 돌아가지 않는다
• 결과 값(사물함 번호·사용기간, 다시 시도할 사물함)은 navigation state로 넘긴다. 새로고침해도 남고, 주소로 바로 들어오면 없다

공용 결과 화면 ResultScreen

• 행사 완료·마감, 사물함 완료·오류 5종 모두 닫기(X) 헤더 + 일러스트 + 2줄 문구 + 하단 버튼으로 같은 뼈대라 components/ui/ResultScreen.tsx로 모았다
• 행사 마감·완료 화면을 이걸로 바꿨다(교체 전후 픽셀 비교로 같음을 확인)
• 제출 중 화면(SubmittingOverlay)·완료 체크 모션(CompleteCheck)·Lottie·자물쇠 그림도 components/ui/, assets/*/common/으로 옮겨 행사·사물함이 같이 쓴다

오류 화면 5종

이유	문구	버튼
taken 다른 사용자가 먼저 신청	선택한 사물함이 방금 마감됐어요	홈으로 가기 / 다시 선택하기(칸 선택)
all-closed 전체 마감	사물함 신청이 모두 마감됐어요	홈으로 가기
section-closed 구역 마감	{구역} 구역의 사물함이 마감됐어요	홈으로 가기 / 다른 구역 선택하기(구역 선택)
network	인터넷 연결이 원활하지 않아요	홈으로 가기 / 다시 시도
server	일시적인 오류가 발생했어요	홈으로 가기 / 다시 시도

• 다시 시도는 오류 화면에서 바로 같은 사물함으로 다시 신청한다(신청 중 화면 → 결과 화면)

WDS — TopNavigation(ScreenHeader) + TopNavigationButton, Typography, ActionArea/ActionAreaButton. 결과 화면 틀은 WDS FallbackView가 일러스트 폭·패딩·컨테이너 폭이 고정이라 맞지 않아 로컬로 짰다(wds-component-usage.md에 정리).

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

• 신청 API를 아직 붙이지 않았다. submitLockersApplication이 목업이다(2.6초 뒤 성공). 오류 화면은 MOCK_OUTCOME을 바꿔서 확인한다
• 서버 오류 코드가 부족하다. 현재 서버에는 LOCKER_ALREADY_ASSIGNED(409)만 있고 전체 마감·구역 마감 코드는 없다. 백엔드 작업 후 연결한다
• 사용기간은 목업 값이다. 신청 전 유의사항과 같은 값(2026.09.01~2026.12.15)
• 신청내역 보기는 준비 중 화면으로 간다. 신청내역 화면이 아직 없다(행사 완료 화면과 같음)
• 버튼 너비가 반반이 아닌 화면이 있다. 구역 마감 화면의 다른 구역 선택하기가 길어서 Figma보다 넓다. 맞추려면 공용 버튼 여백을 바꿔야 해서 보류했다

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

• 행사 신청 마감·완료 화면이 ResultScreen으로 바뀌었다. 렌더링은 교체 전과 같다
• 행사 신청 폼의 제출 중 화면이 공용 SubmittingOverlay를 쓴다(문구는 prop으로 그대로 넘김)
• 에셋 경로 변경: icons/events/application-closed.svg → icons/common/document-lock.svg, lottie/events/* → lottie/common/*

🔀 Edge Case & 실패 시나리오

• 완료 화면에 주소로 바로 들어오면 신청 결과가 없어서 홈으로 보낸다
• 네트워크·서버 오류 화면에 주소로 바로 들어오면 다시 신청할 사물함을 몰라서 홈으로 보낸다(나머지 오류 화면은 그대로 보여준다)
• 없는 실패 이유(/failure/xxx)는 홈으로 보낸다
• 신청 중에는 화면 전체를 덮어 중복 제출을 막는다

📋 검토한 대안과 선택 이유

• 결과 값을 쿼리스트링으로 넘기기 — 주소에 사물함 번호·기간이 드러나고 직접 고쳐 들어올 수 있어서 navigation state를 택했다
• 다시 시도 시 칸 선택 화면으로 돌아가기 — 사용자가 다시 칸을 고르고 확인해야 해서, 오류 화면에서 바로 같은 사물함으로 다시 신청하도록 했다
• WDS FallbackView — 위 WDS 항목 참고

💬 리뷰 포인트

• ResultScreen의 props(illustration·illustrationGap·children·primaryAction·secondaryAction)가 앞으로의 결과 화면에도 충분한지
• 오류 이유별 문구·버튼을 표(FAILURE_CONTENTS)로 둔 구조(LockersApplyFailureScreen.tsx)

[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: f8cb1bb7-7977-4b4d-8e1f-dfab2ac8032a

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

---

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