kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

뉴 컴포넌트

This commit is contained in:
kjs 2025-12-19 16:40:40 +09:00
parent 034ef59ef9
commit d33daf0a3d
4 changed files with 527 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/components/screen/panels/ComponentsPanel.tsx
View File

@ -86,22 +86,8 @@ export function ComponentsPanel({
tags: ["table", "list", "card", "kanban", "unified"],
defaultSize: { width: 600, height: 400 },
},
{
id: "unified-layout",
name: "통합 레이아웃",
description: "그리드, 분할 패널, 플렉스 등 다양한 레이아웃 지원",
category: "layout" as ComponentCategory,
tags: ["grid", "split", "flex", "unified"],
defaultSize: { width: 400, height: 300 },
},
{
id: "unified-group",
name: "통합 그룹",
description: "탭, 아코디언, 섹션, 카드섹션, 모달 등 다양한 그룹핑 지원",
category: "layout" as ComponentCategory,
tags: ["tabs", "accordion", "section", "modal", "unified"],
defaultSize: { width: 400, height: 300 },
},
// unified-layout: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
// unified-group: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
{
id: "unified-media",
name: "통합 미디어",

273
frontend/components/unified/config-panels/UnifiedBizConfigPanel.tsx
View File

@ -5,27 +5,151 @@
* 통합 비즈니스 컴포넌트의 세부 설정을 관리합니다.
*/
import React from "react";
import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import { tableTypeApi } from "@/lib/api/screen";
interface UnifiedBizConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
}
interface TableOption {
tableName: string;
displayName: string;
}
interface ColumnOption {
columnName: string;
displayName: string;
}
export const UnifiedBizConfigPanel: React.FC<UnifiedBizConfigPanelProps> = ({
config,
onChange,
}) => {
// 테이블 목록
const [tables, setTables] = useState<TableOption[]>([]);
const [loadingTables, setLoadingTables] = useState(false);
// 컬럼 목록 (소스/대상/관련 테이블용)
const [sourceColumns, setSourceColumns] = useState<ColumnOption[]>([]);
const [targetColumns, setTargetColumns] = useState<ColumnOption[]>([]);
const [relatedColumns, setRelatedColumns] = useState<ColumnOption[]>([]);
const [categoryColumns, setCategoryColumns] = useState<ColumnOption[]>([]);
const [loadingColumns, setLoadingColumns] = useState(false);
// 설정 업데이트 핸들러
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
// 테이블 목록 로드
useEffect(() => {
const loadTables = async () => {
setLoadingTables(true);
try {
const data = await tableTypeApi.getTables();
setTables(data.map(t => ({
tableName: t.tableName,
displayName: t.displayName || t.tableName
})));
} catch (error) {
console.error("테이블 목록 로드 실패:", error);
} finally {
setLoadingTables(false);
}
};
loadTables();
}, []);
// 소스 테이블 선택 시 컬럼 목록 로드
useEffect(() => {
const loadColumns = async () => {
if (!config.sourceTable) {
setSourceColumns([]);
return;
}
try {
const data = await tableTypeApi.getColumns(config.sourceTable);
setSourceColumns(data.map((c: any) => ({
columnName: c.columnName || c.column_name,
displayName: c.displayName || c.columnName || c.column_name
})));
} catch (error) {
console.error("소스 컬럼 로드 실패:", error);
}
};
loadColumns();
}, [config.sourceTable]);
// 대상 테이블 선택 시 컬럼 목록 로드
useEffect(() => {
const loadColumns = async () => {
if (!config.targetTable) {
setTargetColumns([]);
return;
}
try {
const data = await tableTypeApi.getColumns(config.targetTable);
setTargetColumns(data.map((c: any) => ({
columnName: c.columnName || c.column_name,
displayName: c.displayName || c.columnName || c.column_name
})));
} catch (error) {
console.error("대상 컬럼 로드 실패:", error);
}
};
loadColumns();
}, [config.targetTable]);
// 관련 테이블 선택 시 컬럼 목록 로드
useEffect(() => {
const loadColumns = async () => {
if (!config.relatedTable) {
setRelatedColumns([]);
return;
}
try {
const data = await tableTypeApi.getColumns(config.relatedTable);
setRelatedColumns(data.map((c: any) => ({
columnName: c.columnName || c.column_name,
displayName: c.displayName || c.columnName || c.column_name
})));
} catch (error) {
console.error("관련 컬럼 로드 실패:", error);
}
};
loadColumns();
}, [config.relatedTable]);
// 카테고리 테이블 선택 시 컬럼 목록 로드
useEffect(() => {
const loadColumns = async () => {
if (!config.tableName) {
setCategoryColumns([]);
return;
}
setLoadingColumns(true);
try {
const data = await tableTypeApi.getColumns(config.tableName);
setCategoryColumns(data.map((c: any) => ({
columnName: c.columnName || c.column_name,
displayName: c.displayName || c.columnName || c.column_name
})));
} catch (error) {
console.error("카테고리 컬럼 로드 실패:", error);
} finally {
setLoadingColumns(false);
}
};
loadColumns();
}, [config.tableName]);
return (
<div className="space-y-4">
{/* 비즈니스 타입 */}
@ -173,23 +297,48 @@ export const UnifiedBizConfigPanel: React.FC<UnifiedBizConfigPanelProps> = ({
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">카테고리 테이블</Label>
<Input
<Select
value={config.tableName || ""}
onChange={(e) => updateConfig("tableName", e.target.value)}
placeholder="카테고리 테이블명"
className="h-8 text-xs"
/>
onValueChange={(value) => {
updateConfig("tableName", value);
updateConfig("columnName", "");
}}
disabled={loadingTables}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">컬럼명</Label>
<Input
value={config.columnName || ""}
onChange={(e) => updateConfig("columnName", e.target.value)}
placeholder="컬럼명"
className="h-8 text-xs"
/>
</div>
{config.tableName && (
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">컬럼</Label>
<Select
value={config.columnName || ""}
onValueChange={(value) => updateConfig("columnName", value)}
disabled={loadingColumns}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "컬럼 선택"} />
</SelectTrigger>
<SelectContent>
{categoryColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
</div>
)}
@ -200,22 +349,42 @@ export const UnifiedBizConfigPanel: React.FC<UnifiedBizConfigPanelProps> = ({
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">소스 테이블</Label>
<Input
<Select
value={config.sourceTable || ""}
onChange={(e) => updateConfig("sourceTable", e.target.value)}
placeholder="소스 테이블명"
className="h-8 text-xs"
/>
onValueChange={(value) => updateConfig("sourceTable", value)}
disabled={loadingTables}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">대상 테이블</Label>
<Input
<Select
value={config.targetTable || ""}
onChange={(e) => updateConfig("targetTable", e.target.value)}
placeholder="대상 테이블명"
className="h-8 text-xs"
/>
onValueChange={(value) => updateConfig("targetTable", value)}
disabled={loadingTables}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
)}
@ -227,23 +396,47 @@ export const UnifiedBizConfigPanel: React.FC<UnifiedBizConfigPanelProps> = ({
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">관련 테이블</Label>
<Input
<Select
value={config.relatedTable || ""}
onChange={(e) => updateConfig("relatedTable", e.target.value)}
placeholder="관련 테이블명"
className="h-8 text-xs"
/>
onValueChange={(value) => {
updateConfig("relatedTable", value);
updateConfig("linkColumn", "");
}}
disabled={loadingTables}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">연결 컬럼</Label>
<Input
value={config.linkColumn || ""}
onChange={(e) => updateConfig("linkColumn", e.target.value)}
placeholder="연결 컬럼명"
className="h-8 text-xs"
/>
</div>
{config.relatedTable && (
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">연결 컬럼</Label>
<Select
value={config.linkColumn || ""}
onValueChange={(value) => updateConfig("linkColumn", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="컬럼 선택" />
</SelectTrigger>
<SelectContent>
{relatedColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">버튼 텍스트</Label>
@ -263,5 +456,3 @@ export const UnifiedBizConfigPanel: React.FC<UnifiedBizConfigPanelProps> = ({
UnifiedBizConfigPanel.displayName = "UnifiedBizConfigPanel";
export default UnifiedBizConfigPanel;

229
frontend/components/unified/config-panels/UnifiedHierarchyConfigPanel.tsx
View File

@ -5,27 +5,89 @@
* 통합 계층 컴포넌트의 세부 설정을 관리합니다.
*/
import React from "react";
import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import { tableTypeApi } from "@/lib/api/screen";
interface UnifiedHierarchyConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
}
interface TableOption {
tableName: string;
displayName: string;
}
interface ColumnOption {
columnName: string;
displayName: string;
}
export const UnifiedHierarchyConfigPanel: React.FC<UnifiedHierarchyConfigPanelProps> = ({
config,
onChange,
}) => {
// 테이블 목록
const [tables, setTables] = useState<TableOption[]>([]);
const [loadingTables, setLoadingTables] = useState(false);
// 컬럼 목록
const [columns, setColumns] = useState<ColumnOption[]>([]);
const [loadingColumns, setLoadingColumns] = useState(false);
// 설정 업데이트 핸들러
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
// 테이블 목록 로드
useEffect(() => {
const loadTables = async () => {
setLoadingTables(true);
try {
const data = await tableTypeApi.getTables();
setTables(data.map(t => ({
tableName: t.tableName,
displayName: t.displayName || t.tableName
})));
} catch (error) {
console.error("테이블 목록 로드 실패:", error);
} finally {
setLoadingTables(false);
}
};
loadTables();
}, []);
// 테이블 선택 시 컬럼 목록 로드
useEffect(() => {
const loadColumns = async () => {
if (!config.tableName) {
setColumns([]);
return;
}
setLoadingColumns(true);
try {
const data = await tableTypeApi.getColumns(config.tableName);
setColumns(data.map((c: any) => ({
columnName: c.columnName || c.column_name,
displayName: c.displayName || c.columnName || c.column_name
})));
} catch (error) {
console.error("컬럼 목록 로드 실패:", error);
} finally {
setLoadingColumns(false);
}
};
loadColumns();
}, [config.tableName]);
return (
<div className="space-y-4">
{/* 계층 타입 */}
@ -91,44 +153,97 @@ export const UnifiedHierarchyConfigPanel: React.FC<UnifiedHierarchyConfigPanelPr
{/* DB 설정 */}
{config.dataSource === "db" && (
<div className="space-y-3">
{/* 테이블 선택 */}
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">테이블명</Label>
<Input
<Label className="text-[10px] text-muted-foreground">테이블</Label>
<Select
value={config.tableName || ""}
onChange={(e) => updateConfig("tableName", e.target.value)}
placeholder="테이블명"
className="h-8 text-xs"
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">ID 컬럼</Label>
<Input
value={config.idColumn || ""}
onChange={(e) => updateConfig("idColumn", e.target.value)}
placeholder="id"
className="h-8 text-xs"
/>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">부모 ID 컬럼</Label>
<Input
value={config.parentIdColumn || ""}
onChange={(e) => updateConfig("parentIdColumn", e.target.value)}
placeholder="parent_id"
className="h-8 text-xs"
/>
</div>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">표시 컬럼</Label>
<Input
value={config.labelColumn || ""}
onChange={(e) => updateConfig("labelColumn", e.target.value)}
placeholder="name"
className="h-8 text-xs"
/>
onValueChange={(value) => {
updateConfig("tableName", value);
// 테이블 변경 시 컬럼 초기화
updateConfig("idColumn", "");
updateConfig("parentIdColumn", "");
updateConfig("labelColumn", "");
}}
disabled={loadingTables}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 컬럼 선택 */}
{config.tableName && (
<>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">ID 컬럼</Label>
<Select
value={config.idColumn || ""}
onValueChange={(value) => updateConfig("idColumn", value)}
disabled={loadingColumns}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">부모 ID 컬럼</Label>
<Select
value={config.parentIdColumn || ""}
onValueChange={(value) => updateConfig("parentIdColumn", value)}
disabled={loadingColumns}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">표시 컬럼</Label>
<Select
value={config.labelColumn || ""}
onValueChange={(value) => updateConfig("labelColumn", value)}
disabled={loadingColumns}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</>
)}
</div>
)}
@ -227,12 +342,22 @@ export const UnifiedHierarchyConfigPanel: React.FC<UnifiedHierarchyConfigPanelPr
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">수량 컬럼</Label>
<Input
<Select
value={config.quantityColumn || ""}
onChange={(e) => updateConfig("quantityColumn", e.target.value)}
placeholder="quantity"
className="h-8 text-xs"
/>
onValueChange={(value) => updateConfig("quantityColumn", value)}
disabled={loadingColumns || !config.tableName}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</>
@ -247,12 +372,22 @@ export const UnifiedHierarchyConfigPanel: React.FC<UnifiedHierarchyConfigPanelPr
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">부모 필드</Label>
<Input
<Select
value={config.parentField || ""}
onChange={(e) => updateConfig("parentField", e.target.value)}
placeholder="부모 필드명"
className="h-8 text-xs"
/>
onValueChange={(value) => updateConfig("parentField", value)}
disabled={loadingColumns || !config.tableName}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex items-center space-x-2">
@ -273,5 +408,3 @@ export const UnifiedHierarchyConfigPanel: React.FC<UnifiedHierarchyConfigPanelPr
UnifiedHierarchyConfigPanel.displayName = "UnifiedHierarchyConfigPanel";
export default UnifiedHierarchyConfigPanel;

133
frontend/components/unified/config-panels/UnifiedListConfigPanel.tsx
View File

@ -5,45 +5,107 @@
* 통합 목록 컴포넌트의 세부 설정을 관리합니다.
*/
import React from "react";
import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Plus, Trash2 } from "lucide-react";
import { tableTypeApi } from "@/lib/api/screen";
interface UnifiedListConfigPanelProps {
config: Record<string, any>;
onChange: (config: Record<string, any>) => void;
}
interface TableOption {
tableName: string;
displayName: string;
}
interface ColumnOption {
columnName: string;
displayName: string;
}
export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
config,
onChange,
}) => {
// 테이블 목록
const [tables, setTables] = useState<TableOption[]>([]);
const [loadingTables, setLoadingTables] = useState(false);
// 컬럼 목록
const [columns, setColumns] = useState<ColumnOption[]>([]);
const [loadingColumns, setLoadingColumns] = useState(false);
// 설정 업데이트 핸들러
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
// 테이블 목록 로드
useEffect(() => {
const loadTables = async () => {
setLoadingTables(true);
try {
const data = await tableTypeApi.getTables();
setTables(data.map(t => ({
tableName: t.tableName,
displayName: t.displayName || t.tableName
})));
} catch (error) {
console.error("테이블 목록 로드 실패:", error);
} finally {
setLoadingTables(false);
}
};
loadTables();
}, []);
// 테이블 선택 시 컬럼 목록 로드
useEffect(() => {
const loadColumns = async () => {
if (!config.tableName) {
setColumns([]);
return;
}
setLoadingColumns(true);
try {
const data = await tableTypeApi.getColumns(config.tableName);
setColumns(data.map((c: any) => ({
columnName: c.columnName || c.column_name,
displayName: c.displayName || c.columnName || c.column_name
})));
} catch (error) {
console.error("컬럼 목록 로드 실패:", error);
} finally {
setLoadingColumns(false);
}
};
loadColumns();
}, [config.tableName]);
// 컬럼 관리
const columns = config.columns || [];
const configColumns = config.columns || [];
const addColumn = () => {
const newColumns = [...columns, { key: "", title: "", width: "" }];
const newColumns = [...configColumns, { key: "", title: "", width: "" }];
updateConfig("columns", newColumns);
};
const updateColumn = (index: number, field: string, value: string) => {
const newColumns = [...columns];
const newColumns = [...configColumns];
newColumns[index] = { ...newColumns[index], [field]: value };
updateConfig("columns", newColumns);
};
const removeColumn = (index: number) => {
const newColumns = columns.filter((_: any, i: number) => i !== index);
const newColumns = configColumns.filter((_: any, i: number) => i !== index);
updateConfig("columns", newColumns);
};
@ -91,13 +153,26 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
{/* DB 설정 */}
{config.source === "db" && (
<div className="space-y-2">
<Label className="text-xs font-medium">테이블명</Label>
<Input
<Label className="text-xs font-medium">테이블</Label>
<Select
value={config.tableName || ""}
onChange={(e) => updateConfig("tableName", e.target.value)}
placeholder="테이블명"
className="h-8 text-xs"
/>
onValueChange={(value) => {
updateConfig("tableName", value);
updateConfig("columns", []); // 테이블 변경 시 컬럼 초기화
}}
disabled={loadingTables}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
</SelectTrigger>
<SelectContent>
{tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
{table.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
@ -132,14 +207,32 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
</Button>
</div>
<div className="space-y-2 max-h-40 overflow-y-auto">
{columns.map((column: any, index: number) => (
{configColumns.map((column: any, index: number) => (
<div key={index} className="flex items-center gap-2">
<Input
{/* 컬럼 키 - 드롭다운 */}
<Select
value={column.key || ""}
onChange={(e) => updateColumn(index, "key", e.target.value)}
placeholder="키"
className="h-7 text-xs flex-1"
/>
onValueChange={(value) => {
const selectedCol = columns.find(c => c.columnName === value);
updateColumn(index, "key", value);
// 제목을 자동으로 설정
if (selectedCol && !column.title) {
updateColumn(index, "title", selectedCol.displayName);
}
}}
disabled={loadingColumns || !config.tableName}
>
<SelectTrigger className="h-7 text-xs flex-1">
<SelectValue placeholder="컬럼" />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
<Input
value={column.title || ""}
onChange={(e) => updateColumn(index, "title", e.target.value)}
@ -163,7 +256,7 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
</Button>
</div>
))}
{columns.length === 0 && (
{configColumns.length === 0 && (
<p className="text-xs text-muted-foreground text-center py-2">
컬럼을 추가해주세요
</p>
@ -242,5 +335,3 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
UnifiedListConfigPanel.displayName = "UnifiedListConfigPanel";
export default UnifiedListConfigPanel;