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

[agent-pipeline] pipe-20260311225813-8hmk round-1

This commit is contained in:
DDD1542 2026-03-12 08:18:34 +09:00
parent db3ad9d639
commit bb442f5478
3 changed files with 782 additions and 608 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/components/v2/config-panels/V2RepeatContainerConfigPanel.tsx
View File

@ -9,6 +9,7 @@ import React, { useState, useEffect, useMemo } 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 { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
@ -57,6 +58,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
const [titleColumnOpen, setTitleColumnOpen] = useState(false); const [titleColumnOpen, setTitleColumnOpen] = useState(false);
const [descriptionColumnOpen, setDescriptionColumnOpen] = useState(false); const [descriptionColumnOpen, setDescriptionColumnOpen] = useState(false);
const [titleDescOpen, setTitleDescOpen] = useState(true);
const [styleOpen, setStyleOpen] = useState(false); const [styleOpen, setStyleOpen] = useState(false);
const [interactionOpen, setInteractionOpen] = useState(false); const [interactionOpen, setInteractionOpen] = useState(false);
@ -353,21 +355,37 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
/> />
{/* ─── 4단계: 아이템 제목/설명 ─── */} {/* ─── 4단계: 아이템 제목/설명 ─── */}
<div className="space-y-2"> <Collapsible open={titleDescOpen} onOpenChange={setTitleDescOpen}>
<div className="flex items-center justify-between"> <CollapsibleTrigger asChild>
<p className="text-sm font-medium">아이템 제목/설명</p> <button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Type className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">아이템 제목/설명</span>
<Badge variant="secondary" className="text-[10px] h-5">
{config.showItemTitle ? "ON" : "OFF"}
</Badge>
</div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", titleDescOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-3 space-y-3">
<div className="flex items-center justify-between py-1">
<div>
<p className="text-sm">제목/설명 표시</p>
<p className="text-[11px] text-muted-foreground">각 아이템에 제목과 설명을 표시할 수 있어요</p>
</div>
<Switch <Switch
checked={config.showItemTitle ?? false} checked={config.showItemTitle ?? false}
onCheckedChange={(checked) => onChange({ showItemTitle: checked })} onCheckedChange={(checked) => onChange({ showItemTitle: checked })}
/> />
</div> </div>
<p className="text-[11px] text-muted-foreground">
각 아이템에 제목과 설명을 표시할 수 있어요
</p>
</div>
{config.showItemTitle && ( {config.showItemTitle && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3"> <>
{/* 제목 컬럼 Combobox */} {/* 제목 컬럼 Combobox */}
<div className="space-y-1"> <div className="space-y-1">
<span className="text-xs text-muted-foreground">제목 컬럼</span> <span className="text-xs text-muted-foreground">제목 컬럼</span>
@ -417,9 +435,9 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
> >
<Check className={cn("mr-2 h-3 w-3", config.titleColumn === col.columnName ? "opacity-100" : "opacity-0")} /> <Check className={cn("mr-2 h-3 w-3", config.titleColumn === col.columnName ? "opacity-100" : "opacity-0")} />
<div className="flex flex-col"> <div className="flex flex-col">
<span>{col.displayName || col.columnName}</span> <span className="truncate">{col.displayName || col.columnName}</span>
{col.displayName && col.displayName !== col.columnName && ( {col.displayName && col.displayName !== col.columnName && (
<span className="text-[10px] text-muted-foreground">{col.columnName}</span> <span className="truncate text-[10px] text-muted-foreground">{col.columnName}</span>
)} )}
</div> </div>
</CommandItem> </CommandItem>
@ -480,9 +498,9 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
> >
<Check className={cn("mr-2 h-3 w-3", config.descriptionColumn === col.columnName ? "opacity-100" : "opacity-0")} /> <Check className={cn("mr-2 h-3 w-3", config.descriptionColumn === col.columnName ? "opacity-100" : "opacity-0")} />
<div className="flex flex-col"> <div className="flex flex-col">
<span>{col.displayName || col.columnName}</span> <span className="truncate">{col.displayName || col.columnName}</span>
{col.displayName && col.displayName !== col.columnName && ( {col.displayName && col.displayName !== col.columnName && (
<span className="text-[10px] text-muted-foreground">{col.columnName}</span> <span className="truncate text-[10px] text-muted-foreground">{col.columnName}</span>
)} )}
</div> </div>
</CommandItem> </CommandItem>
@ -590,8 +608,11 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
</div> </div>
</div> </div>
)} )}
</div> </>
)} )}
</div>
</CollapsibleContent>
</Collapsible>
{/* ─── 5단계: 카드 스타일 (Collapsible) ─── */} {/* ─── 5단계: 카드 스타일 (Collapsible) ─── */}
<Collapsible open={styleOpen} onOpenChange={setStyleOpen}> <Collapsible open={styleOpen} onOpenChange={setStyleOpen}>
@ -603,6 +624,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" /> <Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">카드 스타일</span> <span className="text-sm font-medium">카드 스타일</span>
<Badge variant="secondary" className="text-[10px] h-5">6개</Badge>
</div> </div>
<ChevronDown <ChevronDown
className={cn( className={cn(
@ -613,10 +635,10 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
</button> </button>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3"> <div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">배경색</span> <span className="truncate text-xs text-muted-foreground">배경색</span>
<Input <Input
type="color" type="color"
value={config.backgroundColor || "#ffffff"} value={config.backgroundColor || "#ffffff"}
@ -625,7 +647,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
/> />
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">둥글기</span> <span className="truncate text-xs text-muted-foreground">둥글기</span>
<Input <Input
value={config.borderRadius || "8px"} value={config.borderRadius || "8px"}
onChange={(e) => onChange({ borderRadius: e.target.value })} onChange={(e) => onChange({ borderRadius: e.target.value })}
@ -636,7 +658,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">내부 패딩</span> <span className="truncate text-xs text-muted-foreground">내부 패딩</span>
<Input <Input
value={config.padding || "16px"} value={config.padding || "16px"}
onChange={(e) => onChange({ padding: e.target.value })} onChange={(e) => onChange({ padding: e.target.value })}
@ -644,7 +666,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
/> />
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">아이템 높이</span> <span className="truncate text-xs text-muted-foreground">아이템 높이</span>
<Input <Input
value={config.itemHeight || "auto"} value={config.itemHeight || "auto"}
onChange={(e) => onChange({ itemHeight: e.target.value })} onChange={(e) => onChange({ itemHeight: e.target.value })}
@ -688,6 +710,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" /> <Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">상호작용 & 페이징</span> <span className="text-sm font-medium">상호작용 & 페이징</span>
<Badge variant="secondary" className="text-[10px] h-5">7개</Badge>
</div> </div>
<ChevronDown <ChevronDown
className={cn( className={cn(
@ -698,7 +721,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
</button> </button>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3"> <div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-4 space-y-3">
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<div> <div>
<p className="text-sm">클릭 가능</p> <p className="text-sm">클릭 가능</p>
@ -868,6 +891,7 @@ function SlotChildrenSection({
}: SlotChildrenSectionProps) { }: SlotChildrenSectionProps) {
const [columnComboboxOpen, setColumnComboboxOpen] = useState(false); const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set()); const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
const [slotFieldsOpen, setSlotFieldsOpen] = useState(true);
const children = config.children || []; const children = config.children || [];
@ -930,16 +954,30 @@ function SlotChildrenSection({
}; };
return ( return (
<> <Collapsible open={slotFieldsOpen} onOpenChange={setSlotFieldsOpen}>
<div className="space-y-2"> <CollapsibleTrigger asChild>
<p className="text-sm font-medium">반복 표시 필드</p> <button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Type className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">반복 표시 필드</span>
<Badge variant="secondary" className="text-[10px] h-5">
{children.length}개 필드
</Badge>
</div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", slotFieldsOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-3">
<p className="text-[11px] text-muted-foreground"> <p className="text-[11px] text-muted-foreground">
데이터의 어떤 컬럼을 각 아이템에 표시할지 선택해요 데이터의 어떤 컬럼을 각 아이템에 표시할지 선택해요
</p> </p>
</div>
{children.length > 0 ? ( {children.length > 0 ? (
<div className="space-y-2"> <div className="max-h-[250px] space-y-2 overflow-y-auto">
{children.map((child, index) => { {children.map((child, index) => {
const isExpanded = expandedIds.has(child.id); const isExpanded = expandedIds.has(child.id);
return ( return (
@ -951,11 +989,11 @@ function SlotChildrenSection({
<div className="flex h-5 w-5 items-center justify-center rounded bg-primary/10 text-xs font-medium text-primary"> <div className="flex h-5 w-5 items-center justify-center rounded bg-primary/10 text-xs font-medium text-primary">
{index + 1} {index + 1}
</div> </div>
<div className="flex-1"> <div className="flex-1 min-w-0">
<div className="text-xs font-medium"> <div className="truncate text-xs font-medium">
{child.label || child.fieldName} {child.label || child.fieldName}
</div> </div>
<div className="text-[10px] text-muted-foreground"> <div className="truncate text-[10px] text-muted-foreground">
필드: {child.fieldName} 필드: {child.fieldName}
</div> </div>
</div> </div>
@ -1148,8 +1186,8 @@ function SlotChildrenSection({
)} )}
/> />
<div className="flex-1"> <div className="flex-1">
<div className="font-medium">{col.displayName || col.columnName}</div> <div className="truncate font-medium">{col.displayName || col.columnName}</div>
<div className="text-[10px] text-muted-foreground"> <div className="truncate text-[10px] text-muted-foreground">
{col.columnName} {col.columnName}
</div> </div>
</div> </div>
@ -1164,7 +1202,9 @@ function SlotChildrenSection({
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</> </div>
</CollapsibleContent>
</Collapsible>
); );
} }

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

@ -14,6 +14,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
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 { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
@ -182,6 +183,14 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
// 🆕 확장된 컬럼 (상세 설정 표시용) // 🆕 확장된 컬럼 (상세 설정 표시용)
const [expandedColumn, setExpandedColumn] = useState<string | null>(null); const [expandedColumn, setExpandedColumn] = useState<string | null>(null);
// Collapsible 상태
const [featureOptionsOpen, setFeatureOptionsOpen] = useState(true);
const [columnSelectOpen, setColumnSelectOpen] = useState(true);
const [selectedColumnsOpen, setSelectedColumnsOpen] = useState(true);
const [calcRulesOpen, setCalcRulesOpen] = useState(false);
const [entityJoinSubOpen, setEntityJoinSubOpen] = useState<Record<number, boolean>>({});
const [configuredJoinsOpen, setConfiguredJoinsOpen] = useState(false);
// 🆕 채번 규칙 목록 // 🆕 채번 규칙 목록
const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]); const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
const [loadingNumberingRules, setLoadingNumberingRules] = useState(false); const [loadingNumberingRules, setLoadingNumberingRules] = useState(false);
@ -1120,10 +1129,23 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
</> </>
)} )}
{/* 기능 옵션 - 토스식 Switch + 설명 */} {/* 기능 옵션 - Collapsible */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-1"> <Collapsible open={featureOptionsOpen} onOpenChange={setFeatureOptionsOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">기능 옵션</span> <span className="text-sm font-medium">기능 옵션</span>
<div className="space-y-2"> <Badge variant="secondary" className="text-[10px] h-5">6개</Badge>
</div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", featureOptionsOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-3 space-y-1">
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<div> <div>
<p className="text-sm">추가 버튼</p> <p className="text-sm">추가 버튼</p>
@ -1185,7 +1207,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
/> />
</div> </div>
</div> </div>
</div> </CollapsibleContent>
</Collapsible>
{/* 고급 설정 - Collapsible (소스 디테일 등) */} {/* 고급 설정 - Collapsible (소스 디테일 등) */}
<Collapsible> <Collapsible>
@ -1328,14 +1351,27 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
{/* 컬럼 설정 탭 */} {/* 컬럼 설정 탭 */}
<TabsContent value="columns" className="mt-4 space-y-4"> <TabsContent value="columns" className="mt-4 space-y-4">
{/* 통합 컬럼 선택 */} {/* 통합 컬럼 선택 - Collapsible */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-3"> <Collapsible open={columnSelectOpen} onOpenChange={setColumnSelectOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Database className="h-4 w-4 text-primary" /> <Database className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium"> <span className="truncate text-sm font-medium">
{isModalMode ? "어떤 컬럼을 표시하고 입력받을까요?" : "어떤 컬럼을 입력받을까요?"} {isModalMode ? "컬럼 표시/입력" : "입력 컬럼"}
</span> </span>
<Badge variant="secondary" className="text-[10px] h-5">
{inputableColumns.length}개 컬럼
</Badge>
</div> </div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", columnSelectOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-3">
<p className="text-[11px] text-muted-foreground"> <p className="text-[11px] text-muted-foreground">
{isModalMode {isModalMode
? "소스 테이블 컬럼은 표시용, 저장 테이블 컬럼은 입력용이에요" ? "소스 테이블 컬럼은 표시용, 저장 테이블 컬럼은 입력용이에요"
@ -1348,14 +1384,14 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
<> <>
<div className="text-[10px] font-medium text-primary mt-2 mb-1 flex items-center gap-1"> <div className="text-[10px] font-medium text-primary mt-2 mb-1 flex items-center gap-1">
<Link2 className="h-3 w-3" /> <Link2 className="h-3 w-3" />
소스 테이블 ({config.dataSource.sourceTable}) - 표시용 <span className="truncate">소스 테이블 ({config.dataSource.sourceTable}) - 표시용</span>
</div> </div>
{loadingSourceColumns ? ( {loadingSourceColumns ? (
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p> <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
) : sourceTableColumns.length === 0 ? ( ) : sourceTableColumns.length === 0 ? (
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p> <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
) : ( ) : (
<div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2"> <div className="max-h-[150px] space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
{sourceTableColumns.map((column) => ( {sourceTableColumns.map((column) => (
<div <div
key={`source-${column.columnName}`} key={`source-${column.columnName}`}
@ -1383,7 +1419,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
{/* 저장 테이블 컬럼 (입력용) */} {/* 저장 테이블 컬럼 (입력용) */}
<div className="text-[10px] font-medium text-muted-foreground mt-3 mb-1 flex items-center gap-1"> <div className="text-[10px] font-medium text-muted-foreground mt-3 mb-1 flex items-center gap-1">
<Database className="h-3 w-3" /> <Database className="h-3 w-3" />
저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용 <span className="truncate">저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용</span>
</div> </div>
{loadingColumns ? ( {loadingColumns ? (
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p> <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
@ -1392,7 +1428,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
컬럼 정보가 없습니다 컬럼 정보가 없습니다
</p> </p>
) : ( ) : (
<div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2"> <div className="max-h-[250px] space-y-0.5 overflow-y-auto rounded-md border p-2">
{inputableColumns.map((column) => ( {inputableColumns.map((column) => (
<div <div
key={`input-${column.columnName}`} key={`input-${column.columnName}`}
@ -1415,16 +1451,31 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
</div> </div>
)} )}
</div> </div>
</CollapsibleContent>
</Collapsible>
{/* 선택된 컬럼 상세 설정 */} {/* 선택된 컬럼 상세 설정 - Collapsible */}
{config.columns.length > 0 && ( {config.columns.length > 0 && (
<> <Collapsible open={selectedColumnsOpen} onOpenChange={setSelectedColumnsOpen}>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3"> <CollapsibleTrigger asChild>
<div className="flex items-center justify-between"> <button
<span className="text-sm font-medium">선택된 컬럼 ({config.columns.length})</span> type="button"
<span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span> className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<GripVertical className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">선택된 컬럼</span>
<Badge variant="secondary" className="text-[10px] h-5">
{config.columns.length}개
</Badge>
</div> </div>
<div className="max-h-48 space-y-1 overflow-y-auto"> <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", selectedColumnsOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-3">
<p className="text-[10px] text-muted-foreground">드래그로 순서 변경, 클릭하여 상세 설정</p>
<div className="max-h-[250px] 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">
{/* 컬럼 헤더 (드래그 가능) */} {/* 컬럼 헤더 (드래그 가능) */}
@ -1744,25 +1795,38 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
))} ))}
</div> </div>
</div> </div>
</> </CollapsibleContent>
</Collapsible>
)} )}
{/* 계산 규칙 */} {/* 계산 규칙 - Collapsible (기본 닫힘) */}
{(isModalMode || isInlineMode) && config.columns.length > 0 && ( {(isModalMode || isInlineMode) && config.columns.length > 0 && (
<> <Collapsible open={calcRulesOpen} onOpenChange={setCalcRulesOpen}>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3"> <CollapsibleTrigger asChild>
<div className="flex items-center justify-between"> <button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Calculator className="h-4 w-4 text-primary" /> <Calculator className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">계산 규칙</span> <span className="text-sm font-medium">계산 규칙</span>
<Badge variant="secondary" className="text-[10px] h-5">
{calculationRules.length}개
</Badge>
</div> </div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", calcRulesOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-3">
<div className="flex justify-end">
<Button type="button" variant="outline" size="sm" onClick={addCalculationRule} className="h-7 px-2 text-xs"> <Button type="button" variant="outline" size="sm" onClick={addCalculationRule} className="h-7 px-2 text-xs">
<Plus className="mr-1 h-3 w-3" /> <Plus className="mr-1 h-3 w-3" />
추가 추가
</Button> </Button>
</div> </div>
<div className="space-y-2"> <div className="max-h-[250px] space-y-2 overflow-y-auto">
{calculationRules.map((rule) => ( {calculationRules.map((rule) => (
<div key={rule.id} className="space-y-1 rounded border p-1.5"> <div key={rule.id} className="space-y-1 rounded border p-1.5">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@ -1862,7 +1926,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
)} )}
</div> </div>
</div> </div>
</> </CollapsibleContent>
</Collapsible>
)} )}
</TabsContent> </TabsContent>
@ -1897,18 +1962,33 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
)} )}
</div> </div>
) : ( ) : (
<div className="space-y-3"> <div className="space-y-2">
{entityJoinData.joinTables.map((joinTable, tableIndex) => { {entityJoinData.joinTables.map((joinTable, tableIndex) => {
const sourceColumn = (joinTable as any).joinConfig?.sourceColumn || ""; const sourceColumn = (joinTable as any).joinConfig?.sourceColumn || "";
const activeCount = joinTable.availableColumns.filter(col =>
isEntityJoinColumnActive(joinTable.tableName, sourceColumn, col.columnName)
).length;
const isSubOpen = entityJoinSubOpen[tableIndex] ?? false;
return ( return (
<div key={tableIndex} className="space-y-1"> <Collapsible key={tableIndex} open={isSubOpen} onOpenChange={(open) => setEntityJoinSubOpen((prev) => ({ ...prev, [tableIndex]: open }))}>
<div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary"> <CollapsibleTrigger asChild>
<Link2 className="h-3 w-3" /> <button
<span>{joinTable.tableName}</span> type="button"
<span className="text-muted-foreground">({sourceColumn})</span> className="flex w-full items-center justify-between rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-left transition-colors hover:bg-primary/10"
>
<div className="flex items-center gap-2">
<Link2 className="h-3 w-3 text-primary" />
<span className="truncate text-xs font-medium">{joinTable.tableName}</span>
<Badge variant="secondary" className="text-[10px] h-5">
{activeCount > 0 ? `${activeCount}/${joinTable.availableColumns.length}개 선택` : `${joinTable.availableColumns.length}개 컬럼`}
</Badge>
</div> </div>
<div className="max-h-40 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2"> <ChevronDown className={cn("h-3 w-3 text-muted-foreground transition-transform duration-200", isSubOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="max-h-[250px] space-y-0.5 overflow-y-auto rounded-b-md border border-t-0 border-primary/20 bg-primary/5 p-2">
{joinTable.availableColumns.map((column, colIndex) => { {joinTable.availableColumns.map((column, colIndex) => {
const isActive = isEntityJoinColumnActive( const isActive = isEntityJoinColumnActive(
joinTable.tableName, joinTable.tableName,
@ -1922,7 +2002,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
<div <div
key={colIndex} key={colIndex}
className={cn( className={cn(
"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50", "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10",
isActive && "bg-primary/10", isActive && "bg-primary/10",
)} )}
onClick={() => onClick={() =>
@ -1948,24 +2028,40 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
); );
})} })}
</div> </div>
</div> </CollapsibleContent>
</Collapsible>
); );
})} })}
</div> </div>
)} )}
{/* 현재 설정된 Entity 조인 목록 */} {/* 현재 설정된 Entity 조인 목록 - Collapsible */}
{config.entityJoins && config.entityJoins.length > 0 && ( {config.entityJoins && config.entityJoins.length > 0 && (
<div className="space-y-2 border-t pt-3"> <Collapsible open={configuredJoinsOpen} onOpenChange={setConfiguredJoinsOpen}>
<span className="text-xs font-medium">설정된 조인 ({config.entityJoins.length})</span> <CollapsibleTrigger asChild>
<div className="space-y-1"> <button
type="button"
className="flex w-full items-center justify-between rounded-md border bg-muted/30 px-3 py-2 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2">
<Database className="h-3.5 w-3.5 text-muted-foreground" />
<span className="text-xs font-medium">설정된 조인</span>
<Badge variant="secondary" className="text-[10px] h-5">
{config.entityJoins.length}개
</Badge>
</div>
<ChevronDown className={cn("h-3 w-3 text-muted-foreground transition-transform duration-200", configuredJoinsOpen && "rotate-180")} />
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="max-h-[250px] space-y-1 overflow-y-auto rounded-b-md border border-t-0 p-2">
{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]">
<Database className="h-3 w-3 text-primary" /> <Database className="h-3 w-3 text-primary flex-shrink-0" />
<span className="font-medium">{join.sourceColumn}</span> <span className="truncate font-medium">{join.sourceColumn}</span>
<ArrowRight className="h-3 w-3 text-muted-foreground" /> <ArrowRight className="h-3 w-3 text-muted-foreground flex-shrink-0" />
<span>{join.referenceTable}</span> <span className="truncate">{join.referenceTable}</span>
<span className="text-muted-foreground"> <span className="truncate text-muted-foreground">
({join.columns.map((c) => c.referenceField).join(", ")}) ({join.columns.map((c) => c.referenceField).join(", ")})
</span> </span>
<Button <Button
@ -1977,14 +2073,15 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
entityJoins: config.entityJoins!.filter((_, i) => i !== idx), entityJoins: config.entityJoins!.filter((_, i) => i !== idx),
}); });
}} }}
className="ml-auto h-4 w-4 p-0 text-destructive" className="ml-auto h-4 w-4 p-0 text-destructive flex-shrink-0"
> >
<Trash2 className="h-3 w-3" /> <Trash2 className="h-3 w-3" />
</Button> </Button>
</div> </div>
))} ))}
</div> </div>
</div> </CollapsibleContent>
</Collapsible>
)} )}
</div> </div>
</TabsContent> </TabsContent>

137
frontend/components/v2/config-panels/V2TimelineSchedulerConfigPanel.tsx
View File

@ -11,6 +11,7 @@ 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 { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
@ -47,6 +48,9 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
const [sourceTableOpen, setSourceTableOpen] = useState(false); const [sourceTableOpen, setSourceTableOpen] = useState(false);
const [resourceTableOpen, setResourceTableOpen] = useState(false); const [resourceTableOpen, setResourceTableOpen] = useState(false);
const [customTableOpen, setCustomTableOpen] = useState(false); const [customTableOpen, setCustomTableOpen] = useState(false);
const [scheduleDataOpen, setScheduleDataOpen] = useState(true);
const [sourceDataOpen, setSourceDataOpen] = useState(true);
const [resourceOpen, setResourceOpen] = useState(true);
const [displayOpen, setDisplayOpen] = useState(false); const [displayOpen, setDisplayOpen] = useState(false);
const [advancedOpen, setAdvancedOpen] = useState(false); const [advancedOpen, setAdvancedOpen] = useState(false);
@ -185,18 +189,25 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* ─── 1단계: 스케줄 데이터 테이블 설정 ─── */} {/* ─── 1단계: 스케줄 데이터 테이블 설정 ─── */}
<div className="space-y-2"> <Collapsible open={scheduleDataOpen} onOpenChange={setScheduleDataOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Layers className="h-4 w-4 text-muted-foreground" /> <Layers className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium">스케줄 데이터 테이블</p> <span className="text-sm font-medium">스케줄 데이터 테이블</span>
<Badge variant="secondary" className="text-[10px] h-5">8개 필드</Badge>
</div> </div>
<p className="text-[11px] text-muted-foreground">스케줄 데이터를 저장/조회할 테이블을 설정해요</p> <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", scheduleDataOpen && "rotate-180")} />
</div> </button>
</CollapsibleTrigger>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3"> <CollapsibleContent>
<div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 스케줄 타입 */} {/* 스케줄 타입 */}
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">스케줄 타입</span> <span className="text-xs text-muted-foreground truncate">스케줄 타입</span>
<Select <Select
value={config.scheduleType || "PRODUCTION"} value={config.scheduleType || "PRODUCTION"}
onValueChange={(v) => updateConfig({ scheduleType: v as ScheduleType })} onValueChange={(v) => updateConfig({ scheduleType: v as ScheduleType })}
@ -289,7 +300,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
{/* 디자인 모드 표시용 테이블명 (selectedTable) */} {/* 디자인 모드 표시용 테이블명 (selectedTable) */}
{!config.useCustomTable && ( {!config.useCustomTable && (
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">디자인 모드 표시 테이블</span> <span className="text-xs text-muted-foreground truncate">디자인 모드 표시 테이블</span>
<Input <Input
value={config.selectedTable || "schedule_mng"} value={config.selectedTable || "schedule_mng"}
onChange={(e) => updateConfig({ selectedTable: e.target.value })} onChange={(e) => updateConfig({ selectedTable: e.target.value })}
@ -301,10 +312,10 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
{/* 스케줄 필드 매핑 */} {/* 스케줄 필드 매핑 */}
<div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-2 pt-1"> <div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-2 pt-1">
<p className="text-xs font-medium text-primary">스케줄 필드 매핑</p> <p className="text-xs font-medium text-primary truncate">스케줄 필드 매핑</p>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">ID 필드 *</span> <span className="text-xs text-muted-foreground truncate">ID 필드 *</span>
<Select <Select
value={config.fieldMapping?.id || "schedule_id"} value={config.fieldMapping?.id || "schedule_id"}
onValueChange={(v) => updateFieldMapping("id", v)} onValueChange={(v) => updateFieldMapping("id", v)}
@ -323,7 +334,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">리소스 ID 필드 *</span> <span className="text-xs text-muted-foreground truncate">리소스 ID 필드 *</span>
<Select <Select
value={config.fieldMapping?.resourceId || "resource_id"} value={config.fieldMapping?.resourceId || "resource_id"}
onValueChange={(v) => updateFieldMapping("resourceId", v)} onValueChange={(v) => updateFieldMapping("resourceId", v)}
@ -342,7 +353,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">제목 필드 *</span> <span className="text-xs text-muted-foreground truncate">제목 필드 *</span>
<Select <Select
value={config.fieldMapping?.title || "schedule_name"} value={config.fieldMapping?.title || "schedule_name"}
onValueChange={(v) => updateFieldMapping("title", v)} onValueChange={(v) => updateFieldMapping("title", v)}
@ -361,7 +372,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">시작일 필드 *</span> <span className="text-xs text-muted-foreground truncate">시작일 필드 *</span>
<Select <Select
value={config.fieldMapping?.startDate || "start_date"} value={config.fieldMapping?.startDate || "start_date"}
onValueChange={(v) => updateFieldMapping("startDate", v)} onValueChange={(v) => updateFieldMapping("startDate", v)}
@ -380,7 +391,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">종료일 필드 *</span> <span className="text-xs text-muted-foreground truncate">종료일 필드 *</span>
<Select <Select
value={config.fieldMapping?.endDate || "end_date"} value={config.fieldMapping?.endDate || "end_date"}
onValueChange={(v) => updateFieldMapping("endDate", v)} onValueChange={(v) => updateFieldMapping("endDate", v)}
@ -399,7 +410,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">상태 필드</span> <span className="text-xs text-muted-foreground truncate">상태 필드</span>
<Select <Select
value={config.fieldMapping?.status || ""} value={config.fieldMapping?.status || ""}
onValueChange={(v) => updateFieldMapping("status", v)} onValueChange={(v) => updateFieldMapping("status", v)}
@ -418,7 +429,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">진행률 필드</span> <span className="text-xs text-muted-foreground truncate">진행률 필드</span>
<Select <Select
value={config.fieldMapping?.progress || ""} value={config.fieldMapping?.progress || ""}
onValueChange={(v) => updateFieldMapping("progress", v)} onValueChange={(v) => updateFieldMapping("progress", v)}
@ -437,7 +448,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">색상 필드</span> <span className="text-xs text-muted-foreground truncate">색상 필드</span>
<Select <Select
value={config.fieldMapping?.color || ""} value={config.fieldMapping?.color || ""}
onValueChange={(v) => updateFieldMapping("color", v)} onValueChange={(v) => updateFieldMapping("color", v)}
@ -456,20 +467,31 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
</div> </div>
</div> </div>
</CollapsibleContent>
</Collapsible>
{/* ─── 2단계: 소스 데이터 설정 ─── */} {/* ─── 2단계: 소스 데이터 설정 ─── */}
<div className="space-y-2"> <Collapsible open={sourceDataOpen} onOpenChange={setSourceDataOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Database className="h-4 w-4 text-muted-foreground" /> <Database className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium">소스 데이터 설정</p> <span className="text-sm font-medium">소스 데이터 설정</span>
<Badge variant="secondary" className="text-[10px] h-5">
{config.sourceConfig?.tableName ? "4개 필드" : "미설정"}
</Badge>
</div> </div>
<p className="text-[11px] text-muted-foreground">스케줄 자동 생성 시 참조할 원본 데이터를 설정해요</p> <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", sourceDataOpen && "rotate-180")} />
</div> </button>
</CollapsibleTrigger>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3"> <CollapsibleContent>
<div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 소스 테이블 Combobox */} {/* 소스 테이블 Combobox */}
<div className="space-y-1"> <div className="space-y-1">
<span className="text-xs text-muted-foreground">소스 테이블 (수주/작업요청 등)</span> <span className="text-xs text-muted-foreground truncate">소스 테이블 (수주/작업요청 등)</span>
<Popover open={sourceTableOpen} onOpenChange={setSourceTableOpen}> <Popover open={sourceTableOpen} onOpenChange={setSourceTableOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
@ -528,11 +550,11 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
{/* 소스 필드 매핑 (테이블 선택 시) */} {/* 소스 필드 매핑 (테이블 선택 시) */}
{config.sourceConfig?.tableName && ( {config.sourceConfig?.tableName && (
<div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-2 pt-1"> <div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-2 pt-1">
<p className="text-xs font-medium text-primary">필드 매핑</p> <p className="text-xs font-medium text-primary truncate">필드 매핑</p>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<div> <div>
<span className="text-xs text-muted-foreground">기준일 (마감일/납기일) *</span> <span className="text-xs text-muted-foreground truncate">기준일 (마감일/납기일) *</span>
<p className="text-[10px] text-muted-foreground mt-0.5">스케줄 종료일로 사용돼요</p> <p className="text-[10px] text-muted-foreground mt-0.5">스케줄 종료일로 사용돼요</p>
</div> </div>
<Select <Select
@ -553,7 +575,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">수량 필드</span> <span className="text-xs text-muted-foreground truncate">수량 필드</span>
<Select <Select
value={config.sourceConfig?.quantityField || ""} value={config.sourceConfig?.quantityField || ""}
onValueChange={(v) => updateSourceConfig({ quantityField: v })} onValueChange={(v) => updateSourceConfig({ quantityField: v })}
@ -572,7 +594,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">그룹 필드 (품목코드)</span> <span className="text-xs text-muted-foreground truncate">그룹 필드 (품목코드)</span>
<Select <Select
value={config.sourceConfig?.groupByField || ""} value={config.sourceConfig?.groupByField || ""}
onValueChange={(v) => updateSourceConfig({ groupByField: v })} onValueChange={(v) => updateSourceConfig({ groupByField: v })}
@ -591,7 +613,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">그룹명 필드 (품목명)</span> <span className="text-xs text-muted-foreground truncate">그룹명 필드 (품목명)</span>
<Select <Select
value={config.sourceConfig?.groupNameField || ""} value={config.sourceConfig?.groupNameField || ""}
onValueChange={(v) => updateSourceConfig({ groupNameField: v })} onValueChange={(v) => updateSourceConfig({ groupNameField: v })}
@ -611,20 +633,31 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
)} )}
</div> </div>
</CollapsibleContent>
</Collapsible>
{/* ─── 3단계: 리소스 설정 ─── */} {/* ─── 3단계: 리소스 설정 ─── */}
<div className="space-y-2"> <Collapsible open={resourceOpen} onOpenChange={setResourceOpen}>
<CollapsibleTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Users className="h-4 w-4 text-muted-foreground" /> <Users className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium">리소스 설정 (설비/작업자)</p> <span className="text-sm font-medium">리소스 설정 (설비/작업자)</span>
<Badge variant="secondary" className="text-[10px] h-5">
{config.resourceTable ? "3개 필드" : "미설정"}
</Badge>
</div> </div>
<p className="text-[11px] text-muted-foreground">타임라인 Y축에 표시할 리소스를 설정해요</p> <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", resourceOpen && "rotate-180")} />
</div> </button>
</CollapsibleTrigger>
<div className="rounded-lg border bg-muted/30 p-4 space-y-3"> <CollapsibleContent>
<div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 리소스 테이블 Combobox */} {/* 리소스 테이블 Combobox */}
<div className="space-y-1"> <div className="space-y-1">
<span className="text-xs text-muted-foreground">리소스 테이블</span> <span className="text-xs text-muted-foreground truncate">리소스 테이블</span>
<Popover open={resourceTableOpen} onOpenChange={setResourceTableOpen}> <Popover open={resourceTableOpen} onOpenChange={setResourceTableOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
@ -682,10 +715,10 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
{/* 리소스 필드 매핑 */} {/* 리소스 필드 매핑 */}
{config.resourceTable && ( {config.resourceTable && (
<div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-2 pt-1"> <div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-2 pt-1">
<p className="text-xs font-medium text-primary">리소스 필드</p> <p className="text-xs font-medium text-primary truncate">리소스 필드</p>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">ID 필드</span> <span className="text-xs text-muted-foreground truncate">ID 필드</span>
<Select <Select
value={config.resourceFieldMapping?.id || ""} value={config.resourceFieldMapping?.id || ""}
onValueChange={(v) => updateResourceFieldMapping("id", v)} onValueChange={(v) => updateResourceFieldMapping("id", v)}
@ -704,7 +737,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">이름 필드</span> <span className="text-xs text-muted-foreground truncate">이름 필드</span>
<Select <Select
value={config.resourceFieldMapping?.name || ""} value={config.resourceFieldMapping?.name || ""}
onValueChange={(v) => updateResourceFieldMapping("name", v)} onValueChange={(v) => updateResourceFieldMapping("name", v)}
@ -723,7 +756,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">그룹 필드</span> <span className="text-xs text-muted-foreground truncate">그룹 필드</span>
<Select <Select
value={config.resourceFieldMapping?.group || ""} value={config.resourceFieldMapping?.group || ""}
onValueChange={(v) => updateResourceFieldMapping("group", v)} onValueChange={(v) => updateResourceFieldMapping("group", v)}
@ -743,6 +776,8 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</div> </div>
)} )}
</div> </div>
</CollapsibleContent>
</Collapsible>
{/* ─── 4단계: 표시 설정 (Collapsible) ─── */} {/* ─── 4단계: 표시 설정 (Collapsible) ─── */}
<Collapsible open={displayOpen} onOpenChange={setDisplayOpen}> <Collapsible open={displayOpen} onOpenChange={setDisplayOpen}>
@ -754,6 +789,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" /> <Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">표시 설정</span> <span className="text-sm font-medium">표시 설정</span>
<Badge variant="secondary" className="text-[10px] h-5">18개</Badge>
</div> </div>
<ChevronDown <ChevronDown
className={cn( className={cn(
@ -764,10 +800,10 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</button> </button>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3"> <div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-4 space-y-3">
{/* 줌 레벨 */} {/* 줌 레벨 */}
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">기본 줌 레벨</span> <span className="text-xs text-muted-foreground truncate">기본 줌 레벨</span>
<Select <Select
value={config.defaultZoomLevel || "day"} value={config.defaultZoomLevel || "day"}
onValueChange={(v) => updateConfig({ defaultZoomLevel: v as ZoomLevel })} onValueChange={(v) => updateConfig({ defaultZoomLevel: v as ZoomLevel })}
@ -788,7 +824,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
{/* 초기 표시 날짜 */} {/* 초기 표시 날짜 */}
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<div> <div>
<span className="text-xs text-muted-foreground">초기 표시 날짜</span> <span className="text-xs text-muted-foreground truncate">초기 표시 날짜</span>
<p className="text-[10px] text-muted-foreground mt-0.5">비워두면 오늘 기준</p> <p className="text-[10px] text-muted-foreground mt-0.5">비워두면 오늘 기준</p>
</div> </div>
<Input <Input
@ -801,7 +837,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
{/* 높이 */} {/* 높이 */}
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">높이 (px)</span> <span className="text-xs text-muted-foreground truncate">높이 (px)</span>
<Input <Input
type="number" type="number"
value={config.height || 500} value={config.height || 500}
@ -812,7 +848,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
{/* 최대 높이 */} {/* 최대 높이 */}
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">최대 높이 (px)</span> <span className="text-xs text-muted-foreground truncate">최대 높이 (px)</span>
<Input <Input
type="number" type="number"
value={typeof config.maxHeight === "number" ? config.maxHeight : ""} value={typeof config.maxHeight === "number" ? config.maxHeight : ""}
@ -827,7 +863,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
{/* 행 높이 */} {/* 행 높이 */}
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">행 높이 (px)</span> <span className="text-xs text-muted-foreground truncate">행 높이 (px)</span>
<Input <Input
type="number" type="number"
value={config.rowHeight || 50} value={config.rowHeight || 50}
@ -838,7 +874,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
{/* 헤더 높이 */} {/* 헤더 높이 */}
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">헤더 높이 (px)</span> <span className="text-xs text-muted-foreground truncate">헤더 높이 (px)</span>
<Input <Input
type="number" type="number"
value={config.headerHeight || 60} value={config.headerHeight || 60}
@ -849,7 +885,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
{/* 리소스 컬럼 너비 */} {/* 리소스 컬럼 너비 */}
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<span className="text-xs text-muted-foreground">리소스 컬럼 너비 (px)</span> <span className="text-xs text-muted-foreground truncate">리소스 컬럼 너비 (px)</span>
<Input <Input
type="number" type="number"
value={config.resourceColumnWidth || 150} value={config.resourceColumnWidth || 150}
@ -860,7 +896,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
{/* 셀 너비 (줌 레벨별) */} {/* 셀 너비 (줌 레벨별) */}
<div className="space-y-2 pt-1"> <div className="space-y-2 pt-1">
<span className="text-xs text-muted-foreground">셀 너비 (줌 레벨별, px)</span> <span className="text-xs text-muted-foreground truncate">셀 너비 (줌 레벨별, px)</span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="flex-1"> <div className="flex-1">
<span className="text-[10px] text-muted-foreground">일</span> <span className="text-[10px] text-muted-foreground">일</span>
@ -1016,6 +1052,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" /> <Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">상태별 색상</span> <span className="text-sm font-medium">상태별 색상</span>
<Badge variant="secondary" className="text-[10px] h-5">5개</Badge>
</div> </div>
<ChevronDown <ChevronDown
className={cn( className={cn(
@ -1026,7 +1063,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
</button> </button>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-4 space-y-3"> <div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-4 space-y-3">
{[ {[
{ key: "planned", label: "계획됨", defaultColor: "#3b82f6" }, { key: "planned", label: "계획됨", defaultColor: "#3b82f6" },
{ key: "in_progress", label: "진행중", defaultColor: "#f59e0b" }, { key: "in_progress", label: "진행중", defaultColor: "#f59e0b" },