refactor(cad): CAD 앱 겉 자체 변종을 부품 상자 부품으로 — 상태막대 켜기 칩 · 패널 탭 · 떠 있는 판 · 메뉴 · 아이콘 단추 · 확인창 (PLAN 553-6)

- 부품 상자 CSS · 단추 기본 꼴을 CAD iframe 에 실음(integration/ui-kit.ts) · 자리 · 폭은 cad-* 그대로
- 상태막대 = ui-toggle--chip 22 · 특성/레이어 = ui-tabs 36 · ↶↷ · 리본 접기 · 탐색 막대 = ui-icon-btn 20 · 32
- 빠른 특성 · 블록 라이브러리 · 자리표 = ui-float-panel · 리본 넘침 · 스냅 · 명령 자동완성 = ui-ctx-menu
- window.confirm · window.prompt → askConfirm · askText · 빈 안내 = ui-empty 작은 꼴
- 높이 단: 리본 칸 19→18 · 명령 칸 26→28 · 레이어 줄 40→42 · 문서 탭 25→24 · 도각 편집 단추 24
- 마우스 바탕 = --color-hover · 켜짐 = --color-accent-soft · 도면 그림 색(--draw-*) 안 건드림
- 안 쓰는 DropdownButton 지움(쓰는 곳 0 · grep)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

B07_DesignDetail/openwebcad/src/components/ViewControls.tsx

@@ -3,12 +3,10 @@ import type { FC } from 'react';
 import { runCommandInput } from '../commands/run-command';
 import { redoCommand, undoCommand } from '../inputController/prompt-input';
 import { zoomExtents } from '../inputController/zoom-prompt';
-import {
-	getScreenCanvasDrawController,
-	isDrawingReadOnly,
-	isHostSave,
-	isViewOnly,
-} from '../state';
+import { getScreenCanvasDrawController, isDrawingReadOnly, isHostSave, isViewOnly } from '../state';
+
+/** 아이콘 단추 부품(단 32) */
+const ICON_BUTTON = { className: 'ui-icon-btn ui-icon-btn--ghost', 'data-size': '32' } as const;
 
 export const ViewControls: FC = () => {
 	const zoom = getScreenCanvasDrawController()?.getScreenScale() ?? 1;
@@ -19,27 +17,52 @@ export const ViewControls: FC = () => {
 		<div className="cad-view-controls controls">
 			{showUndo && (
 				<>
-					<button type="button" onClick={undoCommand} title="실행 취소 (Ctrl+Z)">
+					<button
+						type="button"
+						{...ICON_BUTTON}
+						onClick={undoCommand}
+						title="실행 취소 (Ctrl+Z)"
+						aria-label="실행 취소"
+					>
 						↶
 					</button>
-					<button type="button" onClick={redoCommand} title="다시 실행 (Ctrl+Y)">
+					<button
+						type="button"
+						{...ICON_BUTTON}
+						onClick={redoCommand}
+						title="다시 실행 (Ctrl+Y)"
+						aria-label="다시 실행"
+					>
 						↷
 					</button>
 				</>
 			)}
 			<button
 				type="button"
-				className="cad-view-controls__fit"
+				{...ICON_BUTTON}
 				onClick={() => zoomExtents()}
 				title="범위 줌 (Z) — 도면 전체를 화면에 맞춘다"
+				aria-label="범위 줌"
 			>
 				⛶
 			</button>
-			<button type="button" onClick={() => runCommandInput('ZOOMIN')} title="확대">
+			<button
+				type="button"
+				{...ICON_BUTTON}
+				onClick={() => runCommandInput('ZOOMIN')}
+				title="확대"
+				aria-label="확대"
+			>
 				＋
 			</button>
 			<span>{Math.round(zoom * 100)}%</span>
-			<button type="button" onClick={() => runCommandInput('ZOOMOUT')} title="축소">
+			<button
+				type="button"
+				{...ICON_BUTTON}
+				onClick={() => runCommandInput('ZOOMOUT')}
+				title="축소"
+				aria-label="축소"
+			>
 				－
 			</button>
 		</div>