[agent-pipeline] pipe-20260311225813-8hmk round-2
This commit is contained in:
DDD1542
parent
bb442f5478
commit
00e15dd9f2
|
|
@ -36,6 +36,7 @@ import {
|
|||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Settings,
|
||||
ChevronDown,
|
||||
|
|
@ -473,7 +474,7 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
{/* ─── 2단계: 컬럼 매핑 ─── */}
|
||||
{(currentTableColumns.length > 0 || loadingColumns) && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-medium">컬럼 매핑</p>
|
||||
<p className="text-sm font-medium truncate">컬럼 매핑</p>
|
||||
|
||||
{(loadingEntityJoins || loadingColumns) && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
|
|
@ -484,7 +485,7 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
|
||||
<div className="rounded-lg border bg-muted/30 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>
|
||||
<div className="w-[180px]">
|
||||
{renderColumnSelect(
|
||||
config.columnMapping?.titleColumn || "",
|
||||
|
|
@ -494,7 +495,7 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
</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>
|
||||
<div className="w-[180px]">
|
||||
{renderColumnSelect(
|
||||
config.columnMapping?.subtitleColumn || "",
|
||||
|
|
@ -504,7 +505,7 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
</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>
|
||||
<div className="w-[180px]">
|
||||
{renderColumnSelect(
|
||||
config.columnMapping?.descriptionColumn || "",
|
||||
|
|
@ -514,7 +515,7 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
</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>
|
||||
<div className="w-[180px]">
|
||||
{renderColumnSelect(
|
||||
config.columnMapping?.imageColumn || "",
|
||||
|
|
@ -527,7 +528,7 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
{/* 표시 컬럼 */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-medium">추가 표시 컬럼</span>
|
||||
<span className="text-xs font-medium truncate">추가 표시 컬럼</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
|
|
@ -541,7 +542,7 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
</div>
|
||||
|
||||
{(config.columnMapping?.displayColumns || []).length > 0 ? (
|
||||
<div className="space-y-1.5">
|
||||
<div className="max-h-[250px] space-y-1.5 overflow-y-auto">
|
||||
{(config.columnMapping?.displayColumns || []).map(
|
||||
(column: string, index: number) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
|
|
@ -574,10 +575,10 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
|
||||
{/* ─── 3단계: 카드 레이아웃 ─── */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-medium">카드 레이아웃</p>
|
||||
<p className="text-sm font-medium truncate">카드 레이아웃</p>
|
||||
<div className="rounded-lg border bg-muted/30 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={String(config.cardsPerRow || 3)}
|
||||
onValueChange={(v) => updateConfig("cardsPerRow", parseInt(v))}
|
||||
|
|
@ -596,7 +597,7 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
</div>
|
||||
|
||||
<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"
|
||||
min={0}
|
||||
|
|
@ -611,8 +612,8 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
|
||||
{/* ─── 4단계: 표시 요소 토글 ─── */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-medium">표시 요소</p>
|
||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-2">
|
||||
<p className="text-sm font-medium truncate">표시 요소</p>
|
||||
<div className="max-h-[250px] overflow-y-auto rounded-lg border bg-muted/30 p-4 space-y-2">
|
||||
<div className="flex items-center justify-between py-1">
|
||||
<div>
|
||||
<p className="text-sm">타이틀</p>
|
||||
|
|
@ -721,7 +722,8 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
>
|
||||
<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 truncate">고급 설정</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">3개</Badge>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
|
|
@ -731,10 +733,10 @@ export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> =
|
|||
/>
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CollapsibleContent className="max-h-[250px] overflow-y-auto">
|
||||
<div className="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>
|
||||
<Input
|
||||
type="number"
|
||||
min={10}
|
||||
|
|
|
|||
|
|
@ -397,7 +397,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Rows className="h-4 w-4 text-muted-foreground" />
|
||||
<p className="text-sm font-medium">필드 배치</p>
|
||||
<p className="text-sm font-medium truncate">필드 배치</p>
|
||||
{loadingColumns && (
|
||||
<span className="text-[11px] text-muted-foreground">(컬럼 로딩 중...)</span>
|
||||
)}
|
||||
|
|
@ -456,7 +456,8 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
>
|
||||
<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 truncate">고급 설정</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">12개</Badge>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
|
|
@ -466,14 +467,14 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
/>
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CollapsibleContent className="max-h-[250px] overflow-y-auto">
|
||||
<div className="space-y-4 rounded-b-lg border border-t-0 p-4">
|
||||
{/* 총계 설정 */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">총계 설정</p>
|
||||
<p className="text-xs font-medium text-muted-foreground truncate">총계 설정</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
|
||||
<span className="text-xs">행 총계</span>
|
||||
<span className="text-xs truncate">행 총계</span>
|
||||
<Switch
|
||||
checked={config.totals?.showRowGrandTotals !== false}
|
||||
onCheckedChange={(v) =>
|
||||
|
|
@ -482,7 +483,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
|
||||
<span className="text-xs">열 총계</span>
|
||||
<span className="text-xs truncate">열 총계</span>
|
||||
<Switch
|
||||
checked={config.totals?.showColumnGrandTotals !== false}
|
||||
onCheckedChange={(v) =>
|
||||
|
|
@ -491,7 +492,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
|
||||
<span className="text-xs">행 총계 위치</span>
|
||||
<span className="text-xs truncate">행 총계 위치</span>
|
||||
<Select
|
||||
value={config.totals?.rowGrandTotalPosition || "bottom"}
|
||||
onValueChange={(v) =>
|
||||
|
|
@ -508,7 +509,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
|
||||
<span className="text-xs">열 총계 위치</span>
|
||||
<span className="text-xs truncate">열 총계 위치</span>
|
||||
<Select
|
||||
value={config.totals?.columnGrandTotalPosition || "right"}
|
||||
onValueChange={(v) =>
|
||||
|
|
@ -525,7 +526,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
|
||||
<span className="text-xs">행 소계</span>
|
||||
<span className="text-xs truncate">행 소계</span>
|
||||
<Switch
|
||||
checked={config.totals?.showRowTotals !== false}
|
||||
onCheckedChange={(v) =>
|
||||
|
|
@ -534,7 +535,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
|
||||
<span className="text-xs">열 소계</span>
|
||||
<span className="text-xs truncate">열 소계</span>
|
||||
<Switch
|
||||
checked={config.totals?.showColumnTotals !== false}
|
||||
onCheckedChange={(v) =>
|
||||
|
|
@ -547,7 +548,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
|
||||
{/* 스타일 설정 */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-medium text-muted-foreground">스타일 설정</p>
|
||||
<p className="text-xs font-medium text-muted-foreground truncate">스타일 설정</p>
|
||||
<div className="flex items-center justify-between py-1">
|
||||
<div>
|
||||
<p className="text-sm">줄무늬 배경</p>
|
||||
|
|
@ -576,7 +577,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
|
||||
{/* 크기 설정 */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">크기 설정</p>
|
||||
<p className="text-xs font-medium text-muted-foreground truncate">크기 설정</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="space-y-1">
|
||||
<span className="text-[11px] text-muted-foreground">높이</span>
|
||||
|
|
@ -601,7 +602,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
|
||||
{/* 기능 설정 */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-medium text-muted-foreground">기능 설정</p>
|
||||
<p className="text-xs font-medium text-muted-foreground truncate">기능 설정</p>
|
||||
<div className="flex items-center justify-between py-1">
|
||||
<div>
|
||||
<p className="text-sm">CSV 내보내기</p>
|
||||
|
|
@ -658,7 +659,7 @@ export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
|
|||
|
||||
{/* 조건부 서식 */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">조건부 서식</p>
|
||||
<p className="text-xs font-medium text-muted-foreground truncate">조건부 서식</p>
|
||||
<div className="space-y-2">
|
||||
{(config.style?.conditionalFormats || []).map((rule, index) => (
|
||||
<div key={rule.id} className="flex items-center gap-2 rounded-md bg-muted/30 p-2">
|
||||
|
|
|
|||
|
|
@ -1021,11 +1021,12 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
<div className="flex items-center gap-2">
|
||||
<PanelLeft className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<span className="text-sm font-medium">좌측 패널 (마스터)</span>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
<span className="text-sm font-medium truncate">좌측 패널 (마스터)</span>
|
||||
<p className="text-[10px] text-muted-foreground truncate">
|
||||
{leftTableName || "미설정"}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">{config.leftPanel?.columns?.length || 0}개 컬럼</Badge>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
|
|
@ -1035,11 +1036,11 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
/>
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CollapsibleContent className="max-h-[250px] overflow-y-auto">
|
||||
<div className="space-y-4 rounded-b-lg border border-t-0 p-4">
|
||||
{/* 좌측 패널 제목 */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">패널 제목</Label>
|
||||
<Label className="text-xs truncate">패널 제목</Label>
|
||||
<Input
|
||||
value={config.leftPanel?.title || ""}
|
||||
onChange={(e) => updateLeftPanel({ title: e.target.value })}
|
||||
|
|
@ -1050,7 +1051,7 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
|
||||
{/* 좌측 테이블 선택 */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">데이터 테이블</Label>
|
||||
<Label className="text-xs truncate">데이터 테이블</Label>
|
||||
<TableCombobox
|
||||
value={leftTableName}
|
||||
allTables={allTables}
|
||||
|
|
@ -1085,7 +1086,7 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
|
||||
{/* 표시 모드 */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">표시 모드</Label>
|
||||
<Label className="text-xs truncate">표시 모드</Label>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{DISPLAY_MODE_CARDS.map((card) => {
|
||||
const Icon = card.icon;
|
||||
|
|
@ -1263,13 +1264,14 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
<div className="flex items-center gap-2">
|
||||
<PanelRight className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<span className="text-sm font-medium">
|
||||
<span className="text-sm font-medium truncate">
|
||||
우측 패널 (디테일)
|
||||
</span>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
<p className="text-[10px] text-muted-foreground truncate">
|
||||
{rightTableName || "미설정"}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">{config.rightPanel?.columns?.length || 0}개 컬럼</Badge>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
|
|
@ -1279,11 +1281,11 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
/>
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CollapsibleContent className="max-h-[250px] overflow-y-auto">
|
||||
<div className="space-y-4 rounded-b-lg border border-t-0 p-4">
|
||||
{/* 우측 패널 제목 */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">패널 제목</Label>
|
||||
<Label className="text-xs truncate">패널 제목</Label>
|
||||
<Input
|
||||
value={config.rightPanel?.title || ""}
|
||||
onChange={(e) => updateRightPanel({ title: e.target.value })}
|
||||
|
|
@ -1294,7 +1296,7 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
|
||||
{/* 우측 테이블 선택 */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">데이터 테이블</Label>
|
||||
<Label className="text-xs truncate">데이터 테이블</Label>
|
||||
<TableCombobox
|
||||
value={rightTableName}
|
||||
allTables={allTables}
|
||||
|
|
@ -1308,7 +1310,7 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
|
||||
{/* 표시 모드 */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">표시 모드</Label>
|
||||
<Label className="text-xs truncate">표시 모드</Label>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{DISPLAY_MODE_CARDS.map((card) => {
|
||||
const Icon = card.icon;
|
||||
|
|
@ -2066,12 +2068,8 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Layers className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<span className="text-sm font-medium">추가 탭</span>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
{config.rightPanel?.additionalTabs?.length || 0}개 탭
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-sm font-medium truncate">추가 탭</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">{config.rightPanel?.additionalTabs?.length || 0}개</Badge>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
|
|
@ -2081,7 +2079,7 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
/>
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CollapsibleContent className="max-h-[250px] overflow-y-auto">
|
||||
<div className="space-y-3 rounded-b-lg border border-t-0 p-4">
|
||||
{/* 탭 목록 */}
|
||||
{(config.rightPanel?.additionalTabs || []).map(
|
||||
|
|
@ -2287,7 +2285,8 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
>
|
||||
<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 truncate">고급 설정</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">8개</Badge>
|
||||
</div>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
|
|
@ -2297,7 +2296,7 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
|
|||
/>
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CollapsibleContent className="max-h-[250px] overflow-y-auto">
|
||||
<div className="space-y-3 rounded-b-lg border border-t-0 p-4">
|
||||
<SwitchRow
|
||||
label="선택 동기화"
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
|
|
@ -272,7 +273,7 @@ export const V2StatusCountConfigPanel: React.FC<V2StatusCountConfigPanelProps> =
|
|||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Type className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-medium">제목</span>
|
||||
<span className="text-xs font-medium truncate">제목</span>
|
||||
</div>
|
||||
<Input
|
||||
value={config.title || ""}
|
||||
|
|
@ -346,7 +347,7 @@ export const V2StatusCountConfigPanel: React.FC<V2StatusCountConfigPanelProps> =
|
|||
|
||||
{/* 상태 컬럼 */}
|
||||
<div className="space-y-1">
|
||||
<span className="text-xs font-medium">상태 컬럼 *</span>
|
||||
<span className="text-xs font-medium truncate">상태 컬럼 *</span>
|
||||
<Popover open={statusColumnOpen} onOpenChange={setStatusColumnOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
|
|
@ -404,7 +405,7 @@ export const V2StatusCountConfigPanel: React.FC<V2StatusCountConfigPanelProps> =
|
|||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link2 className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-medium">엔티티 관계</span>
|
||||
<span className="text-xs font-medium truncate">엔티티 관계</span>
|
||||
</div>
|
||||
|
||||
{loadingJoins ? (
|
||||
|
|
@ -525,7 +526,10 @@ export const V2StatusCountConfigPanel: React.FC<V2StatusCountConfigPanelProps> =
|
|||
{/* ═══════════════════════════════════════ */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<SectionHeader icon={BarChart3} title="상태 항목" description="집계할 상태 값과 표시 스타일을 설정하세요" />
|
||||
<div className="flex items-center gap-2">
|
||||
<SectionHeader icon={BarChart3} title="상태 항목" description="집계할 상태 값과 표시 스타일을 설정하세요" />
|
||||
<Badge variant="secondary" className="text-[10px] h-5">{items.length}개</Badge>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
|
|
@ -552,7 +556,7 @@ export const V2StatusCountConfigPanel: React.FC<V2StatusCountConfigPanelProps> =
|
|||
<p className="text-xs text-muted-foreground">위의 추가 버튼으로 항목을 만들어보세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="max-h-[250px] space-y-2 overflow-y-auto">
|
||||
{items.map((item: StatusCountItem, i: number) => (
|
||||
<div key={i} className="space-y-1.5 rounded-md border p-2.5">
|
||||
{/* 첫 번째 줄: 상태값 + 삭제 */}
|
||||
|
|
@ -648,7 +652,7 @@ export const V2StatusCountConfigPanel: React.FC<V2StatusCountConfigPanelProps> =
|
|||
{/* 미리보기 */}
|
||||
{items.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-xs text-muted-foreground">미리보기</span>
|
||||
<span className="text-xs text-muted-foreground truncate">미리보기</span>
|
||||
<div className="flex gap-1.5 rounded-md bg-muted/30 p-2">
|
||||
{items.map((item, i) => {
|
||||
const colors = STATUS_COLOR_MAP[item.color] || STATUS_COLOR_MAP.gray;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
|
|
@ -386,7 +387,7 @@ export const V2TableGroupedConfigPanel: React.FC<V2TableGroupedConfigPanelProps>
|
|||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Type className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-medium">그룹 라벨 형식</span>
|
||||
<span className="text-xs font-medium truncate">그룹 라벨 형식</span>
|
||||
</div>
|
||||
<Input
|
||||
value={config.groupConfig?.groupLabelFormat || "{value}"}
|
||||
|
|
@ -441,7 +442,7 @@ export const V2TableGroupedConfigPanel: React.FC<V2TableGroupedConfigPanelProps>
|
|||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hash className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-medium">합계 표시 컬럼</span>
|
||||
<span className="text-xs font-medium truncate">합계 표시 컬럼</span>
|
||||
</div>
|
||||
<p className="text-[10px] text-muted-foreground">그룹별 합계를 계산할 컬럼을 선택하세요</p>
|
||||
<div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border p-2">
|
||||
|
|
@ -563,19 +564,20 @@ export const V2TableGroupedConfigPanel: React.FC<V2TableGroupedConfigPanelProps>
|
|||
>
|
||||
<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 truncate">표시 설정</span>
|
||||
<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", displayOpen && "rotate-180")} />
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CollapsibleContent className="max-h-[250px] overflow-y-auto">
|
||||
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
|
||||
|
||||
{/* 체크박스 */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckSquare className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-medium">체크박스</span>
|
||||
<span className="text-xs font-medium truncate">체크박스</span>
|
||||
</div>
|
||||
|
||||
<SwitchRow
|
||||
|
|
@ -640,7 +642,7 @@ export const V2TableGroupedConfigPanel: React.FC<V2TableGroupedConfigPanelProps>
|
|||
</LabeledRow>
|
||||
|
||||
<div className="space-y-1">
|
||||
<span className="text-xs text-muted-foreground">빈 데이터 메시지</span>
|
||||
<span className="text-xs text-muted-foreground truncate">빈 데이터 메시지</span>
|
||||
<Input
|
||||
value={config.emptyMessage || ""}
|
||||
onChange={(e) => updateConfig({ emptyMessage: e.target.value })}
|
||||
|
|
@ -663,17 +665,13 @@ export const V2TableGroupedConfigPanel: React.FC<V2TableGroupedConfigPanelProps>
|
|||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link2 className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">연동 설정</span>
|
||||
{(config.linkedFilters?.length ?? 0) > 0 && (
|
||||
<span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
|
||||
{config.linkedFilters!.length}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-sm font-medium truncate">연동 설정</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">{config.linkedFilters?.length || 0}개</Badge>
|
||||
</div>
|
||||
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", linkedOpen && "rotate-180")} />
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CollapsibleContent className="max-h-[250px] overflow-y-auto">
|
||||
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
|
|
|
|||
Loading…
Reference in New Issue