+
+ );
+}
+
+export default ResultScreen;
diff --git a/src/features/events/components/EventsSubmittingOverlay.tsx b/src/components/ui/SubmittingOverlay.tsx
similarity index 80%
rename from src/features/events/components/EventsSubmittingOverlay.tsx
rename to src/components/ui/SubmittingOverlay.tsx
index 2969e93..d02df56 100644
--- a/src/features/events/components/EventsSubmittingOverlay.tsx
+++ b/src/components/ui/SubmittingOverlay.tsx
@@ -2,11 +2,11 @@ import { Typography } from "@wanteddev/wds";
import { LottieLight } from "lottie-react";
import { createPortal } from "react-dom";
-import submittingDocument from "@/assets/lottie/events/submitting.json";
+import submittingDocument from "@/assets/lottie/common/submitting.json";
import { useScreenSheetPortal } from "@/components/ui/useScreenSheetPortal";
import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion";
-// Figma: 행사 로딩 (nodeId 1133:43453), 모션은 Loading / Document Review (1133:44260).
+// Figma: 행사 로딩 (nodeId 1133:43453), 사물함 신청 로딩 (1737:218076), 모션은 Loading / Document Review (1133:44260).
// 3.4초 루프 안에서 체크·긴 줄·짧은 줄이 순서대로 그려지고 마지막에 함께 사라진다.
//
// 모션은 Figma LottieFiles 플러그인으로 뽑은 Lottie를 그대로 재생한다 — 자세한 규칙은
@@ -21,8 +21,18 @@ import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion";
// 173프레임에 모든 선이 완성되고 181프레임부터 함께 사라지기 시작한다.
const DRAWN_SEGMENT = [175, 176] as const;
-// 제출 중 화면 — Figma에 헤더가 없어서 화면 포털에 흰 배경으로 프레임 전체를 덮는다.
-function EventsSubmittingOverlay({ open }: { open: boolean }) {
+interface SubmittingOverlayProps {
+ open: boolean;
+ title: string;
+ description: string;
+}
+
+// 신청 제출 중 화면(행사·사물함 공용) — Figma에 헤더가 없어서 화면 포털에 흰 배경으로 프레임 전체를 덮는다.
+function SubmittingOverlay({
+ open,
+ title,
+ description,
+}: SubmittingOverlayProps) {
const portalEl = useScreenSheetPortal();
const shouldReduceMotion = usePrefersReducedMotion();
@@ -50,7 +60,7 @@ function EventsSubmittingOverlay({ open }: { open: boolean }) {
variant="heading1"
weight="bold"
>
- 신청서를 제출하고 있어요
+ {title}
+
+
+
+ {illustration}
+
+ {children}
+
+
+ {title}
+
+
+ {description}
+
+
+
+ {/* WDS는 버튼 세로 padding을 12px(48px)로 주는데 Figma Main Action은 16px(56px)이라 맞춘다 */}
+ {secondaryAction ? (
+
+
+ {secondaryAction.label}
+
+
+ {primaryAction.label}
+
+
+ ) : (
+
+
+ {primaryAction.label}
+
+
+ )}
+ {/* ActionArea 아래 padding 20px + 14px = Figma Bottom Safe Area 34px. 앱 WebView에서는
+ 네이티브 세이프에어리어와 겹쳐서 데스크톱 프레임에서만 남긴다. */}
+
+
+
-
+
- 
-
-
-
-
- 신청 인원이 모두 찼어요
-
-
- 다음 행사에서 만나요!
-
-
-
- {/* 버튼 하나 짜리 Action Area — 신청 폼과 같은 이유로 세로 padding만 Figma(16px, 56px)에 맞춘다 */}
-
- navigate("/")}
- sx={{ paddingBlock: "16px" }}
- >
- 홈으로 가기
-
-
- {/* WDS ActionArea의 아래 padding 20px + 여기 14px = Figma Bottom Safe Area 34px.
- 앱 WebView에서는 네이티브 세이프에어리어와 중복이라 데스크톱 프레임에서만 남긴다. */}
-
-
-
-
+
-
-
-
-
-
-
- 신청이 완료됐어요
-
-
- 신청해 주셔서 감사해요. 행사날 뵐게요!
-
-
-
- {/* variant="neutral" — 버튼 둘을 가로로 12px 간격에 반반씩 두는 Figma Action Area와 같다.
- WDS는 버튼 세로 padding을 12px(48px)로 주는데 Figma Main Action은 16px(56px)이라 맞춘다. */}
-
- navigate(APPLICATION_HISTORY_PATH)}
- sx={{ padding: "16px 28px" }}
- variant="alternative"
- >
- 신청내역 보기
-
- navigate("/")}
- sx={{ padding: "16px 28px" }}
- >
- 홈으로 가기
-
-
- {/* 신청 폼과 같은 이유의 14px — WDS ActionArea의 아래 padding 20px에 iOS Home Bar 여백을 더해 34px.
- 앱 WebView에서는 네이티브 세이프에어리어와 중복이라 데스크톱 프레임에서만 남긴다. */}
-
-
-
+
+
+ {lockerLabel}
+ {" "}
+ 사물함
+
+
+
+ );
+}
+
+export default LockersApplyCompleteScreen;
diff --git a/src/features/lockers/LockersApplyFailureScreen.tsx b/src/features/lockers/LockersApplyFailureScreen.tsx
new file mode 100644
index 0000000..80871db
--- /dev/null
+++ b/src/features/lockers/LockersApplyFailureScreen.tsx
@@ -0,0 +1,153 @@
+import type { ReactNode } from "react";
+import {
+ Navigate,
+ type NavigateFunction,
+ useLocation,
+ useNavigate,
+ useParams,
+} from "react-router-dom";
+
+import documentLock from "@/assets/icons/common/document-lock.svg";
+import networkOffline from "@/assets/icons/lockers/network-offline.svg";
+import ResultScreen from "@/components/ui/ResultScreen";
+import SubmittingOverlay from "@/components/ui/SubmittingOverlay";
+import {
+ LOCKERS_APPLY_SUBMITTING_TEXT,
+ type LockersApplyFailureReason,
+} from "@/features/lockers/constants/lockersApplySubmit";
+import {
+ type LockersApplyFailureState,
+ useLockersApplySubmit,
+} from "@/features/lockers/hooks/useLockersApplySubmit";
+
+// Figma는 자물쇠 그림(62.96×72.32)을 80×80 틀 가운데에 둔다
+const LOCK_ILLUSTRATION = (
+
+
+ 사용기간
+
+
+ {formatUsageDate(usageStartDate)} - {formatUsageDate(usageEndDate)}
+
+
+
+ 
+
+);
+
+interface FailureContentContext {
+ sectionId: string;
+ navigate: NavigateFunction;
+ retry: () => void;
+}
+
+interface FailureContent {
+ illustration: ReactNode;
+ title: string;
+ description: string;
+ primaryAction: { label: string; onClick: () => void };
+ hasHomeAction: boolean;
+ // 다시 시도할 사물함이 있어야 화면이 동작한다(network·server)
+ needsRetryRequest?: boolean;
+}
+
+// Figma: 다른 사용자와 겹침 (nodeId 3013:99093), 전체 마감 (3013:99116), 구역 마감 (3013:99139),
+// 네트워크 오류 (3013:99162), 서버 오류 (3013:99183)
+const FAILURE_CONTENTS: Record<
+ LockersApplyFailureReason,
+ (context: FailureContentContext) => FailureContent
+> = {
+ "all-closed": ({ navigate }) => ({
+ description: "다음 기회에 다시 이용해 주세요.",
+ hasHomeAction: false,
+ illustration: LOCK_ILLUSTRATION,
+ primaryAction: { label: "홈으로 가기", onClick: () => navigate("/") },
+ title: "사물함 신청이 모두 마감됐어요",
+ }),
+ network: ({ retry }) => ({
+ description: "연결 상태를 확인한 후 다시 시도해 주세요.",
+ hasHomeAction: true,
+ illustration: