From b4a1fe6889aea2b325b6cf500fcc8f12f9674759 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 5 Jan 2026 15:35:19 +0900
Subject: [PATCH] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=ED=8C=A8=EB=84=90=20=EA=B0=84=EC=86=8C=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/unified/UnifiedList.tsx   |  1 +
 .../config-panels/UnifiedListConfigPanel.tsx  | 88 ++++++++++++++-----
 2 files changed, 66 insertions(+), 23 deletions(-)

diff --git a/frontend/components/unified/UnifiedList.tsx b/frontend/components/unified/UnifiedList.tsx
index 4de69fd3..e159ec9d 100644
--- a/frontend/components/unified/UnifiedList.tsx
+++ b/frontend/components/unified/UnifiedList.tsx
@@ -41,6 +41,7 @@ export const UnifiedList = forwardRef<HTMLDivElement, UnifiedListProps>((props,
         align: "left" as const,
         order: index,
         isEntityJoin: col.isJoinColumn || false,
+        thousandSeparator: col.thousandSeparator !== false, // 천단위 구분자 (기본: true)
       })),
     [config.columns],
   );
diff --git a/frontend/components/unified/config-panels/UnifiedListConfigPanel.tsx b/frontend/components/unified/config-panels/UnifiedListConfigPanel.tsx
index 7325a3f1..8bec43ff 100644
--- a/frontend/components/unified/config-panels/UnifiedListConfigPanel.tsx
+++ b/frontend/components/unified/config-panels/UnifiedListConfigPanel.tsx
@@ -138,8 +138,14 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
   }, [tableName]);
 
   // 컬럼 설정
-  const configColumns: Array<{ key: string; title: string; width?: string; isJoinColumn?: boolean }> =
-    config.columns || [];
+  const configColumns: Array<{
+    key: string;
+    title: string;
+    width?: string;
+    isJoinColumn?: boolean;
+    inputType?: string;
+    thousandSeparator?: boolean;
+  }> = config.columns || [];
 
   // 컬럼이 추가되었는지 확인
   const isColumnAdded = (columnName: string) => {
@@ -154,16 +160,35 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
       updateConfig("columns", newColumns);
     } else {
       // 추가
+      const isNumberType = ["number", "decimal", "integer", "float", "double", "numeric", "currency"].includes(
+        column.inputType || "",
+      );
       const newColumn = {
         key: column.columnName,
         title: column.displayName,
         width: "",
         isJoinColumn: column.isJoinColumn || false,
+        inputType: column.inputType,
+        thousandSeparator: isNumberType ? true : undefined, // 숫자 타입은 기본적으로 천단위 구분자 사용
       };
       updateConfig("columns", [...configColumns, newColumn]);
     }
   };
 
+  // 컬럼 천단위 구분자 토글
+  const toggleThousandSeparator = (columnKey: string, checked: boolean) => {
+    const newColumns = configColumns.map((col) => (col.key === columnKey ? { ...col, thousandSeparator: checked } : col));
+    updateConfig("columns", newColumns);
+  };
+
+  // 숫자 타입 컬럼인지 확인
+  const isNumberColumn = (columnKey: string) => {
+    const colInfo = columns.find((c) => c.columnName === columnKey);
+    const configCol = configColumns.find((c) => c.key === columnKey);
+    const inputType = configCol?.inputType || colInfo?.inputType || "";
+    return ["number", "decimal", "integer", "float", "double", "numeric", "currency"].includes(inputType);
+  };
+
   // 컬럼 제목 수정
   const updateColumnTitle = (columnKey: string, title: string) => {
     const newColumns = configColumns.map((col) => (col.key === columnKey ? { ...col, title } : col));
@@ -387,29 +412,46 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
             <div className="max-h-40 space-y-1 overflow-y-auto">
               {configColumns.map((column, index) => {
                 const colInfo = columns.find((c) => c.columnName === column.key);
+                const showThousandSeparator = isNumberColumn(column.key);
                 return (
-                  <div key={column.key} className="bg-muted/30 flex items-center gap-2 rounded-md border p-2">
-                    <GripVertical className="text-muted-foreground h-3 w-3 cursor-grab" />
-                    {column.isJoinColumn ? (
-                      <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
-                    ) : (
-                      <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
+                  <div key={column.key} className="bg-muted/30 space-y-1.5 rounded-md border p-2">
+                    <div className="flex items-center gap-2">
+                      <GripVertical className="text-muted-foreground h-3 w-3 cursor-grab" />
+                      {column.isJoinColumn ? (
+                        <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                      ) : (
+                        <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
+                      )}
+                      <Input
+                        value={column.title}
+                        onChange={(e) => updateColumnTitle(column.key, e.target.value)}
+                        placeholder="제목"
+                        className="h-6 flex-1 text-xs"
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => toggleColumn(colInfo || { columnName: column.key, displayName: column.title })}
+                        className="text-destructive h-6 w-6 p-0"
+                      >
+                        ×
+                      </Button>
+                    </div>
+                    {/* 숫자 컬럼인 경우 천단위 구분자 옵션 표시 */}
+                    {showThousandSeparator && (
+                      <div className="ml-5 flex items-center gap-2">
+                        <Checkbox
+                          id={`thousand-${column.key}`}
+                          checked={column.thousandSeparator !== false}
+                          onCheckedChange={(checked) => toggleThousandSeparator(column.key, !!checked)}
+                          className="h-3 w-3"
+                        />
+                        <label htmlFor={`thousand-${column.key}`} className="text-muted-foreground text-[10px]">
+                          천단위 구분자
+                        </label>
+                      </div>
                     )}
-                    <Input
-                      value={column.title}
-                      onChange={(e) => updateColumnTitle(column.key, e.target.value)}
-                      placeholder="제목"
-                      className="h-6 flex-1 text-xs"
-                    />
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => toggleColumn(colInfo || { columnName: column.key, displayName: column.title })}
-                      className="text-destructive h-6 w-6 p-0"
-                    >
-                      ×
-                    </Button>
                   </div>
                 );
               })}