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

fix(space): Quick Controls 사운드 복원과 HUD 피드백 정합성 수정

Browse Source
This commit is contained in:
corpi
2026-03-05 16:24:53 +09:00
parent b1bafd5e9a
commit f3f0518588
5 changed files with 109 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/features/restart-30s/model/useRestart30s.ts
View File

@@ -1,32 +1,17 @@
'use client';
import { useEffect, useRef, useState } from 'react';
import { useToast } from '@/shared/ui';
import {
RECOVERY_30S_BUTTON_LABEL,
RECOVERY_30S_TOAST_MESSAGE,
} from './copy';
const MODE_DURATION_MS = 2000;
const HINT_DURATION_MS = 1800;
export const useRestart30s = () => {
const { pushToast } = useToast();
const [isBreatheMode, setBreatheMode] = useState(false);
const [hintMessage, setHintMessage] = useState<string | null>(null);
const resetTimerRef = useRef<number | null>(null);
const hintTimerRef = useRef<number | null>(null);
const clearTimers = () => {
if (resetTimerRef.current !== null) {
window.clearTimeout(resetTimerRef.current);
resetTimerRef.current = null;
}
if (hintTimerRef.current !== null) {
window.clearTimeout(hintTimerRef.current);
hintTimerRef.current = null;
}
};
useEffect(() => {
@@ -38,16 +23,6 @@ export const useRestart30s = () => {
const triggerRestart = () => {
clearTimers();
setBreatheMode(true);
setHintMessage(RECOVERY_30S_TOAST_MESSAGE);
pushToast({
title: RECOVERY_30S_BUTTON_LABEL,
description: RECOVERY_30S_TOAST_MESSAGE,
});
hintTimerRef.current = window.setTimeout(() => {
setHintMessage(null);
}, HINT_DURATION_MS);
resetTimerRef.current = window.setTimeout(() => {
setBreatheMode(false);
@@ -56,7 +31,6 @@ export const useRestart30s = () => {
return {
isBreatheMode,
hintMessage,
triggerRestart,
};
};

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

@@ -4,10 +4,11 @@ import { useMemo } from 'react';
import type { PlanTier } from '@/entities/plan';
import {
PRO_LOCKED_ROOM_IDS,
PRO_LOCKED_SOUND_IDS,
PRO_LOCKED_TIMER_LABELS,
} from '@/entities/plan';
import { getRoomCardBackgroundStyle, type RoomTheme } from '@/entities/room';
import type { TimerPreset } from '@/entities/session';
import { SOUND_PRESETS, type TimerPreset } from '@/entities/session';
import { cn } from '@/shared/lib/cn';
import { useReducedMotion } from '@/shared/lib/useReducedMotion';
import { Toggle } from '@/shared/ui';
@@ -17,6 +18,7 @@ interface ControlCenterSheetWidgetProps {
rooms: RoomTheme[];
selectedRoomId: string;
selectedTimerLabel: string;
selectedSoundPresetId: string;
sceneRecommendedSoundLabel: string;
sceneRecommendedTimerLabel: string;
timerPresets: TimerPreset[];
@@ -24,6 +26,7 @@ interface ControlCenterSheetWidgetProps {
onAutoHideControlsChange: (next: boolean) => void;
onSelectRoom: (roomId: string) => void;
onSelectTimer: (timerLabel: string) => void;
onSelectSound: (presetId: string) => void;
onLockedClick: (source: string) => void;
onResetToRecommended: () => void;
}
@@ -50,6 +53,7 @@ export const ControlCenterSheetWidget = ({
rooms,
selectedRoomId,
selectedTimerLabel,
selectedSoundPresetId,
sceneRecommendedSoundLabel,
sceneRecommendedTimerLabel,
timerPresets,
@@ -57,6 +61,7 @@ export const ControlCenterSheetWidget = ({
onAutoHideControlsChange,
onSelectRoom,
onSelectTimer,
onSelectSound,
onLockedClick,
onResetToRecommended,
}: ControlCenterSheetWidgetProps) => {
@@ -155,6 +160,44 @@ export const ControlCenterSheetWidget = ({
</div>
</section>
<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={SOUND_PRESETS.find((preset) => preset.id === selectedSoundPresetId)?.label ?? '기본'}
/>
<div className="grid grid-cols-3 gap-2">
{SOUND_PRESETS.slice(0, 6).map((preset) => {
const selected = preset.id === selectedSoundPresetId;
const locked = !isPro && PRO_LOCKED_SOUND_IDS.includes(preset.id);
return (
<button
key={preset.id}
type="button"
onClick={() => {
if (locked) {
onLockedClick(`사운드: ${preset.label}`);
return;
}
onSelectSound(preset.id);
}}
className={cn(
'relative rounded-xl border px-3 py-2 text-[11px]',
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]',
)}
>
{preset.label}
{locked ? <span className="ml-1 text-[9px] text-white/66">LOCK PRO</span> : null}
</button>
);
})}
</div>
</section>
<div className="space-y-1.5 rounded-xl border border-white/12 bg-white/[0.03] px-3 py-2.5">
<p className="text-[11px] text-white/58">추천: {sceneRecommendedSoundLabel} · {sceneRecommendedTimerLabel}</p>
<button

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

@@ -7,7 +7,6 @@ import { ExitHoldButton } from '@/features/exit-hold';
import { ManagePlanSheetContent, PaywallSheetContent } from '@/features/paywall-sheet';
import { PlanPill } from '@/features/plan-pill';
import type { HudStatusLinePayload } from '@/shared/lib/useHudStatusLine';
import { useToast } from '@/shared/ui';
import { cn } from '@/shared/lib/cn';
import { ControlCenterSheetWidget } from '@/widgets/control-center-sheet';
import { SpaceSideSheet } from '@/widgets/space-sheet-shell';
@@ -40,6 +39,7 @@ interface SpaceToolsDockWidgetProps {
onDeleteThought: (thoughtId: string) => RecentThought | null;
onSetThoughtCompleted: (thoughtId: string, isCompleted: boolean) => RecentThought | null;
onRestoreThought: (thought: RecentThought) => void;
onRestoreThoughts: (thoughts: RecentThought[]) => void;
onClearInbox: () => RecentThought[];
onResetToSceneRecommended: () => void;
onStatusMessage: (payload: HudStatusLinePayload) => void;
@@ -68,12 +68,12 @@ export const SpaceToolsDockWidget = ({
onDeleteThought,
onSetThoughtCompleted,
onRestoreThought,
onRestoreThoughts,
onClearInbox,
onResetToSceneRecommended,
onStatusMessage,
onExitRequested,
}: SpaceToolsDockWidgetProps) => {
const { pushToast } = useToast();
const [openPopover, setOpenPopover] = useState<SpaceAnchorPopoverId | null>(null);
const [utilityPanel, setUtilityPanel] = useState<SpaceUtilityPanelId | null>(null);
const [autoHideControls, setAutoHideControls] = useState(true);
@@ -121,8 +121,23 @@ export const SpaceToolsDockWidget = ({
}, [openPopover]);
useEffect(() => {
if (!isFocusMode || openPopover || utilityPanel) {
if (isFocusMode) {
return;
}
const rafId = window.requestAnimationFrame(() => {
setOpenPopover(null);
setUtilityPanel(null);
setIdle(false);
});
return () => {
window.cancelAnimationFrame(rafId);
};
}, [isFocusMode]);
useEffect(() => {
if (!isFocusMode || openPopover || utilityPanel) {
return;
}
@@ -197,6 +212,7 @@ export const SpaceToolsDockWidget = ({
}, [autoHideControls, utilityPanel]);
const openUtilityPanel = (panel: SpaceUtilityPanelId) => {
setIdle(false);
setOpenPopover(null);
setUtilityPanel(panel);
};
@@ -260,7 +276,25 @@ export const SpaceToolsDockWidget = ({
};
const handleInboxClear = () => {
onClearInbox();
const snapshot = onClearInbox();
if (snapshot.length === 0) {
onStatusMessage({ message: '비울 항목이 없어요.' });
return;
}
onStatusMessage({
message: '모두 비워짐',
durationMs: 4200,
priority: 'undo',
action: {
label: '실행취소',
onClick: () => {
onRestoreThoughts(snapshot);
onStatusMessage({ message: '복원했어요.' });
},
},
});
};
const handlePlanPillClick = () => {
@@ -273,13 +307,13 @@ export const SpaceToolsDockWidget = ({
};
const handleLockedClick = (source: string) => {
pushToast({ title: `${source}은(는) PRO 기능이에요.` });
onStatusMessage({ message: `${source}은(는) PRO 기능이에요.` });
openUtilityPanel('paywall');
};
const handleStartPro = () => {
setPlan('pro');
pushToast({ title: '결제(더미)' });
onStatusMessage({ message: '결제(더미)' });
openUtilityPanel('control-center');
};
@@ -321,7 +355,7 @@ export const SpaceToolsDockWidget = ({
return (
<>
{openPopover ? (
{isFocusMode && openPopover ? (
<button
type="button"
aria-label="팝오버 닫기"
@@ -364,7 +398,10 @@ export const SpaceToolsDockWidget = ({
/>
<button
type="button"
onClick={() => setOpenPopover((current) => (current === 'notes' ? null : 'notes'))}
onClick={() => {
setIdle(false);
setOpenPopover((current) => (current === 'notes' ? null : 'notes'));
}}
className="inline-flex items-center gap-1.5 rounded-full border border-white/14 bg-black/24 px-2.5 py-1.5 text-[11px] text-white/88 backdrop-blur-md transition-opacity hover:opacity-100"
>
<span aria-hidden className="text-white/82">{ANCHOR_ICON.notes}</span>
@@ -396,7 +433,10 @@ export const SpaceToolsDockWidget = ({
/>
<button
type="button"
onClick={() => setOpenPopover((current) => (current === 'sound' ? null : 'sound'))}
onClick={() => {
setIdle(false);
setOpenPopover((current) => (current === 'sound' ? null : 'sound'));
}}
className="inline-flex items-center gap-1.5 rounded-full border border-white/14 bg-black/24 px-2.5 py-1.5 text-[11px] text-white/88 backdrop-blur-md transition-opacity hover:opacity-100"
>
<span aria-hidden className="text-white/82">{ANCHOR_ICON.sound}</span>
@@ -431,7 +471,7 @@ export const SpaceToolsDockWidget = ({
) : null}
<SpaceSideSheet
open={utilityPanel !== null}
open={isFocusMode && utilityPanel !== null}
title={utilityPanel ? UTILITY_PANEL_TITLE[utilityPanel] : ''}
subtitle={utilityPanel === 'control-center' ? '배경 · 타이머 · 사운드를 그 자리에서 바꿔요.' : undefined}
headerAction={
@@ -449,6 +489,7 @@ export const SpaceToolsDockWidget = ({
rooms={rooms}
selectedRoomId={selectedRoomId}
selectedTimerLabel={selectedTimerLabel}
selectedSoundPresetId={selectedPresetId}
sceneRecommendedSoundLabel={sceneRecommendedSoundLabel}
sceneRecommendedTimerLabel={sceneRecommendedTimerLabel}
timerPresets={timerPresets}
@@ -460,6 +501,7 @@ export const SpaceToolsDockWidget = ({
onSelectTimer={(label) => {
onTimerSelect(label);
}}
onSelectSound={onQuickSoundSelect}
onLockedClick={handleLockedClick}
onResetToRecommended={onResetToSceneRecommended}
/>
@@ -484,8 +526,8 @@ export const SpaceToolsDockWidget = ({
{utilityPanel === 'manage-plan' ? (
<ManagePlanSheetContent
onClose={() => setUtilityPanel(null)}
onManage={() => pushToast({ title: '구독 관리(더미)' })}
onRestore={() => pushToast({ title: '구매 복원(더미)' })}
onManage={() => onStatusMessage({ message: '구독 관리(더미)' })}
onRestore={() => onStatusMessage({ message: '구매 복원(더미)' })}
/>
) : null}
</SpaceSideSheet>

2
src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx
View File

@@ -149,6 +149,7 @@ export const SpaceWorkspaceWidget = () => {
removeThought,
clearThoughts,
restoreThought,
restoreThoughts,
setThoughtCompleted,
} = useThoughtInbox();
@@ -409,6 +410,7 @@ export const SpaceWorkspaceWidget = () => {
onDeleteThought={removeThought}
onSetThoughtCompleted={setThoughtCompleted}
onRestoreThought={restoreThought}
onRestoreThoughts={restoreThoughts}
onClearInbox={clearThoughts}
onStatusMessage={pushStatusLine}
onExitRequested={handleExitRequested}