From c9eacb8f4a025e12aa494c8efa678ed330783f88 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:00:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=93=A0=20=EC=88=AB=EC=9E=90?=
 =?UTF-8?q?=EC=97=90=20=EC=B2=9C=20=EB=8B=A8=EC=9C=84=20=EC=BD=A4=EB=A7=88?=
 =?UTF-8?q?=20=EC=9E=90=EB=8F=99=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- InteractiveDataTable: number/decimal 타입 셀에 천 단위 콤마 적용
- FlowWidget: 스텝 카운트, 데이터 셀, 페이지 정보에 천 단위 콤마 적용
- formatValue 함수로 숫자 자동 감지 및 포맷팅
- 문자열로 저장된 숫자도 자동으로 포맷팅 처리
- toLocaleString('ko-KR') 사용으로 한국식 숫자 표기
---
 .../screen/InteractiveDataTable.tsx           |  7 +++-
 .../components/screen/widgets/FlowWidget.tsx  | 40 ++++++++++++-------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 17662cac..1a6b4991 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1775,8 +1775,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
       case "number":
       case "decimal":
-        if (typeof value === "number") {
-          return value.toLocaleString();
+        if (value !== null && value !== undefined && value !== "") {
+          const numValue = typeof value === "string" ? parseFloat(value) : value;
+          if (!isNaN(numValue)) {
+            return numValue.toLocaleString("ko-KR");
+          }
         }
         break;
 
diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index bffae228..9cb0a207 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -58,6 +58,28 @@ export function FlowWidget({
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { user } = useAuth(); // 사용자 정보 가져오기
 
+  // 숫자 포맷팅 함수
+  const formatValue = (value: any): string => {
+    if (value === null || value === undefined || value === "") {
+      return "-";
+    }
+
+    // 숫자 타입이거나 숫자로 변환 가능한 문자열인 경우 포맷팅
+    if (typeof value === "number") {
+      return value.toLocaleString("ko-KR");
+    }
+
+    if (typeof value === "string") {
+      const numValue = parseFloat(value);
+      // 숫자로 변환 가능하고, 변환 후 원래 값과 같은 경우에만 포맷팅
+      if (!isNaN(numValue) && numValue.toString() === value.trim()) {
+        return numValue.toLocaleString("ko-KR");
+      }
+    }
+
+    return String(value);
+  };
+
   // 🆕 전역 상태 관리
   const setSelectedStep = useFlowStepStore((state) => state.setSelectedStep);
   const resetFlow = useFlowStepStore((state) => state.resetFlow);
@@ -698,7 +720,7 @@ export function FlowWidget({
                     }`}
                   >
                     <span className="text-sm font-medium sm:text-base">
-                      {stepCounts[step.id] || 0}
+                      {(stepCounts[step.id] || 0).toLocaleString("ko-KR")}
                     </span>
                     <span className="text-xs font-normal sm:text-sm">건</span>
                   </div>
@@ -884,13 +906,7 @@ export function FlowWidget({
                           {stepDataColumns.map((col) => (
                             <div key={col} className="flex justify-between gap-2 text-xs">
                               <span className="text-muted-foreground font-medium">{columnLabels[col] || col}:</span>
-                              <span className="text-foreground truncate">
-                                {row[col] !== null && row[col] !== undefined ? (
-                                  String(row[col])
-                                ) : (
-                                  <span className="text-muted-foreground">-</span>
-                                )}
-                              </span>
+                              <span className="text-foreground truncate">{formatValue(row[col])}</span>
                             </div>
                           ))}
                         </div>
@@ -941,11 +957,7 @@ export function FlowWidget({
                           )}
                           {stepDataColumns.map((col) => (
                             <TableCell key={col} className="h-16 border-b px-6 py-3 text-sm whitespace-nowrap">
-                              {row[col] !== null && row[col] !== undefined ? (
-                                String(row[col])
-                              ) : (
-                                <span className="text-muted-foreground">-</span>
-                              )}
+                              {formatValue(row[col])}
                             </TableCell>
                           ))}
                         </TableRow>
@@ -964,7 +976,7 @@ export function FlowWidget({
                 {/* 왼쪽: 페이지 정보 + 페이지 크기 선택 */}
                 <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4">
                   <div className="text-muted-foreground text-xs sm:text-sm">
-                    페이지 {stepDataPage} / {totalStepDataPages} (총 {stepData.length}건)
+                    페이지 {stepDataPage} / {totalStepDataPages} (총 {stepData.length.toLocaleString("ko-KR")}건)
                   </div>
                   <div className="flex items-center gap-2">
                     <span className="text-muted-foreground text-xs">표시 개수:</span>