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

refactor(space): scene 도메인과 current session 계약을 정리

Browse Source
This commit is contained in:
corpi
2026-03-09 13:05:44 +09:00
parent 8184915cb1
commit 675014166a
19 changed files with 243 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@ import type { PlanTier } from '@/entities/plan';
import {
PRO_FEATURE_CARDS,
} from '@/entities/plan';
import { getRoomCardBackgroundStyle, type RoomTheme } from '@/entities/room';
import { getSceneCardBackgroundStyle, type SceneTheme } from '@/entities/scene';
import { SOUND_PRESETS, type TimerPreset } from '@/entities/session';
import { cn } from '@/shared/lib/cn';
import { useReducedMotion } from '@/shared/lib/useReducedMotion';
@@ -13,8 +13,8 @@ import { Toggle } from '@/shared/ui';
interface ControlCenterSheetWidgetProps {
plan: PlanTier;
rooms: RoomTheme[];
selectedRoomId: string;
scenes: SceneTheme[];
selectedSceneId: string;
selectedTimerLabel: string;
selectedSoundPresetId: string;
sceneRecommendedSoundLabel: string;
@@ -22,7 +22,7 @@ interface ControlCenterSheetWidgetProps {
timerPresets: TimerPreset[];
autoHideControls: boolean;
onAutoHideControlsChange: (next: boolean) => void;
onSelectRoom: (roomId: string) => void;
onSelectScene: (sceneId: string) => void;
onSelectTimer: (timerLabel: string) => void;
onSelectSound: (presetId: string) => void;
onSelectProFeature: (featureId: string) => void;
@@ -40,8 +40,8 @@ const SectionTitle = ({ title, description }: { title: string; description: stri
export const ControlCenterSheetWidget = ({
plan,
rooms,
selectedRoomId,
scenes,
selectedSceneId,
selectedTimerLabel,
selectedSoundPresetId,
sceneRecommendedSoundLabel,
@@ -49,7 +49,7 @@ export const ControlCenterSheetWidget = ({
timerPresets,
autoHideControls,
onAutoHideControlsChange,
onSelectRoom,
onSelectScene,
onSelectTimer,
onSelectSound,
onSelectProFeature,
@@ -64,14 +64,14 @@ export const ControlCenterSheetWidget = ({
? 'transition-none'
: 'transition-colors duration-[220ms] ease-out';
const selectedRoom = useMemo(() => {
return rooms.find((room) => room.id === selectedRoomId) ?? rooms[0];
}, [rooms, selectedRoomId]);
const selectedScene = useMemo(() => {
return scenes.find((scene) => scene.id === selectedSceneId) ?? scenes[0];
}, [scenes, selectedSceneId]);
return (
<div className="space-y-4">
<section className="space-y-2.5 rounded-2xl border border-white/12 bg-black/22 p-3.5 backdrop-blur-md">
<SectionTitle title="Scene" description={selectedRoom?.name ?? '공간'} />
<SectionTitle title="Background" description={selectedScene?.name ?? '기본 배경'} />
<div
className={cn(
'-mx-1 flex gap-2.5 overflow-x-auto px-1 pb-1.5 snap-x snap-mandatory scrollbar-none',
@@ -79,15 +79,15 @@ export const ControlCenterSheetWidget = ({
)}
style={{ scrollBehavior: reducedMotion ? 'auto' : 'smooth' }}
>
{rooms.slice(0, 6).map((room) => {
const selected = room.id === selectedRoomId;
{scenes.slice(0, 6).map((scene) => {
const selected = scene.id === selectedSceneId;
return (
<button
key={room.id}
key={scene.id}
type="button"
onClick={() => {
onSelectRoom(room.id);
onSelectScene(scene.id);
}}
className={cn(
'relative h-24 w-[130px] shrink-0 snap-start overflow-hidden rounded-xl border text-left',
@@ -96,11 +96,11 @@ export const ControlCenterSheetWidget = ({
selected ? 'border-sky-200/44 shadow-[0_8px_16px_rgba(56,189,248,0.18)]' : 'border-white/16',
)}
>
<div aria-hidden className="absolute inset-0 bg-cover bg-center" style={getRoomCardBackgroundStyle(room)} />
<div aria-hidden className="absolute inset-0 bg-cover bg-center" style={getSceneCardBackgroundStyle(scene)} />
<div aria-hidden className="absolute inset-0 bg-gradient-to-t from-black/56 via-black/18 to-black/6" />
<div className="absolute inset-x-2 bottom-2 min-w-0">
<p className="truncate text-sm font-medium text-white/90">{room.name}</p>
<p className="truncate text-[11px] text-white/66">{room.vibeLabel}</p>
<p className="truncate text-sm font-medium text-white/90">{scene.name}</p>
<p className="truncate text-[11px] text-white/66">{scene.vibeLabel}</p>
</div>
</button>
);