From e9e6006513c86f7303881515783136f8e8b44eb1 Mon Sep 17 00:00:00 2001 From: corpi Date: Thu, 5 Mar 2026 14:08:09 +0900 Subject: [PATCH] =?UTF-8?q?style(control-center):=20=EB=AA=A8=EB=93=9C=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20pill=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= =?UTF-8?q?=ED=95=98=EA=B3=A0=20=ED=8C=A8=EB=84=90=20=EB=B0=94=EB=94=94?= =?UTF-8?q?=EB=A1=9C=20=EC=9E=AC=EB=B0=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 맥락: - Quick Controls 헤더의 모드 토글이 대시보드형 느낌을 만들어 감성 톤을 해치고 있었습니다. 변경사항: - Control Center 헤더에서는 모드 조작 UI를 제거하고 Plan Pill + 닫기만 유지했습니다. - 패널 바디 첫 섹션에 기본/몰입 segmented pill을 배치하고, 선택 상태에 따라 저자극 스타일을 적용했습니다. - 모드 설명 1줄(기본: 모든 컨트롤 표시, 몰입: 필수만 남기고 숨김)을 추가했습니다. - 모드 상태를 workspace -> tools-dock -> focus-hud 경로로 연결해 HUD 톤 반영을 유지했습니다. 검증: - npx tsc --noEmit 세션-상태: Quick Controls 헤더가 깔끔해지고 모드 선택이 패널 바디에서 동작합니다. 세션-다음: Scene 추천 매핑 품질 점검과 override UX 검증을 진행합니다. 세션-리스크: 모드 설명 문구의 톤/길이는 실제 사용성 테스트에서 추가 미세조정이 필요할 수 있습니다. --- .../ui/ControlCenterSheetWidget.tsx | 39 +++++++++++++++++++ .../ui/SpaceFocusHudWidget.tsx | 4 +- .../ui/SpaceToolsDockWidget.tsx | 6 +++ .../ui/SpaceWorkspaceWidget.tsx | 4 ++ 4 files changed, 52 insertions(+), 1 deletion(-) diff --git a/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx b/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx index 4e5c958..6fb3c52 100644 --- a/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx +++ b/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx @@ -16,9 +16,11 @@ interface ControlCenterSheetWidgetProps { rooms: RoomTheme[]; selectedRoomId: string; selectedTimerLabel: string; + isImmersionMode: boolean; sceneRecommendedSoundLabel: string; sceneRecommendedTimerLabel: string; timerPresets: TimerPreset[]; + onImmersionModeChange: (next: boolean) => void; onSelectRoom: (roomId: string) => void; onSelectTimer: (timerLabel: string) => void; onLockedClick: (source: string) => void; @@ -47,9 +49,11 @@ export const ControlCenterSheetWidget = ({ rooms, selectedRoomId, selectedTimerLabel, + isImmersionMode, sceneRecommendedSoundLabel, sceneRecommendedTimerLabel, timerPresets, + onImmersionModeChange, onSelectRoom, onSelectTimer, onLockedClick, @@ -70,6 +74,41 @@ export const ControlCenterSheetWidget = ({ return (
+
+
+

모드

+
+ + +
+
+

+ {isImmersionMode ? '필수만 남기고 숨김' : '모든 컨트롤 표시'} +

+
+
void; statusLine: HudStatusLineItem | null; onStatusAction: () => void; @@ -19,6 +20,7 @@ export const SpaceFocusHudWidget = ({ goal, timerLabel, visible, + isImmersionMode, onGoalUpdate, statusLine, onStatusAction, @@ -108,7 +110,7 @@ export const SpaceFocusHudWidget = ({ } : null } - isImmersionMode + isImmersionMode={isImmersionMode} className="pr-[4.2rem]" onGoalCompleteRequest={handleOpenCompleteSheet} onStatusAction={onStatusAction} diff --git a/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx b/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx index f69e191..09a6151 100644 --- a/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx +++ b/src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx @@ -20,6 +20,7 @@ import { QuickSoundPopover } from './popovers/QuickSoundPopover'; import { InboxToolPanel } from './panels/InboxToolPanel'; interface SpaceToolsDockWidgetProps { isFocusMode: boolean; + isImmersionMode: boolean; rooms: RoomTheme[]; selectedRoomId: string; selectedTimerLabel: string; @@ -42,12 +43,14 @@ interface SpaceToolsDockWidgetProps { onRestoreThought: (thought: RecentThought) => void; onClearInbox: () => RecentThought[]; onResetToSceneRecommended: () => void; + onImmersionModeChange: (next: boolean) => void; onStatusMessage: (payload: HudStatusLinePayload) => void; onExitRequested: () => void; } export const SpaceToolsDockWidget = ({ isFocusMode, + isImmersionMode, rooms, selectedRoomId, selectedTimerLabel, @@ -70,6 +73,7 @@ export const SpaceToolsDockWidget = ({ onRestoreThought, onClearInbox, onResetToSceneRecommended, + onImmersionModeChange, onStatusMessage, onExitRequested, }: SpaceToolsDockWidgetProps) => { @@ -411,9 +415,11 @@ export const SpaceToolsDockWidget = ({ rooms={rooms} selectedRoomId={selectedRoomId} selectedTimerLabel={selectedTimerLabel} + isImmersionMode={isImmersionMode} sceneRecommendedSoundLabel={sceneRecommendedSoundLabel} sceneRecommendedTimerLabel={sceneRecommendedTimerLabel} timerPresets={timerPresets} + onImmersionModeChange={onImmersionModeChange} onSelectRoom={(roomId) => { onRoomSelect(roomId); }} diff --git a/src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx b/src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx index b62feb4..acb5f4b 100644 --- a/src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx +++ b/src/widgets/space-workspace/ui/SpaceWorkspaceWidget.tsx @@ -167,6 +167,7 @@ export const SpaceWorkspaceWidget = () => { ); const [workspaceMode, setWorkspaceMode] = useState('setup'); + const [isImmersionMode, setImmersionMode] = useState(false); const [selectedRoomId, setSelectedRoomId] = useState(initialRoomId); const [selectedTimerLabel, setSelectedTimerLabel] = useState(initialTimerLabel); const [goalInput, setGoalInput] = useState(initialGoal); @@ -377,6 +378,7 @@ export const SpaceWorkspaceWidget = () => { goal={goalInput.trim()} timerLabel={selectedTimerLabel} visible={isFocusMode} + isImmersionMode={isImmersionMode} statusLine={activeStatus} onStatusAction={runActiveAction} onStatusMessage={pushStatusLine} @@ -405,6 +407,8 @@ export const SpaceWorkspaceWidget = () => { onSetSoundVolume={setMasterVolume} isSoundMuted={isMuted} onSetSoundMuted={setMuted} + isImmersionMode={isImmersionMode} + onImmersionModeChange={setImmersionMode} onCaptureThought={(note) => addThought(note, selectedRoom.name)} onDeleteThought={removeThought} onSetThoughtCompleted={setThoughtCompleted}