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

21
src/widgets/space-tools-dock/model/getQuickSoundPresets.ts Normal file
View File

@@ -0,0 +1,21 @@
import { PRO_LOCKED_SOUND_IDS } from '@/entities/plan';
import type { SoundPreset } from '@/entities/session';
const QUICK_SOUND_FALLBACK_IDS = ['rain-focus', 'deep-white', 'silent'] as const;
const isQuickAvailablePreset = (preset: SoundPreset | undefined): preset is SoundPreset => {
if (!preset) {
return false;
}
return !PRO_LOCKED_SOUND_IDS.includes(preset.id);
};
export const getQuickSoundPresets = (presets: SoundPreset[], selectedPresetId: string) => {
const uniquePresetIds = Array.from(new Set([selectedPresetId, ...QUICK_SOUND_FALLBACK_IDS]));
return uniquePresetIds
.map((presetId) => presets.find((preset) => preset.id === presetId))
.filter(isQuickAvailablePreset)
.slice(0, 3);
};

23
src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
View File

@@ -12,6 +12,7 @@ import { ControlCenterSheetWidget } from '@/widgets/control-center-sheet';
import { SpaceSideSheet } from '@/widgets/space-sheet-shell';
import type { SpaceAnchorPopoverId, SpaceUtilityPanelId } from '../model/types';
import { applyQuickPack } from '../model/applyQuickPack';
import { getQuickSoundPresets } from '../model/getQuickSoundPresets';
import { ANCHOR_ICON, formatThoughtCount, RAIL_ICON, UTILITY_PANEL_TITLE } from './constants';
import { InboxToolPanel } from './panels/InboxToolPanel';
interface SpaceToolsDockWidgetProps {
@@ -68,6 +69,10 @@ export const SpaceToolsDockWidget = ({
);
}, [selectedPresetId]);
const quickSoundPresets = useMemo(() => {
return getQuickSoundPresets(SOUND_PRESETS, selectedPresetId);
}, [selectedPresetId]);
useEffect(() => {
if (!openPopover) {
return;
@@ -389,12 +394,12 @@ export const SpaceToolsDockWidget = ({
{openPopover === 'sound' ? (
<div
className="mb-2 w-[min(300px,calc(100vw-2rem))] rounded-2xl border border-white/14 bg-slate-950/74 p-3 shadow-[0_18px_44px_rgba(2,6,23,0.4)] backdrop-blur-xl animate-[popover-rise_220ms_ease-out] motion-reduce:animate-none"
className="mb-2 w-[min(288px,calc(100vw-2rem))] rounded-2xl border border-white/14 bg-slate-950/74 p-3 shadow-[0_18px_44px_rgba(2,6,23,0.4)] backdrop-blur-xl animate-[popover-rise_220ms_ease-out] motion-reduce:animate-none"
style={{ position: 'absolute', bottom: 'calc(100% + 0.5rem)', right: 0 }}
>
<p className="text-[11px] text-white/56">사운드 프리셋</p>
<p className="text-[11px] text-white/56">빠른 사운드 전환</p>
<div className="mt-2 flex flex-wrap gap-1.5">
{SOUND_PRESETS.slice(0, 6).map((preset) => {
{quickSoundPresets.map((preset) => {
const selected = preset.id === selectedPresetId;
return (
@@ -403,6 +408,7 @@ export const SpaceToolsDockWidget = ({
type="button"
onClick={() => {
onSelectPreset(preset.id);
pushToast({ title: `${preset.label}로 전환했어요.` });
setOpenPopover(null);
}}
className={cn(
@@ -417,15 +423,6 @@ export const SpaceToolsDockWidget = ({
);
})}
</div>
<div className="mt-2 flex justify-end">
<button
type="button"
onClick={() => openUtilityPanel('control-center')}
className="text-[11px] text-white/62 transition-colors hover:text-white/88"
>
Control Center
</button>
</div>
</div>
) : null}
</div>
@@ -442,6 +439,8 @@ export const SpaceToolsDockWidget = ({
<PlanPill plan={plan} onClick={handlePlanPillClick} />
) : undefined
}
widthClassName={utilityPanel === 'control-center' ? 'w-[min(408px,94vw)]' : undefined}
overlayClassName={utilityPanel === 'control-center' ? 'bg-slate-950/6 backdrop-blur-none' : undefined}
onClose={() => setUtilityPanel(null)}
>
{utilityPanel === 'control-center' ? (