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>
80 lines
1.9 KiB
TypeScript
80 lines
1.9 KiB
TypeScript
import { noop } from 'es-toolkit';
|
|
import type { CSSProperties, FC, MouseEvent, ReactNode } from 'react';
|
|
import { Icon, type IconName } from './Icon/Icon.tsx';
|
|
|
|
interface ButtonProps {
|
|
label?: string;
|
|
title?: string;
|
|
iconName?: IconName;
|
|
iconClassname?: string;
|
|
iconComponent?: ReactNode;
|
|
active?: boolean;
|
|
onClick?: (evt: MouseEvent) => void;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
dataId?: string;
|
|
size?: 'small' | 'regular';
|
|
type?: 'regular' | 'transparent';
|
|
left?: ReactNode;
|
|
right?: ReactNode;
|
|
}
|
|
|
|
export const Button: FC<ButtonProps> = ({
|
|
label,
|
|
title,
|
|
iconName,
|
|
iconClassname,
|
|
iconComponent,
|
|
onClick,
|
|
active = false,
|
|
children,
|
|
className,
|
|
style,
|
|
dataId,
|
|
type = 'regular',
|
|
size = 'regular',
|
|
left = null,
|
|
right = null,
|
|
}) => {
|
|
// 색은 App.css의 테마 토큰이 data-type/data-active로 준다 — 여기서는 배치만 · 높이 = 크기 단 42(글 14 · 둥글기 8)
|
|
const classParts = [
|
|
'font-semibold h-[42px] text-sm rounded-lg 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 || '',
|
|
];
|
|
return (
|
|
<>
|
|
<button
|
|
className={classParts.join(' ')}
|
|
style={style}
|
|
data-active={active}
|
|
data-size={size}
|
|
data-type={type}
|
|
onClick={onClick || noop}
|
|
onKeyUp={(evt) => {
|
|
if (evt.key === 'Enter' || evt.key === ' ') {
|
|
onClick?.(evt as unknown as MouseEvent);
|
|
}
|
|
}}
|
|
title={title}
|
|
data-id={dataId}
|
|
type="button"
|
|
>
|
|
{iconComponent ||
|
|
(iconName && (
|
|
<Icon
|
|
name={iconName}
|
|
className={`${iconClassname ?? ''} ${size === 'small' ? 'w-4' : 'w-5'}`}
|
|
/>
|
|
))}
|
|
<div className="flex flex-row flex-nowrap">{left}</div>
|
|
{label && <span className="text-nowrap flex-grow text-left">{label}</span>}
|
|
{children}
|
|
<div className="flex flex-row flex-nowrap">{right}</div>
|
|
</button>
|
|
</>
|
|
);
|
|
};
|