feat(space): 사운드 시트와 몰입 모드 크롬 정리 적용
맥락:
- /space 하단 사운드 바를 제거하고 도구를 우측 도크에 수납해 배경 몰입을 강화하며, 몰입 모드 ON 체감을 높이기 위해
변경사항:
- 하단 사운드 프리셋 바를 제거하고 도크에 🎧 Sound 패널을 추가
- features/sound-preset + widgets/sound-sheet를 추가해 프리셋 선택/믹서 UI(더미) 구성
- features/immersion-mode + shared/ui/Toggle을 추가하고 Quick 시트 토글과 연결
- 몰입 모드 ON 시 상단 Current Room 숨김, 허브 버튼 소형화, 레일 미니화, HUD 저대비, 비네팅/그레인 강화
- widgets/space-chrome를 신설해 /space 상단 크롬 렌더링을 분리
- docs/90_current_state.md, docs/session_brief.md 최신 상태로 갱신
검증:
- npx tsc --noEmit
세션-상태: /space는 사운드 시트 기반 도크 구조와 몰입 모드 UI를 제공함
세션-다음: RoomSheetWidget 인원수 기반 정보를 큐레이션 표현으로 전환
세션-리스크: 터치 환경에서 미니 레일 발견성이 낮을 수 있어 보조 힌트가 필요할 수 있음
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
export type SpaceToolPanel = 'room' | 'notes' | 'quick' | null;
|
||||
export type SpaceToolPanel = 'sound' | 'room' | 'notes' | 'quick' | null;
|
||||
|
||||
export const useSpaceToolsDock = () => {
|
||||
const [activePanel, setActivePanel] = useState<SpaceToolPanel>(null);
|
||||
|
||||
@@ -1,26 +1,33 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { RoomPresence } from '@/entities/room';
|
||||
import { CHECK_IN_PHRASES, REACTION_OPTIONS } from '@/entities/session';
|
||||
import { useCheckIn } from '@/features/check-in';
|
||||
import { useSoundPresetSelection } from '@/features/sound-preset';
|
||||
import { useToast } from '@/shared/ui';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { NotesSheetWidget } from '@/widgets/notes-sheet';
|
||||
import { QuickSheetWidget } from '@/widgets/quick-sheet';
|
||||
import { RoomSheetWidget } from '@/widgets/room-sheet';
|
||||
import { SoundSheetWidget } from '@/widgets/sound-sheet';
|
||||
import { useSpaceToolsDock } from '../model/useSpaceToolsDock';
|
||||
|
||||
interface SpaceToolsDockWidgetProps {
|
||||
roomName: string;
|
||||
activeMembers: number;
|
||||
presence: RoomPresence;
|
||||
initialSoundPresetId?: string;
|
||||
isImmersionMode: boolean;
|
||||
onToggleImmersionMode: () => void;
|
||||
}
|
||||
|
||||
const TOOL_BUTTONS: Array<{
|
||||
id: 'room' | 'notes' | 'quick';
|
||||
id: 'sound' | 'room' | 'notes' | 'quick';
|
||||
icon: string;
|
||||
label: string;
|
||||
}> = [
|
||||
{ id: 'sound', icon: '🎧', label: 'Sound' },
|
||||
{ id: 'room', icon: '👥', label: 'Room' },
|
||||
{ id: 'notes', icon: '📝', label: 'Notes' },
|
||||
{ id: 'quick', icon: '⚙️', label: 'Quick' },
|
||||
@@ -30,10 +37,36 @@ export const SpaceToolsDockWidget = ({
|
||||
roomName,
|
||||
activeMembers,
|
||||
presence,
|
||||
initialSoundPresetId,
|
||||
isImmersionMode,
|
||||
onToggleImmersionMode,
|
||||
}: SpaceToolsDockWidgetProps) => {
|
||||
const { pushToast } = useToast();
|
||||
const { lastCheckIn, recordCheckIn } = useCheckIn();
|
||||
const { activePanel, closePanel, togglePanel } = useSpaceToolsDock();
|
||||
const [isRailExpanded, setRailExpanded] = useState(false);
|
||||
const {
|
||||
selectedPresetId,
|
||||
setSelectedPresetId,
|
||||
isMixerOpen,
|
||||
setMixerOpen,
|
||||
isMuted,
|
||||
setMuted,
|
||||
masterVolume,
|
||||
setMasterVolume,
|
||||
trackLevels,
|
||||
setTrackLevel,
|
||||
trackKeys,
|
||||
} = useSoundPresetSelection(initialSoundPresetId);
|
||||
|
||||
const isDockExpanded = !isImmersionMode || isRailExpanded || activePanel !== null;
|
||||
|
||||
const handleClosePanel = () => {
|
||||
closePanel();
|
||||
if (isImmersionMode) {
|
||||
setRailExpanded(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckIn = (message: string) => {
|
||||
recordCheckIn(message);
|
||||
@@ -44,39 +77,95 @@ export const SpaceToolsDockWidget = ({
|
||||
pushToast({ title: `리액션: ${emoji}` });
|
||||
};
|
||||
|
||||
const handleToolSelect = (panel: (typeof TOOL_BUTTONS)[number]['id']) => {
|
||||
if (isImmersionMode) {
|
||||
setRailExpanded(true);
|
||||
}
|
||||
togglePanel(panel);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{activePanel ? (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="시트 닫기"
|
||||
onClick={closePanel}
|
||||
onClick={handleClosePanel}
|
||||
className="fixed inset-0 z-30 bg-slate-950/10"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div className="fixed right-2 top-1/2 z-50 -translate-y-1/2">
|
||||
<div className="flex w-12 flex-col items-center gap-2 rounded-2xl border border-white/20 bg-slate-950/66 py-2 shadow-lg shadow-slate-950/60 backdrop-blur-xl">
|
||||
{TOOL_BUTTONS.map((tool) => (
|
||||
<div
|
||||
className="fixed right-2 top-1/2 z-50 -translate-y-1/2"
|
||||
onMouseEnter={() => {
|
||||
if (isImmersionMode) {
|
||||
setRailExpanded(true);
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
if (isImmersionMode && activePanel === null) {
|
||||
setRailExpanded(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center gap-2 transition-all duration-200',
|
||||
isDockExpanded
|
||||
? 'w-12 rounded-2xl border border-white/20 bg-slate-950/66 py-2 shadow-lg shadow-slate-950/60 backdrop-blur-xl'
|
||||
: 'w-3 rounded-full border border-white/26 bg-slate-950/52 py-3',
|
||||
)}
|
||||
>
|
||||
{isDockExpanded ? (
|
||||
TOOL_BUTTONS.map((tool) => (
|
||||
<button
|
||||
key={tool.id}
|
||||
type="button"
|
||||
title={tool.label}
|
||||
onClick={() => handleToolSelect(tool.id)}
|
||||
className={cn(
|
||||
'inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors',
|
||||
activePanel === tool.id
|
||||
? 'border-sky-200/75 bg-sky-300/28'
|
||||
: 'border-white/20 bg-white/8 hover:bg-white/15',
|
||||
)}
|
||||
>
|
||||
<span aria-hidden>{tool.icon}</span>
|
||||
<span className="sr-only">{tool.label}</span>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<button
|
||||
key={tool.id}
|
||||
type="button"
|
||||
title={tool.label}
|
||||
onClick={() => togglePanel(tool.id)}
|
||||
className={cn(
|
||||
'inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors',
|
||||
activePanel === tool.id
|
||||
? 'border-sky-200/75 bg-sky-300/28'
|
||||
: 'border-white/20 bg-white/8 hover:bg-white/15',
|
||||
)}
|
||||
onClick={() => setRailExpanded(true)}
|
||||
className="inline-flex flex-col items-center gap-1 py-1"
|
||||
>
|
||||
<span aria-hidden>{tool.icon}</span>
|
||||
<span className="sr-only">{tool.label}</span>
|
||||
<span className="sr-only">도구 레일 펼치기</span>
|
||||
<span aria-hidden className="h-1 w-1 rounded-full bg-white/74" />
|
||||
<span aria-hidden className="h-1 w-1 rounded-full bg-white/58" />
|
||||
<span aria-hidden className="h-1 w-1 rounded-full bg-white/44" />
|
||||
</button>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activePanel === 'sound' ? (
|
||||
<SoundSheetWidget
|
||||
onClose={handleClosePanel}
|
||||
selectedPresetId={selectedPresetId}
|
||||
onSelectPreset={setSelectedPresetId}
|
||||
isMixerOpen={isMixerOpen}
|
||||
onToggleMixer={() => setMixerOpen((current) => !current)}
|
||||
isMuted={isMuted}
|
||||
onMuteChange={setMuted}
|
||||
masterVolume={masterVolume}
|
||||
onMasterVolumeChange={setMasterVolume}
|
||||
trackKeys={trackKeys}
|
||||
trackLevels={trackLevels}
|
||||
onTrackLevelChange={setTrackLevel}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{activePanel === 'room' ? (
|
||||
<RoomSheetWidget
|
||||
roomName={roomName}
|
||||
@@ -85,7 +174,7 @@ export const SpaceToolsDockWidget = ({
|
||||
checkInPhrases={CHECK_IN_PHRASES}
|
||||
reactions={REACTION_OPTIONS}
|
||||
lastCheckIn={lastCheckIn}
|
||||
onClose={closePanel}
|
||||
onClose={handleClosePanel}
|
||||
onCheckIn={handleCheckIn}
|
||||
onReaction={(reaction) => handleReaction(reaction.emoji)}
|
||||
/>
|
||||
@@ -93,13 +182,19 @@ export const SpaceToolsDockWidget = ({
|
||||
|
||||
{activePanel === 'notes' ? (
|
||||
<NotesSheetWidget
|
||||
onClose={closePanel}
|
||||
onClose={handleClosePanel}
|
||||
onNoteAdded={(note) => pushToast({ title: `노트 추가: ${note}` })}
|
||||
onNoteRemoved={() => pushToast({ title: '노트를 정리했어요' })}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{activePanel === 'quick' ? <QuickSheetWidget onClose={closePanel} /> : null}
|
||||
{activePanel === 'quick' ? (
|
||||
<QuickSheetWidget
|
||||
onClose={handleClosePanel}
|
||||
isImmersionMode={isImmersionMode}
|
||||
onToggleImmersionMode={onToggleImmersionMode}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user