corpi/viberoom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(space): explicit end session close flow 적용

Browse Source
This commit is contained in:
corpi
2026-03-17 12:45:38 +09:00
parent 1d2ce85cfd
commit 4bbee36e1e
9 changed files with 272 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx Normal file
View File

@@ -0,0 +1,103 @@
'use client';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';
interface EndSessionConfirmModalProps {
open: boolean;
goal: string;
isPending?: boolean;
onClose: () => void;
onConfirm: () => void | Promise<void>;
}
export const EndSessionConfirmModal = ({
open,
goal,
isPending = false,
onClose,
onConfirm,
}: EndSessionConfirmModalProps) => {
const trimmedGoal = goal.trim();
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)]',
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',
open ? 'opacity-100' : 'opacity-0',
)}
/>
<section
className={cn(
'relative w-full max-w-[34rem] 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]',
)}
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">
<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]"
>
{copy.space.endSession.title}
</h3>
<p className="mx-auto mt-3 max-w-[26rem] text-[14px] leading-[1.7] text-white/56">
{copy.space.endSession.description}
</p>
</header>
{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}
</p>
<p className="mt-2 text-[15px] font-medium leading-[1.45] tracking-[-0.01em] text-white/88">
{trimmedGoal}
</p>
</div>
) : null}
<footer className="mt-6 grid grid-cols-2 gap-3">
<button
type="button"
onClick={onClose}
disabled={isPending}
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.cancelButton}
</button>
<button
type="button"
onClick={() => void onConfirm()}
disabled={isPending}
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"
>
{isPending ? copy.space.endSession.confirmPending : copy.space.endSession.confirmButton}
</button>
</footer>
</div>
</section>
</div>
);
};