refactor(space): polish focus hud ui

src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx

@@ -1,322 +1,172 @@
 'use client';
 
-import { type FormEvent, useEffect, useRef, useState } from 'react';
-import { copy } from '@/shared/i18n';
+import { useEffect, useState } from 'react';
 import { cn } from '@/shared/lib/cn';
-import { HUD_FIELD } from './overlayStyles';
 
-type EndSessionStage = 'decision' | 'finished' | 'unfinished' | 'next';
+type EndSessionStage = 'decision' | 'success' | 'unfinished';
 
 interface EndSessionConfirmModalProps {
   open: boolean;
   currentGoal: string;
   onClose: () => void;
-  onAdvanceGoal: (nextGoal: string) => Promise<boolean> | boolean;
-  onFinishHere: () => Promise<boolean> | boolean;
-  onEndSession: () => Promise<boolean> | boolean;
+  onAdvanceGoal: (nextGoal: string) => Promise<boolean> | boolean; // kept for compatibility if needed
+  onFinishHere: () => Promise<boolean> | boolean; // User achieved goal -> exit
+  onEndSession: () => Promise<boolean> | boolean; // User did not achieve -> exit
 }
 
 export const EndSessionConfirmModal = ({
   open,
   currentGoal,
   onClose,
-  onAdvanceGoal,
   onFinishHere,
   onEndSession,
 }: EndSessionConfirmModalProps) => {
-  const inputRef = useRef<HTMLInputElement | null>(null);
   const [stage, setStage] = useState<EndSessionStage>('decision');
-  const [draft, setDraft] = useState('');
-  const [submissionMode, setSubmissionMode] = useState<'next' | 'finish' | 'end' | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const trimmedGoal = currentGoal.trim();
-  const trimmedDraft = draft.trim();
-  const isSubmitting = submissionMode !== null;
-  const canConfirmNext = trimmedDraft.length > 0;
+  const trimmedGoal = currentGoal.trim() || '목표 없음';
 
   useEffect(() => {
     if (!open) {
-      setStage('decision');
-      setDraft('');
-      setSubmissionMode(null);
-      return;
+      setTimeout(() => setStage('decision'), 300); // Reset after close animation
+      setIsSubmitting(false);
     }
+  }, [open]);
 
-    if (stage !== 'next') {
-      return;
-    }
-
-    const rafId = window.requestAnimationFrame(() => {
-      inputRef.current?.focus();
-    });
-
-    return () => {
-      window.cancelAnimationFrame(rafId);
-    };
-  }, [open, stage]);
-
-  const handleFinishHere = async () => {
-    if (isSubmitting) {
-      return;
-    }
-
-    setSubmissionMode('finish');
-
+  const handleFinish = async () => {
+    if (isSubmitting) return;
+    setIsSubmitting(true);
     try {
       const didFinish = await onFinishHere();
-
-      if (didFinish) {
-        onClose();
-      }
+      if (didFinish) onClose();
     } finally {
-      setSubmissionMode(null);
+      setIsSubmitting(false);
     }
   };
 
-  const handleEndSession = async () => {
-    if (isSubmitting) {
-      return;
-    }
-
-    setSubmissionMode('end');
-
+  const handleEnd = async () => {
+    if (isSubmitting) return;
+    setIsSubmitting(true);
     try {
       const didEnd = await onEndSession();
-
-      if (didEnd) {
-        onClose();
-      }
+      if (didEnd) onClose();
     } finally {
-      setSubmissionMode(null);
+      setIsSubmitting(false);
     }
   };
 
-  const handleAdvanceGoal = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!canConfirmNext || isSubmitting) {
-      return;
-    }
-
-    setSubmissionMode('next');
-
-    try {
-      const didAdvance = await onAdvanceGoal(trimmedDraft);
-
-      if (didAdvance) {
-        onClose();
-      }
-    } finally {
-      setSubmissionMode(null);
-    }
-  };
-
-  const title =
-    stage === 'finished'
-      ? copy.space.endSession.finishedTitle
-      : stage === 'unfinished'
-        ? copy.space.endSession.unfinishedTitle
-        : stage === 'next'
-          ? copy.space.goalComplete.nextTitle
-          : copy.space.endSession.title;
-  const description =
-    stage === 'finished'
-      ? copy.space.endSession.finishedDescription
-      : stage === 'unfinished'
-        ? copy.space.endSession.unfinishedDescription
-        : stage === 'next'
-          ? copy.space.goalComplete.nextDescription
-          : copy.space.endSession.description;
-
   return (
     <div
       className={cn(
-        'pointer-events-none fixed inset-0 z-[65] flex items-center justify-center px-4 transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
+        'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]',
         open ? 'opacity-100' : 'opacity-0',
       )}
       aria-hidden={!open}
     >
       <div
         className={cn(
-          'absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(5,7,11,0.2)_0%,rgba(2,6,23,0.58)_48%,rgba(2,6,23,0.78)_100%)] backdrop-blur-[10px] transition-opacity duration-300',
+          'absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.95)_100%)] backdrop-blur-2xl transition-opacity duration-500',
           open ? 'opacity-100' : 'opacity-0',
         )}
       />
 
-      <section
+      <div
         className={cn(
-          'relative w-full max-w-[38rem] overflow-hidden rounded-[30px] border border-white/12 bg-[linear-gradient(180deg,rgba(18,22,30,0.95)_0%,rgba(8,11,17,0.93)_100%)] text-white shadow-[0_28px_90px_rgba(2,6,23,0.52)] transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
-          open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-4 scale-[0.975]',
+          'relative flex w-full max-w-2xl flex-col items-center text-center transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]',
+          open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-8 scale-95',
         )}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="end-session-confirm-title"
       >
-        <div
-          aria-hidden
-          className="pointer-events-none absolute inset-0 bg-[radial-gradient(110%_90%_at_50%_0%,rgba(255,255,255,0.12)_0%,rgba(255,255,255,0.02)_42%,rgba(255,255,255,0)_100%)]"
-        />
-        <div className="relative px-7 py-7 md:px-9 md:py-8">
-          <header className="text-center">
-            <button
-              type="button"
-              onClick={onClose}
-              disabled={isSubmitting}
-              className="absolute right-0 top-0 inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-[12px] text-white/64 transition-all hover:border-white/16 hover:bg-white/[0.08] hover:text-white disabled:cursor-not-allowed disabled:opacity-30"
-              aria-label={copy.modal.closeAriaLabel}
-            >
-              ✕
-            </button>
-            <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.06] shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
-              <span className="text-[20px] text-white/88">✦</span>
-            </div>
-            <p className="mt-5 text-[11px] font-medium tracking-[0.14em] text-white/34">
-              {copy.space.endSession.eyebrow}
-            </p>
-            <h3
-              id="end-session-confirm-title"
-              className="mx-auto mt-2 max-w-[24rem] text-[1.65rem] font-light leading-[1.16] tracking-[-0.03em] text-white/96 md:text-[1.9rem]"
-            >
-              {title}
-            </h3>
-            <p className="mx-auto mt-3 max-w-[28rem] text-[14px] leading-[1.7] text-white/56">
-              {description}
-            </p>
-          </header>
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={isSubmitting}
+          className="absolute right-0 top-0 p-2 text-white/40 hover:text-white transition-colors"
+          aria-label="닫기"
+        >
+          ✕
+        </button>
 
-          {trimmedGoal ? (
-            <div className="mt-6 rounded-[24px] border border-white/8 bg-black/14 px-5 py-4 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
-              <p className="text-[10px] font-medium uppercase tracking-[0.22em] text-white/34">
-                {copy.space.endSession.goalLabel}
+        {stage === 'decision' && (
+          <div className="flex flex-col items-center animate-fade-in-up w-full">
+            <p className="text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 mb-6 drop-shadow-md">
+              Session Review
+            </p>
+            <h3 className="text-3xl md:text-5xl font-light tracking-tight text-white mb-10 leading-tight">
+              이번 세션의 목표를<br/>달성하셨나요?
+            </h3>
+
+            <div className="w-full max-w-lg rounded-3xl border border-white/10 bg-white/5 p-6 mb-12 backdrop-blur-md shadow-2xl">
+              <p className="text-[10px] font-semibold uppercase tracking-widest text-white/40 mb-3">
+                현재 목표
               </p>
-              <p className="mt-2 text-[15px] font-medium leading-[1.45] tracking-[-0.01em] text-white/88">
+              <p className="text-xl font-medium text-white/90">
                 {trimmedGoal}
               </p>
             </div>
-          ) : null}
 
-          {stage === 'decision' ? (
-            <footer className="mt-6 grid grid-cols-2 gap-3">
+            <div className="flex flex-col sm:flex-row w-full max-w-md gap-4">
               <button
                 type="button"
-                onClick={() => setStage('finished')}
-                disabled={isSubmitting}
-                className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
+                onClick={() => setStage('success')}
+                className="flex-1 rounded-full bg-white text-black px-6 py-4 text-[15px] font-semibold shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all hover:scale-105 active:scale-95"
               >
-                {copy.space.endSession.finishedAnswer}
+                네, 해냈습니다
               </button>
               <button
                 type="button"
                 onClick={() => setStage('unfinished')}
-                disabled={isSubmitting}
-                className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
+                className="flex-1 rounded-full border border-white/20 bg-black/40 text-white px-6 py-4 text-[15px] font-medium backdrop-blur-md transition-all hover:bg-white/10 hover:border-white/40 active:scale-95"
               >
-                {copy.space.endSession.unfinishedAnswer}
+                아뇨, 아직입니다
               </button>
-            </footer>
-          ) : null}
+            </div>
+          </div>
+        )}
 
-          {stage === 'finished' ? (
-            <footer className="mt-6 grid grid-cols-3 gap-3">
-              <button
-                type="button"
-                onClick={() => setStage('decision')}
-                disabled={isSubmitting}
-                className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
-              >
-                {copy.space.endSession.backButton}
-              </button>
-              <button
-                type="button"
-                onClick={() => setStage('next')}
-                disabled={isSubmitting}
-                className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
-              >
-                {copy.space.endSession.nextBlockButton}
-              </button>
-              <button
-                type="button"
-                onClick={handleFinishHere}
-                disabled={isSubmitting}
-                className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
-              >
-                {submissionMode === 'finish'
-                  ? copy.space.goalComplete.finishPending
-                  : copy.space.endSession.finishHereButton}
-              </button>
-            </footer>
-          ) : null}
+        {stage === 'success' && (
+          <div className="flex flex-col items-center animate-fade-in-up w-full">
+            <div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.2),transparent)] border border-white/20 shadow-[0_0_50px_rgba(255,255,255,0.2)]">
+              <span className="text-4xl">✨</span>
+            </div>
+            <h3 className="text-4xl md:text-5xl font-light tracking-tight text-white mb-6">
+              완벽합니다.
+            </h3>
+            <p className="text-lg text-white/60 font-light mb-12 max-w-md leading-relaxed">
+              성공적으로 목표를 완수했습니다.<br/>스스로에게 보상을 줄 시간입니다.
+            </p>
+            <button
+              type="button"
+              onClick={handleFinish}
+              disabled={isSubmitting}
+              className="rounded-full bg-white text-black px-10 py-4 text-[15px] font-semibold shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
+            >
+              {isSubmitting ? '저장 중...' : '로비로 돌아가기'}
+            </button>
+          </div>
+        )}
 
-          {stage === 'unfinished' ? (
-            <footer className="mt-6 grid grid-cols-2 gap-3">
-              <button
-                type="button"
-                onClick={() => setStage('decision')}
-                disabled={isSubmitting}
-                className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
-              >
-                {copy.space.endSession.backButton}
-              </button>
-              <button
-                type="button"
-                onClick={handleEndSession}
-                disabled={isSubmitting}
-                className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
-              >
-                {submissionMode === 'end'
-                  ? copy.space.endSession.confirmPending
-                  : copy.space.endSession.endHereButton}
-              </button>
-            </footer>
-          ) : null}
-
-          {stage === 'next' ? (
-            <form className="mt-6 space-y-4" onSubmit={handleAdvanceGoal}>
-              <div className="text-left">
-                <label
-                  htmlFor="end-session-next-goal"
-                  className="text-[11px] font-medium tracking-[0.12em] text-white/36"
-                >
-                  {copy.space.endSession.nextGoalLabel}
-                </label>
-                <input
-                  ref={inputRef}
-                  id="end-session-next-goal"
-                  value={draft}
-                  onChange={(event) => setDraft(event.target.value)}
-                  placeholder={copy.space.endSession.nextGoalPlaceholder}
-                  className={cn(HUD_FIELD, 'mt-2 h-[3.25rem] rounded-[20px] bg-white/[0.05]')}
-                />
-              </div>
-
-              <footer className="grid grid-cols-2 gap-3 pt-2">
-                <button
-                  type="button"
-                  onClick={() => {
-                    if (isSubmitting) {
-                      return;
-                    }
-                    setStage('finished');
-                  }}
-                  disabled={isSubmitting}
-                  className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
-                >
-                  {copy.space.endSession.backButton}
-                </button>
-                <button
-                  type="submit"
-                  disabled={!canConfirmNext || isSubmitting}
-                  className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
-                >
-                  {submissionMode === 'next'
-                    ? copy.space.goalComplete.confirmPending
-                    : copy.space.endSession.nextGoalConfirmButton}
-                </button>
-              </footer>
-            </form>
-          ) : null}
-        </div>
-      </section>
+        {stage === 'unfinished' && (
+          <div className="flex flex-col items-center animate-fade-in-up w-full">
+            <div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.1),transparent)] border border-white/10">
+              <span className="text-4xl opacity-80">🌱</span>
+            </div>
+            <h3 className="text-3xl md:text-4xl font-light tracking-tight text-white mb-6">
+              괜찮습니다.<br/>집중은 근육이니까요.
+            </h3>
+            <p className="text-[16px] text-white/60 font-light mb-12 max-w-md leading-relaxed">
+              조금씩 단련해나가면 됩니다.<br/>이 흐름을 다음 세션에 이어서 해볼까요?
+            </p>
+            <button
+              type="button"
+              onClick={handleEnd}
+              disabled={isSubmitting}
+              className="rounded-full border border-white/20 bg-white/10 text-white px-10 py-4 text-[15px] font-medium backdrop-blur-md transition-all hover:bg-white/20 active:scale-95 disabled:opacity-50"
+            >
+              {isSubmitting ? '저장 중...' : '저장하고 로비로 돌아가기'}
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
-};
+};