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

fix(space-ui): /space 포커스 앵커 잘림과 스크롤 문제 수정

Browse Source
This commit is contained in:
corpi
2026-03-03 17:50:49 +09:00
parent ef9cc63cc5
commit be16153bef
8 changed files with 735 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/globals.css
View File

@@ -52,10 +52,10 @@ body {
@keyframes space-stage-pan {
0% {
transform: scale(1.02) translate3d(-0.4%, -0.25%, 0);
transform: translate3d(-0.55%, -0.35%, 0);
}
100% {
transform: scale(1.07) translate3d(0.55%, 0.35%, 0);
transform: translate3d(0.55%, 0.35%, 0);
}
}
@@ -69,3 +69,14 @@ body {
opacity: 1;
}
}
@keyframes popover-rise {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

16
src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx
View File

@@ -2,13 +2,25 @@ import { SpaceTimerHudWidget } from '@/widgets/space-timer-hud';
interface SpaceFocusHudWidgetProps {
goal: string;
timerLabel: string;
visible: boolean;
}
export const SpaceFocusHudWidget = ({ goal, visible }: SpaceFocusHudWidgetProps) => {
export const SpaceFocusHudWidget = ({
goal,
timerLabel,
visible,
}: SpaceFocusHudWidgetProps) => {
if (!visible) {
return null;
}
return <SpaceTimerHudWidget timerLabel="25/5" goal={goal} isImmersionMode className="pr-[4.2rem]" />;
return (
<SpaceTimerHudWidget
timerLabel={timerLabel}
goal={goal}
isImmersionMode
className="pr-[4.2rem]"
/>
);
};

270
src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx
View File

@@ -1,51 +1,131 @@
'use client';
import type { FormEvent } from 'react';
import { useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
import type { RoomTheme } from '@/entities/room';
import type { GoalChip, SoundPreset } from '@/entities/session';
import type { GoalChip, SoundPreset, TimerPreset } from '@/entities/session';
import { SpaceSelectCarousel } from '@/features/space-select';
import { SessionGoalField } from '@/features/session-goal';
import { Button } from '@/shared/ui';
import { cn } from '@/shared/lib/cn';
import { SpaceSideSheet } from '@/widgets/space-sheet-shell';
type RitualPopover = 'space' | 'timer' | 'sound';
interface SpaceSetupDrawerWidgetProps {
open: boolean;
dismissible?: boolean;
rooms: RoomTheme[];
selectedRoomId: string;
selectedTimerLabel: string;
selectedSoundPresetId: string;
goalInput: string;
selectedGoalId: string | null;
selectedSoundPresetId: string;
goalChips: GoalChip[];
soundPresets: SoundPreset[];
timerPresets: TimerPreset[];
canStart: boolean;
onClose: () => void;
onRoomSelect: (roomId: string) => void;
onTimerSelect: (timerLabel: string) => void;
onSoundSelect: (soundPresetId: string) => void;
onGoalChange: (value: string) => void;
onGoalChipSelect: (chip: GoalChip) => void;
onSoundSelect: (soundPresetId: string) => void;
onStart: () => void;
}
interface SummaryChipProps {
label: string;
value: string;
open: boolean;
onClick: () => void;
}
const SummaryChip = ({ label, value, open, onClick }: SummaryChipProps) => {
return (
<button
type="button"
onClick={onClick}
className={cn(
'inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] transition-colors',
open
? 'border-sky-200/42 bg-sky-200/14 text-white/92'
: 'border-white/14 bg-white/[0.04] text-white/80 hover:bg-white/[0.09]',
)}
>
<span className="text-white/62">{label}</span>
<span className="max-w-[124px] truncate text-white/92">{value}</span>
<span aria-hidden className="text-white/56">▾</span>
</button>
);
};
export const SpaceSetupDrawerWidget = ({
open,
dismissible = true,
rooms,
selectedRoomId,
selectedTimerLabel,
selectedSoundPresetId,
goalInput,
selectedGoalId,
selectedSoundPresetId,
goalChips,
soundPresets,
timerPresets,
canStart,
onClose,
onRoomSelect,
onTimerSelect,
onSoundSelect,
onGoalChange,
onGoalChipSelect,
onSoundSelect,
onStart,
}: SpaceSetupDrawerWidgetProps) => {
const [openPopover, setOpenPopover] = useState<RitualPopover | null>(null);
const panelRef = useRef<HTMLDivElement | null>(null);
const selectedRoom = useMemo(() => {
return rooms.find((room) => room.id === selectedRoomId) ?? rooms[0];
}, [rooms, selectedRoomId]);
const selectedSoundLabel = useMemo(() => {
return (
soundPresets.find((preset) => preset.id === selectedSoundPresetId)?.label ??
soundPresets[0]?.label ??
'기본'
);
}, [selectedSoundPresetId, soundPresets]);
useEffect(() => {
if (!openPopover) {
return;
}
const handleEscape = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
setOpenPopover(null);
}
};
const handlePointerDown = (event: MouseEvent) => {
const target = event.target as Node;
if (!panelRef.current?.contains(target)) {
setOpenPopover(null);
}
};
document.addEventListener('keydown', handleEscape);
document.addEventListener('mousedown', handlePointerDown);
return () => {
document.removeEventListener('keydown', handleEscape);
document.removeEventListener('mousedown', handlePointerDown);
};
}, [openPopover]);
if (!open) {
return null;
}
const togglePopover = (popover: RitualPopover) => {
setOpenPopover((current) => (current === popover ? null : popover));
};
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
@@ -57,70 +137,73 @@ export const SpaceSetupDrawerWidget = ({
};
return (
<SpaceSideSheet
open={open}
title="오늘은 한 조각만."
subtitle="공간을 고르고, 한 줄 목표를 적으면 시작돼요."
onClose={onClose}
dismissible={dismissible}
widthClassName="w-[min(360px,94vw)]"
footer={(
<div className="space-y-1.5">
{!canStart ? (
<p className="text-[10px] text-white/56">목표를 적으면 시작할 수 있어요.</p>
) : null}
<Button
type="submit"
form="space-setup-ritual-form"
size="full"
disabled={!canStart}
className={cn(
'h-10 rounded-xl !bg-sky-300/84 !text-slate-900 shadow-[0_6px_14px_rgba(125,211,252,0.2)] hover:!bg-sky-300 disabled:!bg-white/10 disabled:!text-white/42',
)}
<section
className="fixed left-1/2 top-1/2 z-40 w-[min(428px,92vw)] -translate-x-1/2 -translate-y-1/2"
aria-label="집중 시작 패널"
>
시작하기
</Button>
</div>
)}
<div
ref={panelRef}
className="rounded-3xl border border-white/14 bg-[linear-gradient(160deg,rgba(15,23,42,0.68)_0%,rgba(8,13,27,0.56)_100%)] p-4 text-white shadow-[0_22px_52px_rgba(2,6,23,0.38)] backdrop-blur-2xl sm:p-5"
>
<form id="space-setup-ritual-form" className="space-y-4" onSubmit={handleSubmit}>
<section className="space-y-2">
<p className="text-[12px] font-medium text-white/84">공간</p>
<SpaceSelectCarousel
rooms={rooms}
selectedRoomId={selectedRoomId}
onSelect={onRoomSelect}
/>
</section>
<section className="space-y-2 border-t border-white/8 pt-3">
<p className="text-[12px] font-medium text-white/84">이번 세션 한 줄(필수)</p>
<SessionGoalField
autoFocus={open}
goalInput={goalInput}
selectedGoalId={selectedGoalId}
goalChips={goalChips}
onGoalChange={onGoalChange}
onGoalChipSelect={onGoalChipSelect}
/>
</section>
<section className="space-y-2 border-t border-white/8 pt-3">
<p className="text-[12px] font-medium text-white/84">분위기(선택)</p>
<header className="mb-3 space-y-1">
<p className="text-[10px] uppercase tracking-[0.18em] text-white/48">Ritual</p>
<h1 className="text-[1.45rem] font-semibold leading-tight text-white">이번 한 조각을 정하고 시작해요.</h1>
<p className="text-xs text-white/60">목표만 적으면 바로 Focus 모드로 넘어가요.</p>
</header>
<div className="relative mb-3">
<div className="flex flex-wrap gap-1.5">
{soundPresets.slice(0, 6).map((preset) => {
const selected = preset.id === selectedSoundPresetId;
<SummaryChip
label="공간"
value={selectedRoom?.name ?? '기본 공간'}
open={openPopover === 'space'}
onClick={() => togglePopover('space')}
/>
<SummaryChip
label="타이머"
value={selectedTimerLabel}
open={openPopover === 'timer'}
onClick={() => togglePopover('timer')}
/>
<SummaryChip
label="사운드"
value={selectedSoundLabel}
open={openPopover === 'sound'}
onClick={() => togglePopover('sound')}
/>
</div>
{openPopover === 'space' ? (
<div className="absolute left-0 right-0 top-[calc(100%+0.5rem)] z-20 rounded-2xl border border-white/14 bg-slate-950/80 p-2.5 shadow-[0_18px_44px_rgba(2,6,23,0.4)] backdrop-blur-xl animate-[popover-rise_220ms_ease-out] motion-reduce:animate-none">
<SpaceSelectCarousel
rooms={rooms.slice(0, 4)}
selectedRoomId={selectedRoomId}
onSelect={(roomId) => {
onRoomSelect(roomId);
setOpenPopover(null);
}}
/>
</div>
) : null}
{openPopover === 'timer' ? (
<div className="absolute left-0 top-[calc(100%+0.5rem)] z-20 rounded-2xl border border-white/14 bg-slate-950/80 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">
<div className="flex flex-wrap gap-1.5">
{timerPresets.slice(0, 3).map((preset) => {
const selected = preset.label === selectedTimerLabel;
return (
<button
key={preset.id}
type="button"
onClick={() => onSoundSelect(preset.id)}
onClick={() => {
onTimerSelect(preset.label);
setOpenPopover(null);
}}
className={cn(
'rounded-full border px-2.5 py-0.5 text-[10px] transition-colors',
selected
? 'border-sky-200/30 bg-sky-200/12 text-white/90'
? 'border-sky-200/34 bg-sky-200/14 text-white/90'
: 'border-white/12 bg-white/[0.03] text-white/66 hover:bg-white/8',
)}
>
@@ -129,8 +212,65 @@ export const SpaceSetupDrawerWidget = ({
);
})}
</div>
</section>
</div>
) : null}
{openPopover === 'sound' ? (
<div className="absolute right-0 top-[calc(100%+0.5rem)] z-20 w-[min(300px,88vw)] rounded-2xl border border-white/14 bg-slate-950/80 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">
<div className="flex flex-wrap gap-1.5">
{soundPresets.slice(0, 6).map((preset) => {
const selected = preset.id === selectedSoundPresetId;
return (
<button
key={preset.id}
type="button"
onClick={() => {
onSoundSelect(preset.id);
setOpenPopover(null);
}}
className={cn(
'rounded-full border px-2.5 py-0.5 text-[10px] transition-colors',
selected
? 'border-sky-200/34 bg-sky-200/14 text-white/90'
: 'border-white/12 bg-white/[0.03] text-white/66 hover:bg-white/8',
)}
>
{preset.label}
</button>
);
})}
</div>
</div>
) : null}
</div>
<form id="space-setup-ritual-form" className="space-y-3" onSubmit={handleSubmit}>
<SessionGoalField
autoFocus={open}
goalInput={goalInput}
selectedGoalId={selectedGoalId}
goalChips={goalChips}
onGoalChange={onGoalChange}
onGoalChipSelect={onGoalChipSelect}
/>
<div className="space-y-1.5 pt-1">
{!canStart ? <p className="text-[10px] text-white/56">목표를 적으면 시작할 수 있어요.</p> : null}
<Button
type="submit"
form="space-setup-ritual-form"
size="full"
disabled={!canStart}
className={cn(
'h-10 rounded-xl !bg-sky-300/84 !text-slate-900 shadow-[0_8px_16px_rgba(125,211,252,0.24)] hover:!bg-sky-300 disabled:!bg-white/10 disabled:!text-white/42',
)}
>
시작하기
</Button>
</div>
</form>
</SpaceSideSheet>
</div>
</section>
);
};

33
src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
View File

@@ -36,13 +36,17 @@ export const SpaceTimerHudWidget = ({
)}
style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 0.35rem)' }}
>
<div className="mx-auto w-full max-w-xl pointer-events-auto">
<div className="relative mx-auto w-full max-w-xl pointer-events-auto">
<div
aria-hidden
className="pointer-events-none absolute left-1/2 top-1/2 z-0 h-28 w-[min(760px,96vw)] -translate-x-1/2 -translate-y-1/2 bg-[radial-gradient(ellipse_at_center,rgba(2,6,23,0.2)_0%,rgba(2,6,23,0.12)_45%,rgba(2,6,23,0)_78%)]"
/>
<section
className={cn(
'flex h-16 items-center justify-between gap-3 rounded-2xl px-3.5 transition-colors',
'relative z-10 flex h-16 items-center justify-between gap-3 rounded-2xl px-3.5 transition-colors',
isImmersionMode
? 'border border-white/6 bg-black/16 backdrop-blur-md'
: 'border border-white/10 bg-black/25 backdrop-blur-sm',
? 'border border-white/12 bg-black/22 backdrop-blur-md'
: 'border border-white/12 bg-black/24 backdrop-blur-md',
)}
>
<div className="min-w-0">
@@ -50,29 +54,29 @@ export const SpaceTimerHudWidget = ({
<span
className={cn(
'text-[11px] font-semibold uppercase tracking-[0.16em]',
isImmersionMode ? 'text-white/45' : 'text-white/62',
isImmersionMode ? 'text-white/90' : 'text-white/88',
)}
>
{isBreatheMode ? RECOVERY_30S_MODE_LABEL : 'Focus'}
</span>
<span
className={cn(
'text-2xl font-semibold tracking-tight',
isImmersionMode ? 'text-white/72' : 'text-white',
'text-[1.7rem] font-semibold tracking-tight sm:text-[1.78rem]',
isImmersionMode ? 'text-white/90' : 'text-white/92',
)}
>
25:00
</span>
<span className={cn('text-[11px]', isImmersionMode ? 'text-white/42' : 'text-white/62')}>
<span className={cn('text-[11px]', isImmersionMode ? 'text-white/65' : 'text-white/65')}>
{timerLabel}
</span>
</div>
{hintMessage ? (
<p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/54' : 'text-white/64')}>
<p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/50' : 'text-white/50')}>
{hintMessage}
</p>
) : (
<p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/44' : 'text-white/58')}>
<p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/65' : 'text-white/65')}>
목표: {goal}
</p>
)}
@@ -88,8 +92,8 @@ export const SpaceTimerHudWidget = ({
className={cn(
'inline-flex h-8 w-8 items-center justify-center rounded-full border text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
isImmersionMode
? 'border-white/10 bg-white/5 text-white/64 hover:bg-white/10'
: 'border-white/15 bg-white/8 text-white/82 hover:bg-white/14',
? 'border-white/14 bg-black/26 text-white/82 hover:bg-black/34'
: 'border-white/14 bg-black/26 text-white/84 hover:bg-black/34',
)}
>
<span aria-hidden>{action.icon}</span>
@@ -97,7 +101,10 @@ export const SpaceTimerHudWidget = ({
</button>
))}
</div>
<Restart30sAction onTrigger={triggerRestart} />
<Restart30sAction
onTrigger={triggerRestart}
className={cn(isImmersionMode ? 'text-white/72 hover:text-white/92' : 'text-white/74 hover:text-white/92')}
/>
</div>
</section>
</div>

3
src/widgets/space-tools-dock/model/types.ts
View File

@@ -1 +1,2 @@
export type SpaceToolPanelId = 'sound' | 'notes' | 'inbox' | 'stats' | 'settings';
export type SpaceAnchorPopoverId = 'sound' | 'notes';
export type SpaceUtilityPanelId = 'settings' | 'inbox' | 'stats';

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

@@ -1,201 +1,369 @@
'use client';
import { useState } from 'react';
import type { RecentThought } from '@/entities/session';
import type { SoundTrackKey } from '@/features/sound-preset';
import { useEffect, useMemo, useState } from 'react';
import type { RoomTheme } from '@/entities/room';
import { SOUND_PRESETS, type RecentThought, type TimerPreset } from '@/entities/session';
import { ExitHoldButton } from '@/features/exit-hold';
import { useToast } from '@/shared/ui';
import { cn } from '@/shared/lib/cn';
import { SpaceSideSheet } from '@/widgets/space-sheet-shell';
import type { SpaceToolPanelId } from '../model/types';
import type { SpaceAnchorPopoverId, SpaceUtilityPanelId } from '../model/types';
import { InboxToolPanel } from './panels/InboxToolPanel';
import { NotesToolPanel } from './panels/NotesToolPanel';
import { SettingsToolPanel } from './panels/SettingsToolPanel';
import { SoundToolPanel } from './panels/SoundToolPanel';
import { StatsToolPanel } from './panels/StatsToolPanel';
interface SpaceToolsDockWidgetProps {
isFocusMode: boolean;
rooms: RoomTheme[];
selectedRoomId: string;
selectedTimerLabel: string;
timerPresets: TimerPreset[];
selectedPresetId: string;
thoughts: RecentThought[];
thoughtCount: number;
selectedPresetId: string;
onRoomSelect: (roomId: string) => void;
onTimerSelect: (timerLabel: string) => void;
onSelectPreset: (presetId: string) => void;
isMixerOpen: boolean;
onToggleMixer: () => void;
isMuted: boolean;
onMuteChange: (next: boolean) => void;
masterVolume: number;
onMasterVolumeChange: (next: number) => void;
trackKeys: readonly SoundTrackKey[];
trackLevels: Record<SoundTrackKey, number>;
onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
onCaptureThought: (note: string) => void;
onClearInbox: () => void;
onExitRequested: () => void;
}
const TOOL_ITEMS: Array<{
id: SpaceToolPanelId;
label: string;
}> = [
{ id: 'sound', label: 'Sound' },
{ id: 'notes', label: 'Notes' },
{ id: 'inbox', label: 'Inbox' },
{ id: 'stats', label: 'Stats' },
{ id: 'settings', label: 'Settings' },
];
const ANCHOR_ICON = {
sound: (
<svg
viewBox="0 0 24 24"
fill="none"
className="h-4 w-4"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M4 13V11a2 2 0 0 1 2-2h2l3-3h2v12h-2l-3-3H6a2 2 0 0 1-2-2Z" />
<path d="M16 9a4 4 0 0 1 0 6" />
</svg>
),
notes: (
<svg
viewBox="0 0 24 24"
fill="none"
className="h-4 w-4"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M6 4h9l3 3v13H6z" />
<path d="M15 4v4h4" />
<path d="M9 12h6M9 16h4" />
</svg>
),
};
const PANEL_TITLE_MAP: Record<SpaceToolPanelId, string> = {
sound: '사운드',
notes: '생각 던지기',
const UTILITY_PANEL_TITLE: Record<SpaceUtilityPanelId, string> = {
inbox: '인박스',
stats: '집중 요약',
settings: '설정',
};
const DockIcon = ({ id }: { id: SpaceToolPanelId }) => {
const commonProps = {
viewBox: '0 0 24 24',
fill: 'none',
className: 'h-4 w-4',
stroke: 'currentColor',
strokeWidth: 1.8,
strokeLinecap: 'round' as const,
strokeLinejoin: 'round' as const,
};
switch (id) {
case 'sound':
return (
<svg {...commonProps}>
<path d="M4 13V11a2 2 0 0 1 2-2h2l3-3h2v12h-2l-3-3H6a2 2 0 0 1-2-2Z" />
<path d="M16 9a4 4 0 0 1 0 6" />
<path d="M18 7a7 7 0 0 1 0 10" />
</svg>
);
case 'notes':
return (
<svg {...commonProps}>
<rect x="5" y="4" width="14" height="16" rx="2.5" />
<path d="M9 9h6M9 13h6M9 17h4" />
</svg>
);
case 'inbox':
return (
<svg {...commonProps}>
<path d="M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-9Z" />
<path d="M4 12h4l1.5 2h5L16 12h4" />
</svg>
);
case 'stats':
return (
<svg {...commonProps}>
<path d="M5 18V10M12 18V7M19 18v-5" />
<path d="M4 18h16" />
</svg>
);
case 'settings':
return (
<svg {...commonProps}>
<path d="M12 8.5A3.5 3.5 0 1 1 8.5 12 3.5 3.5 0 0 1 12 8.5Z" />
<path d="M12 3.5v2M12 18.5v2M20.5 12h-2M5.5 12h-2M18 6l-1.4 1.4M7.4 16.6 6 18M18 18l-1.4-1.4M7.4 7.4 6 6" />
</svg>
);
default:
return null;
const formatThoughtCount = (count: number) => {
if (count < 1) {
return '0';
}
if (count > 9) {
return '9+';
}
return String(count);
};
export const SpaceToolsDockWidget = ({
isFocusMode,
rooms,
selectedRoomId,
selectedTimerLabel,
timerPresets,
selectedPresetId,
thoughts,
thoughtCount,
selectedPresetId,
onRoomSelect,
onTimerSelect,
onSelectPreset,
isMixerOpen,
onToggleMixer,
isMuted,
onMuteChange,
masterVolume,
onMasterVolumeChange,
trackKeys,
trackLevels,
onTrackLevelChange,
onCaptureThought,
onClearInbox,
onExitRequested,
}: SpaceToolsDockWidgetProps) => {
const { pushToast } = useToast();
const [activePanel, setActivePanel] = useState<SpaceToolPanelId | null>(null);
const [openPopover, setOpenPopover] = useState<SpaceAnchorPopoverId | null>(null);
const [utilityPanel, setUtilityPanel] = useState<SpaceUtilityPanelId | null>(null);
const [noteDraft, setNoteDraft] = useState('');
const [isIdle, setIdle] = useState(false);
const selectedSoundLabel = useMemo(() => {
return (
SOUND_PRESETS.find((preset) => preset.id === selectedPresetId)?.label ?? SOUND_PRESETS[0]?.label ?? '기본'
);
}, [selectedPresetId]);
useEffect(() => {
if (!openPopover) {
return;
}
const handleEscape = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
setOpenPopover(null);
}
};
document.addEventListener('keydown', handleEscape);
return () => {
document.removeEventListener('keydown', handleEscape);
};
}, [openPopover]);
useEffect(() => {
if (!isFocusMode || openPopover || utilityPanel) {
setIdle(false);
return;
}
let timerId: number | null = null;
const armIdleTimer = () => {
if (timerId) {
window.clearTimeout(timerId);
}
timerId = window.setTimeout(() => {
setIdle(true);
}, 3500);
};
const wake = () => {
setIdle(false);
armIdleTimer();
};
armIdleTimer();
window.addEventListener('pointermove', wake);
window.addEventListener('keydown', wake);
window.addEventListener('pointerdown', wake);
return () => {
if (timerId) {
window.clearTimeout(timerId);
}
window.removeEventListener('pointermove', wake);
window.removeEventListener('keydown', wake);
window.removeEventListener('pointerdown', wake);
};
}, [isFocusMode, openPopover, utilityPanel]);
const openUtilityPanel = (panel: SpaceUtilityPanelId) => {
setOpenPopover(null);
setUtilityPanel(panel);
};
const handleNoteSubmit = () => {
const trimmedNote = noteDraft.trim();
if (!trimmedNote) {
return;
}
onCaptureThought(trimmedNote);
setNoteDraft('');
pushToast({ title: '메모를 잠깐 주차했어요.' });
};
return (
<>
<div className="fixed right-3.5 top-1/2 z-30 -translate-y-1/2">
{openPopover ? (
<button
type="button"
aria-label="팝오버 닫기"
onClick={() => setOpenPopover(null)}
className="fixed inset-0 z-30"
/>
) : null}
<div
className={cn(
'flex w-10 flex-col items-center gap-1.5 rounded-[18px] border py-1.5 backdrop-blur-lg transition-opacity',
isFocusMode && activePanel === null
? 'border-white/12 bg-slate-950/18 opacity-32 hover:opacity-86'
: 'border-white/14 bg-slate-950/28 opacity-86',
'fixed z-30 transition-opacity right-[calc(env(safe-area-inset-right,0px)+0.75rem)] top-[calc(env(safe-area-inset-top,0px)+0.75rem)]',
isFocusMode ? (isIdle ? 'opacity-40' : 'opacity-84') : 'opacity-92',
)}
>
{TOOL_ITEMS.map((item) => {
const selected = activePanel === item.id;
<ExitHoldButton
variant={isFocusMode ? 'ring' : 'bar'}
onConfirm={onExitRequested}
/>
</div>
{isFocusMode ? (
<>
<div
className={cn(
'fixed z-30 transition-opacity left-[calc(env(safe-area-inset-left,0px)+0.75rem)] bottom-[calc(env(safe-area-inset-bottom,0px)+5.25rem)] sm:bottom-[calc(env(safe-area-inset-bottom,0px)+0.75rem)]',
isIdle ? 'opacity-34' : 'opacity-82',
)}
>
<div className="relative">
<div
aria-hidden
className="pointer-events-none absolute -inset-x-5 -inset-y-4 -z-10 rounded-[999px] bg-[radial-gradient(ellipse_at_center,rgba(2,6,23,0.18)_0%,rgba(2,6,23,0.11)_48%,rgba(2,6,23,0)_78%)]"
/>
<button
type="button"
onClick={() => 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>
<span>Notes {formatThoughtCount(thoughtCount)}</span>
<span aria-hidden className="text-white/60">▾</span>
</button>
{openPopover === 'notes' ? (
<div
className="mb-2 w-[min(320px,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)', left: 0 }}
>
<p className="text-[11px] text-white/56">떠오른 생각을 잠깐 주차해요</p>
<div className="mt-2 flex gap-1.5">
<input
value={noteDraft}
onChange={(event) => setNoteDraft(event.target.value)}
placeholder="한 줄 메모"
className="h-8 min-w-0 flex-1 rounded-lg border border-white/14 bg-white/[0.04] px-2.5 text-xs text-white placeholder:text-white/38 focus:border-sky-200/42 focus:outline-none"
/>
<button
type="button"
onClick={handleNoteSubmit}
className="h-8 rounded-lg border border-sky-200/34 bg-sky-200/14 px-2.5 text-xs text-white/88"
>
저장
</button>
</div>
<ul className="mt-2 space-y-1.5">
{thoughts.slice(0, 3).map((thought) => (
<li
key={thought.id}
className="truncate rounded-lg border border-white/10 bg-white/[0.03] px-2 py-1.5 text-[11px] text-white/74"
>
{thought.text}
</li>
))}
{thoughts.length === 0 ? (
<li className="rounded-lg border border-white/10 bg-white/[0.03] px-2 py-1.5 text-[11px] text-white/56">
아직 메모가 없어요.
</li>
) : null}
</ul>
<div className="mt-2 flex items-center justify-end gap-3">
<button
type="button"
onClick={() => openUtilityPanel('inbox')}
className="text-[11px] text-white/62 transition-colors hover:text-white/88"
>
인박스
</button>
<button
type="button"
onClick={() => openUtilityPanel('stats')}
className="text-[11px] text-white/62 transition-colors hover:text-white/88"
>
통계
</button>
<button
type="button"
onClick={() => openUtilityPanel('settings')}
className="text-[11px] text-white/62 transition-colors hover:text-white/88"
>
설정
</button>
</div>
</div>
) : null}
</div>
</div>
<div
className={cn(
'fixed z-30 transition-opacity right-[calc(env(safe-area-inset-right,0px)+0.75rem)] bottom-[calc(env(safe-area-inset-bottom,0px)+5.25rem)] sm:bottom-[calc(env(safe-area-inset-bottom,0px)+0.75rem)]',
isIdle ? 'opacity-34' : 'opacity-82',
)}
>
<div className="relative">
<div
aria-hidden
className="pointer-events-none absolute -inset-x-5 -inset-y-4 -z-10 rounded-[999px] bg-[radial-gradient(ellipse_at_center,rgba(2,6,23,0.18)_0%,rgba(2,6,23,0.11)_48%,rgba(2,6,23,0)_78%)]"
/>
<button
type="button"
onClick={() => 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>
<span className="max-w-[132px] truncate">{selectedSoundLabel}</span>
<span aria-hidden className="text-white/60">▾</span>
</button>
{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"
style={{ position: 'absolute', bottom: 'calc(100% + 0.5rem)', right: 0 }}
>
<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) => {
const selected = preset.id === selectedPresetId;
return (
<button
key={item.id}
key={preset.id}
type="button"
title={item.label}
aria-label={item.label}
onClick={() => setActivePanel(item.id)}
onClick={() => {
onSelectPreset(preset.id);
setOpenPopover(null);
}}
className={cn(
'relative inline-flex h-8 w-8 items-center justify-center rounded-[10px] border text-white/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70',
'rounded-full border px-2.5 py-0.5 text-[10px] transition-colors',
selected
? 'border-sky-200/44 bg-sky-200/14 text-white shadow-[0_0_0_1px_rgba(186,230,253,0.2)]'
: 'border-white/12 bg-white/6 hover:bg-white/10',
? 'border-sky-200/34 bg-sky-200/14 text-white/90'
: 'border-white/12 bg-white/[0.03] text-white/66 hover:bg-white/8',
)}
>
<DockIcon id={item.id} />
{item.id === 'inbox' && thoughtCount > 0 ? (
<span className="absolute -right-1 -top-1 inline-flex min-w-[0.95rem] items-center justify-center rounded-full bg-sky-200/26 px-1 py-0.5 text-[8px] font-semibold text-sky-50">
{thoughtCount > 99 ? '99+' : `${thoughtCount}`}
</span>
) : null}
{preset.label}
</button>
);
})}
</div>
<div className="mt-2 flex justify-end">
<button
type="button"
onClick={() => openUtilityPanel('settings')}
className="text-[11px] text-white/62 transition-colors hover:text-white/88"
>
고급 옵션
</button>
</div>
</div>
) : null}
</div>
</div>
</>
) : null}
<SpaceSideSheet
open={activePanel !== null}
title={activePanel ? PANEL_TITLE_MAP[activePanel] : ''}
onClose={() => setActivePanel(null)}
open={utilityPanel !== null}
title={utilityPanel ? UTILITY_PANEL_TITLE[utilityPanel] : ''}
onClose={() => setUtilityPanel(null)}
>
{activePanel === 'sound' ? (
<SoundToolPanel
selectedPresetId={selectedPresetId}
onSelectPreset={onSelectPreset}
isMixerOpen={isMixerOpen}
onToggleMixer={onToggleMixer}
isMuted={isMuted}
onMuteChange={onMuteChange}
masterVolume={masterVolume}
onMasterVolumeChange={onMasterVolumeChange}
trackKeys={trackKeys}
trackLevels={trackLevels}
onTrackLevelChange={onTrackLevelChange}
/>
) : null}
{activePanel === 'notes' ? (
<NotesToolPanel
onCaptureThought={(note) => {
onCaptureThought(note);
pushToast({ title: '인박스에 주차했어요 (더미)' });
}}
/>
) : null}
{activePanel === 'inbox' ? (
{utilityPanel === 'inbox' ? (
<InboxToolPanel
thoughts={thoughts}
onClear={() => {
@@ -205,8 +373,23 @@ export const SpaceToolsDockWidget = ({
/>
) : null}
{activePanel === 'stats' ? <StatsToolPanel /> : null}
{activePanel === 'settings' ? <SettingsToolPanel /> : null}
{utilityPanel === 'stats' ? <StatsToolPanel /> : null}
{utilityPanel === 'settings' ? (
<SettingsToolPanel
rooms={rooms}
selectedRoomId={selectedRoomId}
selectedTimerLabel={selectedTimerLabel}
timerPresets={timerPresets}
onSelectRoom={(roomId) => {
onRoomSelect(roomId);
pushToast({ title: '공간을 바꿨어요.' });
}}
onSelectTimer={(label) => {
onTimerSelect(label);
pushToast({ title: `타이머를 ${label}로 바꿨어요.` });
}}
/>
) : null}
</SpaceSideSheet>
</>
);

72
src/widgets/space-tools-dock/ui/panels/SettingsToolPanel.tsx
View File

@@ -1,10 +1,28 @@
'use client';
import { useState } from 'react';
import type { RoomTheme } from '@/entities/room';
import type { TimerPreset } from '@/entities/session';
import { DEFAULT_PRESET_OPTIONS } from '@/shared/config/settingsOptions';
import { cn } from '@/shared/lib/cn';
export const SettingsToolPanel = () => {
interface SettingsToolPanelProps {
rooms: RoomTheme[];
selectedRoomId: string;
selectedTimerLabel: string;
timerPresets: TimerPreset[];
onSelectRoom: (roomId: string) => void;
onSelectTimer: (timerLabel: string) => void;
}
export const SettingsToolPanel = ({
rooms,
selectedRoomId,
selectedTimerLabel,
timerPresets,
onSelectRoom,
onSelectTimer,
}: SettingsToolPanelProps) => {
const [reduceMotion, setReduceMotion] = useState(false);
const [defaultPresetId, setDefaultPresetId] = useState<
(typeof DEFAULT_PRESET_OPTIONS)[number]['id']
@@ -40,6 +58,58 @@ export const SettingsToolPanel = () => {
</div>
</section>
<section className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
<p className="text-sm font-medium text-white">공간</p>
<p className="mt-1 text-xs text-white/58">몰입 중에도 공간을 바꿀 수 있어요.</p>
<div className="mt-2 flex flex-wrap gap-2">
{rooms.slice(0, 4).map((room) => {
const selected = room.id === selectedRoomId;
return (
<button
key={room.id}
type="button"
onClick={() => onSelectRoom(room.id)}
className={cn(
'rounded-full border px-3 py-1.5 text-xs transition-colors',
selected
? 'border-sky-200/44 bg-sky-200/20 text-sky-100'
: 'border-white/18 bg-white/8 text-white/80 hover:bg-white/14',
)}
>
{room.name}
</button>
);
})}
</div>
</section>
<section className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
<p className="text-sm font-medium text-white">타이머 프리셋</p>
<p className="mt-1 text-xs text-white/58">기본 프리셋만 빠르게 고를 수 있어요.</p>
<div className="mt-2 flex flex-wrap gap-2">
{timerPresets.slice(0, 3).map((preset) => {
const selected = preset.label === selectedTimerLabel;
return (
<button
key={preset.id}
type="button"
onClick={() => onSelectTimer(preset.label)}
className={cn(
'rounded-full border px-3 py-1.5 text-xs transition-colors',
selected
? 'border-sky-200/44 bg-sky-200/20 text-sky-100'
: 'border-white/18 bg-white/8 text-white/80 hover:bg-white/14',
)}
>
{preset.label}
</button>
);
})}
</div>
</section>
<section className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3">
<p className="text-sm font-medium text-white">기본 프리셋</p>
<div className="mt-2 flex flex-wrap gap-2">

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

@@ -1,6 +1,6 @@
'use client';
import { useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import {
getRoomBackgroundStyle,
@@ -10,8 +10,10 @@ import {
import {
GOAL_CHIPS,
SOUND_PRESETS,
TIMER_PRESETS,
useThoughtInbox,
type GoalChip,
type TimerPreset,
} from '@/entities/session';
import { useSoundPresetSelection } from '@/features/sound-preset';
import { useToast } from '@/shared/ui';
@@ -37,6 +39,19 @@ const resolveInitialSoundPreset = (presetIdFromQuery: string | null) => {
return SOUND_PRESETS[0].id;
};
const TIMER_SELECTION_PRESETS = TIMER_PRESETS.filter(
(preset): preset is TimerPreset & { focusMinutes: number; breakMinutes: number } =>
typeof preset.focusMinutes === 'number' && typeof preset.breakMinutes === 'number',
).slice(0, 3);
const resolveInitialTimerLabel = (timerLabelFromQuery: string | null) => {
if (timerLabelFromQuery && TIMER_SELECTION_PRESETS.some((preset) => preset.label === timerLabelFromQuery)) {
return timerLabelFromQuery;
}
return TIMER_SELECTION_PRESETS[0]?.label ?? '25/5';
};
export const SpaceWorkspaceWidget = () => {
const searchParams = useSearchParams();
const { pushToast } = useToast();
@@ -45,33 +60,31 @@ export const SpaceWorkspaceWidget = () => {
const initialRoomId = resolveInitialRoomId(searchParams.get('room'));
const initialGoal = searchParams.get('goal')?.trim() ?? '';
const initialSoundPresetId = resolveInitialSoundPreset(searchParams.get('sound'));
const initialTimerLabel = resolveInitialTimerLabel(searchParams.get('timer'));
const [workspaceMode, setWorkspaceMode] = useState<WorkspaceMode>('setup');
const [isSetupDrawerOpen, setSetupDrawerOpen] = useState(true);
const [selectedRoomId, setSelectedRoomId] = useState(initialRoomId);
const [selectedTimerLabel, setSelectedTimerLabel] = useState(initialTimerLabel);
const [goalInput, setGoalInput] = useState(initialGoal);
const [selectedGoalId, setSelectedGoalId] = useState<string | null>(null);
const {
selectedPresetId,
setSelectedPresetId,
isMixerOpen,
setMixerOpen,
isMuted,
setMuted,
masterVolume,
setMasterVolume,
trackLevels,
setTrackLevel,
trackKeys,
} = useSoundPresetSelection(initialSoundPresetId);
const selectedRoom = useMemo(() => {
return getRoomById(selectedRoomId) ?? ROOM_THEMES[0];
}, [selectedRoomId]);
const setupRooms = useMemo(() => {
const restRooms = ROOM_THEMES.filter((room) => room.id !== selectedRoom.id);
return [selectedRoom, ...restRooms].slice(0, 4);
const visibleRooms = ROOM_THEMES.slice(0, 6);
if (visibleRooms.some((room) => room.id === selectedRoom.id)) {
return visibleRooms;
}
return [selectedRoom, ...visibleRooms].slice(0, 6);
}, [selectedRoom]);
const canStart = goalInput.trim().length > 0;
@@ -96,19 +109,32 @@ export const SpaceWorkspaceWidget = () => {
}
setWorkspaceMode('focus');
setSetupDrawerOpen(false);
pushToast({
title: `목표: ${goalInput.trim()} 시작해요.`,
});
};
const handleOpenSetup = () => {
setSetupDrawerOpen(true);
const handleExitRequested = () => {
setWorkspaceMode('setup');
pushToast({ title: '준비 모드로 돌아왔어요.' });
};
useEffect(() => {
const previousBodyOverflow = document.body.style.overflow;
const previousHtmlOverflow = document.documentElement.style.overflow;
document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';
return () => {
document.body.style.overflow = previousBodyOverflow;
document.documentElement.style.overflow = previousHtmlOverflow;
};
}, []);
return (
<div className="relative min-h-screen overflow-hidden text-white">
<div className="relative h-dvh overflow-hidden text-white">
<div
aria-hidden
className="absolute inset-0 bg-cover bg-center will-change-transform animate-[space-stage-pan_42s_ease-in-out_infinite_alternate] motion-reduce:animate-none"
@@ -135,72 +161,51 @@ export const SpaceWorkspaceWidget = () => {
}}
/>
<div className="relative z-10 flex min-h-screen flex-col pr-[4.25rem]">
<header className="flex items-center justify-between px-4 pt-3.5 sm:px-6">
{!isFocusMode ? (
<div className="rounded-full border border-white/16 bg-slate-950/32 px-3 py-1.5 backdrop-blur-xl">
<p className="text-xs font-semibold tracking-tight text-white/88">VibeRoom</p>
</div>
) : (
<div aria-hidden className="h-7" />
)}
{isFocusMode && !isSetupDrawerOpen ? (
<button
type="button"
onClick={handleOpenSetup}
className="rounded-full border border-white/16 bg-slate-950/24 px-2.5 py-1 text-[11px] text-white/58 transition-colors hover:bg-slate-950/40 hover:text-white/84"
>
Setup 열기
</button>
) : null}
</header>
<div className="relative z-10 flex h-full flex-col">
<main className="relative flex-1" />
</div>
<SpaceSetupDrawerWidget
open={isSetupDrawerOpen}
dismissible={isFocusMode}
open={!isFocusMode}
rooms={setupRooms}
selectedRoomId={selectedRoom.id}
selectedTimerLabel={selectedTimerLabel}
selectedSoundPresetId={selectedPresetId}
goalInput={goalInput}
selectedGoalId={selectedGoalId}
selectedSoundPresetId={selectedPresetId}
goalChips={GOAL_CHIPS}
soundPresets={SOUND_PRESETS}
timerPresets={TIMER_SELECTION_PRESETS}
canStart={canStart}
onClose={() => {
if (isFocusMode) {
setSetupDrawerOpen(false);
}
}}
onRoomSelect={setSelectedRoomId}
onTimerSelect={setSelectedTimerLabel}
onSoundSelect={setSelectedPresetId}
onGoalChange={handleGoalChange}
onGoalChipSelect={handleGoalChipSelect}
onSoundSelect={setSelectedPresetId}
onStart={handleStart}
/>
<SpaceFocusHudWidget goal={goalInput.trim()} visible={isFocusMode} />
<SpaceFocusHudWidget
goal={goalInput.trim()}
timerLabel={selectedTimerLabel}
visible={isFocusMode}
/>
<SpaceToolsDockWidget
isFocusMode={isFocusMode}
rooms={setupRooms}
selectedRoomId={selectedRoom.id}
selectedTimerLabel={selectedTimerLabel}
timerPresets={TIMER_SELECTION_PRESETS}
thoughts={thoughts}
thoughtCount={thoughtCount}
selectedPresetId={selectedPresetId}
onRoomSelect={setSelectedRoomId}
onTimerSelect={setSelectedTimerLabel}
onSelectPreset={setSelectedPresetId}
isMixerOpen={isMixerOpen}
onToggleMixer={() => setMixerOpen((current) => !current)}
isMuted={isMuted}
onMuteChange={setMuted}
masterVolume={masterVolume}
onMasterVolumeChange={setMasterVolume}
trackKeys={trackKeys}
trackLevels={trackLevels}
onTrackLevelChange={setTrackLevel}
onCaptureThought={(note) => addThought(note, selectedRoom.name)}
onClearInbox={clearThoughts}
onExitRequested={handleExitRequested}
/>
</div>
);