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

style(control-center): Quick Controls 재질과 모션 규칙 통일

Browse Source
This commit is contained in:
corpi
2026-03-04 14:44:45 +09:00
parent 3cddd3c1f4
commit 5c17bcf250
2 changed files with 41 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/widgets/space-sheet-shell/ui/SpaceSideSheet.tsx
View File

@@ -2,8 +2,7 @@
import { useEffect, useRef, useState, type ReactNode } from 'react';
import { cn } from '@/shared/lib/cn';
const SHEET_TRANSITION_MS = 300;
import { useReducedMotion } from '@/shared/lib/useReducedMotion';
interface SpaceSideSheetProps {
open: boolean;
@@ -28,6 +27,8 @@ export const SpaceSideSheet = ({
dismissible = true,
headerAction,
}: SpaceSideSheetProps) => {
const reducedMotion = useReducedMotion();
const transitionMs = reducedMotion ? 0 : 260;
const closeTimerRef = useRef<number | null>(null);
const [shouldRender, setShouldRender] = useState(open);
const [visible, setVisible] = useState(open);
@@ -53,7 +54,7 @@ export const SpaceSideSheet = ({
closeTimerRef.current = window.setTimeout(() => {
setShouldRender(false);
closeTimerRef.current = null;
}, SHEET_TRANSITION_MS);
}, transitionMs);
return () => {
if (closeTimerRef.current) {
@@ -61,7 +62,7 @@ export const SpaceSideSheet = ({
closeTimerRef.current = null;
}
};
}, [open]);
}, [open, transitionMs]);
useEffect(() => {
if (!open) {
@@ -93,7 +94,8 @@ export const SpaceSideSheet = ({
aria-label="시트 닫기"
onClick={onClose}
className={cn(
'fixed inset-0 z-40 bg-slate-950/14 backdrop-blur-[1px] transition-opacity duration-300',
'fixed inset-0 z-40 bg-slate-950/14 backdrop-blur-[1px] transition-opacity',
reducedMotion ? 'duration-0' : 'duration-[240ms]',
visible ? 'opacity-100' : 'pointer-events-none opacity-0',
)}
/>
@@ -101,7 +103,8 @@ export const SpaceSideSheet = ({
<div
aria-hidden
className={cn(
'fixed inset-0 z-40 bg-slate-950/8 backdrop-blur-[1px] transition-opacity duration-300',
'fixed inset-0 z-40 bg-slate-950/8 backdrop-blur-[1px] transition-opacity',
reducedMotion ? 'duration-0' : 'duration-[240ms]',
visible ? 'opacity-100' : 'opacity-0',
)}
/>
@@ -109,15 +112,17 @@ export const SpaceSideSheet = ({
<aside
className={cn(
'fixed inset-y-0 right-0 z-50 p-2 transition-opacity duration-300 sm:p-3',
'fixed inset-y-0 right-0 z-50 p-2 transition-opacity sm:p-3',
reducedMotion ? 'duration-0' : 'duration-[260ms]',
visible ? 'opacity-100' : 'pointer-events-none opacity-0',
widthClassName ?? 'w-[min(360px,92vw)]',
)}
>
<div
className={cn(
'flex h-full flex-col overflow-hidden rounded-3xl border border-white/14 bg-[linear-gradient(180deg,rgba(15,23,42,0.74)_0%,rgba(10,15,30,0.62)_100%)] text-white shadow-[0_18px_52px_rgba(2,6,23,0.34)] backdrop-blur-2xl transition-transform duration-300',
visible ? 'translate-x-0' : 'translate-x-8',
'flex h-full flex-col overflow-hidden rounded-3xl border border-white/12 bg-black/24 text-white shadow-[0_18px_52px_rgba(2,6,23,0.34)] backdrop-blur-xl transition-transform',
reducedMotion ? 'duration-0' : 'duration-[260ms]',
visible || reducedMotion ? 'translate-x-0' : 'translate-x-8',
)}
>
<header className="flex items-start justify-between gap-3 border-b border-white/7 px-4 py-3 sm:px-5">