feat: select-basic 컴포넌트에 다중선택 기능 추가
기능: - 설정 패널에 '다중 선택' 체크박스 추가 - multiple 옵션 활성화 시 다중선택 UI 렌더링 - 선택된 항목을 태그 형식으로 표시 - 각 태그에 X 버튼으로 개별 제거 가능 - 드롭다운에 체크박스 표시 - 콤마(,) 구분자로 값 저장/파싱 수정사항: - SelectBasicConfigPanel: 다중 선택 체크박스 추가 - SelectBasicConfigPanel: config 병합 방식으로 변경 (다른 속성 보호) - SelectBasicComponent: 초기값 콤마 구분자로 파싱 - SelectBasicComponent: 외부 value 변경 시 다중선택 배열 동기화 - SelectBasicComponent: 다중선택 UI 렌더링 로직 추가 사용법: 1. 설정 패널에서 '다중 선택' 체크 2. 드롭다운에서 여러 항목 선택 3. 선택된 항목이 태그로 표시되며 X로 제거 가능 4. 저장 시 '값1,값2,값3' 형식으로 저장
This commit is contained in:
@@ -21,7 +21,9 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
||||
onChange,
|
||||
}) => {
|
||||
const handleChange = (key: keyof SelectBasicConfig, value: any) => {
|
||||
onChange({ [key]: value });
|
||||
// 기존 config와 병합하여 전체 객체 전달 (다른 속성 보호)
|
||||
const newConfig = { ...config, [key]: value };
|
||||
onChange(newConfig);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -67,6 +69,15 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
||||
onCheckedChange={(checked) => handleChange("readonly", checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="multiple">다중 선택</Label>
|
||||
<Checkbox
|
||||
id="multiple"
|
||||
checked={config.multiple || false}
|
||||
onCheckedChange={(checked) => handleChange("multiple", checked)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user