[agent-pipeline] pipe-20260311225813-8hmk round-1
This commit is contained in:
DDD1542
parent
db3ad9d639
commit
bb442f5478
|
|
@ -9,6 +9,7 @@ import React, { useState, useEffect, useMemo } from "react";
|
|||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
|
|
@ -57,6 +58,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
|
|||
const [titleColumnOpen, setTitleColumnOpen] = useState(false);
|
||||
const [descriptionColumnOpen, setDescriptionColumnOpen] = useState(false);
|
||||
|
||||
const [titleDescOpen, setTitleDescOpen] = useState(true);
|
||||
const [styleOpen, setStyleOpen] = useState(false);
|
||||
const [interactionOpen, setInteractionOpen] = useState(false);
|
||||
|
||||
|
|
@ -353,21 +355,37 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
|
|||
/>
|
||||
|
||||
{/* ─── 4단계: 아이템 제목/설명 ─── */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm font-medium">아이템 제목/설명</p>
|
||||
<Collapsible open={titleDescOpen} onOpenChange={setTitleDescOpen}>
|
||||
<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">
|
||||
<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
|
||||
checked={config.showItemTitle ?? false}
|
||||
onCheckedChange={(checked) => onChange({ showItemTitle: checked })}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
각 아이템에 제목과 설명을 표시할 수 있어요
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{config.showItemTitle && (
|
||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
||||
<>
|
||||
{/* 제목 컬럼 Combobox */}
|
||||
<div className="space-y-1">
|
||||
<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")} />
|
||||
<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 && (
|
||||
<span className="text-[10px] text-muted-foreground">{col.columnName}</span>
|
||||
<span className="truncate text-[10px] text-muted-foreground">{col.columnName}</span>
|
||||
)}
|
||||
</div>
|
||||
</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")} />
|
||||
<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 && (
|
||||
<span className="text-[10px] text-muted-foreground">{col.columnName}</span>
|
||||
<span className="truncate text-[10px] text-muted-foreground">{col.columnName}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
|
|
@ -590,8 +608,11 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
{/* ─── 5단계: 카드 스타일 (Collapsible) ─── */}
|
||||
<Collapsible open={styleOpen} onOpenChange={setStyleOpen}>
|
||||
|
|
@ -603,6 +624,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
|
|||
<div className="flex items-center gap-2">
|
||||
<Settings className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">카드 스타일</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">6개</Badge>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
|
|
@ -613,10 +635,10 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
|
|||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<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="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
|
||||
type="color"
|
||||
value={config.backgroundColor || "#ffffff"}
|
||||
|
|
@ -625,7 +647,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
|
|||
/>
|
||||
</div>
|
||||
<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
|
||||
value={config.borderRadius || "8px"}
|
||||
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="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
|
||||
value={config.padding || "16px"}
|
||||
onChange={(e) => onChange({ padding: e.target.value })}
|
||||
|
|
@ -644,7 +666,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
|
|||
/>
|
||||
</div>
|
||||
<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
|
||||
value={config.itemHeight || "auto"}
|
||||
onChange={(e) => onChange({ itemHeight: e.target.value })}
|
||||
|
|
@ -688,6 +710,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
|
|||
<div className="flex items-center gap-2">
|
||||
<Settings className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">상호작용 & 페이징</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">7개</Badge>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
|
|
@ -698,7 +721,7 @@ export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanel
|
|||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<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>
|
||||
<p className="text-sm">클릭 가능</p>
|
||||
|
|
@ -868,6 +891,7 @@ function SlotChildrenSection({
|
|||
}: SlotChildrenSectionProps) {
|
||||
const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);
|
||||
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
|
||||
const [slotFieldsOpen, setSlotFieldsOpen] = useState(true);
|
||||
|
||||
const children = config.children || [];
|
||||
|
||||
|
|
@ -930,16 +954,30 @@ function SlotChildrenSection({
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium">반복 표시 필드</p>
|
||||
<Collapsible open={slotFieldsOpen} onOpenChange={setSlotFieldsOpen}>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{children.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="max-h-[250px] space-y-2 overflow-y-auto">
|
||||
{children.map((child, index) => {
|
||||
const isExpanded = expandedIds.has(child.id);
|
||||
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">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-xs font-medium">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="truncate text-xs font-medium">
|
||||
{child.label || child.fieldName}
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">
|
||||
<div className="truncate text-[10px] text-muted-foreground">
|
||||
필드: {child.fieldName}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1148,8 +1186,8 @@ function SlotChildrenSection({
|
|||
)}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{col.displayName || col.columnName}</div>
|
||||
<div className="text-[10px] text-muted-foreground">
|
||||
<div className="truncate font-medium">{col.displayName || col.columnName}</div>
|
||||
<div className="truncate text-[10px] text-muted-foreground">
|
||||
{col.columnName}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1164,7 +1202,9 @@ function SlotChildrenSection({
|
|||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
|
|||
import { Switch } from "@/components/ui/switch";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
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);
|
||||
|
||||
// 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 [loadingNumberingRules, setLoadingNumberingRules] = useState(false);
|
||||
|
|
@ -1120,10 +1129,23 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
|
|||
</>
|
||||
)}
|
||||
|
||||
{/* 기능 옵션 - 토스식 Switch + 설명 */}
|
||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-1">
|
||||
{/* 기능 옵션 - Collapsible */}
|
||||
<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>
|
||||
<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>
|
||||
<p className="text-sm">추가 버튼</p>
|
||||
|
|
@ -1185,7 +1207,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
{/* 고급 설정 - Collapsible (소스 디테일 등) */}
|
||||
<Collapsible>
|
||||
|
|
@ -1328,14 +1351,27 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
|
|||
|
||||
{/* 컬럼 설정 탭 */}
|
||||
<TabsContent value="columns" className="mt-4 space-y-4">
|
||||
{/* 통합 컬럼 선택 */}
|
||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
||||
{/* 통합 컬럼 선택 - Collapsible */}
|
||||
<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">
|
||||
<Database className="h-4 w-4 text-primary" />
|
||||
<span className="text-sm font-medium">
|
||||
{isModalMode ? "어떤 컬럼을 표시하고 입력받을까요?" : "어떤 컬럼을 입력받을까요?"}
|
||||
<Database className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="truncate text-sm font-medium">
|
||||
{isModalMode ? "컬럼 표시/입력" : "입력 컬럼"}
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">
|
||||
{inputableColumns.length}개 컬럼
|
||||
</Badge>
|
||||
</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">
|
||||
{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">
|
||||
<Link2 className="h-3 w-3" />
|
||||
소스 테이블 ({config.dataSource.sourceTable}) - 표시용
|
||||
<span className="truncate">소스 테이블 ({config.dataSource.sourceTable}) - 표시용</span>
|
||||
</div>
|
||||
{loadingSourceColumns ? (
|
||||
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
|
||||
) : sourceTableColumns.length === 0 ? (
|
||||
<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) => (
|
||||
<div
|
||||
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">
|
||||
<Database className="h-3 w-3" />
|
||||
저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
|
||||
<span className="truncate">저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용</span>
|
||||
</div>
|
||||
{loadingColumns ? (
|
||||
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
|
||||
|
|
@ -1392,7 +1428,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
|
|||
컬럼 정보가 없습니다
|
||||
</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) => (
|
||||
<div
|
||||
key={`input-${column.columnName}`}
|
||||
|
|
@ -1415,16 +1451,31 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
{/* 선택된 컬럼 상세 설정 */}
|
||||
{/* 선택된 컬럼 상세 설정 - Collapsible */}
|
||||
{config.columns.length > 0 && (
|
||||
<>
|
||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">선택된 컬럼 ({config.columns.length})</span>
|
||||
<span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span>
|
||||
<Collapsible open={selectedColumnsOpen} onOpenChange={setSelectedColumnsOpen}>
|
||||
<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">
|
||||
<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 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) => (
|
||||
<div key={col.key} className="space-y-1">
|
||||
{/* 컬럼 헤더 (드래그 가능) */}
|
||||
|
|
@ -1744,25 +1795,38 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
)}
|
||||
|
||||
{/* 계산 규칙 */}
|
||||
{/* 계산 규칙 - Collapsible (기본 닫힘) */}
|
||||
{(isModalMode || isInlineMode) && config.columns.length > 0 && (
|
||||
<>
|
||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Collapsible open={calcRulesOpen} onOpenChange={setCalcRulesOpen}>
|
||||
<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">
|
||||
<Calculator className="h-4 w-4 text-primary" />
|
||||
<Calculator className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">계산 규칙</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">
|
||||
{calculationRules.length}개
|
||||
</Badge>
|
||||
</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">
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="max-h-[250px] space-y-2 overflow-y-auto">
|
||||
{calculationRules.map((rule) => (
|
||||
<div key={rule.id} className="space-y-1 rounded border p-1.5">
|
||||
<div className="flex items-center gap-1">
|
||||
|
|
@ -1862,7 +1926,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
|
|
@ -1897,18 +1962,33 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
|
|||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
{entityJoinData.joinTables.map((joinTable, tableIndex) => {
|
||||
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 (
|
||||
<div key={tableIndex} className="space-y-1">
|
||||
<div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary">
|
||||
<Link2 className="h-3 w-3" />
|
||||
<span>{joinTable.tableName}</span>
|
||||
<span className="text-muted-foreground">({sourceColumn})</span>
|
||||
<Collapsible key={tableIndex} open={isSubOpen} onOpenChange={(open) => setEntityJoinSubOpen((prev) => ({ ...prev, [tableIndex]: open }))}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
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 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) => {
|
||||
const isActive = isEntityJoinColumnActive(
|
||||
joinTable.tableName,
|
||||
|
|
@ -1922,7 +2002,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
|
|||
<div
|
||||
key={colIndex}
|
||||
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",
|
||||
)}
|
||||
onClick={() =>
|
||||
|
|
@ -1948,24 +2028,40 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
|
|||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 현재 설정된 Entity 조인 목록 */}
|
||||
{/* 현재 설정된 Entity 조인 목록 - Collapsible */}
|
||||
{config.entityJoins && config.entityJoins.length > 0 && (
|
||||
<div className="space-y-2 border-t pt-3">
|
||||
<span className="text-xs font-medium">설정된 조인 ({config.entityJoins.length})</span>
|
||||
<div className="space-y-1">
|
||||
<Collapsible open={configuredJoinsOpen} onOpenChange={setConfiguredJoinsOpen}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<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) => (
|
||||
<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" />
|
||||
<span className="font-medium">{join.sourceColumn}</span>
|
||||
<ArrowRight className="h-3 w-3 text-muted-foreground" />
|
||||
<span>{join.referenceTable}</span>
|
||||
<span className="text-muted-foreground">
|
||||
<Database className="h-3 w-3 text-primary flex-shrink-0" />
|
||||
<span className="truncate font-medium">{join.sourceColumn}</span>
|
||||
<ArrowRight className="h-3 w-3 text-muted-foreground flex-shrink-0" />
|
||||
<span className="truncate">{join.referenceTable}</span>
|
||||
<span className="truncate text-muted-foreground">
|
||||
({join.columns.map((c) => c.referenceField).join(", ")})
|
||||
</span>
|
||||
<Button
|
||||
|
|
@ -1977,14 +2073,15 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
|
|||
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" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { Input } from "@/components/ui/input";
|
|||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
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 [resourceTableOpen, setResourceTableOpen] = 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 [advancedOpen, setAdvancedOpen] = useState(false);
|
||||
|
||||
|
|
@ -185,18 +189,25 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
return (
|
||||
<div className="space-y-4">
|
||||
{/* ─── 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">
|
||||
<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>
|
||||
<p className="text-[11px] text-muted-foreground">스케줄 데이터를 저장/조회할 테이블을 설정해요</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
||||
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", scheduleDataOpen && "rotate-180")} />
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<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">
|
||||
<span className="text-xs text-muted-foreground">스케줄 타입</span>
|
||||
<span className="text-xs text-muted-foreground truncate">스케줄 타입</span>
|
||||
<Select
|
||||
value={config.scheduleType || "PRODUCTION"}
|
||||
onValueChange={(v) => updateConfig({ scheduleType: v as ScheduleType })}
|
||||
|
|
@ -289,7 +300,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
{/* 디자인 모드 표시용 테이블명 (selectedTable) */}
|
||||
{!config.useCustomTable && (
|
||||
<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
|
||||
value={config.selectedTable || "schedule_mng"}
|
||||
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">
|
||||
<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">
|
||||
<span className="text-xs text-muted-foreground">ID 필드 *</span>
|
||||
<span className="text-xs text-muted-foreground truncate">ID 필드 *</span>
|
||||
<Select
|
||||
value={config.fieldMapping?.id || "schedule_id"}
|
||||
onValueChange={(v) => updateFieldMapping("id", v)}
|
||||
|
|
@ -323,7 +334,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.fieldMapping?.resourceId || "resource_id"}
|
||||
onValueChange={(v) => updateFieldMapping("resourceId", v)}
|
||||
|
|
@ -342,7 +353,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.fieldMapping?.title || "schedule_name"}
|
||||
onValueChange={(v) => updateFieldMapping("title", v)}
|
||||
|
|
@ -361,7 +372,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.fieldMapping?.startDate || "start_date"}
|
||||
onValueChange={(v) => updateFieldMapping("startDate", v)}
|
||||
|
|
@ -380,7 +391,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.fieldMapping?.endDate || "end_date"}
|
||||
onValueChange={(v) => updateFieldMapping("endDate", v)}
|
||||
|
|
@ -399,7 +410,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.fieldMapping?.status || ""}
|
||||
onValueChange={(v) => updateFieldMapping("status", v)}
|
||||
|
|
@ -418,7 +429,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.fieldMapping?.progress || ""}
|
||||
onValueChange={(v) => updateFieldMapping("progress", v)}
|
||||
|
|
@ -437,7 +448,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.fieldMapping?.color || ""}
|
||||
onValueChange={(v) => updateFieldMapping("color", v)}
|
||||
|
|
@ -456,20 +467,31 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
{/* ─── 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">
|
||||
<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>
|
||||
<p className="text-[11px] text-muted-foreground">스케줄 자동 생성 시 참조할 원본 데이터를 설정해요</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
||||
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", sourceDataOpen && "rotate-180")} />
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-4 space-y-3">
|
||||
{/* 소스 테이블 Combobox */}
|
||||
<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}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
|
|
@ -528,11 +550,11 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
{/* 소스 필드 매핑 (테이블 선택 시) */}
|
||||
{config.sourceConfig?.tableName && (
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<Select
|
||||
|
|
@ -553,7 +575,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.sourceConfig?.quantityField || ""}
|
||||
onValueChange={(v) => updateSourceConfig({ quantityField: v })}
|
||||
|
|
@ -572,7 +594,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.sourceConfig?.groupByField || ""}
|
||||
onValueChange={(v) => updateSourceConfig({ groupByField: v })}
|
||||
|
|
@ -591,7 +613,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.sourceConfig?.groupNameField || ""}
|
||||
onValueChange={(v) => updateSourceConfig({ groupNameField: v })}
|
||||
|
|
@ -611,20 +633,31 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
{/* ─── 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">
|
||||
<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>
|
||||
<p className="text-[11px] text-muted-foreground">타임라인 Y축에 표시할 리소스를 설정해요</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
||||
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", resourceOpen && "rotate-180")} />
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="max-h-[250px] overflow-y-auto rounded-b-lg border border-t-0 p-4 space-y-3">
|
||||
{/* 리소스 테이블 Combobox */}
|
||||
<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}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
|
|
@ -682,10 +715,10 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
{/* 리소스 필드 매핑 */}
|
||||
{config.resourceTable && (
|
||||
<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">
|
||||
<span className="text-xs text-muted-foreground">ID 필드</span>
|
||||
<span className="text-xs text-muted-foreground truncate">ID 필드</span>
|
||||
<Select
|
||||
value={config.resourceFieldMapping?.id || ""}
|
||||
onValueChange={(v) => updateResourceFieldMapping("id", v)}
|
||||
|
|
@ -704,7 +737,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.resourceFieldMapping?.name || ""}
|
||||
onValueChange={(v) => updateResourceFieldMapping("name", v)}
|
||||
|
|
@ -723,7 +756,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
|
||||
<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
|
||||
value={config.resourceFieldMapping?.group || ""}
|
||||
onValueChange={(v) => updateResourceFieldMapping("group", v)}
|
||||
|
|
@ -743,6 +776,8 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
{/* ─── 4단계: 표시 설정 (Collapsible) ─── */}
|
||||
<Collapsible open={displayOpen} onOpenChange={setDisplayOpen}>
|
||||
|
|
@ -754,6 +789,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
<div className="flex items-center gap-2">
|
||||
<Settings className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">표시 설정</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">18개</Badge>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
|
|
@ -764,10 +800,10 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<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">
|
||||
<span className="text-xs text-muted-foreground">기본 줌 레벨</span>
|
||||
<span className="text-xs text-muted-foreground truncate">기본 줌 레벨</span>
|
||||
<Select
|
||||
value={config.defaultZoomLevel || "day"}
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
<Input
|
||||
|
|
@ -801,7 +837,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
|
||||
{/* 높이 */}
|
||||
<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
|
||||
type="number"
|
||||
value={config.height || 500}
|
||||
|
|
@ -812,7 +848,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
|
||||
{/* 최대 높이 */}
|
||||
<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
|
||||
type="number"
|
||||
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">
|
||||
<span className="text-xs text-muted-foreground">행 높이 (px)</span>
|
||||
<span className="text-xs text-muted-foreground truncate">행 높이 (px)</span>
|
||||
<Input
|
||||
type="number"
|
||||
value={config.rowHeight || 50}
|
||||
|
|
@ -838,7 +874,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
|
||||
{/* 헤더 높이 */}
|
||||
<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
|
||||
type="number"
|
||||
value={config.headerHeight || 60}
|
||||
|
|
@ -849,7 +885,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
|
||||
{/* 리소스 컬럼 너비 */}
|
||||
<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
|
||||
type="number"
|
||||
value={config.resourceColumnWidth || 150}
|
||||
|
|
@ -860,7 +896,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
|
||||
{/* 셀 너비 (줌 레벨별) */}
|
||||
<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-1">
|
||||
<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">
|
||||
<Settings className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">상태별 색상</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">5개</Badge>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
|
|
@ -1026,7 +1063,7 @@ export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigP
|
|||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<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: "in_progress", label: "진행중", defaultColor: "#f59e0b" },
|
||||
|
|
|
|||
Loading…
Reference in New Issue