diff --git a/src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx b/src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx index 2a0c19e..ba5437c 100644 --- a/src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx +++ b/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; - onFinishHere: () => Promise | boolean; - onEndSession: () => Promise | boolean; + onAdvanceGoal: (nextGoal: string) => Promise | boolean; // kept for compatibility if needed + onFinishHere: () => Promise | boolean; // User achieved goal -> exit + onEndSession: () => Promise | boolean; // User did not achieve -> exit } export const EndSessionConfirmModal = ({ open, currentGoal, onClose, - onAdvanceGoal, onFinishHere, onEndSession, }: EndSessionConfirmModalProps) => { - const inputRef = useRef(null); const [stage, setStage] = useState('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) => { - 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 (
-
-
-
-
- -
- ✦ -
-

- {copy.space.endSession.eyebrow} -

-

- {title} -

-

- {description} -

-
+ - {trimmedGoal ? ( -
-

- {copy.space.endSession.goalLabel} + {stage === 'decision' && ( +

+

+ Session Review +

+

+ 이번 세션의 목표를
달성하셨나요? +

+ +
+

+ 현재 목표

-

+

{trimmedGoal}

- ) : null} - {stage === 'decision' ? ( -
+
-
- ) : null} +
+
+ )} - {stage === 'finished' ? ( -
- - - -
- ) : null} + {stage === 'success' && ( +
+
+ ✨ +
+

+ 완벽합니다. +

+

+ 성공적으로 목표를 완수했습니다.
스스로에게 보상을 줄 시간입니다. +

+ +
+ )} - {stage === 'unfinished' ? ( -
- - -
- ) : null} - - {stage === 'next' ? ( -
-
- - setDraft(event.target.value)} - placeholder={copy.space.endSession.nextGoalPlaceholder} - className={cn(HUD_FIELD, 'mt-2 h-[3.25rem] rounded-[20px] bg-white/[0.05]')} - /> -
- -
- - -
-
- ) : null} -
-
+ {stage === 'unfinished' && ( +
+
+ 🌱 +
+

+ 괜찮습니다.
집중은 근육이니까요. +

+

+ 조금씩 단련해나가면 됩니다.
이 흐름을 다음 세션에 이어서 해볼까요? +

+ +
+ )} +
); -}; +}; \ No newline at end of file diff --git a/src/widgets/space-focus-hud/ui/InlineMicrostep.tsx b/src/widgets/space-focus-hud/ui/InlineMicrostep.tsx index d919ad1..5cbdde4 100644 --- a/src/widgets/space-focus-hud/ui/InlineMicrostep.tsx +++ b/src/widgets/space-focus-hud/ui/InlineMicrostep.tsx @@ -137,9 +137,10 @@ export const InlineMicrostep = ({ microStep, isBusy, onUpdate }: InlineMicrostep type="button" onClick={startEditing} disabled={isBusy} - className="inline-flex items-center gap-2 rounded-full border border-dashed border-white/20 bg-transparent px-6 py-2.5 text-[14px] font-medium text-white/40 transition-all hover:border-white/40 hover:text-white/80 active:scale-95 disabled:opacity-50" + className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/20 backdrop-blur-md px-6 py-2.5 text-[14px] font-medium text-white/80 transition-all shadow-[0_4px_12px_rgba(0,0,0,0.1)] hover:border-white/30 hover:bg-black/30 hover:text-white active:scale-95 disabled:opacity-50" > - + Add microstep + + + Add microstep ); }; diff --git a/src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx b/src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx index 305a5bc..7bd197a 100644 --- a/src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx +++ b/src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx @@ -175,9 +175,9 @@ export const SpaceFocusHudWidget = ({ )} diff --git a/src/widgets/space-focus-hud/ui/ThoughtOrb.tsx b/src/widgets/space-focus-hud/ui/ThoughtOrb.tsx index f8e3020..b20ed2a 100644 --- a/src/widgets/space-focus-hud/ui/ThoughtOrb.tsx +++ b/src/widgets/space-focus-hud/ui/ThoughtOrb.tsx @@ -58,30 +58,41 @@ export const ThoughtOrb = ({ isFocusMode, onCaptureThought }: ThoughtOrbProps) = return (
- {/* The Orb */} + {/* The Magnetic Orb */} {/* Tooltip */}
- + Brain Dump
@@ -98,14 +109,15 @@ export const ThoughtOrb = ({ isFocusMode, onCaptureThought }: ThoughtOrbProps) = )} >
-
+ {/* Premium Smoked Glass Container */} +
setDraft(e.target.value)} disabled={isAbsorbing} placeholder="Dump a distracting thought..." - className="relative z-10 w-full bg-transparent px-6 py-5 text-[15px] font-medium text-white outline-none placeholder:text-white/30 disabled:opacity-50" + className="relative z-10 w-full bg-transparent px-6 py-5 text-[15px] font-medium text-white outline-none placeholder:text-white/40 drop-shadow-sm disabled:opacity-50" />