eomsangdonandClaude Opus 5
4cb9b15939
파일마다 포맷 폭이 달라(≈80 대 100) 한 줄만 고쳐도 포맷터가 무관한 줄을 대량 재포맷했음. 사용자 지시로 전체를 한 번에 맞춤. 코드 동작 변경 없음 — 포맷만. - 프론트엔드 `.ts/.css/.html` → 저장소 prettier (`.prettierrc`, printWidth 100) - `B07_DesignDetail/openwebcad/**` → 자체 biome (tab 들여쓰기·single quote·lineWidth 100). `biome format` 만 사용 — `biome lint --write` 는 포맷 아닌 코드 수정까지 하므로 제외 - 파이썬 → `ruff format` (엔진 코드는 이미 정합, resources·scratch 스크립트 24개만 변경) 두 포맷터가 서로 되돌리지 않도록 `.prettierignore` 신규 — openwebcad 와 빌드·산출물 폴더를 prettier 대상에서 뺌. `.prettierrc` 에 `endOfLine: "auto"` 추가 — 기본값 `lf` 가 `core.autocrlf=true` 로 받은 CRLF 파일을 매번 전부 다시 써서 `--list-different` 가 실제 포맷 차이를 가리고 있었음. 검증: `tsc --noEmit` 통과(루트·openwebcad 둘 다), pytest 349 passed / 17 skipped / 0 failed, CAD vitest 87건 중 81 passed / 6 failed(laptop-sub 기준선과 동일, 회귀 없음). 포맷터 재실행 시 prettier·biome 모두 변경 0건. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import type { CSSProperties, FC, ReactNode } from 'react';
|
|
import useLocalStorageState from 'use-local-storage-state';
|
|
import { LOCAL_STORAGE_KEY } from '../App.types.ts';
|
|
import { keyboardHandler } from '../helpers/keyboard-handler.ts';
|
|
import { Button } from './Button.tsx';
|
|
import { Icon, IconName } from './Icon/Icon.tsx';
|
|
|
|
interface DropdownButtonProps {
|
|
label?: string;
|
|
title?: string;
|
|
iconName?: IconName;
|
|
iconComponent?: ReactNode;
|
|
active?: boolean;
|
|
onClick?: () => void;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
buttonStyle?: CSSProperties;
|
|
dataId: string;
|
|
children?: ReactNode;
|
|
defaultOpen?: boolean;
|
|
}
|
|
|
|
export const DropdownButton: FC<DropdownButtonProps> = ({
|
|
label,
|
|
title,
|
|
iconName,
|
|
iconComponent,
|
|
className,
|
|
style,
|
|
buttonStyle,
|
|
dataId,
|
|
children,
|
|
defaultOpen = false,
|
|
}) => {
|
|
const [isOpen, setIsOpen] = useLocalStorageState<boolean>(
|
|
`${LOCAL_STORAGE_KEY.DROPDOWN}___${dataId}`,
|
|
{ defaultValue: defaultOpen }
|
|
);
|
|
|
|
const classParts = [
|
|
'flex flex-col gap-2 relative',
|
|
className || '',
|
|
isOpen ? ' bg-slate-900' : '',
|
|
];
|
|
return (
|
|
<div className={classParts.join(' ')} style={style} data-id={dataId}>
|
|
<Button
|
|
iconName={iconName}
|
|
iconComponent={iconComponent}
|
|
label={label}
|
|
title={title}
|
|
active={isOpen}
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
style={buttonStyle}
|
|
className={'w-full data-[active=true]:bg-blue-950 data-[active=true]:text-white'}
|
|
/>
|
|
<Icon name={IconName.SolidDownSmall} className={'absolute top-2.5 right-1 text-blue-700'} />
|
|
{isOpen && (
|
|
<div
|
|
className="flex flex-row flex-wrap max-w-72 gap-1 pl-1 pb-6"
|
|
onClick={() => setIsOpen(false)}
|
|
onKeyUp={keyboardHandler(() => setIsOpen(false))}
|
|
>
|
|
{children}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|