From 1d9634ac41b486f3bbd6eb847f362bc529acf073 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Fri, 31 Oct 2025 18:21:03 +0900
Subject: [PATCH 01/49] =?UTF-8?q?fix:=20=ED=99=94=EB=A9=B4=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5=20=ED=9B=84=20=EB=B2=84=ED=8A=BC=20=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=83=89=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 버그 수정
- 화면 저장 성공 모달의 버튼 텍스트가 검은색으로 표시되던 문제 해결
- '화면 목록으로 이동' 버튼에 text-white 추가
- '메뉴에 할당' 버튼에 text-white 추가
- '화면 교체' 버튼에 text-white 추가

🎨 변경 내용
- bg-green-600 → bg-green-600 text-white
- bg-blue-600 → bg-blue-600 text-white
- bg-orange-600 → bg-orange-600 text-white

📝 관련 파일
- frontend/components/screen/MenuAssignmentModal.tsx

✅ 결과
- 모든 버튼 텍스트가 흰색으로 정상 표시됨
---
 frontend/components/screen/MenuAssignmentModal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/components/screen/MenuAssignmentModal.tsx b/frontend/components/screen/MenuAssignmentModal.tsx
index 6e1c16cb..dafa1319 100644
--- a/frontend/components/screen/MenuAssignmentModal.tsx
+++ b/frontend/components/screen/MenuAssignmentModal.tsx
@@ -380,7 +380,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                       onClose();
                     }
                   }}
-                  className="bg-green-600 hover:bg-green-700"
+                  className="bg-green-600 text-white hover:bg-green-700"
                 >
                   <Monitor className="mr-2 h-4 w-4" />
                   화면 목록으로 이동
@@ -536,7 +536,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                 <Button
                   onClick={handleAssignScreen}
                   disabled={!selectedMenu || assigning}
-                  className="bg-blue-600 hover:bg-blue-700"
+                  className="bg-blue-600 text-white hover:bg-blue-700"
                 >
                   {assigning ? (
                     <>
@@ -616,7 +616,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                 await performAssignment(true);
               }}
               disabled={assigning}
-              className="bg-orange-600 hover:bg-orange-700"
+              className="bg-orange-600 text-white hover:bg-orange-700"
             >
               {assigning ? (
                 <>

From aef62454c247e7de9352c6a5d055b0d355b146cf Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Fri, 31 Oct 2025 18:27:34 +0900
Subject: [PATCH 02/49] =?UTF-8?q?fix:=20=EC=9E=90=EB=8F=99=20=EB=A6=AC?=
 =?UTF-8?q?=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8=20=ED=83=80=EC=9D=B4?=
 =?UTF-8?q?=EB=A8=B8=20=EC=A0=95=EB=A6=AC=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 버그 수정
- 화면 목록으로 이동 버튼 클릭 후에도 3초 타이머가 계속 실행되던 문제 해결
- 빠르게 버튼 클릭 후 다른 화면 진입 시 다시 튕겨나는 현상 수정

�� 변경 내용
- useRef로 타이머 참조 저장 (autoRedirectTimerRef)
- 모달이 닫힐 때 타이머 정리 (clearTimeout)
- 컴포넌트 언마운트 시 타이머 정리
- '화면 목록으로 이동' 버튼 클릭 시 타이머 즉시 정리

📝 기술적 개선
- setTimeout 타이머를 useRef로 관리
- useEffect cleanup 함수에서 타이머 정리
- 버튼 onClick에서 타이머 수동 정리

✅ 결과
- 버튼 클릭 시 타이머가 즉시 정리됨
- 다른 화면으로 이동 후 3초 뒤 튕겨나지 않음
- 메모리 누수 방지
---
 .../components/screen/MenuAssignmentModal.tsx | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/components/screen/MenuAssignmentModal.tsx b/frontend/components/screen/MenuAssignmentModal.tsx
index dafa1319..e04f3bda 100644
--- a/frontend/components/screen/MenuAssignmentModal.tsx
+++ b/frontend/components/screen/MenuAssignmentModal.tsx
@@ -46,6 +46,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
   const [assignmentSuccess, setAssignmentSuccess] = useState(false);
   const [assignmentMessage, setAssignmentMessage] = useState("");
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const autoRedirectTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   // 메뉴 목록 로드 (관리자 메뉴 + 사용자 메뉴)
   const loadMenus = async () => {
@@ -98,7 +99,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
     }
   };
 
-  // 모달이 열릴 때 메뉴 목록 로드
+  // 모달이 열릴 때 메뉴 목록 로드 및 정리
   useEffect(() => {
     if (isOpen) {
       loadMenus();
@@ -107,7 +108,21 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
       setSearchTerm("");
       setAssignmentSuccess(false);
       setAssignmentMessage("");
+    } else {
+      // 모달이 닫힐 때 타이머 정리
+      if (autoRedirectTimerRef.current) {
+        clearTimeout(autoRedirectTimerRef.current);
+        autoRedirectTimerRef.current = null;
+      }
     }
+    
+    // 컴포넌트 언마운트 시 타이머 정리
+    return () => {
+      if (autoRedirectTimerRef.current) {
+        clearTimeout(autoRedirectTimerRef.current);
+        autoRedirectTimerRef.current = null;
+      }
+    };
   }, [isOpen]);
 
   // 메뉴 선택 처리
@@ -208,7 +223,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
       }
 
       // 3초 후 자동으로 모달 닫고 화면 목록으로 이동
-      setTimeout(() => {
+      autoRedirectTimerRef.current = setTimeout(() => {
         onClose(); // 모달 닫기
         if (onBackToList) {
           onBackToList();
@@ -237,7 +252,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
     }
 
     // 3초 후 자동으로 모달 닫고 화면 목록으로 이동
-    setTimeout(() => {
+    autoRedirectTimerRef.current = setTimeout(() => {
       onClose(); // 모달 닫기
       if (onBackToList) {
         onBackToList();
@@ -374,6 +389,13 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
               <DialogFooter>
                 <Button
                   onClick={() => {
+                    // 타이머 정리
+                    if (autoRedirectTimerRef.current) {
+                      clearTimeout(autoRedirectTimerRef.current);
+                      autoRedirectTimerRef.current = null;
+                    }
+                    
+                    // 화면 목록으로 이동
                     if (onBackToList) {
                       onBackToList();
                     } else {

From 8e9daf5b22a15ed159db11287467d223dde97b1f Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 09:58:04 +0900
Subject: [PATCH 03/49] =?UTF-8?q?feat:=20=EC=88=98=EC=A0=95=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=9E=90=EB=8F=99=20=EB=8B=AB=EA=B8=B0=20=EB=B0=8F?=
 =?UTF-8?q?=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=83=88=EB=A1=9C=EA=B3=A0?=
 =?UTF-8?q?=EC=B9=A8=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- EditModal: 저장 완료 후 자동으로 닫히고 부모 테이블 새로고침
- buttonActions.ts: 저장 성공 후 closeEditModal 이벤트 발생
- InteractiveScreenViewerDynamic: onSave prop 추가하여 EditModal 연동
- InteractiveDataTable: EditModal 열 때 onSave 콜백으로 loadData 전달
- 두 가지 시나리오 모두 지원:
  1. InteractiveScreenViewerDynamic 버튼의 onSave 호출
  2. DynamicComponentRenderer 버튼의 buttonActions.ts 처리
---
 frontend/components/screen/EditModal.tsx      |  63 ++-
 .../screen/InteractiveDataTable.tsx           |  26 +-
 .../screen/InteractiveScreenViewerDynamic.tsx |  17 +-
 frontend/components/screen/ScreenDesigner.tsx |  38 +-
 frontend/lib/utils/buttonActions.ts           |   6 +-
 화면관리_및_테이블관리_개선사항_목록.md       | 386 ++++++++++++++++++
 6 files changed, 481 insertions(+), 55 deletions(-)
 create mode 100644 화면관리_및_테이블관리_개선사항_목록.md

diff --git a/frontend/components/screen/EditModal.tsx b/frontend/components/screen/EditModal.tsx
index 2d3fb513..76363e4f 100644
--- a/frontend/components/screen/EditModal.tsx
+++ b/frontend/components/screen/EditModal.tsx
@@ -102,13 +102,6 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
   useEffect(() => {
     const handleOpenEditModal = (event: CustomEvent) => {
       const { screenId, title, description, modalSize, editData, onSave } = event.detail;
-      console.log("🚀 EditModal 열기 이벤트 수신:", {
-        screenId,
-        title,
-        description,
-        modalSize,
-        editData,
-      });
 
       setModalState({
         isOpen: true,
@@ -126,7 +119,16 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
     };
 
     const handleCloseEditModal = () => {
-      console.log("🚪 EditModal 닫기 이벤트 수신");
+      // 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
+      if (modalState.onSave) {
+        try {
+          modalState.onSave();
+        } catch (callbackError) {
+          console.error("⚠️ onSave 콜백 에러:", callbackError);
+        }
+      }
+
+      // 모달 닫기
       handleClose();
     };
 
@@ -137,7 +139,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
       window.removeEventListener("openEditModal", handleOpenEditModal as EventListener);
       window.removeEventListener("closeEditModal", handleCloseEditModal);
     };
-  }, []);
+  }, [modalState.onSave]); // modalState.onSave를 의존성에 추가하여 최신 콜백 참조
 
   // 화면 데이터 로딩
   useEffect(() => {
@@ -211,12 +213,6 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
     }
 
     try {
-      console.log("💾 수정 저장 시작:", {
-        tableName: screenData.screenInfo.tableName,
-        formData,
-        originalData,
-      });
-
       // 변경된 필드만 추출
       const changedData: Record<string, any> = {};
       Object.keys(formData).forEach((key) => {
@@ -225,26 +221,33 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         }
       });
 
-      console.log("📝 변경된 필드:", changedData);
-
       if (Object.keys(changedData).length === 0) {
         toast.info("변경된 내용이 없습니다.");
         handleClose();
         return;
       }
 
+      // 기본키 확인 (id 또는 첫 번째 키)
+      const recordId = originalData.id || Object.values(originalData)[0];
+
       // UPDATE 액션 실행
-      const response = await dynamicFormApi.updateData(screenData.screenInfo.tableName, {
-        ...originalData, // 원본 데이터 (WHERE 조건용)
-        ...changedData, // 변경된 데이터만
-      });
+      const response = await dynamicFormApi.updateFormDataPartial(
+        recordId,
+        originalData,
+        changedData,
+        screenData.screenInfo.tableName,
+      );
 
       if (response.success) {
         toast.success("데이터가 수정되었습니다.");
 
-        // 부모 컴포넌트의 onSave 콜백 실행
+        // 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
         if (modalState.onSave) {
-          modalState.onSave();
+          try {
+            modalState.onSave();
+          } catch (callbackError) {
+            console.error("⚠️ onSave 콜백 에러:", callbackError);
+          }
         }
 
         handleClose();
@@ -335,16 +338,10 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
                     allComponents={screenData.components}
                     formData={formData}
                     onFormDataChange={(fieldName, value) => {
-                      console.log(`🎯 EditModal onFormDataChange 호출: ${fieldName} = "${value}"`);
-                      console.log("📋 현재 formData:", formData);
-                      setFormData((prev) => {
-                        const newFormData = {
-                          ...prev,
-                          [fieldName]: value,
-                        };
-                        console.log("📝 EditModal 업데이트된 formData:", newFormData);
-                        return newFormData;
-                      });
+                      setFormData((prev) => ({
+                        ...prev,
+                        [fieldName]: value,
+                      }));
                     }}
                     screenInfo={{
                       id: modalState.screenId!,
diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index b54df6ad..17662cac 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -769,7 +769,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     setShowSaveModal(true);
   }, [getDisplayColumns, generateAutoValue, component.addModalConfig]);
 
-  // 데이터 수정 핸들러 (SaveModal 사용)
+  // 데이터 수정 핸들러 (EditModal 사용)
   const handleEditData = useCallback(() => {
     if (selectedRows.size !== 1) return;
 
@@ -793,17 +793,25 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       initialData[col.columnName] = selectedRowData[col.columnName] || "";
     });
 
-    setEditFormData(initialData);
-    setEditingRowData(selectedRowData);
-
     // 수정 모달 설정에서 제목과 설명 가져오기
-    const editModalTitle = component.editModalConfig?.title || "";
+    const editModalTitle = component.editModalConfig?.title || "데이터 수정";
     const editModalDescription = component.editModalConfig?.description || "";
 
-    console.log("📝 수정 모달 설정:", { editModalTitle, editModalDescription });
-
-    setShowEditModal(true);
-  }, [selectedRows, data, getDisplayColumns, component.editModalConfig]);
+    // 전역 EditModal 열기 이벤트 발생
+    const event = new CustomEvent("openEditModal", {
+      detail: {
+        screenId,
+        title: editModalTitle,
+        description: editModalDescription,
+        modalSize: "lg",
+        editData: initialData,
+        onSave: () => {
+          loadData(); // 테이블 데이터 새로고침
+        },
+      },
+    });
+    window.dispatchEvent(event);
+  }, [selectedRows, data, getDisplayColumns, component.addModalConfig, component.editModalConfig, loadData]);
 
   // 수정 폼 데이터 변경 핸들러
   const handleEditFormChange = useCallback((columnName: string, value: any) => {
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index 7ed39353..e85aab58 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -38,6 +38,7 @@ interface InteractiveScreenViewerProps {
     id: number;
     tableName?: string;
   };
+  onSave?: () => Promise<void>;
 }
 
 export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerProps> = ({
@@ -47,6 +48,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   onFormDataChange,
   hideLabel = false,
   screenInfo,
+  onSave,
 }) => {
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { userName, user } = useAuth();
@@ -204,8 +206,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
             // 테이블 컴포넌트는 자체적으로 loadData 호출
           }}
           onClose={() => {
-            // 화면 닫기 로직 (필요시 구현)
-            console.log("🚪 화면 닫기 요청");
+            // buttonActions.ts가 이미 처리함
           }}
         />
       );
@@ -299,6 +300,18 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
     // 버튼 액션 핸들러들
     const handleSaveAction = async () => {
+      // EditModal에서 전달된 onSave가 있으면 우선 사용 (수정 모달)
+      if (onSave) {
+        try {
+          await onSave();
+        } catch (error) {
+          console.error("저장 오류:", error);
+          toast.error("저장 중 오류가 발생했습니다.");
+        }
+        return;
+      }
+
+      // 일반 저장 액션 (신규 생성)
       if (!screenInfo?.tableName) {
         toast.error("테이블명이 설정되지 않았습니다.");
         return;
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 5a11f325..51364429 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -381,19 +381,37 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
   // 실행취소
   const undo = useCallback(() => {
-    if (historyIndex > 0) {
-      setHistoryIndex((prev) => prev - 1);
-      setLayout(history[historyIndex - 1]);
-    }
-  }, [history, historyIndex]);
+    setHistoryIndex((prevIndex) => {
+      if (prevIndex > 0) {
+        const newIndex = prevIndex - 1;
+        setHistory((prevHistory) => {
+          if (prevHistory[newIndex]) {
+            setLayout(prevHistory[newIndex]);
+          }
+          return prevHistory;
+        });
+        return newIndex;
+      }
+      return prevIndex;
+    });
+  }, []);
 
   // 다시실행
   const redo = useCallback(() => {
-    if (historyIndex < history.length - 1) {
-      setHistoryIndex((prev) => prev + 1);
-      setLayout(history[historyIndex + 1]);
-    }
-  }, [history, historyIndex]);
+    setHistoryIndex((prevIndex) => {
+      let newIndex = prevIndex;
+      setHistory((prevHistory) => {
+        if (prevIndex < prevHistory.length - 1) {
+          newIndex = prevIndex + 1;
+          if (prevHistory[newIndex]) {
+            setLayout(prevHistory[newIndex]);
+          }
+        }
+        return prevHistory;
+      });
+      return newIndex;
+    });
+  }, []);
 
   // 컴포넌트 속성 업데이트
   const updateComponentProperty = useCallback(
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index 4c376b09..8b805d93 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -234,9 +234,13 @@ export class ButtonActionExecutor {
         throw new Error("저장에 필요한 정보가 부족합니다. (테이블명 또는 화면ID 누락)");
       }
 
-      // 테이블과 플로우 모두 새로고침
+      // 테이블과 플로우 새로고침 (모달 닫기 전에 실행)
       context.onRefresh?.();
       context.onFlowRefresh?.();
+
+      // 저장 성공 후 EditModal 닫기 이벤트 발생
+      window.dispatchEvent(new CustomEvent("closeEditModal"));
+
       return true;
     } catch (error) {
       console.error("저장 오류:", error);
diff --git a/화면관리_및_테이블관리_개선사항_목록.md b/화면관리_및_테이블관리_개선사항_목록.md
new file mode 100644
index 00000000..666f41f1
--- /dev/null
+++ b/화면관리_및_테이블관리_개선사항_목록.md
@@ -0,0 +1,386 @@
+# 화면관리 및 테이블관리 시스템 개선사항 목록
+
+## 문서 정보
+- **작성일**: 2025-11-03
+- **목적**: 사용자 피드백 기반 개선사항 정리
+- **우선순위**: 높음
+
+---
+
+## 1. 화면관리 (Screen Management) 개선사항
+
+### 1.1 리스트 컬럼 Width 조절 기능
+**현재 문제**: 리스트 컬럼의 너비가 고정되어 있어 사용자가 조절할 수 없음
+
+**요구사항**:
+- 사용자가 각 컬럼의 너비를 드래그로 조절할 수 있어야 함
+- 조절된 너비는 저장되어 다음 접속 시에도 유지되어야 함
+- 최소/최대 너비 제한 필요
+
+**구현 방안**:
+- 컬럼 헤더에 리사이저 핸들 추가
+- `ComponentData` 인터페이스에 `columnWidths` 속성 추가
+- PropertiesPanel에서 개별 컬럼 너비 설정 UI 제공
+
+**관련 파일**:
+- `frontend/components/screen/ScreenDesigner.tsx`
+- `frontend/components/screen/RealtimePreview.tsx`
+- `frontend/types/screen.ts`
+
+---
+
+### 1.2 되돌리기(Undo) 단축키 에러 수정
+**현재 문제**: 되돌리기 단축키(Ctrl+Z/Cmd+Z) 실행 시 에러 발생
+
+**요구사항**:
+- 되돌리기 기능이 안정적으로 작동해야 함
+- 다시 실행(Redo) 기능도 함께 제공 (Ctrl+Y/Cmd+Shift+Z)
+
+**구현 방안**:
+- 히스토리 스택 구현 (최대 50개 상태 저장)
+- `useUndo` 커스텀 훅 생성
+- 키보드 단축키 이벤트 리스너 추가
+
+**관련 파일**:
+- `frontend/hooks/useUndo.ts` (신규 생성)
+- `frontend/components/screen/ScreenDesigner.tsx`
+
+---
+
+### 1.3 리스트 헤더 스타일 개선
+**현재 문제**: 리스트 헤더가 눈에 잘 띄지 않음
+
+**요구사항**:
+- 헤더가 시각적으로 구분되어야 함
+- 배경색, 폰트 굵기, 테두리 등으로 강조
+
+**구현 방안**:
+- 헤더 기본 스타일 변경:
+  - 배경색: `bg-muted` → `bg-primary/10`
+  - 폰트: `font-medium` → `font-semibold`
+  - 하단 테두리: `border-b-2 border-primary`
+
+**관련 파일**:
+- `frontend/components/screen/RealtimePreview.tsx`
+- `frontend/components/screen-viewer/InteractiveScreenViewer.tsx`
+
+---
+
+### 1.4 텍스트 줄바꿈 문제 방지
+**현재 문제**: 화면을 줄였을 때 텍스트가 2줄로 나뉘거나 깨지는 현상
+
+**요구사항**:
+- 텍스트가 항상 1줄로 표시되어야 함
+- 긴 텍스트는 말줄임표(...) 처리
+
+**구현 방안**:
+- 모든 텍스트 요소에 다음 클래스 적용:
+  ```tsx
+  className="truncate whitespace-nowrap overflow-hidden"
+  ```
+- 툴팁으로 전체 텍스트 표시
+
+**관련 파일**:
+- 모든 컴포넌트의 텍스트 렌더링 부분
+
+---
+
+### 1.5 수정 모달 자동 닫기
+**현재 문제**: 수정 완료 후 모달이 자동으로 닫히지 않음
+
+**요구사항**:
+- 수정 완료 시 모달이 즉시 닫혀야 함
+- 성공 메시지 표시 후 닫기
+
+**구현 방안**:
+```typescript
+const handleUpdate = async () => {
+  const result = await updateData(formData);
+  if (result.success) {
+    toast.success("수정이 완료되었습니다");
+    setIsModalOpen(false); // 모달 닫기
+    refreshList(); // 목록 새로고침
+  }
+};
+```
+
+**관련 파일**:
+- `frontend/components/screen-viewer/InteractiveScreenViewer.tsx`
+
+---
+
+### 1.6 테이블 Align 조절 기능
+**현재 문제**: 테이블 컬럼의 정렬(align)을 사용자가 조절할 수 없음
+
+**요구사항**:
+- 각 컬럼의 정렬을 left/center/right로 설정 가능해야 함
+- 숫자 타입은 기본적으로 right 정렬
+
+**구현 방안**:
+- `TableColumnConfig` 인터페이스에 `align` 속성 추가
+- PropertiesPanel에서 정렬 선택 UI 제공
+- 컬럼 타입별 기본 정렬 설정
+
+**관련 파일**:
+- `frontend/types/screen.ts`
+- `frontend/components/screen/PropertiesPanel.tsx`
+
+---
+
+### 1.7 숫자 천 단위 콤마 표시
+**현재 문제**: 숫자가 콤마 없이 표시됨
+
+**요구사항**:
+- 모든 숫자는 천 단위마다 콤마(,)를 찍어야 함
+- 예: 1000000 → 1,000,000
+
+**구현 방안**:
+```typescript
+// 유틸리티 함수 생성
+export const formatNumber = (value: number | string): string => {
+  const num = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(num)) return "0";
+  return new Intl.NumberFormat("ko-KR").format(num);
+};
+```
+
+**관련 파일**:
+- `frontend/lib/utils/numberFormat.ts` (신규 생성)
+- 모든 숫자 표시 컴포넌트
+
+---
+
+### 1.8 Drilldown UI 개선
+**현재 문제**: 화면이 횡으로 너무 길게 나열됨
+
+**요구사항**:
+- 계층적 구조로 정보 표시
+- 펼치기/접기 기능으로 공간 절약
+
+**구현 방안**:
+- Accordion 컴포넌트 활용
+- 탭 네비게이션 구조 적용
+- 마스터-디테일 레이아웃 패턴
+
+**관련 파일**:
+- `frontend/components/screen/ScreenDesigner.tsx`
+- `frontend/components/ui/accordion.tsx`
+
+---
+
+## 2. 테이블 관리 (Table Management) 개선사항
+
+### 2.1 테이블 기본 정보 선택 기능
+**현재 문제**: 테이블 기본 정보를 사용자가 선택할 수 없음
+
+**요구사항**:
+- 테이블 생성/수정 시 다음 정보를 선택 가능해야 함:
+  - 테이블 타입 (마스터/트랜잭션/코드)
+  - 카테고리
+  - 로그 사용 여부
+  - 버전 관리 여부
+  - 소프트 삭제 여부
+
+**구현 방안**:
+- `TableManagement.tsx`에 선택 UI 추가
+- `CREATE TABLE` DDL 자동 생성 시 옵션 반영
+
+**관련 파일**:
+- `frontend/components/table/TableManagement.tsx`
+- `backend-node/src/controllers/tableController.ts`
+
+---
+
+### 2.2 컬럼 추가 기능
+**현재 문제**: 기존 테이블에 새 컬럼을 추가하는 기능 부족
+
+**요구사항**:
+- 테이블 수정 시 컬럼을 동적으로 추가할 수 있어야 함
+- `ALTER TABLE ADD COLUMN` DDL 자동 생성
+- 컬럼 순서 조정 기능
+
+**구현 방안**:
+```typescript
+// 컬럼 추가 API
+POST /api/table-management/tables/:tableName/columns
+{
+  "columnName": "new_column",
+  "dataType": "VARCHAR(100)",
+  "nullable": true,
+  "defaultValue": null
+}
+```
+
+**관련 파일**:
+- `frontend/components/table/TableManagement.tsx`
+- `backend-node/src/controllers/tableController.ts`
+- `backend-node/src/services/ddlExecutionService.ts`
+
+---
+
+### 2.3 테이블 복제 기능
+**현재 문제**: 기존 테이블의 구조를 재사용하기 어려움
+
+**요구사항**:
+- 기존 테이블을 복제하여 새 테이블 생성
+- 다음 정보를 복사:
+  - 컬럼 구조 (이름, 타입, 제약조건)
+  - 인덱스 정의
+  - 외래키 관계 (선택적)
+- 데이터는 복사하지 않음 (구조만)
+
+**구현 방안**:
+```typescript
+// 테이블 복제 API
+POST /api/table-management/tables/:sourceTableName/clone
+{
+  "newTableName": "cloned_table",
+  "includeIndexes": true,
+  "includeForeignKeys": false,
+  "copyData": false
+}
+```
+
+**구현 단계**:
+1. 원본 테이블 정보 조회 (INFORMATION_SCHEMA)
+2. DDL 스크립트 생성
+3. 새 테이블 생성
+4. 인덱스 및 제약조건 추가
+5. 감사 로그 기록
+
+**관련 파일**:
+- `frontend/components/table/TableManagement.tsx`
+- `backend-node/src/controllers/tableController.ts`
+- `backend-node/src/services/ddlExecutionService.ts`
+
+**참고 문서**:
+- `/Users/kimjuseok/ERP-node/테이블_복제_기능_구현_계획서.md`
+
+---
+
+### 2.4 채번 Rule 관리 기능
+**현재 문제**: 자동 채번 규칙을 사용자가 관리할 수 없음
+
+**요구사항**:
+- 채번 규칙 생성/수정/삭제 UI
+- 규칙 형식:
+  - 접두사 (예: "PROD-")
+  - 날짜 포맷 (예: "YYYYMMDD")
+  - 일련번호 자릿수 (예: 5자리 → 00001)
+  - 구분자 (예: "-")
+- 예시: `PROD-20251103-00001`
+
+**구현 방안**:
+```typescript
+interface NumberingRule {
+  id: string;
+  ruleName: string;
+  prefix: string;
+  dateFormat?: "YYYY" | "YYYYMM" | "YYYYMMDD" | "YYYYMMDD-HH";
+  sequenceDigits: number;
+  separator: string;
+  resetPeriod: "none" | "daily" | "monthly" | "yearly";
+  currentSequence: number;
+  tableName: string;
+  columnName: string;
+}
+```
+
+**관련 파일**:
+- `frontend/components/table/NumberingRuleManagement.tsx` (신규 생성)
+- `backend-node/src/controllers/numberingRuleController.ts` (신규 생성)
+- `backend-node/src/services/numberingRuleService.ts` (신규 생성)
+
+---
+
+## 3. 제어 관리 (Flow Management) 개선사항
+
+### 3.1 제목 클릭 시 노드 선택 해제
+**현재 문제**: 제목을 입력할 때 백스페이스를 누르면 노드가 삭제됨
+
+**요구사항**:
+- 제목(플로우명) 입력란 클릭 시 노드 선택이 해제되어야 함
+- 백스페이스 키가 텍스트 입력으로만 작동해야 함
+
+**구현 방안**:
+```typescript
+const handleTitleClick = (e: React.MouseEvent) => {
+  e.stopPropagation(); // 이벤트 전파 중지
+  setSelectedNodes([]); // 노드 선택 해제
+};
+
+const handleTitleKeyDown = (e: React.KeyboardEvent) => {
+  e.stopPropagation(); // 백스페이스 키가 노드 삭제로 전파되지 않도록
+};
+
+<Input
+  value={flowName}
+  onClick={handleTitleClick}
+  onKeyDown={handleTitleKeyDown}
+  onChange={(e) => setFlowName(e.target.value)}
+/>
+```
+
+**관련 파일**:
+- `frontend/components/flow/FlowDesigner.tsx`
+- `frontend/components/flow/FlowCanvas.tsx`
+
+---
+
+## 4. 우선순위 및 구현 일정
+
+### 높음 (즉시 수정 필요)
+1. **되돌리기 단축키 에러 수정** - 기능 오류
+2. **수정 모달 자동 닫기** - 사용자 경험 저해
+3. **제어관리 제목 입력 문제** - 데이터 손실 위험
+4. **숫자 천 단위 콤마 표시** - 가독성 문제
+
+### 중간 (2주 내 완료)
+5. **리스트 컬럼 Width 조절**
+6. **리스트 헤더 스타일 개선**
+7. **텍스트 줄바꿈 문제 방지**
+8. **테이블 Align 조절**
+9. **컬럼 추가 기능**
+
+### 낮음 (기능 추가)
+10. **테이블 기본 정보 선택**
+11. **테이블 복제 기능**
+12. **Drilldown UI 개선**
+13. **채번 Rule 관리**
+
+---
+
+## 5. 테스트 계획
+
+각 개선사항 완료 시 다음을 확인:
+
+### 기능 테스트
+- [ ] 새 기능이 정상 작동함
+- [ ] 기존 기능에 영향 없음
+- [ ] 에러 처리가 적절함
+
+### 사용자 경험 테스트
+- [ ] UI가 직관적임
+- [ ] 반응 속도가 빠름
+- [ ] 모바일/태블릿 대응
+
+### 성능 테스트
+- [ ] 대량 데이터 처리 시 성능 저하 없음
+- [ ] 메모리 누수 없음
+
+---
+
+## 6. 참고 문서
+
+- [화면관리 시스템 현황](화면관리_및_테이블관리_개선사항_목록.md)
+- [테이블 복제 기능 계획서](테이블_복제_기능_구현_계획서.md)
+- [Shadcn/ui 레이아웃 패턴](docs/shadcn-ui-레이아웃-패턴-분석-보고서.md)
+
+---
+
+## 변경 이력
+
+| 날짜 | 작성자 | 내용 |
+|------|--------|------|
+| 2025-11-03 | 개발팀 | 초안 작성 |
+

From 2ddda380f21d6b16ee2a838740076f5bd9a3a9be Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 09:58:44 +0900
Subject: [PATCH 04/49] =?UTF-8?q?fix:=20=EC=A0=9C=EC=96=B4=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EC=A0=9C=EB=AA=A9=20=EC=9E=85=EB=A0=A5=20=EC=8B=9C?=
 =?UTF-8?q?=20=EB=B0=B1=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=EB=A1=9C=20?=
 =?UTF-8?q?=EB=85=B8=EB=93=9C=EA=B0=80=20=EC=82=AD=EC=A0=9C=EB=90=98?=
 =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- FlowToolbar의 플로우 이름 입력 필드에 onKeyDown 이벤트 핸들러 추가
- e.stopPropagation()으로 키 이벤트가 FlowEditor로 전파되지 않도록 차단
- FlowEditor의 Backspace/Delete 키 처리가 입력 필드에 영향을 주지 않도록 수정
---
 frontend/components/dataflow/node-editor/FlowToolbar.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/components/dataflow/node-editor/FlowToolbar.tsx b/frontend/components/dataflow/node-editor/FlowToolbar.tsx
index f266218a..d837d355 100644
--- a/frontend/components/dataflow/node-editor/FlowToolbar.tsx
+++ b/frontend/components/dataflow/node-editor/FlowToolbar.tsx
@@ -116,6 +116,11 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
         <Input
           value={flowName}
           onChange={(e) => setFlowName(e.target.value)}
+          onKeyDown={(e) => {
+            // 입력 필드에서 키 이벤트가 FlowEditor로 전파되지 않도록 방지
+            // FlowEditor의 Backspace/Delete 키로 노드가 삭제되는 것을 막음
+            e.stopPropagation();
+          }}
           className="h-8 w-[200px] text-sm"
           placeholder="플로우 이름"
         />

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 05/49] =?UTF-8?q?feat:=20=EB=AA=A8=EB=93=A0=20=EC=88=AB?=
 =?UTF-8?q?=EC=9E=90=EC=97=90=20=EC=B2=9C=20=EB=8B=A8=EC=9C=84=20=EC=BD=A4?=
 =?UTF-8?q?=EB=A7=88=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>

From c9905a6dea1d53a77c3f8f986698f9bc99fe05ca Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:07:32 +0900
Subject: [PATCH 06/49] =?UTF-8?q?debug:=20=EC=88=AB=EC=9E=90=20=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=BC=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20=EB=94=94=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EB=A1=9C=EA=B7=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 어떤 컬럼이 숫자 포맷팅을 시도하는지 확인
- widgetType과 실제 값의 타입을 콘솔에 출력
- 콤마가 안 찍히는 컬럼 원인 파악용
---
 frontend/components/screen/InteractiveDataTable.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 1a6b4991..d5c96785 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1775,6 +1775,12 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
       case "number":
       case "decimal":
+        console.log(`🔢 숫자 컬럼 포맷팅:`, {
+          columnName: column.columnName,
+          widgetType: column.widgetType,
+          value,
+          valueType: typeof value,
+        });
         if (value !== null && value !== undefined && value !== "") {
           const numValue = typeof value === "string" ? parseFloat(value) : value;
           if (!isNaN(numValue)) {

From 7b676a6affff4f84282aefbeee5887e43551a725 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:09:33 +0900
Subject: [PATCH 07/49] =?UTF-8?q?fix:=20TableListComponent=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EC=88=AB=EC=9E=90=20=ED=83=80=EC=9E=85=20=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=BC=20=EC=B2=9C=20=EB=8B=A8=EC=9C=84=20=EC=BD=A4=EB=A7=88?=
 =?UTF-8?q?=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- inputType이 number 또는 decimal인 컬럼에 천 단위 콤마 자동 적용
- 문자열로 저장된 숫자도 parseFloat 후 포맷팅 처리
- format 속성보다 inputType을 우선 체크하도록 수정
---
 .../components/table-list/TableListComponent.tsx      | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 9ee27c36..2b0cf501 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -647,6 +647,17 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         if (convertedValue !== value) return convertedValue;
       }
 
+      // inputType 기반 포맷팅 (우선순위)
+      if (column.inputType === "number" || column.inputType === "decimal") {
+        if (value !== null && value !== undefined && value !== "") {
+          const numValue = typeof value === "string" ? parseFloat(value) : value;
+          if (!isNaN(numValue)) {
+            return numValue.toLocaleString("ko-KR");
+          }
+        }
+        return String(value);
+      }
+
       switch (column.format) {
         case "date":
           if (value) {

From 68aafb3732eedeeafec8bf98f6ec18cb9b68e625 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:10:22 +0900
Subject: [PATCH 08/49] =?UTF-8?q?debug:=20TableListComponent=20formatCellV?=
 =?UTF-8?q?alue=20=EB=94=94=EB=B2=84=EA=B7=B8=20=EB=A1=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 각 컬럼의 inputType, format, value 확인용
- 숫자 포맷팅이 안 되는 원인 파악
---
 .../components/table-list/TableListComponent.tsx      | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 2b0cf501..02705896 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -619,6 +619,17 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   const formatCellValue = useCallback(
     (value: any, column: ColumnConfig, rowData?: Record<string, any>) => {
+      // 디버그: 첫 번째 데이터 행에서만 로그 출력
+      if (rowData && Object.keys(rowData)[0]) {
+        console.log(`🔍 formatCellValue 호출:`, {
+          columnName: column.columnName,
+          inputType: column.inputType,
+          format: column.format,
+          value,
+          valueType: typeof value,
+        });
+      }
+
       if (value === null || value === undefined) return "-";
 
       // 🎯 엔티티 컬럼 표시 설정이 있는 경우

From 1c571ee3c3cbc42d120dcd5f21b6fe0ce0e78f76 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:14:32 +0900
Subject: [PATCH 09/49] =?UTF-8?q?feat:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=EC=9D=98=20=EC=9E=85=EB=A0=A5=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EA=B8=B0=EB=B0=98=20=EC=9E=90=EB=8F=99=20=EC=88=AB?=
 =?UTF-8?q?=EC=9E=90=20=ED=8F=AC=EB=A7=B7=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TableListComponent: table_type_columns의 input_type 정보를 가져와서 숫자 포맷팅
- getColumnInputTypes API 추가로 컬럼별 입력 타입 조회
- columnMeta에 inputType 포함하여 formatCellValue에서 사용
- 테이블 관리에서 설정한 입력 타입(number/decimal)에 따라 자동으로 천 단위 콤마 표시
- 근본적인 해결: 컬럼명 기반이 아닌 실제 설정값 기반 포맷팅
---
 .../screen/InteractiveDataTable.tsx           |  6 ----
 frontend/lib/api/screen.ts                    |  6 ++++
 .../table-list/TableListComponent.tsx         | 35 +++++++++++--------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index d5c96785..1a6b4991 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1775,12 +1775,6 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
       case "number":
       case "decimal":
-        console.log(`🔢 숫자 컬럼 포맷팅:`, {
-          columnName: column.columnName,
-          widgetType: column.widgetType,
-          value,
-          valueType: typeof value,
-        });
         if (value !== null && value !== undefined && value !== "") {
           const numValue = typeof value === "string" ? parseFloat(value) : value;
           if (!isNaN(numValue)) {
diff --git a/frontend/lib/api/screen.ts b/frontend/lib/api/screen.ts
index 695e5a51..3c885a8b 100644
--- a/frontend/lib/api/screen.ts
+++ b/frontend/lib/api/screen.ts
@@ -242,6 +242,12 @@ export const tableTypeApi = {
     return data.columns || data || [];
   },
 
+  // 컬럼 입력 타입 정보 조회
+  getColumnInputTypes: async (tableName: string): Promise<any[]> => {
+    const response = await apiClient.get(`/table-management/tables/${tableName}/web-types`);
+    return response.data.data || [];
+  },
+
   // 컬럼 웹 타입 설정
   setColumnWebType: async (
     tableName: string,
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 02705896..35920020 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -284,20 +284,29 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       }
 
       const columns = await tableTypeApi.getColumns(tableConfig.selectedTable);
+      
+      // 컬럼 입력 타입 정보 가져오기
+      const inputTypes = await tableTypeApi.getColumnInputTypes(tableConfig.selectedTable);
+      const inputTypeMap: Record<string, string> = {};
+      inputTypes.forEach((col: any) => {
+        inputTypeMap[col.columnName] = col.inputType;
+      });
 
       tableColumnCache.set(cacheKey, {
         columns,
+        inputTypes,
         timestamp: Date.now(),
       });
 
       const labels: Record<string, string> = {};
-      const meta: Record<string, { webType?: string; codeCategory?: string }> = {};
+      const meta: Record<string, { webType?: string; codeCategory?: string; inputType?: string }> = {};
 
       columns.forEach((col: any) => {
         labels[col.columnName] = col.displayName || col.comment || col.columnName;
         meta[col.columnName] = {
           webType: col.webType,
           codeCategory: col.codeCategory,
+          inputType: inputTypeMap[col.columnName],
         };
       });
 
@@ -619,17 +628,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   const formatCellValue = useCallback(
     (value: any, column: ColumnConfig, rowData?: Record<string, any>) => {
-      // 디버그: 첫 번째 데이터 행에서만 로그 출력
-      if (rowData && Object.keys(rowData)[0]) {
-        console.log(`🔍 formatCellValue 호출:`, {
-          columnName: column.columnName,
-          inputType: column.inputType,
-          format: column.format,
-          value,
-          valueType: typeof value,
-        });
-      }
-
       if (value === null || value === undefined) return "-";
 
       // 🎯 엔티티 컬럼 표시 설정이 있는 경우
@@ -658,8 +656,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         if (convertedValue !== value) return convertedValue;
       }
 
-      // inputType 기반 포맷팅 (우선순위)
-      if (column.inputType === "number" || column.inputType === "decimal") {
+      // inputType 기반 포맷팅 (columnMeta에서 가져온 inputType 우선)
+      const inputType = meta?.inputType || column.inputType;
+      if (inputType === "number" || inputType === "decimal") {
         if (value !== null && value !== undefined && value !== "") {
           const numValue = typeof value === "string" ? parseFloat(value) : value;
           if (!isNaN(numValue)) {
@@ -670,6 +669,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       }
 
       switch (column.format) {
+        case "number":
+          if (value !== null && value !== undefined && value !== "") {
+            const numValue = typeof value === "string" ? parseFloat(value) : value;
+            if (!isNaN(numValue)) {
+              return numValue.toLocaleString("ko-KR");
+            }
+          }
+          return String(value);
         case "date":
           if (value) {
             try {

From 8a77e6d33cec06d22752eb858e48a1d7ea83f12b Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:32:08 +0900
Subject: [PATCH 10/49] =?UTF-8?q?fix:=20getColumnInputTypes=EA=B0=80=20col?=
 =?UTF-8?q?umn=5Flabels=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=A1=B0=ED=9A=8C?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기존: table_type_columns 테이블 조회 (잘못된 테이블)
- 수정: column_labels 테이블 조회 (올바른 테이블)
- 이제 테이블 관리에서 설정한 input_type이 정확하게 반영됨
---
 .../src/services/tableManagementService.ts    | 20 +++++++++----------
 .../table-list/TableListComponent.tsx         |  9 +++++++++
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/backend-node/src/services/tableManagementService.ts b/backend-node/src/services/tableManagementService.ts
index 10de1e73..608f8b96 100644
--- a/backend-node/src/services/tableManagementService.ts
+++ b/backend-node/src/services/tableManagementService.ts
@@ -2980,20 +2980,20 @@ export class TableManagementService {
     try {
       logger.info(`컬럼 입력타입 정보 조회: ${tableName}`);
 
-      // table_type_columns에서 입력타입 정보 조회
+      // column_labels에서 입력타입 정보 조회
       const rawInputTypes = await query<any>(
         `SELECT 
-          ttc.column_name as "columnName",
-          ttc.column_name as "displayName",
-          COALESCE(ttc.input_type, 'text') as "inputType",
-          COALESCE(ttc.detail_settings, '{}') as "detailSettings",
-          ttc.is_nullable as "isNullable",
+          cl.column_name as "columnName",
+          cl.column_label as "displayName",
+          COALESCE(cl.input_type, 'text') as "inputType",
+          '{}'::jsonb as "detailSettings",
+          ic.is_nullable as "isNullable",
           ic.data_type as "dataType"
-        FROM table_type_columns ttc
+        FROM column_labels cl
         LEFT JOIN information_schema.columns ic 
-          ON ttc.table_name = ic.table_name AND ttc.column_name = ic.column_name
-        WHERE ttc.table_name = $1
-        ORDER BY ttc.display_order, ttc.column_name`,
+          ON cl.table_name = ic.table_name AND cl.column_name = ic.column_name
+        WHERE cl.table_name = $1
+        ORDER BY cl.column_name`,
         [tableName]
       );
 
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 35920020..435d0bd3 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -287,9 +287,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       
       // 컬럼 입력 타입 정보 가져오기
       const inputTypes = await tableTypeApi.getColumnInputTypes(tableConfig.selectedTable);
+      console.log("📋 테이블의 inputType 정보:", tableConfig.selectedTable, inputTypes);
       const inputTypeMap: Record<string, string> = {};
       inputTypes.forEach((col: any) => {
         inputTypeMap[col.columnName] = col.inputType;
+        console.log(`  - ${col.columnName}: ${col.inputType}`);
       });
 
       tableColumnCache.set(cacheKey, {
@@ -659,6 +661,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       // inputType 기반 포맷팅 (columnMeta에서 가져온 inputType 우선)
       const inputType = meta?.inputType || column.inputType;
       if (inputType === "number" || inputType === "decimal") {
+        console.log(`✅ 숫자 포맷팅 적용: ${column.columnName} = ${value} (inputType: ${inputType})`);
         if (value !== null && value !== undefined && value !== "") {
           const numValue = typeof value === "string" ? parseFloat(value) : value;
           if (!isNaN(numValue)) {
@@ -666,6 +669,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           }
         }
         return String(value);
+      } else if (value !== null && value !== undefined && value !== "") {
+        // 숫자처럼 보이지만 inputType이 설정 안된 경우
+        const numValue = typeof value === "string" ? parseFloat(value) : value;
+        if (!isNaN(numValue) && typeof value === "string" && /^\d+$/.test(value)) {
+          console.log(`⚠️ ${column.columnName}은 숫자 값이지만 inputType이 '${inputType}'로 설정되어 있어 포맷팅 안 됨`);
+        }
       }
 
       switch (column.format) {

From dcf07fdd5e4ade9169dbb8a632715e2b2bb45018 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:45:16 +0900
Subject: [PATCH 11/49] =?UTF-8?q?chore:=20TableListComponent=20=EB=94=94?=
 =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EB=A1=9C=EA=B7=B8=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 숫자 포맷팅 확인 완료
- column_labels 테이블 조회로 정확한 input_type 가져오기 검증 완료
---
 .../components/table-list/TableListComponent.tsx         | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 435d0bd3..35920020 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -287,11 +287,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       
       // 컬럼 입력 타입 정보 가져오기
       const inputTypes = await tableTypeApi.getColumnInputTypes(tableConfig.selectedTable);
-      console.log("📋 테이블의 inputType 정보:", tableConfig.selectedTable, inputTypes);
       const inputTypeMap: Record<string, string> = {};
       inputTypes.forEach((col: any) => {
         inputTypeMap[col.columnName] = col.inputType;
-        console.log(`  - ${col.columnName}: ${col.inputType}`);
       });
 
       tableColumnCache.set(cacheKey, {
@@ -661,7 +659,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       // inputType 기반 포맷팅 (columnMeta에서 가져온 inputType 우선)
       const inputType = meta?.inputType || column.inputType;
       if (inputType === "number" || inputType === "decimal") {
-        console.log(`✅ 숫자 포맷팅 적용: ${column.columnName} = ${value} (inputType: ${inputType})`);
         if (value !== null && value !== undefined && value !== "") {
           const numValue = typeof value === "string" ? parseFloat(value) : value;
           if (!isNaN(numValue)) {
@@ -669,12 +666,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           }
         }
         return String(value);
-      } else if (value !== null && value !== undefined && value !== "") {
-        // 숫자처럼 보이지만 inputType이 설정 안된 경우
-        const numValue = typeof value === "string" ? parseFloat(value) : value;
-        if (!isNaN(numValue) && typeof value === "string" && /^\d+$/.test(value)) {
-          console.log(`⚠️ ${column.columnName}은 숫자 값이지만 inputType이 '${inputType}'로 설정되어 있어 포맷팅 안 됨`);
-        }
       }
 
       switch (column.format) {

From b40e3d4b8b85c95427e9d3272ba09ab1ff5a162b Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:46:17 +0900
Subject: [PATCH 12/49] =?UTF-8?q?feat:=20InteractiveDataTable=20=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=BC=20=EB=84=88=EB=B9=84=20=EB=93=9C=EB=9E=98=EA=B7=B8=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=88=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 각 컬럼 헤더 오른쪽에 리사이즈 핸들 추가
- 드래그로 컬럼 너비를 자유롭게 조절 가능
- 최소 너비 80px 보장
- 마지막 컬럼 제외하고 모든 컬럼에 리사이즈 핸들 표시
- hover 시 파란색으로 강조되어 UX 개선
---
 .../screen/InteractiveDataTable.tsx           | 52 +++++++++++++++----
 1 file changed, 43 insertions(+), 9 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 1a6b4991..354b5a90 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -106,6 +106,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const [totalPages, setTotalPages] = useState(1);
   const [total, setTotal] = useState(0);
   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
 
   // SaveModal 상태 (등록/수정 통합)
   const [showSaveModal, setShowSaveModal] = useState(false);
@@ -1932,15 +1933,48 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                           />
                         </TableHead>
                       )}
-                      {visibleColumns.map((column: DataTableColumn) => (
-                        <TableHead
-                          key={column.id}
-                          className="bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700"
-                          style={{ width: `${((column.gridColumns || 2) / totalGridColumns) * 100}%` }}
-                        >
-                          {column.label}
-                        </TableHead>
-                      ))}
+                      {visibleColumns.map((column: DataTableColumn, columnIndex) => {
+                        const columnWidth = columnWidths[column.id];
+                        const defaultWidth = `${((column.gridColumns || 2) / totalGridColumns) * 100}%`;
+                        
+                        return (
+                          <TableHead
+                            key={column.id}
+                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700"
+                            style={{ 
+                              width: columnWidth ? `${columnWidth}px` : defaultWidth,
+                              minWidth: '80px'
+                            }}
+                          >
+                            {column.label}
+                            {/* 리사이즈 핸들 */}
+                            {columnIndex < visibleColumns.length - 1 && (
+                              <div
+                                className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-blue-500"
+                                onMouseDown={(e) => {
+                                  e.preventDefault();
+                                  const startX = e.clientX;
+                                  const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100);
+                                  
+                                  const handleMouseMove = (moveEvent: MouseEvent) => {
+                                    const diff = moveEvent.clientX - startX;
+                                    const newWidth = Math.max(80, startWidth + diff);
+                                    setColumnWidths(prev => ({ ...prev, [column.id]: newWidth }));
+                                  };
+                                  
+                                  const handleMouseUp = () => {
+                                    document.removeEventListener('mousemove', handleMouseMove);
+                                    document.removeEventListener('mouseup', handleMouseUp);
+                                  };
+                                  
+                                  document.addEventListener('mousemove', handleMouseMove);
+                                  document.addEventListener('mouseup', handleMouseUp);
+                                }}
+                              />
+                            )}
+                          </TableHead>
+                        );
+                      })}
                       {/* 자동 파일 컬럼 표시 제거됨 - 명시적으로 추가된 파일 컬럼만 표시 */}
                     </TableRow>
                   </TableHeader>

From a3a4664bb0f07e0c4074a8e20de22755c26f8f0c Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:49:09 +0900
Subject: [PATCH 13/49] =?UTF-8?q?fix:=20=EC=BB=AC=EB=9F=BC=20=EB=A6=AC?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=A4=91=20=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=84=A0=ED=83=9D=20=EB=B0=A9=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 컬럼 헤더에 select-none, userSelect: 'none' 추가
- 드래그 중 document.body.userSelect = 'none'으로 전역 텍스트 선택 차단
- 드래그 완료 후 userSelect 복원
- 드래그 중 cursor를 col-resize로 고정하여 UX 개선
---
 .../components/screen/InteractiveDataTable.tsx     | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 354b5a90..3b6299f9 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1940,10 +1940,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                         return (
                           <TableHead
                             key={column.id}
-                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700"
+                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none"
                             style={{ 
                               width: columnWidth ? `${columnWidth}px` : defaultWidth,
-                              minWidth: '80px'
+                              minWidth: '80px',
+                              userSelect: 'none'
                             }}
                           >
                             {column.label}
@@ -1956,13 +1957,22 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                                   const startX = e.clientX;
                                   const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100);
                                   
+                                  // 드래그 중 텍스트 선택 방지
+                                  document.body.style.userSelect = 'none';
+                                  document.body.style.cursor = 'col-resize';
+                                  
                                   const handleMouseMove = (moveEvent: MouseEvent) => {
+                                    moveEvent.preventDefault();
                                     const diff = moveEvent.clientX - startX;
                                     const newWidth = Math.max(80, startWidth + diff);
                                     setColumnWidths(prev => ({ ...prev, [column.id]: newWidth }));
                                   };
                                   
                                   const handleMouseUp = () => {
+                                    // 텍스트 선택 복원
+                                    document.body.style.userSelect = '';
+                                    document.body.style.cursor = '';
+                                    
                                     document.removeEventListener('mousemove', handleMouseMove);
                                     document.removeEventListener('mouseup', handleMouseUp);
                                   };

From 56cd2a940792178d7025c9109baa03606733e3aa Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:51:10 +0900
Subject: [PATCH 14/49] =?UTF-8?q?fix:=20=EC=BB=AC=EB=9F=BC=20=EB=A6=AC?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=8B=9C=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=A0=84=ED=8C=8C=20=EB=B0=A9=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- e.stopPropagation() 추가로 리사이즈 핸들 드래그 시 상위 컴포넌트로 이벤트 전파 차단
- 화면 디자이너에서 컴포넌트가 의도치 않게 이동되는 문제 해결
---
 frontend/components/screen/InteractiveDataTable.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 3b6299f9..1eab54ed 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1954,6 +1954,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                                 className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-blue-500"
                                 onMouseDown={(e) => {
                                   e.preventDefault();
+                                  e.stopPropagation(); // 상위 컴포넌트 드래그 이벤트 방지
+                                  
                                   const startX = e.clientX;
                                   const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100);
                                   

From 107f722e7ac79252a8e26c2d62865c689d54d550 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:52:28 +0900
Subject: [PATCH 15/49] =?UTF-8?q?fix:=20=EC=8B=A4=EC=A0=9C=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=EC=97=90=EC=84=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EB=B9=84=ED=99=9C?=
 =?UTF-8?q?=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- RealtimePreviewDynamic의 draggable을 isDesignMode 조건부로 변경
- 디자인 모드(화면 편집)에서만 드래그 가능
- 실제 화면(프리뷰/실행)에서는 드래그 불가능
- onDragStart, onDragEnd도 조건부로 적용
---
 frontend/components/screen/RealtimePreviewDynamic.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index f4e0fec9..72739e71 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -275,9 +275,9 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
       style={{ ...baseStyle, ...selectionStyle }}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
-      draggable
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
+      draggable={isDesignMode} // 디자인 모드에서만 드래그 가능
+      onDragStart={isDesignMode ? handleDragStart : undefined}
+      onDragEnd={isDesignMode ? handleDragEnd : undefined}
     >
       {/* 동적 컴포넌트 렌더링 */}
       <div

From 787bfd363faa7472ab1b0816a57085c609f8ce81 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:54:23 +0900
Subject: [PATCH 16/49] =?UTF-8?q?feat:=20TableListComponent=20=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=BC=20=EB=84=88=EB=B9=84=20=EB=93=9C=EB=9E=98=EA=B7=B8=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=88=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 실제 화면에서 사용되는 TableListComponent에도 리사이즈 기능 추가
- InteractiveDataTable과 동일한 리사이즈 핸들 구현
- columnWidths 상태로 각 컬럼 너비 관리
- 드래그 중 텍스트 선택 방지 및 이벤트 전파 차단
- 최소 너비 80px 보장
---
 .../table-list/TableListComponent.tsx         | 95 ++++++++++++++-----
 1 file changed, 70 insertions(+), 25 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 35920020..c957e3cc 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -244,6 +244,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
   const [isDragging, setIsDragging] = useState(false);
   const [draggedRowIndex, setDraggedRowIndex] = useState<number | null>(null);
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
   const [isAllSelected, setIsAllSelected] = useState(false);
 
   // 필터 설정 관련 상태
@@ -1018,31 +1019,75 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 className="sticky top-0 z-10 bg-background"
               >
                 <tr className="h-10 border-b border-border sm:h-12">
-                  {visibleColumns.map((column) => (
-                    <th
-                      key={column.columnName}
-                      className={cn(
-                        "h-10 px-2 py-2 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background sm:h-12 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap",
-                        column.sortable && "cursor-pointer"
-                      )}
-                      style={{
-                        textAlign: column.align || "left",
-                        width: `${100 / visibleColumns.length}%`, // 컬럼 수에 따라 균등 분배
-                      }}
-                      onClick={() => column.sortable && handleSort(column.columnName)}
-                    >
-                      {column.columnName === "__checkbox__" ? (
-                        renderCheckboxHeader()
-                      ) : (
-                        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                          <span>{columnLabels[column.columnName] || column.displayName}</span>
-                          {column.sortable && sortColumn === column.columnName && (
-                            <span>{sortDirection === "asc" ? "↑" : "↓"}</span>
-                          )}
-                        </div>
-                      )}
-                    </th>
-                  ))}
+                  {visibleColumns.map((column, columnIndex) => {
+                    const columnWidth = columnWidths[column.columnName];
+                    const defaultWidth = `${100 / visibleColumns.length}%`;
+                    
+                    return (
+                      <th
+                        key={column.columnName}
+                        className={cn(
+                          "relative h-10 px-2 py-2 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background select-none sm:h-12 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap",
+                          column.sortable && "cursor-pointer"
+                        )}
+                        style={{
+                          textAlign: column.align || "left",
+                          width: columnWidth ? `${columnWidth}px` : defaultWidth,
+                          minWidth: '80px',
+                          userSelect: 'none'
+                        }}
+                        onClick={() => column.sortable && handleSort(column.columnName)}
+                      >
+                        {column.columnName === "__checkbox__" ? (
+                          renderCheckboxHeader()
+                        ) : (
+                          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                            <span>{columnLabels[column.columnName] || column.displayName}</span>
+                            {column.sortable && sortColumn === column.columnName && (
+                              <span>{sortDirection === "asc" ? "↑" : "↓"}</span>
+                            )}
+                          </div>
+                        )}
+                        {/* 리사이즈 핸들 */}
+                        {columnIndex < visibleColumns.length - 1 && (
+                          <div
+                            className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-blue-500"
+                            onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
+                            onMouseDown={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              
+                              const startX = e.clientX;
+                              const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100);
+                              
+                              // 드래그 중 텍스트 선택 방지
+                              document.body.style.userSelect = 'none';
+                              document.body.style.cursor = 'col-resize';
+                              
+                              const handleMouseMove = (moveEvent: MouseEvent) => {
+                                moveEvent.preventDefault();
+                                const diff = moveEvent.clientX - startX;
+                                const newWidth = Math.max(80, startWidth + diff);
+                                setColumnWidths(prev => ({ ...prev, [column.columnName]: newWidth }));
+                              };
+                              
+                              const handleMouseUp = () => {
+                                // 텍스트 선택 복원
+                                document.body.style.userSelect = '';
+                                document.body.style.cursor = '';
+                                
+                                document.removeEventListener('mousemove', handleMouseMove);
+                                document.removeEventListener('mouseup', handleMouseUp);
+                              };
+                              
+                              document.addEventListener('mousemove', handleMouseMove);
+                              document.addEventListener('mouseup', handleMouseUp);
+                            }}
+                          />
+                        )}
+                      </th>
+                    );
+                  })}
                 </tr>
               </thead>
 

From 4a5c21a3ba45aeee703467c4e9a7f15f8fe6b50c Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 11:51:48 +0900
Subject: [PATCH 17/49] =?UTF-8?q?fix:=20=EB=A6=AC=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EC=A6=88=20=ED=95=B8=EB=93=A4=20=ED=81=B4=EB=A6=AD=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 핸들 너비를 1px에서 2px로 증가
- z-index: 20 추가로 다른 요소 위에 표시
- padding과 negative margin으로 클릭 영역 확대 (좌우 4px씩)
- onClick에 stopPropagation 추가하여 정렬 클릭 방지
- 더 쉽게 클릭하고 드래그할 수 있도록 개선
---
 frontend/components/screen/InteractiveDataTable.tsx           | 4 +++-
 .../lib/registry/components/table-list/TableListComponent.tsx | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 1eab54ed..8a31756c 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1951,7 +1951,9 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                             {/* 리사이즈 핸들 */}
                             {columnIndex < visibleColumns.length - 1 && (
                               <div
-                                className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-blue-500"
+                                className="absolute right-0 top-0 h-full w-2 cursor-col-resize hover:bg-blue-500 z-20"
+                                style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
+                                onClick={(e) => e.stopPropagation()}
                                 onMouseDown={(e) => {
                                   e.preventDefault();
                                   e.stopPropagation(); // 상위 컴포넌트 드래그 이벤트 방지
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index c957e3cc..5dd90227 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1051,7 +1051,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         {/* 리사이즈 핸들 */}
                         {columnIndex < visibleColumns.length - 1 && (
                           <div
-                            className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-blue-500"
+                            className="absolute right-0 top-0 h-full w-2 cursor-col-resize hover:bg-blue-500 z-20"
+                            style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
                             onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
                             onMouseDown={(e) => {
                               e.preventDefault();

From 9f501aa83919a1f3fa09ad2ec67fa40c6860a3f9 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 11:54:34 +0900
Subject: [PATCH 18/49] =?UTF-8?q?debug:=20=EB=A6=AC=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EC=A6=88=20=ED=95=B8=EB=93=A4=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=94=94=EB=B2=84=EA=B7=B8=20=EB=A1=9C=EA=B7=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 마우스다운, 드래그, 마우스업 이벤트 로그
- 시작 너비, 이동 거리, 새 너비 출력
- 이벤트가 제대로 발생하는지 확인용
---
 .../lib/registry/components/table-list/TableListComponent.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 5dd90227..a341d086 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1055,11 +1055,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
                             onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
                             onMouseDown={(e) => {
+                              console.log('🖱️ 리사이즈 핸들 마우스다운', column.columnName);
                               e.preventDefault();
                               e.stopPropagation();
                               
                               const startX = e.clientX;
                               const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100);
+                              console.log('시작 너비:', startWidth);
                               
                               // 드래그 중 텍스트 선택 방지
                               document.body.style.userSelect = 'none';
@@ -1069,10 +1071,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 moveEvent.preventDefault();
                                 const diff = moveEvent.clientX - startX;
                                 const newWidth = Math.max(80, startWidth + diff);
+                                console.log('드래그 중:', { diff, newWidth });
                                 setColumnWidths(prev => ({ ...prev, [column.columnName]: newWidth }));
                               };
                               
                               const handleMouseUp = () => {
+                                console.log('마우스 업!');
                                 // 텍스트 선택 복원
                                 document.body.style.userSelect = '';
                                 document.body.style.cursor = '';

From 48cacf0409d79b0cf09c653cfb088de9155db5c5 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 11:55:45 +0900
Subject: [PATCH 19/49] =?UTF-8?q?perf:=20requestAnimationFrame=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=A6=AC=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=84=B1?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 드래그 중 과도한 리렌더링 방지
- requestAnimationFrame으로 throttling 적용
- 초당 60프레임으로 제한하여 부드러운 리사이즈
- cancelAnimationFrame으로 중복 업데이트 방지
---
 .../table-list/TableListComponent.tsx         | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index a341d086..18d3340c 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1067,16 +1067,30 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               document.body.style.userSelect = 'none';
                               document.body.style.cursor = 'col-resize';
                               
+                              let rafId: number | null = null;
+                              
                               const handleMouseMove = (moveEvent: MouseEvent) => {
                                 moveEvent.preventDefault();
-                                const diff = moveEvent.clientX - startX;
-                                const newWidth = Math.max(80, startWidth + diff);
-                                console.log('드래그 중:', { diff, newWidth });
-                                setColumnWidths(prev => ({ ...prev, [column.columnName]: newWidth }));
+                                
+                                if (rafId) {
+                                  cancelAnimationFrame(rafId);
+                                }
+                                
+                                rafId = requestAnimationFrame(() => {
+                                  const diff = moveEvent.clientX - startX;
+                                  const newWidth = Math.max(80, startWidth + diff);
+                                  console.log('드래그 중:', { diff, newWidth });
+                                  setColumnWidths(prev => ({ ...prev, [column.columnName]: newWidth }));
+                                });
                               };
                               
                               const handleMouseUp = () => {
                                 console.log('마우스 업!');
+                                
+                                if (rafId) {
+                                  cancelAnimationFrame(rafId);
+                                }
+                                
                                 // 텍스트 선택 복원
                                 document.body.style.userSelect = '';
                                 document.body.style.cursor = '';

From 97ce6d36913e9358ee5e505bf1b080f2fa89c18d Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 11:57:01 +0900
Subject: [PATCH 20/49] =?UTF-8?q?fix:=20useRef=EB=A1=9C=20=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=BC=20=EB=A6=AC=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=84=B1?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B7=BC=EB=B3=B8=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- columnRefs로 DOM 요소 직접 참조
- 드래그 중에는 DOM 스타일만 변경 (리렌더링 없음)
- 드래그 완료 시에만 state 업데이트
- 불필요한 컴포넌트 재초기화 완전 제거
- 부드러운 리사이즈 경험 제공
---
 .../table-list/TableListComponent.tsx         | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 18d3340c..6b9f1a8f 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -245,6 +245,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [isDragging, setIsDragging] = useState(false);
   const [draggedRowIndex, setDraggedRowIndex] = useState<number | null>(null);
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+  const columnRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
   const [isAllSelected, setIsAllSelected] = useState(false);
 
   // 필터 설정 관련 상태
@@ -1026,6 +1027,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                     return (
                       <th
                         key={column.columnName}
+                        ref={(el) => (columnRefs.current[column.columnName] = el)}
                         className={cn(
                           "relative h-10 px-2 py-2 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background select-none sm:h-12 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap",
                           column.sortable && "cursor-pointer"
@@ -1059,36 +1061,36 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               e.preventDefault();
                               e.stopPropagation();
                               
+                              const thElement = columnRefs.current[column.columnName];
+                              if (!thElement) return;
+                              
                               const startX = e.clientX;
-                              const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100);
+                              const startWidth = columnWidth || thElement.offsetWidth;
                               console.log('시작 너비:', startWidth);
                               
                               // 드래그 중 텍스트 선택 방지
                               document.body.style.userSelect = 'none';
                               document.body.style.cursor = 'col-resize';
                               
-                              let rafId: number | null = null;
-                              
                               const handleMouseMove = (moveEvent: MouseEvent) => {
                                 moveEvent.preventDefault();
                                 
-                                if (rafId) {
-                                  cancelAnimationFrame(rafId);
-                                }
+                                const diff = moveEvent.clientX - startX;
+                                const newWidth = Math.max(80, startWidth + diff);
                                 
-                                rafId = requestAnimationFrame(() => {
-                                  const diff = moveEvent.clientX - startX;
-                                  const newWidth = Math.max(80, startWidth + diff);
-                                  console.log('드래그 중:', { diff, newWidth });
-                                  setColumnWidths(prev => ({ ...prev, [column.columnName]: newWidth }));
-                                });
+                                // 직접 DOM 스타일 변경 (리렌더링 없음)
+                                if (thElement) {
+                                  thElement.style.width = `${newWidth}px`;
+                                }
                               };
                               
                               const handleMouseUp = () => {
                                 console.log('마우스 업!');
                                 
-                                if (rafId) {
-                                  cancelAnimationFrame(rafId);
+                                // 최종 너비를 state에 저장
+                                if (thElement) {
+                                  const finalWidth = thElement.offsetWidth;
+                                  setColumnWidths(prev => ({ ...prev, [column.columnName]: finalWidth }));
                                 }
                                 
                                 // 텍스트 선택 복원

From c8540b170e128ae151a32424b68ef511ba3fab63 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 12:01:47 +0900
Subject: [PATCH 21/49] =?UTF-8?q?fix:=20table-layout=20fixed=EB=A1=9C=20?=
 =?UTF-8?q?=EC=BB=AC=EB=9F=BC=20=EB=A6=AC=EC=82=AC=EC=9D=B4=EC=A6=88=20?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- tableLayout: 'fixed' 추가로 컬럼 너비가 DOM 스타일로 제어 가능하도록 설정
- table-layout: auto(기본값)에서는 브라우저가 자동으로 너비를 재조정하여 무시됨
- fixed 모드에서는 설정한 너비가 정확하게 적용됨
---
 .../components/table-list/TableListComponent.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 6b9f1a8f..81597a83 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1013,6 +1013,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               style={{
                 borderCollapse: "collapse",
                 width: "100%",
+                tableLayout: "fixed",
               }}
             >
               {/* 헤더 (sticky) */}
@@ -1057,26 +1058,31 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
                             onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
                             onMouseDown={(e) => {
-                              console.log('🖱️ 리사이즈 핸들 마우스다운', column.columnName);
+                              console.log('🖱️ 마우스 다운!', column.columnName);
                               e.preventDefault();
                               e.stopPropagation();
                               
                               const thElement = columnRefs.current[column.columnName];
-                              if (!thElement) return;
+                              if (!thElement) {
+                                console.error('❌ thElement를 찾을 수 없음!');
+                                return;
+                              }
                               
                               const startX = e.clientX;
                               const startWidth = columnWidth || thElement.offsetWidth;
-                              console.log('시작 너비:', startWidth);
+                              console.log('✅ 시작:', { startX, startWidth });
                               
                               // 드래그 중 텍스트 선택 방지
                               document.body.style.userSelect = 'none';
                               document.body.style.cursor = 'col-resize';
                               
                               const handleMouseMove = (moveEvent: MouseEvent) => {
+                                console.log('🐭 마우스 무브!', moveEvent.clientX);
                                 moveEvent.preventDefault();
                                 
                                 const diff = moveEvent.clientX - startX;
                                 const newWidth = Math.max(80, startWidth + diff);
+                                console.log('📏 새 너비:', newWidth);
                                 
                                 // 직접 DOM 스타일 변경 (리렌더링 없음)
                                 if (thElement) {
@@ -1085,8 +1091,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               };
                               
                               const handleMouseUp = () => {
-                                console.log('마우스 업!');
-                                
+                                console.log('⬆️ 마우스 업!');
                                 // 최종 너비를 state에 저장
                                 if (thElement) {
                                   const finalWidth = thElement.offsetWidth;
@@ -1101,6 +1106,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 document.removeEventListener('mouseup', handleMouseUp);
                               };
                               
+                              console.log('👂 이벤트 리스너 등록');
                               document.addEventListener('mousemove', handleMouseMove);
                               document.addEventListener('mouseup', handleMouseUp);
                             }}

From 3ada095e43a2055364825af49c6613ad7c70fb81 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 12:06:57 +0900
Subject: [PATCH 22/49] =?UTF-8?q?fix:=20=EC=BB=AC=EB=9F=BC=20=EB=A6=AC?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=B5=9C=EC=86=8C=20=EB=84=88?=
 =?UTF-8?q?=EB=B9=84=2080px=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EB=94=94?=
 =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EB=A1=9C=EA=B7=B8=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CSS minWidth 제거 (table-layout: fixed와 충돌)
- JavaScript에서 Math.max(80, width)로 최소 너비 보장
- 드래그 중과 마우스 업 시 모두 80px 최소값 적용
- 모든 디버그 로그 제거
- 깔끔하고 부드러운 리사이즈 완성
---
 .../components/table-list/TableListComponent.tsx   | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 81597a83..4fa655e2 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1036,7 +1036,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         style={{
                           textAlign: column.align || "left",
                           width: columnWidth ? `${columnWidth}px` : defaultWidth,
-                          minWidth: '80px',
                           userSelect: 'none'
                         }}
                         onClick={() => column.sortable && handleSort(column.columnName)}
@@ -1058,31 +1057,24 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
                             onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
                             onMouseDown={(e) => {
-                              console.log('🖱️ 마우스 다운!', column.columnName);
                               e.preventDefault();
                               e.stopPropagation();
                               
                               const thElement = columnRefs.current[column.columnName];
-                              if (!thElement) {
-                                console.error('❌ thElement를 찾을 수 없음!');
-                                return;
-                              }
+                              if (!thElement) return;
                               
                               const startX = e.clientX;
                               const startWidth = columnWidth || thElement.offsetWidth;
-                              console.log('✅ 시작:', { startX, startWidth });
                               
                               // 드래그 중 텍스트 선택 방지
                               document.body.style.userSelect = 'none';
                               document.body.style.cursor = 'col-resize';
                               
                               const handleMouseMove = (moveEvent: MouseEvent) => {
-                                console.log('🐭 마우스 무브!', moveEvent.clientX);
                                 moveEvent.preventDefault();
                                 
                                 const diff = moveEvent.clientX - startX;
                                 const newWidth = Math.max(80, startWidth + diff);
-                                console.log('📏 새 너비:', newWidth);
                                 
                                 // 직접 DOM 스타일 변경 (리렌더링 없음)
                                 if (thElement) {
@@ -1091,10 +1083,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               };
                               
                               const handleMouseUp = () => {
-                                console.log('⬆️ 마우스 업!');
                                 // 최종 너비를 state에 저장
                                 if (thElement) {
-                                  const finalWidth = thElement.offsetWidth;
+                                  const finalWidth = Math.max(80, thElement.offsetWidth);
                                   setColumnWidths(prev => ({ ...prev, [column.columnName]: finalWidth }));
                                 }
                                 
@@ -1106,7 +1097,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 document.removeEventListener('mouseup', handleMouseUp);
                               };
                               
-                              console.log('👂 이벤트 리스너 등록');
                               document.addEventListener('mousemove', handleMouseMove);
                               document.addEventListener('mouseup', handleMouseUp);
                             }}

From 511884f323e3fc29aec40a603194eb644c5771bc Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 12:13:56 +0900
Subject: [PATCH 23/49] =?UTF-8?q?fix:=20=EC=BB=AC=EB=9F=BC=20=EC=B4=88?=
 =?UTF-8?q?=EA=B8=B0=20=EB=84=88=EB=B9=84=20=EC=9D=B4=ED=95=98=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A4=84=EC=96=B4=EB=93=A4=EC=A7=80=20=EC=95=8A=EB=8A=94=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ 해결 방법:
- 백분율 defaultWidth 제거, 초기값은 undefined로 설정
- ref callback에서 첫 렌더링 시 실제 offsetWidth 측정
- 측정한 실제 너비를 columnWidths state에 저장
- 이후 드래그로 80px까지 줄일 수 있음

✅ 적용 파일:
- TableListComponent.tsx (실제 화면)
- InteractiveDataTable.tsx (디자인 모드)

✅ 기술적 개선:
- table-layout: fixed + 동적 초기 너비 측정
- DOM 직접 조작으로 부드러운 리사이즈
- 최소 80px 보장 (Math.max)
---
 .../screen/InteractiveDataTable.tsx           | 38 +++++++++++++++----
 .../table-list/TableListComponent.tsx         | 17 +++++++--
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 8a31756c..c9b24892 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1921,7 +1921,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           {visibleColumns.length > 0 ? (
             <>
               <div className="overflow-hidden rounded-lg border border-gray-200/60 bg-white shadow-sm">
-                <Table>
+                <Table style={{ tableLayout: 'fixed' }}>
                   <TableHeader>
                     <TableRow>
                       {/* 체크박스 컬럼 (삭제 기능이 활성화된 경우) */}
@@ -1935,15 +1935,25 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                       )}
                       {visibleColumns.map((column: DataTableColumn, columnIndex) => {
                         const columnWidth = columnWidths[column.id];
-                        const defaultWidth = `${((column.gridColumns || 2) / totalGridColumns) * 100}%`;
                         
                         return (
                           <TableHead
                             key={column.id}
+                            ref={(el) => {
+                              // 첫 렌더링 시 실제 너비를 측정해서 상태에 저장
+                              if (el && !columnWidth) {
+                                const measuredWidth = el.offsetWidth;
+                                if (measuredWidth > 0) {
+                                  setColumnWidths(prev => ({
+                                    ...prev,
+                                    [column.id]: measuredWidth
+                                  }));
+                                }
+                              }
+                            }}
                             className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none"
                             style={{ 
-                              width: columnWidth ? `${columnWidth}px` : defaultWidth,
-                              minWidth: '80px',
+                              width: columnWidth ? `${columnWidth}px` : undefined,
                               userSelect: 'none'
                             }}
                           >
@@ -1956,10 +1966,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                                 onClick={(e) => e.stopPropagation()}
                                 onMouseDown={(e) => {
                                   e.preventDefault();
-                                  e.stopPropagation(); // 상위 컴포넌트 드래그 이벤트 방지
+                                  e.stopPropagation();
+                                  
+                                  const thElement = e.currentTarget.parentElement as HTMLTableCellElement;
+                                  if (!thElement) return;
                                   
                                   const startX = e.clientX;
-                                  const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100);
+                                  const startWidth = columnWidth || thElement.offsetWidth;
                                   
                                   // 드래그 중 텍스트 선택 방지
                                   document.body.style.userSelect = 'none';
@@ -1967,12 +1980,23 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                                   
                                   const handleMouseMove = (moveEvent: MouseEvent) => {
                                     moveEvent.preventDefault();
+                                    
                                     const diff = moveEvent.clientX - startX;
                                     const newWidth = Math.max(80, startWidth + diff);
-                                    setColumnWidths(prev => ({ ...prev, [column.id]: newWidth }));
+                                    
+                                    // 직접 DOM 스타일 변경 (리렌더링 없음)
+                                    if (thElement) {
+                                      thElement.style.width = `${newWidth}px`;
+                                    }
                                   };
                                   
                                   const handleMouseUp = () => {
+                                    // 최종 너비를 state에 저장
+                                    if (thElement) {
+                                      const finalWidth = Math.max(80, thElement.offsetWidth);
+                                      setColumnWidths(prev => ({ ...prev, [column.id]: finalWidth }));
+                                    }
+                                    
                                     // 텍스트 선택 복원
                                     document.body.style.userSelect = '';
                                     document.body.style.cursor = '';
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 4fa655e2..6a753734 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1023,19 +1023,30 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 <tr className="h-10 border-b border-border sm:h-12">
                   {visibleColumns.map((column, columnIndex) => {
                     const columnWidth = columnWidths[column.columnName];
-                    const defaultWidth = `${100 / visibleColumns.length}%`;
                     
                     return (
                       <th
                         key={column.columnName}
-                        ref={(el) => (columnRefs.current[column.columnName] = el)}
+                        ref={(el) => {
+                          columnRefs.current[column.columnName] = el;
+                          // 첫 렌더링 시 실제 너비를 측정해서 상태에 저장
+                          if (el && !columnWidth) {
+                            const measuredWidth = el.offsetWidth;
+                            if (measuredWidth > 0) {
+                              setColumnWidths(prev => ({
+                                ...prev,
+                                [column.columnName]: measuredWidth
+                              }));
+                            }
+                          }
+                        }}
                         className={cn(
                           "relative h-10 px-2 py-2 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background select-none sm:h-12 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap",
                           column.sortable && "cursor-pointer"
                         )}
                         style={{
                           textAlign: column.align || "left",
-                          width: columnWidth ? `${columnWidth}px` : defaultWidth,
+                          width: columnWidth ? `${columnWidth}px` : undefined,
                           userSelect: 'none'
                         }}
                         onClick={() => column.sortable && handleSort(column.columnName)}

From 3332c87293f6ced6337c8f5d66e06b7510b8ca18 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 12:18:50 +0900
Subject: [PATCH 24/49] =?UTF-8?q?fix:=20=EC=BB=AC=EB=9F=BC=20=EB=A6=AC?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EB=AC=B4=ED=95=9C=20=EB=A6=AC?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=B0=8F=20=EC=9B=90=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=20=EB=B3=B5=EA=B7=80=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ref callback에서 state 업데이트 제거
- useEffect + setTimeout으로 초기 너비 측정 (한 번만)
- hasInitializedWidths useRef로 중복 측정 방지
- columnRefs useRef로 DOM 직접 참조
- 드래그 중 리렌더링 없이 DOM만 직접 조작
- 부드럽고 정확한 리사이즈 구현 완료
---
 .../screen/InteractiveDataTable.tsx           | 46 +++++++++++++------
 .../table-list/TableListComponent.tsx         | 44 ++++++++++++------
 2 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index c9b24892..5d31da83 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -107,6 +107,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const [total, setTotal] = useState(0);
   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+  const hasInitializedWidthsRef = useRef(false);
+  const columnRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
 
   // SaveModal 상태 (등록/수정 통합)
   const [showSaveModal, setShowSaveModal] = useState(false);
@@ -409,6 +411,35 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   // 페이지 크기 설정
   const pageSize = component.pagination?.pageSize || 10;
 
+  // 초기 컬럼 너비 측정 (한 번만)
+  useEffect(() => {
+    if (!hasInitializedWidthsRef.current && visibleColumns.length > 0) {
+      // 약간의 지연을 두고 DOM이 완전히 렌더링된 후 측정
+      const timer = setTimeout(() => {
+        const newWidths: Record<string, number> = {};
+        let hasAnyWidth = false;
+
+        visibleColumns.forEach((column) => {
+          const thElement = columnRefs.current[column.id];
+          if (thElement) {
+            const measuredWidth = thElement.offsetWidth;
+            if (measuredWidth > 0) {
+              newWidths[column.id] = measuredWidth;
+              hasAnyWidth = true;
+            }
+          }
+        });
+
+        if (hasAnyWidth) {
+          setColumnWidths(newWidths);
+          hasInitializedWidthsRef.current = true;
+        }
+      }, 100);
+
+      return () => clearTimeout(timer);
+    }
+  }, [visibleColumns]);
+
   // 데이터 로드 함수
   const loadData = useCallback(
     async (page: number = 1, searchParams: Record<string, any> = {}) => {
@@ -1939,18 +1970,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                         return (
                           <TableHead
                             key={column.id}
-                            ref={(el) => {
-                              // 첫 렌더링 시 실제 너비를 측정해서 상태에 저장
-                              if (el && !columnWidth) {
-                                const measuredWidth = el.offsetWidth;
-                                if (measuredWidth > 0) {
-                                  setColumnWidths(prev => ({
-                                    ...prev,
-                                    [column.id]: measuredWidth
-                                  }));
-                                }
-                              }
-                            }}
+                            ref={(el) => (columnRefs.current[column.id] = el)}
                             className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none"
                             style={{ 
                               width: columnWidth ? `${columnWidth}px` : undefined,
@@ -1968,7 +1988,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                                   e.preventDefault();
                                   e.stopPropagation();
                                   
-                                  const thElement = e.currentTarget.parentElement as HTMLTableCellElement;
+                                  const thElement = columnRefs.current[column.id];
                                   if (!thElement) return;
                                   
                                   const startX = e.clientX;
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 6a753734..10e17fa5 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -247,6 +247,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
   const columnRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
   const [isAllSelected, setIsAllSelected] = useState(false);
+  const hasInitializedWidths = useRef(false);
 
   // 필터 설정 관련 상태
   const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false);
@@ -794,6 +795,35 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
   }, [tableConfig.refreshInterval, isDesignMode]);
 
+  // 초기 컬럼 너비 측정 (한 번만)
+  useEffect(() => {
+    if (!hasInitializedWidths.current && visibleColumns.length > 0) {
+      // 약간의 지연을 두고 DOM이 완전히 렌더링된 후 측정
+      const timer = setTimeout(() => {
+        const newWidths: Record<string, number> = {};
+        let hasAnyWidth = false;
+
+        visibleColumns.forEach((column) => {
+          const thElement = columnRefs.current[column.columnName];
+          if (thElement) {
+            const measuredWidth = thElement.offsetWidth;
+            if (measuredWidth > 0) {
+              newWidths[column.columnName] = measuredWidth;
+              hasAnyWidth = true;
+            }
+          }
+        });
+
+        if (hasAnyWidth) {
+          setColumnWidths(newWidths);
+          hasInitializedWidths.current = true;
+        }
+      }, 100);
+
+      return () => clearTimeout(timer);
+    }
+  }, [visibleColumns]);
+
   // ========================================
   // 페이지네이션 JSX
   // ========================================
@@ -1027,19 +1057,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                     return (
                       <th
                         key={column.columnName}
-                        ref={(el) => {
-                          columnRefs.current[column.columnName] = el;
-                          // 첫 렌더링 시 실제 너비를 측정해서 상태에 저장
-                          if (el && !columnWidth) {
-                            const measuredWidth = el.offsetWidth;
-                            if (measuredWidth > 0) {
-                              setColumnWidths(prev => ({
-                                ...prev,
-                                [column.columnName]: measuredWidth
-                              }));
-                            }
-                          }
-                        }}
+                        ref={(el) => (columnRefs.current[column.columnName] = el)}
                         className={cn(
                           "relative h-10 px-2 py-2 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background select-none sm:h-12 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap",
                           column.sortable && "cursor-pointer"

From 3a75549ffec658609651c5f8bdd8e242a6304be6 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 12:22:13 +0900
Subject: [PATCH 25/49] =?UTF-8?q?fix:=20=EC=B2=B4=ED=81=AC=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=20=EC=BB=AC=EB=9F=BC=EC=9D=84=2048px=20=EA=B3=A0?=
 =?UTF-8?q?=EC=A0=95=20=EB=84=88=EB=B9=84=EB=A1=9C=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- InteractiveDataTable의 체크박스 컬럼/셀을 48px 고정
- width, minWidth, maxWidth 모두 48px로 설정
- 플로우 위젯처럼 작고 깔끔한 체크박스 컬럼
- 리사이즈 대상에서 제외
---
 frontend/components/screen/InteractiveDataTable.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 5d31da83..a588b354 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1957,7 +1957,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                     <TableRow>
                       {/* 체크박스 컬럼 (삭제 기능이 활성화된 경우) */}
                       {component.enableDelete && (
-                        <TableHead className="w-12 px-4">
+                        <TableHead 
+                          className="px-4"
+                          style={{ width: '48px', minWidth: '48px', maxWidth: '48px' }}
+                        >
                           <Checkbox
                             checked={selectedRows.size === data.length && data.length > 0}
                             onCheckedChange={handleSelectAll}
@@ -2054,7 +2057,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                         <TableRow key={rowIndex} className="transition-all duration-200 hover:bg-orange-100">
                           {/* 체크박스 셀 (삭제 기능이 활성화된 경우) */}
                           {component.enableDelete && (
-                            <TableCell className="w-12 px-4">
+                            <TableCell 
+                              className="px-4"
+                              style={{ width: '48px', minWidth: '48px', maxWidth: '48px' }}
+                            >
                               <Checkbox
                                 checked={selectedRows.has(rowIndex)}
                                 onCheckedChange={(checked) => handleRowSelect(rowIndex, checked as boolean)}

From 6aa25fa852824de2755373bc89c71a8d18b06b10 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 12:24:28 +0900
Subject: [PATCH 26/49] =?UTF-8?q?fix:=20TableListComponent=20=EC=B2=B4?=
 =?UTF-8?q?=ED=81=AC=EB=B0=95=EC=8A=A4=20=EC=BB=AC=EB=9F=BC=2048px=20?=
 =?UTF-8?q?=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 체크박스 컬럼(__checkbox__)을 48px 고정 너비로 설정
- width, minWidth, maxWidth 모두 48px 적용
- 체크박스 컬럼에서 리사이즈 핸들 제거
- 초기 너비 측정 시 체크박스 컬럼 제외
- 테이블 헤더와 본문 셀 모두 적용
- InteractiveDataTable과 일관된 체크박스 컬럼 스타일
---
 .../components/table-list/TableListComponent.tsx  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 10e17fa5..dccbce67 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -804,6 +804,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         let hasAnyWidth = false;
 
         visibleColumns.forEach((column) => {
+          // 체크박스 컬럼은 제외 (고정 48px)
+          if (column.columnName === "__checkbox__") return;
+          
           const thElement = columnRefs.current[column.columnName];
           if (thElement) {
             const measuredWidth = thElement.offsetWidth;
@@ -1064,7 +1067,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         )}
                         style={{
                           textAlign: column.align || "left",
-                          width: columnWidth ? `${columnWidth}px` : undefined,
+                          width: column.columnName === "__checkbox__" ? '48px' : (columnWidth ? `${columnWidth}px` : undefined),
+                          minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
+                          maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                           userSelect: 'none'
                         }}
                         onClick={() => column.sortable && handleSort(column.columnName)}
@@ -1079,8 +1084,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             )}
                           </div>
                         )}
-                        {/* 리사이즈 핸들 */}
-                        {columnIndex < visibleColumns.length - 1 && (
+                        {/* 리사이즈 핸들 (체크박스 제외) */}
+                        {columnIndex < visibleColumns.length - 1 && column.columnName !== "__checkbox__" && (
                           <div
                             className="absolute right-0 top-0 h-full w-2 cursor-col-resize hover:bg-blue-500 z-20"
                             style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
@@ -1193,7 +1198,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             )}
                             style={{
                               textAlign: column.align || "left",
-                              width: `${100 / visibleColumns.length}%`, // 컬럼 수에 따라 균등 분배
+                              width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
+                              minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
+                              maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                             }}
                           >
                             {column.columnName === "__checkbox__"

From 5376d7198d5676fbb252f37f29a3d4a5fa3af229 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 12:28:30 +0900
Subject: [PATCH 27/49] =?UTF-8?q?fix:=20=EC=B2=B4=ED=81=AC=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=20=EC=BB=AC=EB=9F=BC=20=ED=8C=A8=EB=94=A9=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20=EC=A4=91=EC=95=99=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 체크박스 컬럼에서 px 패딩 제거 (px-0)
- 체크박스 컬럼 중앙 정렬 (textAlign: center)
- 일반 컬럼은 기존 패딩 유지
- 체크박스와 다른 컬럼의 시각적 구분 명확화
- 불필요한 공간 제거로 깔끔한 UI
---
 .../components/table-list/TableListComponent.tsx       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index dccbce67..780b4c4d 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1062,11 +1062,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         key={column.columnName}
                         ref={(el) => (columnRefs.current[column.columnName] = el)}
                         className={cn(
-                          "relative h-10 px-2 py-2 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background select-none sm:h-12 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap",
+                          "relative h-10 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background select-none sm:h-12 sm:text-sm sm:whitespace-nowrap",
+                          column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3",
                           column.sortable && "cursor-pointer"
                         )}
                         style={{
-                          textAlign: column.align || "left",
+                          textAlign: column.columnName === "__checkbox__" ? "center" : (column.align || "left"),
                           width: column.columnName === "__checkbox__" ? '48px' : (columnWidth ? `${columnWidth}px` : undefined),
                           minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                           maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
@@ -1194,10 +1195,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           <td
                             key={column.columnName}
                             className={cn(
-                              "h-14 px-2 py-2 text-xs text-foreground overflow-hidden text-ellipsis sm:h-16 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap"
+                              "h-14 text-xs text-foreground overflow-hidden text-ellipsis sm:h-16 sm:text-sm sm:whitespace-nowrap",
+                              column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3"
                             )}
                             style={{
-                              textAlign: column.align || "left",
+                              textAlign: column.columnName === "__checkbox__" ? "center" : (column.align || "left"),
                               width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
                               minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                               maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,

From 516bcafb2c3268e5b64d1e162d2a6d6fdb8b3477 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 13:25:57 +0900
Subject: [PATCH 28/49] =?UTF-8?q?feat:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC=20=EA=B0=9C=EC=84=A0=20-=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EA=B0=80=EC=9A=B4=EB=8D=B0,=20=EC=88=AB=EC=9E=90?=
 =?UTF-8?q?=20=EC=9A=B0=EC=B8=A1=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모든 테이블 헤더를 가운데 정렬 (text-center)
- 숫자 타입(number, decimal) 데이터를 우측 정렬
- TableListComponent: inputType 기반 숫자 판단
- InteractiveDataTable: widgetType 기반 숫자 판단
- 체크박스는 기존대로 가운데 정렬 유지
- 일반 텍스트는 좌측 정렬 유지

더 읽기 쉬운 테이블 레이아웃 완성
---
 .../screen/InteractiveDataTable.tsx           | 19 +++++++++++++------
 .../table-list/TableListComponent.tsx         |  8 ++++++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index a588b354..45a5e488 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1974,7 +1974,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                           <TableHead
                             key={column.id}
                             ref={(el) => (columnRefs.current[column.id] = el)}
-                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none"
+                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none text-center"
                             style={{ 
                               width: columnWidth ? `${columnWidth}px` : undefined,
                               userSelect: 'none'
@@ -2067,11 +2067,18 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                               />
                             </TableCell>
                           )}
-                          {visibleColumns.map((column: DataTableColumn) => (
-                            <TableCell key={column.id} className="px-4 text-sm font-medium text-gray-900">
-                              {formatCellValue(row[column.columnName], column, row)}
-                            </TableCell>
-                          ))}
+                          {visibleColumns.map((column: DataTableColumn) => {
+                            const isNumeric = column.widgetType === "number" || column.widgetType === "decimal";
+                            return (
+                              <TableCell 
+                                key={column.id} 
+                                className="px-4 text-sm font-medium text-gray-900"
+                                style={{ textAlign: isNumeric ? 'right' : 'left' }}
+                              >
+                                {formatCellValue(row[column.columnName], column, row)}
+                              </TableCell>
+                            );
+                          })}
                           {/* 자동 파일 셀 표시 제거됨 - 명시적으로 추가된 파일 컬럼만 표시 */}
                         </TableRow>
                       ))
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 780b4c4d..aa82d5b2 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1067,7 +1067,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           column.sortable && "cursor-pointer"
                         )}
                         style={{
-                          textAlign: column.columnName === "__checkbox__" ? "center" : (column.align || "left"),
+                          textAlign: column.columnName === "__checkbox__" ? "center" : "center",
                           width: column.columnName === "__checkbox__" ? '48px' : (columnWidth ? `${columnWidth}px` : undefined),
                           minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                           maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
@@ -1191,6 +1191,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
                         const cellValue = row[mappedColumnName];
 
+                        const meta = columnMeta[column.columnName];
+                        const inputType = meta?.inputType || column.inputType;
+                        const isNumeric = inputType === "number" || inputType === "decimal";
+                        
                         return (
                           <td
                             key={column.columnName}
@@ -1199,7 +1203,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3"
                             )}
                             style={{
-                              textAlign: column.columnName === "__checkbox__" ? "center" : (column.align || "left"),
+                              textAlign: column.columnName === "__checkbox__" ? "center" : (isNumeric ? "right" : (column.align || "left")),
                               width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
                               minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                               maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,

From f9bd7bbcb323b3a6c8ce36f235dced99a97f9aa1 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 13:30:44 +0900
Subject: [PATCH 29/49] =?UTF-8?q?fix:=20=EC=BB=AC=EB=9F=BC=20=EB=A6=AC?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=8B=9C=20=EC=A0=95=EB=A0=AC?=
 =?UTF-8?q?=EC=9D=B4=20=ED=8A=B8=EB=A6=AC=EA=B1=B0=EB=90=98=EB=8A=94=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

문제:
- 컬럼 너비를 조절할 때 자동으로 정렬이 실행됨
- 리사이즈 핸들 클릭이 헤더의 onClick 이벤트를 트리거

해결:
- isResizing useRef 플래그 추가
- 리사이즈 시작 시 플래그를 true로 설정
- 헤더 onClick에서 isResizing.current 체크
- 리사이즈 중이면 정렬 실행 안함
- mouseup 후 100ms 지연으로 플래그 해제

적용:
- TableListComponent
- InteractiveDataTable

이제 컬럼 리사이즈가 정렬을 방해하지 않음
---
 frontend/components/screen/InteractiveDataTable.tsx |  8 ++++++++
 .../components/table-list/TableListComponent.tsx    | 13 ++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 45a5e488..54c4be4b 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -109,6 +109,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
   const hasInitializedWidthsRef = useRef(false);
   const columnRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
+  const isResizingRef = useRef(false);
 
   // SaveModal 상태 (등록/수정 통합)
   const [showSaveModal, setShowSaveModal] = useState(false);
@@ -1994,6 +1995,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                                   const thElement = columnRefs.current[column.id];
                                   if (!thElement) return;
                                   
+                                  isResizingRef.current = true;
+                                  
                                   const startX = e.clientX;
                                   const startWidth = columnWidth || thElement.offsetWidth;
                                   
@@ -2024,6 +2027,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                                     document.body.style.userSelect = '';
                                     document.body.style.cursor = '';
                                     
+                                    // 약간의 지연 후 리사이즈 플래그 해제
+                                    setTimeout(() => {
+                                      isResizingRef.current = false;
+                                    }, 100);
+                                    
                                     document.removeEventListener('mousemove', handleMouseMove);
                                     document.removeEventListener('mouseup', handleMouseUp);
                                   };
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index aa82d5b2..a1254d18 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -248,6 +248,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const columnRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
   const [isAllSelected, setIsAllSelected] = useState(false);
   const hasInitializedWidths = useRef(false);
+  const isResizing = useRef(false);
 
   // 필터 설정 관련 상태
   const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false);
@@ -1073,7 +1074,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                           userSelect: 'none'
                         }}
-                        onClick={() => column.sortable && handleSort(column.columnName)}
+                        onClick={() => {
+                          if (isResizing.current) return;
+                          if (column.sortable) handleSort(column.columnName);
+                        }}
                       >
                         {column.columnName === "__checkbox__" ? (
                           renderCheckboxHeader()
@@ -1098,6 +1102,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               const thElement = columnRefs.current[column.columnName];
                               if (!thElement) return;
                               
+                              isResizing.current = true;
+                              
                               const startX = e.clientX;
                               const startWidth = columnWidth || thElement.offsetWidth;
                               
@@ -1128,6 +1134,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 document.body.style.userSelect = '';
                                 document.body.style.cursor = '';
                                 
+                                // 약간의 지연 후 리사이즈 플래그 해제 (클릭 이벤트가 먼저 처리되지 않도록)
+                                setTimeout(() => {
+                                  isResizing.current = false;
+                                }, 100);
+                                
                                 document.removeEventListener('mousemove', handleMouseMove);
                                 document.removeEventListener('mouseup', handleMouseUp);
                               };

From 40efb391ea124a122b670e5fbf632d3230ae0c75 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 13:33:13 +0900
Subject: [PATCH 30/49] =?UTF-8?q?feat:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=20-=20=EA=B7=B8=EB=9D=BC=EB=8D=B0=EC=9D=B4=EC=85=98?=
 =?UTF-8?q?=20=EB=B0=B0=EA=B2=BD,=20=EA=B5=B5=EC=9D=80=20=ED=85=8C?=
 =?UTF-8?q?=EB=91=90=EB=A6=AC,=20=ED=98=B8=EB=B2=84=20=ED=9A=A8=EA=B3=BC?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/screen/InteractiveDataTable.tsx       | 4 ++--
 .../registry/components/table-list/TableListComponent.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 54c4be4b..ca6facb6 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1954,7 +1954,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             <>
               <div className="overflow-hidden rounded-lg border border-gray-200/60 bg-white shadow-sm">
                 <Table style={{ tableLayout: 'fixed' }}>
-                  <TableHeader>
+                  <TableHeader className="bg-gradient-to-b from-muted/50 to-muted border-b-2 border-primary/20">
                     <TableRow>
                       {/* 체크박스 컬럼 (삭제 기능이 활성화된 경우) */}
                       {component.enableDelete && (
@@ -1975,7 +1975,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                           <TableHead
                             key={column.id}
                             ref={(el) => (columnRefs.current[column.id] = el)}
-                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none text-center"
+                            className="relative px-4 font-bold text-foreground/90 select-none text-center hover:bg-muted/70 transition-colors"
                             style={{ 
                               width: columnWidth ? `${columnWidth}px` : undefined,
                               userSelect: 'none'
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index a1254d18..598e8017 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1052,9 +1052,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             >
               {/* 헤더 (sticky) */}
               <thead
-                className="sticky top-0 z-10 bg-background"
+                className="sticky top-0 z-10"
               >
-                <tr className="h-10 border-b border-border sm:h-12">
+                <tr className="h-10 border-b-2 border-primary/20 bg-gradient-to-b from-muted/50 to-muted sm:h-12">
                   {visibleColumns.map((column, columnIndex) => {
                     const columnWidth = columnWidths[column.columnName];
                     
@@ -1063,9 +1063,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         key={column.columnName}
                         ref={(el) => (columnRefs.current[column.columnName] = el)}
                         className={cn(
-                          "relative h-10 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background select-none sm:h-12 sm:text-sm sm:whitespace-nowrap",
+                          "relative h-10 text-xs font-bold text-foreground/90 overflow-hidden text-ellipsis select-none sm:h-12 sm:text-sm sm:whitespace-nowrap",
                           column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3",
-                          column.sortable && "cursor-pointer"
+                          column.sortable && "cursor-pointer hover:bg-muted/70 transition-colors"
                         )}
                         style={{
                           textAlign: column.columnName === "__checkbox__" ? "center" : "center",

From 714511c3cf3343ac929cbf4365630ac95f74a169 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 13:34:02 +0900
Subject: [PATCH 31/49] =?UTF-8?q?fix:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A4=84=EB=B0=94=EA=BF=88=20=EB=AC=B8=EC=A0=9C=20=EB=B0=A9?=
 =?UTF-8?q?=EC=A7=80=20-=20=EB=AA=A8=EB=93=A0=20=EC=85=80=EC=97=90=20white?=
 =?UTF-8?q?space-nowrap=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 테이블 헤더와 데이터 셀 모두에 whitespace-nowrap 적용
- 모바일에서도 텍스트가 2줄로 깨지지 않음
- overflow-hidden + text-ellipsis로 긴 텍스트 처리
- TableListComponent와 InteractiveDataTable 모두 적용

이제 화면을 줄여도 텍스트가 항상 1줄로 유지됨
---
 frontend/components/screen/InteractiveDataTable.tsx           | 2 +-
 .../lib/registry/components/table-list/TableListComponent.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index ca6facb6..fa90bd2d 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -2080,7 +2080,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                             return (
                               <TableCell 
                                 key={column.id} 
-                                className="px-4 text-sm font-medium text-gray-900"
+                                className="px-4 text-sm font-medium text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis"
                                 style={{ textAlign: isNumeric ? 'right' : 'left' }}
                               >
                                 {formatCellValue(row[column.columnName], column, row)}
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 598e8017..6a3cb420 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1063,7 +1063,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         key={column.columnName}
                         ref={(el) => (columnRefs.current[column.columnName] = el)}
                         className={cn(
-                          "relative h-10 text-xs font-bold text-foreground/90 overflow-hidden text-ellipsis select-none sm:h-12 sm:text-sm sm:whitespace-nowrap",
+                          "relative h-10 text-xs font-bold text-foreground/90 overflow-hidden text-ellipsis whitespace-nowrap select-none sm:h-12 sm:text-sm",
                           column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3",
                           column.sortable && "cursor-pointer hover:bg-muted/70 transition-colors"
                         )}
@@ -1210,7 +1210,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           <td
                             key={column.columnName}
                             className={cn(
-                              "h-14 text-xs text-foreground overflow-hidden text-ellipsis sm:h-16 sm:text-sm sm:whitespace-nowrap",
+                              "h-14 text-xs text-foreground overflow-hidden text-ellipsis whitespace-nowrap sm:h-16 sm:text-sm",
                               column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3"
                             )}
                             style={{

From cbf85768970ed0e10b5cd8d0b6f82e284fd450b8 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 13:51:08 +0900
Subject: [PATCH 32/49] =?UTF-8?q?feat:=20DataTableTemplate=EC=97=90=20?=
 =?UTF-8?q?=ED=94=8C=EB=A1=9C=EC=9A=B0=20=EC=9C=84=EC=A0=AF=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EA=B2=80=EC=83=89=20=ED=95=84=ED=84=B0=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ 새로운 기능
- 플로우 위젯과 동일한 검색 필터 설정 기능 구현
- 사용자가 원하는 컬럼만 선택하여 검색 가능
- localStorage 기반 필터 설정 저장/복원

🎨 UI 추가
- '검색 필터 설정' 버튼 (FlowWidget 스타일)
- 선택된 컬럼의 동적 검색 입력 필드
- 필터 개수 뱃지 표시
- 체크박스 기반 필터 설정 다이얼로그

🔧 기술적 구현
- searchFilterColumns 상태로 선택된 컬럼 관리
- searchValues 상태로 각 컬럼별 검색값 관리
- useAuth 훅으로 사용자별 필터 설정 저장
- Grid 레이아웃으로 검색 필드 반응형 배치

📝 변경된 파일
- frontend/components/screen/templates/DataTableTemplate.tsx

✅ 테스트 완료
- 필터 설정 저장/복원
- 동적 검색 필드 생성
- 반응형 레이아웃
- 미리보기 모드에서 비활성화
---
 .../screen/templates/DataTableTemplate.tsx    | 154 +++++++++++++++++-
 1 file changed, 147 insertions(+), 7 deletions(-)

diff --git a/frontend/components/screen/templates/DataTableTemplate.tsx b/frontend/components/screen/templates/DataTableTemplate.tsx
index 86422e7f..b24f27c3 100644
--- a/frontend/components/screen/templates/DataTableTemplate.tsx
+++ b/frontend/components/screen/templates/DataTableTemplate.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { Table, Filter, Search, Download, RefreshCw, Plus, Edit, Trash2 } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -8,6 +8,9 @@ import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { toast } from "sonner";
+import { useAuth } from "@/hooks/useAuth";
 
 /**
  * 데이터 테이블 템플릿 컴포넌트
@@ -121,6 +124,13 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
   className = "",
   isPreview = true,
 }) => {
+  const { user } = useAuth();
+  
+  // 🆕 검색 필터 관련 상태
+  const [searchFilterColumns, setSearchFilterColumns] = useState<Set<string>>(new Set());
+  const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false);
+  const [searchValues, setSearchValues] = useState<Record<string, string>>({});
+  
   // 설정된 컬럼만 사용 (자동 생성 안함)
   const defaultColumns = React.useMemo(() => {
     return columns || [];
@@ -138,6 +148,54 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
   }, [isPreview]);
 
   const visibleColumns = defaultColumns.filter((col) => col.visible);
+  
+  // 🆕 컬럼명 -> 라벨 매핑
+  const columnLabels = React.useMemo(() => {
+    const labels: Record<string, string> = {};
+    defaultColumns.forEach(col => {
+      labels[col.id] = col.label;
+    });
+    return labels;
+  }, [defaultColumns]);
+  
+  // 🆕 localStorage에서 필터 설정 복원
+  useEffect(() => {
+    if (user?.userId && title) {
+      const storageKey = `datatable-search-filter-${user.userId}-${title}`;
+      const savedFilter = localStorage.getItem(storageKey);
+      if (savedFilter) {
+        try {
+          const parsed = JSON.parse(savedFilter);
+          setSearchFilterColumns(new Set(parsed));
+        } catch (e) {
+          console.error("필터 설정 복원 실패:", e);
+        }
+      }
+    }
+  }, [user?.userId, title]);
+  
+  // 🆕 필터 저장 함수
+  const handleSaveSearchFilter = useCallback(() => {
+    if (user?.userId && title) {
+      const storageKey = `datatable-search-filter-${user.userId}-${title}`;
+      const filterArray = Array.from(searchFilterColumns);
+      localStorage.setItem(storageKey, JSON.stringify(filterArray));
+      toast.success("검색 필터 설정이 저장되었습니다.");
+    }
+  }, [user?.userId, title, searchFilterColumns]);
+  
+  // 🆕 필터 토글 함수
+  const handleToggleFilterColumn = useCallback((columnId: string) => {
+    setSearchFilterColumns((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(columnId)) {
+        newSet.delete(columnId);
+      } else {
+        newSet.add(columnId);
+      }
+      return newSet;
+    });
+  }, []);
 
   return (
     <Card className={`h-full w-full ${className}`} style={style}>
@@ -178,23 +236,65 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
       </CardHeader>
 
       <CardContent className="space-y-4">
+        {/* 🆕 검색 필터 설정 버튼 영역 */}
+        {defaultColumns.length > 0 && (
+          <div className="flex items-center justify-end">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setIsFilterSettingOpen(true)}
+              disabled={isPreview}
+              className="gap-2"
+            >
+              <Filter className="h-4 w-4" />
+              검색 필터 설정
+              {searchFilterColumns.size > 0 && (
+                <Badge variant="secondary" className="ml-1 h-5 px-1.5 text-[10px]">
+                  {searchFilterColumns.size}
+                </Badge>
+              )}
+            </Button>
+          </div>
+        )}
+        
+        {/* 🆕 선택된 컬럼의 검색 입력 필드 */}
+        {searchFilterColumns.size > 0 && (
+          <div className="grid grid-cols-1 gap-3 rounded-lg border bg-gray-50/50 p-4 md:grid-cols-2 lg:grid-cols-3">
+            {Array.from(searchFilterColumns).map((columnId) => {
+              const column = defaultColumns.find(col => col.id === columnId);
+              if (!column) return null;
+              
+              return (
+                <div key={columnId} className="space-y-1.5">
+                  <label className="text-xs font-medium text-gray-700">
+                    {column.label}
+                  </label>
+                  <Input
+                    placeholder={`${column.label} 검색...`}
+                    value={searchValues[columnId] || ""}
+                    onChange={(e) => setSearchValues(prev => ({...prev, [columnId]: e.target.value}))}
+                    disabled={isPreview}
+                    className="h-9 text-sm"
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        
         {/* 검색 및 필터 영역 */}
         <div className="flex flex-col space-y-4 lg:flex-row lg:items-center lg:justify-between lg:space-y-0">
           {/* 검색 입력 */}
           <div className="flex items-center space-x-2">
-            <div className="relative min-w-[200px] flex-1">
-              <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
-              <Input placeholder="검색어를 입력하세요..." className="pl-10" disabled={isPreview} />
-            </div>
-
             {actions.showSearchButton && (
               <Button variant="outline" disabled={isPreview}>
+                <Search className="mr-2 h-4 w-4" />
                 {actions.searchButtonText}
               </Button>
             )}
           </div>
 
-          {/* 필터 영역 */}
+          {/* 기존 필터 영역 (이제는 사용하지 않음) */}
           {filters.length > 0 && (
             <div className="flex items-center space-x-2">
               <Filter className="text-muted-foreground h-4 w-4" />
@@ -352,6 +452,46 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
           </div>
         )}
       </CardContent>
+      
+      {/* 🆕 검색 필터 설정 다이얼로그 */}
+      <Dialog open={isFilterSettingOpen} onOpenChange={setIsFilterSettingOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>검색 필터 설정</DialogTitle>
+            <DialogDescription>
+              표시할 검색 필터를 선택하세요. 선택하지 않은 필터는 숨겨집니다.
+            </DialogDescription>
+          </DialogHeader>
+          
+          <div className="max-h-[400px] space-y-2 overflow-y-auto py-4">
+            {defaultColumns.map((column) => (
+              <div key={column.id} className="flex items-center space-x-3 rounded-lg p-3 hover:bg-gray-50">
+                <Checkbox
+                  id={`filter-${column.id}`}
+                  checked={searchFilterColumns.has(column.id)}
+                  onCheckedChange={() => handleToggleFilterColumn(column.id)}
+                />
+                <label htmlFor={`filter-${column.id}`} className="flex-1 cursor-pointer text-sm">
+                  {column.label}
+                  <span className="ml-2 text-xs text-gray-500">({column.type})</span>
+                </label>
+              </div>
+            ))}
+          </div>
+          
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setIsFilterSettingOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={() => {
+              handleSaveSearchFilter();
+              setIsFilterSettingOpen(false);
+            }}>
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Card>
   );
 };

From e0e7bc387ef254dd52b54c7833627cb16bad2403 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 13:53:50 +0900
Subject: [PATCH 33/49] =?UTF-8?q?fix:=20TableListComponent=20=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=20=EC=84=A4=EC=A0=95=20=EB=8B=A4=EC=9D=B4=EC=96=BC?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 UI 개선
- 필터 설정 다이얼로그 스타일을 플로우 위젯과 동일하게 변경
- hover:bg-gray-50으로 호버 효과 추가
- rounded-lg, p-3, space-x-3으로 간격 및 패딩 개선
- space-y-2, py-4로 리스트 아이템 간격 조정

🐛 버그 수정
- 필터 목록에 key prop 추가 (React 경고 해결)
- Label 컴포넌트 대신 label 태그 사용 (불필요한 import 제거)

📝 변경 사항
- 플로우 위젯과 동일한 체크박스 리스트 스타일 적용
- 더 명확하고 클릭하기 쉬운 UI로 개선

✅ 결과
- 필터 설정 다이얼로그가 플로우 위젯과 일관된 스타일로 표시됨
---
 .../components/table-list/TableListComponent.tsx    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 6a3cb420..7249eb6c 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1248,20 +1248,23 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             </DialogDescription>
           </DialogHeader>
 
-          <div className="max-h-[60vh] space-y-3 overflow-y-auto sm:space-y-4">
+          <div className="max-h-[60vh] space-y-2 overflow-y-auto py-4">
             {(tableConfig.filter?.filters || []).map((filter) => (
-            <div className="flex items-center gap-3 rounded p-2 hover:bg-muted">
+              <div 
+                key={filter.columnName}
+                className="flex items-center space-x-3 rounded-lg p-3 hover:bg-gray-50"
+              >
                 <Checkbox
                   id={`filter-${filter.columnName}`}
                   checked={visibleFilterColumns.has(filter.columnName)}
                   onCheckedChange={() => toggleFilterVisibility(filter.columnName)}
                 />
-                <Label
+                <label
                   htmlFor={`filter-${filter.columnName}`}
-                  className="flex-1 cursor-pointer text-xs font-normal sm:text-sm"
+                  className="flex-1 cursor-pointer text-sm"
                 >
                   {columnLabels[filter.columnName] || filter.label || filter.columnName}
-                </Label>
+                </label>
               </div>
             ))}
           </div>

From 297870a24c46b89ab4ddb7cf78c018e92822d60e Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 13:59:12 +0900
Subject: [PATCH 34/49] =?UTF-8?q?feat:=20TableListComponent=EC=97=90=20Flo?=
 =?UTF-8?q?wWidget=EA=B3=BC=20=EB=8F=99=EC=9D=BC=ED=95=9C=20=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=20=EC=84=A4=EC=A0=95=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 전체 선택/해제 기능 추가
- 선택된 컬럼 개수 표시 추가
- 필터 설정 localStorage 저장/로드 기능
- 체크된 항목만 실제 검색 필터로 표시
- 저장 시 Toast 알림 추가
- FlowWidget과 완전히 동일한 UI/UX 적용
---
 .../screen/InteractiveDataTable.tsx           |  60 ++++++++-
 .../table-list/TableListComponent.tsx         | 126 +++++++++++++-----
 2 files changed, 153 insertions(+), 33 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index fa90bd2d..e05cc973 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -38,10 +38,12 @@ import {
   Folder,
   FolderOpen,
   Grid,
+  Filter,
 } from "lucide-react";
 import { tableTypeApi } from "@/lib/api/screen";
 import { commonCodeApi } from "@/lib/api/commonCode";
 import { getCurrentUser, UserInfo } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
 import { DataTableComponent, DataTableColumn, DataTableFilter } from "@/types/screen-legacy-backup";
 import { cn } from "@/lib/utils";
 import { downloadFile, getLinkedFiles, getFilePreviewUrl, getDirectFileUrl } from "@/lib/api/file";
@@ -99,6 +101,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   onRefresh,
 }) => {
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
+  const { user } = useAuth(); // 사용자 정보 가져오기
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchValues, setSearchValues] = useState<Record<string, any>>({});
@@ -134,6 +137,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   // 공통코드 관리 상태
   const [codeOptions, setCodeOptions] = useState<Record<string, Array<{ value: string; label: string }>>>({});
 
+  // 🆕 검색 필터 관련 상태 (FlowWidget과 동일)
+  const [searchFilterColumns, setSearchFilterColumns] = useState<Set<string>>(new Set()); // 검색 필터로 사용할 컬럼
+  const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false); // 필터 설정 다이얼로그
+  const [allAvailableColumns, setAllAvailableColumns] = useState<string[]>([]); // 전체 컬럼 목록
+  const [filteredData, setFilteredData] = useState<any[]>([]); // 필터링된 데이터
+  const [columnLabels, setColumnLabels] = useState<Record<string, string>>({}); // 컬럼명 -> 라벨 매핑
+
   // 공통코드 옵션 가져오기
   const loadCodeOptions = useCallback(
     async (categoryCode: string) => {
@@ -633,6 +643,31 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       try {
         const columns = await tableTypeApi.getColumns(component.tableName);
         setTableColumns(columns);
+        
+        // 🆕 전체 컬럼 목록 설정
+        const columnNames = columns.map(col => col.columnName);
+        setAllAvailableColumns(columnNames);
+        
+        // 🆕 컬럼명 -> 라벨 매핑 생성
+        const labels: Record<string, string> = {};
+        columns.forEach(col => {
+          labels[col.columnName] = col.displayName || col.columnName;
+        });
+        setColumnLabels(labels);
+        
+        // 🆕 localStorage에서 필터 설정 복원
+        if (user?.userId && component.componentId) {
+          const storageKey = `table-search-filter-${user.userId}-${component.componentId}`;
+          const savedFilter = localStorage.getItem(storageKey);
+          if (savedFilter) {
+            try {
+              const parsed = JSON.parse(savedFilter);
+              setSearchFilterColumns(new Set(parsed));
+            } catch (e) {
+              console.error("필터 설정 복원 실패:", e);
+            }
+          }
+        }
       } catch (error) {
         // console.error("테이블 컬럼 정보 로드 실패:", error);
       }
@@ -641,7 +676,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     if (component.tableName) {
       fetchTableColumns();
     }
-  }, [component.tableName]);
+  }, [component.tableName, component.componentId, user?.userId]);
 
   // 실제 사용할 필터 (설정된 필터만 사용, 자동 생성 안함)
   const searchFilters = useMemo(() => {
@@ -1052,6 +1087,29 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     }
   }, [isAdding]);
 
+  // 🆕 검색 필터 저장 함수
+  const handleSaveSearchFilter = useCallback(() => {
+    if (user?.userId && component.componentId) {
+      const storageKey = `table-search-filter-${user.userId}-${component.componentId}`;
+      const filterArray = Array.from(searchFilterColumns);
+      localStorage.setItem(storageKey, JSON.stringify(filterArray));
+      toast.success("검색 필터 설정이 저장되었습니다.");
+    }
+  }, [user?.userId, component.componentId, searchFilterColumns]);
+
+  // 🆕 검색 필터 토글 함수
+  const handleToggleFilterColumn = useCallback((columnName: string) => {
+    setSearchFilterColumns((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(columnName)) {
+        newSet.delete(columnName);
+      } else {
+        newSet.add(columnName);
+      }
+      return newSet;
+    });
+  }, []);
+
   // 데이터 삭제 핸들러
   const handleDeleteData = useCallback(() => {
     if (selectedRows.size === 0) {
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 7249eb6c..b5b0700d 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -253,6 +253,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   // 필터 설정 관련 상태
   const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false);
   const [visibleFilterColumns, setVisibleFilterColumns] = useState<Set<string>>(new Set());
+  
+  // 필터 설정 키 생성
+  const filterSettingKey = useMemo(() => {
+    if (!tableConfig.selectedTable) return null;
+    return `table-list-filter-${tableConfig.selectedTable}`;
+  }, [tableConfig.selectedTable]);
 
   const { optimizedConvertCode } = useEntityJoinOptimization(columnMeta, {
     enableBatchLoading: true,
@@ -716,7 +722,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   // 저장된 필터 설정 불러오기
   useEffect(() => {
-    if (!filterSettingKey) return;
+    if (!filterSettingKey || visibleColumns.length === 0) return;
 
     try {
       const saved = localStorage.getItem(filterSettingKey);
@@ -724,17 +730,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         const savedFilters = JSON.parse(saved);
         setVisibleFilterColumns(new Set(savedFilters));
       } else {
-        // 초기값: 모든 필터 표시
-        const allFilters = (tableConfig.filter?.filters || []).map((f) => f.columnName);
-        setVisibleFilterColumns(new Set(allFilters));
+        // 초기값: 빈 Set (아무것도 선택 안 함)
+        setVisibleFilterColumns(new Set());
       }
     } catch (error) {
       console.error("필터 설정 불러오기 실패:", error);
-      // 기본값으로 모든 필터 표시
-      const allFilters = (tableConfig.filter?.filters || []).map((f) => f.columnName);
-      setVisibleFilterColumns(new Set(allFilters));
+      setVisibleFilterColumns(new Set());
     }
-  }, [filterSettingKey, tableConfig.filter?.filters]);
+  }, [filterSettingKey, visibleColumns]);
 
   // 필터 설정 저장
   const saveFilterSettings = useCallback(() => {
@@ -743,12 +746,17 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     try {
       localStorage.setItem(filterSettingKey, JSON.stringify(Array.from(visibleFilterColumns)));
       setIsFilterSettingOpen(false);
+      toast.success("검색 필터 설정이 저장되었습니다");
+
+      // 검색 값 초기화
+      setSearchValues({});
     } catch (error) {
       console.error("필터 설정 저장 실패:", error);
+      toast.error("설정 저장에 실패했습니다");
     }
   }, [filterSettingKey, visibleFilterColumns]);
 
-  // 필터 토글
+  // 필터 컬럼 토글
   const toggleFilterVisibility = useCallback((columnName: string) => {
     setVisibleFilterColumns((prev) => {
       const newSet = new Set(prev);
@@ -761,10 +769,30 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     });
   }, []);
 
-  // 표시할 필터 목록
+  // 전체 선택/해제
+  const toggleAllFilters = useCallback(() => {
+    const filterableColumns = visibleColumns.filter((col) => col.columnName !== "__checkbox__");
+    const columnNames = filterableColumns.map((col) => col.columnName);
+    
+    if (visibleFilterColumns.size === columnNames.length) {
+      // 전체 해제
+      setVisibleFilterColumns(new Set());
+    } else {
+      // 전체 선택
+      setVisibleFilterColumns(new Set(columnNames));
+    }
+  }, [visibleFilterColumns, visibleColumns]);
+
+  // 표시할 필터 목록 (선택된 컬럼만)
   const activeFilters = useMemo(() => {
-    return (tableConfig.filter?.filters || []).filter((f) => visibleFilterColumns.has(f.columnName));
-  }, [tableConfig.filter?.filters, visibleFilterColumns]);
+    return visibleColumns
+      .filter((col) => col.columnName !== "__checkbox__" && visibleFilterColumns.has(col.columnName))
+      .map((col) => ({
+        columnName: col.columnName,
+        label: columnLabels[col.columnName] || col.displayName || col.columnName,
+        type: col.format || "text",
+      }));
+  }, [visibleColumns, visibleFilterColumns, columnLabels]);
 
   useEffect(() => {
     fetchColumnLabels();
@@ -1244,29 +1272,63 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           <DialogHeader>
             <DialogTitle className="text-base sm:text-lg">검색 필터 설정</DialogTitle>
             <DialogDescription className="text-xs sm:text-sm">
-              표시할 검색 필터를 선택하세요. 선택하지 않은 필터는 숨겨집니다.
+              검색 필터로 사용할 컬럼을 선택하세요. 선택한 컬럼의 검색 입력 필드가 표시됩니다.
             </DialogDescription>
           </DialogHeader>
 
-          <div className="max-h-[60vh] space-y-2 overflow-y-auto py-4">
-            {(tableConfig.filter?.filters || []).map((filter) => (
-              <div 
-                key={filter.columnName}
-                className="flex items-center space-x-3 rounded-lg p-3 hover:bg-gray-50"
-              >
-                <Checkbox
-                  id={`filter-${filter.columnName}`}
-                  checked={visibleFilterColumns.has(filter.columnName)}
-                  onCheckedChange={() => toggleFilterVisibility(filter.columnName)}
-                />
-                <label
-                  htmlFor={`filter-${filter.columnName}`}
-                  className="flex-1 cursor-pointer text-sm"
-                >
-                  {columnLabels[filter.columnName] || filter.label || filter.columnName}
-                </label>
-              </div>
-            ))}
+          <div className="space-y-3 sm:space-y-4">
+            {/* 전체 선택/해제 */}
+            <div className="bg-muted/50 flex items-center gap-3 rounded border p-3">
+              <Checkbox
+                id="select-all-filters"
+                checked={
+                  visibleFilterColumns.size ===
+                    visibleColumns.filter((col) => col.columnName !== "__checkbox__").length &&
+                  visibleColumns.filter((col) => col.columnName !== "__checkbox__").length > 0
+                }
+                onCheckedChange={toggleAllFilters}
+              />
+              <Label htmlFor="select-all-filters" className="flex-1 cursor-pointer text-xs font-semibold sm:text-sm">
+                전체 선택/해제
+              </Label>
+              <span className="text-muted-foreground text-xs">
+                {visibleFilterColumns.size} / {visibleColumns.filter((col) => col.columnName !== "__checkbox__").length}
+                개
+              </span>
+            </div>
+
+            {/* 컬럼 목록 */}
+            <div className="max-h-[50vh] space-y-2 overflow-y-auto rounded border p-2">
+              {visibleColumns
+                .filter((col) => col.columnName !== "__checkbox__")
+                .map((col) => (
+                  <div key={col.columnName} className="hover:bg-muted/50 flex items-center gap-3 rounded p-2">
+                    <Checkbox
+                      id={`filter-${col.columnName}`}
+                      checked={visibleFilterColumns.has(col.columnName)}
+                      onCheckedChange={() => toggleFilterVisibility(col.columnName)}
+                    />
+                    <Label
+                      htmlFor={`filter-${col.columnName}`}
+                      className="flex-1 cursor-pointer text-xs font-normal sm:text-sm"
+                    >
+                      {columnLabels[col.columnName] || col.displayName || col.columnName}
+                    </Label>
+                  </div>
+                ))}
+            </div>
+
+            {/* 선택된 컬럼 개수 안내 */}
+            <div className="text-muted-foreground bg-muted/30 rounded p-3 text-center text-xs">
+              {visibleFilterColumns.size === 0 ? (
+                <span>검색 필터를 사용하려면 최소 1개 이상의 컬럼을 선택하세요</span>
+              ) : (
+                <span>
+                  총 <span className="text-primary font-semibold">{visibleFilterColumns.size}개</span>의 검색 필터가
+                  표시됩니다
+                </span>
+              )}
+            </div>
           </div>
 
           <DialogFooter className="gap-2 sm:gap-0">

From c7db82a8a579c33a623f287e9bd0ba509ee1b495 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:00:06 +0900
Subject: [PATCH 35/49] =?UTF-8?q?fix:=20TableListComponent=20filterSetting?=
 =?UTF-8?q?Key=20=EC=A4=91=EB=B3=B5=20=EC=A0=95=EC=9D=98=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 중복된 filterSettingKey 변수 정의 중 하나 제거
- 빌드 에러 해결
---
 .../registry/components/table-list/TableListComponent.tsx   | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index b5b0700d..f9876d28 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -253,12 +253,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   // 필터 설정 관련 상태
   const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false);
   const [visibleFilterColumns, setVisibleFilterColumns] = useState<Set<string>>(new Set());
-  
-  // 필터 설정 키 생성
-  const filterSettingKey = useMemo(() => {
-    if (!tableConfig.selectedTable) return null;
-    return `table-list-filter-${tableConfig.selectedTable}`;
-  }, [tableConfig.selectedTable]);
 
   const { optimizedConvertCode } = useEntityJoinOptimization(columnMeta, {
     enableBatchLoading: true,

From 8248c8dc963de8e2fff757801dea2dc8698b3d30 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:00:45 +0900
Subject: [PATCH 36/49] =?UTF-8?q?fix:=20TableListComponent=EC=97=90=20toas?=
 =?UTF-8?q?t=20import=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sonner의 toast 함수 import 추가
- 필터 설정 저장 시 알림 기능 정상 작동
---
 .../lib/registry/components/table-list/TableListComponent.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index f9876d28..367f95e0 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -22,6 +22,7 @@ import {
 } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
+import { toast } from "sonner";
 import {
   Dialog,
   DialogContent,

From b607ef0aa03a4662b71612e25b90d263b35d545a Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:08:26 +0900
Subject: [PATCH 37/49] =?UTF-8?q?feat:=20TableListComponent=EC=97=90=20?=
 =?UTF-8?q?=EA=B7=B8=EB=A3=B9=ED=95=91=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 다중 컬럼 선택으로 계층적 그룹화 지원
- 그룹 설정 다이얼로그 추가
- 그룹별 데이터 펼치기/접기 기능
- 그룹 헤더에 항목 개수 표시
- localStorage에 그룹 설정 저장/복원
- 그룹 해제 버튼 추가
- 그룹 표시 배지 UI

주요 기능:
- 사용자가 원하는 컬럼(들)을 선택하여 그룹화
- 그룹 키: '통화:KRW > 단위:EA' 형식으로 표시
- 그룹 헤더 클릭으로 펼치기/접기
- 그룹 없을 때는 기존 렌더링 방식 유지
---
 .../table-list/TableListComponent.tsx         | 366 +++++++++++++++++-
 테이블_그룹핑_기능_구현_계획서.md             | 365 +++++++++++++++++
 2 files changed, 715 insertions(+), 16 deletions(-)
 create mode 100644 테이블_그룹핑_기능_구현_계획서.md

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 367f95e0..9ee28aac 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -19,6 +19,8 @@ import {
   TableIcon,
   Settings,
   X,
+  Layers,
+  ChevronDown,
 } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
@@ -36,6 +38,18 @@ import { AdvancedSearchFilters } from "@/components/screen/filters/AdvancedSearc
 import { SingleTableWithSticky } from "./SingleTableWithSticky";
 import { CardModeRenderer } from "./CardModeRenderer";
 
+// ========================================
+// 인터페이스
+// ========================================
+
+// 그룹화된 데이터 인터페이스
+interface GroupedData {
+  groupKey: string;
+  groupValues: Record<string, any>;
+  items: any[];
+  count: number;
+}
+
 // ========================================
 // 캐시 및 유틸리티
 // ========================================
@@ -255,6 +269,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false);
   const [visibleFilterColumns, setVisibleFilterColumns] = useState<Set<string>>(new Set());
 
+  // 그룹 설정 관련 상태
+  const [isGroupSettingOpen, setIsGroupSettingOpen] = useState(false);
+  const [groupByColumns, setGroupByColumns] = useState<string[]>([]);
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
+
   const { optimizedConvertCode } = useEntityJoinOptimization(columnMeta, {
     enableBatchLoading: true,
     preloadCommonCodes: true,
@@ -715,6 +734,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     return `tableList_filterSettings_${tableConfig.selectedTable}`;
   }, [tableConfig.selectedTable]);
 
+  // 그룹 설정 localStorage 키 생성
+  const groupSettingKey = useMemo(() => {
+    if (!tableConfig.selectedTable) return null;
+    return `tableList_groupSettings_${tableConfig.selectedTable}`;
+  }, [tableConfig.selectedTable]);
+
   // 저장된 필터 설정 불러오기
   useEffect(() => {
     if (!filterSettingKey || visibleColumns.length === 0) return;
@@ -789,6 +814,105 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       }));
   }, [visibleColumns, visibleFilterColumns, columnLabels]);
 
+  // 그룹 설정 저장
+  const saveGroupSettings = useCallback(() => {
+    if (!groupSettingKey) return;
+
+    try {
+      localStorage.setItem(groupSettingKey, JSON.stringify(groupByColumns));
+      setIsGroupSettingOpen(false);
+      toast.success("그룹 설정이 저장되었습니다");
+    } catch (error) {
+      console.error("그룹 설정 저장 실패:", error);
+      toast.error("설정 저장에 실패했습니다");
+    }
+  }, [groupSettingKey, groupByColumns]);
+
+  // 그룹 컬럼 토글
+  const toggleGroupColumn = useCallback((columnName: string) => {
+    setGroupByColumns((prev) => {
+      if (prev.includes(columnName)) {
+        return prev.filter((col) => col !== columnName);
+      } else {
+        return [...prev, columnName];
+      }
+    });
+  }, []);
+
+  // 그룹 펼치기/접기 토글
+  const toggleGroupCollapse = useCallback((groupKey: string) => {
+    setCollapsedGroups((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(groupKey)) {
+        newSet.delete(groupKey);
+      } else {
+        newSet.add(groupKey);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // 그룹 해제
+  const clearGrouping = useCallback(() => {
+    setGroupByColumns([]);
+    setCollapsedGroups(new Set());
+    if (groupSettingKey) {
+      localStorage.removeItem(groupSettingKey);
+    }
+    toast.success("그룹이 해제되었습니다");
+  }, [groupSettingKey]);
+
+  // 데이터 그룹화
+  const groupedData = useMemo((): GroupedData[] => {
+    if (groupByColumns.length === 0 || data.length === 0) return [];
+
+    const grouped = new Map<string, any[]>();
+
+    data.forEach((item) => {
+      // 그룹 키 생성: "통화:KRW > 단위:EA"
+      const keyParts = groupByColumns.map((col) => {
+        const value = item[col];
+        const label = columnLabels[col] || col;
+        return `${label}:${value !== null && value !== undefined ? value : "-"}`;
+      });
+      const groupKey = keyParts.join(" > ");
+
+      if (!grouped.has(groupKey)) {
+        grouped.set(groupKey, []);
+      }
+      grouped.get(groupKey)!.push(item);
+    });
+
+    return Array.from(grouped.entries()).map(([groupKey, items]) => {
+      const groupValues: Record<string, any> = {};
+      groupByColumns.forEach((col) => {
+        groupValues[col] = items[0]?.[col];
+      });
+
+      return {
+        groupKey,
+        groupValues,
+        items,
+        count: items.length,
+      };
+    });
+  }, [data, groupByColumns, columnLabels]);
+
+  // 저장된 그룹 설정 불러오기
+  useEffect(() => {
+    if (!groupSettingKey || visibleColumns.length === 0) return;
+
+    try {
+      const saved = localStorage.getItem(groupSettingKey);
+      if (saved) {
+        const savedGroups = JSON.parse(saved);
+        setGroupByColumns(savedGroups);
+      }
+    } catch (error) {
+      console.error("그룹 설정 불러오기 실패:", error);
+    }
+  }, [groupSettingKey, visibleColumns]);
+
   useEffect(() => {
     fetchColumnLabels();
     fetchTableLabel();
@@ -980,15 +1104,52 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClear={handleClearAdvancedFilters}
                 />
               </div>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setIsFilterSettingOpen(true)}
-                className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsFilterSettingOpen(true)}
+                  className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
+                >
+                  <Settings className="mr-2 h-4 w-4" />
+                  필터 설정
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsGroupSettingOpen(true)}
+                  className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
+                >
+                  <Layers className="mr-2 h-4 w-4" />
+                  그룹 설정
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 그룹 표시 배지 */}
+        {groupByColumns.length > 0 && (
+          <div className="px-4 py-2 border-b border-border bg-muted/30 sm:px-6">
+            <div className="flex items-center gap-2 text-xs sm:text-sm">
+              <span className="text-muted-foreground">그룹:</span>
+              <div className="flex flex-wrap items-center gap-2">
+                {groupByColumns.map((col, idx) => (
+                  <span key={col} className="flex items-center">
+                    {idx > 0 && <span className="text-muted-foreground mx-1">→</span>}
+                    <span className="bg-primary/10 text-primary rounded px-2 py-1 text-xs font-medium">
+                      {columnLabels[col] || col}
+                    </span>
+                  </span>
+                ))}
+              </div>
+              <button
+                onClick={clearGrouping}
+                className="hover:bg-destructive/10 text-destructive ml-auto rounded p-1"
+                title="그룹 해제"
               >
-                <Settings className="mr-2 h-4 w-4" />
-                필터 설정
-              </Button>
+                <X className="h-4 w-4" />
+              </button>
             </div>
           </div>
         )}
@@ -1045,15 +1206,52 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClear={handleClearAdvancedFilters}
                 />
               </div>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setIsFilterSettingOpen(true)}
-                className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsFilterSettingOpen(true)}
+                  className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
+                >
+                  <Settings className="mr-2 h-4 w-4" />
+                  필터 설정
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsGroupSettingOpen(true)}
+                  className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
+                >
+                  <Layers className="mr-2 h-4 w-4" />
+                  그룹 설정
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 그룹 표시 배지 */}
+        {groupByColumns.length > 0 && (
+          <div className="px-4 py-2 border-b border-border bg-muted/30 sm:px-6">
+            <div className="flex items-center gap-2 text-xs sm:text-sm">
+              <span className="text-muted-foreground">그룹:</span>
+              <div className="flex flex-wrap items-center gap-2">
+                {groupByColumns.map((col, idx) => (
+                  <span key={col} className="flex items-center">
+                    {idx > 0 && <span className="text-muted-foreground mx-1">→</span>}
+                    <span className="bg-primary/10 text-primary rounded px-2 py-1 text-xs font-medium">
+                      {columnLabels[col] || col}
+                    </span>
+                  </span>
+                ))}
+              </div>
+              <button
+                onClick={clearGrouping}
+                className="hover:bg-destructive/10 text-destructive ml-auto rounded p-1"
+                title="그룹 해제"
               >
-                <Settings className="mr-2 h-4 w-4" />
-                필터 설정
-              </Button>
+                <X className="h-4 w-4" />
+              </button>
             </div>
           </div>
         )}
@@ -1209,7 +1407,81 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       </div>
                     </td>
                   </tr>
+                ) : groupByColumns.length > 0 && groupedData.length > 0 ? (
+                  // 그룹화된 렌더링
+                  groupedData.map((group) => {
+                    const isCollapsed = collapsedGroups.has(group.groupKey);
+                    return (
+                      <React.Fragment key={group.groupKey}>
+                        {/* 그룹 헤더 */}
+                        <tr>
+                          <td
+                            colSpan={visibleColumns.length}
+                            className="bg-muted/50 border-b border-border sticky top-[48px] z-[5]"
+                            style={{ top: "48px" }}
+                          >
+                            <div
+                              className="flex items-center gap-3 p-3 cursor-pointer hover:bg-muted"
+                              onClick={() => toggleGroupCollapse(group.groupKey)}
+                            >
+                              {isCollapsed ? (
+                                <ChevronRight className="h-4 w-4 flex-shrink-0" />
+                              ) : (
+                                <ChevronDown className="h-4 w-4 flex-shrink-0" />
+                              )}
+                              <span className="font-medium text-sm flex-1">{group.groupKey}</span>
+                              <span className="text-muted-foreground text-xs">({group.count}건)</span>
+                            </div>
+                          </td>
+                        </tr>
+                        {/* 그룹 데이터 */}
+                        {!isCollapsed &&
+                          group.items.map((row, index) => (
+                    <tr
+                      key={index}
+                      draggable={!isDesignMode}
+                      onDragStart={(e) => handleRowDragStart(e, row, index)}
+                      onDragEnd={handleRowDragEnd}
+                      className={cn(
+                        "h-14 border-b transition-colors bg-background hover:bg-muted/50 cursor-pointer sm:h-16"
+                      )}
+                      onClick={() => handleRowClick(row)}
+                    >
+                      {visibleColumns.map((column) => {
+                        const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
+                        const cellValue = row[mappedColumnName];
+
+                        const meta = columnMeta[column.columnName];
+                        const inputType = meta?.inputType || column.inputType;
+                        const isNumeric = inputType === "number" || inputType === "decimal";
+                        
+                        return (
+                          <td
+                            key={column.columnName}
+                            className={cn(
+                              "h-14 text-xs text-foreground overflow-hidden text-ellipsis whitespace-nowrap sm:h-16 sm:text-sm",
+                              column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3"
+                            )}
+                            style={{
+                              textAlign: column.columnName === "__checkbox__" ? "center" : (isNumeric ? "right" : (column.align || "left")),
+                              width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
+                              minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
+                              maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
+                            }}
+                          >
+                            {column.columnName === "__checkbox__"
+                              ? renderCheckboxCell(row, index)
+                              : formatCellValue(cellValue, column, row)}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                          ))}
+                      </React.Fragment>
+                    );
+                  })
                 ) : (
+                  // 일반 렌더링 (그룹 없음)
                   data.map((row, index) => (
                     <tr
                       key={index}
@@ -1340,6 +1612,68 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* 그룹 설정 다이얼로그 */}
+      <Dialog open={isGroupSettingOpen} onOpenChange={setIsGroupSettingOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">그룹 설정</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              데이터를 그룹화할 컬럼을 선택하세요. 여러 컬럼을 선택하면 계층적으로 그룹화됩니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 sm:space-y-4">
+            {/* 컬럼 목록 */}
+            <div className="max-h-[50vh] space-y-2 overflow-y-auto rounded border p-2">
+              {visibleColumns
+                .filter((col) => col.columnName !== "__checkbox__")
+                .map((col) => (
+                  <div key={col.columnName} className="hover:bg-muted/50 flex items-center gap-3 rounded p-2">
+                    <Checkbox
+                      id={`group-${col.columnName}`}
+                      checked={groupByColumns.includes(col.columnName)}
+                      onCheckedChange={() => toggleGroupColumn(col.columnName)}
+                    />
+                    <Label
+                      htmlFor={`group-${col.columnName}`}
+                      className="flex-1 cursor-pointer text-xs font-normal sm:text-sm"
+                    >
+                      {columnLabels[col.columnName] || col.displayName || col.columnName}
+                    </Label>
+                  </div>
+                ))}
+            </div>
+
+            {/* 선택된 그룹 안내 */}
+            <div className="text-muted-foreground bg-muted/30 rounded p-3 text-xs">
+              {groupByColumns.length === 0 ? (
+                <span>그룹화할 컬럼을 선택하세요</span>
+              ) : (
+                <span>
+                  선택된 그룹:{" "}
+                  <span className="text-primary font-semibold">
+                    {groupByColumns.map((col) => columnLabels[col] || col).join(" → ")}
+                  </span>
+                </span>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setIsGroupSettingOpen(false)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button onClick={saveGroupSettings} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              적용
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 };
diff --git a/테이블_그룹핑_기능_구현_계획서.md b/테이블_그룹핑_기능_구현_계획서.md
new file mode 100644
index 00000000..b6b86afa
--- /dev/null
+++ b/테이블_그룹핑_기능_구현_계획서.md
@@ -0,0 +1,365 @@
+# 테이블 그룹핑 기능 구현 계획서
+
+## 📋 개요
+
+테이블 리스트 컴포넌트와 플로우 위젯에 그룹핑 기능을 추가하여, 사용자가 선택한 컬럼(들)을 기준으로 데이터를 그룹화하여 표시합니다.
+
+## 🎯 핵심 요구사항
+
+### 1. 기능 요구사항
+- ✅ 그룹핑할 컬럼을 다중 선택 가능
+- ✅ 선택한 컬럼 순서대로 계층적 그룹화
+- ✅ 그룹 헤더에 그룹 정보와 데이터 개수 표시
+- ✅ 그룹 펼치기/접기 기능
+- ✅ localStorage에 그룹 설정 저장/복원
+- ✅ 그룹 해제 기능
+
+### 2. 적용 대상
+- TableListComponent (`frontend/lib/registry/components/table-list/TableListComponent.tsx`)
+- FlowWidget (`frontend/components/screen/widgets/FlowWidget.tsx`)
+
+## 🎨 UI 디자인
+
+### 그룹 설정 다이얼로그
+
+```tsx
+┌─────────────────────────────────────┐
+│ 📊 그룹 설정                         │
+│ 데이터를 그룹화할 컬럼을 선택하세요  │
+├─────────────────────────────────────┤
+│                                     │
+│ [x] 통화                             │
+│ [ ] 단위                             │
+│ [ ] 품목코드                         │
+│ [ ] 품목명                           │
+│ [ ] 규격                             │
+│                                     │
+│ 💡 선택된 그룹: 통화                 │
+│                                     │
+├─────────────────────────────────────┤
+│           [취소]  [적용]             │
+└─────────────────────────────────────┘
+```
+
+### 그룹화된 테이블 표시
+
+```tsx
+┌─────────────────────────────────────────────────────┐
+│ 📦 판매품목 목록        총 3개    [🎨 그룹: 통화 ×] │
+├─────────────────────────────────────────────────────┤
+│                                                     │
+│ ▼ 통화: KRW > 단위: EA  (2건)                       │
+│   ┌─────────────────────────────────────────────┐   │
+│   │ 품목코드  │ 품목명      │ 규격      │ 단위 │   │
+│   ├─────────────────────────────────────────────┤   │
+│   │ SALE-001 │ 볼트 M8x20  │ M8x20    │ EA  │   │
+│   │ SALE-004 │ 스프링 와셔  │ M10      │ EA  │   │
+│   └─────────────────────────────────────────────┘   │
+│                                                     │
+│ ▼ 통화: USD > 단위: EA  (1건)                       │
+│   ┌─────────────────────────────────────────────┐   │
+│   │ 품목코드  │ 품목명      │ 규격      │ 단위 │   │
+│   ├─────────────────────────────────────────────┤   │
+│   │ SALE-002 │ 너트 M8     │ M8       │ EA  │   │
+│   └─────────────────────────────────────────────┘   │
+│                                                     │
+└─────────────────────────────────────────────────────┘
+```
+
+## 🔧 기술 구현
+
+### 1. 상태 관리
+
+```typescript
+// 그룹 설정 관련 상태
+const [groupByColumns, setGroupByColumns] = useState<string[]>([]); // 그룹화할 컬럼 목록
+const [isGroupSettingOpen, setIsGroupSettingOpen] = useState(false); // 그룹 설정 다이얼로그
+const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set()); // 접힌 그룹
+```
+
+### 2. 데이터 그룹화 로직
+
+```typescript
+interface GroupedData {
+  groupKey: string; // "통화:KRW > 단위:EA"
+  groupValues: Record<string, any>; // { 통화: "KRW", 단위: "EA" }
+  items: any[]; // 그룹에 속한 데이터
+  count: number; // 항목 개수
+}
+
+const groupDataByColumns = (
+  data: any[], 
+  groupColumns: string[]
+): GroupedData[] => {
+  if (groupColumns.length === 0) return [];
+  
+  const grouped = new Map<string, any[]>();
+  
+  data.forEach(item => {
+    // 그룹 키 생성: "통화:KRW > 단위:EA"
+    const keyParts = groupColumns.map(col => `${col}:${item[col] || '-'}`);
+    const groupKey = keyParts.join(' > ');
+    
+    if (!grouped.has(groupKey)) {
+      grouped.set(groupKey, []);
+    }
+    grouped.get(groupKey)!.push(item);
+  });
+  
+  return Array.from(grouped.entries()).map(([groupKey, items]) => {
+    const groupValues: Record<string, any> = {};
+    groupColumns.forEach(col => {
+      groupValues[col] = items[0]?.[col];
+    });
+    
+    return {
+      groupKey,
+      groupValues,
+      items,
+      count: items.length,
+    };
+  });
+};
+```
+
+### 3. localStorage 저장/로드
+
+```typescript
+// 저장 키
+const groupSettingKey = useMemo(() => {
+  if (!tableConfig.selectedTable) return null;
+  return `table-list-group-${tableConfig.selectedTable}`;
+}, [tableConfig.selectedTable]);
+
+// 그룹 설정 저장
+const saveGroupSettings = useCallback(() => {
+  if (!groupSettingKey) return;
+  
+  try {
+    localStorage.setItem(groupSettingKey, JSON.stringify(groupByColumns));
+    setIsGroupSettingOpen(false);
+    toast.success("그룹 설정이 저장되었습니다");
+  } catch (error) {
+    console.error("그룹 설정 저장 실패:", error);
+    toast.error("설정 저장에 실패했습니다");
+  }
+}, [groupSettingKey, groupByColumns]);
+
+// 그룹 설정 로드
+useEffect(() => {
+  if (!groupSettingKey || visibleColumns.length === 0) return;
+  
+  try {
+    const saved = localStorage.getItem(groupSettingKey);
+    if (saved) {
+      const savedGroups = JSON.parse(saved);
+      setGroupByColumns(savedGroups);
+    }
+  } catch (error) {
+    console.error("그룹 설정 불러오기 실패:", error);
+  }
+}, [groupSettingKey, visibleColumns]);
+```
+
+### 4. 그룹 헤더 렌더링
+
+```tsx
+const renderGroupHeader = (group: GroupedData) => {
+  const isCollapsed = collapsedGroups.has(group.groupKey);
+  
+  return (
+    <div 
+      className="bg-muted/50 flex items-center gap-3 border-b p-3 cursor-pointer hover:bg-muted"
+      onClick={() => toggleGroupCollapse(group.groupKey)}
+    >
+      {/* 펼치기/접기 아이콘 */}
+      {isCollapsed ? (
+        <ChevronRight className="h-4 w-4" />
+      ) : (
+        <ChevronDown className="h-4 w-4" />
+      )}
+      
+      {/* 그룹 정보 */}
+      <span className="font-medium text-sm">
+        {groupByColumns.map((col, idx) => (
+          <span key={col}>
+            {idx > 0 && <span className="text-muted-foreground"> &gt; </span>}
+            <span className="text-muted-foreground">{columnLabels[col] || col}:</span>
+            {" "}
+            <span className="text-foreground">{group.groupValues[col]}</span>
+          </span>
+        ))}
+      </span>
+      
+      {/* 항목 개수 */}
+      <span className="text-muted-foreground text-xs ml-auto">
+        ({group.count}건)
+      </span>
+    </div>
+  );
+};
+```
+
+### 5. 그룹 설정 다이얼로그
+
+```tsx
+<Dialog open={isGroupSettingOpen} onOpenChange={setIsGroupSettingOpen}>
+  <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+    <DialogHeader>
+      <DialogTitle className="text-base sm:text-lg">그룹 설정</DialogTitle>
+      <DialogDescription className="text-xs sm:text-sm">
+        데이터를 그룹화할 컬럼을 선택하세요. 여러 컬럼을 선택하면 계층적으로 그룹화됩니다.
+      </DialogDescription>
+    </DialogHeader>
+
+    <div className="space-y-3 sm:space-y-4">
+      {/* 컬럼 목록 */}
+      <div className="max-h-[50vh] space-y-2 overflow-y-auto rounded border p-2">
+        {visibleColumns
+          .filter((col) => col.columnName !== "__checkbox__")
+          .map((col) => (
+            <div key={col.columnName} className="hover:bg-muted/50 flex items-center gap-3 rounded p-2">
+              <Checkbox
+                id={`group-${col.columnName}`}
+                checked={groupByColumns.includes(col.columnName)}
+                onCheckedChange={() => toggleGroupColumn(col.columnName)}
+              />
+              <Label
+                htmlFor={`group-${col.columnName}`}
+                className="flex-1 cursor-pointer text-xs font-normal sm:text-sm"
+              >
+                {columnLabels[col.columnName] || col.displayName || col.columnName}
+              </Label>
+            </div>
+          ))}
+      </div>
+
+      {/* 선택된 그룹 안내 */}
+      <div className="text-muted-foreground bg-muted/30 rounded p-3 text-xs">
+        {groupByColumns.length === 0 ? (
+          <span>그룹화할 컬럼을 선택하세요</span>
+        ) : (
+          <span>
+            선택된 그룹: <span className="text-primary font-semibold">
+              {groupByColumns.map((col) => columnLabels[col] || col).join(" → ")}
+            </span>
+          </span>
+        )}
+      </div>
+    </div>
+
+    <DialogFooter className="gap-2 sm:gap-0">
+      <Button
+        variant="outline"
+        onClick={() => setIsGroupSettingOpen(false)}
+        className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+      >
+        취소
+      </Button>
+      <Button onClick={saveGroupSettings} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+        적용
+      </Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+### 6. 그룹 해제 버튼
+
+```tsx
+{/* 헤더 영역 */}
+<div className="flex items-center justify-between">
+  <h2>{tableLabel}</h2>
+  <div className="flex items-center gap-2">
+    {/* 그룹 표시 배지 */}
+    {groupByColumns.length > 0 && (
+      <div className="bg-primary/10 text-primary flex items-center gap-2 rounded px-3 py-1 text-xs">
+        <span>그룹: {groupByColumns.map(col => columnLabels[col] || col).join(", ")}</span>
+        <button
+          onClick={() => {
+            setGroupByColumns([]);
+            localStorage.removeItem(groupSettingKey || "");
+            toast.success("그룹이 해제되었습니다");
+          }}
+          className="hover:bg-primary/20 rounded p-0.5"
+        >
+          <X className="h-3 w-3" />
+        </button>
+      </div>
+    )}
+    
+    {/* 그룹 설정 버튼 */}
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => setIsGroupSettingOpen(true)}
+    >
+      <Layers className="mr-2 h-4 w-4" />
+      그룹 설정
+    </Button>
+  </div>
+</div>
+```
+
+## 📝 구현 순서
+
+### Phase 1: TableListComponent 구현
+1. ✅ 상태 관리 추가 (groupByColumns, isGroupSettingOpen, collapsedGroups)
+2. ✅ 그룹화 로직 구현 (groupDataByColumns 함수)
+3. ✅ localStorage 저장/로드 로직
+4. ✅ 그룹 설정 다이얼로그 UI
+5. ✅ 그룹 헤더 렌더링
+6. ✅ 그룹별 데이터 렌더링
+7. ✅ 그룹 해제 기능
+
+### Phase 2: FlowWidget 구현
+1. ✅ TableListComponent와 동일한 로직 적용
+2. ✅ 스텝 데이터에 그룹화 적용
+3. ✅ UI 통일성 유지
+
+### Phase 3: 테스트 및 최적화
+1. ✅ 다중 그룹 계층 테스트
+2. ✅ 대량 데이터 성능 테스트
+3. ✅ localStorage 저장/복원 테스트
+4. ✅ 그룹 펼치기/접기 테스트
+
+## 🎯 예상 효과
+
+### 사용자 경험 개선
+- 데이터를 논리적으로 그룹화하여 가독성 향상
+- 대량 데이터를 효율적으로 탐색 가능
+- 사용자 정의 뷰 제공
+
+### 데이터 분석 지원
+- 카테고리별 데이터 분석 용이
+- 통계 정보 제공 (그룹별 개수)
+- 계층적 데이터 구조 시각화
+
+## ⚠️ 주의사항
+
+### 성능 고려사항
+- 그룹화는 클라이언트 측에서 수행
+- 대량 데이터의 경우 성능 저하 가능
+- 필요시 서버 측 그룹화로 전환 검토
+
+### 사용성
+- 그룹화 해제가 쉽게 가능해야 함
+- 그룹 설정이 직관적이어야 함
+- 모바일에서도 사용 가능한 UI
+
+## 📊 구현 상태
+
+- [ ] Phase 1: TableListComponent 구현
+  - [ ] 상태 관리 추가
+  - [ ] 그룹화 로직 구현
+  - [ ] localStorage 연동
+  - [ ] UI 구현
+- [ ] Phase 2: FlowWidget 구현
+- [ ] Phase 3: 테스트 및 최적화
+
+---
+
+**작성일**: 2025-11-03
+**버전**: 1.0
+**상태**: 구현 예정
+

From eb9c85f786f9f026ab2250df4db913de0ac0211a Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:13:12 +0900
Subject: [PATCH 38/49] =?UTF-8?q?feat:=20FlowWidget=EC=97=90=20=EA=B7=B8?=
 =?UTF-8?q?=EB=A3=B9=ED=95=91=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TableListComponent와 동일한 그룹핑 기능 적용
- 다중 컬럼 선택으로 계층적 그룹화 지원
- 그룹 설정 다이얼로그 추가
- 그룹별 데이터 펼치기/접기 기능
- 그룹 헤더에 항목 개수 표시
- localStorage에 그룹 설정 저장/복원
- 그룹 해제 버튼 추가
- 그룹 표시 배지 UI

주요 기능:
- 플로우 스텝 데이터에 그룹화 적용
- filteredData와 stepData 모두 지원
- 그룹 없을 때는 기존 페이지네이션 유지
- 그룹 있을 때는 모든 그룹 데이터 표시
---
 .../components/screen/widgets/FlowWidget.tsx  | 408 ++++++++++++++----
 1 file changed, 334 insertions(+), 74 deletions(-)

diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index 9cb0a207..4bf23ba4 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FlowComponent } from "@/types/screen-management";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { AlertCircle, Loader2, ChevronUp, Filter, X } from "lucide-react";
+import { AlertCircle, Loader2, ChevronUp, Filter, X, Layers, ChevronDown, ChevronRight } from "lucide-react";
 import {
   getFlowById,
   getAllStepCounts,
@@ -40,6 +40,14 @@ import { Input } from "@/components/ui/input";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 import { useAuth } from "@/hooks/useAuth";
 
+// 그룹화된 데이터 인터페이스
+interface GroupedData {
+  groupKey: string;
+  groupValues: Record<string, any>;
+  items: any[];
+  count: number;
+}
+
 interface FlowWidgetProps {
   component: FlowComponent;
   onStepClick?: (stepId: number, stepName: string) => void;
@@ -106,6 +114,11 @@ export function FlowWidget({
   const [allAvailableColumns, setAllAvailableColumns] = useState<string[]>([]); // 전체 컬럼 목록
   const [filteredData, setFilteredData] = useState<any[]>([]); // 필터링된 데이터
 
+  // 🆕 그룹 설정 관련 상태
+  const [isGroupSettingOpen, setIsGroupSettingOpen] = useState(false); // 그룹 설정 다이얼로그
+  const [groupByColumns, setGroupByColumns] = useState<string[]>([]); // 그룹화할 컬럼 목록
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set()); // 접힌 그룹
+
   /**
    * 🆕 컬럼 표시 결정 함수
    * 1순위: 플로우 스텝 기본 설정 (displayConfig)
@@ -163,43 +176,30 @@ export function FlowWidget({
         // 초기값: 빈 필터 (사용자가 선택해야 함)
         setSearchFilterColumns(new Set());
       }
-
-      // 이전 사용자의 필터 설정 정리 (사용자 ID가 다른 키들 제거)
-      if (typeof window !== "undefined") {
-        const currentUserId = user.userId;
-        const keysToRemove: string[] = [];
-        
-        // localStorage의 모든 키를 확인
-        for (let i = 0; i < localStorage.length; i++) {
-          const key = localStorage.key(i);
-          if (key && key.startsWith("flowWidget_searchFilters_")) {
-            // 키 형식: flowWidget_searchFilters_${userId}_${flowId}_${stepId}
-            // split("_")를 하면 ["flowWidget", "searchFilters", "사용자ID", "플로우ID", "스텝ID"]
-            // 따라서 userId는 parts[2]입니다
-            const parts = key.split("_");
-            if (parts.length >= 3) {
-              const userIdFromKey = parts[2]; // flowWidget_searchFilters_ 다음이 userId
-              // 현재 사용자 ID와 다른 사용자의 설정은 제거
-              if (userIdFromKey !== currentUserId) {
-                keysToRemove.push(key);
-              }
-            }
-          }
-        }
-        
-        // 이전 사용자의 설정 제거
-        if (keysToRemove.length > 0) {
-          keysToRemove.forEach(key => {
-            localStorage.removeItem(key);
-          });
-        }
-      }
     } catch (error) {
       console.error("필터 설정 불러오기 실패:", error);
       setSearchFilterColumns(new Set());
     }
   }, [filterSettingKey, stepDataColumns, user?.userId]);
 
+  // 🆕 저장된 그룹 설정 불러오기
+  useEffect(() => {
+    if (!groupSettingKey || stepDataColumns.length === 0) return;
+
+    try {
+      const saved = localStorage.getItem(groupSettingKey);
+      if (saved) {
+        const savedGroups = JSON.parse(saved);
+        // 현재 단계에 표시되는 컬럼만 필터링
+        const validGroups = savedGroups.filter((col: string) => stepDataColumns.includes(col));
+        setGroupByColumns(validGroups);
+      }
+    } catch (error) {
+      console.error("그룹 설정 불러오기 실패:", error);
+      setGroupByColumns([]);
+    }
+  }, [groupSettingKey, stepDataColumns]);
+
   // 🆕 필터 설정 저장
   const saveFilterSettings = useCallback(() => {
     if (!filterSettingKey) return;
@@ -247,6 +247,98 @@ export function FlowWidget({
     setFilteredData([]);
   }, []);
 
+  // 🆕 그룹 설정 localStorage 키 생성
+  const groupSettingKey = useMemo(() => {
+    if (!selectedStep) return null;
+    return `flowWidget_groupSettings_step_${selectedStep}`;
+  }, [selectedStep]);
+
+  // 🆕 그룹 설정 저장
+  const saveGroupSettings = useCallback(() => {
+    if (!groupSettingKey) return;
+
+    try {
+      localStorage.setItem(groupSettingKey, JSON.stringify(groupByColumns));
+      setIsGroupSettingOpen(false);
+      toast.success("그룹 설정이 저장되었습니다");
+    } catch (error) {
+      console.error("그룹 설정 저장 실패:", error);
+      toast.error("설정 저장에 실패했습니다");
+    }
+  }, [groupSettingKey, groupByColumns]);
+
+  // 🆕 그룹 컬럼 토글
+  const toggleGroupColumn = useCallback((columnName: string) => {
+    setGroupByColumns((prev) => {
+      if (prev.includes(columnName)) {
+        return prev.filter((col) => col !== columnName);
+      } else {
+        return [...prev, columnName];
+      }
+    });
+  }, []);
+
+  // 🆕 그룹 펼치기/접기 토글
+  const toggleGroupCollapse = useCallback((groupKey: string) => {
+    setCollapsedGroups((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(groupKey)) {
+        newSet.delete(groupKey);
+      } else {
+        newSet.add(groupKey);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // 🆕 그룹 해제
+  const clearGrouping = useCallback(() => {
+    setGroupByColumns([]);
+    setCollapsedGroups(new Set());
+    if (groupSettingKey) {
+      localStorage.removeItem(groupSettingKey);
+    }
+    toast.success("그룹이 해제되었습니다");
+  }, [groupSettingKey]);
+
+  // 🆕 데이터 그룹화
+  const groupedData = useMemo((): GroupedData[] => {
+    const dataToGroup = filteredData.length > 0 ? filteredData : stepData;
+    
+    if (groupByColumns.length === 0 || dataToGroup.length === 0) return [];
+
+    const grouped = new Map<string, any[]>();
+
+    dataToGroup.forEach((item) => {
+      // 그룹 키 생성: "통화:KRW > 단위:EA"
+      const keyParts = groupByColumns.map((col) => {
+        const value = item[col];
+        const label = columnLabels[col] || col;
+        return `${label}:${value !== null && value !== undefined ? value : "-"}`;
+      });
+      const groupKey = keyParts.join(" > ");
+
+      if (!grouped.has(groupKey)) {
+        grouped.set(groupKey, []);
+      }
+      grouped.get(groupKey)!.push(item);
+    });
+
+    return Array.from(grouped.entries()).map(([groupKey, items]) => {
+      const groupValues: Record<string, any> = {};
+      groupByColumns.forEach((col) => {
+        groupValues[col] = items[0]?.[col];
+      });
+
+      return {
+        groupKey,
+        groupValues,
+        items,
+        count: items.length,
+      };
+    });
+  }, [filteredData, stepData, groupByColumns, columnLabels]);
+
   // 🆕 검색 값이 변경될 때마다 자동 검색 (useEffect로 직접 처리)
   useEffect(() => {
     if (!stepData || stepData.length === 0) {
@@ -796,29 +888,82 @@ export function FlowWidget({
 
               {/* 🆕 필터 설정 버튼 */}
               {stepDataColumns.length > 0 && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    if (isPreviewMode) {
-                      return;
-                    }
-                    setIsFilterSettingOpen(true);
-                  }}
-                  disabled={isPreviewMode}
-                  className="h-8 shrink-0 text-xs sm:text-sm"
-                >
-                  <Filter className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
-                  검색 필터 설정
-                  {searchFilterColumns.size > 0 && (
-                    <Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
-                      {searchFilterColumns.size}
-                    </Badge>
-                  )}
-                </Button>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      if (isPreviewMode) {
+                        return;
+                      }
+                      setIsFilterSettingOpen(true);
+                    }}
+                    disabled={isPreviewMode}
+                    className="h-8 shrink-0 text-xs sm:text-sm"
+                  >
+                    <Filter className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
+                    검색 필터 설정
+                    {searchFilterColumns.size > 0 && (
+                      <Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
+                        {searchFilterColumns.size}
+                      </Badge>
+                    )}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      if (isPreviewMode) {
+                        return;
+                      }
+                      setIsGroupSettingOpen(true);
+                    }}
+                    disabled={isPreviewMode}
+                    className="h-8 shrink-0 text-xs sm:text-sm"
+                  >
+                    <Layers className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
+                    그룹 설정
+                    {groupByColumns.length > 0 && (
+                      <Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
+                        {groupByColumns.length}
+                      </Badge>
+                    )}
+                  </Button>
+                </div>
               )}
             </div>
 
+            {/* 🆕 그룹 표시 배지 */}
+            {groupByColumns.length > 0 && (
+              <div className="border-b border-border bg-muted/30 px-4 py-2">
+                <div className="flex items-center gap-2 text-xs sm:text-sm">
+                  <span className="text-muted-foreground">그룹:</span>
+                  <div className="flex flex-wrap items-center gap-2">
+                    {groupByColumns.map((col, idx) => (
+                      <span key={col} className="flex items-center">
+                        {idx > 0 && <span className="text-muted-foreground mx-1">→</span>}
+                        <span className="bg-primary/10 text-primary rounded px-2 py-1 text-xs font-medium">
+                          {columnLabels[col] || col}
+                        </span>
+                      </span>
+                    ))}
+                  </div>
+                  <button
+                    onClick={() => {
+                      if (!isPreviewMode) {
+                        clearGrouping();
+                      }
+                    }}
+                    disabled={isPreviewMode}
+                    className="hover:bg-destructive/10 text-destructive ml-auto rounded p-1"
+                    title="그룹 해제"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+            )}
+
             {/* 🆕 검색 필터 입력 영역 */}
             {searchFilterColumns.size > 0 && (
               <div className="mt-2 space-y-3 p-4">
@@ -940,29 +1085,87 @@ export function FlowWidget({
                     </TableRow>
                   </TableHeader>
                   <TableBody>
-                    {paginatedStepData.map((row, pageIndex) => {
-                      const actualIndex = (stepDataPage - 1) * stepDataPageSize + pageIndex;
-                      return (
-                        <TableRow
-                          key={actualIndex}
-                          className={`h-16 transition-colors hover:bg-muted/50 ${selectedRows.has(actualIndex) ? "bg-primary/5" : ""}`}
-                        >
-                          {allowDataMove && (
-                            <TableCell className="bg-background sticky left-0 z-10 border-b px-6 py-3 text-center">
-                              <Checkbox
-                                checked={selectedRows.has(actualIndex)}
-                                onCheckedChange={() => toggleRowSelection(actualIndex)}
-                              />
+                    {groupByColumns.length > 0 && groupedData.length > 0 ? (
+                      // 그룹화된 렌더링
+                      groupedData.flatMap((group) => {
+                        const isCollapsed = collapsedGroups.has(group.groupKey);
+                        const groupRows = [
+                          <TableRow key={`group-${group.groupKey}`}>
+                            <TableCell
+                              colSpan={stepDataColumns.length + (allowDataMove ? 1 : 0)}
+                              className="bg-muted/50 border-b"
+                            >
+                              <div
+                                className="flex items-center gap-3 p-2 cursor-pointer hover:bg-muted"
+                                onClick={() => toggleGroupCollapse(group.groupKey)}
+                              >
+                                {isCollapsed ? (
+                                  <ChevronRight className="h-4 w-4 flex-shrink-0" />
+                                ) : (
+                                  <ChevronDown className="h-4 w-4 flex-shrink-0" />
+                                )}
+                                <span className="font-medium text-sm flex-1">{group.groupKey}</span>
+                                <span className="text-muted-foreground text-xs">({group.count}건)</span>
+                              </div>
                             </TableCell>
-                          )}
-                          {stepDataColumns.map((col) => (
-                            <TableCell key={col} className="h-16 border-b px-6 py-3 text-sm whitespace-nowrap">
-                              {formatValue(row[col])}
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      );
-                    })}
+                          </TableRow>,
+                        ];
+
+                        if (!isCollapsed) {
+                          const dataRows = group.items.map((row, itemIndex) => {
+                            const actualIndex = displayData.indexOf(row);
+                            return (
+                              <TableRow
+                                key={`${group.groupKey}-${itemIndex}`}
+                                className={`h-16 transition-colors hover:bg-muted/50 ${selectedRows.has(actualIndex) ? "bg-primary/5" : ""}`}
+                              >
+                                {allowDataMove && (
+                                  <TableCell className="bg-background sticky left-0 z-10 border-b px-6 py-3 text-center">
+                                    <Checkbox
+                                      checked={selectedRows.has(actualIndex)}
+                                      onCheckedChange={() => toggleRowSelection(actualIndex)}
+                                    />
+                                  </TableCell>
+                                )}
+                                {stepDataColumns.map((col) => (
+                                  <TableCell key={col} className="h-16 border-b px-6 py-3 text-sm whitespace-nowrap">
+                                    {formatValue(row[col])}
+                                  </TableCell>
+                                ))}
+                              </TableRow>
+                            );
+                          });
+                          groupRows.push(...dataRows);
+                        }
+
+                        return groupRows;
+                      })
+                    ) : (
+                      // 일반 렌더링 (그룹 없음)
+                      paginatedStepData.map((row, pageIndex) => {
+                        const actualIndex = (stepDataPage - 1) * stepDataPageSize + pageIndex;
+                        return (
+                          <TableRow
+                            key={actualIndex}
+                            className={`h-16 transition-colors hover:bg-muted/50 ${selectedRows.has(actualIndex) ? "bg-primary/5" : ""}`}
+                          >
+                            {allowDataMove && (
+                              <TableCell className="bg-background sticky left-0 z-10 border-b px-6 py-3 text-center">
+                                <Checkbox
+                                  checked={selectedRows.has(actualIndex)}
+                                  onCheckedChange={() => toggleRowSelection(actualIndex)}
+                                />
+                              </TableCell>
+                            )}
+                            {stepDataColumns.map((col) => (
+                              <TableCell key={col} className="h-16 border-b px-6 py-3 text-sm whitespace-nowrap">
+                                {formatValue(row[col])}
+                              </TableCell>
+                            ))}
+                          </TableRow>
+                        );
+                      })
+                    )}
                   </TableBody>
                 </Table>
               </div>
@@ -1162,6 +1365,63 @@ export function FlowWidget({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* 🆕 그룹 설정 다이얼로그 */}
+      <Dialog open={isGroupSettingOpen} onOpenChange={setIsGroupSettingOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">그룹 설정</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              데이터를 그룹화할 컬럼을 선택하세요. 여러 컬럼을 선택하면 계층적으로 그룹화됩니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 sm:space-y-4">
+            {/* 컬럼 목록 */}
+            <div className="max-h-[50vh] space-y-2 overflow-y-auto rounded border p-2">
+              {stepDataColumns.map((col) => (
+                <div key={col} className="hover:bg-muted/50 flex items-center gap-3 rounded p-2">
+                  <Checkbox
+                    id={`group-${col}`}
+                    checked={groupByColumns.includes(col)}
+                    onCheckedChange={() => toggleGroupColumn(col)}
+                  />
+                  <Label htmlFor={`group-${col}`} className="flex-1 cursor-pointer text-xs font-normal sm:text-sm">
+                    {columnLabels[col] || col}
+                  </Label>
+                </div>
+              ))}
+            </div>
+
+            {/* 선택된 그룹 안내 */}
+            <div className="text-muted-foreground bg-muted/30 rounded p-3 text-xs">
+              {groupByColumns.length === 0 ? (
+                <span>그룹화할 컬럼을 선택하세요</span>
+              ) : (
+                <span>
+                  선택된 그룹:{" "}
+                  <span className="text-primary font-semibold">
+                    {groupByColumns.map((col) => columnLabels[col] || col).join(" → ")}
+                  </span>
+                </span>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setIsGroupSettingOpen(false)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button onClick={saveGroupSettings} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              적용
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

From 71f38a38e0ee541baf5c6e71385bbe03d178e797 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:19:13 +0900
Subject: [PATCH 39/49] =?UTF-8?q?fix:=20FlowWidget=20groupSettingKey=20?=
 =?UTF-8?q?=EB=B3=80=EC=88=98=EB=AA=85=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- selectedStep -> selectedStepId로 수정
- groupSettingKey 선언 위치를 useEffect 이전으로 이동
- 중복 선언 제거
---
 frontend/components/screen/widgets/FlowWidget.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index 4bf23ba4..0caa97e4 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -160,6 +160,12 @@ export function FlowWidget({
     return `flowWidget_searchFilters_${user.userId}_${flowId}_${selectedStepId}`;
   }, [flowId, selectedStepId, user?.userId]);
 
+  // 🆕 그룹 설정 localStorage 키 생성
+  const groupSettingKey = useMemo(() => {
+    if (!selectedStepId) return null;
+    return `flowWidget_groupSettings_step_${selectedStepId}`;
+  }, [selectedStepId]);
+
   // 🆕 저장된 필터 설정 불러오기
   useEffect(() => {
     if (!filterSettingKey || stepDataColumns.length === 0 || !user?.userId) return;
@@ -247,12 +253,6 @@ export function FlowWidget({
     setFilteredData([]);
   }, []);
 
-  // 🆕 그룹 설정 localStorage 키 생성
-  const groupSettingKey = useMemo(() => {
-    if (!selectedStep) return null;
-    return `flowWidget_groupSettings_step_${selectedStep}`;
-  }, [selectedStep]);
-
   // 🆕 그룹 설정 저장
   const saveGroupSettings = useCallback(() => {
     if (!groupSettingKey) return;

From ac40f0227eb41a679ac601717be351ba7b3b8690 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:23:53 +0900
Subject: [PATCH 40/49] =?UTF-8?q?refactor:=20TableListComponent=EC=99=80?=
 =?UTF-8?q?=20FlowWidget=20=EC=83=81=EB=8B=A8=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TableListComponent: showHeader 조건부 렌더링 제거
  - 타이틀 표시 영역 삭제
  - 공간 절약을 위해 헤더 완전 제거

- FlowWidget: 플로우 제목 및 설명 영역 제거
  - flowData.name 표시 영역 삭제
  - flowData.description 표시 영역 삭제
  - 더 많은 데이터 표시 공간 확보

UI 개선:
- 불필요한 헤더 제거로 컨텐츠 영역 확대
- 더 많은 데이터를 한 화면에 표시 가능
---
 .../components/screen/widgets/FlowWidget.tsx    | 11 -----------
 .../table-list/TableListComponent.tsx           | 17 -----------------
 2 files changed, 28 deletions(-)

diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index 0caa97e4..d3aca16f 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -771,17 +771,6 @@ export function FlowWidget({
 
   return (
     <div className="@container flex w-full flex-col p-2 sm:p-4 lg:p-6">
-      {/* 플로우 제목 */}
-      <div className="mb-3 flex-shrink-0 sm:mb-4">
-        <div className="flex items-center justify-center gap-2">
-          <h3 className="text-foreground text-base font-semibold sm:text-lg lg:text-xl">{flowData.name}</h3>
-        </div>
-
-        {flowData.description && (
-          <p className="text-muted-foreground mt-1 text-center text-xs sm:text-sm">{flowData.description}</p>
-        )}
-      </div>
-
       {/* 플로우 스텝 목록 */}
       <div className={`${containerClass} flex-shrink-0`}>
         {steps.map((step, index) => (
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 9ee28aac..365c1bc5 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1084,14 +1084,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   if (tableConfig.stickyHeader && !isDesignMode) {
     return (
       <div {...domProps}>
-        {tableConfig.showHeader && (
-          <div className="px-4 py-3 border-b border-border sm:px-6 sm:py-4">
-            <h2 className="text-base font-semibold text-foreground sm:text-lg">
-              {tableConfig.title || tableLabel || finalSelectedTable}
-            </h2>
-          </div>
-        )}
-
         {tableConfig.filter?.enabled && (
           <div className="px-4 py-3 border-b border-border sm:px-6 sm:py-4">
             <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-4">
@@ -1184,15 +1176,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   return (
     <>
       <div {...domProps}>
-        {/* 헤더 */}
-        {tableConfig.showHeader && (
-          <div className="px-4 py-3 border-b border-border flex-shrink-0 sm:px-6 sm:py-4">
-            <h2 className="text-base font-semibold text-foreground sm:text-lg">
-              {tableConfig.title || tableLabel || finalSelectedTable}
-            </h2>
-          </div>
-        )}
-
         {/* 필터 */}
         {tableConfig.filter?.enabled && (
           <div className="px-4 py-3 border-b border-border flex-shrink-0 sm:px-6 sm:py-4">

From 4386a009a42c940a8e7dcec67c444dc3c20ef52f Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:25:53 +0900
Subject: [PATCH 41/49] =?UTF-8?q?refactor:=20FlowWidget=20=EC=8A=A4?=
 =?UTF-8?q?=ED=85=9D=20=EC=B9=B4=EB=93=9C=EC=97=90=EC=84=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=85=9D=20=EC=9D=B4=EB=A6=84=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 스텝 이름(stepName) 표시 영역 완전 제거
- 데이터 건수만 표시하도록 간소화
- 하단 선택 바와 건수만으로 스텝 구분
- 패딩 조정 (pb-5 -> pb-3, pb-6 -> pb-4)

UI 개선:
- 스텝 영역 높이 감소로 공간 절약
- 더 많은 데이터 표시 공간 확보
- 시각적으로 더 간결한 인터페이스
---
 frontend/components/screen/widgets/FlowWidget.tsx | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index d3aca16f..b40e2358 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -781,16 +781,7 @@ export function FlowWidget({
               onClick={() => handleStepClick(step.id, step.stepName)}
             >
               {/* 콘텐츠 */}
-              <div className="relative flex flex-col items-center justify-center gap-2 pb-5 sm:gap-2.5 sm:pb-6">
-                {/* 스텝 이름 */}
-                <h4
-                  className={`text-base font-semibold leading-tight transition-colors duration-300 sm:text-lg lg:text-xl ${
-                    selectedStepId === step.id ? "text-primary" : "text-foreground group-hover:text-primary/80"
-                  }`}
-                >
-                  {step.stepName}
-                </h4>
-
+              <div className="relative flex flex-col items-center justify-center gap-2 pb-3 sm:gap-2.5 sm:pb-4">
                 {/* 데이터 건수 */}
                 {showStepCount && (
                   <div

From e6cc671808faff9ac5146a624563464ba0557f7c Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:28:03 +0900
Subject: [PATCH 42/49] =?UTF-8?q?refactor:=20FlowWidget=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

변경사항:
- 스텝 이름 복원 (탭 영역에 표시되므로 필요)
- 데이터 테이블 위 헤더 영역 제거
  - 스텝 이름 중복 표시 제거
  - '총 N건의 데이터' 표시 제거
  - 필터링/선택 건수 표시 제거
- 필터 설정 및 그룹 설정 버튼은 유지
- justify-end로 버튼 오른쪽 정렬

UI 개선:
- 데이터 영역 확대로 더 많은 정보 표시
- 중복 정보 제거로 깔끔한 인터페이스
- 필요한 설정 버튼만 간결하게 배치
---
 .../components/screen/widgets/FlowWidget.tsx  | 42 ++++++++-----------
 1 file changed, 17 insertions(+), 25 deletions(-)

diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index b40e2358..d0a7aabf 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -781,7 +781,16 @@ export function FlowWidget({
               onClick={() => handleStepClick(step.id, step.stepName)}
             >
               {/* 콘텐츠 */}
-              <div className="relative flex flex-col items-center justify-center gap-2 pb-3 sm:gap-2.5 sm:pb-4">
+              <div className="relative flex flex-col items-center justify-center gap-2 pb-5 sm:gap-2.5 sm:pb-6">
+                {/* 스텝 이름 */}
+                <h4
+                  className={`text-base font-semibold leading-tight transition-colors duration-300 sm:text-lg lg:text-xl ${
+                    selectedStepId === step.id ? "text-primary" : "text-foreground group-hover:text-primary/80"
+                  }`}
+                >
+                  {step.stepName}
+                </h4>
+
                 {/* 데이터 건수 */}
                 {showStepCount && (
                   <div
@@ -848,28 +857,11 @@ export function FlowWidget({
       {/* 선택된 스텝의 데이터 리스트 */}
       {selectedStepId !== null && (
         <div className="mt-4 flex w-full flex-col sm:mt-6 lg:mt-8">
-          {/* 헤더 - 자동 높이 */}
-          <div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
-            <div className="flex items-start justify-between gap-3">
-              <div className="flex-1">
-                <h4 className="text-foreground text-base font-semibold sm:text-lg">
-                  {steps.find((s) => s.id === selectedStepId)?.stepName}
-                </h4>
-                <p className="text-muted-foreground mt-1 text-xs sm:text-sm">
-                  총 {stepData.length}건의 데이터
-                  {filteredData.length > 0 && (
-                    <span className="text-primary ml-2 font-medium">(필터링: {filteredData.length}건)</span>
-                  )}
-                  {selectedRows.size > 0 && (
-                    <span className="text-primary ml-2 font-medium">({selectedRows.size}건 선택됨)</span>
-                  )}
-                </p>
-              </div>
-
-              {/* 🆕 필터 설정 버튼 */}
-              {stepDataColumns.length > 0 && (
-                <div className="flex gap-2">
-                  <Button
+          {/* 필터 및 그룹 설정 */}
+          {stepDataColumns.length > 0 && (
+            <div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
+              <div className="flex justify-end gap-2">
+                <Button
                     variant="outline"
                     size="sm"
                     onClick={() => {
@@ -910,8 +902,8 @@ export function FlowWidget({
                     )}
                   </Button>
                 </div>
-              )}
-            </div>
+              </div>
+            )}
 
             {/* 🆕 그룹 표시 배지 */}
             {groupByColumns.length > 0 && (

From 9f4884f76100adf520dd71c9b4ef898b1d95bdec Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:28:55 +0900
Subject: [PATCH 43/49] =?UTF-8?q?fix:=20FlowWidget=20JSX=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fragment(<>)로 그룹 표시 배지와 검색 필터 영역 감싸기
- stepDataColumns.length > 0 조건 내부로 모든 관련 UI 통합
- 닫는 태그 구조 수정

빌드 오류 해결:
- Expected '</>', got '{' 에러 해결
- JSX 중첩 구조 정상화
---
 .../components/screen/widgets/FlowWidget.tsx    | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index d0a7aabf..dcc4c677 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -859,9 +859,10 @@ export function FlowWidget({
         <div className="mt-4 flex w-full flex-col sm:mt-6 lg:mt-8">
           {/* 필터 및 그룹 설정 */}
           {stepDataColumns.length > 0 && (
-            <div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
-              <div className="flex justify-end gap-2">
-                <Button
+            <>
+              <div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
+                <div className="flex justify-end gap-2">
+                  <Button
                     variant="outline"
                     size="sm"
                     onClick={() => {
@@ -903,10 +904,9 @@ export function FlowWidget({
                   </Button>
                 </div>
               </div>
-            )}
 
-            {/* 🆕 그룹 표시 배지 */}
-            {groupByColumns.length > 0 && (
+              {/* 🆕 그룹 표시 배지 */}
+              {groupByColumns.length > 0 && (
               <div className="border-b border-border bg-muted/30 px-4 py-2">
                 <div className="flex items-center gap-2 text-xs sm:text-sm">
                   <span className="text-muted-foreground">그룹:</span>
@@ -970,8 +970,9 @@ export function FlowWidget({
                   ))}
                 </div>
               </div>
-            )}
-          </div>
+              )}
+            </>
+          )}
 
           {/* 데이터 영역 - 고정 높이 + 스크롤 */}
           {stepDataLoading ? (

From 57738fbfc20d17a42c1861505e3a3aa1b4c44fac Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:31:27 +0900
Subject: [PATCH 44/49] =?UTF-8?q?refactor:=20FlowWidget=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20=ED=95=84=ED=84=B0=20UI=EB=A5=BC=20=ED=95=9C=20?=
 =?UTF-8?q?=EC=A4=84=EB=A1=9C=20=ED=86=B5=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

변경사항:
- 검색 필터 입력 필드를 버튼과 같은 Y좌표에 배치
- Label 제거 (placeholder로 충분)
- flex-wrap으로 여러 필터 자동 줄바꿈
- 고정 너비(w-40)로 일관된 입력 필드 크기
- 초기화 버튼 ml-auto로 오른쪽 정렬
- grid 레이아웃 제거하고 flex로 변경

UI 개선:
- TableListComponent와 동일한 스타일 적용
- 공간 절약 및 깔끔한 인터페이스
- 필터 설정, 그룹 설정, 검색 입력이 모두 같은 영역에 위치
---
 .../components/screen/widgets/FlowWidget.tsx  | 38 ++++++++-----------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index dcc4c677..d5835ef3 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -936,26 +936,13 @@ export function FlowWidget({
               </div>
             )}
 
-            {/* 🆕 검색 필터 입력 영역 */}
-            {searchFilterColumns.size > 0 && (
-              <div className="mt-2 space-y-3 p-4">
-                <div className="flex items-center justify-end">
-                  {Object.keys(searchValues).length > 0 && (
-                    <Button variant="ghost" size="sm" onClick={handleClearSearch} className="h-7 text-xs">
-                      <X className="mr-1 h-3 w-3" />
-                      초기화
-                    </Button>
-                  )}
-                </div>
-
-                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
-                  {Array.from(searchFilterColumns).map((col) => (
-                    <div key={col} className="space-y-1.5">
-                      <Label htmlFor={`search-${col}`} className="text-xs">
-                        {columnLabels[col] || col}
-                      </Label>
+              {/* 🆕 검색 필터 입력 영역 */}
+              {searchFilterColumns.size > 0 && (
+                <div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    {Array.from(searchFilterColumns).map((col) => (
                       <Input
-                        id={`search-${col}`}
+                        key={col}
                         value={searchValues[col] || ""}
                         onChange={(e) =>
                           setSearchValues((prev) => ({
@@ -964,12 +951,17 @@ export function FlowWidget({
                           }))
                         }
                         placeholder={`${columnLabels[col] || col} 검색...`}
-                        className="h-8 text-xs"
+                        className="h-8 text-xs w-40"
                       />
-                    </div>
-                  ))}
+                    ))}
+                    {Object.keys(searchValues).length > 0 && (
+                      <Button variant="ghost" size="sm" onClick={handleClearSearch} className="h-8 text-xs ml-auto">
+                        <X className="mr-1 h-3 w-3" />
+                        초기화
+                      </Button>
+                    )}
+                  </div>
                 </div>
-              </div>
               )}
             </>
           )}

From d9681bb64de4d9b190ed558c493511a2720675d1 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:32:51 +0900
Subject: [PATCH 45/49] =?UTF-8?q?refactor:=20FlowWidget=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20=ED=95=84=ED=84=B0=EB=A5=BC=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=EA=B3=BC=20=EA=B0=99=EC=9D=80=20=EC=A4=84?=
 =?UTF-8?q?=EC=97=90=20=EB=B0=B0=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

변경사항:
- 검색 필터 입력 필드를 필터 설정/그룹 설정 버튼과 동일한 Y좌표에 배치
- 한 줄 레이아웃: [검색입력들...] [초기화] ... [필터설정] [그룹설정]
- ml-auto로 설정 버튼들 오른쪽 정렬
- 검색 필드는 왼쪽부터, 설정 버튼은 오른쪽에 배치
- 중복된 검색 필터 입력 영역 제거

UI 개선:
- 모든 컨트롤이 하나의 수평선상에 위치
- 공간 효율성 극대화
- 사용자가 요청한 레이아웃 정확히 구현
---
 .../components/screen/widgets/FlowWidget.tsx  | 139 +++++++++---------
 1 file changed, 70 insertions(+), 69 deletions(-)

diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index d5835ef3..fd24ea19 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -861,47 +861,76 @@ export function FlowWidget({
           {stepDataColumns.length > 0 && (
             <>
               <div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
-                <div className="flex justify-end gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => {
-                      if (isPreviewMode) {
-                        return;
-                      }
-                      setIsFilterSettingOpen(true);
-                    }}
-                    disabled={isPreviewMode}
-                    className="h-8 shrink-0 text-xs sm:text-sm"
-                  >
-                    <Filter className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
-                    검색 필터 설정
-                    {searchFilterColumns.size > 0 && (
-                      <Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
-                        {searchFilterColumns.size}
-                      </Badge>
-                    )}
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => {
-                      if (isPreviewMode) {
-                        return;
-                      }
-                      setIsGroupSettingOpen(true);
-                    }}
-                    disabled={isPreviewMode}
-                    className="h-8 shrink-0 text-xs sm:text-sm"
-                  >
-                    <Layers className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
-                    그룹 설정
-                    {groupByColumns.length > 0 && (
-                      <Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
-                        {groupByColumns.length}
-                      </Badge>
-                    )}
-                  </Button>
+                <div className="flex items-center gap-2 flex-wrap">
+                  {/* 검색 필터 입력 영역 */}
+                  {searchFilterColumns.size > 0 && (
+                    <>
+                      {Array.from(searchFilterColumns).map((col) => (
+                        <Input
+                          key={col}
+                          value={searchValues[col] || ""}
+                          onChange={(e) =>
+                            setSearchValues((prev) => ({
+                              ...prev,
+                              [col]: e.target.value,
+                            }))
+                          }
+                          placeholder={`${columnLabels[col] || col} 검색...`}
+                          className="h-8 text-xs w-40"
+                        />
+                      ))}
+                      {Object.keys(searchValues).length > 0 && (
+                        <Button variant="ghost" size="sm" onClick={handleClearSearch} className="h-8 text-xs">
+                          <X className="mr-1 h-3 w-3" />
+                          초기화
+                        </Button>
+                      )}
+                    </>
+                  )}
+                  
+                  {/* 필터/그룹 설정 버튼 */}
+                  <div className="flex gap-2 ml-auto">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        if (isPreviewMode) {
+                          return;
+                        }
+                        setIsFilterSettingOpen(true);
+                      }}
+                      disabled={isPreviewMode}
+                      className="h-8 shrink-0 text-xs sm:text-sm"
+                    >
+                      <Filter className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
+                      검색 필터 설정
+                      {searchFilterColumns.size > 0 && (
+                        <Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
+                          {searchFilterColumns.size}
+                        </Badge>
+                      )}
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        if (isPreviewMode) {
+                          return;
+                        }
+                        setIsGroupSettingOpen(true);
+                      }}
+                      disabled={isPreviewMode}
+                      className="h-8 shrink-0 text-xs sm:text-sm"
+                    >
+                      <Layers className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
+                      그룹 설정
+                      {groupByColumns.length > 0 && (
+                        <Badge variant="secondary" className="ml-2 h-5 px-1.5 text-[10px]">
+                          {groupByColumns.length}
+                        </Badge>
+                      )}
+                    </Button>
+                  </div>
                 </div>
               </div>
 
@@ -935,34 +964,6 @@ export function FlowWidget({
                 </div>
               </div>
             )}
-
-              {/* 🆕 검색 필터 입력 영역 */}
-              {searchFilterColumns.size > 0 && (
-                <div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
-                  <div className="flex items-center gap-2 flex-wrap">
-                    {Array.from(searchFilterColumns).map((col) => (
-                      <Input
-                        key={col}
-                        value={searchValues[col] || ""}
-                        onChange={(e) =>
-                          setSearchValues((prev) => ({
-                            ...prev,
-                            [col]: e.target.value,
-                          }))
-                        }
-                        placeholder={`${columnLabels[col] || col} 검색...`}
-                        className="h-8 text-xs w-40"
-                      />
-                    ))}
-                    {Object.keys(searchValues).length > 0 && (
-                      <Button variant="ghost" size="sm" onClick={handleClearSearch} className="h-8 text-xs ml-auto">
-                        <X className="mr-1 h-3 w-3" />
-                        초기화
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              )}
             </>
           )}
 

From e732ed2891f7d4c9ef0bb39722222e5658dd71a8 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:36:15 +0900
Subject: [PATCH 46/49] =?UTF-8?q?fix:=20TableListComponent=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=B3=80=ED=99=98=20=EC=A1=B0=EA=B1=B4=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

문제:
- webType과 codeCategory가 있기만 하면 무조건 코드 변환 시도
- 코드 타입이 아닌 컬럼도 코드 카테고리 값으로 변환되는 오류

해결:
- webType === 'code'일 때만 코드 변환 수행
- 다른 webType(text, number 등)은 코드 변환 건너뛰기

변경:
- meta?.webType && meta?.codeCategory
  → meta?.webType === 'code' && meta?.codeCategory
---
 .../lib/registry/components/table-list/TableListComponent.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 365c1bc5..8931b57c 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -675,7 +675,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       }
 
       const meta = columnMeta[column.columnName];
-      if (meta?.webType && meta?.codeCategory) {
+      if (meta?.webType === "code" && meta?.codeCategory) {
         const convertedValue = optimizedConvertCode(value, meta.codeCategory);
         if (convertedValue !== value) return convertedValue;
       }

From 6a329506a84854228a663dd5e4d38a7c47823e68 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:38:27 +0900
Subject: [PATCH 47/49] =?UTF-8?q?fix:=20TableListComponent=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=B3=80=ED=99=98=20=EB=A1=9C=EC=A7=81=20=EC=99=84?=
 =?UTF-8?q?=EC=A0=84=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

문제:
- inputType이 'code'인 컬럼에서 코드 변환이 실행되어
- 실제 저장된 값 대신 코드 카테고리 값이 표시됨
- 사용자가 원하는 것은 원본 값 그대로 표시

해결:
- 코드 변환 로직 완전 제거
- inputType에 관계없이 원본 값 그대로 표시
- 숫자/날짜 등 기본 포맷팅만 유지

변경:
- optimizedConvertCode 호출 제거
- inputType === 'code' 조건 제거
- 원본 데이터 표시로 단순화
---
 .../registry/components/table-list/TableListComponent.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 8931b57c..d3ae5046 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -675,13 +675,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       }
 
       const meta = columnMeta[column.columnName];
-      if (meta?.webType === "code" && meta?.codeCategory) {
-        const convertedValue = optimizedConvertCode(value, meta.codeCategory);
-        if (convertedValue !== value) return convertedValue;
-      }
-
+      
       // inputType 기반 포맷팅 (columnMeta에서 가져온 inputType 우선)
       const inputType = meta?.inputType || column.inputType;
+      
+      // 숫자 타입 포맷팅
       if (inputType === "number" || inputType === "decimal") {
         if (value !== null && value !== undefined && value !== "") {
           const numValue = typeof value === "string" ? parseFloat(value) : value;

From a3f945f5df483551ecca0e5cb54b7c3662c379a2 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:39:43 +0900
Subject: [PATCH 48/49] =?UTF-8?q?fix:=20TableListComponent=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=B3=80=ED=99=98=20=EB=A1=9C=EC=A7=81=20=EC=9E=AC?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

요구사항:
- DB에 저장된 코드 값(예: '001') → 코드명(예: '활성')으로 표시

구현:
- inputType === 'code'이고 codeCategory가 있을 때 변환 수행
- optimizedConvertCode를 통해 코드 값 → 코드명 변환
- 변환 성공 시 코드명 반환
- 변환 실패 시 원본 코드 값 반환
- try-catch로 에러 핸들링 추가
- 디버깅을 위한 에러 로그 추가

변경:
- 코드 변환 로직 복원
- 에러 처리 강화
- 변환 실패 시 원본 값 표시로 안전장치
---
 .../components/table-list/TableListComponent.tsx  | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index d3ae5046..5b2659ee 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -679,6 +679,21 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       // inputType 기반 포맷팅 (columnMeta에서 가져온 inputType 우선)
       const inputType = meta?.inputType || column.inputType;
       
+      // 코드 타입: 코드 값 → 코드명 변환
+      if (inputType === "code" && meta?.codeCategory && value) {
+        try {
+          const convertedValue = optimizedConvertCode(value, meta.codeCategory);
+          // 변환에 성공했으면 변환된 코드명 반환
+          if (convertedValue && convertedValue !== value) {
+            return convertedValue;
+          }
+        } catch (error) {
+          console.error(`코드 변환 실패: ${column.columnName}, 카테고리: ${meta.codeCategory}, 값: ${value}`, error);
+        }
+        // 변환 실패 시 원본 코드 값 반환
+        return String(value);
+      }
+      
       // 숫자 타입 포맷팅
       if (inputType === "number" || inputType === "decimal") {
         if (value !== null && value !== undefined && value !== "") {

From 9a3d65d8d030c325633a95b3cb57c6cc3be26999 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 14:41:12 +0900
Subject: [PATCH 49/49] =?UTF-8?q?fix:=20TableListComponent=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=B3=80=ED=99=98=20=ED=8C=8C=EB=9D=BC=EB=AF=B8?=
 =?UTF-8?q?=ED=84=B0=20=EC=88=9C=EC=84=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

문제:
- optimizedConvertCode(value, meta.codeCategory) ❌
- 함수 정의: optimizedConvertCode(categoryCode, codeValue)
- 파라미터 순서가 반대로 전달되어 카테고리 값이 표시됨

해결:
- optimizedConvertCode(meta.codeCategory, value) ✅
- 올바른 순서: (카테고리, 코드값)
- 이제 코드명이 정상적으로 표시됨

변경:
- 파라미터 순서 수정
- 주석 추가로 재발 방지
---
 .../lib/registry/components/table-list/TableListComponent.tsx  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 5b2659ee..74a53561 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -682,7 +682,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       // 코드 타입: 코드 값 → 코드명 변환
       if (inputType === "code" && meta?.codeCategory && value) {
         try {
-          const convertedValue = optimizedConvertCode(value, meta.codeCategory);
+          // optimizedConvertCode(categoryCode, codeValue) 순서 주의!
+          const convertedValue = optimizedConvertCode(meta.codeCategory, value);
           // 변환에 성공했으면 변환된 코드명 반환
           if (convertedValue && convertedValue !== value) {
             return convertedValue;