auto: 2026-08-29 16:42 (EOMSANGDON-HOME)

2026-08-29 16:42:58 +09:00
parent 16d89b7976
commit c641fa98b2
7 changed files with 32 additions and 14 deletions
@@ -37,11 +37,9 @@ export const Button: FC<ButtonProps> = ({
 	left = null,
 	right = null,
 }) => {
+	// 색은 App.css의 테마 토큰이 data-type/data-active로 준다 — 여기서는 배치만.
 	const classParts = [
-		'font-semibold py-4 h-10 flex flex-row justify-start w-full items-center hover:bg-blue-500 hover:text-white hover:border-transparent',
-		type === 'regular' ? 'bg-gray-950 text-blue-500' : '',
-		type === 'transparent' ? 'bg-transparent text-blue-500' : '',
-		active ? 'bg-blue-500 text-white border-transparent hover:bg-blue-400' : '',
+		'font-semibold py-4 h-10 flex flex-row justify-start w-full items-center',
 		size === 'regular' ? 'pl-2 pr-2 gap-2' : '',
 		size === 'small' ? 'pl-2 pr-2 gap-0' : '',
 		className || '',
@@ -68,7 +66,7 @@ export const Button: FC<ButtonProps> = ({
 					(iconName && (
 						<Icon
 							name={iconName}
-							className={`${iconClassname} text-blue-700 ${active ? 'text-white' : ''} ${size === 'small' ? 'w-4' : 'w-5'}`}
+							className={`${iconClassname ?? ''} ${size === 'small' ? 'w-4' : 'w-5'}`}
 						/>
 					))}
 				<div className="flex flex-row flex-nowrap">{left}</div>
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.5 7.5l-4 4m4-4l-4-4m4 4H3M1.5 1v13" stroke="currentColor"/>
+    <path d="M1.5 7.5l4-4m-4 4l4 4m-4-4H12m1.5 6.5V1" stroke="currentColor"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.5.5h-12a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1v-12a1 1 0 00-1-1z" stroke="currentColor"/>
+    <path d="M 9.159 5.175 L 1.166 5.175 C 0.799 5.175 0.5 5.472 0.5 5.841 L 0.5 13.834 C 0.5 14.203 0.799 14.5 1.166 14.5 L 9.159 14.5 C 9.528 14.5 9.825 14.203 9.825 13.834 L 9.825 5.841 C 9.825 5.472 9.528 5.175 9.159 5.175 Z"
+          stroke="currentColor" />
+</svg>
@@ -93,7 +93,7 @@ export const LayerManager: FC<LayerManagerProps> = ({
 							title="Set this layer as active"
 							active={activeLayerId === layer.id}
 							onClick={(evt) => handleLayerClick(evt, layer.id)}
-							className="data-[active=true]:text-white flex-grow"
+							className="flex-grow"
 							left={
 								<>
 									<Button
@@ -101,7 +101,7 @@ export const LayerManager: FC<LayerManagerProps> = ({
 										title="Show/hide layer content"
 										onClick={(evt) => handleShowHideLayer(evt, layer.id)}
 										size="small"
-										className="w-10 hover:bg-blue-300 -ml-1"
+										className="w-10 -ml-1"
 										type="transparent"
 										active={activeLayerId === layer.id}
 									/>
@@ -110,7 +110,7 @@ export const LayerManager: FC<LayerManagerProps> = ({
 										title="Lock/Unlock layer content"
 										onClick={(evt) => handleLockUnlockLayer(evt, layer.id)}
 										size="small"
-										className="w-10 hover:bg-blue-300"
+										className="w-10"
 										type="transparent"
 										active={activeLayerId === layer.id}
 									/>
@@ -123,7 +123,7 @@ export const LayerManager: FC<LayerManagerProps> = ({
 										title="Select entities on this layer"
 										onClick={(evt) => handleSelectEntitiesOnLayer(evt, layer.id)}
 										size="small"
-										className="w-10 hover:bg-blue-300"
+										className="w-10"
 										type="transparent"
 										active={activeLayerId === layer.id}
 									/>
@@ -132,7 +132,7 @@ export const LayerManager: FC<LayerManagerProps> = ({
 										title="Assign current selection to layer"
 										onClick={(evt) => handleAssignSelectionToLayer(evt, layer.id)}
 										size="small"
-										className="w-10 hover:bg-blue-300"
+										className="w-10"
 										type="transparent"
 										active={activeLayerId === layer.id}
 									/>
@@ -141,7 +141,7 @@ export const LayerManager: FC<LayerManagerProps> = ({
 										title="delete layer and content"
 										onClick={(evt) => handleDeleteLayer(evt, layer.id)}
 										size="small"
-										className="w-10 hover:bg-blue-300"
+										className="w-10"
 										type="transparent"
 										active={activeLayerId === layer.id}
 									/>
@@ -5,8 +5,11 @@ import { getBoundingBoxOfMultipleEntities } from '../helpers/get-bounding-box-of
 import { mapNumberRange } from '../helpers/map-number-range.ts';
 import { StateVariable } from '../helpers/undo-stack.ts';
 import { getEntities, getGridEnabled, triggerReactUpdate } from '../state.ts';
-import { DEFAULT_TEXT_OPTIONS, type DrawController } from './DrawController';
 import { paintColor, themeColor } from '../theme.ts';
+import { DEFAULT_TEXT_OPTIONS, type DrawController } from './DrawController';
+
+/** 토큰을 못 읽을 때만 쓰는 캔버스 배경 폴백. */
+const CANVAS_BACKGROUND_FALLBACK = '#111';

 /**
 * Screen coordinate system:
@@ -236,7 +239,7 @@ export class ScreenCanvasDrawController implements DrawController {
 		lineWidth: number,
 		dash: number[] = []
 	) {
-		// 저장된 도면 색은 다크 기준 — 라이트 테마에서는 그릴 때만 대비를 맞춘다.
+		// 저장된 도면 색은 다크 배경 기준 — 라이트 테마에서는 그릴 때만 대비를 맞춘다.
 		const color = paintColor(rawColor);
 		if (this.batching) {
 			const effectiveWidth = isHighlighted ? lineWidth + 1 : lineWidth;
@@ -333,7 +336,7 @@ export class ScreenCanvasDrawController implements DrawController {
 		if (!this.context) return;
 		if (this.batching) this.flushBatch();

-		this.context.fillStyle = themeColor('--cad-canvas', '#111');
+		this.context.fillStyle = themeColor('--cad-canvas', CANVAS_BACKGROUND_FALLBACK);
 		this.context.fillRect(0, 0, this.canvasSize?.x, this.canvasSize?.y);
 		if (getGridEnabled()) {
 			this.context.strokeStyle = themeColor('--color-mist', '#242b35');
@@ -31,10 +31,14 @@ import {
 	setLayers,
 	setScreenCanvasDrawController,
 } from './state';
+import { syncThemeFromHost } from './theme.ts';
 import { Tool } from './tools';
 import { TOOL_STATE_MACHINES } from './tools/tool.consts';
 import { ActorEvent, type DrawEvent } from './tools/tool.types';

+// 호스트 앱의 화이트/블랙 모드를 먼저 붙인 뒤 렌더한다.
+syncThemeFromHost();
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLDivElement).render(
 	<React.StrictMode>
 		<App />
@@ -7,6 +7,8 @@
 * `ui_template_theme.css`의 `prefers-color-scheme` 폴백이 그대로 먹는다.
 */

+import { bumpSceneVersion } from './helpers/scene-version.ts';
+
 const THEME_STORAGE_KEY = 'frd_theme';

 /** 테마가 바뀔 때마다 비우는 색 캐시 (CSS 변수 조회·휘도 보정 결과). */
@@ -21,6 +23,8 @@ function applyTheme(value: string | null): void {
 	}
 	cssVarCache = new Map();
 	paintCache = new Map();
+	// 정적 장면 비트맵은 배경·선 색까지 구워 두므로 테마가 바뀌면 다시 굽는다.
+	bumpSceneVersion();
 }

 /** 부팅 시 1회 호출 — 현재 테마 반영 + 이후 변경 구독. */