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

36
src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx
View File

@@ -10,6 +10,7 @@ import {
import { getRoomCardBackgroundStyle, type RoomTheme } from '@/entities/room';
import type { SoundPreset, TimerPreset } from '@/entities/session';
import { cn } from '@/shared/lib/cn';
import { useReducedMotion } from '@/shared/lib/useReducedMotion';
interface ControlCenterSheetWidgetProps {
plan: PlanTier;
@@ -87,7 +88,14 @@ export const ControlCenterSheetWidget = ({
onApplyPack,
onLockedClick,
}: ControlCenterSheetWidgetProps) => {
const reducedMotion = useReducedMotion();
const isPro = plan === 'pro';
const interactiveMotionClass = reducedMotion
? 'transition-none'
: 'transition-[transform,background-color,border-color,box-shadow,color,opacity] duration-[220ms] ease-out';
const colorMotionClass = reducedMotion
? 'transition-none'
: 'transition-colors duration-[220ms] ease-out';
const selectedRoom = useMemo(() => {
return rooms.find((room) => room.id === selectedRoomId) ?? rooms[0];
@@ -99,9 +107,12 @@ export const ControlCenterSheetWidget = ({
return (
<div className="space-y-4">
<section className="space-y-2 rounded-2xl border border-white/14 bg-white/[0.035] p-3">
<section className="space-y-2 rounded-2xl border border-white/12 bg-black/22 p-3 backdrop-blur-md">
<SectionTitle title="Scene" description={selectedRoom?.name ?? '공간'} />
<div className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-1">
<div
className={cn('-mx-1 flex gap-2 overflow-x-auto px-1 pb-1 snap-x snap-mandatory', reducedMotion ? '' : 'scroll-smooth')}
style={{ scrollBehavior: reducedMotion ? 'auto' : 'smooth' }}
>
{rooms.slice(0, 6).map((room) => {
const selected = room.id === selectedRoomId;
const locked = !isPro && PRO_LOCKED_ROOM_IDS.includes(room.id);
@@ -119,7 +130,9 @@ export const ControlCenterSheetWidget = ({
onSelectRoom(room.id);
}}
className={cn(
'relative h-24 w-[130px] shrink-0 overflow-hidden rounded-xl border text-left transition-transform hover:-translate-y-0.5',
'relative h-24 w-[130px] shrink-0 snap-start overflow-hidden rounded-xl border text-left',
interactiveMotionClass,
reducedMotion ? '' : 'hover:-translate-y-0.5',
selected ? 'border-sky-200/44 shadow-[0_8px_16px_rgba(56,189,248,0.18)]' : 'border-white/16',
)}
>
@@ -136,7 +149,7 @@ export const ControlCenterSheetWidget = ({
</div>
</section>
<section className="space-y-2 rounded-2xl border border-white/14 bg-white/[0.035] p-3">
<section className="space-y-2 rounded-2xl border border-white/12 bg-black/22 p-3 backdrop-blur-md">
<SectionTitle title="Time" description={selectedTimerLabel} />
<div className="grid grid-cols-3 gap-1.5">
{timerPresets.slice(0, 3).map((preset) => {
@@ -156,7 +169,8 @@ export const ControlCenterSheetWidget = ({
onSelectTimer(preset.label);
}}
className={cn(
'relative rounded-xl border px-2 py-2 text-xs transition-colors',
'relative rounded-xl border px-2 py-2 text-xs',
colorMotionClass,
selected
? 'border-sky-200/42 bg-sky-200/16 text-white'
: 'border-white/18 bg-white/[0.04] text-white/74 hover:bg-white/[0.1]',
@@ -170,7 +184,7 @@ export const ControlCenterSheetWidget = ({
</div>
</section>
<section className="space-y-2 rounded-2xl border border-white/14 bg-white/[0.035] p-3">
<section className="space-y-2 rounded-2xl border border-white/12 bg-black/22 p-3 backdrop-blur-md">
<SectionTitle title="Sound" description={selectedSound?.label ?? '기본'} />
<div className="flex flex-wrap gap-1.5">
{soundPresets.slice(0, 6).map((preset) => {
@@ -190,7 +204,8 @@ export const ControlCenterSheetWidget = ({
onSelectSound(preset.id);
}}
className={cn(
'rounded-full border px-3 py-1.5 text-xs transition-colors',
'rounded-full border px-3 py-1.5 text-xs',
colorMotionClass,
selected
? 'border-sky-200/42 bg-sky-200/16 text-white'
: 'border-white/18 bg-white/[0.04] text-white/74 hover:bg-white/[0.1]',
@@ -204,7 +219,7 @@ export const ControlCenterSheetWidget = ({
</div>
</section>
<section className="space-y-2 rounded-2xl border border-white/14 bg-white/[0.035] p-3">
<section className="space-y-2 rounded-2xl border border-white/12 bg-black/22 p-3 backdrop-blur-md">
<SectionTitle title="Preset Packs" description="원탭 조합" />
<div className="grid gap-1.5">
{QUICK_PACKS.map((pack) => {
@@ -222,7 +237,10 @@ export const ControlCenterSheetWidget = ({
onApplyPack(pack.id);
}}
className="relative rounded-xl border border-white/16 bg-white/[0.04] px-3 py-2 text-left transition-colors hover:bg-white/[0.1]"
className={cn(
'relative rounded-xl border border-white/16 bg-white/[0.04] px-3 py-2 text-left hover:bg-white/[0.1]',
colorMotionClass,
)}
>
{locked ? <LockBadge /> : null}
<p className="text-sm font-medium text-white/90">{pack.name}</p>