corpi
ce1664f472
맥락:
- /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 인원수 기반 정보를 큐레이션 표현으로 전환
세션-리스크: 터치 환경에서 미니 레일 발견성이 낮을 수 있어 보조 힌트가 필요할 수 있음
71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import {
|
|
SoundPresetControls,
|
|
type SoundTrackKey,
|
|
} from '@/features/sound-preset';
|
|
|
|
interface SoundSheetWidgetProps {
|
|
onClose: () => void;
|
|
selectedPresetId: string;
|
|
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;
|
|
}
|
|
|
|
export const SoundSheetWidget = ({
|
|
onClose,
|
|
selectedPresetId,
|
|
onSelectPreset,
|
|
isMixerOpen,
|
|
onToggleMixer,
|
|
isMuted,
|
|
onMuteChange,
|
|
masterVolume,
|
|
onMasterVolumeChange,
|
|
trackKeys,
|
|
trackLevels,
|
|
onTrackLevelChange,
|
|
}: SoundSheetWidgetProps) => {
|
|
return (
|
|
<aside className="fixed bottom-4 right-16 top-4 z-40 w-[min(92vw,340px)] animate-[sheet-in_220ms_ease-out] motion-reduce:animate-none">
|
|
<div className="flex h-full flex-col overflow-hidden rounded-2xl border border-white/20 bg-slate-950/72 shadow-[0_18px_60px_rgba(2,6,23,0.52)] backdrop-blur-xl">
|
|
<header className="flex items-center justify-between border-b border-white/12 px-4 py-4">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-white">Sound</h2>
|
|
<p className="text-[11px] text-white/56">오디오 재생은 연결하지 않은 UI 목업입니다.</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="rounded-lg border border-white/20 px-2 py-1 text-xs text-white/75 transition hover:bg-white/12 hover:text-white"
|
|
>
|
|
X
|
|
</button>
|
|
</header>
|
|
|
|
<div className="flex-1 overflow-y-auto px-4 py-4">
|
|
<SoundPresetControls
|
|
selectedPresetId={selectedPresetId}
|
|
onSelectPreset={onSelectPreset}
|
|
isMixerOpen={isMixerOpen}
|
|
onToggleMixer={onToggleMixer}
|
|
isMuted={isMuted}
|
|
onMuteChange={onMuteChange}
|
|
masterVolume={masterVolume}
|
|
onMasterVolumeChange={onMasterVolumeChange}
|
|
trackKeys={trackKeys}
|
|
trackLevels={trackLevels}
|
|
onTrackLevelChange={onTrackLevelChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|