다국어 지원 및 테이블 설정 현황 문서를 업데이트하여 현재 사용 가능한 17개 컴포넌트의 기능 현황을 반영했습니다. 또한, 집계 위젯(aggregation-widget) 관련 기능을 추가하고, UI에서 다국어 지원을 위한 라벨 수집 및 매핑 로직을 개선하여 사용자 경험을 향상시켰습니다.
This commit is contained in:
kjs
@@ -0,0 +1,533 @@
|
||||
"use client";
|
||||
|
||||
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 { Checkbox } from "@/components/ui/checkbox";
|
||||
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";
|
||||
import { Plus, Trash2, GripVertical, Database, Table2, ChevronsUpDown, Check } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AggregationWidgetConfig, AggregationItem, AggregationType } from "./types";
|
||||
import { tableManagementApi } from "@/lib/api/tableManagement";
|
||||
import { tableTypeApi } from "@/lib/api/screen";
|
||||
|
||||
interface AggregationWidgetConfigPanelProps {
|
||||
config: AggregationWidgetConfig;
|
||||
onChange: (config: Partial<AggregationWidgetConfig>) => void;
|
||||
screenTableName?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 집계 위젯 설정 패널
|
||||
*/
|
||||
export function AggregationWidgetConfigPanel({
|
||||
config,
|
||||
onChange,
|
||||
screenTableName,
|
||||
}: AggregationWidgetConfigPanelProps) {
|
||||
const [columns, setColumns] = useState<Array<{ columnName: string; label?: string; dataType?: string }>>([]);
|
||||
const [loadingColumns, setLoadingColumns] = useState(false);
|
||||
const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
|
||||
const [loadingTables, setLoadingTables] = useState(false);
|
||||
const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
|
||||
|
||||
// 실제 사용할 테이블 이름 계산
|
||||
const targetTableName = useMemo(() => {
|
||||
if (config.useCustomTable && config.customTableName) {
|
||||
return config.customTableName;
|
||||
}
|
||||
return config.tableName || screenTableName;
|
||||
}, [config.useCustomTable, config.customTableName, config.tableName, screenTableName]);
|
||||
|
||||
// 화면 테이블명 자동 설정 (초기 한 번만)
|
||||
useEffect(() => {
|
||||
if (screenTableName && !config.tableName && !config.customTableName) {
|
||||
onChange({ tableName: screenTableName });
|
||||
}
|
||||
}, [screenTableName, config.tableName, config.customTableName, onChange]);
|
||||
|
||||
// 전체 테이블 목록 로드
|
||||
useEffect(() => {
|
||||
const fetchTables = async () => {
|
||||
setLoadingTables(true);
|
||||
try {
|
||||
const response = await tableTypeApi.getTables();
|
||||
setAvailableTables(
|
||||
response.map((table: any) => ({
|
||||
tableName: table.tableName,
|
||||
displayName: table.displayName || table.tableName,
|
||||
}))
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("테이블 목록 가져오기 실패:", error);
|
||||
} finally {
|
||||
setLoadingTables(false);
|
||||
}
|
||||
};
|
||||
fetchTables();
|
||||
}, []);
|
||||
|
||||
// 테이블 컬럼 로드
|
||||
useEffect(() => {
|
||||
const loadColumns = async () => {
|
||||
if (!targetTableName) {
|
||||
setColumns([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingColumns(true);
|
||||
try {
|
||||
const result = await tableManagementApi.getColumnList(targetTableName);
|
||||
if (result.success && result.data?.columns) {
|
||||
setColumns(
|
||||
result.data.columns.map((col: any) => ({
|
||||
columnName: col.columnName || col.column_name,
|
||||
label: col.displayName || col.columnLabel || col.column_label || col.label || col.columnName || col.column_name,
|
||||
dataType: col.dataType || col.data_type,
|
||||
}))
|
||||
);
|
||||
} else {
|
||||
setColumns([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("컬럼 로드 실패:", error);
|
||||
setColumns([]);
|
||||
} finally {
|
||||
setLoadingColumns(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadColumns();
|
||||
}, [targetTableName]);
|
||||
|
||||
// 집계 항목 추가
|
||||
const addItem = () => {
|
||||
const newItem: AggregationItem = {
|
||||
id: `agg-${Date.now()}`,
|
||||
columnName: "",
|
||||
columnLabel: "",
|
||||
type: "sum",
|
||||
format: "number",
|
||||
decimalPlaces: 0,
|
||||
};
|
||||
onChange({
|
||||
items: [...(config.items || []), newItem],
|
||||
});
|
||||
};
|
||||
|
||||
// 집계 항목 삭제
|
||||
const removeItem = (id: string) => {
|
||||
onChange({
|
||||
items: (config.items || []).filter((item) => item.id !== id),
|
||||
});
|
||||
};
|
||||
|
||||
// 집계 항목 업데이트
|
||||
const updateItem = (id: string, updates: Partial<AggregationItem>) => {
|
||||
onChange({
|
||||
items: (config.items || []).map((item) =>
|
||||
item.id === id ? { ...item, ...updates } : item
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
// 숫자형 컬럼만 필터링 (count 제외)
|
||||
const numericColumns = columns.filter(
|
||||
(col) =>
|
||||
col.dataType?.toLowerCase().includes("int") ||
|
||||
col.dataType?.toLowerCase().includes("numeric") ||
|
||||
col.dataType?.toLowerCase().includes("decimal") ||
|
||||
col.dataType?.toLowerCase().includes("float") ||
|
||||
col.dataType?.toLowerCase().includes("double")
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="text-sm font-medium">집계 위젯 설정</div>
|
||||
|
||||
{/* 테이블 설정 (컴포넌트 개발 가이드 준수) */}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold">데이터 소스 테이블</h3>
|
||||
<p className="text-muted-foreground text-[10px]">집계할 데이터의 테이블을 선택합니다</p>
|
||||
</div>
|
||||
<hr className="border-border" />
|
||||
|
||||
{/* 현재 선택된 테이블 표시 (카드 형태) */}
|
||||
<div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
|
||||
<Database className="h-4 w-4 text-blue-500" />
|
||||
<div className="flex-1">
|
||||
<div className="text-xs font-medium">
|
||||
{config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">
|
||||
{config.useCustomTable ? "커스텀 테이블" : "화면 기본 테이블"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 테이블 선택 Combobox */}
|
||||
<Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={tableComboboxOpen}
|
||||
className="h-8 w-full justify-between text-xs"
|
||||
disabled={loadingTables}
|
||||
>
|
||||
테이블 변경...
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-2 text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
|
||||
|
||||
{/* 그룹 1: 화면 기본 테이블 */}
|
||||
{screenTableName && (
|
||||
<CommandGroup heading="기본 (화면 테이블)">
|
||||
<CommandItem
|
||||
key={`default-${screenTableName}`}
|
||||
value={screenTableName}
|
||||
onSelect={() => {
|
||||
onChange({
|
||||
useCustomTable: false,
|
||||
customTableName: undefined,
|
||||
tableName: screenTableName,
|
||||
items: [], // 테이블 변경 시 집계 항목 초기화
|
||||
});
|
||||
setTableComboboxOpen(false);
|
||||
}}
|
||||
className="text-xs cursor-pointer"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
!config.useCustomTable ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<Database className="mr-2 h-3 w-3 text-blue-500" />
|
||||
{screenTableName}
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
)}
|
||||
|
||||
{/* 그룹 2: 전체 테이블 */}
|
||||
<CommandGroup heading="전체 테이블">
|
||||
{availableTables
|
||||
.filter((table) => table.tableName !== screenTableName)
|
||||
.map((table) => (
|
||||
<CommandItem
|
||||
key={table.tableName}
|
||||
value={`${table.tableName} ${table.displayName || ""}`}
|
||||
onSelect={() => {
|
||||
onChange({
|
||||
useCustomTable: true,
|
||||
customTableName: table.tableName,
|
||||
tableName: table.tableName,
|
||||
items: [], // 테이블 변경 시 집계 항목 초기화
|
||||
});
|
||||
setTableComboboxOpen(false);
|
||||
}}
|
||||
className="text-xs cursor-pointer"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
config.customTableName === table.tableName ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<Table2 className="mr-2 h-3 w-3 text-slate-400" />
|
||||
{table.displayName || table.tableName}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 레이아웃 설정 */}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold">레이아웃</h3>
|
||||
</div>
|
||||
<hr className="border-border" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">배치 방향</Label>
|
||||
<Select
|
||||
value={config.layout || "horizontal"}
|
||||
onValueChange={(value) => onChange({ layout: value as "horizontal" | "vertical" })}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="horizontal">가로 배치</SelectItem>
|
||||
<SelectItem value="vertical">세로 배치</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">항목 간격</Label>
|
||||
<Input
|
||||
value={config.gap || "16px"}
|
||||
onChange={(e) => onChange({ gap: e.target.value })}
|
||||
placeholder="16px"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="showLabels"
|
||||
checked={config.showLabels ?? true}
|
||||
onCheckedChange={(checked) => onChange({ showLabels: checked as boolean })}
|
||||
/>
|
||||
<Label htmlFor="showLabels" className="text-xs">
|
||||
라벨 표시
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="showIcons"
|
||||
checked={config.showIcons ?? true}
|
||||
onCheckedChange={(checked) => onChange({ showIcons: checked as boolean })}
|
||||
/>
|
||||
<Label htmlFor="showIcons" className="text-xs">
|
||||
아이콘 표시
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 집계 항목 설정 */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold">집계 항목</h3>
|
||||
<Button variant="outline" size="sm" onClick={addItem} className="h-7 text-xs">
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
항목 추가
|
||||
</Button>
|
||||
</div>
|
||||
<hr className="border-border" />
|
||||
|
||||
{(config.items || []).length === 0 ? (
|
||||
<div className="rounded-md border border-dashed p-4 text-center text-xs text-muted-foreground">
|
||||
집계 항목을 추가해주세요
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{(config.items || []).map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="rounded-md border bg-slate-50 p-3 space-y-2"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
|
||||
<span className="text-xs font-medium">항목 {index + 1}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeItem(item.id)}
|
||||
className="h-6 w-6 p-0 text-destructive"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{/* 컬럼 선택 */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-[10px]">컬럼</Label>
|
||||
<Select
|
||||
value={item.columnName}
|
||||
onValueChange={(value) => {
|
||||
const col = columns.find((c) => c.columnName === value);
|
||||
updateItem(item.id, {
|
||||
columnName: value,
|
||||
columnLabel: col?.label || value,
|
||||
});
|
||||
}}
|
||||
disabled={loadingColumns || columns.length === 0}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs">
|
||||
<SelectValue placeholder={
|
||||
loadingColumns
|
||||
? "로딩 중..."
|
||||
: columns.length === 0
|
||||
? "테이블을 선택하세요"
|
||||
: "컬럼 선택"
|
||||
} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(item.type === "count" ? columns : numericColumns).length === 0 ? (
|
||||
<div className="p-2 text-xs text-muted-foreground text-center">
|
||||
{item.type === "count"
|
||||
? "컬럼이 없습니다"
|
||||
: "숫자형 컬럼이 없습니다"}
|
||||
</div>
|
||||
) : (
|
||||
(item.type === "count" ? columns : numericColumns).map((col) => (
|
||||
<SelectItem key={col.columnName} value={col.columnName}>
|
||||
{col.label || col.columnName}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 집계 타입 */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-[10px]">집계 타입</Label>
|
||||
<Select
|
||||
value={item.type}
|
||||
onValueChange={(value) => updateItem(item.id, { type: value as AggregationType })}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="sum">합계 (SUM)</SelectItem>
|
||||
<SelectItem value="avg">평균 (AVG)</SelectItem>
|
||||
<SelectItem value="count">개수 (COUNT)</SelectItem>
|
||||
<SelectItem value="max">최대 (MAX)</SelectItem>
|
||||
<SelectItem value="min">최소 (MIN)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 표시 라벨 */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-[10px]">표시 라벨</Label>
|
||||
<Input
|
||||
value={item.columnLabel || ""}
|
||||
onChange={(e) => updateItem(item.id, { columnLabel: e.target.value })}
|
||||
placeholder="표시될 라벨"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 표시 형식 */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-[10px]">표시 형식</Label>
|
||||
<Select
|
||||
value={item.format || "number"}
|
||||
onValueChange={(value) =>
|
||||
updateItem(item.id, { format: value as "number" | "currency" | "percent" })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="number">숫자</SelectItem>
|
||||
<SelectItem value="currency">통화</SelectItem>
|
||||
<SelectItem value="percent">퍼센트</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 접두사 */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-[10px]">접두사</Label>
|
||||
<Input
|
||||
value={item.prefix || ""}
|
||||
onChange={(e) => updateItem(item.id, { prefix: e.target.value })}
|
||||
placeholder="예: ₩"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 접미사 */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-[10px]">접미사</Label>
|
||||
<Input
|
||||
value={item.suffix || ""}
|
||||
onChange={(e) => updateItem(item.id, { suffix: e.target.value })}
|
||||
placeholder="예: 원, 개"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 스타일 설정 */}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold">스타일</h3>
|
||||
</div>
|
||||
<hr className="border-border" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">배경색</Label>
|
||||
<Input
|
||||
type="color"
|
||||
value={config.backgroundColor || "#f8fafc"}
|
||||
onChange={(e) => onChange({ backgroundColor: e.target.value })}
|
||||
className="h-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">모서리 둥글기</Label>
|
||||
<Input
|
||||
value={config.borderRadius || "6px"}
|
||||
onChange={(e) => onChange({ borderRadius: e.target.value })}
|
||||
placeholder="6px"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">라벨 색상</Label>
|
||||
<Input
|
||||
type="color"
|
||||
value={config.labelColor || "#64748b"}
|
||||
onChange={(e) => onChange({ labelColor: e.target.value })}
|
||||
className="h-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">값 색상</Label>
|
||||
<Input
|
||||
type="color"
|
||||
value={config.valueColor || "#0f172a"}
|
||||
onChange={(e) => onChange({ valueColor: e.target.value })}
|
||||
className="h-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user