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

[agent-pipeline] pipe-20260311071246-rhvz round-7

This commit is contained in:
DDD1542 2026-03-11 16:49:44 +09:00
parent f3eca6b02c
commit 615bd8e2bf
2 changed files with 314 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

466
frontend/components/v2/config-panels/V2HierarchyConfigPanel.tsx
View File

@ -9,7 +9,6 @@ import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { tableTypeApi } from "@/lib/api/screen"; import { tableTypeApi } from "@/lib/api/screen";
@ -32,20 +31,15 @@ export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
config, config,
onChange, onChange,
}) => { }) => {
// 테이블 목록
const [tables, setTables] = useState<TableOption[]>([]); const [tables, setTables] = useState<TableOption[]>([]);
const [loadingTables, setLoadingTables] = useState(false); const [loadingTables, setLoadingTables] = useState(false);
// 컬럼 목록
const [columns, setColumns] = useState<ColumnOption[]>([]); const [columns, setColumns] = useState<ColumnOption[]>([]);
const [loadingColumns, setLoadingColumns] = useState(false); const [loadingColumns, setLoadingColumns] = useState(false);
// 설정 업데이트 핸들러
const updateConfig = (field: string, value: any) => { const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value }); onChange({ ...config, [field]: value });
}; };
// 테이블 목록 로드
useEffect(() => { useEffect(() => {
const loadTables = async () => { const loadTables = async () => {
setLoadingTables(true); setLoadingTables(true);
@ -64,14 +58,9 @@ export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
loadTables(); loadTables();
}, []); }, []);
// 테이블 선택 시 컬럼 목록 로드
useEffect(() => { useEffect(() => {
const loadColumns = async () => { const loadColumns = async () => {
if (!config.tableName) { if (!config.tableName) { setColumns([]); return; }
setColumns([]);
return;
}
setLoadingColumns(true); setLoadingColumns(true);
try { try {
const data = await tableTypeApi.getColumns(config.tableName); const data = await tableTypeApi.getColumns(config.tableName);
@ -89,265 +78,264 @@ export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
}, [config.tableName]); }, [config.tableName]);
return ( return (
<div className="space-y-4"> <div className="space-y-1">
{/* 계층 타입 */} {/* HIERARCHY TYPE 섹션 */}
<div className="space-y-2"> <div className="border-b border-border/50 pb-3 mb-3">
<Label className="text-xs font-medium">계층 타입</Label> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">HIERARCHY TYPE</h4>
<Select <div className="flex items-center justify-between py-1.5">
value={config.hierarchyType || config.type || "tree"} <span className="text-xs text-muted-foreground">계층 타입</span>
onValueChange={(value) => updateConfig("hierarchyType", value)} <div className="w-[140px]">
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="타입 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="tree">트리</SelectItem>
<SelectItem value="org-chart">조직도</SelectItem>
<SelectItem value="bom">BOM (Bill of Materials)</SelectItem>
<SelectItem value="cascading">연쇄 선택박스</SelectItem>
</SelectContent>
</Select>
</div>
<Separator />
{/* 뷰 모드 */}
<div className="space-y-2">
<Label className="text-xs font-medium">표시 방식</Label>
<Select
value={config.viewMode || "tree"}
onValueChange={(value) => updateConfig("viewMode", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="방식 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="tree">트리뷰</SelectItem>
<SelectItem value="table">테이블</SelectItem>
<SelectItem value="chart">차트</SelectItem>
<SelectItem value="cascading">연쇄 드롭다운</SelectItem>
</SelectContent>
</Select>
</div>
<Separator />
{/* 데이터 소스 */}
<div className="space-y-2">
<Label className="text-xs font-medium">데이터 소스</Label>
<Select
value={config.dataSource || "static"}
onValueChange={(value) => updateConfig("dataSource", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="소스 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="static">정적 데이터</SelectItem>
<SelectItem value="db">데이터베이스</SelectItem>
<SelectItem value="api">API</SelectItem>
</SelectContent>
</Select>
</div>
{/* DB 설정 */}
{config.dataSource === "db" && (
<div className="space-y-3">
{/* 테이블 선택 */}
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">테이블</Label>
<Select <Select
value={config.tableName || ""} value={config.hierarchyType || config.type || "tree"}
onValueChange={(value) => { onValueChange={(value) => updateConfig("hierarchyType", value)}
updateConfig("tableName", value);
// 테이블 변경 시 컬럼 초기화
updateConfig("idColumn", "");
updateConfig("parentIdColumn", "");
updateConfig("labelColumn", "");
}}
disabled={loadingTables}
> >
<SelectTrigger className="h-8 text-xs"> <SelectTrigger className="h-7 text-xs">
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} /> <SelectValue placeholder="타입 선택" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{tables.map((table) => ( <SelectItem value="tree">트리</SelectItem>
<SelectItem key={table.tableName} value={table.tableName}> <SelectItem value="org-chart">조직도</SelectItem>
{table.displayName} <SelectItem value="bom">BOM (Bill of Materials)</SelectItem>
</SelectItem> <SelectItem value="cascading">연쇄 선택박스</SelectItem>
))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div>
{/* 컬럼 선택 */} </div>
{config.tableName && (
<> {/* VIEW MODE 섹션 */}
<div className="grid grid-cols-2 gap-2"> <div className="border-b border-border/50 pb-3 mb-3">
<div className="space-y-2"> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">VIEW MODE</h4>
<Label className="text-[10px] text-muted-foreground">ID 컬럼</Label> <div className="flex items-center justify-between py-1.5">
<Select <span className="text-xs text-muted-foreground">표시 방식</span>
value={config.idColumn || ""} <div className="w-[140px]">
onValueChange={(value) => updateConfig("idColumn", value)} <Select
disabled={loadingColumns} value={config.viewMode || "tree"}
> onValueChange={(value) => updateConfig("viewMode", value)}
<SelectTrigger className="h-8 text-xs"> >
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} /> <SelectTrigger className="h-7 text-xs">
</SelectTrigger> <SelectValue placeholder="방식 선택" />
<SelectContent> </SelectTrigger>
{columns.map((col) => ( <SelectContent>
<SelectItem key={col.columnName} value={col.columnName}> <SelectItem value="tree">트리뷰</SelectItem>
{col.displayName} <SelectItem value="table">테이블</SelectItem>
</SelectItem> <SelectItem value="chart">차트</SelectItem>
))} <SelectItem value="cascading">연쇄 드롭다운</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="space-y-2"> </div>
<Label className="text-[10px] text-muted-foreground">부모 ID 컬럼</Label> </div>
<Select
value={config.parentIdColumn || ""} {/* DATA SOURCE 섹션 */}
onValueChange={(value) => updateConfig("parentIdColumn", value)} <div className="border-b border-border/50 pb-3 mb-3">
disabled={loadingColumns} <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DATA SOURCE</h4>
> <div className="flex items-center justify-between py-1.5">
<SelectTrigger className="h-8 text-xs"> <span className="text-xs text-muted-foreground">데이터 소스</span>
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} /> <div className="w-[140px]">
</SelectTrigger> <Select
<SelectContent> value={config.dataSource || "static"}
{columns.map((col) => ( onValueChange={(value) => updateConfig("dataSource", value)}
<SelectItem key={col.columnName} value={col.columnName}> >
{col.displayName} <SelectTrigger className="h-7 text-xs">
</SelectItem> <SelectValue placeholder="소스 선택" />
))} </SelectTrigger>
</SelectContent> <SelectContent>
</Select> <SelectItem value="static">정적 데이터</SelectItem>
</div> <SelectItem value="db">데이터베이스</SelectItem>
</div> <SelectItem value="api">API</SelectItem>
<div className="space-y-2"> </SelectContent>
<Label className="text-[10px] text-muted-foreground">표시 컬럼</Label> </Select>
</div>
</div>
{/* DB 설정 */}
{config.dataSource === "db" && (
<>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">테이블</span>
<div className="w-[140px]">
<Select <Select
value={config.labelColumn || ""} value={config.tableName || ""}
onValueChange={(value) => updateConfig("labelColumn", value)} onValueChange={(value) => {
disabled={loadingColumns} updateConfig("tableName", value);
updateConfig("idColumn", "");
updateConfig("parentIdColumn", "");
updateConfig("labelColumn", "");
}}
disabled={loadingTables}
> >
<SelectTrigger className="h-8 text-xs"> <SelectTrigger className="h-7 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} /> <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{columns.map((col) => ( {tables.map((table) => (
<SelectItem key={col.columnName} value={col.columnName}> <SelectItem key={table.tableName} value={table.tableName}>
{col.displayName} {table.displayName}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</> </div>
)}
{config.tableName && (
<>
<div className="flex gap-2 py-1.5">
<div className="flex-1">
<Label className="text-[10px] text-muted-foreground">ID 컬럼</Label>
<Select
value={config.idColumn || ""}
onValueChange={(value) => updateConfig("idColumn", value)}
disabled={loadingColumns}
>
<SelectTrigger className="h-7 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="flex-1">
<Label className="text-[10px] text-muted-foreground">부모 ID 컬럼</Label>
<Select
value={config.parentIdColumn || ""}
onValueChange={(value) => updateConfig("parentIdColumn", value)}
disabled={loadingColumns}
>
<SelectTrigger className="h-7 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="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">표시 컬럼</span>
<div className="w-[140px]">
<Select
value={config.labelColumn || ""}
onValueChange={(value) => updateConfig("labelColumn", value)}
disabled={loadingColumns}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</>
)}
</>
)}
{/* API 설정 */}
{config.dataSource === "api" && (
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">API 엔드포인트</span>
<div className="w-[140px]">
<Input
value={config.apiEndpoint || ""}
onChange={(e) => updateConfig("apiEndpoint", e.target.value)}
placeholder="/api/hierarchy"
className="h-7 text-xs"
/>
</div>
</div>
)}
</div>
{/* OPTIONS 섹션 */}
<div className="border-b border-border/50 pb-3 mb-3">
<h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">OPTIONS</h4>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">최대 레벨</span>
<div className="w-[140px]">
<Input
type="number"
value={config.maxLevel || ""}
onChange={(e) => updateConfig("maxLevel", e.target.value ? Number(e.target.value) : undefined)}
placeholder="제한 없음"
min="1"
className="h-7 text-xs"
/>
</div>
</div> </div>
)} <div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">드래그 앤 드롭</span>
{/* API 설정 */}
{config.dataSource === "api" && (
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">API 엔드포인트</Label>
<Input
value={config.apiEndpoint || ""}
onChange={(e) => updateConfig("apiEndpoint", e.target.value)}
placeholder="/api/hierarchy"
className="h-8 text-xs"
/>
</div>
)}
<Separator />
{/* 옵션 */}
<div className="space-y-3">
<Label className="text-xs font-medium">옵션</Label>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">최대 레벨</Label>
<Input
type="number"
value={config.maxLevel || ""}
onChange={(e) => updateConfig("maxLevel", e.target.value ? Number(e.target.value) : undefined)}
placeholder="제한 없음"
min="1"
className="h-8 text-xs"
/>
</div>
<div className="flex items-center space-x-2">
<Checkbox <Checkbox
id="draggable"
checked={config.draggable || false} checked={config.draggable || false}
onCheckedChange={(checked) => updateConfig("draggable", checked)} onCheckedChange={(checked) => updateConfig("draggable", checked)}
/> />
<label htmlFor="draggable" className="text-xs">드래그 앤 드롭</label>
</div> </div>
<div className="flex items-center justify-between py-1.5">
<div className="flex items-center space-x-2"> <span className="text-xs text-muted-foreground">선택 가능</span>
<Checkbox <Checkbox
id="selectable"
checked={config.selectable !== false} checked={config.selectable !== false}
onCheckedChange={(checked) => updateConfig("selectable", checked)} onCheckedChange={(checked) => updateConfig("selectable", checked)}
/> />
<label htmlFor="selectable" className="text-xs">선택 가능</label>
</div> </div>
<div className="flex items-center justify-between py-1.5">
<div className="flex items-center space-x-2"> <span className="text-xs text-muted-foreground">다중 선택</span>
<Checkbox <Checkbox
id="multiSelect"
checked={config.multiSelect || false} checked={config.multiSelect || false}
onCheckedChange={(checked) => updateConfig("multiSelect", checked)} onCheckedChange={(checked) => updateConfig("multiSelect", checked)}
/> />
<label htmlFor="multiSelect" className="text-xs">다중 선택</label>
</div> </div>
<div className="flex items-center justify-between py-1.5">
<div className="flex items-center space-x-2"> <span className="text-xs text-muted-foreground">체크박스 표시</span>
<Checkbox <Checkbox
id="showCheckbox"
checked={config.showCheckbox || false} checked={config.showCheckbox || false}
onCheckedChange={(checked) => updateConfig("showCheckbox", checked)} onCheckedChange={(checked) => updateConfig("showCheckbox", checked)}
/> />
<label htmlFor="showCheckbox" className="text-xs">체크박스 표시</label>
</div> </div>
<div className="flex items-center justify-between py-1.5">
<div className="flex items-center space-x-2"> <span className="text-xs text-muted-foreground">기본 전체 펼침</span>
<Checkbox <Checkbox
id="expandAll"
checked={config.expandAll || false} checked={config.expandAll || false}
onCheckedChange={(checked) => updateConfig("expandAll", checked)} onCheckedChange={(checked) => updateConfig("expandAll", checked)}
/> />
<label htmlFor="expandAll" className="text-xs">기본 전체 펼침</label>
</div> </div>
</div> </div>
{/* BOM 전용 설정 */} {/* BOM SETTINGS 섹션 - BOM 타입 전용 */}
{config.hierarchyType === "bom" && ( {config.hierarchyType === "bom" && (
<> <div className="border-b border-border/50 pb-3 mb-3">
<Separator /> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">BOM SETTINGS</h4>
<div className="space-y-3"> <div className="flex items-center justify-between py-1.5">
<Label className="text-xs font-medium">BOM 설정</Label> <span className="text-xs text-muted-foreground">수량 표시</span>
<Checkbox
<div className="flex items-center space-x-2"> checked={config.showQuantity !== false}
<Checkbox onCheckedChange={(checked) => updateConfig("showQuantity", checked)}
id="showQuantity" />
checked={config.showQuantity !== false} </div>
onCheckedChange={(checked) => updateConfig("showQuantity", checked)} <div className="flex items-center justify-between py-1.5">
/> <span className="text-xs text-muted-foreground">수량 컬럼</span>
<label htmlFor="showQuantity" className="text-xs">수량 표시</label> <div className="w-[140px]">
</div>
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">수량 컬럼</Label>
<Select <Select
value={config.quantityColumn || ""} value={config.quantityColumn || ""}
onValueChange={(value) => updateConfig("quantityColumn", value)} onValueChange={(value) => updateConfig("quantityColumn", value)}
disabled={loadingColumns || !config.tableName} disabled={loadingColumns || !config.tableName}
> >
<SelectTrigger className="h-8 text-xs"> <SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="선택" /> <SelectValue placeholder="선택" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -360,24 +348,22 @@ export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
</Select> </Select>
</div> </div>
</div> </div>
</> </div>
)} )}
{/* 연쇄 선택박스 전용 설정 */} {/* CASCADING SETTINGS 섹션 - 연쇄 선택박스 전용 */}
{config.hierarchyType === "cascading" && ( {config.hierarchyType === "cascading" && (
<> <div className="border-b border-border/50 pb-3 mb-3">
<Separator /> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">CASCADING SETTINGS</h4>
<div className="space-y-3"> <div className="flex items-center justify-between py-1.5">
<Label className="text-xs font-medium">연쇄 설정</Label> <span className="text-xs text-muted-foreground">부모 필드</span>
<div className="w-[140px]">
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">부모 필드</Label>
<Select <Select
value={config.parentField || ""} value={config.parentField || ""}
onValueChange={(value) => updateConfig("parentField", value)} onValueChange={(value) => updateConfig("parentField", value)}
disabled={loadingColumns || !config.tableName} disabled={loadingColumns || !config.tableName}
> >
<SelectTrigger className="h-8 text-xs"> <SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="선택" /> <SelectValue placeholder="선택" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -389,17 +375,15 @@ export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="flex items-center space-x-2">
<Checkbox
id="clearOnParentChange"
checked={config.clearOnParentChange !== false}
onCheckedChange={(checked) => updateConfig("clearOnParentChange", checked)}
/>
<label htmlFor="clearOnParentChange" className="text-xs">부모 변경 시 값 초기화</label>
</div>
</div> </div>
</> <div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">부모 변경 시 초기화</span>
<Checkbox
checked={config.clearOnParentChange !== false}
onCheckedChange={(checked) => updateConfig("clearOnParentChange", checked)}
/>
</div>
</div>
)} )}
</div> </div>
); );

198
frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
View File

@ -11,7 +11,7 @@
import React, { useState, useEffect, useMemo, useCallback } from "react"; import React, { useState, useEffect, useMemo, useCallback } from "react";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator"; // Separator 제거 - 팔란티어 스타일 섹션 헤더 사용
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@ -759,7 +759,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
}, [currentTableColumns, config.dataSource?.foreignKey]); }, [currentTableColumns, config.dataSource?.foreignKey]);
return ( return (
<div className="space-y-4"> <div className="space-y-1">
<Tabs defaultValue="basic" className="w-full"> <Tabs defaultValue="basic" className="w-full">
<TabsList className="grid w-full grid-cols-3"> <TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="basic" className="text-xs">기본</TabsTrigger> <TabsTrigger value="basic" className="text-xs">기본</TabsTrigger>
@ -768,10 +768,10 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
</TabsList> </TabsList>
{/* 기본 설정 탭 */} {/* 기본 설정 탭 */}
<TabsContent value="basic" className="mt-4 space-y-4"> <TabsContent value="basic" className="mt-4 space-y-1">
{/* 렌더링 모드 */} {/* 렌더링 모드 */}
<div className="space-y-2"> <div className="border-b border-border/50 pb-3 mb-3">
<Label className="text-xs font-medium">렌더링 모드</Label> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">RENDER MODE</h4>
<Select <Select
value={config.renderMode} value={config.renderMode}
onValueChange={(value) => { onValueChange={(value) => {
@ -802,7 +802,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
} }
}} }}
> >
<SelectTrigger className="h-8 text-xs"> <SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="모드 선택" /> <SelectValue placeholder="모드 선택" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -822,11 +822,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
</Select> </Select>
</div> </div>
<Separator />
{/* 저장 대상 테이블 */} {/* 저장 대상 테이블 */}
<div className="space-y-2"> <div className="border-b border-border/50 pb-3 mb-3">
<Label className="text-xs font-medium">저장 테이블</Label> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">SAVE TABLE</h4>
{/* 현재 선택된 테이블 표시 (기존 테이블 UI와 동일한 스타일) */} {/* 현재 선택된 테이블 표시 (기존 테이블 UI와 동일한 스타일) */}
<div className={cn( <div className={cn(
@ -1017,12 +1015,10 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
)} )}
</div> </div>
<Separator />
{/* 현재 화면 정보 (메인 테이블이 설정된 경우에만 표시) */} {/* 현재 화면 정보 (메인 테이블이 설정된 경우에만 표시) */}
{currentTableName && ( {currentTableName && (
<div className="space-y-2"> <div className="border-b border-border/50 pb-3 mb-3">
<Label className="text-xs font-medium">메인 화면 테이블 (참고)</Label> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">MAIN TABLE</h4>
<div className="rounded border border-border bg-muted p-2"> <div className="rounded border border-border bg-muted p-2">
<p className="text-xs text-foreground font-medium">{currentTableName}</p> <p className="text-xs text-foreground font-medium">{currentTableName}</p>
<p className="text-[10px] text-muted-foreground"> <p className="text-[10px] text-muted-foreground">
@ -1035,9 +1031,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
{/* 모달 모드: 엔티티 컬럼 선택 */} {/* 모달 모드: 엔티티 컬럼 선택 */}
{isModalMode && ( {isModalMode && (
<> <>
<Separator /> <div className="border-b border-border/50 pb-3 mb-3">
<div className="space-y-2"> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">ENTITY SELECT</h4>
<Label className="text-xs font-medium">엔티티 선택</Label>
<p className="text-[10px] text-muted-foreground"> <p className="text-[10px] text-muted-foreground">
모달에서 검색할 엔티티를 선택하세요 (FK만 저장됨) 모달에서 검색할 엔티티를 선택하세요 (FK만 저장됨)
</p> </p>
@ -1048,7 +1043,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
onValueChange={handleEntityColumnSelect} onValueChange={handleEntityColumnSelect}
disabled={!targetTableForColumns} disabled={!targetTableForColumns}
> >
<SelectTrigger className="h-8 text-xs"> <SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="엔티티 컬럼 선택" /> <SelectValue placeholder="엔티티 컬럼 선택" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -1090,11 +1085,14 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
</> </>
)} )}
<Separator />
{/* 소스 디테일 자동 조회 설정 */} {/* 소스 디테일 자동 조회 설정 */}
<div className="space-y-2"> <div className="border-b border-border/50 pb-3 mb-3">
<div className="flex items-center space-x-2"> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">SOURCE DETAIL</h4>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground flex items-center gap-1">
<ListTree className="h-3 w-3" />
소스 디테일 자동 조회
</span>
<Checkbox <Checkbox
id="enableSourceDetail" id="enableSourceDetail"
checked={!!config.sourceDetailConfig} checked={!!config.sourceDetailConfig}
@ -1112,10 +1110,6 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
} }
}} }}
/> />
<label htmlFor="enableSourceDetail" className="text-xs font-medium flex items-center gap-1">
<ListTree className="h-3 w-3" />
소스 디테일 자동 조회
</label>
</div> </div>
<p className="text-[10px] text-muted-foreground"> <p className="text-[10px] text-muted-foreground">
모달에서 전달받은 마스터 데이터의 디테일 행을 자동으로 조회하여 리피터에 채웁니다. 모달에서 전달받은 마스터 데이터의 디테일 행을 자동으로 조회하여 리피터에 채웁니다.
@ -1217,74 +1211,65 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
)} )}
</div> </div>
<Separator />
{/* 기능 옵션 */} {/* 기능 옵션 */}
<div className="space-y-3"> <div className="border-b border-border/50 pb-3 mb-3">
<Label className="text-xs font-medium">기능 옵션</Label> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">FEATURES</h4>
<div className="grid grid-cols-2 gap-2"> <div className="flex items-center justify-between py-1.5">
<div className="flex items-center space-x-2"> <span className="text-xs text-muted-foreground">추가 버튼</span>
<Checkbox <Checkbox
id="showAddButton" id="showAddButton"
checked={config.features?.showAddButton ?? true} checked={config.features?.showAddButton ?? true}
onCheckedChange={(checked) => updateFeatures("showAddButton", !!checked)} onCheckedChange={(checked) => updateFeatures("showAddButton", !!checked)}
/> />
<label htmlFor="showAddButton" className="text-xs">추가 버튼</label> </div>
</div> <div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">삭제 버튼</span>
<div className="flex items-center space-x-2"> <Checkbox
<Checkbox id="showDeleteButton"
id="showDeleteButton" checked={config.features?.showDeleteButton ?? true}
checked={config.features?.showDeleteButton ?? true} onCheckedChange={(checked) => updateFeatures("showDeleteButton", !!checked)}
onCheckedChange={(checked) => updateFeatures("showDeleteButton", !!checked)} />
/> </div>
<label htmlFor="showDeleteButton" className="text-xs">삭제 버튼</label> <div className="flex items-center justify-between py-1.5">
</div> <span className="text-xs text-muted-foreground">인라인 편집</span>
<Checkbox
<div className="flex items-center space-x-2"> id="inlineEdit"
<Checkbox checked={config.features?.inlineEdit ?? false}
id="inlineEdit" onCheckedChange={(checked) => updateFeatures("inlineEdit", !!checked)}
checked={config.features?.inlineEdit ?? false} />
onCheckedChange={(checked) => updateFeatures("inlineEdit", !!checked)} </div>
/> <div className="flex items-center justify-between py-1.5">
<label htmlFor="inlineEdit" className="text-xs">인라인 편집</label> <span className="text-xs text-muted-foreground">다중 선택</span>
</div> <Checkbox
id="multiSelect"
<div className="flex items-center space-x-2"> checked={config.features?.multiSelect ?? true}
<Checkbox onCheckedChange={(checked) => updateFeatures("multiSelect", !!checked)}
id="multiSelect" />
checked={config.features?.multiSelect ?? true} </div>
onCheckedChange={(checked) => updateFeatures("multiSelect", !!checked)} <div className="flex items-center justify-between py-1.5">
/> <span className="text-xs text-muted-foreground">행 번호</span>
<label htmlFor="multiSelect" className="text-xs">다중 선택</label> <Checkbox
</div> id="showRowNumber"
checked={config.features?.showRowNumber ?? false}
<div className="flex items-center space-x-2"> onCheckedChange={(checked) => updateFeatures("showRowNumber", !!checked)}
<Checkbox />
id="showRowNumber" </div>
checked={config.features?.showRowNumber ?? false} <div className="flex items-center justify-between py-1.5">
onCheckedChange={(checked) => updateFeatures("showRowNumber", !!checked)} <span className="text-xs text-muted-foreground">행 선택</span>
/> <Checkbox
<label htmlFor="showRowNumber" className="text-xs">행 번호</label> id="selectable"
</div> checked={config.features?.selectable ?? false}
onCheckedChange={(checked) => updateFeatures("selectable", !!checked)}
<div className="flex items-center space-x-2"> />
<Checkbox
id="selectable"
checked={config.features?.selectable ?? false}
onCheckedChange={(checked) => updateFeatures("selectable", !!checked)}
/>
<label htmlFor="selectable" className="text-xs">행 선택</label>
</div>
</div> </div>
</div> </div>
</TabsContent> </TabsContent>
{/* 컬럼 설정 탭 - 🆕 통합 컬럼 선택 */} {/* 컬럼 설정 탭 */}
<TabsContent value="columns" className="mt-4 space-y-4"> <TabsContent value="columns" className="mt-4 space-y-1">
{/* 통합 컬럼 선택 */} {/* 통합 컬럼 선택 */}
<div className="space-y-2"> <div className="border-b border-border/50 pb-3 mb-3">
<Label className="text-xs font-medium">컬럼 선택</Label> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">COLUMN SELECT</h4>
<p className="text-[10px] text-muted-foreground"> <p className="text-[10px] text-muted-foreground">
{isModalMode {isModalMode
? "표시할 컬럼과 입력 컬럼을 선택하세요. 아이콘으로 표시/입력 구분" ? "표시할 컬럼과 입력 컬럼을 선택하세요. 아이콘으로 표시/입력 구분"
@ -1365,15 +1350,14 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
)} )}
</div> </div>
{/* 선택된 컬럼 상세 설정 - 🆕 모든 컬럼 통합, 순서 변경 가능 */} {/* 선택된 컬럼 상세 설정 */}
{config.columns.length > 0 && ( {config.columns.length > 0 && (
<> <>
<Separator /> <div className="border-b border-border/50 pb-3 mb-3">
<div className="space-y-2"> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">
<Label className="text-xs font-medium"> SELECTED COLUMNS ({config.columns.length})
선택된 컬럼 ({config.columns.length}개) <span className="ml-2 font-normal normal-case tracking-normal">드래그로 순서 변경</span>
<span className="text-muted-foreground ml-2 font-normal">드래그로 순서 변경</span> </h4>
</Label>
<div className="max-h-48 space-y-1 overflow-y-auto"> <div className="max-h-48 space-y-1 overflow-y-auto">
{config.columns.map((col, index) => ( {config.columns.map((col, index) => (
<div key={col.key} className="space-y-1"> <div key={col.key} className="space-y-1">
@ -1700,10 +1684,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
{/* 계산 규칙 */} {/* 계산 규칙 */}
{(isModalMode || isInlineMode) && config.columns.length > 0 && ( {(isModalMode || isInlineMode) && config.columns.length > 0 && (
<> <>
<Separator /> <div className="border-b border-border/50 pb-3 mb-3">
<div className="space-y-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label className="text-xs font-medium">계산 규칙</Label> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">CALCULATION RULES</h4>
<Button type="button" variant="outline" size="sm" onClick={addCalculationRule} className="h-6 text-xs"> <Button type="button" variant="outline" size="sm" onClick={addCalculationRule} className="h-6 text-xs">
<Calculator className="mr-1 h-3 w-3" /> <Calculator className="mr-1 h-3 w-3" />
추가 추가
@ -1813,15 +1796,12 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
</TabsContent> </TabsContent>
{/* Entity 조인 설정 탭 */} {/* Entity 조인 설정 탭 */}
<TabsContent value="entityJoin" className="mt-4 space-y-4"> <TabsContent value="entityJoin" className="mt-4 space-y-1">
<div className="space-y-2"> <div className="border-b border-border/50 pb-3 mb-3">
<div> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">ENTITY JOIN</h4>
<h3 className="text-sm font-semibold">Entity 조인 연결</h3> <p className="text-muted-foreground text-[10px]">
<p className="text-muted-foreground text-[10px]"> FK 컬럼을 기반으로 참조 테이블의 데이터를 자동으로 조회하여 표시합니다
FK 컬럼을 기반으로 참조 테이블의 데이터를 자동으로 조회하여 표시합니다 </p>
</p>
</div>
<hr className="border-border" />
{loadingEntityJoins ? ( {loadingEntityJoins ? (
<p className="text-muted-foreground py-2 text-center text-xs">로딩 중...</p> <p className="text-muted-foreground py-2 text-center text-xs">로딩 중...</p>
@ -1893,8 +1873,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
{/* 현재 설정된 Entity 조인 목록 */} {/* 현재 설정된 Entity 조인 목록 */}
{config.entityJoins && config.entityJoins.length > 0 && ( {config.entityJoins && config.entityJoins.length > 0 && (
<div className="space-y-2"> <div className="space-y-1">
<h4 className="text-xs font-medium">설정된 조인</h4> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">CONFIGURED JOINS</h4>
<div className="space-y-1"> <div className="space-y-1">
{config.entityJoins.map((join, idx) => ( {config.entityJoins.map((join, idx) => (
<div key={idx} className="flex items-center gap-1 rounded border bg-muted/30 px-2 py-1 text-[10px]"> <div key={idx} className="flex items-center gap-1 rounded border bg-muted/30 px-2 py-1 text-[10px]">