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:
kjs
2025-11-20 18:17:08 +09:00
parent 3219015a39
commit c57e0218fe
2 changed files with 114 additions and 4 deletions

View File

@@ -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>
);
};