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

refactor(quick-controls): 사운드 역할 분리와 패널 레이아웃·오버레이 개선

Browse Source
This commit is contained in:
corpi
2026-03-04 14:55:14 +09:00
parent 5c17bcf250
commit 8f64637b6f
4 changed files with 51 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -106,11 +106,14 @@ export const ControlCenterSheetWidget = ({
}, [selectedSoundPresetId, soundPresets]);
return (
<div className="space-y-4">
<section className="space-y-2 rounded-2xl border border-white/12 bg-black/22 p-3 backdrop-blur-md">
<div className="space-y-5">
<section className="space-y-2.5 rounded-2xl border border-white/12 bg-black/22 p-3.5 backdrop-blur-md">
<SectionTitle title="Scene" description={selectedRoom?.name ?? '공간'} />
<div
className={cn('-mx-1 flex gap-2 overflow-x-auto px-1 pb-1 snap-x snap-mandatory', reducedMotion ? '' : 'scroll-smooth')}
className={cn(
'-mx-1 flex gap-2.5 overflow-x-auto px-1 pb-1.5 snap-x snap-mandatory',
reducedMotion ? '' : 'scroll-smooth',
)}
style={{ scrollBehavior: reducedMotion ? 'auto' : 'smooth' }}
>
{rooms.slice(0, 6).map((room) => {
@@ -149,9 +152,9 @@ export const ControlCenterSheetWidget = ({
</div>
</section>
<section className="space-y-2 rounded-2xl border border-white/12 bg-black/22 p-3 backdrop-blur-md">
<section className="space-y-2.5 rounded-2xl border border-white/12 bg-black/22 p-3.5 backdrop-blur-md">
<SectionTitle title="Time" description={selectedTimerLabel} />
<div className="grid grid-cols-3 gap-1.5">
<div className="grid grid-cols-3 gap-2">
{timerPresets.slice(0, 3).map((preset) => {
const selected = preset.label === selectedTimerLabel;
const locked = !isPro && PRO_LOCKED_TIMER_LABELS.includes(preset.label);
@@ -169,7 +172,7 @@ export const ControlCenterSheetWidget = ({
onSelectTimer(preset.label);
}}
className={cn(
'relative rounded-xl border px-2 py-2 text-xs',
'relative rounded-xl border px-3 py-2.5 text-xs',
colorMotionClass,
selected
? 'border-sky-200/42 bg-sky-200/16 text-white'
@@ -184,9 +187,9 @@ export const ControlCenterSheetWidget = ({
</div>
</section>
<section className="space-y-2 rounded-2xl border border-white/12 bg-black/22 p-3 backdrop-blur-md">
<section className="space-y-2.5 rounded-2xl border border-white/12 bg-black/22 p-3.5 backdrop-blur-md">
<SectionTitle title="Sound" description={selectedSound?.label ?? '기본'} />
<div className="flex flex-wrap gap-1.5">
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
{soundPresets.slice(0, 6).map((preset) => {
const selected = preset.id === selectedSoundPresetId;
const locked = !isPro && PRO_LOCKED_SOUND_IDS.includes(preset.id);
@@ -204,7 +207,7 @@ export const ControlCenterSheetWidget = ({
onSelectSound(preset.id);
}}
className={cn(
'rounded-full border px-3 py-1.5 text-xs',
'rounded-xl border px-3 py-2 text-xs',
colorMotionClass,
selected
? 'border-sky-200/42 bg-sky-200/16 text-white'
@@ -219,9 +222,9 @@ export const ControlCenterSheetWidget = ({
</div>
</section>
<section className="space-y-2 rounded-2xl border border-white/12 bg-black/22 p-3 backdrop-blur-md">
<section className="space-y-2.5 rounded-2xl border border-white/12 bg-black/22 p-3.5 backdrop-blur-md">
<SectionTitle title="Preset Packs" description="원탭 조합" />
<div className="grid gap-1.5">
<div className="grid gap-2.5">
{QUICK_PACKS.map((pack) => {
const locked = !isPro && pack.locked;
@@ -238,7 +241,7 @@ export const ControlCenterSheetWidget = ({
onApplyPack(pack.id);
}}
className={cn(
'relative rounded-xl border border-white/16 bg-white/[0.04] px-3 py-2 text-left hover:bg-white/[0.1]',
'relative rounded-xl border border-white/16 bg-white/[0.04] px-3.5 py-2.5 text-left hover:bg-white/[0.1]',
colorMotionClass,
)}
>