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:
parent
6f3bcd7b46
commit
c51cd7bc87
|
|
@ -119,6 +119,25 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
|
||||||
const [localHeight, setLocalHeight] = useState<string>("");
|
const [localHeight, setLocalHeight] = useState<string>("");
|
||||||
const [localWidth, setLocalWidth] = 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 동기화
|
// 새로운 컴포넌트 시스템의 webType 동기화
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (selectedComponent?.type === "component") {
|
if (selectedComponent?.type === "component") {
|
||||||
|
|
@ -326,6 +345,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
|
||||||
config={config}
|
config={config}
|
||||||
onChange={handleConfigChange}
|
onChange={handleConfigChange}
|
||||||
tables={tables} // 테이블 정보 전달
|
tables={tables} // 테이블 정보 전달
|
||||||
|
allTables={allTables} // 🆕 전체 테이블 목록 전달 (selected-items-detail-input 등에서 사용)
|
||||||
screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName} // 🔧 화면 테이블명 전달
|
screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName} // 🔧 화면 테이블명 전달
|
||||||
tableColumns={currentTable?.columns || []} // 🔧 테이블 컬럼 정보 전달
|
tableColumns={currentTable?.columns || []} // 🔧 테이블 컬럼 정보 전달
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -180,7 +180,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
|
||||||
}, [screenTableName]); // config.targetTable은 의존성에서 제외 (한 번만 실행)
|
}, [screenTableName]); // config.targetTable은 의존성에서 제외 (한 번만 실행)
|
||||||
|
|
||||||
const handleChange = (key: keyof SelectedItemsDetailInputConfig, value: any) => {
|
const handleChange = (key: keyof SelectedItemsDetailInputConfig, value: any) => {
|
||||||
onChange({ [key]: value });
|
// 🔧 기존 config와 병합하여 다른 속성 유지
|
||||||
|
onChange({ ...config, [key]: value });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleFieldsChange = (fields: AdditionalFieldDefinition[]) => {
|
const handleFieldsChange = (fields: AdditionalFieldDefinition[]) => {
|
||||||
|
|
@ -403,7 +404,6 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
|
||||||
role="combobox"
|
role="combobox"
|
||||||
aria-expanded={sourceTableSelectOpen}
|
aria-expanded={sourceTableSelectOpen}
|
||||||
className="h-8 w-full justify-between text-xs sm:text-sm"
|
className="h-8 w-full justify-between text-xs sm:text-sm"
|
||||||
disabled={allTables.length === 0}
|
|
||||||
>
|
>
|
||||||
{selectedSourceTableLabel}
|
{selectedSourceTableLabel}
|
||||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50 sm:h-4 sm:w-4" />
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50 sm:h-4 sm:w-4" />
|
||||||
|
|
|
||||||
|
|
@ -1228,8 +1228,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
}
|
}
|
||||||
|
|
||||||
// 체크박스 컬럼 (나중에 위치 결정)
|
// 체크박스 컬럼 (나중에 위치 결정)
|
||||||
|
// 기본값: enabled가 undefined면 true로 처리
|
||||||
let checkboxCol: ColumnConfig | null = null;
|
let checkboxCol: ColumnConfig | null = null;
|
||||||
if (tableConfig.checkbox?.enabled) {
|
if (tableConfig.checkbox?.enabled ?? true) {
|
||||||
checkboxCol = {
|
checkboxCol = {
|
||||||
columnName: "__checkbox__",
|
columnName: "__checkbox__",
|
||||||
displayName: "",
|
displayName: "",
|
||||||
|
|
@ -1258,7 +1259,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
|
|
||||||
// 체크박스를 맨 앞 또는 맨 뒤에 추가
|
// 체크박스를 맨 앞 또는 맨 뒤에 추가
|
||||||
if (checkboxCol) {
|
if (checkboxCol) {
|
||||||
if (tableConfig.checkbox.position === "right") {
|
if (tableConfig.checkbox?.position === "right") {
|
||||||
cols = [...cols, checkboxCol];
|
cols = [...cols, checkboxCol];
|
||||||
} else {
|
} else {
|
||||||
cols = [checkboxCol, ...cols];
|
cols = [checkboxCol, ...cols];
|
||||||
|
|
|
||||||
|
|
@ -269,7 +269,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
|
||||||
// });
|
// });
|
||||||
|
|
||||||
const parentValue = config[parentKey] as any;
|
const parentValue = config[parentKey] as any;
|
||||||
|
// 전체 config와 병합하여 다른 속성 유지
|
||||||
const newConfig = {
|
const newConfig = {
|
||||||
|
...config,
|
||||||
[parentKey]: {
|
[parentKey]: {
|
||||||
...parentValue,
|
...parentValue,
|
||||||
[childKey]: value,
|
[childKey]: value,
|
||||||
|
|
@ -754,6 +756,52 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
|
||||||
</div>
|
</div>
|
||||||
</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 className="space-y-3">
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue