eomsangdonandClaude Opus 5.5
de250ab759
- 부품 상자 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>
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
/** 좌측 팔레트 — 특성(PROPERTIES)과 도면층 관리자 (AutoCAD 팔레트 자리) */
|
||
import type { FC } from 'react';
|
||
import { LayerManager } from './LayerManager';
|
||
import { PropertiesEditor } from './PropertiesEditor';
|
||
import { getInspectorTab, openInspector } from './ui-state';
|
||
import { getActiveLayerId, getLayers, setActiveLayerId, setLayers } from '../state';
|
||
|
||
interface InspectorPanelProps {
|
||
collapsed: boolean;
|
||
onToggleCollapsed: () => void;
|
||
}
|
||
|
||
export const InspectorPanel: FC<InspectorPanelProps> = ({ collapsed, onToggleCollapsed }) => {
|
||
const tab = getInspectorTab();
|
||
const layers = getLayers();
|
||
const activeLayerId = getActiveLayerId();
|
||
|
||
return (
|
||
<aside className="cad-inspector controls" data-collapsed={collapsed}>
|
||
<button
|
||
className="cad-inspector__collapse"
|
||
type="button"
|
||
onClick={onToggleCollapsed}
|
||
title={collapsed ? '패널 펼치기' : '패널 접기'}
|
||
>
|
||
{collapsed ? '›' : '‹'}
|
||
</button>
|
||
{!collapsed && (
|
||
<>
|
||
{/* 탭 부품(밑줄 탭 · 단 36) — 칸 둘이 폭을 나눠 가짐 */}
|
||
<div className="ui-tabs cad-inspector-tabs" role="tablist">
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
className={`ui-tabs__tab${tab === 'properties' ? ' is-active' : ''}`}
|
||
data-size="36"
|
||
aria-selected={tab === 'properties'}
|
||
onClick={() => openInspector('properties')}
|
||
>
|
||
특성
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
className={`ui-tabs__tab${tab === 'layers' ? ' is-active' : ''}`}
|
||
data-size="36"
|
||
aria-selected={tab === 'layers'}
|
||
onClick={() => openInspector('layers')}
|
||
>
|
||
레이어
|
||
</button>
|
||
</div>
|
||
{tab === 'properties' ? (
|
||
<div className="cad-properties">
|
||
<PropertiesEditor />
|
||
</div>
|
||
) : (
|
||
<LayerManager
|
||
className="cad-layer-manager"
|
||
layers={layers}
|
||
activeLayerId={activeLayerId}
|
||
setLayers={(next) => setLayers(next)}
|
||
setActiveLayerId={(id) => setActiveLayerId(id)}
|
||
/>
|
||
)}
|
||
</>
|
||
)}
|
||
</aside>
|
||
);
|
||
};
|