fix: 컴포넌트 설정 패널 config 병합 및 props 전달 개선

- TableListConfigPanel: handleNestedChange에서 전체 config 병합 로직 추가
- TableListComponent: checkbox.enabled 및 position 기본값 처리 (undefined시 기본값 사용)
- SelectedItemsDetailInputConfigPanel: handleChange에서 전체 config 병합 로직 추가
- SelectedItemsDetailInputConfigPanel: 원본 데이터 테이블 선택 disabled 조건 제거
- UnifiedPropertiesPanel: allTables 로드 및 ConfigPanel에 전달 추가

문제:
1. table-list 컴포넌트 체크박스 설정 변경 시 다른 설정 초기화
2. selected-items-detail-input 설정 변경 시 컴포넌트 이름 등 다른 속성 손실
3. 원본 데이터 테이블 선택이 비활성화되어 있음

해결:
- 모든 설정 패널에서 부분 업데이트 시 기존 config와 병합하도록 수정
- checkbox 관련 기본값 처리로 기존 컴포넌트 호환성 보장
- allTables를 별도로 로드하여 전체 테이블 목록 제공
This commit is contained in:
kjs 2025-11-20 17:31:42 +09:00
parent 6f3bcd7b46
commit c51cd7bc87
4 changed files with 73 additions and 4 deletions

View File

@ -119,6 +119,25 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
const [localHeight, setLocalHeight] = useState<string>("");
const [localWidth, setLocalWidth] = useState<string>("");
// 🆕 전체 테이블 목록 (selected-items-detail-input 등에서 사용)
const [allTables, setAllTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
// 🆕 전체 테이블 목록 로드
useEffect(() => {
const loadAllTables = async () => {
try {
const { tableManagementApi } = await import("@/lib/api/tableManagement");
const response = await tableManagementApi.getTableList();
if (response.success && response.data) {
setAllTables(response.data);
}
} catch (error) {
console.error("전체 테이블 목록 로드 실패:", error);
}
};
loadAllTables();
}, []);
// 새로운 컴포넌트 시스템의 webType 동기화
useEffect(() => {
if (selectedComponent?.type === "component") {
@ -326,6 +345,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
config={config}
onChange={handleConfigChange}
tables={tables} // 테이블 정보 전달
allTables={allTables} // 🆕 전체 테이블 목록 전달 (selected-items-detail-input 등에서 사용)
screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName} // 🔧 화면 테이블명 전달
tableColumns={currentTable?.columns || []} // 🔧 테이블 컬럼 정보 전달
/>

View File

@ -180,7 +180,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
}, [screenTableName]); // config.targetTable은 의존성에서 제외 (한 번만 실행)
const handleChange = (key: keyof SelectedItemsDetailInputConfig, value: any) => {
onChange({ [key]: value });
// 🔧 기존 config와 병합하여 다른 속성 유지
onChange({ ...config, [key]: value });
};
const handleFieldsChange = (fields: AdditionalFieldDefinition[]) => {
@ -403,7 +404,6 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
role="combobox"
aria-expanded={sourceTableSelectOpen}
className="h-8 w-full justify-between text-xs sm:text-sm"
disabled={allTables.length === 0}
>
{selectedSourceTableLabel}
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50 sm:h-4 sm:w-4" />

View File

@ -1228,8 +1228,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
}
// 체크박스 컬럼 (나중에 위치 결정)
// 기본값: enabled가 undefined면 true로 처리
let checkboxCol: ColumnConfig | null = null;
if (tableConfig.checkbox?.enabled) {
if (tableConfig.checkbox?.enabled ?? true) {
checkboxCol = {
columnName: "__checkbox__",
displayName: "",
@ -1258,7 +1259,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
// 체크박스를 맨 앞 또는 맨 뒤에 추가
if (checkboxCol) {
if (tableConfig.checkbox.position === "right") {
if (tableConfig.checkbox?.position === "right") {
cols = [...cols, checkboxCol];
} else {
cols = [checkboxCol, ...cols];

View File

@ -269,7 +269,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
// });
const parentValue = config[parentKey] as any;
// 전체 config와 병합하여 다른 속성 유지
const newConfig = {
...config,
[parentKey]: {
...parentValue,
[childKey]: value,
@ -754,6 +756,52 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
</div>
</div>
{/* 체크박스 설정 */}
<div className="space-y-3">
<div>
<h3 className="text-sm font-semibold"> </h3>
</div>
<hr className="border-border" />
<div className="space-y-2">
<div className="flex items-center space-x-2">
<Checkbox
id="checkboxEnabled"
checked={config.checkbox?.enabled ?? true}
onCheckedChange={(checked) => handleNestedChange("checkbox", "enabled", checked)}
/>
<Label htmlFor="checkboxEnabled"> </Label>
</div>
{config.checkbox?.enabled && (
<>
<div className="flex items-center space-x-2">
<Checkbox
id="checkboxSelectAll"
checked={config.checkbox?.selectAll ?? true}
onCheckedChange={(checked) => handleNestedChange("checkbox", "selectAll", checked)}
/>
<Label htmlFor="checkboxSelectAll"> </Label>
</div>
<div className="space-y-1">
<Label htmlFor="checkboxPosition" className="text-xs">
</Label>
<select
id="checkboxPosition"
value={config.checkbox?.position || "left"}
onChange={(e) => handleNestedChange("checkbox", "position", e.target.value)}
className="w-full h-8 text-xs border rounded-md px-2"
>
<option value="left"></option>
<option value="right"></option>
</select>
</div>
</>
)}
</div>
</div>
{/* 가로 스크롤 및 컬럼 고정 */}
<div className="space-y-3">
<div>