diff --git a/backend-node/src/controllers/authController.ts b/backend-node/src/controllers/authController.ts
index ba9dcdc1..374015ee 100644
--- a/backend-node/src/controllers/authController.ts
+++ b/backend-node/src/controllers/authController.ts
@@ -59,12 +59,56 @@ export class AuthController {
         logger.info(`- userName: ${userInfo.userName}`);
         logger.info(`- companyCode: ${userInfo.companyCode}`);
 
+        // 사용자의 첫 번째 접근 가능한 메뉴 조회
+        let firstMenuPath: string | null = null;
+        try {
+          const { AdminService } = await import("../services/adminService");
+          const paramMap = {
+            userId: loginResult.userInfo.userId,
+            userCompanyCode: loginResult.userInfo.companyCode || "ILSHIN",
+            userType: loginResult.userInfo.userType,
+            userLang: "ko",
+          };
+
+          const menuList = await AdminService.getUserMenuList(paramMap);
+          logger.info(`로그인 후 메뉴 조회: 총 ${menuList.length}개 메뉴`);
+
+          // 접근 가능한 첫 번째 메뉴 찾기
+          // 조건:
+          // 1. LEV (레벨)이 2 이상 (최상위 폴더 제외)
+          // 2. MENU_URL이 있고 비어있지 않음
+          // 3. 이미 PATH, SEQ로 정렬되어 있으므로 첫 번째로 찾은 것이 첫 번째 메뉴
+          const firstMenu = menuList.find((menu: any) => {
+            const level = menu.lev || menu.level;
+            const url = menu.menu_url || menu.url;
+
+            return level >= 2 && url && url.trim() !== "" && url !== "#";
+          });
+
+          if (firstMenu) {
+            firstMenuPath = firstMenu.menu_url || firstMenu.url;
+            logger.info(`✅ 첫 번째 접근 가능한 메뉴 발견:`, {
+              name: firstMenu.menu_name_kor || firstMenu.translated_name,
+              url: firstMenuPath,
+              level: firstMenu.lev || firstMenu.level,
+              seq: firstMenu.seq,
+            });
+          } else {
+            logger.info(
+              "⚠️ 접근 가능한 메뉴가 없습니다. 메인 페이지로 이동합니다."
+            );
+          }
+        } catch (menuError) {
+          logger.warn("메뉴 조회 중 오류 발생 (무시하고 계속):", menuError);
+        }
+
         res.status(200).json({
           success: true,
           message: "로그인 성공",
           data: {
             userInfo,
             token: loginResult.token,
+            firstMenuPath, // 첫 번째 접근 가능한 메뉴 경로 추가
           },
         });
       } else {
diff --git a/backend-node/src/controllers/dynamicFormController.ts b/backend-node/src/controllers/dynamicFormController.ts
index a5b2f225..47ee4e94 100644
--- a/backend-node/src/controllers/dynamicFormController.ts
+++ b/backend-node/src/controllers/dynamicFormController.ts
@@ -216,7 +216,7 @@ export const deleteFormData = async (
 ): Promise<Response | void> => {
   try {
     const { id } = req.params;
-    const { companyCode } = req.user as any;
+    const { companyCode, userId } = req.user as any;
     const { tableName } = req.body;
 
     if (!tableName) {
@@ -226,7 +226,7 @@ export const deleteFormData = async (
       });
     }
 
-    await dynamicFormService.deleteFormData(id, tableName); // parseInt 제거 - 문자열 ID 지원
+    await dynamicFormService.deleteFormData(id, tableName, companyCode, userId); // userId 추가
 
     res.json({
       success: true,
diff --git a/backend-node/src/services/dataflowControlService.ts b/backend-node/src/services/dataflowControlService.ts
index d4ffcffe..75ff0a5c 100644
--- a/backend-node/src/services/dataflowControlService.ts
+++ b/backend-node/src/services/dataflowControlService.ts
@@ -64,7 +64,8 @@ export class DataflowControlService {
     relationshipId: string,
     triggerType: "insert" | "update" | "delete",
     sourceData: Record<string, any>,
-    tableName: string
+    tableName: string,
+    userId: string = "system"
   ): Promise<{
     success: boolean;
     message: string;
@@ -78,6 +79,7 @@ export class DataflowControlService {
         triggerType,
         sourceData,
         tableName,
+        userId,
       });
 
       // 관계도 정보 조회
@@ -238,7 +240,8 @@ export class DataflowControlService {
           const actionResult = await this.executeMultiConnectionAction(
             action,
             sourceData,
-            targetPlan.sourceTable
+            targetPlan.sourceTable,
+            userId
           );
 
           executedActions.push({
@@ -288,7 +291,8 @@ export class DataflowControlService {
   private async executeMultiConnectionAction(
     action: ControlAction,
     sourceData: Record<string, any>,
-    sourceTable: string
+    sourceTable: string,
+    userId: string = "system"
   ): Promise<any> {
     try {
       const extendedAction = action as any; // redesigned UI 구조 접근
@@ -321,7 +325,8 @@ export class DataflowControlService {
             targetTable,
             fromConnection.id,
             toConnection.id,
-            multiConnService
+            multiConnService,
+            userId
           );
 
         case "update":
@@ -332,7 +337,8 @@ export class DataflowControlService {
             targetTable,
             fromConnection.id,
             toConnection.id,
-            multiConnService
+            multiConnService,
+            userId
           );
 
         case "delete":
@@ -343,7 +349,8 @@ export class DataflowControlService {
             targetTable,
             fromConnection.id,
             toConnection.id,
-            multiConnService
+            multiConnService,
+            userId
           );
 
         default:
@@ -368,7 +375,8 @@ export class DataflowControlService {
     targetTable: string,
     fromConnectionId: number,
     toConnectionId: number,
-    multiConnService: any
+    multiConnService: any,
+    userId: string = "system"
   ): Promise<any> {
     try {
       // 필드 매핑 적용
@@ -387,6 +395,14 @@ export class DataflowControlService {
         }
       }
 
+      // 🆕 변경자 정보 추가
+      if (!mappedData.created_by) {
+        mappedData.created_by = userId;
+      }
+      if (!mappedData.updated_by) {
+        mappedData.updated_by = userId;
+      }
+
       console.log(`📋 매핑된 데이터:`, mappedData);
 
       // 대상 연결에 데이터 삽입
@@ -421,11 +437,32 @@ export class DataflowControlService {
     targetTable: string,
     fromConnectionId: number,
     toConnectionId: number,
-    multiConnService: any
+    multiConnService: any,
+    userId: string = "system"
   ): Promise<any> {
     try {
-      // UPDATE 로직 구현 (향후 확장)
+      // 필드 매핑 적용
+      const mappedData: Record<string, any> = {};
+
+      for (const mapping of action.fieldMappings) {
+        const sourceField = mapping.sourceField;
+        const targetField = mapping.targetField;
+
+        if (mapping.defaultValue !== undefined) {
+          mappedData[targetField] = mapping.defaultValue;
+        } else if (sourceField && sourceData[sourceField] !== undefined) {
+          mappedData[targetField] = sourceData[sourceField];
+        }
+      }
+
+      // 🆕 변경자 정보 추가
+      if (!mappedData.updated_by) {
+        mappedData.updated_by = userId;
+      }
+
+      console.log(`📋 UPDATE 매핑된 데이터:`, mappedData);
       console.log(`⚠️ UPDATE 액션은 향후 구현 예정`);
+
       return {
         success: true,
         message: "UPDATE 액션 실행됨 (향후 구현)",
@@ -449,11 +486,11 @@ export class DataflowControlService {
     targetTable: string,
     fromConnectionId: number,
     toConnectionId: number,
-    multiConnService: any
+    multiConnService: any,
+    userId: string = "system"
   ): Promise<any> {
     try {
-      // DELETE 로직 구현 (향후 확장)
-      console.log(`⚠️ DELETE 액션은 향후 구현 예정`);
+      console.log(`⚠️ DELETE 액션은 향후 구현 예정 (변경자: ${userId})`);
       return {
         success: true,
         message: "DELETE 액션 실행됨 (향후 구현)",
@@ -941,7 +978,9 @@ export class DataflowControlService {
     sourceData: Record<string, any>
   ): Promise<any> {
     // 보안상 외부 DB에 대한 DELETE 작업은 비활성화
-    throw new Error("보안상 외부 데이터베이스에 대한 DELETE 작업은 허용되지 않습니다. SELECT 쿼리만 사용해주세요.");
+    throw new Error(
+      "보안상 외부 데이터베이스에 대한 DELETE 작업은 허용되지 않습니다. SELECT 쿼리만 사용해주세요."
+    );
 
     const results = [];
 
diff --git a/backend-node/src/services/dynamicFormService.ts b/backend-node/src/services/dynamicFormService.ts
index 999ea6d2..8a943b96 100644
--- a/backend-node/src/services/dynamicFormService.ts
+++ b/backend-node/src/services/dynamicFormService.ts
@@ -220,8 +220,14 @@ export class DynamicFormService {
       console.log(`🔑 테이블 ${tableName}의 Primary Key:`, primaryKeys);
 
       // 메타데이터 제거 (실제 테이블 컬럼이 아님)
-      const { created_by, updated_by, company_code, screen_id, ...actualData } =
-        data;
+      const {
+        created_by,
+        updated_by,
+        writer,
+        company_code,
+        screen_id,
+        ...actualData
+      } = data;
 
       // 기본 데이터 준비
       const dataToInsert: any = { ...actualData };
@@ -236,8 +242,17 @@ export class DynamicFormService {
       if (tableColumns.includes("regdate") && !dataToInsert.regdate) {
         dataToInsert.regdate = new Date();
       }
+      if (tableColumns.includes("created_date") && !dataToInsert.created_date) {
+        dataToInsert.created_date = new Date();
+      }
+      if (tableColumns.includes("updated_date") && !dataToInsert.updated_date) {
+        dataToInsert.updated_date = new Date();
+      }
 
-      // 생성자/수정자 정보가 있고 해당 컬럼이 존재한다면 추가
+      // 작성자 정보 추가 (writer 컬럼 우선, 없으면 created_by/updated_by)
+      if (writer && tableColumns.includes("writer")) {
+        dataToInsert.writer = writer;
+      }
       if (created_by && tableColumns.includes("created_by")) {
         dataToInsert.created_by = created_by;
       }
@@ -579,7 +594,8 @@ export class DynamicFormService {
           screenId,
           tableName,
           insertedRecord as Record<string, any>,
-          "insert"
+          "insert",
+          created_by || "system"
         );
       } catch (controlError) {
         console.error("⚠️ 제어관리 실행 오류:", controlError);
@@ -876,7 +892,8 @@ export class DynamicFormService {
           0, // UPDATE는 screenId를 알 수 없으므로 0으로 설정 (추후 개선 필요)
           tableName,
           updatedRecord as Record<string, any>,
-          "update"
+          "update",
+          updated_by || "system"
         );
       } catch (controlError) {
         console.error("⚠️ 제어관리 실행 오류:", controlError);
@@ -905,7 +922,8 @@ export class DynamicFormService {
   async deleteFormData(
     id: string | number,
     tableName: string,
-    companyCode?: string
+    companyCode?: string,
+    userId?: string
   ): Promise<void> {
     try {
       console.log("🗑️ 서비스: 실제 테이블에서 폼 데이터 삭제 시작:", {
@@ -1010,7 +1028,8 @@ export class DynamicFormService {
             0, // DELETE는 screenId를 알 수 없으므로 0으로 설정 (추후 개선 필요)
             tableName,
             deletedRecord,
-            "delete"
+            "delete",
+            userId || "system"
           );
         }
       } catch (controlError) {
@@ -1315,7 +1334,8 @@ export class DynamicFormService {
     screenId: number,
     tableName: string,
     savedData: Record<string, any>,
-    triggerType: "insert" | "update" | "delete"
+    triggerType: "insert" | "update" | "delete",
+    userId: string = "system"
   ): Promise<void> {
     try {
       console.log(`🎯 제어관리 설정 확인 중... (screenId: ${screenId})`);
@@ -1364,7 +1384,8 @@ export class DynamicFormService {
               relationshipId,
               triggerType,
               savedData,
-              tableName
+              tableName,
+              userId
             );
 
           console.log(`🎯 제어관리 실행 결과:`, controlResult);
diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index d365ebbd..353ee997 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -15,12 +15,17 @@ import { FlowButtonGroup } from "@/components/screen/widgets/FlowButtonGroup";
 import { FlowVisibilityConfig } from "@/types/control-management";
 import { findAllButtonGroups } from "@/lib/utils/flowButtonGroupUtils";
 import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
+import { ScreenPreviewProvider } from "@/contexts/ScreenPreviewContext";
+import { useAuth } from "@/hooks/useAuth"; // 🆕 사용자 정보
 
 export default function ScreenViewPage() {
   const params = useParams();
   const router = useRouter();
   const screenId = parseInt(params.screenId as string);
 
+  // 🆕 현재 로그인한 사용자 정보
+  const { user, userName, companyCode } = useAuth();
+
   const [screen, setScreen] = useState<ScreenDefinition | null>(null);
   const [layout, setLayout] = useState<LayoutData | null>(null);
   const [loading, setLoading] = useState(true);
@@ -211,302 +216,314 @@ export default function ScreenViewPage() {
   const screenHeight = layout?.screenResolution?.height || 800;
 
   return (
-    <div ref={containerRef} className="bg-background flex h-full w-full items-start justify-start overflow-hidden">
-      {/* 절대 위치 기반 렌더링 */}
-      {layout && layout.components.length > 0 ? (
-        <div
-          className="bg-background relative origin-top-left"
-          style={{
-            width: layout?.screenResolution?.width || 1200,
-            height: layout?.screenResolution?.height || 800,
-            transform: `scale(${scale})`,
-            transformOrigin: "top left",
-            display: "flex",
-            flexDirection: "column",
-          }}
-        >
-          {/* 최상위 컴포넌트들 렌더링 */}
-          {(() => {
-            // 🆕 플로우 버튼 그룹 감지 및 처리
-            const topLevelComponents = layout.components.filter((component) => !component.parentId);
+    <ScreenPreviewProvider isPreviewMode={false}>
+      <div ref={containerRef} className="bg-background flex h-full w-full items-start justify-start overflow-hidden">
+        {/* 절대 위치 기반 렌더링 */}
+        {layout && layout.components.length > 0 ? (
+          <div
+            className="bg-background relative origin-top-left"
+            style={{
+              width: layout?.screenResolution?.width || 1200,
+              height: layout?.screenResolution?.height || 800,
+              transform: `scale(${scale})`,
+              transformOrigin: "top left",
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            {/* 최상위 컴포넌트들 렌더링 */}
+            {(() => {
+              // 🆕 플로우 버튼 그룹 감지 및 처리
+              const topLevelComponents = layout.components.filter((component) => !component.parentId);
 
-            const buttonGroups: Record<string, any[]> = {};
-            const processedButtonIds = new Set<string>();
+              const buttonGroups: Record<string, any[]> = {};
+              const processedButtonIds = new Set<string>();
 
-            topLevelComponents.forEach((component) => {
-              const isButton =
-                component.type === "button" ||
-                (component.type === "component" &&
-                  ["button-primary", "button-secondary"].includes((component as any).componentType));
+              topLevelComponents.forEach((component) => {
+                const isButton =
+                  component.type === "button" ||
+                  (component.type === "component" &&
+                    ["button-primary", "button-secondary"].includes((component as any).componentType));
 
-              if (isButton) {
-                const flowConfig = (component as any).webTypeConfig?.flowVisibilityConfig as
-                  | FlowVisibilityConfig
-                  | undefined;
+                if (isButton) {
+                  const flowConfig = (component as any).webTypeConfig?.flowVisibilityConfig as
+                    | FlowVisibilityConfig
+                    | undefined;
 
-                if (flowConfig?.enabled && flowConfig.layoutBehavior === "auto-compact" && flowConfig.groupId) {
-                  if (!buttonGroups[flowConfig.groupId]) {
-                    buttonGroups[flowConfig.groupId] = [];
+                  if (flowConfig?.enabled && flowConfig.layoutBehavior === "auto-compact" && flowConfig.groupId) {
+                    if (!buttonGroups[flowConfig.groupId]) {
+                      buttonGroups[flowConfig.groupId] = [];
+                    }
+                    buttonGroups[flowConfig.groupId].push(component);
+                    processedButtonIds.add(component.id);
                   }
-                  buttonGroups[flowConfig.groupId].push(component);
-                  processedButtonIds.add(component.id);
                 }
-              }
-            });
+              });
 
-            const regularComponents = topLevelComponents.filter((c) => !processedButtonIds.has(c.id));
+              const regularComponents = topLevelComponents.filter((c) => !processedButtonIds.has(c.id));
 
-            return (
-              <>
-                {/* 일반 컴포넌트들 */}
-                {regularComponents.map((component) => (
-                  <RealtimePreview
-                    key={component.id}
-                    component={component}
-                    isSelected={false}
-                    isDesignMode={false}
-                    onClick={() => {}}
-                    screenId={screenId}
-                    tableName={screen?.tableName}
-                    selectedRowsData={selectedRowsData}
-                    onSelectedRowsChange={(_, selectedData) => {
-                      console.log("🔍 화면에서 선택된 행 데이터:", selectedData);
-                      setSelectedRowsData(selectedData);
-                    }}
-                    flowSelectedData={flowSelectedData}
-                    flowSelectedStepId={flowSelectedStepId}
-                    onFlowSelectedDataChange={(selectedData: any[], stepId: number | null) => {
-                      console.log("🔍 [page.tsx] 플로우 선택된 데이터 받음:", {
-                        dataCount: selectedData.length,
-                        selectedData,
-                        stepId,
-                      });
-                      setFlowSelectedData(selectedData);
-                      setFlowSelectedStepId(stepId);
-                      console.log("🔍 [page.tsx] 상태 업데이트 완료");
-                    }}
-                    refreshKey={tableRefreshKey}
-                    onRefresh={() => {
-                      console.log("🔄 테이블 새로고침 요청됨");
-                      setTableRefreshKey((prev) => prev + 1);
-                      setSelectedRowsData([]); // 선택 해제
-                    }}
-                    flowRefreshKey={flowRefreshKey}
-                    onFlowRefresh={() => {
-                      console.log("🔄 플로우 새로고침 요청됨");
-                      setFlowRefreshKey((prev) => prev + 1);
-                      setFlowSelectedData([]); // 선택 해제
-                      setFlowSelectedStepId(null);
-                    }}
-                    formData={formData}
-                    onFormDataChange={(fieldName, value) => {
-                      console.log("📝 폼 데이터 변경:", fieldName, "=", value);
-                      setFormData((prev) => ({ ...prev, [fieldName]: value }));
-                    }}
-                  >
-                    {/* 자식 컴포넌트들 */}
-                    {(component.type === "group" || component.type === "container" || component.type === "area") &&
-                      layout.components
-                        .filter((child) => child.parentId === component.id)
-                        .map((child) => {
-                          // 자식 컴포넌트의 위치를 부모 기준 상대 좌표로 조정
-                          const relativeChildComponent = {
-                            ...child,
-                            position: {
-                              x: child.position.x - component.position.x,
-                              y: child.position.y - component.position.y,
-                              z: child.position.z || 1,
-                            },
-                          };
-
-                          return (
-                            <RealtimePreview
-                              key={child.id}
-                              component={relativeChildComponent}
-                              isSelected={false}
-                              isDesignMode={false}
-                              onClick={() => {}}
-                              screenId={screenId}
-                              tableName={screen?.tableName}
-                              selectedRowsData={selectedRowsData}
-                              onSelectedRowsChange={(_, selectedData) => {
-                                console.log("🔍 화면에서 선택된 행 데이터 (자식):", selectedData);
-                                setSelectedRowsData(selectedData);
-                              }}
-                              refreshKey={tableRefreshKey}
-                              onRefresh={() => {
-                                console.log("🔄 테이블 새로고침 요청됨 (자식)");
-                                setTableRefreshKey((prev) => prev + 1);
-                                setSelectedRowsData([]); // 선택 해제
-                              }}
-                              formData={formData}
-                              onFormDataChange={(fieldName, value) => {
-                                console.log("📝 폼 데이터 변경 (자식):", fieldName, "=", value);
-                                setFormData((prev) => ({ ...prev, [fieldName]: value }));
-                              }}
-                            />
-                          );
-                        })}
-                  </RealtimePreview>
-                ))}
-
-                {/* 🆕 플로우 버튼 그룹들 */}
-                {Object.entries(buttonGroups).map(([groupId, buttons]) => {
-                  if (buttons.length === 0) return null;
-
-                  const firstButton = buttons[0];
-                  const groupConfig = (firstButton as any).webTypeConfig?.flowVisibilityConfig as FlowVisibilityConfig;
-
-                  // 그룹의 위치는 모든 버튼 중 가장 왼쪽/위쪽 버튼의 위치 사용
-                  const groupPosition = buttons.reduce(
-                    (min, button) => ({
-                      x: Math.min(min.x, button.position.x),
-                      y: Math.min(min.y, button.position.y),
-                      z: min.z,
-                    }),
-                    { x: buttons[0].position.x, y: buttons[0].position.y, z: buttons[0].position.z || 2 },
-                  );
-
-                  // 그룹의 크기 계산: 버튼들의 실제 크기 + 간격을 기준으로 계산
-                  const direction = groupConfig.groupDirection || "horizontal";
-                  const gap = groupConfig.groupGap ?? 8;
-
-                  let groupWidth = 0;
-                  let groupHeight = 0;
-
-                  if (direction === "horizontal") {
-                    groupWidth = buttons.reduce((total, button, index) => {
-                      const buttonWidth = button.size?.width || 100;
-                      const gapWidth = index < buttons.length - 1 ? gap : 0;
-                      return total + buttonWidth + gapWidth;
-                    }, 0);
-                    groupHeight = Math.max(...buttons.map((b) => b.size?.height || 40));
-                  } else {
-                    groupWidth = Math.max(...buttons.map((b) => b.size?.width || 100));
-                    groupHeight = buttons.reduce((total, button, index) => {
-                      const buttonHeight = button.size?.height || 40;
-                      const gapHeight = index < buttons.length - 1 ? gap : 0;
-                      return total + buttonHeight + gapHeight;
-                    }, 0);
-                  }
-
-                  return (
-                    <div
-                      key={`flow-button-group-${groupId}`}
-                      style={{
-                        position: "absolute",
-                        left: `${groupPosition.x}px`,
-                        top: `${groupPosition.y}px`,
-                        zIndex: groupPosition.z,
-                        width: `${groupWidth}px`,
-                        height: `${groupHeight}px`,
+              return (
+                <>
+                  {/* 일반 컴포넌트들 */}
+                  {regularComponents.map((component) => (
+                    <RealtimePreview
+                      key={component.id}
+                      component={component}
+                      isSelected={false}
+                      isDesignMode={false}
+                      onClick={() => {}}
+                      screenId={screenId}
+                      tableName={screen?.tableName}
+                      userId={user?.userId}
+                      userName={userName}
+                      companyCode={companyCode}
+                      selectedRowsData={selectedRowsData}
+                      onSelectedRowsChange={(_, selectedData) => {
+                        console.log("🔍 화면에서 선택된 행 데이터:", selectedData);
+                        setSelectedRowsData(selectedData);
+                      }}
+                      flowSelectedData={flowSelectedData}
+                      flowSelectedStepId={flowSelectedStepId}
+                      onFlowSelectedDataChange={(selectedData: any[], stepId: number | null) => {
+                        console.log("🔍 [page.tsx] 플로우 선택된 데이터 받음:", {
+                          dataCount: selectedData.length,
+                          selectedData,
+                          stepId,
+                        });
+                        setFlowSelectedData(selectedData);
+                        setFlowSelectedStepId(stepId);
+                        console.log("🔍 [page.tsx] 상태 업데이트 완료");
+                      }}
+                      refreshKey={tableRefreshKey}
+                      onRefresh={() => {
+                        console.log("🔄 테이블 새로고침 요청됨");
+                        setTableRefreshKey((prev) => prev + 1);
+                        setSelectedRowsData([]); // 선택 해제
+                      }}
+                      flowRefreshKey={flowRefreshKey}
+                      onFlowRefresh={() => {
+                        console.log("🔄 플로우 새로고침 요청됨");
+                        setFlowRefreshKey((prev) => prev + 1);
+                        setFlowSelectedData([]); // 선택 해제
+                        setFlowSelectedStepId(null);
+                      }}
+                      formData={formData}
+                      onFormDataChange={(fieldName, value) => {
+                        console.log("📝 폼 데이터 변경:", fieldName, "=", value);
+                        setFormData((prev) => ({ ...prev, [fieldName]: value }));
                       }}
                     >
-                      <FlowButtonGroup
-                        buttons={buttons}
-                        groupConfig={groupConfig}
-                        isDesignMode={false}
-                        renderButton={(button) => {
-                          const relativeButton = {
-                            ...button,
-                            position: { x: 0, y: 0, z: button.position.z || 1 },
-                          };
+                      {/* 자식 컴포넌트들 */}
+                      {(component.type === "group" || component.type === "container" || component.type === "area") &&
+                        layout.components
+                          .filter((child) => child.parentId === component.id)
+                          .map((child) => {
+                            // 자식 컴포넌트의 위치를 부모 기준 상대 좌표로 조정
+                            const relativeChildComponent = {
+                              ...child,
+                              position: {
+                                x: child.position.x - component.position.x,
+                                y: child.position.y - component.position.y,
+                                z: child.position.z || 1,
+                              },
+                            };
 
-                          return (
-                            <div
-                              key={button.id}
-                              style={{
-                                position: "relative",
-                                display: "inline-block",
-                                width: button.size?.width || 100,
-                                height: button.size?.height || 40,
-                              }}
-                            >
-                              <div style={{ width: "100%", height: "100%" }}>
-                                <DynamicComponentRenderer
-                                  component={relativeButton}
-                                  isDesignMode={false}
-                                  isInteractive={true}
-                                  formData={formData}
-                                  onDataflowComplete={() => {}}
-                                  screenId={screenId}
-                                  tableName={screen?.tableName}
-                                  selectedRowsData={selectedRowsData}
-                                  onSelectedRowsChange={(_, selectedData) => {
-                                    setSelectedRowsData(selectedData);
-                                  }}
-                                  flowSelectedData={flowSelectedData}
-                                  flowSelectedStepId={flowSelectedStepId}
-                                  onFlowSelectedDataChange={(selectedData: any[], stepId: number | null) => {
-                                    setFlowSelectedData(selectedData);
-                                    setFlowSelectedStepId(stepId);
-                                  }}
-                                  refreshKey={tableRefreshKey}
-                                  onRefresh={() => {
-                                    setTableRefreshKey((prev) => prev + 1);
-                                    setSelectedRowsData([]);
-                                  }}
-                                  flowRefreshKey={flowRefreshKey}
-                                  onFlowRefresh={() => {
-                                    setFlowRefreshKey((prev) => prev + 1);
-                                    setFlowSelectedData([]);
-                                    setFlowSelectedStepId(null);
-                                  }}
-                                  onFormDataChange={(fieldName, value) => {
-                                    setFormData((prev) => ({ ...prev, [fieldName]: value }));
-                                  }}
-                                />
-                              </div>
-                            </div>
-                          );
+                            return (
+                              <RealtimePreview
+                                key={child.id}
+                                component={relativeChildComponent}
+                                isSelected={false}
+                                isDesignMode={false}
+                                onClick={() => {}}
+                                screenId={screenId}
+                                tableName={screen?.tableName}
+                                userId={user?.userId}
+                                userName={userName}
+                                companyCode={companyCode}
+                                selectedRowsData={selectedRowsData}
+                                onSelectedRowsChange={(_, selectedData) => {
+                                  console.log("🔍 화면에서 선택된 행 데이터 (자식):", selectedData);
+                                  setSelectedRowsData(selectedData);
+                                }}
+                                refreshKey={tableRefreshKey}
+                                onRefresh={() => {
+                                  console.log("🔄 테이블 새로고침 요청됨 (자식)");
+                                  setTableRefreshKey((prev) => prev + 1);
+                                  setSelectedRowsData([]); // 선택 해제
+                                }}
+                                formData={formData}
+                                onFormDataChange={(fieldName, value) => {
+                                  console.log("📝 폼 데이터 변경 (자식):", fieldName, "=", value);
+                                  setFormData((prev) => ({ ...prev, [fieldName]: value }));
+                                }}
+                              />
+                            );
+                          })}
+                    </RealtimePreview>
+                  ))}
+
+                  {/* 🆕 플로우 버튼 그룹들 */}
+                  {Object.entries(buttonGroups).map(([groupId, buttons]) => {
+                    if (buttons.length === 0) return null;
+
+                    const firstButton = buttons[0];
+                    const groupConfig = (firstButton as any).webTypeConfig
+                      ?.flowVisibilityConfig as FlowVisibilityConfig;
+
+                    // 그룹의 위치는 모든 버튼 중 가장 왼쪽/위쪽 버튼의 위치 사용
+                    const groupPosition = buttons.reduce(
+                      (min, button) => ({
+                        x: Math.min(min.x, button.position.x),
+                        y: Math.min(min.y, button.position.y),
+                        z: min.z,
+                      }),
+                      { x: buttons[0].position.x, y: buttons[0].position.y, z: buttons[0].position.z || 2 },
+                    );
+
+                    // 그룹의 크기 계산: 버튼들의 실제 크기 + 간격을 기준으로 계산
+                    const direction = groupConfig.groupDirection || "horizontal";
+                    const gap = groupConfig.groupGap ?? 8;
+
+                    let groupWidth = 0;
+                    let groupHeight = 0;
+
+                    if (direction === "horizontal") {
+                      groupWidth = buttons.reduce((total, button, index) => {
+                        const buttonWidth = button.size?.width || 100;
+                        const gapWidth = index < buttons.length - 1 ? gap : 0;
+                        return total + buttonWidth + gapWidth;
+                      }, 0);
+                      groupHeight = Math.max(...buttons.map((b) => b.size?.height || 40));
+                    } else {
+                      groupWidth = Math.max(...buttons.map((b) => b.size?.width || 100));
+                      groupHeight = buttons.reduce((total, button, index) => {
+                        const buttonHeight = button.size?.height || 40;
+                        const gapHeight = index < buttons.length - 1 ? gap : 0;
+                        return total + buttonHeight + gapHeight;
+                      }, 0);
+                    }
+
+                    return (
+                      <div
+                        key={`flow-button-group-${groupId}`}
+                        style={{
+                          position: "absolute",
+                          left: `${groupPosition.x}px`,
+                          top: `${groupPosition.y}px`,
+                          zIndex: groupPosition.z,
+                          width: `${groupWidth}px`,
+                          height: `${groupHeight}px`,
                         }}
-                      />
-                    </div>
-                  );
-                })}
-              </>
-            );
-          })()}
-        </div>
-      ) : (
-        // 빈 화면일 때
-        <div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>
-          <div className="text-center">
-            <div className="bg-muted mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full shadow-sm">
-              <span className="text-2xl">📄</span>
-            </div>
-            <h2 className="text-foreground mb-2 text-xl font-semibold">화면이 비어있습니다</h2>
-            <p className="text-muted-foreground">이 화면에는 아직 설계된 컴포넌트가 없습니다.</p>
-          </div>
-        </div>
-      )}
+                      >
+                        <FlowButtonGroup
+                          buttons={buttons}
+                          groupConfig={groupConfig}
+                          isDesignMode={false}
+                          renderButton={(button) => {
+                            const relativeButton = {
+                              ...button,
+                              position: { x: 0, y: 0, z: button.position.z || 1 },
+                            };
 
-      {/* 편집 모달 */}
-      <EditModal
-        isOpen={editModalOpen}
-        onClose={() => {
-          setEditModalOpen(false);
-          setEditModalConfig({});
-        }}
-        screenId={editModalConfig.screenId}
-        modalSize={editModalConfig.modalSize}
-        editData={editModalConfig.editData}
-        onSave={editModalConfig.onSave}
-        modalTitle={editModalConfig.modalTitle}
-        modalDescription={editModalConfig.modalDescription}
-        onDataChange={(changedFormData) => {
-          console.log("📝 EditModal에서 데이터 변경 수신:", changedFormData);
-          // 변경된 데이터를 메인 폼에 반영
-          setFormData((prev) => {
-            const updatedFormData = {
-              ...prev,
-              ...changedFormData, // 변경된 필드들만 업데이트
-            };
-            console.log("📊 메인 폼 데이터 업데이트:", updatedFormData);
-            return updatedFormData;
-          });
-        }}
-      />
-    </div>
+                            return (
+                              <div
+                                key={button.id}
+                                style={{
+                                  position: "relative",
+                                  display: "inline-block",
+                                  width: button.size?.width || 100,
+                                  height: button.size?.height || 40,
+                                }}
+                              >
+                                <div style={{ width: "100%", height: "100%" }}>
+                                  <DynamicComponentRenderer
+                                    component={relativeButton}
+                                    isDesignMode={false}
+                                    isInteractive={true}
+                                    formData={formData}
+                                    onDataflowComplete={() => {}}
+                                    screenId={screenId}
+                                    tableName={screen?.tableName}
+                                    userId={user?.userId}
+                                    userName={userName}
+                                    companyCode={companyCode}
+                                    selectedRowsData={selectedRowsData}
+                                    onSelectedRowsChange={(_, selectedData) => {
+                                      setSelectedRowsData(selectedData);
+                                    }}
+                                    flowSelectedData={flowSelectedData}
+                                    flowSelectedStepId={flowSelectedStepId}
+                                    onFlowSelectedDataChange={(selectedData: any[], stepId: number | null) => {
+                                      setFlowSelectedData(selectedData);
+                                      setFlowSelectedStepId(stepId);
+                                    }}
+                                    refreshKey={tableRefreshKey}
+                                    onRefresh={() => {
+                                      setTableRefreshKey((prev) => prev + 1);
+                                      setSelectedRowsData([]);
+                                    }}
+                                    flowRefreshKey={flowRefreshKey}
+                                    onFlowRefresh={() => {
+                                      setFlowRefreshKey((prev) => prev + 1);
+                                      setFlowSelectedData([]);
+                                      setFlowSelectedStepId(null);
+                                    }}
+                                    onFormDataChange={(fieldName, value) => {
+                                      setFormData((prev) => ({ ...prev, [fieldName]: value }));
+                                    }}
+                                  />
+                                </div>
+                              </div>
+                            );
+                          }}
+                        />
+                      </div>
+                    );
+                  })}
+                </>
+              );
+            })()}
+          </div>
+        ) : (
+          // 빈 화면일 때
+          <div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>
+            <div className="text-center">
+              <div className="bg-muted mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full shadow-sm">
+                <span className="text-2xl">📄</span>
+              </div>
+              <h2 className="text-foreground mb-2 text-xl font-semibold">화면이 비어있습니다</h2>
+              <p className="text-muted-foreground">이 화면에는 아직 설계된 컴포넌트가 없습니다.</p>
+            </div>
+          </div>
+        )}
+
+        {/* 편집 모달 */}
+        <EditModal
+          isOpen={editModalOpen}
+          onClose={() => {
+            setEditModalOpen(false);
+            setEditModalConfig({});
+          }}
+          screenId={editModalConfig.screenId}
+          modalSize={editModalConfig.modalSize}
+          editData={editModalConfig.editData}
+          onSave={editModalConfig.onSave}
+          modalTitle={editModalConfig.modalTitle}
+          modalDescription={editModalConfig.modalDescription}
+          onDataChange={(changedFormData) => {
+            console.log("📝 EditModal에서 데이터 변경 수신:", changedFormData);
+            // 변경된 데이터를 메인 폼에 반영
+            setFormData((prev) => {
+              const updatedFormData = {
+                ...prev,
+                ...changedFormData, // 변경된 필드들만 업데이트
+              };
+              console.log("📊 메인 폼 데이터 업데이트:", updatedFormData);
+              return updatedFormData;
+            });
+          }}
+        />
+      </div>
+    </ScreenPreviewProvider>
   );
 }
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index bc483325..843e88e6 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -35,6 +35,8 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   const [screenDimensions, setScreenDimensions] = useState<{
     width: number;
     height: number;
+    offsetX?: number;
+    offsetY?: number;
   } | null>(null);
 
   // 폼 데이터 상태 추가
@@ -42,11 +44,20 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
 
   // 화면의 실제 크기 계산 함수
   const calculateScreenDimensions = (components: ComponentData[]) => {
+    if (components.length === 0) {
+      return {
+        width: 400,
+        height: 300,
+        offsetX: 0,
+        offsetY: 0,
+      };
+    }
+
     // 모든 컴포넌트의 경계 찾기
     let minX = Infinity;
     let minY = Infinity;
-    let maxX = 0;
-    let maxY = 0;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
 
     components.forEach((component) => {
       const x = parseFloat(component.position?.x?.toString() || "0");
@@ -60,17 +71,22 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       maxY = Math.max(maxY, y + height);
     });
 
-    // 컨텐츠 실제 크기 + 넉넉한 여백 (양쪽 각 64px)
+    // 실제 컨텐츠 크기 계산
     const contentWidth = maxX - minX;
     const contentHeight = maxY - minY;
-    const padding = 128; // 좌우 또는 상하 합계 여백
 
-    const finalWidth = Math.max(contentWidth + padding, 400); // 최소 400px
-    const finalHeight = Math.max(contentHeight + padding, 300); // 최소 300px
+    // 적절한 여백 추가
+    const paddingX = 40;
+    const paddingY = 40;
+
+    const finalWidth = Math.max(contentWidth + paddingX, 400);
+    const finalHeight = Math.max(contentHeight + paddingY, 300);
 
     return {
-      width: Math.min(finalWidth, window.innerWidth * 0.98),
-      height: Math.min(finalHeight, window.innerHeight * 0.95),
+      width: Math.min(finalWidth, window.innerWidth * 0.95),
+      height: Math.min(finalHeight, window.innerHeight * 0.9),
+      offsetX: Math.max(0, minX - paddingX / 2), // 좌측 여백 고려
+      offsetY: Math.max(0, minY - paddingY / 2), // 상단 여백 고려
     };
   };
 
@@ -172,20 +188,20 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   const getModalStyle = () => {
     if (!screenDimensions) {
       return {
-        className: "w-fit min-w-[400px] max-w-4xl max-h-[80vh] overflow-hidden",
+        className: "w-fit min-w-[400px] max-w-4xl max-h-[90vh] overflow-hidden p-0",
         style: {},
       };
     }
 
-    // 헤더 높이만 고려 (패딩 제거)
-    const headerHeight = 73; // DialogHeader 실제 높이 (border-b px-6 py-4 포함)
+    // 헤더 높이를 최소화 (제목 영역만)
+    const headerHeight = 60; // DialogHeader 최소 높이 (타이틀 + 최소 패딩)
     const totalHeight = screenDimensions.height + headerHeight;
 
     return {
       className: "overflow-hidden p-0",
       style: {
-        width: `${Math.min(screenDimensions.width, window.innerWidth * 0.98)}px`, // 화면 크기 그대로
-        height: `${Math.min(totalHeight, window.innerHeight * 0.95)}px`, // 헤더 + 화면 높이
+        width: `${Math.min(screenDimensions.width, window.innerWidth * 0.98)}px`,
+        height: `${Math.min(totalHeight, window.innerHeight * 0.95)}px`,
         maxWidth: "98vw",
         maxHeight: "95vh",
       },
@@ -197,12 +213,14 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   return (
     <Dialog open={modalState.isOpen} onOpenChange={handleClose}>
       <DialogContent className={`${modalStyle.className} ${className || ""}`} style={modalStyle.style}>
-        <DialogHeader className="border-b px-6 py-4">
-          <DialogTitle>{modalState.title}</DialogTitle>
-          <DialogDescription>{loading ? "화면을 불러오는 중입니다..." : "화면 내용을 표시합니다."}</DialogDescription>
+        <DialogHeader className="shrink-0 border-b px-4 py-3">
+          <DialogTitle className="text-base">{modalState.title}</DialogTitle>
+          {loading && (
+            <DialogDescription className="text-xs">{loading ? "화면을 불러오는 중입니다..." : ""}</DialogDescription>
+          )}
         </DialogHeader>
 
-        <div className="flex-1 flex items-center justify-center overflow-hidden">
+        <div className="flex flex-1 items-center justify-center overflow-auto">
           {loading ? (
             <div className="flex h-full items-center justify-center">
               <div className="text-center">
@@ -216,35 +234,50 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
               style={{
                 width: screenDimensions?.width || 800,
                 height: screenDimensions?.height || 600,
-                transformOrigin: 'center center',
-                maxWidth: '100%',
-                maxHeight: '100%',
+                transformOrigin: "center center",
+                maxWidth: "100%",
+                maxHeight: "100%",
               }}
             >
-              {screenData.components.map((component) => (
-                <InteractiveScreenViewerDynamic
-                  key={component.id}
-                  component={component}
-                  allComponents={screenData.components}
-                  formData={formData}
-                  onFormDataChange={(fieldName, value) => {
-                    console.log(`🎯 ScreenModal onFormDataChange 호출: ${fieldName} = "${value}"`);
-                    console.log("📋 현재 formData:", formData);
-                    setFormData((prev) => {
-                      const newFormData = {
-                        ...prev,
-                        [fieldName]: value,
-                      };
-                      console.log("📝 ScreenModal 업데이트된 formData:", newFormData);
-                      return newFormData;
-                    });
-                  }}
-                  screenInfo={{
-                    id: modalState.screenId!,
-                    tableName: screenData.screenInfo?.tableName,
-                  }}
-                />
-              ))}
+              {screenData.components.map((component) => {
+                // 컴포넌트 위치를 offset만큼 조정 (왼쪽 상단으로 정렬)
+                const offsetX = screenDimensions?.offsetX || 0;
+                const offsetY = screenDimensions?.offsetY || 0;
+
+                const adjustedComponent = {
+                  ...component,
+                  position: {
+                    ...component.position,
+                    x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
+                    y: parseFloat(component.position?.y?.toString() || "0") - offsetY,
+                  },
+                };
+
+                return (
+                  <InteractiveScreenViewerDynamic
+                    key={component.id}
+                    component={adjustedComponent}
+                    allComponents={screenData.components}
+                    formData={formData}
+                    onFormDataChange={(fieldName, value) => {
+                      console.log(`🎯 ScreenModal onFormDataChange 호출: ${fieldName} = "${value}"`);
+                      console.log("📋 현재 formData:", formData);
+                      setFormData((prev) => {
+                        const newFormData = {
+                          ...prev,
+                          [fieldName]: value,
+                        };
+                        console.log("📝 ScreenModal 업데이트된 formData:", newFormData);
+                        return newFormData;
+                      });
+                    }}
+                    screenInfo={{
+                      id: modalState.screenId!,
+                      tableName: screenData.screenInfo?.tableName,
+                    }}
+                  />
+                );
+              })}
             </div>
           ) : (
             <div className="flex h-full items-center justify-center">
diff --git a/frontend/components/dataflow/node-editor/FlowToolbar.tsx b/frontend/components/dataflow/node-editor/FlowToolbar.tsx
index 5d0064ea..c086e922 100644
--- a/frontend/components/dataflow/node-editor/FlowToolbar.tsx
+++ b/frontend/components/dataflow/node-editor/FlowToolbar.tsx
@@ -13,12 +13,14 @@ import { useReactFlow } from "reactflow";
 import { SaveConfirmDialog } from "./dialogs/SaveConfirmDialog";
 import { validateFlow, summarizeValidations } from "@/lib/utils/flowValidation";
 import type { FlowValidation } from "@/lib/utils/flowValidation";
+import { useToast } from "@/hooks/use-toast";
 
 interface FlowToolbarProps {
   validations?: FlowValidation[];
 }
 
 export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
+  const { toast } = useToast();
   const { zoomIn, zoomOut, fitView } = useReactFlow();
   const {
     flowName,
@@ -56,9 +58,17 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
   const performSave = async () => {
     const result = await saveFlow();
     if (result.success) {
-      alert(`✅ ${result.message}\nFlow ID: ${result.flowId}`);
+      toast({
+        title: "✅ 플로우 저장 완료",
+        description: `${result.message}\nFlow ID: ${result.flowId}`,
+        variant: "default",
+      });
     } else {
-      alert(`❌ 저장 실패\n\n${result.message}`);
+      toast({
+        title: "❌ 저장 실패",
+        description: result.message,
+        variant: "destructive",
+      });
     }
     setShowSaveDialog(false);
   };
@@ -72,18 +82,30 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
     a.download = `${flowName || "flow"}.json`;
     a.click();
     URL.revokeObjectURL(url);
-    alert("✅ JSON 파일로 내보내기 완료!");
+    toast({
+      title: "✅ 내보내기 완료",
+      description: "JSON 파일로 저장되었습니다.",
+      variant: "default",
+    });
   };
 
   const handleDelete = () => {
     if (selectedNodes.length === 0) {
-      alert("삭제할 노드를 선택해주세요.");
+      toast({
+        title: "⚠️ 선택된 노드 없음",
+        description: "삭제할 노드를 선택해주세요.",
+        variant: "default",
+      });
       return;
     }
 
     if (confirm(`선택된 ${selectedNodes.length}개 노드를 삭제하시겠습니까?`)) {
       removeNodes(selectedNodes);
-      alert(`✅ ${selectedNodes.length}개 노드가 삭제되었습니다.`);
+      toast({
+        title: "✅ 노드 삭제 완료",
+        description: `${selectedNodes.length}개 노드가 삭제되었습니다.`,
+        variant: "default",
+      });
     }
   };
 
diff --git a/frontend/components/dataflow/node-editor/ValidationNotification.tsx b/frontend/components/dataflow/node-editor/ValidationNotification.tsx
index 54a04625..39ff2253 100644
--- a/frontend/components/dataflow/node-editor/ValidationNotification.tsx
+++ b/frontend/components/dataflow/node-editor/ValidationNotification.tsx
@@ -18,189 +18,178 @@ interface ValidationNotificationProps {
   onClose?: () => void;
 }
 
-export const ValidationNotification = memo(
-  ({ validations, onNodeClick, onClose }: ValidationNotificationProps) => {
-    const [isExpanded, setIsExpanded] = useState(false);
-    const summary = summarizeValidations(validations);
+export const ValidationNotification = memo(({ validations, onNodeClick, onClose }: ValidationNotificationProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const summary = summarizeValidations(validations);
 
-    if (validations.length === 0) {
-      return null;
-    }
+  if (validations.length === 0) {
+    return null;
+  }
 
-    const getTypeLabel = (type: string): string => {
-      const labels: Record<string, string> = {
-        "parallel-conflict": "병렬 실행 충돌",
-        "missing-where": "WHERE 조건 누락",
-        "circular-reference": "순환 참조",
-        "data-source-mismatch": "데이터 소스 불일치",
-        "parallel-table-access": "병렬 테이블 접근",
-      };
-      return labels[type] || type;
+  const getTypeLabel = (type: string): string => {
+    const labels: Record<string, string> = {
+      "disconnected-node": "연결되지 않은 노드",
+      "parallel-conflict": "병렬 실행 충돌",
+      "missing-where": "WHERE 조건 누락",
+      "circular-reference": "순환 참조",
+      "data-source-mismatch": "데이터 소스 불일치",
+      "parallel-table-access": "병렬 테이블 접근",
     };
+    return labels[type] || type;
+  };
 
-    // 타입별로 그룹화
-    const groupedValidations = validations.reduce((acc, validation) => {
+  // 타입별로 그룹화
+  const groupedValidations = validations.reduce(
+    (acc, validation) => {
       if (!acc[validation.type]) {
         acc[validation.type] = [];
       }
       acc[validation.type].push(validation);
       return acc;
-    }, {} as Record<string, FlowValidation[]>);
+    },
+    {} as Record<string, FlowValidation[]>,
+  );
 
-    return (
-      <div className="fixed right-4 top-4 z-50 w-80 animate-in slide-in-from-right-5 duration-300">
+  return (
+    <div className="animate-in slide-in-from-right-5 fixed top-4 right-4 z-50 w-80 duration-300">
+      <div
+        className={cn(
+          "rounded-lg border-2 bg-white shadow-2xl",
+          summary.hasBlockingIssues
+            ? "border-red-500"
+            : summary.warningCount > 0
+              ? "border-yellow-500"
+              : "border-blue-500",
+        )}
+      >
+        {/* 헤더 */}
         <div
           className={cn(
-            "rounded-lg border-2 bg-white shadow-2xl",
-            summary.hasBlockingIssues
-              ? "border-red-500"
-              : summary.warningCount > 0
-                ? "border-yellow-500"
-                : "border-blue-500"
+            "flex cursor-pointer items-center justify-between p-3",
+            summary.hasBlockingIssues ? "bg-red-50" : summary.warningCount > 0 ? "bg-yellow-50" : "bg-blue-50",
           )}
+          onClick={() => setIsExpanded(!isExpanded)}
         >
-          {/* 헤더 */}
-          <div
-            className={cn(
-              "flex cursor-pointer items-center justify-between p-3",
-              summary.hasBlockingIssues
-                ? "bg-red-50"
-                : summary.warningCount > 0
-                  ? "bg-yellow-50"
-                  : "bg-blue-50"
+          <div className="flex items-center gap-2">
+            {summary.hasBlockingIssues ? (
+              <AlertCircle className="h-5 w-5 text-red-600" />
+            ) : summary.warningCount > 0 ? (
+              <AlertTriangle className="h-5 w-5 text-yellow-600" />
+            ) : (
+              <Info className="h-5 w-5 text-blue-600" />
             )}
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            <div className="flex items-center gap-2">
-              {summary.hasBlockingIssues ? (
-                <AlertCircle className="h-5 w-5 text-red-600" />
-              ) : summary.warningCount > 0 ? (
-                <AlertTriangle className="h-5 w-5 text-yellow-600" />
-              ) : (
-                <Info className="h-5 w-5 text-blue-600" />
-              )}
-              <span className="text-sm font-semibold text-gray-900">
-                플로우 검증
-              </span>
-              <div className="flex items-center gap-1">
-                {summary.errorCount > 0 && (
-                  <Badge variant="destructive" className="h-5 text-[10px]">
-                    {summary.errorCount}
-                  </Badge>
-                )}
-                {summary.warningCount > 0 && (
-                  <Badge className="h-5 bg-yellow-500 text-[10px] hover:bg-yellow-600">
-                    {summary.warningCount}
-                  </Badge>
-                )}
-                {summary.infoCount > 0 && (
-                  <Badge variant="secondary" className="h-5 text-[10px]">
-                    {summary.infoCount}
-                  </Badge>
-                )}
-              </div>
-            </div>
+            <span className="text-sm font-semibold text-gray-900">플로우 검증</span>
             <div className="flex items-center gap-1">
-              {isExpanded ? (
-                <ChevronUp className="h-4 w-4 text-gray-400" />
-              ) : (
-                <ChevronDown className="h-4 w-4 text-gray-400" />
+              {summary.errorCount > 0 && (
+                <Badge variant="destructive" className="h-5 text-[10px]">
+                  {summary.errorCount}
+                </Badge>
               )}
-              {onClose && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onClose();
-                  }}
-                  className="h-6 w-6 p-0 hover:bg-white/50"
-                >
-                  <X className="h-3.5 w-3.5" />
-                </Button>
+              {summary.warningCount > 0 && (
+                <Badge className="h-5 bg-yellow-500 text-[10px] hover:bg-yellow-600">{summary.warningCount}</Badge>
+              )}
+              {summary.infoCount > 0 && (
+                <Badge variant="secondary" className="h-5 text-[10px]">
+                  {summary.infoCount}
+                </Badge>
               )}
             </div>
           </div>
-
-          {/* 확장된 내용 */}
-          {isExpanded && (
-            <div className="max-h-[60vh] overflow-y-auto border-t">
-              <div className="p-2 space-y-2">
-                {Object.entries(groupedValidations).map(([type, typeValidations]) => {
-                  const firstValidation = typeValidations[0];
-                  const Icon =
-                    firstValidation.severity === "error"
-                      ? AlertCircle
-                      : firstValidation.severity === "warning"
-                        ? AlertTriangle
-                        : Info;
-
-                  return (
-                    <div key={type}>
-                      {/* 타입 헤더 */}
-                      <div
-                        className={cn(
-                          "mb-1 flex items-center gap-2 rounded-md px-2 py-1 text-xs font-medium",
-                          firstValidation.severity === "error"
-                            ? "bg-red-100 text-red-700"
-                            : firstValidation.severity === "warning"
-                              ? "bg-yellow-100 text-yellow-700"
-                              : "bg-blue-100 text-blue-700"
-                        )}
-                      >
-                        <Icon className="h-3 w-3" />
-                        {getTypeLabel(type)}
-                        <span className="ml-auto">
-                          {typeValidations.length}개
-                        </span>
-                      </div>
-
-                      {/* 검증 항목들 */}
-                      <div className="space-y-1 pl-5">
-                        {typeValidations.map((validation, index) => (
-                          <div
-                            key={index}
-                            className="group cursor-pointer rounded-md border border-gray-200 bg-gray-50 p-2 text-xs transition-all hover:border-gray-300 hover:bg-white hover:shadow-sm"
-                            onClick={() => onNodeClick?.(validation.nodeId)}
-                          >
-                            <p className="text-gray-700 leading-relaxed">
-                              {validation.message}
-                            </p>
-                            {validation.affectedNodes && validation.affectedNodes.length > 1 && (
-                              <div className="mt-1 text-[10px] text-gray-500">
-                                영향받는 노드: {validation.affectedNodes.length}개
-                              </div>
-                            )}
-                            <div className="mt-1 text-[10px] text-blue-600 opacity-0 transition-opacity group-hover:opacity-100">
-                              클릭하여 노드 보기 →
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-          {/* 요약 메시지 (닫혀있을 때) */}
-          {!isExpanded && (
-            <div className="border-t px-3 py-2">
-              <p className="text-xs text-gray-600">
-                {summary.hasBlockingIssues
-                  ? "⛔ 오류를 해결해야 저장할 수 있습니다"
-                  : summary.warningCount > 0
-                    ? "⚠️ 경고 사항을 확인하세요"
-                    : "ℹ️ 정보를 확인하세요"}
-              </p>
-            </div>
-          )}
+          <div className="flex items-center gap-1">
+            {isExpanded ? (
+              <ChevronUp className="h-4 w-4 text-gray-400" />
+            ) : (
+              <ChevronDown className="h-4 w-4 text-gray-400" />
+            )}
+            {onClose && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClose();
+                }}
+                className="h-6 w-6 p-0 hover:bg-white/50"
+              >
+                <X className="h-3.5 w-3.5" />
+              </Button>
+            )}
+          </div>
         </div>
+
+        {/* 확장된 내용 */}
+        {isExpanded && (
+          <div className="max-h-[60vh] overflow-y-auto border-t">
+            <div className="space-y-2 p-2">
+              {Object.entries(groupedValidations).map(([type, typeValidations]) => {
+                const firstValidation = typeValidations[0];
+                const Icon =
+                  firstValidation.severity === "error"
+                    ? AlertCircle
+                    : firstValidation.severity === "warning"
+                      ? AlertTriangle
+                      : Info;
+
+                return (
+                  <div key={type}>
+                    {/* 타입 헤더 */}
+                    <div
+                      className={cn(
+                        "mb-1 flex items-center gap-2 rounded-md px-2 py-1 text-xs font-medium",
+                        firstValidation.severity === "error"
+                          ? "bg-red-100 text-red-700"
+                          : firstValidation.severity === "warning"
+                            ? "bg-yellow-100 text-yellow-700"
+                            : "bg-blue-100 text-blue-700",
+                      )}
+                    >
+                      <Icon className="h-3 w-3" />
+                      {getTypeLabel(type)}
+                      <span className="ml-auto">{typeValidations.length}개</span>
+                    </div>
+
+                    {/* 검증 항목들 */}
+                    <div className="space-y-1 pl-5">
+                      {typeValidations.map((validation, index) => (
+                        <div
+                          key={index}
+                          className="group cursor-pointer rounded-md border border-gray-200 bg-gray-50 p-2 text-xs transition-all hover:border-gray-300 hover:bg-white hover:shadow-sm"
+                          onClick={() => onNodeClick?.(validation.nodeId)}
+                        >
+                          <p className="leading-relaxed text-gray-700">{validation.message}</p>
+                          {validation.affectedNodes && validation.affectedNodes.length > 1 && (
+                            <div className="mt-1 text-[10px] text-gray-500">
+                              영향받는 노드: {validation.affectedNodes.length}개
+                            </div>
+                          )}
+                          <div className="mt-1 text-[10px] text-blue-600 opacity-0 transition-opacity group-hover:opacity-100">
+                            클릭하여 노드 보기 →
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* 요약 메시지 (닫혀있을 때) */}
+        {!isExpanded && (
+          <div className="border-t px-3 py-2">
+            <p className="text-xs text-gray-600">
+              {summary.hasBlockingIssues
+                ? "⛔ 오류를 해결해야 저장할 수 있습니다"
+                : summary.warningCount > 0
+                  ? "⚠️ 경고 사항을 확인하세요"
+                  : "ℹ️ 정보를 확인하세요"}
+            </p>
+          </div>
+        )}
       </div>
-    );
-  }
-);
+    </div>
+  );
+});
 
 ValidationNotification.displayName = "ValidationNotification";
-
diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 1a14c2d9..b54df6ad 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -49,6 +49,7 @@ import { toast } from "sonner";
 import { FileUpload } from "@/components/screen/widgets/FileUpload";
 import { AdvancedSearchFilters } from "./filters/AdvancedSearchFilters";
 import { SaveModal } from "./SaveModal";
+import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 
 // 파일 데이터 타입 정의 (AttachedFileInfo와 호환)
 interface FileInfo {
@@ -97,6 +98,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   style = {},
   onRefresh,
 }) => {
+  const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchValues, setSearchValues] = useState<Record<string, any>>({});
@@ -411,6 +413,29 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     async (page: number = 1, searchParams: Record<string, any> = {}) => {
       if (!component.tableName) return;
 
+      // 프리뷰 모드에서는 샘플 데이터만 표시
+      if (isPreviewMode) {
+        const sampleData = Array.from({ length: 3 }, (_, i) => {
+          const sample: Record<string, any> = { id: i + 1 };
+          component.columns.forEach((col) => {
+            if (col.type === "number") {
+              sample[col.key] = Math.floor(Math.random() * 1000);
+            } else if (col.type === "boolean") {
+              sample[col.key] = i % 2 === 0 ? "Y" : "N";
+            } else {
+              sample[col.key] = `샘플 ${col.label} ${i + 1}`;
+            }
+          });
+          return sample;
+        });
+        setData(sampleData);
+        setTotal(3);
+        setTotalPages(1);
+        setCurrentPage(1);
+        setLoading(false);
+        return;
+      }
+
       setLoading(true);
       try {
         const result = await tableTypeApi.getTableData(component.tableName, {
@@ -1792,21 +1817,53 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
             {/* CRUD 버튼들 */}
             {component.enableAdd && (
-              <Button size="sm" onClick={handleAddData} disabled={loading} className="gap-2">
+              <Button
+                size="sm"
+                onClick={() => {
+                  if (isPreviewMode) {
+                    return;
+                  }
+                  handleAddData();
+                }}
+                disabled={loading || isPreviewMode}
+                className="gap-2"
+              >
                 <Plus className="h-3 w-3" />
                 {component.addButtonText || "추가"}
               </Button>
             )}
 
             {component.enableEdit && selectedRows.size === 1 && (
-              <Button size="sm" onClick={handleEditData} disabled={loading} className="gap-2" variant="outline">
+              <Button
+                size="sm"
+                onClick={() => {
+                  if (isPreviewMode) {
+                    return;
+                  }
+                  handleEditData();
+                }}
+                disabled={loading || isPreviewMode}
+                className="gap-2"
+                variant="outline"
+              >
                 <Edit className="h-3 w-3" />
                 {component.editButtonText || "수정"}
               </Button>
             )}
 
             {component.enableDelete && selectedRows.size > 0 && (
-              <Button size="sm" variant="destructive" onClick={handleDeleteData} disabled={loading} className="gap-2">
+              <Button
+                size="sm"
+                variant="destructive"
+                onClick={() => {
+                  if (isPreviewMode) {
+                    return;
+                  }
+                  handleDeleteData();
+                }}
+                disabled={loading || isPreviewMode}
+                className="gap-2"
+              >
                 <Trash2 className="h-3 w-3" />
                 {component.deleteButtonText || "삭제"}
               </Button>
diff --git a/frontend/components/screen/InteractiveScreenViewer.tsx b/frontend/components/screen/InteractiveScreenViewer.tsx
index cafd611a..8b02211e 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -45,6 +45,7 @@ import { UnifiedColumnInfo as ColumnInfo } from "@/types";
 import { isFileComponent } from "@/lib/utils/componentTypeUtils";
 import { buildGridClasses } from "@/lib/constants/columnSpans";
 import { cn } from "@/lib/utils";
+import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 
 interface InteractiveScreenViewerProps {
   component: ComponentData;
@@ -86,6 +87,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     return <div className="h-full w-full" />;
   }
 
+  const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { userName, user } = useAuth(); // 현재 로그인한 사용자명과 사용자 정보 가져오기
   const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
   const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
@@ -211,6 +213,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
   // 폼 데이터 업데이트
   const updateFormData = (fieldName: string, value: any) => {
+    // 프리뷰 모드에서는 데이터 업데이트 하지 않음
+    if (isPreviewMode) {
+      return;
+    }
+    
     // console.log(`🔄 updateFormData: ${fieldName} = "${value}" (외부콜백: ${!!onFormDataChange})`);
     
     // 항상 로컬 상태도 업데이트
@@ -837,6 +844,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         });
 
         const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+          // 프리뷰 모드에서는 파일 업로드 차단
+          if (isPreviewMode) {
+            e.target.value = ""; // 파일 선택 취소
+            return;
+          }
+          
           const files = e.target.files;
           const fieldName = widget.columnName || widget.id;
           
@@ -1155,6 +1168,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const config = widget.webTypeConfig as ButtonTypeConfig | undefined;
 
         const handleButtonClick = async () => {
+          // 프리뷰 모드에서는 버튼 동작 차단
+          if (isPreviewMode) {
+            return;
+          }
+          
           const actionType = config?.actionType || "save";
           
           try {
@@ -1341,13 +1359,28 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                              allComponents.find(c => c.columnName)?.tableName ||
                              "dynamic_form_data"; // 기본값
 
+            // 🆕 자동으로 작성자 정보 추가
+            const writerValue = user?.userId || userName || "unknown";
+            console.log("👤 현재 사용자 정보:", {
+              userId: user?.userId,
+              userName: userName,
+              writerValue: writerValue,
+            });
+
+            const dataWithUserInfo = {
+              ...mappedData,
+              writer: writerValue, // 테이블 생성 시 자동 생성되는 컬럼
+              created_by: writerValue,
+              updated_by: writerValue,
+            };
+
             const saveData: DynamicFormData = {
               screenId: screenInfo.id,
               tableName: tableName,
-              data: mappedData,
+              data: dataWithUserInfo,
             };
 
-            // console.log("🚀 API 저장 요청:", saveData);
+            console.log("🚀 API 저장 요청:", saveData);
 
             const result = await dynamicFormApi.saveFormData(saveData);
 
@@ -1841,12 +1874,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         setPopupScreen(null);
         setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
       }}>
-        <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden">
-          <DialogHeader>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-4 pb-2">
             <DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
           </DialogHeader>
           
-          <div className="overflow-y-auto max-h-[60vh] p-2">
+          <div className="overflow-y-auto px-6 pb-6" style={{ maxHeight: "calc(90vh - 80px)" }}>
             {popupLoading ? (
               <div className="flex items-center justify-center py-8">
                 <div className="text-gray-500">화면을 불러오는 중...</div>
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index bca6ca7a..7ed39353 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -17,6 +17,7 @@ import { isFileComponent, isDataTableComponent, isButtonComponent } from "@/lib/
 import { FlowButtonGroup } from "./widgets/FlowButtonGroup";
 import { FlowVisibilityConfig } from "@/types/control-management";
 import { findAllButtonGroups } from "@/lib/utils/flowButtonGroupUtils";
+import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 
 // 컴포넌트 렌더러들을 강제로 로드하여 레지스트리에 등록
 import "@/lib/registry/components/ButtonRenderer";
@@ -47,6 +48,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   hideLabel = false,
   screenInfo,
 }) => {
+  const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { userName, user } = useAuth();
   const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
   const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
@@ -178,16 +180,6 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
     // 버튼 컴포넌트 또는 위젯이 아닌 경우 DynamicComponentRenderer 사용
     if (comp.type !== "widget") {
-      console.log("🎯 InteractiveScreenViewer - DynamicComponentRenderer 사용:", {
-        componentId: comp.id,
-        componentType: comp.type,
-        isButton: isButtonComponent(comp),
-        componentConfig: comp.componentConfig,
-        style: comp.style,
-        size: comp.size,
-        position: comp.position,
-      });
-
       return (
         <DynamicComponentRenderer
           component={comp}
@@ -209,7 +201,6 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
             setFlowSelectedStepId(stepId);
           }}
           onRefresh={() => {
-            console.log("🔄 버튼에서 테이블 새로고침 요청됨");
             // 테이블 컴포넌트는 자체적으로 loadData 호출
           }}
           onClose={() => {
@@ -405,7 +396,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
             await handleCustomAction();
             break;
           default:
-            // console.log("🔘 기본 버튼 클릭");
+          // console.log("🔘 기본 버튼 클릭");
         }
       } catch (error) {
         // console.error("버튼 액션 오류:", error);
@@ -437,9 +428,10 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     const fieldName = comp.columnName || comp.id;
 
     // 화면 ID 추출 (URL에서)
-    const screenId = screenInfo?.screenId || 
-      (typeof window !== 'undefined' && window.location.pathname.includes('/screens/') 
-        ? parseInt(window.location.pathname.split('/screens/')[1]) 
+    const screenId =
+      screenInfo?.screenId ||
+      (typeof window !== "undefined" && window.location.pathname.includes("/screens/")
+        ? parseInt(window.location.pathname.split("/screens/")[1])
         : null);
 
     return (
@@ -455,8 +447,8 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
             disabled: readonly,
           }}
           componentStyle={{
-            width: '100%',
-            height: '100%',
+            width: "100%",
+            height: "100%",
           }}
           className="h-full w-full"
           isInteractive={true}
@@ -465,12 +457,12 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
             screenId, // 🎯 화면 ID 전달
             // 🎯 백엔드 API가 기대하는 정확한 형식으로 설정
             autoLink: true, // 자동 연결 활성화
-            linkedTable: 'screen_files', // 연결 테이블
+            linkedTable: "screen_files", // 연결 테이블
             recordId: screenId, // 레코드 ID
             columnName: fieldName, // 컬럼명 (중요!)
             isVirtualFileColumn: true, // 가상 파일 컬럼
             id: formData.id,
-            ...formData
+            ...formData,
           }}
           onFormDataChange={(data) => {
             // console.log("📝 실제 화면 파일 업로드 완료:", data);
@@ -486,50 +478,54 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
               hasUploadedFiles: !!updates.uploadedFiles,
               filesCount: updates.uploadedFiles?.length || 0,
               hasLastFileUpdate: !!updates.lastFileUpdate,
-              updates
+              updates,
             });
-            
+
             // 파일 업로드/삭제 완료 시 formData 업데이터
             if (updates.uploadedFiles && onFormDataChange) {
               onFormDataChange(fieldName, updates.uploadedFiles);
             }
-            
+
             // 🎯 화면설계 모드와 동기화를 위한 전역 이벤트 발생 (업로드/삭제 모두)
-            if (updates.uploadedFiles !== undefined && typeof window !== 'undefined') {
+            if (updates.uploadedFiles !== undefined && typeof window !== "undefined") {
               // 업로드인지 삭제인지 판단 (lastFileUpdate가 있으면 변경사항 있음)
-              const action = updates.lastFileUpdate ? 'update' : 'sync';
-              
+              const action = updates.lastFileUpdate ? "update" : "sync";
+
               const eventDetail = {
                 componentId: comp.id,
                 files: updates.uploadedFiles,
                 fileCount: updates.uploadedFiles.length,
                 action: action,
                 timestamp: updates.lastFileUpdate || Date.now(),
-                source: 'realScreen' // 실제 화면에서 온 이벤트임을 표시
+                source: "realScreen", // 실제 화면에서 온 이벤트임을 표시
               };
-              
+
               // console.log("🚀🚀🚀 실제 화면 파일 변경 이벤트 발생:", eventDetail);
-              
-              const event = new CustomEvent('globalFileStateChanged', {
-                detail: eventDetail
+
+              const event = new CustomEvent("globalFileStateChanged", {
+                detail: eventDetail,
               });
               window.dispatchEvent(event);
-              
+
               // console.log("✅✅✅ 실제 화면 → 화면설계 모드 동기화 이벤트 발생 완료");
-              
+
               // 추가 지연 이벤트들 (화면설계 모드가 열려있을 때를 대비)
               setTimeout(() => {
                 // console.log("🔄 실제 화면 추가 이벤트 발생 (지연 100ms)");
-                window.dispatchEvent(new CustomEvent('globalFileStateChanged', {
-                  detail: { ...eventDetail, delayed: true }
-                }));
+                window.dispatchEvent(
+                  new CustomEvent("globalFileStateChanged", {
+                    detail: { ...eventDetail, delayed: true },
+                  }),
+                );
               }, 100);
-              
+
               setTimeout(() => {
                 // console.log("🔄 실제 화면 추가 이벤트 발생 (지연 500ms)");
-                window.dispatchEvent(new CustomEvent('globalFileStateChanged', {
-                  detail: { ...eventDetail, delayed: true, attempt: 2 }
-                }));
+                window.dispatchEvent(
+                  new CustomEvent("globalFileStateChanged", {
+                    detail: { ...eventDetail, delayed: true, attempt: 2 },
+                  }),
+                );
               }, 500);
             }
           }}
diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index 31f493e7..df14084b 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -38,6 +38,9 @@ interface RealtimePreviewProps {
   // 버튼 액션을 위한 props
   screenId?: number;
   tableName?: string;
+  userId?: string; // 🆕 현재 사용자 ID
+  userName?: string; // 🆕 현재 사용자 이름
+  companyCode?: string; // 🆕 현재 사용자의 회사 코드
   selectedRowsData?: any[];
   onSelectedRowsChange?: (selectedRows: any[], selectedRowsData: any[]) => void;
   flowSelectedData?: any[];
@@ -96,6 +99,9 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   onConfigChange,
   screenId,
   tableName,
+  userId, // 🆕 사용자 ID
+  userName, // 🆕 사용자 이름
+  companyCode, // 🆕 회사 코드
   selectedRowsData,
   onSelectedRowsChange,
   flowSelectedData,
@@ -291,6 +297,9 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
           onConfigChange={onConfigChange}
           screenId={screenId}
           tableName={tableName}
+          userId={userId}
+          userName={userName}
+          companyCode={companyCode}
           selectedRowsData={selectedRowsData}
           onSelectedRowsChange={onSelectedRowsChange}
           flowSelectedData={flowSelectedData}
diff --git a/frontend/components/screen/SaveModal.tsx b/frontend/components/screen/SaveModal.tsx
index ddd55237..271a83d9 100644
--- a/frontend/components/screen/SaveModal.tsx
+++ b/frontend/components/screen/SaveModal.tsx
@@ -10,6 +10,7 @@ import { InteractiveScreenViewer } from "./InteractiveScreenViewer";
 import { screenApi } from "@/lib/api/screen";
 import { dynamicFormApi, DynamicFormData } from "@/lib/api/dynamicForm";
 import { ComponentData } from "@/lib/types/screen";
+import { useAuth } from "@/hooks/useAuth";
 
 interface SaveModalProps {
   isOpen: boolean;
@@ -33,6 +34,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
   initialData,
   onSaveSuccess,
 }) => {
+  const { user, userName } = useAuth(); // 현재 사용자 정보 가져오기
   const [formData, setFormData] = useState<Record<string, any>>(initialData || {});
   const [originalData, setOriginalData] = useState<Record<string, any>>(initialData || {});
   const [screenData, setScreenData] = useState<any>(null);
@@ -88,13 +90,13 @@ export const SaveModal: React.FC<SaveModalProps> = ({
       onClose();
     };
 
-    if (typeof window !== 'undefined') {
-      window.addEventListener('closeSaveModal', handleCloseSaveModal);
+    if (typeof window !== "undefined") {
+      window.addEventListener("closeSaveModal", handleCloseSaveModal);
     }
 
     return () => {
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('closeSaveModal', handleCloseSaveModal);
+      if (typeof window !== "undefined") {
+        window.removeEventListener("closeSaveModal", handleCloseSaveModal);
       }
     };
   }, [onClose]);
@@ -127,16 +129,28 @@ export const SaveModal: React.FC<SaveModalProps> = ({
       // 저장할 데이터 준비
       const dataToSave = initialData ? changedData : formData;
 
+      // 🆕 자동으로 작성자 정보 추가
+      const writerValue = user?.userId || userName || "unknown";
+      console.log("👤 현재 사용자 정보:", {
+        userId: user?.userId,
+        userName: userName,
+        writerValue: writerValue,
+      });
+
+      const dataWithUserInfo = {
+        ...dataToSave,
+        writer: writerValue, // 테이블 생성 시 자동 생성되는 컬럼
+        created_by: writerValue,
+        updated_by: writerValue,
+      };
+
       // 테이블명 결정
-      const tableName =
-        screenData.tableName ||
-        components.find((c) => c.columnName)?.tableName ||
-        "dynamic_form_data";
+      const tableName = screenData.tableName || components.find((c) => c.columnName)?.tableName || "dynamic_form_data";
 
       const saveData: DynamicFormData = {
         screenId: screenId,
         tableName: tableName,
-        data: dataToSave,
+        data: dataWithUserInfo,
       };
 
       console.log("💾 저장 요청 데이터:", saveData);
@@ -147,10 +161,10 @@ export const SaveModal: React.FC<SaveModalProps> = ({
       if (result.success) {
         // ✅ 저장 성공
         toast.success(initialData ? "수정되었습니다!" : "저장되었습니다!");
-        
+
         // 모달 닫기
         onClose();
-        
+
         // 테이블 새로고침 콜백 호출
         if (onSaveSuccess) {
           setTimeout(() => {
@@ -187,19 +201,12 @@ export const SaveModal: React.FC<SaveModalProps> = ({
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !isSaving && !open && onClose()}>
-      <DialogContent className={`${modalSizeClasses[modalSize]} max-h-[90vh] p-0 gap-0`}>
-        <DialogHeader className="px-6 py-4 border-b">
+      <DialogContent className={`${modalSizeClasses[modalSize]} max-h-[90vh] gap-0 p-0`}>
+        <DialogHeader className="border-b px-6 py-4">
           <div className="flex items-center justify-between">
-            <DialogTitle className="text-lg font-semibold">
-              {initialData ? "데이터 수정" : "데이터 등록"}
-            </DialogTitle>
+            <DialogTitle className="text-lg font-semibold">{initialData ? "데이터 수정" : "데이터 등록"}</DialogTitle>
             <div className="flex items-center gap-2">
-              <Button
-                onClick={handleSave}
-                disabled={isSaving}
-                size="sm"
-                className="gap-2"
-              >
+              <Button onClick={handleSave} disabled={isSaving} size="sm" className="gap-2">
                 {isSaving ? (
                   <>
                     <Loader2 className="h-4 w-4 animate-spin" />
@@ -212,12 +219,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
                   </>
                 )}
               </Button>
-              <Button
-                onClick={onClose}
-                disabled={isSaving}
-                variant="ghost"
-                size="sm"
-              >
+              <Button onClick={onClose} disabled={isSaving} variant="ghost" size="sm">
                 <X className="h-4 w-4" />
               </Button>
             </div>
@@ -227,7 +229,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
         <div className="overflow-auto p-6">
           {loading ? (
             <div className="flex items-center justify-center py-12">
-              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+              <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
             </div>
           ) : screenData && components.length > 0 ? (
             <div
@@ -293,13 +295,10 @@ export const SaveModal: React.FC<SaveModalProps> = ({
               </div>
             </div>
           ) : (
-            <div className="py-12 text-center text-muted-foreground">
-              화면에 컴포넌트가 없습니다.
-            </div>
+            <div className="text-muted-foreground py-12 text-center">화면에 컴포넌트가 없습니다.</div>
           )}
         </div>
       </DialogContent>
     </Dialog>
   );
 };
-
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 7a0c6004..4814933b 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -70,6 +70,7 @@ import {
   findAllButtonGroups,
 } from "@/lib/utils/flowButtonGroupUtils";
 import { FlowButtonGroupDialog } from "./dialogs/FlowButtonGroupDialog";
+import { ScreenPreviewProvider } from "@/contexts/ScreenPreviewContext";
 
 // 새로운 통합 UI 컴포넌트
 import { LeftUnifiedToolbar, defaultToolbarButtons } from "./toolbar/LeftUnifiedToolbar";
@@ -86,21 +87,12 @@ interface ScreenDesignerProps {
   onBackToList: () => void;
 }
 
-// 패널 설정 (컴포넌트와 편집 2개)
+// 패널 설정 (통합 패널 1개)
 const panelConfigs: PanelConfig[] = [
-  // 컴포넌트 패널 (테이블 + 컴포넌트 탭)
+  // 통합 패널 (컴포넌트 + 편집 탭)
   {
-    id: "components",
-    title: "컴포넌트",
-    defaultPosition: "left",
-    defaultWidth: 240,
-    defaultHeight: 700,
-    shortcutKey: "c",
-  },
-  // 편집 패널 (속성 + 스타일 & 해상도 탭)
-  {
-    id: "properties",
-    title: "편집",
+    id: "unified",
+    title: "패널",
     defaultPosition: "left",
     defaultWidth: 240,
     defaultHeight: 700,
@@ -140,14 +132,14 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
   const [selectedComponent, setSelectedComponent] = useState<ComponentData | null>(null);
 
-  // 컴포넌트 선택 시 속성 패널 자동 열기
+  // 컴포넌트 선택 시 통합 패널 자동 열기
   const handleComponentSelect = useCallback(
     (component: ComponentData | null) => {
       setSelectedComponent(component);
 
-      // 컴포넌트가 선택되면 속성 패널 자동 열기
+      // 컴포넌트가 선택되면 통합 패널 자동 열기
       if (component) {
-        openPanel("properties");
+        openPanel("unified");
       }
     },
     [openPanel],
@@ -411,6 +403,33 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         const targetComponent = prevLayout.components.find((comp) => comp.id === componentId);
         const isLayoutComponent = targetComponent?.type === "layout";
 
+        // 🆕 그룹 설정 변경 시 같은 그룹의 모든 버튼에 일괄 적용
+        const isGroupSetting = path === "webTypeConfig.flowVisibilityConfig.groupAlign";
+
+        let affectedComponents: string[] = [componentId]; // 기본적으로 현재 컴포넌트만
+
+        if (isGroupSetting && targetComponent) {
+          const flowConfig = (targetComponent as any).webTypeConfig?.flowVisibilityConfig;
+          const currentGroupId = flowConfig?.groupId;
+
+          if (currentGroupId) {
+            // 같은 그룹의 모든 버튼 찾기
+            affectedComponents = prevLayout.components
+              .filter((comp) => {
+                const compConfig = (comp as any).webTypeConfig?.flowVisibilityConfig;
+                return compConfig?.groupId === currentGroupId && compConfig?.enabled;
+              })
+              .map((comp) => comp.id);
+
+            console.log("🔄 그룹 설정 일괄 적용:", {
+              groupId: currentGroupId,
+              setting: path.split(".").pop(),
+              value,
+              affectedButtons: affectedComponents,
+            });
+          }
+        }
+
         // 레이아웃 컴포넌트의 위치가 변경되는 경우 존에 속한 컴포넌트들도 함께 이동
         const positionDelta = { x: 0, y: 0 };
         if (isLayoutComponent && (path === "position.x" || path === "position.y" || path === "position")) {
@@ -439,7 +458,10 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
         const pathParts = path.split(".");
         const updatedComponents = prevLayout.components.map((comp) => {
-          if (comp.id !== componentId) {
+          // 🆕 그룹 설정이면 같은 그룹의 모든 버튼에 적용
+          const shouldUpdate = isGroupSetting ? affectedComponents.includes(comp.id) : comp.id === componentId;
+
+          if (!shouldUpdate) {
             // 레이아웃 이동 시 존에 속한 컴포넌트들도 함께 이동
             if (isLayoutComponent && (positionDelta.x !== 0 || positionDelta.y !== 0)) {
               // 이 레이아웃의 존에 속한 컴포넌트인지 확인
@@ -3475,10 +3497,45 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     // 그룹 해제
     const ungroupedButtons = ungroupButtons(buttons);
 
-    // 레이아웃 업데이트
-    const updatedComponents = layout.components.map((comp) => {
+    // 레이아웃 업데이트 + 플로우 표시 제어 초기화
+    const updatedComponents = layout.components.map((comp, index) => {
       const ungrouped = ungroupedButtons.find((ub) => ub.id === comp.id);
-      return ungrouped || comp;
+
+      if (ungrouped) {
+        // 원래 위치 복원 또는 현재 위치 유지 + 간격 추가
+        const buttonIndex = buttons.findIndex((b) => b.id === comp.id);
+        const basePosition = comp.position;
+
+        // 버튼들을 오른쪽으로 조금씩 이동 (겹치지 않도록)
+        const offsetX = buttonIndex * 120; // 각 버튼당 120px 간격
+
+        // 그룹 해제된 버튼의 플로우 표시 제어를 끄고 설정 초기화
+        return {
+          ...ungrouped,
+          position: {
+            x: basePosition.x + offsetX,
+            y: basePosition.y,
+            z: basePosition.z || 1,
+          },
+          webTypeConfig: {
+            ...ungrouped.webTypeConfig,
+            flowVisibilityConfig: {
+              enabled: false,
+              targetFlowComponentId: null,
+              mode: "whitelist",
+              visibleSteps: [],
+              hiddenSteps: [],
+              layoutBehavior: "auto-compact",
+              groupId: null,
+              groupDirection: "horizontal",
+              groupGap: 8,
+              groupAlign: "start",
+            },
+          },
+        };
+      }
+
+      return comp;
     });
 
     const newLayout = {
@@ -3489,7 +3546,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     setLayout(newLayout);
     saveToHistory(newLayout);
 
-    toast.success(`${buttons.length}개의 버튼 그룹이 해제되었습니다`);
+    toast.success(`${buttons.length}개의 버튼 그룹이 해제되고 플로우 표시 제어가 비활성화되었습니다`);
   }, [layout, groupState.selectedComponents, saveToHistory]);
 
   // 그룹 생성 (임시 비활성화)
@@ -4102,786 +4159,787 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
   }
 
   return (
-    <div className="bg-background flex h-full w-full flex-col">
-      {/* 상단 슬림 툴바 */}
-      <SlimToolbar
-        screenName={selectedScreen?.screenName}
-        tableName={selectedScreen?.tableName}
-        screenResolution={screenResolution}
-        onBack={onBackToList}
-        onSave={handleSave}
-        isSaving={isSaving}
-      />
-      {/* 메인 컨테이너 (좌측 툴바 + 패널들 + 캔버스) */}
-      <div className="flex flex-1 overflow-hidden">
-        {/* 좌측 통합 툴바 */}
-        <LeftUnifiedToolbar buttons={defaultToolbarButtons} panelStates={panelStates} onTogglePanel={togglePanel} />
+    <ScreenPreviewProvider isPreviewMode={true}>
+      <div className="bg-background flex h-full w-full flex-col">
+        {/* 상단 슬림 툴바 */}
+        <SlimToolbar
+          screenName={selectedScreen?.screenName}
+          tableName={selectedScreen?.tableName}
+          screenResolution={screenResolution}
+          onBack={onBackToList}
+          onSave={handleSave}
+          isSaving={isSaving}
+        />
+        {/* 메인 컨테이너 (좌측 툴바 + 패널들 + 캔버스) */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* 좌측 통합 툴바 */}
+          <LeftUnifiedToolbar buttons={defaultToolbarButtons} panelStates={panelStates} onTogglePanel={togglePanel} />
 
-        {/* 열린 패널들 (좌측에서 우측으로 누적) */}
-        {panelStates.components?.isOpen && (
-          <div className="border-border bg-card flex h-full w-[240px] flex-col border-r shadow-sm">
-            <div className="border-border flex items-center justify-between border-b px-6 py-4">
-              <h3 className="text-foreground text-lg font-semibold">컴포넌트</h3>
-              <button
-                onClick={() => closePanel("components")}
-                className="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-              >
-                ✕
-              </button>
-            </div>
-            <div className="flex-1 overflow-hidden">
-              <ComponentsPanel
-                tables={filteredTables}
-                searchTerm={searchTerm}
-                onSearchChange={setSearchTerm}
-                onTableDragStart={(e, table, column) => {
-                  const dragData = {
-                    type: column ? "column" : "table",
-                    table,
-                    column,
-                  };
-                  e.dataTransfer.setData("application/json", JSON.stringify(dragData));
-                }}
-                selectedTableName={selectedScreen.tableName}
-                placedColumns={placedColumns}
-              />
-            </div>
-          </div>
-        )}
-
-        {panelStates.properties?.isOpen && (
-          <div className="border-border bg-card flex h-full w-[240px] flex-col border-r shadow-sm">
-            <div className="border-border flex items-center justify-between border-b px-6 py-4">
-              <h3 className="text-foreground text-lg font-semibold">속성</h3>
-              <button
-                onClick={() => closePanel("properties")}
-                className="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-              >
-                ✕
-              </button>
-            </div>
-            <div className="flex-1 overflow-hidden">
-              <UnifiedPropertiesPanel
-                selectedComponent={selectedComponent || undefined}
-                tables={tables}
-                onUpdateProperty={updateComponentProperty}
-                onDeleteComponent={deleteComponent}
-                onCopyComponent={copyComponent}
-                currentTable={tables.length > 0 ? tables[0] : undefined}
-                currentTableName={selectedScreen?.tableName}
-                dragState={dragState}
-                onStyleChange={(style) => {
-                  if (selectedComponent) {
-                    updateComponentProperty(selectedComponent.id, "style", style);
-                  }
-                }}
-                currentResolution={screenResolution}
-                onResolutionChange={handleResolutionChange}
-                allComponents={layout.components} // 🆕 플로우 위젯 감지용
-              />
-            </div>
-          </div>
-        )}
-
-        {/* 스타일과 해상도 패널은 속성 패널의 탭으로 통합됨 */}
-
-        {/* 메인 캔버스 영역 (스크롤 가능한 컨테이너) - 좌우 최소화, 위아래 넉넉한 여유 */}
-        <div ref={canvasContainerRef} className="bg-muted relative flex-1 overflow-auto px-16 py-6">
-          {/* Pan 모드 안내 - 제거됨 */}
-          {/* 줌 레벨 표시 */}
-          <div className="bg-card text-foreground border-border pointer-events-none fixed right-6 bottom-6 z-50 rounded-lg border px-4 py-2 text-sm font-medium shadow-md">
-            🔍 {Math.round(zoomLevel * 100)}%
-          </div>
-          {/* 🆕 플로우 버튼 그룹 제어 (버튼 선택 시 표시) */}
-          {(() => {
-            // 선택된 컴포넌트들
-            const selectedComps = layout.components.filter((c) => groupState.selectedComponents.includes(c.id));
-
-            // 버튼 컴포넌트만 필터링
-            const selectedButtons = selectedComps.filter((comp) => areAllButtons([comp]));
-
-            // 플로우 그룹에 속한 버튼이 있는지 확인
-            const hasFlowGroupButton = selectedButtons.some((btn) => {
-              const flowConfig = (btn as any).webTypeConfig?.flowVisibilityConfig;
-              return flowConfig?.enabled && flowConfig.layoutBehavior === "auto-compact" && flowConfig.groupId;
-            });
-
-            // 버튼이 선택되었거나 플로우 그룹 버튼이 있으면 표시
-            const shouldShow = selectedButtons.length >= 1 && (selectedButtons.length >= 2 || hasFlowGroupButton);
-
-            if (!shouldShow) return null;
-
-            return (
-              <div className="bg-card border-border fixed right-6 bottom-20 z-50 rounded-lg border shadow-lg">
-                <div className="flex flex-col gap-2 p-3">
-                  <div className="mb-1 flex items-center gap-2 text-xs text-gray-600">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
-                      <polyline points="3.29 7 12 12 20.71 7"></polyline>
-                      <line x1="12" y1="22" x2="12" y2="12"></line>
-                    </svg>
-                    <span className="font-medium">{selectedButtons.length}개 버튼 선택됨</span>
-                  </div>
-
-                  {/* 그룹 생성 버튼 (2개 이상 선택 시) */}
-                  {selectedButtons.length >= 2 && (
-                    <Button
-                      size="sm"
-                      variant="default"
-                      onClick={handleFlowButtonGroup}
-                      disabled={selectedButtons.length < 2}
-                      className="flex items-center gap-2 text-xs"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="14"
-                        height="14"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      >
-                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                        <line x1="9" y1="3" x2="9" y2="21"></line>
-                        <line x1="15" y1="3" x2="15" y2="21"></line>
-                      </svg>
-                      플로우 그룹으로 묶기
-                    </Button>
-                  )}
-
-                  {/* 그룹 해제 버튼 (플로우 그룹 버튼이 있으면 항상 표시) */}
-                  {hasFlowGroupButton && (
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={handleFlowButtonUngroup}
-                      className="flex items-center gap-2 text-xs"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="14"
-                        height="14"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      >
-                        <rect x="3" y="3" width="7" height="7"></rect>
-                        <rect x="14" y="3" width="7" height="7"></rect>
-                        <rect x="14" y="14" width="7" height="7"></rect>
-                        <rect x="3" y="14" width="7" height="7"></rect>
-                      </svg>
-                      그룹 해제
-                    </Button>
-                  )}
-
-                  {/* 상태 표시 */}
-                  {hasFlowGroupButton && <p className="mt-1 text-[10px] text-blue-600">✓ 플로우 그룹 버튼</p>}
-                </div>
+          {/* 통합 패널 */}
+          {panelStates.unified?.isOpen && (
+            <div className="border-border bg-card flex h-full w-[240px] flex-col border-r shadow-sm">
+              <div className="border-border flex items-center justify-between border-b px-4 py-3">
+                <h3 className="text-foreground text-sm font-semibold">패널</h3>
+                <button
+                  onClick={() => closePanel("unified")}
+                  className="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+                >
+                  ✕
+                </button>
               </div>
-            );
-          })()}
-          {/* 🔥 줌 적용 시 스크롤 영역 확보를 위한 래퍼 */}
-          <div
-            className="flex justify-center"
-            style={{
-              width: "100%",
-              minHeight: screenResolution.height * zoomLevel,
-            }}
-          >
-            {/* 실제 작업 캔버스 (해상도 크기) - 고정 크기 + 줌 적용 */}
+              <div className="flex min-h-0 flex-1 flex-col">
+                <Tabs defaultValue="components" className="flex min-h-0 flex-1 flex-col">
+                  <TabsList className="mx-4 mt-2 grid h-8 w-auto grid-cols-2 gap-1">
+                    <TabsTrigger value="components" className="text-xs">
+                      컴포넌트
+                    </TabsTrigger>
+                    <TabsTrigger value="properties" className="text-xs">
+                      편집
+                    </TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent value="components" className="mt-0 flex-1 overflow-hidden">
+                    <ComponentsPanel
+                      tables={filteredTables}
+                      searchTerm={searchTerm}
+                      onSearchChange={setSearchTerm}
+                      onTableDragStart={(e, table, column) => {
+                        const dragData = {
+                          type: column ? "column" : "table",
+                          table,
+                          column,
+                        };
+                        e.dataTransfer.setData("application/json", JSON.stringify(dragData));
+                      }}
+                      selectedTableName={selectedScreen.tableName}
+                      placedColumns={placedColumns}
+                    />
+                  </TabsContent>
+
+                  <TabsContent value="properties" className="mt-0 flex-1 overflow-hidden">
+                    <UnifiedPropertiesPanel
+                      selectedComponent={selectedComponent || undefined}
+                      tables={tables}
+                      onUpdateProperty={updateComponentProperty}
+                      onDeleteComponent={deleteComponent}
+                      onCopyComponent={copyComponent}
+                      currentTable={tables.length > 0 ? tables[0] : undefined}
+                      currentTableName={selectedScreen?.tableName}
+                      dragState={dragState}
+                      onStyleChange={(style) => {
+                        if (selectedComponent) {
+                          updateComponentProperty(selectedComponent.id, "style", style);
+                        }
+                      }}
+                      currentResolution={screenResolution}
+                      onResolutionChange={handleResolutionChange}
+                      allComponents={layout.components} // 🆕 플로우 위젯 감지용
+                    />
+                  </TabsContent>
+                </Tabs>
+              </div>
+            </div>
+          )}
+
+          {/* 메인 캔버스 영역 (스크롤 가능한 컨테이너) - 좌우 최소화, 위아래 넉넉한 여유 */}
+          <div ref={canvasContainerRef} className="bg-muted relative flex-1 overflow-auto px-16 py-6">
+            {/* Pan 모드 안내 - 제거됨 */}
+            {/* 줌 레벨 표시 */}
+            <div className="bg-card text-foreground border-border pointer-events-none fixed right-6 bottom-6 z-50 rounded-lg border px-4 py-2 text-sm font-medium shadow-md">
+              🔍 {Math.round(zoomLevel * 100)}%
+            </div>
+            {/* 🆕 플로우 버튼 그룹 제어 (버튼 선택 시 표시) */}
+            {(() => {
+              // 선택된 컴포넌트들
+              const selectedComps = layout.components.filter((c) => groupState.selectedComponents.includes(c.id));
+
+              // 버튼 컴포넌트만 필터링
+              const selectedButtons = selectedComps.filter((comp) => areAllButtons([comp]));
+
+              // 플로우 그룹에 속한 버튼이 있는지 확인
+              const hasFlowGroupButton = selectedButtons.some((btn) => {
+                const flowConfig = (btn as any).webTypeConfig?.flowVisibilityConfig;
+                return flowConfig?.enabled && flowConfig.layoutBehavior === "auto-compact" && flowConfig.groupId;
+              });
+
+              // 버튼이 선택되었거나 플로우 그룹 버튼이 있으면 표시
+              const shouldShow = selectedButtons.length >= 1 && (selectedButtons.length >= 2 || hasFlowGroupButton);
+
+              if (!shouldShow) return null;
+
+              return (
+                <div className="bg-card border-border fixed right-6 bottom-20 z-50 rounded-lg border shadow-lg">
+                  <div className="flex flex-col gap-2 p-3">
+                    <div className="mb-1 flex items-center gap-2 text-xs text-gray-600">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+                        <polyline points="3.29 7 12 12 20.71 7"></polyline>
+                        <line x1="12" y1="22" x2="12" y2="12"></line>
+                      </svg>
+                      <span className="font-medium">{selectedButtons.length}개 버튼 선택됨</span>
+                    </div>
+
+                    {/* 그룹 생성 버튼 (2개 이상 선택 시) */}
+                    {selectedButtons.length >= 2 && (
+                      <Button
+                        size="sm"
+                        variant="default"
+                        onClick={handleFlowButtonGroup}
+                        disabled={selectedButtons.length < 2}
+                        className="flex items-center gap-2 text-xs"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="14"
+                          height="14"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        >
+                          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                          <line x1="9" y1="3" x2="9" y2="21"></line>
+                          <line x1="15" y1="3" x2="15" y2="21"></line>
+                        </svg>
+                        플로우 그룹으로 묶기
+                      </Button>
+                    )}
+
+                    {/* 그룹 해제 버튼 (플로우 그룹 버튼이 있으면 항상 표시) */}
+                    {hasFlowGroupButton && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={handleFlowButtonUngroup}
+                        className="flex items-center gap-2 text-xs"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="14"
+                          height="14"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        >
+                          <rect x="3" y="3" width="7" height="7"></rect>
+                          <rect x="14" y="3" width="7" height="7"></rect>
+                          <rect x="14" y="14" width="7" height="7"></rect>
+                          <rect x="3" y="14" width="7" height="7"></rect>
+                        </svg>
+                        그룹 해제
+                      </Button>
+                    )}
+
+                    {/* 상태 표시 */}
+                    {hasFlowGroupButton && <p className="mt-1 text-[10px] text-blue-600">✓ 플로우 그룹 버튼</p>}
+                  </div>
+                </div>
+              );
+            })()}
+            {/* 🔥 줌 적용 시 스크롤 영역 확보를 위한 래퍼 */}
             <div
-              className="bg-background border-border border shadow-lg"
+              className="flex justify-center"
               style={{
-                width: `${screenResolution.width}px`,
-                height: `${screenResolution.height}px`,
-                minWidth: `${screenResolution.width}px`,
-                maxWidth: `${screenResolution.width}px`,
-                minHeight: `${screenResolution.height}px`,
-                flexShrink: 0,
-                transform: `scale(${zoomLevel})`,
-                transformOrigin: "top center",
+                width: "100%",
+                minHeight: screenResolution.height * zoomLevel,
               }}
             >
+              {/* 실제 작업 캔버스 (해상도 크기) - 고정 크기 + 줌 적용 */}
               <div
-                ref={canvasRef}
-                className="bg-background relative h-full w-full overflow-visible"
-                onClick={(e) => {
-                  if (e.target === e.currentTarget && !selectionDrag.wasSelecting && !isPanMode) {
-                    setSelectedComponent(null);
-                    setGroupState((prev) => ({ ...prev, selectedComponents: [] }));
-                  }
-                }}
-                onMouseDown={(e) => {
-                  // Pan 모드가 아닐 때만 다중 선택 시작
-                  if (e.target === e.currentTarget && !isPanMode) {
-                    startSelectionDrag(e);
-                  }
-                }}
-                onDragOver={(e) => {
-                  e.preventDefault();
-                  e.dataTransfer.dropEffect = "copy";
-                }}
-                onDrop={(e) => {
-                  e.preventDefault();
-                  // console.log("🎯 캔버스 드롭 이벤트 발생");
-                  handleDrop(e);
+                className="bg-background border-border border shadow-lg"
+                style={{
+                  width: `${screenResolution.width}px`,
+                  height: `${screenResolution.height}px`,
+                  minWidth: `${screenResolution.width}px`,
+                  maxWidth: `${screenResolution.width}px`,
+                  minHeight: `${screenResolution.height}px`,
+                  flexShrink: 0,
+                  transform: `scale(${zoomLevel})`,
+                  transformOrigin: "top center",
                 }}
               >
-                {/* 격자 라인 */}
-                {gridLines.map((line, index) => (
-                  <div
-                    key={index}
-                    className="bg-border pointer-events-none absolute"
-                    style={{
-                      left: line.type === "vertical" ? `${line.position}px` : 0,
-                      top: line.type === "horizontal" ? `${line.position}px` : 0,
-                      width: line.type === "vertical" ? "1px" : "100%",
-                      height: line.type === "horizontal" ? "1px" : "100%",
-                      opacity: layout.gridSettings?.gridOpacity || 0.3,
-                    }}
-                  />
-                ))}
-
-                {/* 컴포넌트들 */}
-                {(() => {
-                  // 🆕 플로우 버튼 그룹 감지 및 처리
-                  const topLevelComponents = layout.components.filter((component) => !component.parentId);
-
-                  // auto-compact 모드의 버튼들을 그룹별로 묶기
-                  const buttonGroups: Record<string, ComponentData[]> = {};
-                  const processedButtonIds = new Set<string>();
-
-                  topLevelComponents.forEach((component) => {
-                    const isButton =
-                      component.type === "button" ||
-                      (component.type === "component" &&
-                        ["button-primary", "button-secondary"].includes((component as any).componentType));
-
-                    if (isButton) {
-                      const flowConfig = (component as any).webTypeConfig?.flowVisibilityConfig as
-                        | FlowVisibilityConfig
-                        | undefined;
-
-                      if (flowConfig?.enabled && flowConfig.layoutBehavior === "auto-compact" && flowConfig.groupId) {
-                        if (!buttonGroups[flowConfig.groupId]) {
-                          buttonGroups[flowConfig.groupId] = [];
-                        }
-                        buttonGroups[flowConfig.groupId].push(component);
-                        processedButtonIds.add(component.id);
-                      }
+                <div
+                  ref={canvasRef}
+                  className="bg-background relative h-full w-full overflow-visible"
+                  onClick={(e) => {
+                    if (e.target === e.currentTarget && !selectionDrag.wasSelecting && !isPanMode) {
+                      setSelectedComponent(null);
+                      setGroupState((prev) => ({ ...prev, selectedComponents: [] }));
                     }
-                  });
+                  }}
+                  onMouseDown={(e) => {
+                    // Pan 모드가 아닐 때만 다중 선택 시작
+                    if (e.target === e.currentTarget && !isPanMode) {
+                      startSelectionDrag(e);
+                    }
+                  }}
+                  onDragOver={(e) => {
+                    e.preventDefault();
+                    e.dataTransfer.dropEffect = "copy";
+                  }}
+                  onDrop={(e) => {
+                    e.preventDefault();
+                    // console.log("🎯 캔버스 드롭 이벤트 발생");
+                    handleDrop(e);
+                  }}
+                >
+                  {/* 격자 라인 */}
+                  {gridLines.map((line, index) => (
+                    <div
+                      key={index}
+                      className="bg-border pointer-events-none absolute"
+                      style={{
+                        left: line.type === "vertical" ? `${line.position}px` : 0,
+                        top: line.type === "horizontal" ? `${line.position}px` : 0,
+                        width: line.type === "vertical" ? "1px" : "100%",
+                        height: line.type === "horizontal" ? "1px" : "100%",
+                        opacity: layout.gridSettings?.gridOpacity || 0.3,
+                      }}
+                    />
+                  ))}
 
-                  // 그룹에 속하지 않은 일반 컴포넌트들
-                  const regularComponents = topLevelComponents.filter((c) => !processedButtonIds.has(c.id));
+                  {/* 컴포넌트들 */}
+                  {(() => {
+                    // 🆕 플로우 버튼 그룹 감지 및 처리
+                    const topLevelComponents = layout.components.filter((component) => !component.parentId);
 
-                  return (
-                    <>
-                      {/* 일반 컴포넌트들 */}
-                      {regularComponents.map((component) => {
-                        const children =
-                          component.type === "group"
-                            ? layout.components.filter((child) => child.parentId === component.id)
-                            : [];
+                    // auto-compact 모드의 버튼들을 그룹별로 묶기
+                    const buttonGroups: Record<string, ComponentData[]> = {};
+                    const processedButtonIds = new Set<string>();
 
-                        // 드래그 중 시각적 피드백 (다중 선택 지원)
-                        const isDraggingThis = dragState.isDragging && dragState.draggedComponent?.id === component.id;
-                        const isBeingDragged =
-                          dragState.isDragging &&
-                          dragState.draggedComponents.some((dragComp) => dragComp.id === component.id);
+                    topLevelComponents.forEach((component) => {
+                      const isButton =
+                        component.type === "button" ||
+                        (component.type === "component" &&
+                          ["button-primary", "button-secondary"].includes((component as any).componentType));
 
-                        let displayComponent = component;
+                      if (isButton) {
+                        const flowConfig = (component as any).webTypeConfig?.flowVisibilityConfig as
+                          | FlowVisibilityConfig
+                          | undefined;
 
-                        if (isBeingDragged) {
-                          if (isDraggingThis) {
-                            // 주 드래그 컴포넌트: 마우스 위치 기반으로 실시간 위치 업데이트
-                            displayComponent = {
-                              ...component,
-                              position: dragState.currentPosition,
-                              style: {
-                                ...component.style,
-                                opacity: 0.8,
-                                transform: "scale(1.02)",
-                                transition: "none",
-                                zIndex: 50,
-                              },
-                            };
-                          } else {
-                            // 다른 선택된 컴포넌트들: 상대적 위치로 실시간 업데이트
-                            const originalComponent = dragState.draggedComponents.find(
-                              (dragComp) => dragComp.id === component.id,
-                            );
-                            if (originalComponent) {
-                              const deltaX = dragState.currentPosition.x - dragState.originalPosition.x;
-                              const deltaY = dragState.currentPosition.y - dragState.originalPosition.y;
+                        if (flowConfig?.enabled && flowConfig.layoutBehavior === "auto-compact" && flowConfig.groupId) {
+                          if (!buttonGroups[flowConfig.groupId]) {
+                            buttonGroups[flowConfig.groupId] = [];
+                          }
+                          buttonGroups[flowConfig.groupId].push(component);
+                          processedButtonIds.add(component.id);
+                        }
+                      }
+                    });
 
+                    // 그룹에 속하지 않은 일반 컴포넌트들
+                    const regularComponents = topLevelComponents.filter((c) => !processedButtonIds.has(c.id));
+
+                    return (
+                      <>
+                        {/* 일반 컴포넌트들 */}
+                        {regularComponents.map((component) => {
+                          const children =
+                            component.type === "group"
+                              ? layout.components.filter((child) => child.parentId === component.id)
+                              : [];
+
+                          // 드래그 중 시각적 피드백 (다중 선택 지원)
+                          const isDraggingThis =
+                            dragState.isDragging && dragState.draggedComponent?.id === component.id;
+                          const isBeingDragged =
+                            dragState.isDragging &&
+                            dragState.draggedComponents.some((dragComp) => dragComp.id === component.id);
+
+                          let displayComponent = component;
+
+                          if (isBeingDragged) {
+                            if (isDraggingThis) {
+                              // 주 드래그 컴포넌트: 마우스 위치 기반으로 실시간 위치 업데이트
                               displayComponent = {
                                 ...component,
-                                position: {
-                                  x: originalComponent.position.x + deltaX,
-                                  y: originalComponent.position.y + deltaY,
-                                  z: originalComponent.position.z || 1,
-                                } as Position,
+                                position: dragState.currentPosition,
                                 style: {
                                   ...component.style,
                                   opacity: 0.8,
+                                  transform: "scale(1.02)",
                                   transition: "none",
-                                  zIndex: 40, // 주 컴포넌트보다 약간 낮게
+                                  zIndex: 50,
                                 },
                               };
+                            } else {
+                              // 다른 선택된 컴포넌트들: 상대적 위치로 실시간 업데이트
+                              const originalComponent = dragState.draggedComponents.find(
+                                (dragComp) => dragComp.id === component.id,
+                              );
+                              if (originalComponent) {
+                                const deltaX = dragState.currentPosition.x - dragState.originalPosition.x;
+                                const deltaY = dragState.currentPosition.y - dragState.originalPosition.y;
+
+                                displayComponent = {
+                                  ...component,
+                                  position: {
+                                    x: originalComponent.position.x + deltaX,
+                                    y: originalComponent.position.y + deltaY,
+                                    z: originalComponent.position.z || 1,
+                                  } as Position,
+                                  style: {
+                                    ...component.style,
+                                    opacity: 0.8,
+                                    transition: "none",
+                                    zIndex: 40, // 주 컴포넌트보다 약간 낮게
+                                  },
+                                };
+                              }
                             }
                           }
-                        }
 
-                        // 전역 파일 상태도 key에 포함하여 실시간 리렌더링
-                        const globalFileState =
-                          typeof window !== "undefined" ? (window as any).globalFileState || {} : {};
-                        const globalFiles = globalFileState[component.id] || [];
-                        const componentFiles = (component as any).uploadedFiles || [];
-                        const fileStateKey = `${globalFiles.length}-${JSON.stringify(globalFiles.map((f: any) => f.objid) || [])}-${componentFiles.length}`;
+                          // 전역 파일 상태도 key에 포함하여 실시간 리렌더링
+                          const globalFileState =
+                            typeof window !== "undefined" ? (window as any).globalFileState || {} : {};
+                          const globalFiles = globalFileState[component.id] || [];
+                          const componentFiles = (component as any).uploadedFiles || [];
+                          const fileStateKey = `${globalFiles.length}-${JSON.stringify(globalFiles.map((f: any) => f.objid) || [])}-${componentFiles.length}`;
 
-                        return (
-                          <RealtimePreview
-                            key={`${component.id}-${fileStateKey}-${(component as any).lastFileUpdate || 0}-${forceRenderTrigger}`}
-                            component={displayComponent}
-                            isSelected={
-                              selectedComponent?.id === component.id ||
-                              groupState.selectedComponents.includes(component.id)
-                            }
-                            isDesignMode={true} // 편집 모드로 설정
-                            onClick={(e) => handleComponentClick(component, e)}
-                            onDoubleClick={(e) => handleComponentDoubleClick(component, e)}
-                            onDragStart={(e) => startComponentDrag(component, e)}
-                            onDragEnd={endDrag}
-                            selectedScreen={selectedScreen}
-                            // onZoneComponentDrop 제거
-                            onZoneClick={handleZoneClick}
-                            // 설정 변경 핸들러 (테이블 페이지 크기 등 설정을 상세설정에 반영)
-                            onConfigChange={(config) => {
-                              // console.log("📤 테이블 설정 변경을 상세설정에 반영:", config);
+                          return (
+                            <RealtimePreview
+                              key={`${component.id}-${fileStateKey}-${(component as any).lastFileUpdate || 0}-${forceRenderTrigger}`}
+                              component={displayComponent}
+                              isSelected={
+                                selectedComponent?.id === component.id ||
+                                groupState.selectedComponents.includes(component.id)
+                              }
+                              isDesignMode={true} // 편집 모드로 설정
+                              onClick={(e) => handleComponentClick(component, e)}
+                              onDoubleClick={(e) => handleComponentDoubleClick(component, e)}
+                              onDragStart={(e) => startComponentDrag(component, e)}
+                              onDragEnd={endDrag}
+                              selectedScreen={selectedScreen}
+                              // onZoneComponentDrop 제거
+                              onZoneClick={handleZoneClick}
+                              // 설정 변경 핸들러 (테이블 페이지 크기 등 설정을 상세설정에 반영)
+                              onConfigChange={(config) => {
+                                // console.log("📤 테이블 설정 변경을 상세설정에 반영:", config);
 
-                              // 컴포넌트의 componentConfig 업데이트
-                              const updatedComponents = layout.components.map((comp) => {
-                                if (comp.id === component.id) {
-                                  return {
-                                    ...comp,
-                                    componentConfig: {
-                                      ...comp.componentConfig,
-                                      ...config,
-                                    },
-                                  };
-                                }
-                                return comp;
-                              });
+                                // 컴포넌트의 componentConfig 업데이트
+                                const updatedComponents = layout.components.map((comp) => {
+                                  if (comp.id === component.id) {
+                                    return {
+                                      ...comp,
+                                      componentConfig: {
+                                        ...comp.componentConfig,
+                                        ...config,
+                                      },
+                                    };
+                                  }
+                                  return comp;
+                                });
 
-                              const newLayout = {
-                                ...layout,
-                                components: updatedComponents,
-                              };
+                                const newLayout = {
+                                  ...layout,
+                                  components: updatedComponents,
+                                };
 
-                              setLayout(newLayout);
-                              saveToHistory(newLayout);
+                                setLayout(newLayout);
+                                saveToHistory(newLayout);
 
-                              console.log("✅ 컴포넌트 설정 업데이트 완료:", {
-                                componentId: component.id,
-                                updatedConfig: config,
-                              });
-                            }}
-                          >
-                            {/* 컨테이너, 그룹, 영역의 자식 컴포넌트들 렌더링 (레이아웃은 독립적으로 렌더링) */}
-                            {(component.type === "group" ||
-                              component.type === "container" ||
-                              component.type === "area") &&
-                              layout.components
-                                .filter((child) => child.parentId === component.id)
-                                .map((child) => {
-                                  // 자식 컴포넌트에도 드래그 피드백 적용
-                                  const isChildDraggingThis =
-                                    dragState.isDragging && dragState.draggedComponent?.id === child.id;
-                                  const isChildBeingDragged =
+                                console.log("✅ 컴포넌트 설정 업데이트 완료:", {
+                                  componentId: component.id,
+                                  updatedConfig: config,
+                                });
+                              }}
+                            >
+                              {/* 컨테이너, 그룹, 영역의 자식 컴포넌트들 렌더링 (레이아웃은 독립적으로 렌더링) */}
+                              {(component.type === "group" ||
+                                component.type === "container" ||
+                                component.type === "area") &&
+                                layout.components
+                                  .filter((child) => child.parentId === component.id)
+                                  .map((child) => {
+                                    // 자식 컴포넌트에도 드래그 피드백 적용
+                                    const isChildDraggingThis =
+                                      dragState.isDragging && dragState.draggedComponent?.id === child.id;
+                                    const isChildBeingDragged =
+                                      dragState.isDragging &&
+                                      dragState.draggedComponents.some((dragComp) => dragComp.id === child.id);
+
+                                    let displayChild = child;
+
+                                    if (isChildBeingDragged) {
+                                      if (isChildDraggingThis) {
+                                        // 주 드래그 자식 컴포넌트
+                                        displayChild = {
+                                          ...child,
+                                          position: dragState.currentPosition,
+                                          style: {
+                                            ...child.style,
+                                            opacity: 0.8,
+                                            transform: "scale(1.02)",
+                                            transition: "none",
+                                            zIndex: 50,
+                                          },
+                                        };
+                                      } else {
+                                        // 다른 선택된 자식 컴포넌트들
+                                        const originalChildComponent = dragState.draggedComponents.find(
+                                          (dragComp) => dragComp.id === child.id,
+                                        );
+                                        if (originalChildComponent) {
+                                          const deltaX = dragState.currentPosition.x - dragState.originalPosition.x;
+                                          const deltaY = dragState.currentPosition.y - dragState.originalPosition.y;
+
+                                          displayChild = {
+                                            ...child,
+                                            position: {
+                                              x: originalChildComponent.position.x + deltaX,
+                                              y: originalChildComponent.position.y + deltaY,
+                                              z: originalChildComponent.position.z || 1,
+                                            } as Position,
+                                            style: {
+                                              ...child.style,
+                                              opacity: 0.8,
+                                              transition: "none",
+                                              zIndex: 8888,
+                                            },
+                                          };
+                                        }
+                                      }
+                                    }
+
+                                    // 자식 컴포넌트의 위치를 부모 기준 상대 좌표로 조정
+                                    const relativeChildComponent = {
+                                      ...displayChild,
+                                      position: {
+                                        x: displayChild.position.x - component.position.x,
+                                        y: displayChild.position.y - component.position.y,
+                                        z: displayChild.position.z || 1,
+                                      },
+                                    };
+
+                                    return (
+                                      <RealtimePreview
+                                        key={`${child.id}-${(child as any).uploadedFiles?.length || 0}-${JSON.stringify((child as any).uploadedFiles?.map((f: any) => f.objid) || [])}`}
+                                        component={relativeChildComponent}
+                                        isSelected={
+                                          selectedComponent?.id === child.id ||
+                                          groupState.selectedComponents.includes(child.id)
+                                        }
+                                        isDesignMode={true} // 편집 모드로 설정
+                                        onClick={(e) => handleComponentClick(child, e)}
+                                        onDoubleClick={(e) => handleComponentDoubleClick(child, e)}
+                                        onDragStart={(e) => startComponentDrag(child, e)}
+                                        onDragEnd={endDrag}
+                                        selectedScreen={selectedScreen}
+                                        // onZoneComponentDrop 제거
+                                        onZoneClick={handleZoneClick}
+                                        // 설정 변경 핸들러 (자식 컴포넌트용)
+                                        onConfigChange={(config) => {
+                                          // console.log("📤 자식 컴포넌트 설정 변경을 상세설정에 알림:", config);
+                                          // TODO: 실제 구현은 DetailSettingsPanel과의 연동 필요
+                                        }}
+                                      />
+                                    );
+                                  })}
+                            </RealtimePreview>
+                          );
+                        })}
+
+                        {/* 🆕 플로우 버튼 그룹들 */}
+                        {Object.entries(buttonGroups).map(([groupId, buttons]) => {
+                          if (buttons.length === 0) return null;
+
+                          const firstButton = buttons[0];
+                          const groupConfig = (firstButton as any).webTypeConfig
+                            ?.flowVisibilityConfig as FlowVisibilityConfig;
+
+                          // 🔧 그룹의 위치 및 크기 계산
+                          // 모든 버튼이 같은 위치(groupX, groupY)에 배치되어 있으므로
+                          // 첫 번째 버튼의 위치를 그룹 시작점으로 사용
+                          const direction = groupConfig.groupDirection || "horizontal";
+                          const gap = groupConfig.groupGap ?? 8;
+                          const align = groupConfig.groupAlign || "start";
+
+                          const groupPosition = {
+                            x: buttons[0].position.x,
+                            y: buttons[0].position.y,
+                            z: buttons[0].position.z || 2,
+                          };
+
+                          // 버튼들의 실제 크기 계산
+                          let groupWidth = 0;
+                          let groupHeight = 0;
+
+                          if (direction === "horizontal") {
+                            // 가로 정렬: 모든 버튼의 너비 + 간격
+                            groupWidth = buttons.reduce((total, button, index) => {
+                              const buttonWidth = button.size?.width || 100;
+                              const gapWidth = index < buttons.length - 1 ? gap : 0;
+                              return total + buttonWidth + gapWidth;
+                            }, 0);
+                            groupHeight = Math.max(...buttons.map((b) => b.size?.height || 40));
+                          } else {
+                            // 세로 정렬
+                            groupWidth = Math.max(...buttons.map((b) => b.size?.width || 100));
+                            groupHeight = buttons.reduce((total, button, index) => {
+                              const buttonHeight = button.size?.height || 40;
+                              const gapHeight = index < buttons.length - 1 ? gap : 0;
+                              return total + buttonHeight + gapHeight;
+                            }, 0);
+                          }
+
+                          // 🆕 그룹 전체가 선택되었는지 확인
+                          const isGroupSelected = buttons.every(
+                            (btn) => selectedComponent?.id === btn.id || groupState.selectedComponents.includes(btn.id),
+                          );
+                          const hasAnySelected = buttons.some(
+                            (btn) => selectedComponent?.id === btn.id || groupState.selectedComponents.includes(btn.id),
+                          );
+
+                          return (
+                            <div
+                              key={`flow-button-group-${groupId}`}
+                              style={{
+                                position: "absolute",
+                                left: `${groupPosition.x}px`,
+                                top: `${groupPosition.y}px`,
+                                zIndex: groupPosition.z,
+                                width: `${groupWidth}px`, // 🆕 명시적 너비
+                                height: `${groupHeight}px`, // 🆕 명시적 높이
+                                pointerEvents: "none", // 그룹 컨테이너는 이벤트 차단하여 개별 버튼 클릭 가능
+                              }}
+                              className={hasAnySelected ? "rounded outline-2 outline-offset-2 outline-blue-500" : ""}
+                            >
+                              <FlowButtonGroup
+                                buttons={buttons}
+                                groupConfig={groupConfig}
+                                isDesignMode={true}
+                                renderButton={(button, isVisible) => {
+                                  // 드래그 피드백
+                                  const isDraggingThis =
+                                    dragState.isDragging && dragState.draggedComponent?.id === button.id;
+                                  const isBeingDragged =
                                     dragState.isDragging &&
-                                    dragState.draggedComponents.some((dragComp) => dragComp.id === child.id);
+                                    dragState.draggedComponents.some((dragComp) => dragComp.id === button.id);
 
-                                  let displayChild = child;
+                                  let displayButton = button;
 
-                                  if (isChildBeingDragged) {
-                                    if (isChildDraggingThis) {
-                                      // 주 드래그 자식 컴포넌트
-                                      displayChild = {
-                                        ...child,
+                                  if (isBeingDragged) {
+                                    if (isDraggingThis) {
+                                      displayButton = {
+                                        ...button,
                                         position: dragState.currentPosition,
                                         style: {
-                                          ...child.style,
+                                          ...button.style,
                                           opacity: 0.8,
                                           transform: "scale(1.02)",
                                           transition: "none",
                                           zIndex: 50,
                                         },
                                       };
-                                    } else {
-                                      // 다른 선택된 자식 컴포넌트들
-                                      const originalChildComponent = dragState.draggedComponents.find(
-                                        (dragComp) => dragComp.id === child.id,
-                                      );
-                                      if (originalChildComponent) {
-                                        const deltaX = dragState.currentPosition.x - dragState.originalPosition.x;
-                                        const deltaY = dragState.currentPosition.y - dragState.originalPosition.y;
-
-                                        displayChild = {
-                                          ...child,
-                                          position: {
-                                            x: originalChildComponent.position.x + deltaX,
-                                            y: originalChildComponent.position.y + deltaY,
-                                            z: originalChildComponent.position.z || 1,
-                                          } as Position,
-                                          style: {
-                                            ...child.style,
-                                            opacity: 0.8,
-                                            transition: "none",
-                                            zIndex: 8888,
-                                          },
-                                        };
-                                      }
                                     }
                                   }
 
-                                  // 자식 컴포넌트의 위치를 부모 기준 상대 좌표로 조정
-                                  const relativeChildComponent = {
-                                    ...displayChild,
+                                  // 🔧 그룹 내부에서는 상대 위치 사용 (wrapper로 처리)
+                                  const relativeButton = {
+                                    ...displayButton,
                                     position: {
-                                      x: displayChild.position.x - component.position.x,
-                                      y: displayChild.position.y - component.position.y,
-                                      z: displayChild.position.z || 1,
+                                      x: 0,
+                                      y: 0,
+                                      z: displayButton.position.z || 1,
                                     },
                                   };
 
                                   return (
-                                    <RealtimePreview
-                                      key={`${child.id}-${(child as any).uploadedFiles?.length || 0}-${JSON.stringify((child as any).uploadedFiles?.map((f: any) => f.objid) || [])}`}
-                                      component={relativeChildComponent}
-                                      isSelected={
-                                        selectedComponent?.id === child.id ||
-                                        groupState.selectedComponents.includes(child.id)
-                                      }
-                                      isDesignMode={true} // 편집 모드로 설정
-                                      onClick={(e) => handleComponentClick(child, e)}
-                                      onDoubleClick={(e) => handleComponentDoubleClick(child, e)}
-                                      onDragStart={(e) => startComponentDrag(child, e)}
-                                      onDragEnd={endDrag}
-                                      selectedScreen={selectedScreen}
-                                      // onZoneComponentDrop 제거
-                                      onZoneClick={handleZoneClick}
-                                      // 설정 변경 핸들러 (자식 컴포넌트용)
-                                      onConfigChange={(config) => {
-                                        // console.log("📤 자식 컴포넌트 설정 변경을 상세설정에 알림:", config);
-                                        // TODO: 실제 구현은 DetailSettingsPanel과의 연동 필요
+                                    <div
+                                      key={button.id}
+                                      style={{
+                                        position: "relative",
+                                        opacity: isVisible ? 1 : 0.5,
+                                        display: "inline-block",
+                                        width: button.size?.width || 100,
+                                        height: button.size?.height || 40,
+                                        pointerEvents: "auto", // 개별 버튼은 이벤트 활성화
+                                        cursor: "pointer",
                                       }}
-                                    />
-                                  );
-                                })}
-                          </RealtimePreview>
-                        );
-                      })}
+                                      onMouseDown={(e) => {
+                                        // 클릭이 아닌 드래그인 경우에만 드래그 시작
+                                        e.preventDefault();
+                                        e.stopPropagation();
 
-                      {/* 🆕 플로우 버튼 그룹들 */}
-                      {Object.entries(buttonGroups).map(([groupId, buttons]) => {
-                        if (buttons.length === 0) return null;
+                                        const startX = e.clientX;
+                                        const startY = e.clientY;
+                                        let isDragging = false;
+                                        let dragStarted = false;
 
-                        const firstButton = buttons[0];
-                        const groupConfig = (firstButton as any).webTypeConfig
-                          ?.flowVisibilityConfig as FlowVisibilityConfig;
+                                        const handleMouseMove = (moveEvent: MouseEvent) => {
+                                          const deltaX = Math.abs(moveEvent.clientX - startX);
+                                          const deltaY = Math.abs(moveEvent.clientY - startY);
 
-                        // 🔧 그룹의 위치 및 크기 계산
-                        // 모든 버튼이 같은 위치(groupX, groupY)에 배치되어 있으므로
-                        // 첫 번째 버튼의 위치를 그룹 시작점으로 사용
-                        const direction = groupConfig.groupDirection || "horizontal";
-                        const gap = groupConfig.groupGap ?? 8;
-                        const align = groupConfig.groupAlign || "start";
+                                          // 5픽셀 이상 움직이면 드래그로 간주
+                                          if ((deltaX > 5 || deltaY > 5) && !dragStarted) {
+                                            isDragging = true;
+                                            dragStarted = true;
 
-                        const groupPosition = {
-                          x: buttons[0].position.x,
-                          y: buttons[0].position.y,
-                          z: buttons[0].position.z || 2,
-                        };
+                                            // Shift 키를 누르지 않았으면 같은 그룹의 버튼들도 모두 선택
+                                            if (!e.shiftKey) {
+                                              const buttonIds = buttons.map((b) => b.id);
+                                              setGroupState((prev) => ({
+                                                ...prev,
+                                                selectedComponents: buttonIds,
+                                              }));
+                                            }
 
-                        // 버튼들의 실제 크기 계산
-                        let groupWidth = 0;
-                        let groupHeight = 0;
-
-                        if (direction === "horizontal") {
-                          // 가로 정렬: 모든 버튼의 너비 + 간격
-                          groupWidth = buttons.reduce((total, button, index) => {
-                            const buttonWidth = button.size?.width || 100;
-                            const gapWidth = index < buttons.length - 1 ? gap : 0;
-                            return total + buttonWidth + gapWidth;
-                          }, 0);
-                          groupHeight = Math.max(...buttons.map((b) => b.size?.height || 40));
-                        } else {
-                          // 세로 정렬
-                          groupWidth = Math.max(...buttons.map((b) => b.size?.width || 100));
-                          groupHeight = buttons.reduce((total, button, index) => {
-                            const buttonHeight = button.size?.height || 40;
-                            const gapHeight = index < buttons.length - 1 ? gap : 0;
-                            return total + buttonHeight + gapHeight;
-                          }, 0);
-                        }
-
-                        // 🆕 그룹 전체가 선택되었는지 확인
-                        const isGroupSelected = buttons.every(
-                          (btn) => selectedComponent?.id === btn.id || groupState.selectedComponents.includes(btn.id),
-                        );
-                        const hasAnySelected = buttons.some(
-                          (btn) => selectedComponent?.id === btn.id || groupState.selectedComponents.includes(btn.id),
-                        );
-
-                        return (
-                          <div
-                            key={`flow-button-group-${groupId}`}
-                            style={{
-                              position: "absolute",
-                              left: `${groupPosition.x}px`,
-                              top: `${groupPosition.y}px`,
-                              zIndex: groupPosition.z,
-                              width: `${groupWidth}px`, // 🆕 명시적 너비
-                              height: `${groupHeight}px`, // 🆕 명시적 높이
-                              pointerEvents: "none", // 그룹 컨테이너는 이벤트 차단하여 개별 버튼 클릭 가능
-                            }}
-                            className={hasAnySelected ? "rounded outline-2 outline-offset-2 outline-blue-500" : ""}
-                          >
-                            <FlowButtonGroup
-                              buttons={buttons}
-                              groupConfig={groupConfig}
-                              isDesignMode={true}
-                              renderButton={(button, isVisible) => {
-                                // 드래그 피드백
-                                const isDraggingThis =
-                                  dragState.isDragging && dragState.draggedComponent?.id === button.id;
-                                const isBeingDragged =
-                                  dragState.isDragging &&
-                                  dragState.draggedComponents.some((dragComp) => dragComp.id === button.id);
-
-                                let displayButton = button;
-
-                                if (isBeingDragged) {
-                                  if (isDraggingThis) {
-                                    displayButton = {
-                                      ...button,
-                                      position: dragState.currentPosition,
-                                      style: {
-                                        ...button.style,
-                                        opacity: 0.8,
-                                        transform: "scale(1.02)",
-                                        transition: "none",
-                                        zIndex: 50,
-                                      },
-                                    };
-                                  }
-                                }
-
-                                // 🔧 그룹 내부에서는 상대 위치 사용 (wrapper로 처리)
-                                const relativeButton = {
-                                  ...displayButton,
-                                  position: {
-                                    x: 0,
-                                    y: 0,
-                                    z: displayButton.position.z || 1,
-                                  },
-                                };
-
-                                return (
-                                  <div
-                                    key={button.id}
-                                    style={{
-                                      position: "relative",
-                                      opacity: isVisible ? 1 : 0.5,
-                                      display: "inline-block",
-                                      width: button.size?.width || 100,
-                                      height: button.size?.height || 40,
-                                      pointerEvents: "auto", // 개별 버튼은 이벤트 활성화
-                                      cursor: "pointer",
-                                    }}
-                                    onMouseDown={(e) => {
-                                      // 클릭이 아닌 드래그인 경우에만 드래그 시작
-                                      e.preventDefault();
-                                      e.stopPropagation();
-
-                                      const startX = e.clientX;
-                                      const startY = e.clientY;
-                                      let isDragging = false;
-                                      let dragStarted = false;
-
-                                      const handleMouseMove = (moveEvent: MouseEvent) => {
-                                        const deltaX = Math.abs(moveEvent.clientX - startX);
-                                        const deltaY = Math.abs(moveEvent.clientY - startY);
-
-                                        // 5픽셀 이상 움직이면 드래그로 간주
-                                        if ((deltaX > 5 || deltaY > 5) && !dragStarted) {
-                                          isDragging = true;
-                                          dragStarted = true;
-
-                                          // Shift 키를 누르지 않았으면 같은 그룹의 버튼들도 모두 선택
-                                          if (!e.shiftKey) {
-                                            const buttonIds = buttons.map((b) => b.id);
-                                            setGroupState((prev) => ({
-                                              ...prev,
-                                              selectedComponents: buttonIds,
-                                            }));
+                                            // 드래그 시작
+                                            startComponentDrag(button, e as any);
                                           }
+                                        };
 
-                                          // 드래그 시작
-                                          startComponentDrag(button, e as any);
-                                        }
-                                      };
+                                        const handleMouseUp = () => {
+                                          document.removeEventListener("mousemove", handleMouseMove);
+                                          document.removeEventListener("mouseup", handleMouseUp);
 
-                                      const handleMouseUp = () => {
-                                        document.removeEventListener("mousemove", handleMouseMove);
-                                        document.removeEventListener("mouseup", handleMouseUp);
-
-                                        // 드래그가 아니면 클릭으로 처리
-                                        if (!isDragging) {
-                                          // Shift 키를 누르지 않았으면 같은 그룹의 버튼들도 모두 선택
-                                          if (!e.shiftKey) {
-                                            const buttonIds = buttons.map((b) => b.id);
-                                            setGroupState((prev) => ({
-                                              ...prev,
-                                              selectedComponents: buttonIds,
-                                            }));
+                                          // 드래그가 아니면 클릭으로 처리
+                                          if (!isDragging) {
+                                            // Shift 키를 누르지 않았으면 같은 그룹의 버튼들도 모두 선택
+                                            if (!e.shiftKey) {
+                                              const buttonIds = buttons.map((b) => b.id);
+                                              setGroupState((prev) => ({
+                                                ...prev,
+                                                selectedComponents: buttonIds,
+                                              }));
+                                            }
+                                            handleComponentClick(button, e);
                                           }
-                                          handleComponentClick(button, e);
-                                        }
-                                      };
+                                        };
 
-                                      document.addEventListener("mousemove", handleMouseMove);
-                                      document.addEventListener("mouseup", handleMouseUp);
-                                    }}
-                                    onDoubleClick={(e) => {
-                                      e.stopPropagation();
-                                      handleComponentDoubleClick(button, e);
-                                    }}
-                                    className={
-                                      selectedComponent?.id === button.id ||
-                                      groupState.selectedComponents.includes(button.id)
-                                        ? "outline-1 outline-offset-1 outline-blue-400"
-                                        : ""
-                                    }
-                                  >
-                                    {/* 그룹 내부에서는 DynamicComponentRenderer로 직접 렌더링 */}
-                                    <div style={{ width: "100%", height: "100%", pointerEvents: "none" }}>
-                                      <DynamicComponentRenderer
-                                        component={relativeButton}
-                                        isDesignMode={true}
-                                        formData={{}}
-                                        onDataflowComplete={() => {}}
-                                      />
+                                        document.addEventListener("mousemove", handleMouseMove);
+                                        document.addEventListener("mouseup", handleMouseUp);
+                                      }}
+                                      onDoubleClick={(e) => {
+                                        e.stopPropagation();
+                                        handleComponentDoubleClick(button, e);
+                                      }}
+                                      className={
+                                        selectedComponent?.id === button.id ||
+                                        groupState.selectedComponents.includes(button.id)
+                                          ? "outline-1 outline-offset-1 outline-blue-400"
+                                          : ""
+                                      }
+                                    >
+                                      {/* 그룹 내부에서는 DynamicComponentRenderer로 직접 렌더링 */}
+                                      <div style={{ width: "100%", height: "100%", pointerEvents: "none" }}>
+                                        <DynamicComponentRenderer
+                                          component={relativeButton}
+                                          isDesignMode={true}
+                                          formData={{}}
+                                          onDataflowComplete={() => {}}
+                                        />
+                                      </div>
                                     </div>
-                                  </div>
-                                );
-                              }}
-                            />
-                          </div>
-                        );
-                      })}
-                    </>
-                  );
-                })()}
+                                  );
+                                }}
+                              />
+                            </div>
+                          );
+                        })}
+                      </>
+                    );
+                  })()}
 
-                {/* 드래그 선택 영역 */}
-                {selectionDrag.isSelecting && (
-                  <div
-                    className="border-primary bg-primary/5 pointer-events-none absolute rounded-md border-2 border-dashed"
-                    style={{
-                      left: `${Math.min(selectionDrag.startPoint.x, selectionDrag.currentPoint.x)}px`,
-                      top: `${Math.min(selectionDrag.startPoint.y, selectionDrag.currentPoint.y)}px`,
-                      width: `${Math.abs(selectionDrag.currentPoint.x - selectionDrag.startPoint.x)}px`,
-                      height: `${Math.abs(selectionDrag.currentPoint.y - selectionDrag.startPoint.y)}px`,
-                    }}
-                  />
-                )}
+                  {/* 드래그 선택 영역 */}
+                  {selectionDrag.isSelecting && (
+                    <div
+                      className="border-primary bg-primary/5 pointer-events-none absolute rounded-md border-2 border-dashed"
+                      style={{
+                        left: `${Math.min(selectionDrag.startPoint.x, selectionDrag.currentPoint.x)}px`,
+                        top: `${Math.min(selectionDrag.startPoint.y, selectionDrag.currentPoint.y)}px`,
+                        width: `${Math.abs(selectionDrag.currentPoint.x - selectionDrag.startPoint.x)}px`,
+                        height: `${Math.abs(selectionDrag.currentPoint.y - selectionDrag.startPoint.y)}px`,
+                      }}
+                    />
+                  )}
 
-                {/* 빈 캔버스 안내 */}
-                {layout.components.length === 0 && (
-                  <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                    <div className="max-w-2xl space-y-4 px-6 text-center">
-                      <div className="bg-muted mx-auto flex h-16 w-16 items-center justify-center rounded-full">
-                        <Database className="text-muted-foreground h-8 w-8" />
-                      </div>
-                      <h3 className="text-foreground text-xl font-semibold">캔버스가 비어있습니다</h3>
-                      <p className="text-muted-foreground text-sm">
-                        좌측 패널에서 테이블/컬럼이나 템플릿을 드래그하여 화면을 설계하세요
-                      </p>
-                      <div className="text-muted-foreground space-y-2 text-xs">
-                        <p>
-                          <span className="font-medium">단축키:</span> T(테이블), M(템플릿), P(속성), S(스타일),
-                          R(격자), D(상세설정), E(해상도)
-                        </p>
-                        <p>
-                          <span className="font-medium">편집:</span> Ctrl+C(복사), Ctrl+V(붙여넣기), Ctrl+S(저장),
-                          Ctrl+Z(실행취소), Delete(삭제)
-                        </p>
-                        <p className="text-warning flex items-center justify-center gap-2">
-                          <span>⚠️</span>
-                          <span>브라우저 기본 단축키가 차단되어 애플리케이션 기능만 작동합니다</span>
+                  {/* 빈 캔버스 안내 */}
+                  {layout.components.length === 0 && (
+                    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+                      <div className="max-w-2xl space-y-4 px-6 text-center">
+                        <div className="bg-muted mx-auto flex h-16 w-16 items-center justify-center rounded-full">
+                          <Database className="text-muted-foreground h-8 w-8" />
+                        </div>
+                        <h3 className="text-foreground text-xl font-semibold">캔버스가 비어있습니다</h3>
+                        <p className="text-muted-foreground text-sm">
+                          좌측 패널에서 테이블/컬럼이나 템플릿을 드래그하여 화면을 설계하세요
                         </p>
+                        <div className="text-muted-foreground space-y-2 text-xs">
+                          <p>
+                            <span className="font-medium">단축키:</span> T(테이블), M(템플릿), P(속성), S(스타일),
+                            R(격자), D(상세설정), E(해상도)
+                          </p>
+                          <p>
+                            <span className="font-medium">편집:</span> Ctrl+C(복사), Ctrl+V(붙여넣기), Ctrl+S(저장),
+                            Ctrl+Z(실행취소), Delete(삭제)
+                          </p>
+                          <p className="text-warning flex items-center justify-center gap-2">
+                            <span>⚠️</span>
+                            <span>브라우저 기본 단축키가 차단되어 애플리케이션 기능만 작동합니다</span>
+                          </p>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                )}
+                  )}
+                </div>
               </div>
-            </div>
-          </div>{" "}
-          {/* 🔥 줌 래퍼 닫기 */}
-        </div>
-      </div>{" "}
-      {/* 메인 컨테이너 닫기 */}
-      {/* 🆕 플로우 버튼 그룹 생성 다이얼로그 */}
-      <FlowButtonGroupDialog
-        open={groupDialogOpen}
-        onOpenChange={setGroupDialogOpen}
-        buttonCount={groupState.selectedComponents.length}
-        onConfirm={handleGroupConfirm}
-      />
-      {/* 모달들 */}
-      {/* 메뉴 할당 모달 */}
-      {showMenuAssignmentModal && selectedScreen && (
-        <MenuAssignmentModal
-          screenInfo={selectedScreen}
-          isOpen={showMenuAssignmentModal}
-          onClose={() => setShowMenuAssignmentModal(false)}
-          onAssignmentComplete={() => {
-            // 모달을 즉시 닫지 않고, MenuAssignmentModal이 3초 후 자동으로 닫히도록 함
-            // setShowMenuAssignmentModal(false);
-            // toast.success("메뉴에 화면이 할당되었습니다.");
-          }}
-          onBackToList={onBackToList}
+            </div>{" "}
+            {/* 🔥 줌 래퍼 닫기 */}
+          </div>
+        </div>{" "}
+        {/* 메인 컨테이너 닫기 */}
+        {/* 🆕 플로우 버튼 그룹 생성 다이얼로그 */}
+        <FlowButtonGroupDialog
+          open={groupDialogOpen}
+          onOpenChange={setGroupDialogOpen}
+          buttonCount={groupState.selectedComponents.length}
+          onConfirm={handleGroupConfirm}
         />
-      )}
-      {/* 파일첨부 상세 모달 */}
-      {showFileAttachmentModal && selectedFileComponent && (
-        <FileAttachmentDetailModal
-          isOpen={showFileAttachmentModal}
-          onClose={() => {
-            setShowFileAttachmentModal(false);
-            setSelectedFileComponent(null);
-          }}
-          component={selectedFileComponent}
-          screenId={selectedScreen.screenId}
-        />
-      )}
-    </div>
+        {/* 모달들 */}
+        {/* 메뉴 할당 모달 */}
+        {showMenuAssignmentModal && selectedScreen && (
+          <MenuAssignmentModal
+            screenInfo={selectedScreen}
+            isOpen={showMenuAssignmentModal}
+            onClose={() => setShowMenuAssignmentModal(false)}
+            onAssignmentComplete={() => {
+              // 모달을 즉시 닫지 않고, MenuAssignmentModal이 3초 후 자동으로 닫히도록 함
+              // setShowMenuAssignmentModal(false);
+              // toast.success("메뉴에 화면이 할당되었습니다.");
+            }}
+            onBackToList={onBackToList}
+          />
+        )}
+        {/* 파일첨부 상세 모달 */}
+        {showFileAttachmentModal && selectedFileComponent && (
+          <FileAttachmentDetailModal
+            isOpen={showFileAttachmentModal}
+            onClose={() => {
+              setShowFileAttachmentModal(false);
+              setSelectedFileComponent(null);
+            }}
+            component={selectedFileComponent}
+            screenId={selectedScreen.screenId}
+          />
+        )}
+      </div>
+    </ScreenPreviewProvider>
   );
 }
diff --git a/frontend/components/screen/ScreenList.tsx b/frontend/components/screen/ScreenList.tsx
index 382ae20c..75a1662c 100644
--- a/frontend/components/screen/ScreenList.tsx
+++ b/frontend/components/screen/ScreenList.tsx
@@ -448,10 +448,10 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                 {screens.map((screen) => (
                   <TableRow
                     key={screen.screenId}
-                    className={`hover:bg-muted/50 border-b transition-colors ${
+                    className={`hover:bg-muted/50 cursor-pointer border-b transition-colors ${
                       selectedScreen?.screenId === screen.screenId ? "border-primary/20 bg-accent" : ""
                     }`}
-                    onClick={() => handleScreenSelect(screen)}
+                    onClick={() => onDesignScreen(screen)}
                   >
                     <TableCell className="h-16 cursor-pointer">
                       <div>
diff --git a/frontend/components/screen/StyleEditor.tsx b/frontend/components/screen/StyleEditor.tsx
index ecd405d0..95523901 100644
--- a/frontend/components/screen/StyleEditor.tsx
+++ b/frontend/components/screen/StyleEditor.tsx
@@ -28,70 +28,17 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
   };
 
   return (
-    <div className={`space-y-6 p-6 ${className}`}>
-      {/* 여백 섹션 */}
-      <div className="space-y-3">
-        <div className="flex items-center gap-2">
-          <Box className="text-primary h-4 w-4" />
-          <h3 className="text-sm font-semibold">여백</h3>
-        </div>
-        <Separator className="my-2" />
-        <div className="space-y-3">
-          <div className="grid grid-cols-2 gap-3">
-            <div className="space-y-1.5">
-              <Label htmlFor="margin" className="text-xs font-medium">
-                외부 여백
-              </Label>
-              <Input
-                id="margin"
-                type="text"
-                placeholder="10px"
-                value={localStyle.margin || ""}
-                onChange={(e) => handleStyleChange("margin", e.target.value)}
-                className="h-8"
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="padding" className="text-xs font-medium">
-                내부 여백
-              </Label>
-              <Input
-                id="padding"
-                type="text"
-                placeholder="10px"
-                value={localStyle.padding || ""}
-                onChange={(e) => handleStyleChange("padding", e.target.value)}
-                className="h-8"
-              />
-            </div>
-          </div>
-
-          <div className="space-y-1.5">
-            <Label htmlFor="gap" className="text-xs font-medium">
-              간격
-            </Label>
-            <Input
-              id="gap"
-              type="text"
-              placeholder="10px"
-              value={localStyle.gap || ""}
-              onChange={(e) => handleStyleChange("gap", e.target.value)}
-              className="h-8"
-            />
-          </div>
-        </div>
-      </div>
-
+    <div className={`space-y-4 p-3 ${className}`}>
       {/* 테두리 섹션 */}
-      <div className="space-y-3">
+      <div className="space-y-2">
         <div className="flex items-center gap-2">
-          <Square className="text-primary h-4 w-4" />
+          <Square className="text-primary h-3.5 w-3.5" />
           <h3 className="text-sm font-semibold">테두리</h3>
         </div>
-        <Separator className="my-2" />
-        <div className="space-y-3">
-          <div className="grid grid-cols-2 gap-3">
-            <div className="space-y-1.5">
+        <Separator className="my-1.5" />
+        <div className="space-y-2">
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-1">
               <Label htmlFor="borderWidth" className="text-xs font-medium">
                 두께
               </Label>
@@ -101,10 +48,11 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
                 placeholder="1px"
                 value={localStyle.borderWidth || ""}
                 onChange={(e) => handleStyleChange("borderWidth", e.target.value)}
-                className="h-8"
+                className="h-6 w-full px-2 py-0 text-xs"
+                style={{ fontSize: "12px" }}
               />
             </div>
-            <div className="space-y-1.5">
+            <div className="space-y-1">
               <Label htmlFor="borderStyle" className="text-xs font-medium">
                 스타일
               </Label>
@@ -112,42 +60,52 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
                 value={localStyle.borderStyle || "solid"}
                 onValueChange={(value) => handleStyleChange("borderStyle", value)}
               >
-                <SelectTrigger className="h-8">
+                <SelectTrigger className="h-6 w-full px-2 py-0" style={{ fontSize: "12px" }}>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="solid">실선</SelectItem>
-                  <SelectItem value="dashed">파선</SelectItem>
-                  <SelectItem value="dotted">점선</SelectItem>
-                  <SelectItem value="none">없음</SelectItem>
+                  <SelectItem value="solid" style={{ fontSize: "12px" }}>
+                    실선
+                  </SelectItem>
+                  <SelectItem value="dashed" style={{ fontSize: "12px" }}>
+                    파선
+                  </SelectItem>
+                  <SelectItem value="dotted" style={{ fontSize: "12px" }}>
+                    점선
+                  </SelectItem>
+                  <SelectItem value="none" style={{ fontSize: "12px" }}>
+                    없음
+                  </SelectItem>
                 </SelectContent>
               </Select>
             </div>
           </div>
 
-          <div className="grid grid-cols-2 gap-3">
-            <div className="space-y-1.5">
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-1">
               <Label htmlFor="borderColor" className="text-xs font-medium">
                 색상
               </Label>
-              <div className="flex gap-2">
+              <div className="flex gap-1">
                 <Input
                   id="borderColor"
                   type="color"
                   value={localStyle.borderColor || "#000000"}
                   onChange={(e) => handleStyleChange("borderColor", e.target.value)}
-                  className="h-8 w-14 p-1"
+                  className="h-6 w-12 p-1"
+                  style={{ fontSize: "12px" }}
                 />
                 <Input
                   type="text"
                   value={localStyle.borderColor || "#000000"}
                   onChange={(e) => handleStyleChange("borderColor", e.target.value)}
                   placeholder="#000000"
-                  className="h-8 flex-1"
+                  className="h-6 flex-1 text-xs"
+                  style={{ fontSize: "12px" }}
                 />
               </div>
             </div>
-            <div className="space-y-1.5">
+            <div className="space-y-1">
               <Label htmlFor="borderRadius" className="text-xs font-medium">
                 모서리
               </Label>
@@ -157,7 +115,8 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
                 placeholder="5px"
                 value={localStyle.borderRadius || ""}
                 onChange={(e) => handleStyleChange("borderRadius", e.target.value)}
-                className="h-8"
+                className="h-6 w-full px-2 py-0 text-xs"
+                style={{ fontSize: "12px" }}
               />
             </div>
           </div>
@@ -165,38 +124,40 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
       </div>
 
       {/* 배경 섹션 */}
-      <div className="space-y-3">
+      <div className="space-y-2">
         <div className="flex items-center gap-2">
-          <Palette className="text-primary h-4 w-4" />
+          <Palette className="text-primary h-3.5 w-3.5" />
           <h3 className="text-sm font-semibold">배경</h3>
         </div>
-        <Separator className="my-2" />
-        <div className="space-y-3">
-          <div className="space-y-1.5">
+        <Separator className="my-1.5" />
+        <div className="space-y-2">
+          <div className="space-y-1">
             <Label htmlFor="backgroundColor" className="text-xs font-medium">
-              배경 색상
+              색상
             </Label>
-            <div className="flex gap-2">
+            <div className="flex gap-1">
               <Input
                 id="backgroundColor"
                 type="color"
                 value={localStyle.backgroundColor || "#ffffff"}
                 onChange={(e) => handleStyleChange("backgroundColor", e.target.value)}
-                className="h-8 w-14 p-1"
+                className="h-6 w-12 p-1"
+                style={{ fontSize: "12px" }}
               />
               <Input
                 type="text"
                 value={localStyle.backgroundColor || "#ffffff"}
                 onChange={(e) => handleStyleChange("backgroundColor", e.target.value)}
                 placeholder="#ffffff"
-                className="h-8 flex-1"
+                className="h-6 flex-1 text-xs"
+                style={{ fontSize: "12px" }}
               />
             </div>
           </div>
 
-          <div className="space-y-1.5">
+          <div className="space-y-1">
             <Label htmlFor="backgroundImage" className="text-xs font-medium">
-              배경 이미지
+              이미지
             </Label>
             <Input
               id="backgroundImage"
@@ -204,43 +165,46 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
               placeholder="url('image.jpg')"
               value={localStyle.backgroundImage || ""}
               onChange={(e) => handleStyleChange("backgroundImage", e.target.value)}
-              className="h-8"
+              className="h-6 w-full px-2 py-0 text-xs"
+              style={{ fontSize: "12px" }}
             />
           </div>
         </div>
       </div>
 
       {/* 텍스트 섹션 */}
-      <div className="space-y-3">
+      <div className="space-y-2">
         <div className="flex items-center gap-2">
-          <Type className="text-primary h-4 w-4" />
+          <Type className="text-primary h-3.5 w-3.5" />
           <h3 className="text-sm font-semibold">텍스트</h3>
         </div>
-        <Separator className="my-2" />
-        <div className="space-y-3">
-          <div className="grid grid-cols-2 gap-3">
-            <div className="space-y-1.5">
+        <Separator className="my-1.5" />
+        <div className="space-y-2">
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-1">
               <Label htmlFor="color" className="text-xs font-medium">
                 색상
               </Label>
-              <div className="flex gap-2">
+              <div className="flex gap-1">
                 <Input
                   id="color"
                   type="color"
                   value={localStyle.color || "#000000"}
                   onChange={(e) => handleStyleChange("color", e.target.value)}
-                  className="h-8 w-14 p-1"
+                  className="h-6 w-12 p-1"
+                  style={{ fontSize: "12px" }}
                 />
                 <Input
                   type="text"
                   value={localStyle.color || "#000000"}
                   onChange={(e) => handleStyleChange("color", e.target.value)}
                   placeholder="#000000"
-                  className="h-8 flex-1"
+                  className="h-6 flex-1 text-xs"
+                  style={{ fontSize: "12px" }}
                 />
               </div>
             </div>
-            <div className="space-y-1.5">
+            <div className="space-y-1">
               <Label htmlFor="fontSize" className="text-xs font-medium">
                 크기
               </Label>
@@ -250,50 +214,73 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
                 placeholder="14px"
                 value={localStyle.fontSize || ""}
                 onChange={(e) => handleStyleChange("fontSize", e.target.value)}
-                className="h-8"
+                className="h-6 w-full px-2 py-0 text-xs"
+                style={{ fontSize: "12px" }}
               />
             </div>
           </div>
 
           <div className="grid grid-cols-2 gap-2">
-            <div className="max-w-[140px] space-y-0.5">
-              <Label htmlFor="fontWeight" className="text-[10px] font-medium">
+            <div className="space-y-1">
+              <Label htmlFor="fontWeight" className="text-xs font-medium">
                 굵기
               </Label>
               <Select
                 value={localStyle.fontWeight || "normal"}
                 onValueChange={(value) => handleStyleChange("fontWeight", value)}
               >
-                <SelectTrigger className="h-6 w-full text-[10px] px-2">
+                <SelectTrigger className="h-6 w-full px-2 py-0" style={{ fontSize: "12px" }}>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="normal" className="text-[10px]">보통</SelectItem>
-                  <SelectItem value="bold" className="text-[10px]">굵게</SelectItem>
-                  <SelectItem value="100" className="text-[10px]">100</SelectItem>
-                  <SelectItem value="400" className="text-[10px]">400</SelectItem>
-                  <SelectItem value="500" className="text-[10px]">500</SelectItem>
-                  <SelectItem value="600" className="text-[10px]">600</SelectItem>
-                  <SelectItem value="700" className="text-[10px]">700</SelectItem>
+                  <SelectItem value="normal" style={{ fontSize: "12px" }}>
+                    보통
+                  </SelectItem>
+                  <SelectItem value="bold" style={{ fontSize: "12px" }}>
+                    굵게
+                  </SelectItem>
+                  <SelectItem value="100" style={{ fontSize: "12px" }}>
+                    100
+                  </SelectItem>
+                  <SelectItem value="400" style={{ fontSize: "12px" }}>
+                    400
+                  </SelectItem>
+                  <SelectItem value="500" style={{ fontSize: "12px" }}>
+                    500
+                  </SelectItem>
+                  <SelectItem value="600" style={{ fontSize: "12px" }}>
+                    600
+                  </SelectItem>
+                  <SelectItem value="700" style={{ fontSize: "12px" }}>
+                    700
+                  </SelectItem>
                 </SelectContent>
               </Select>
             </div>
-            <div className="max-w-[140px] space-y-0.5">
-              <Label htmlFor="textAlign" className="text-[10px] font-medium">
+            <div className="space-y-1">
+              <Label htmlFor="textAlign" className="text-xs font-medium">
                 정렬
               </Label>
               <Select
                 value={localStyle.textAlign || "left"}
                 onValueChange={(value) => handleStyleChange("textAlign", value)}
               >
-                <SelectTrigger className="h-6 w-full text-[10px] px-2">
+                <SelectTrigger className="h-6 w-full px-2 py-0" style={{ fontSize: "12px" }}>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="left" className="text-[10px]">왼쪽</SelectItem>
-                  <SelectItem value="center" className="text-[10px]">가운데</SelectItem>
-                  <SelectItem value="right" className="text-[10px]">오른쪽</SelectItem>
-                  <SelectItem value="justify" className="text-[10px]">양쪽</SelectItem>
+                  <SelectItem value="left" style={{ fontSize: "12px" }}>
+                    왼쪽
+                  </SelectItem>
+                  <SelectItem value="center" style={{ fontSize: "12px" }}>
+                    가운데
+                  </SelectItem>
+                  <SelectItem value="right" style={{ fontSize: "12px" }}>
+                    오른쪽
+                  </SelectItem>
+                  <SelectItem value="justify" style={{ fontSize: "12px" }}>
+                    양쪽
+                  </SelectItem>
                 </SelectContent>
               </Select>
             </div>
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index 01663c89..cd7aa8d3 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -61,6 +61,24 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   const [displayColumnOpen, setDisplayColumnOpen] = useState(false);
   const [displayColumnSearch, setDisplayColumnSearch] = useState("");
 
+  // 🎯 플로우 위젯이 화면에 있는지 확인
+  const hasFlowWidget = useMemo(() => {
+    const found = allComponents.some((comp: any) => {
+      // ScreenDesigner에서 저장하는 componentType 속성 확인!
+      const compType = comp.componentType || comp.widgetType || "";
+
+      // "flow-widget" 체크
+      const isFlow = compType === "flow-widget" || compType?.toLowerCase().includes("flow");
+
+      if (isFlow) {
+        console.log("✅ 플로우 위젯 발견!", { id: comp.id, componentType: comp.componentType });
+      }
+      return isFlow;
+    });
+    console.log("🎯 플로우 위젯 존재 여부:", found);
+    return found;
+  }, [allComponents]);
+
   // 컴포넌트 prop 변경 시 로컬 상태 동기화 (Input만)
   useEffect(() => {
     const latestConfig = component.componentConfig || {};
@@ -298,7 +316,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   variant="outline"
                   role="combobox"
                   aria-expanded={modalScreenOpen}
-                  className="h-10 w-full justify-between"
+                  className="h-6 w-full justify-between px-2 py-0"
+                  style={{ fontSize: "12px" }}
                   disabled={screensLoading}
                 >
                   {config.action?.targetScreenId
@@ -372,7 +391,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   variant="outline"
                   role="combobox"
                   aria-expanded={modalScreenOpen}
-                  className="h-10 w-full justify-between"
+                  className="h-6 w-full justify-between px-2 py-0"
+                  style={{ fontSize: "12px" }}
                   disabled={screensLoading}
                 >
                   {config.action?.targetScreenId
@@ -515,94 +535,64 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
       {/* 테이블 이력 보기 액션 설정 */}
       {(component.componentConfig?.action?.type || "save") === "view_table_history" && (
         <div className="mt-4 space-y-4">
-          <h4 className="text-sm font-medium">📜 테이블 이력 보기 설정</h4>
-
           <div>
             <Label>
               전체 이력 표시 컬럼 (필수) <span className="text-red-600">*</span>
             </Label>
 
-            {!config.action?.historyTableName && !currentTableName ? (
-              <div className="mt-2 rounded-md border border-yellow-300 bg-yellow-50 p-3">
-                <p className="text-xs text-yellow-800">
-                  ⚠️ 먼저 <strong>테이블명</strong>을 입력하거나, 현재 화면에 테이블을 연결해주세요.
-                </p>
-              </div>
-            ) : (
-              <>
-                {!config.action?.historyTableName && currentTableName && (
-                  <div className="mt-2 rounded-md border border-green-300 bg-green-50 p-2">
-                    <p className="text-xs text-green-800">
-                      ✓ 현재 화면의 테이블 <strong>{currentTableName}</strong>을(를) 자동으로 사용합니다.
-                    </p>
-                  </div>
-                )}
-
-                <Popover open={displayColumnOpen} onOpenChange={setDisplayColumnOpen}>
-                  <PopoverTrigger asChild>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      aria-expanded={displayColumnOpen}
-                      className="mt-2 h-10 w-full justify-between text-sm"
-                      disabled={columnsLoading || tableColumns.length === 0}
-                    >
-                      {columnsLoading
-                        ? "로딩 중..."
-                        : config.action?.historyDisplayColumn
-                          ? config.action.historyDisplayColumn
-                          : tableColumns.length === 0
-                            ? "사용 가능한 컬럼이 없습니다"
-                            : "컬럼을 선택하세요"}
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
-                    <Command>
-                      <CommandInput placeholder="컬럼 검색..." className="text-sm" />
-                      <CommandList>
-                        <CommandEmpty className="text-sm">컬럼을 찾을 수 없습니다.</CommandEmpty>
-                        <CommandGroup>
-                          {tableColumns.map((column) => (
-                            <CommandItem
-                              key={column}
-                              value={column}
-                              onSelect={(currentValue) => {
-                                onUpdateProperty("componentConfig.action.historyDisplayColumn", currentValue);
-                                setDisplayColumnOpen(false);
-                              }}
-                              className="text-sm"
-                            >
-                              <Check
-                                className={cn(
-                                  "mr-2 h-4 w-4",
-                                  config.action?.historyDisplayColumn === column ? "opacity-100" : "opacity-0",
-                                )}
-                              />
-                              {column}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
-
-                <p className="mt-2 text-xs text-gray-700">
-                  <strong>전체 테이블 이력</strong>에서 레코드를 구분하기 위한 컬럼입니다.
-                  <br />
-                  예: <code className="rounded bg-white px-1">device_code</code>를 설정하면 이력에 &quot;DTG-001&quot;로
-                  표시됩니다.
-                  <br />이 컬럼으로 검색도 가능합니다.
-                </p>
-
-                {tableColumns.length === 0 && !columnsLoading && (
-                  <p className="mt-2 text-xs text-red-600">
-                    ⚠️ ID 및 날짜 타입 컬럼을 제외한 사용 가능한 컬럼이 없습니다.
-                  </p>
-                )}
-              </>
-            )}
+            <Popover open={displayColumnOpen} onOpenChange={setDisplayColumnOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={displayColumnOpen}
+                  className="mt-2 h-8 w-full justify-between text-xs"
+                  style={{ fontSize: "12px" }}
+                  disabled={columnsLoading || tableColumns.length === 0}
+                >
+                  {columnsLoading
+                    ? "로딩 중..."
+                    : config.action?.historyDisplayColumn
+                      ? config.action.historyDisplayColumn
+                      : tableColumns.length === 0
+                        ? "사용 가능한 컬럼이 없습니다"
+                        : "컬럼을 선택하세요"}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                <Command>
+                  <CommandInput placeholder="컬럼 검색..." className="text-xs" style={{ fontSize: "12px" }} />
+                  <CommandList>
+                    <CommandEmpty className="text-xs" style={{ fontSize: "12px" }}>
+                      컬럼을 찾을 수 없습니다.
+                    </CommandEmpty>
+                    <CommandGroup>
+                      {tableColumns.map((column) => (
+                        <CommandItem
+                          key={column}
+                          value={column}
+                          onSelect={(currentValue) => {
+                            onUpdateProperty("componentConfig.action.historyDisplayColumn", currentValue);
+                            setDisplayColumnOpen(false);
+                          }}
+                          className="text-xs"
+                          style={{ fontSize: "12px" }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              config.action?.historyDisplayColumn === column ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          {column}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
           </div>
         </div>
       )}
@@ -620,7 +610,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   variant="outline"
                   role="combobox"
                   aria-expanded={navScreenOpen}
-                  className="h-10 w-full justify-between"
+                  className="h-6 w-full justify-between px-2 py-0"
+                  style={{ fontSize: "12px" }}
                   disabled={screensLoading}
                 >
                   {config.action?.targetScreenId
@@ -693,6 +684,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 setLocalInputs((prev) => ({ ...prev, targetUrl: newValue }));
                 onUpdateProperty("componentConfig.action.targetUrl", newValue);
               }}
+              className="h-6 w-full px-2 py-0 text-xs"
+              style={{ fontSize: "12px" }}
             />
             <p className="mt-1 text-xs text-gray-500">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
           </div>
@@ -704,14 +697,16 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         <ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
       </div>
 
-      {/* 🆕 플로우 단계별 표시 제어 섹션 */}
-      <div className="mt-8 border-t border-gray-200 pt-6">
-        <FlowVisibilityConfigPanel
-          component={component}
-          allComponents={allComponents}
-          onUpdateProperty={onUpdateProperty}
-        />
-      </div>
+      {/* 🆕 플로우 단계별 표시 제어 섹션 (플로우 위젯이 있을 때만 표시) */}
+      {hasFlowWidget && (
+        <div className="mt-8 border-t border-gray-200 pt-6">
+          <FlowVisibilityConfigPanel
+            component={component}
+            allComponents={allComponents}
+            onUpdateProperty={onUpdateProperty}
+          />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx b/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx
index 3a3db764..85a78b7a 100644
--- a/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx
@@ -117,7 +117,7 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">
+        <CardTitle className="flex items-center gap-2 text-xs" style={{ fontSize: "12px" }}>
           <CheckSquare className="h-4 w-4" />
           체크박스 설정
         </CardTitle>
@@ -173,7 +173,7 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 value={localConfig.label || ""}
                 onChange={(e) => updateConfig("label", e.target.value)}
                 placeholder="체크박스 라벨"
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
 
@@ -187,7 +187,7 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                   value={localConfig.checkedValue || ""}
                   onChange={(e) => updateConfig("checkedValue", e.target.value)}
                   placeholder="Y"
-                  className="text-xs"
+                  className="text-xs" style={{ fontSize: "12px" }}
                 />
               </div>
               <div className="space-y-2">
@@ -199,7 +199,7 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                   value={localConfig.uncheckedValue || ""}
                   onChange={(e) => updateConfig("uncheckedValue", e.target.value)}
                   placeholder="N"
-                  className="text-xs"
+                  className="text-xs" style={{ fontSize: "12px" }}
                 />
               </div>
             </div>
@@ -232,7 +232,7 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 value={localConfig.groupLabel || ""}
                 onChange={(e) => updateConfig("groupLabel", e.target.value)}
                 placeholder="체크박스 그룹 제목"
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
 
@@ -244,19 +244,19 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                   value={newOptionLabel}
                   onChange={(e) => setNewOptionLabel(e.target.value)}
                   placeholder="라벨"
-                  className="flex-1 text-xs"
+                  className="flex-1 text-xs" style={{ fontSize: "12px" }}
                 />
                 <Input
                   value={newOptionValue}
                   onChange={(e) => setNewOptionValue(e.target.value)}
                   placeholder="값"
-                  className="flex-1 text-xs"
+                  className="flex-1 text-xs" style={{ fontSize: "12px" }}
                 />
                 <Button
                   size="sm"
                   onClick={addOption}
                   disabled={!newOptionLabel.trim() || !newOptionValue.trim()}
-                  className="text-xs"
+                  className="text-xs" style={{ fontSize: "12px" }}
                 >
                   <Plus className="h-3 w-3" />
                 </Button>
@@ -277,13 +277,13 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                       value={option.label}
                       onChange={(e) => updateOption(index, "label", e.target.value)}
                       placeholder="라벨"
-                      className="flex-1 text-xs"
+                      className="flex-1 text-xs" style={{ fontSize: "12px" }}
                     />
                     <Input
                       value={option.value}
                       onChange={(e) => updateOption(index, "value", e.target.value)}
                       placeholder="값"
-                      className="flex-1 text-xs"
+                      className="flex-1 text-xs" style={{ fontSize: "12px" }}
                     />
                     <Switch
                       checked={!option.disabled}
@@ -361,7 +361,7 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                   disabled={localConfig.readonly}
                   required={localConfig.required}
                   defaultChecked={localConfig.defaultChecked}
-                  className="text-xs"
+                  className="text-xs" style={{ fontSize: "12px" }}
                 />
                 <Label htmlFor="preview-single" className="text-xs">
                   {localConfig.label || "체크박스 라벨"}
@@ -380,7 +380,7 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                         disabled={localConfig.readonly || option.disabled}
                         required={localConfig.required && index === 0} // 첫 번째에만 required 표시
                         defaultChecked={option.checked}
-                        className="text-xs"
+                        className="text-xs" style={{ fontSize: "12px" }}
                       />
                       <Label htmlFor={`preview-group-${index}`} className="text-xs">
                         {option.label}
diff --git a/frontend/components/screen/config-panels/CodeConfigPanel.tsx b/frontend/components/screen/config-panels/CodeConfigPanel.tsx
index 6d5bebdf..7af2a06d 100644
--- a/frontend/components/screen/config-panels/CodeConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/CodeConfigPanel.tsx
@@ -106,7 +106,7 @@ export const CodeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">
+        <CardTitle className="flex items-center gap-2 text-xs" style={{ fontSize: "12px" }}>
           <Code className="h-4 w-4" />
           코드 에디터 설정
         </CardTitle>
@@ -174,7 +174,7 @@ export const CodeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               step={50}
               value={localConfig.height || 300}
               onChange={(e) => updateConfig("height", parseInt(e.target.value))}
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
             <div className="text-muted-foreground flex justify-between text-xs">
               <span>150px</span>
@@ -199,7 +199,7 @@ export const CodeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 onChange={(e) => updateConfig("fontSize", parseInt(e.target.value))}
                 min={10}
                 max={24}
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
 
@@ -214,7 +214,7 @@ export const CodeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 onChange={(e) => updateConfig("tabSize", parseInt(e.target.value))}
                 min={1}
                 max={8}
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
           </div>
@@ -308,7 +308,7 @@ export const CodeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.placeholder || ""}
               onChange={(e) => updateConfig("placeholder", e.target.value)}
               placeholder="코드를 입력하세요..."
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -330,7 +330,7 @@ export const CodeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.defaultValue || ""}
               onChange={(e) => updateConfig("defaultValue", e.target.value)}
               placeholder="기본 코드 내용"
-              className="font-mono text-xs"
+              className="font-mono text-xs" style={{ fontSize: "12px" }}
               rows={4}
             />
           </div>
diff --git a/frontend/components/screen/config-panels/DateConfigPanel.tsx b/frontend/components/screen/config-panels/DateConfigPanel.tsx
index bbea14d4..7fcacc57 100644
--- a/frontend/components/screen/config-panels/DateConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/DateConfigPanel.tsx
@@ -75,7 +75,7 @@ export const DateConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">
+        <CardTitle className="flex items-center gap-2 text-xs" style={{ fontSize: "12px" }}>
           <Calendar className="h-4 w-4" />
           날짜 설정
         </CardTitle>
@@ -95,7 +95,7 @@ export const DateConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.placeholder || ""}
               onChange={(e) => updateConfig("placeholder", e.target.value)}
               placeholder="날짜를 선택하세요"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -149,7 +149,7 @@ export const DateConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 type={localConfig.showTime ? "datetime-local" : "date"}
                 value={localConfig.minDate || ""}
                 onChange={(e) => updateConfig("minDate", e.target.value)}
-                className="flex-1 text-xs"
+                className="flex-1 text-xs" style={{ fontSize: "12px" }}
               />
               <Button size="sm" variant="outline" onClick={() => setCurrentDate("minDate")} className="text-xs">
                 오늘
@@ -167,7 +167,7 @@ export const DateConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 type={localConfig.showTime ? "datetime-local" : "date"}
                 value={localConfig.maxDate || ""}
                 onChange={(e) => updateConfig("maxDate", e.target.value)}
-                className="flex-1 text-xs"
+                className="flex-1 text-xs" style={{ fontSize: "12px" }}
               />
               <Button size="sm" variant="outline" onClick={() => setCurrentDate("maxDate")} className="text-xs">
                 오늘
@@ -190,7 +190,7 @@ export const DateConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 type={localConfig.showTime ? "datetime-local" : "date"}
                 value={localConfig.defaultValue || ""}
                 onChange={(e) => updateConfig("defaultValue", e.target.value)}
-                className="flex-1 text-xs"
+                className="flex-1 text-xs" style={{ fontSize: "12px" }}
               />
               <Button size="sm" variant="outline" onClick={() => setCurrentDate("defaultValue")} className="text-xs">
                 현재
@@ -245,7 +245,7 @@ export const DateConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               min={localConfig.minDate}
               max={localConfig.maxDate}
               defaultValue={localConfig.defaultValue}
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
             <div className="text-muted-foreground mt-2 text-xs">
               형식: {localConfig.format}
diff --git a/frontend/components/screen/config-panels/EntityConfigPanel.tsx b/frontend/components/screen/config-panels/EntityConfigPanel.tsx
index fe753451..a3f6a072 100644
--- a/frontend/components/screen/config-panels/EntityConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/EntityConfigPanel.tsx
@@ -163,7 +163,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">
+        <CardTitle className="flex items-center gap-2 text-xs" style={{ fontSize: "12px" }}>
           <Database className="h-4 w-4" />
           엔티티 설정
         </CardTitle>
@@ -183,7 +183,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.entityType || ""}
               onChange={(e) => updateConfig("entityType", e.target.value)}
               placeholder="user, product, department..."
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -196,7 +196,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                   size="sm"
                   variant="outline"
                   onClick={() => applyEntityType(entity.value)}
-                  className="text-xs"
+                  className="text-xs" style={{ fontSize: "12px" }}
                 >
                   {entity.label}
                 </Button>
@@ -213,7 +213,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.apiEndpoint || ""}
               onChange={(e) => updateConfig("apiEndpoint", e.target.value)}
               placeholder="/api/entities/user"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
         </div>
@@ -232,7 +232,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 value={localConfig.valueField || ""}
                 onChange={(e) => updateConfig("valueField", e.target.value)}
                 placeholder="id"
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
 
@@ -245,7 +245,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 value={localConfig.labelField || ""}
                 onChange={(e) => updateConfig("labelField", e.target.value)}
                 placeholder="name"
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
           </div>
@@ -263,13 +263,13 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 value={newFieldName}
                 onChange={(e) => setNewFieldName(e.target.value)}
                 placeholder="필드명"
-                className="flex-1 text-xs"
+                className="flex-1 text-xs" style={{ fontSize: "12px" }}
               />
               <Input
                 value={newFieldLabel}
                 onChange={(e) => setNewFieldLabel(e.target.value)}
                 placeholder="라벨"
-                className="flex-1 text-xs"
+                className="flex-1 text-xs" style={{ fontSize: "12px" }}
               />
               <Select value={newFieldType} onValueChange={setNewFieldType}>
                 <SelectTrigger className="w-24 text-xs">
@@ -287,7 +287,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 size="sm"
                 onClick={addDisplayField}
                 disabled={!newFieldName.trim() || !newFieldLabel.trim()}
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               >
                 <Plus className="h-3 w-3" />
               </Button>
@@ -308,13 +308,13 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                     value={field.name}
                     onChange={(e) => updateDisplayField(index, "name", e.target.value)}
                     placeholder="필드명"
-                    className="flex-1 text-xs"
+                    className="flex-1 text-xs" style={{ fontSize: "12px" }}
                   />
                   <Input
                     value={field.label}
                     onChange={(e) => updateDisplayField(index, "label", e.target.value)}
                     placeholder="라벨"
-                    className="flex-1 text-xs"
+                    className="flex-1 text-xs" style={{ fontSize: "12px" }}
                   />
                   <Select value={field.type} onValueChange={(value) => updateDisplayField(index, "type", value)}>
                     <SelectTrigger className="w-24 text-xs">
@@ -332,7 +332,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                     size="sm"
                     variant={localConfig.searchFields.includes(field.name) ? "default" : "outline"}
                     onClick={() => toggleSearchField(field.name)}
-                    className="p-1 text-xs"
+                    className="p-1 text-xs" style={{ fontSize: "12px" }}
                     title={localConfig.searchFields.includes(field.name) ? "검색 필드에서 제거" : "검색 필드로 추가"}
                   >
                     <Search className="h-3 w-3" />
@@ -341,7 +341,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                     size="sm"
                     variant="destructive"
                     onClick={() => removeDisplayField(index)}
-                    className="p-1 text-xs"
+                    className="p-1 text-xs" style={{ fontSize: "12px" }}
                   >
                     <Trash2 className="h-3 w-3" />
                   </Button>
@@ -364,7 +364,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.placeholder || ""}
               onChange={(e) => updateConfig("placeholder", e.target.value)}
               placeholder="엔티티를 선택하세요"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -377,7 +377,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.emptyMessage || ""}
               onChange={(e) => updateConfig("emptyMessage", e.target.value)}
               placeholder="검색 결과가 없습니다"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -393,7 +393,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 onChange={(e) => updateConfig("minSearchLength", parseInt(e.target.value))}
                 min={0}
                 max={10}
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
 
@@ -408,7 +408,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 onChange={(e) => updateConfig("pageSize", parseInt(e.target.value))}
                 min={5}
                 max={100}
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
           </div>
@@ -462,7 +462,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 }
               }}
               placeholder='{"status": "active", "department": "IT"}'
-              className="font-mono text-xs"
+              className="font-mono text-xs" style={{ fontSize: "12px" }}
               rows={3}
             />
             <p className="text-muted-foreground text-xs">API 요청에 추가될 필터 조건을 JSON 형태로 입력하세요.</p>
diff --git a/frontend/components/screen/config-panels/FileConfigPanel.tsx b/frontend/components/screen/config-panels/FileConfigPanel.tsx
index 8205d82f..d07f49ff 100644
--- a/frontend/components/screen/config-panels/FileConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/FileConfigPanel.tsx
@@ -113,7 +113,7 @@ export const FileConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">
+        <CardTitle className="flex items-center gap-2 text-xs" style={{ fontSize: "12px" }}>
           <Upload className="h-4 w-4" />
           파일 업로드 설정
         </CardTitle>
@@ -133,7 +133,7 @@ export const FileConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.uploadText || ""}
               onChange={(e) => updateConfig("uploadText", e.target.value)}
               placeholder="파일을 선택하거나 여기에 드래그하세요"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -146,7 +146,7 @@ export const FileConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.browseText || ""}
               onChange={(e) => updateConfig("browseText", e.target.value)}
               placeholder="파일 선택"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -196,7 +196,7 @@ export const FileConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 min={0.1}
                 max={1024}
                 step={0.1}
-                className="flex-1 text-xs"
+                className="flex-1 text-xs" style={{ fontSize: "12px" }}
               />
               <span className="text-muted-foreground text-xs">MB</span>
             </div>
@@ -214,7 +214,7 @@ export const FileConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 onChange={(e) => updateConfig("maxFiles", parseInt(e.target.value))}
                 min={1}
                 max={100}
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
           )}
@@ -257,7 +257,7 @@ export const FileConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 value={newFileType}
                 onChange={(e) => setNewFileType(e.target.value)}
                 placeholder=".pdf 또는 pdf"
-                className="flex-1 text-xs"
+                className="flex-1 text-xs" style={{ fontSize: "12px" }}
               />
               <Button size="sm" onClick={addFileType} disabled={!newFileType.trim()} className="text-xs">
                 추가
diff --git a/frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx b/frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx
index 40e10c2a..262ee1c9 100644
--- a/frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx
@@ -9,6 +9,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Input } from "@/components/ui/input";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
 import { Workflow, Info, CheckCircle, XCircle, Loader2, ArrowRight, ArrowDown } from "lucide-react";
 import { ComponentData } from "@/types/screen";
 import { FlowVisibilityConfig } from "@/types/control-management";
@@ -172,6 +173,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
       timestamp: new Date().toISOString(),
     });
 
+    // 현재 버튼에 설정 적용 (그룹 설정은 ScreenDesigner에서 자동으로 일괄 적용됨)
     onUpdateProperty("webTypeConfig.flowVisibilityConfig", config);
   };
 
@@ -234,11 +236,13 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
   return (
     <div className="space-y-4">
       <div className="space-y-1">
-        <h4 className="flex items-center gap-2 text-sm font-medium">
+        <h4 className="flex items-center gap-2 text-xs font-medium" style={{ fontSize: "12px" }}>
           <Workflow className="h-4 w-4" />
           플로우 단계별 표시 설정
         </h4>
-        <p className="text-muted-foreground text-xs">플로우의 특정 단계에서만 이 버튼을 표시하거나 숨길 수 있습니다</p>
+        <p className="text-muted-foreground text-xs" style={{ fontSize: "12px" }}>
+          플로우의 특정 단계에서만 이 버튼을 표시하거나 숨길 수 있습니다
+        </p>
       </div>
 
       <div className="space-y-4">
@@ -252,7 +256,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
               setTimeout(() => applyConfig(), 0);
             }}
           />
-          <Label htmlFor="flow-control-enabled" className="text-sm font-medium">
+          <Label htmlFor="flow-control-enabled" className="text-xs font-medium" style={{ fontSize: "12px" }}>
             플로우 단계에 따라 버튼 표시 제어
           </Label>
         </div>
@@ -261,7 +265,9 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
           <>
             {/* 대상 플로우 선택 */}
             <div className="space-y-2">
-              <Label className="text-sm font-medium">대상 플로우</Label>
+              <Label className="text-xs font-medium" style={{ fontSize: "12px" }}>
+                대상 플로우
+              </Label>
               <Select
                 value={selectedFlowComponentId || ""}
                 onValueChange={(value) => {
@@ -269,7 +275,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                   setTimeout(() => applyConfig(), 0);
                 }}
               >
-                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                <SelectTrigger className="h-6 text-xs" style={{ fontSize: "12px" }}>
                   <SelectValue placeholder="플로우 위젯 선택" />
                 </SelectTrigger>
                 <SelectContent>
@@ -277,7 +283,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                     const flowConfig = (fw as any).componentConfig || {};
                     const flowName = flowConfig.flowName || `플로우 ${fw.id}`;
                     return (
-                      <SelectItem key={fw.id} value={fw.id}>
+                      <SelectItem key={fw.id} value={fw.id} style={{ fontSize: "12px" }}>
                         {flowName}
                       </SelectItem>
                     );
@@ -289,251 +295,106 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
             {/* 플로우가 선택되면 스텝 목록 표시 */}
             {selectedFlowComponentId && flowSteps.length > 0 && (
               <>
-                {/* 모드 선택 */}
-                <div className="space-y-2">
-                  <Label className="text-sm font-medium">표시 모드</Label>
-                  <RadioGroup
-                    value={mode}
-                    onValueChange={(value: any) => {
-                      setMode(value);
-                      setTimeout(() => applyConfig(), 0);
-                    }}
-                  >
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="whitelist" id="mode-whitelist" />
-                      <Label htmlFor="mode-whitelist" className="text-sm font-normal">
-                        선택한 단계에서만 표시
-                      </Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="all" id="mode-all" />
-                      <Label htmlFor="mode-all" className="text-sm font-normal">
-                        모든 단계에서 표시
-                      </Label>
-                    </div>
-                  </RadioGroup>
-                </div>
-
-                {/* 단계 선택 (all 모드가 아닐 때만) */}
-                {mode !== "all" && (
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-between">
-                      <Label className="text-sm font-medium">표시할 단계</Label>
-                      <div className="flex gap-1">
-                        <Button variant="ghost" size="sm" onClick={selectAll} className="h-7 px-2 text-xs">
-                          모두 선택
-                        </Button>
-                        <Button variant="ghost" size="sm" onClick={selectNone} className="h-7 px-2 text-xs">
-                          모두 해제
-                        </Button>
-                        <Button variant="ghost" size="sm" onClick={invertSelection} className="h-7 px-2 text-xs">
-                          반전
-                        </Button>
-                      </div>
-                    </div>
-
-                    {/* 스텝 체크박스 목록 */}
-                    <div className="bg-muted/30 space-y-2 rounded-lg border p-3">
-                      {flowSteps.map((step) => {
-                        const isChecked = visibleSteps.includes(step.id);
-
-                        return (
-                          <div key={step.id} className="flex items-center gap-2">
-                            <Checkbox
-                              id={`step-${step.id}`}
-                              checked={isChecked}
-                              onCheckedChange={() => toggleStep(step.id)}
-                            />
-                            <Label htmlFor={`step-${step.id}`} className="flex flex-1 items-center gap-2 text-sm">
-                              <Badge variant="outline" className="text-xs">
-                                Step {step.stepOrder}
-                              </Badge>
-                              <span>{step.stepName}</span>
-                              {isChecked && <CheckCircle className="ml-auto h-4 w-4 text-green-500" />}
-                            </Label>
-                          </div>
-                        );
-                      })}
+                {/* 단계 선택 */}
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs font-medium" style={{ fontSize: "12px" }}>
+                      표시할 단계
+                    </Label>
+                    <div className="flex gap-1">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={selectAll}
+                        className="h-7 px-2 text-xs"
+                        style={{ fontSize: "12px" }}
+                      >
+                        모두 선택
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={selectNone}
+                        className="h-7 px-2 text-xs"
+                        style={{ fontSize: "12px" }}
+                      >
+                        모두 해제
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={invertSelection}
+                        className="h-7 px-2 text-xs"
+                        style={{ fontSize: "12px" }}
+                      >
+                        반전
+                      </Button>
                     </div>
                   </div>
-                )}
 
-                {/* 레이아웃 옵션 */}
-                <div className="space-y-2">
-                  <Label className="text-sm font-medium">레이아웃 동작</Label>
-                  <RadioGroup
-                    value={layoutBehavior}
-                    onValueChange={(value: any) => {
-                      setLayoutBehavior(value);
-                      setTimeout(() => applyConfig(), 0);
-                    }}
-                  >
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="preserve-position" id="layout-preserve" />
-                      <Label htmlFor="layout-preserve" className="text-sm font-normal">
-                        원래 위치 유지 (빈 공간 가능)
-                      </Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="auto-compact" id="layout-compact" />
-                      <Label htmlFor="layout-compact" className="text-sm font-normal">
-                        자동 정렬 (빈 공간 제거) ⭐ 권장
-                      </Label>
-                    </div>
-                  </RadioGroup>
+                  {/* 스텝 체크박스 목록 */}
+                  <div className="bg-muted/30 space-y-2 rounded-lg border p-3">
+                    {flowSteps.map((step) => {
+                      const isChecked = visibleSteps.includes(step.id);
+
+                      return (
+                        <div key={step.id} className="flex items-center gap-2">
+                          <Checkbox
+                            id={`step-${step.id}`}
+                            checked={isChecked}
+                            onCheckedChange={() => toggleStep(step.id)}
+                          />
+                          <Label
+                            htmlFor={`step-${step.id}`}
+                            className="flex flex-1 items-center gap-2 text-xs"
+                            style={{ fontSize: "12px" }}
+                          >
+                            <Badge variant="outline" className="text-xs" style={{ fontSize: "12px" }}>
+                              Step {step.stepOrder}
+                            </Badge>
+                            <span>{step.stepName}</span>
+                            {isChecked && <CheckCircle className="ml-auto h-4 w-4 text-green-500" />}
+                          </Label>
+                        </div>
+                      );
+                    })}
+                  </div>
                 </div>
 
-                {/* 🆕 그룹 설정 (auto-compact 모드일 때만 표시) */}
-                {layoutBehavior === "auto-compact" && (
-                  <div className="space-y-4">
-                    <div className="flex items-center gap-2">
-                      <Badge variant="secondary" className="text-xs">
-                        그룹 설정
-                      </Badge>
-                      <p className="text-muted-foreground text-xs">같은 그룹 ID를 가진 버튼들이 자동으로 정렬됩니다</p>
-                    </div>
-
-                    {/* 그룹 ID */}
-                    <div className="space-y-2">
-                      <Label htmlFor="group-id" className="text-sm font-medium">
-                        그룹 ID
-                      </Label>
-                      <Input
-                        id="group-id"
-                        value={groupId}
-                        onChange={(e) => setGroupId(e.target.value)}
-                        placeholder="group-1"
-                        className="h-8 text-xs sm:h-9 sm:text-sm"
-                      />
-                      <p className="text-muted-foreground text-[10px]">
-                        같은 그룹 ID를 가진 버튼들이 하나의 그룹으로 묶입니다
-                      </p>
-                    </div>
-
-                    {/* 정렬 방향 */}
-                    <div className="space-y-2">
-                      <Label className="text-sm font-medium">정렬 방향</Label>
-                      <RadioGroup
-                        value={groupDirection}
-                        onValueChange={(value: any) => {
-                          setGroupDirection(value);
-                          setTimeout(() => applyConfig(), 0);
-                        }}
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="horizontal" id="direction-horizontal" />
-                          <Label htmlFor="direction-horizontal" className="flex items-center gap-2 text-sm font-normal">
-                            <ArrowRight className="h-4 w-4" />
-                            가로 정렬
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="vertical" id="direction-vertical" />
-                          <Label htmlFor="direction-vertical" className="flex items-center gap-2 text-sm font-normal">
-                            <ArrowDown className="h-4 w-4" />
-                            세로 정렬
-                          </Label>
-                        </div>
-                      </RadioGroup>
-                    </div>
-
-                    {/* 버튼 간격 */}
-                    <div className="space-y-2">
-                      <Label htmlFor="group-gap" className="text-sm font-medium">
-                        버튼 간격 (px)
-                      </Label>
-                      <div className="flex items-center gap-2">
-                        <Input
-                          id="group-gap"
-                          type="number"
-                          min={0}
-                          max={100}
-                          value={groupGap}
-                          onChange={(e) => {
-                            setGroupGap(Number(e.target.value));
-                            setTimeout(() => applyConfig(), 0);
-                          }}
-                          className="h-8 text-xs sm:h-9 sm:text-sm"
-                        />
-                        <Badge variant="outline" className="text-xs">
-                          {groupGap}px
-                        </Badge>
-                      </div>
-                    </div>
-
-                    {/* 정렬 방식 */}
-                    <div className="space-y-2">
-                      <Label htmlFor="group-align" className="text-sm font-medium">
-                        정렬 방식
-                      </Label>
-                      <Select
-                        value={groupAlign}
-                        onValueChange={(value: any) => {
-                          setGroupAlign(value);
-                          setTimeout(() => applyConfig(), 0);
-                        }}
-                      >
-                        <SelectTrigger id="group-align" className="h-8 text-xs sm:h-9 sm:text-sm">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="start">시작점 정렬</SelectItem>
-                          <SelectItem value="center">중앙 정렬</SelectItem>
-                          <SelectItem value="end">끝점 정렬</SelectItem>
-                          <SelectItem value="space-between">양 끝 정렬</SelectItem>
-                          <SelectItem value="space-around">균등 배분</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                )}
-
-                {/* 미리보기 */}
-                <Alert>
-                  <Info className="h-4 w-4" />
-                  <AlertDescription className="text-xs">
-                    {mode === "whitelist" && visibleSteps.length > 0 && (
-                      <div>
-                        <p className="font-medium">표시 단계:</p>
-                        <div className="mt-1 flex flex-wrap gap-1">
-                          {visibleSteps.map((stepId) => {
-                            const step = flowSteps.find((s) => s.id === stepId);
-                            return (
-                              <Badge key={stepId} variant="secondary" className="text-xs">
-                                {step?.stepName || `Step ${stepId}`}
-                              </Badge>
-                            );
-                          })}
-                        </div>
-                      </div>
-                    )}
-                    {mode === "blacklist" && hiddenSteps.length > 0 && (
-                      <div>
-                        <p className="font-medium">숨김 단계:</p>
-                        <div className="mt-1 flex flex-wrap gap-1">
-                          {hiddenSteps.map((stepId) => {
-                            const step = flowSteps.find((s) => s.id === stepId);
-                            return (
-                              <Badge key={stepId} variant="destructive" className="text-xs">
-                                {step?.stepName || `Step ${stepId}`}
-                              </Badge>
-                            );
-                          })}
-                        </div>
-                      </div>
-                    )}
-                    {mode === "all" && <p>이 버튼은 모든 단계에서 표시됩니다.</p>}
-                    {mode === "whitelist" && visibleSteps.length === 0 && <p>표시할 단계를 선택해주세요.</p>}
-                  </AlertDescription>
-                </Alert>
-
-                {/* 🆕 자동 저장 안내 */}
-                <Alert className="border-green-200 bg-green-50">
-                  <CheckCircle className="h-4 w-4 text-green-600" />
-                  <AlertDescription className="text-xs text-green-800">
-                    설정이 자동으로 저장됩니다. 화면 저장 시 함께 적용됩니다.
-                  </AlertDescription>
-                </Alert>
+                {/* 정렬 방식 */}
+                <div className="space-y-2">
+                  <Label htmlFor="group-align" className="text-xs font-medium" style={{ fontSize: "12px" }}>
+                    정렬 방식
+                  </Label>
+                  <Select
+                    value={groupAlign}
+                    onValueChange={(value: any) => {
+                      setGroupAlign(value);
+                      onUpdateProperty("webTypeConfig.flowVisibilityConfig.groupAlign", value);
+                    }}
+                  >
+                    <SelectTrigger id="group-align" className="h-6 text-xs" style={{ fontSize: "12px" }}>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="start" style={{ fontSize: "12px" }}>
+                        시작점 정렬
+                      </SelectItem>
+                      <SelectItem value="center" style={{ fontSize: "12px" }}>
+                        중앙 정렬
+                      </SelectItem>
+                      <SelectItem value="end" style={{ fontSize: "12px" }}>
+                        끝점 정렬
+                      </SelectItem>
+                      <SelectItem value="space-between" style={{ fontSize: "12px" }}>
+                        양 끝 정렬
+                      </SelectItem>
+                      <SelectItem value="space-around" style={{ fontSize: "12px" }}>
+                        균등 배분
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
               </>
             )}
 
diff --git a/frontend/components/screen/config-panels/FlowWidgetConfigPanel.tsx b/frontend/components/screen/config-panels/FlowWidgetConfigPanel.tsx
index cfe7a324..11ec5dd5 100644
--- a/frontend/components/screen/config-panels/FlowWidgetConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/FlowWidgetConfigPanel.tsx
@@ -54,7 +54,7 @@ export function FlowWidgetConfigPanel({ config = {}, onChange }: FlowWidgetConfi
             {loading ? (
               <div className="flex items-center gap-2 rounded-md border px-3 py-2">
                 <Loader2 className="h-4 w-4 animate-spin" />
-                <span className="text-muted-foreground text-sm">로딩 중...</span>
+                <span className="text-muted-foreground text-xs" style={{ fontSize: "12px" }}>로딩 중...</span>
               </div>
             ) : (
               <>
diff --git a/frontend/components/screen/config-panels/NumberConfigPanel.tsx b/frontend/components/screen/config-panels/NumberConfigPanel.tsx
index ef3cfa7b..718e2988 100644
--- a/frontend/components/screen/config-panels/NumberConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/NumberConfigPanel.tsx
@@ -56,7 +56,7 @@ export const NumberConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">숫자 설정</CardTitle>
+        <CardTitle className="flex items-center gap-2 text-xs" style={{ fontSize: "12px" }}>숫자 설정</CardTitle>
         <CardDescription className="text-xs">숫자 입력 필드의 세부 설정을 관리합니다.</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
@@ -73,7 +73,7 @@ export const NumberConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.placeholder || ""}
               onChange={(e) => updateConfig("placeholder", e.target.value)}
               placeholder="숫자를 입력하세요"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -88,7 +88,7 @@ export const NumberConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 value={localConfig.min ?? ""}
                 onChange={(e) => updateConfig("min", e.target.value ? parseFloat(e.target.value) : undefined)}
                 placeholder="0"
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
             <div className="space-y-2">
@@ -101,7 +101,7 @@ export const NumberConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 value={localConfig.max ?? ""}
                 onChange={(e) => updateConfig("max", e.target.value ? parseFloat(e.target.value) : undefined)}
                 placeholder="100"
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
           </div>
@@ -118,7 +118,7 @@ export const NumberConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               placeholder="1"
               min="0"
               step="0.01"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
             <p className="text-muted-foreground text-xs">증가/감소 버튼 클릭 시 변경되는 값의 크기</p>
           </div>
@@ -158,7 +158,7 @@ export const NumberConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 placeholder="2"
                 min="0"
                 max="10"
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
           )}
@@ -223,7 +223,7 @@ export const NumberConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               min={localConfig.min}
               max={localConfig.max}
               step={localConfig.step}
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
             <div className="text-muted-foreground mt-2 text-xs">
               {localConfig.format === "currency" && "통화 형식으로 표시됩니다."}
diff --git a/frontend/components/screen/config-panels/RadioConfigPanel.tsx b/frontend/components/screen/config-panels/RadioConfigPanel.tsx
index 6b9f3f6b..db8eb6f3 100644
--- a/frontend/components/screen/config-panels/RadioConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/RadioConfigPanel.tsx
@@ -168,7 +168,7 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">
+        <CardTitle className="flex items-center gap-2 text-xs" style={{ fontSize: "12px" }}>
           <Radio className="h-4 w-4" />
           라디오버튼 설정
         </CardTitle>
@@ -188,7 +188,7 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.groupLabel || ""}
               onChange={(e) => updateConfig("groupLabel", e.target.value)}
               placeholder="라디오버튼 그룹 제목"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -201,7 +201,7 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.groupName || ""}
               onChange={(e) => updateConfig("groupName", e.target.value)}
               placeholder="자동 생성 (필드명 기반)"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
             <p className="text-muted-foreground text-xs">비워두면 필드명을 기반으로 자동 생성됩니다.</p>
           </div>
@@ -252,19 +252,19 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 value={newOptionLabel}
                 onChange={(e) => setNewOptionLabel(e.target.value)}
                 placeholder="라벨"
-                className="flex-1 text-xs"
+                className="flex-1 text-xs" style={{ fontSize: "12px" }}
               />
               <Input
                 value={newOptionValue}
                 onChange={(e) => setNewOptionValue(e.target.value)}
                 placeholder="값"
-                className="flex-1 text-xs"
+                className="flex-1 text-xs" style={{ fontSize: "12px" }}
               />
               <Button
                 size="sm"
                 onClick={addOption}
                 disabled={!newOptionLabel.trim() || !newOptionValue.trim()}
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               >
                 <Plus className="h-3 w-3" />
               </Button>
@@ -278,7 +278,7 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={bulkOptions}
               onChange={(e) => setBulkOptions(e.target.value)}
               placeholder="한 줄당 하나씩 입력하세요.&#10;라벨만 입력하면 값과 동일하게 설정됩니다.&#10;라벨|값 형식으로 입력하면 별도 값을 설정할 수 있습니다.&#10;&#10;예시:&#10;서울&#10;부산&#10;대구시|daegu"
-              className="h-20 text-xs"
+              className="h-20 text-xs" style={{ fontSize: "12px" }}
             />
             <Button size="sm" onClick={addBulkOptions} disabled={!bulkOptions.trim()} className="text-xs">
               옵션 추가
@@ -295,13 +295,13 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                     value={option.label}
                     onChange={(e) => updateOption(index, "label", e.target.value)}
                     placeholder="라벨"
-                    className="flex-1 text-xs"
+                    className="flex-1 text-xs" style={{ fontSize: "12px" }}
                   />
                   <Input
                     value={option.value}
                     onChange={(e) => updateOption(index, "value", e.target.value)}
                     placeholder="값"
-                    className="flex-1 text-xs"
+                    className="flex-1 text-xs" style={{ fontSize: "12px" }}
                   />
                   <Switch
                     checked={!option.disabled}
@@ -328,7 +328,7 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               id="defaultValue"
               value={localConfig.defaultValue || ""}
               onChange={(e) => updateConfig("defaultValue", e.target.value)}
-              className="w-full rounded-md border px-3 py-1 text-xs"
+              className="w-full rounded-md border px-3 py-1 text-xs" style={{ fontSize: "12px" }}
             >
               <option value="">선택하지 않음</option>
               {localConfig.options.map((option, index) => (
@@ -390,7 +390,7 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                       disabled={localConfig.readonly || option.disabled}
                       required={localConfig.required && index === 0} // 첫 번째에만 required 표시
                       defaultChecked={localConfig.defaultValue === option.value}
-                      className="text-xs"
+                      className="text-xs" style={{ fontSize: "12px" }}
                     />
                     <Label htmlFor={`preview-radio-${index}`} className="text-xs">
                       {option.label}
diff --git a/frontend/components/screen/config-panels/SelectConfigPanel.tsx b/frontend/components/screen/config-panels/SelectConfigPanel.tsx
index d621b5d9..1bd3b406 100644
--- a/frontend/components/screen/config-panels/SelectConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/SelectConfigPanel.tsx
@@ -153,7 +153,7 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">
+        <CardTitle className="flex items-center gap-2 text-xs" style={{ fontSize: "12px" }}>
           <List className="h-4 w-4" />
           선택박스 설정
         </CardTitle>
@@ -173,7 +173,7 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.placeholder || ""}
               onChange={(e) => updateConfig("placeholder", e.target.value)}
               placeholder="선택하세요"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -186,7 +186,7 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.emptyMessage || ""}
               onChange={(e) => updateConfig("emptyMessage", e.target.value)}
               placeholder="선택 가능한 옵션이 없습니다"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -247,19 +247,19 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 value={newOptionLabel}
                 onChange={(e) => setNewOptionLabel(e.target.value)}
                 placeholder="라벨"
-                className="flex-1 text-xs"
+                className="flex-1 text-xs" style={{ fontSize: "12px" }}
               />
               <Input
                 value={newOptionValue}
                 onChange={(e) => setNewOptionValue(e.target.value)}
                 placeholder="값"
-                className="flex-1 text-xs"
+                className="flex-1 text-xs" style={{ fontSize: "12px" }}
               />
               <Button
                 size="sm"
                 onClick={addOption}
                 disabled={!newOptionLabel.trim() || !newOptionValue.trim()}
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               >
                 <Plus className="h-3 w-3" />
               </Button>
@@ -273,7 +273,7 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={bulkOptions}
               onChange={(e) => setBulkOptions(e.target.value)}
               placeholder="한 줄당 하나씩 입력하세요.&#10;라벨만 입력하면 값과 동일하게 설정됩니다.&#10;라벨|값 형식으로 입력하면 별도 값을 설정할 수 있습니다.&#10;&#10;예시:&#10;서울&#10;부산&#10;대구시|daegu"
-              className="h-20 text-xs"
+              className="h-20 text-xs" style={{ fontSize: "12px" }}
             />
             <Button size="sm" onClick={addBulkOptions} disabled={!bulkOptions.trim()} className="text-xs">
               옵션 추가
@@ -290,13 +290,13 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                     value={option.label}
                     onChange={(e) => updateOption(index, "label", e.target.value)}
                     placeholder="라벨"
-                    className="flex-1 text-xs"
+                    className="flex-1 text-xs" style={{ fontSize: "12px" }}
                   />
                   <Input
                     value={option.value}
                     onChange={(e) => updateOption(index, "value", e.target.value)}
                     placeholder="값"
-                    className="flex-1 text-xs"
+                    className="flex-1 text-xs" style={{ fontSize: "12px" }}
                   />
                   <Switch
                     checked={!option.disabled}
@@ -323,7 +323,7 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               id="defaultValue"
               value={localConfig.defaultValue || ""}
               onChange={(e) => updateConfig("defaultValue", e.target.value)}
-              className="w-full rounded-md border px-3 py-1 text-xs"
+              className="w-full rounded-md border px-3 py-1 text-xs" style={{ fontSize: "12px" }}
             >
               <option value="">선택하지 않음</option>
               {localConfig.options.map((option, index) => (
@@ -376,7 +376,7 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               disabled={localConfig.readonly}
               required={localConfig.required}
               multiple={localConfig.multiple}
-              className="w-full rounded-md border px-3 py-1 text-xs"
+              className="w-full rounded-md border px-3 py-1 text-xs" style={{ fontSize: "12px" }}
               defaultValue={localConfig.defaultValue}
             >
               <option value="" disabled>
diff --git a/frontend/components/screen/config-panels/TextConfigPanel.tsx b/frontend/components/screen/config-panels/TextConfigPanel.tsx
index 4c4e3a71..ae5ab0b6 100644
--- a/frontend/components/screen/config-panels/TextConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/TextConfigPanel.tsx
@@ -55,7 +55,7 @@ export const TextConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">텍스트 설정</CardTitle>
+        <CardTitle className="flex items-center gap-2 text-xs" style={{ fontSize: "12px" }}>텍스트 설정</CardTitle>
         <CardDescription className="text-xs">텍스트 입력 필드의 세부 설정을 관리합니다.</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
@@ -72,7 +72,7 @@ export const TextConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.placeholder || ""}
               onChange={(e) => updateConfig("placeholder", e.target.value)}
               placeholder="입력 안내 텍스트"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -88,7 +88,7 @@ export const TextConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 onChange={(e) => updateConfig("minLength", e.target.value ? parseInt(e.target.value) : undefined)}
                 placeholder="0"
                 min="0"
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
             <div className="space-y-2">
@@ -102,7 +102,7 @@ export const TextConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 onChange={(e) => updateConfig("maxLength", e.target.value ? parseInt(e.target.value) : undefined)}
                 placeholder="100"
                 min="1"
-                className="text-xs"
+                className="text-xs" style={{ fontSize: "12px" }}
               />
             </div>
           </div>
@@ -141,7 +141,7 @@ export const TextConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.pattern || ""}
               onChange={(e) => updateConfig("pattern", e.target.value)}
               placeholder="예: [A-Za-z0-9]+"
-              className="font-mono text-xs"
+              className="font-mono text-xs" style={{ fontSize: "12px" }}
             />
             <p className="text-muted-foreground text-xs">JavaScript 정규식 패턴을 입력하세요.</p>
           </div>
@@ -219,7 +219,7 @@ export const TextConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               minLength={localConfig.minLength}
               pattern={localConfig.pattern}
               autoComplete={localConfig.autoComplete}
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
         </div>
diff --git a/frontend/components/screen/config-panels/TextareaConfigPanel.tsx b/frontend/components/screen/config-panels/TextareaConfigPanel.tsx
index 5cd0c825..f700e61d 100644
--- a/frontend/components/screen/config-panels/TextareaConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/TextareaConfigPanel.tsx
@@ -68,7 +68,7 @@ export const TextareaConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">
+        <CardTitle className="flex items-center gap-2 text-xs" style={{ fontSize: "12px" }}>
           <AlignLeft className="h-4 w-4" />
           텍스트영역 설정
         </CardTitle>
@@ -88,7 +88,7 @@ export const TextareaConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.placeholder || ""}
               onChange={(e) => updateConfig("placeholder", e.target.value)}
               placeholder="내용을 입력하세요"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -101,7 +101,7 @@ export const TextareaConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               value={localConfig.defaultValue || ""}
               onChange={(e) => updateConfig("defaultValue", e.target.value)}
               placeholder="기본 텍스트 내용"
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
               rows={3}
             />
             {localConfig.showCharCount && (
@@ -151,7 +151,7 @@ export const TextareaConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               placeholder="자동 (CSS로 제어)"
               min={10}
               max={200}
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
             <p className="text-muted-foreground text-xs">비워두면 CSS width로 제어됩니다.</p>
           </div>
@@ -203,7 +203,7 @@ export const TextareaConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               }}
               placeholder="제한 없음"
               min={0}
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -221,7 +221,7 @@ export const TextareaConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               }}
               placeholder="제한 없음"
               min={1}
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             />
           </div>
 
@@ -333,7 +333,7 @@ export const TextareaConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 resize: localConfig.resizable ? "both" : "none",
                 minHeight: localConfig.autoHeight ? "auto" : undefined,
               }}
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
               wrap={localConfig.wrap}
             />
             {localConfig.showCharCount && (
diff --git a/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx b/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx
index 659c5fa1..606a3071 100644
--- a/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx
+++ b/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx
@@ -94,7 +94,7 @@ export const FlowButtonGroupDialog: React.FC<FlowButtonGroupDialogProps> = ({
                 max={100}
                 value={gap}
                 onChange={(e) => setGap(Number(e.target.value))}
-                className="h-9 text-sm sm:h-10"
+                className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
               />
               <Badge variant="outline" className="text-xs">
                 {gap}px
@@ -109,7 +109,7 @@ export const FlowButtonGroupDialog: React.FC<FlowButtonGroupDialogProps> = ({
               정렬 방식
             </Label>
             <Select value={align} onValueChange={(value: any) => setAlign(value)}>
-              <SelectTrigger id="align" className="h-9 text-sm sm:h-10">
+              <SelectTrigger id="align" className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx
index b341cfb2..2e15c486 100644
--- a/frontend/components/screen/panels/ComponentsPanel.tsx
+++ b/frontend/components/screen/panels/ComponentsPanel.tsx
@@ -21,14 +21,14 @@ interface ComponentsPanelProps {
   placedColumns?: Set<string>; // 이미 배치된 컬럼명 집합
 }
 
-export function ComponentsPanel({ 
-  className, 
-  tables = [], 
-  searchTerm = "", 
-  onSearchChange, 
+export function ComponentsPanel({
+  className,
+  tables = [],
+  searchTerm = "",
+  onSearchChange,
   onTableDragStart,
   selectedTableName,
-  placedColumns 
+  placedColumns,
 }: ComponentsPanelProps) {
   const [searchQuery, setSearchQuery] = useState("");
 
@@ -162,41 +162,64 @@ export function ComponentsPanel({
         <p className="text-muted-foreground text-xs">{allComponents.length}개 사용 가능</p>
       </div>
 
-      {/* 검색 */}
+      {/* 통합 검색 */}
       <div className="mb-3">
         <div className="relative">
           <Search className="text-muted-foreground absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
           <Input
-            placeholder="컴포넌트 검색..."
+            placeholder="컴포넌트, 테이블, 컬럼 검색..."
             value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="h-8 pl-8 text-xs"
+            onChange={(e) => {
+              const value = e.target.value;
+              setSearchQuery(value);
+              // 테이블 검색도 함께 업데이트
+              if (onSearchChange) {
+                onSearchChange(value);
+              }
+            }}
+            className="h-8 pl-8 text-xs" style={{ fontSize: "12px" }}
           />
         </div>
       </div>
 
       {/* 카테고리 탭 */}
-      <Tabs defaultValue="input" className="flex flex-1 flex-col">
-        <TabsList className="mb-3 grid h-8 w-full grid-cols-5">
-          <TabsTrigger value="tables" className="flex items-center gap-1 px-1 text-xs">
+      <Tabs defaultValue="input" className="flex min-h-0 flex-1 flex-col">
+        <TabsList className="mb-3 grid h-8 w-full flex-shrink-0 grid-cols-5 gap-1 p-1">
+          <TabsTrigger
+            value="tables"
+            className="flex items-center justify-center gap-0.5 px-0 text-[10px]"
+            title="테이블"
+          >
             <Database className="h-3 w-3" />
-            <span className="hidden sm:inline">테이블</span>
+            <span className="hidden">테이블</span>
           </TabsTrigger>
-          <TabsTrigger value="input" className="flex items-center gap-1 px-1 text-xs">
+          <TabsTrigger value="input" className="flex items-center justify-center gap-0.5 px-0 text-[10px]" title="입력">
             <Edit3 className="h-3 w-3" />
-            <span className="hidden sm:inline">입력</span>
+            <span className="hidden">입력</span>
           </TabsTrigger>
-          <TabsTrigger value="action" className="flex items-center gap-1 px-1 text-xs">
+          <TabsTrigger
+            value="action"
+            className="flex items-center justify-center gap-0.5 px-0 text-[10px]"
+            title="액션"
+          >
             <Zap className="h-3 w-3" />
-            <span className="hidden sm:inline">액션</span>
+            <span className="hidden">액션</span>
           </TabsTrigger>
-          <TabsTrigger value="display" className="flex items-center gap-1 px-1 text-xs">
+          <TabsTrigger
+            value="display"
+            className="flex items-center justify-center gap-0.5 px-0 text-[10px]"
+            title="표시"
+          >
             <BarChart3 className="h-3 w-3" />
-            <span className="hidden sm:inline">표시</span>
+            <span className="hidden">표시</span>
           </TabsTrigger>
-          <TabsTrigger value="layout" className="flex items-center gap-1 px-1 text-xs">
+          <TabsTrigger
+            value="layout"
+            className="flex items-center justify-center gap-0.5 px-0 text-[10px]"
+            title="레이아웃"
+          >
             <Layers className="h-3 w-3" />
-            <span className="hidden sm:inline">레이아웃</span>
+            <span className="hidden">레이아웃</span>
           </TabsTrigger>
         </TabsList>
 
diff --git a/frontend/components/screen/panels/DataTableConfigPanel.tsx b/frontend/components/screen/panels/DataTableConfigPanel.tsx
index 163a446d..8cf02cbc 100644
--- a/frontend/components/screen/panels/DataTableConfigPanel.tsx
+++ b/frontend/components/screen/panels/DataTableConfigPanel.tsx
@@ -458,7 +458,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                             updateSettings({ options: newOptions });
                           }}
                           placeholder="옵션명"
-                          className="h-7 text-xs"
+                          className="h-7 text-xs" style={{ fontSize: "12px" }}
                         />
                         <Button
                           type="button"
@@ -483,7 +483,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                       const newOption = { label: "", value: "" };
                       updateSettings({ options: [...(localSettings.options || []), newOption] });
                     }}
-                    className="h-7 text-xs"
+                    className="h-7 text-xs" style={{ fontSize: "12px" }}
                   >
                     <Plus className="mr-1 h-3 w-3" />
                     옵션 추가
@@ -548,7 +548,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                     value={localSettings.min || ""}
                     onChange={(e) => updateSettings({ min: e.target.value ? Number(e.target.value) : undefined })}
                     placeholder="최소값"
-                    className="h-7 text-xs"
+                    className="h-7 text-xs" style={{ fontSize: "12px" }}
                   />
                 </div>
                 <div className="space-y-1">
@@ -558,7 +558,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                     value={localSettings.max || ""}
                     onChange={(e) => updateSettings({ max: e.target.value ? Number(e.target.value) : undefined })}
                     placeholder="최대값"
-                    className="h-7 text-xs"
+                    className="h-7 text-xs" style={{ fontSize: "12px" }}
                   />
                 </div>
               </div>
@@ -571,7 +571,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                     value={localSettings.step || "0.01"}
                     onChange={(e) => updateSettings({ step: e.target.value })}
                     placeholder="0.01"
-                    className="h-7 text-xs"
+                    className="h-7 text-xs" style={{ fontSize: "12px" }}
                   />
                 </div>
               )}
@@ -589,7 +589,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                     type="date"
                     value={localSettings.minDate || ""}
                     onChange={(e) => updateSettings({ minDate: e.target.value })}
-                    className="h-7 text-xs"
+                    className="h-7 text-xs" style={{ fontSize: "12px" }}
                   />
                 </div>
                 <div className="space-y-1">
@@ -598,7 +598,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                     type="date"
                     value={localSettings.maxDate || ""}
                     onChange={(e) => updateSettings({ maxDate: e.target.value })}
-                    className="h-7 text-xs"
+                    className="h-7 text-xs" style={{ fontSize: "12px" }}
                   />
                 </div>
               </div>
@@ -626,7 +626,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                   value={localSettings.maxLength || ""}
                   onChange={(e) => updateSettings({ maxLength: e.target.value ? Number(e.target.value) : undefined })}
                   placeholder="최대 문자 수"
-                  className="h-7 text-xs"
+                  className="h-7 text-xs" style={{ fontSize: "12px" }}
                 />
               </div>
               <div className="space-y-1">
@@ -635,7 +635,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                   value={localSettings.placeholder || ""}
                   onChange={(e) => updateSettings({ placeholder: e.target.value })}
                   placeholder="입력 안내 텍스트"
-                  className="h-7 text-xs"
+                  className="h-7 text-xs" style={{ fontSize: "12px" }}
                 />
               </div>
             </div>
@@ -652,7 +652,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                     value={localSettings.rows || "3"}
                     onChange={(e) => updateSettings({ rows: Number(e.target.value) })}
                     placeholder="3"
-                    className="h-7 text-xs"
+                    className="h-7 text-xs" style={{ fontSize: "12px" }}
                   />
                 </div>
                 <div className="space-y-1">
@@ -662,7 +662,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                     value={localSettings.maxLength || ""}
                     onChange={(e) => updateSettings({ maxLength: e.target.value ? Number(e.target.value) : undefined })}
                     placeholder="최대 문자 수"
-                    className="h-7 text-xs"
+                    className="h-7 text-xs" style={{ fontSize: "12px" }}
                   />
                 </div>
               </div>
@@ -678,7 +678,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                   value={localSettings.accept || ""}
                   onChange={(e) => updateSettings({ accept: e.target.value })}
                   placeholder=".jpg,.png,.pdf"
-                  className="h-7 text-xs"
+                  className="h-7 text-xs" style={{ fontSize: "12px" }}
                 />
               </div>
               <div className="space-y-1">
@@ -688,7 +688,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                   value={localSettings.maxSize ? localSettings.maxSize / 1024 / 1024 : "10"}
                   onChange={(e) => updateSettings({ maxSize: Number(e.target.value) * 1024 * 1024 })}
                   placeholder="10"
-                  className="h-7 text-xs"
+                  className="h-7 text-xs" style={{ fontSize: "12px" }}
                 />
               </div>
               <div className="flex items-center space-x-2">
@@ -1132,7 +1132,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
           {/* 기본 설정 */}
           <Card>
             <CardHeader>
-              <CardTitle className="flex items-center space-x-2 text-sm">
+              <CardTitle className="flex items-center space-x-2 text-xs" style={{ fontSize: "12px" }}>
                 <Settings className="h-4 w-4" />
                 <span>기본 설정</span>
               </CardTitle>
@@ -1184,7 +1184,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                         onUpdateComponent({ enableAdd: checked as boolean });
                       }}
                     />
-                    <Label htmlFor="enable-add" className="text-sm">
+                    <Label htmlFor="enable-add" className="text-xs" style={{ fontSize: "12px" }}>
                       데이터 추가 기능
                     </Label>
                   </div>
@@ -1198,7 +1198,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                         onUpdateComponent({ enableEdit: checked as boolean });
                       }}
                     />
-                    <Label htmlFor="enable-edit" className="text-sm">
+                    <Label htmlFor="enable-edit" className="text-xs" style={{ fontSize: "12px" }}>
                       데이터 수정 기능
                     </Label>
                   </div>
@@ -1212,7 +1212,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                         onUpdateComponent({ enableDelete: checked as boolean });
                       }}
                     />
-                    <Label htmlFor="enable-delete" className="text-sm">
+                    <Label htmlFor="enable-delete" className="text-xs" style={{ fontSize: "12px" }}>
                       데이터 삭제 기능
                     </Label>
                   </div>
@@ -1220,7 +1220,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
 
                 <div className="grid grid-cols-3 gap-4">
                   <div className="space-y-2">
-                    <Label htmlFor="add-button-text" className="text-sm">
+                    <Label htmlFor="add-button-text" className="text-xs" style={{ fontSize: "12px" }}>
                       추가 버튼 텍스트
                     </Label>
                     <Input
@@ -1233,12 +1233,12 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                       }}
                       placeholder="추가"
                       disabled={!localValues.enableAdd}
-                      className="h-8 text-sm"
+                      className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                     />
                   </div>
 
                   <div className="space-y-2">
-                    <Label htmlFor="edit-button-text" className="text-sm">
+                    <Label htmlFor="edit-button-text" className="text-xs" style={{ fontSize: "12px" }}>
                       수정 버튼 텍스트
                     </Label>
                     <Input
@@ -1251,12 +1251,12 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                       }}
                       placeholder="수정"
                       disabled={!localValues.enableEdit}
-                      className="h-8 text-sm"
+                      className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                     />
                   </div>
 
                   <div className="space-y-2">
-                    <Label htmlFor="delete-button-text" className="text-sm">
+                    <Label htmlFor="delete-button-text" className="text-xs" style={{ fontSize: "12px" }}>
                       삭제 버튼 텍스트
                     </Label>
                     <Input
@@ -1269,7 +1269,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                       }}
                       placeholder="삭제"
                       disabled={!localValues.enableDelete}
-                      className="h-8 text-sm"
+                      className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                     />
                   </div>
                 </div>
@@ -1284,7 +1284,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
 
                   <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-2">
-                      <Label htmlFor="modal-title" className="text-sm">
+                      <Label htmlFor="modal-title" className="text-xs" style={{ fontSize: "12px" }}>
                         모달 제목
                       </Label>
                       <Input
@@ -1298,12 +1298,12 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                           });
                         }}
                         placeholder="새 데이터 추가"
-                        className="h-8 text-sm"
+                        className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                       />
                     </div>
 
                     <div className="space-y-2">
-                      <Label htmlFor="modal-width" className="text-sm">
+                      <Label htmlFor="modal-width" className="text-xs" style={{ fontSize: "12px" }}>
                         모달 크기
                       </Label>
                       <select
@@ -1328,7 +1328,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                   </div>
 
                   <div className="space-y-2">
-                    <Label htmlFor="modal-description" className="text-sm">
+                    <Label htmlFor="modal-description" className="text-xs" style={{ fontSize: "12px" }}>
                       모달 설명
                     </Label>
                     <Input
@@ -1342,13 +1342,13 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                         });
                       }}
                       placeholder="모달에 표시될 설명을 입력하세요"
-                      className="h-8 text-sm"
+                      className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                     />
                   </div>
 
                   <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-2">
-                      <Label htmlFor="modal-layout" className="text-sm">
+                      <Label htmlFor="modal-layout" className="text-xs" style={{ fontSize: "12px" }}>
                         레이아웃
                       </Label>
                       <select
@@ -1370,7 +1370,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
 
                     {localValues.modalLayout === "grid" && (
                       <div className="space-y-2">
-                        <Label htmlFor="modal-grid-columns" className="text-sm">
+                        <Label htmlFor="modal-grid-columns" className="text-xs" style={{ fontSize: "12px" }}>
                           그리드 컬럼 수
                         </Label>
                         <select
@@ -1394,7 +1394,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
 
                   <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-2">
-                      <Label htmlFor="modal-submit-text" className="text-sm">
+                      <Label htmlFor="modal-submit-text" className="text-xs" style={{ fontSize: "12px" }}>
                         제출 버튼 텍스트
                       </Label>
                       <Input
@@ -1408,12 +1408,12 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                           });
                         }}
                         placeholder="추가"
-                        className="h-8 text-sm"
+                        className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                       />
                     </div>
 
                     <div className="space-y-2">
-                      <Label htmlFor="modal-cancel-text" className="text-sm">
+                      <Label htmlFor="modal-cancel-text" className="text-xs" style={{ fontSize: "12px" }}>
                         취소 버튼 텍스트
                       </Label>
                       <Input
@@ -1427,7 +1427,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                           });
                         }}
                         placeholder="취소"
-                        className="h-8 text-sm"
+                        className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                       />
                     </div>
                   </div>
@@ -1441,7 +1441,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
 
                   <div className="space-y-3">
                     <div className="space-y-2">
-                      <Label htmlFor="edit-modal-title" className="text-sm">
+                      <Label htmlFor="edit-modal-title" className="text-xs" style={{ fontSize: "12px" }}>
                         모달 제목
                       </Label>
                       <Input
@@ -1455,13 +1455,13 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                           });
                         }}
                         placeholder="데이터 수정"
-                        className="h-8 text-sm"
+                        className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                       />
                       <p className="text-xs text-gray-500">비워두면 기본 제목이 표시됩니다</p>
                     </div>
 
                     <div className="space-y-2">
-                      <Label htmlFor="edit-modal-description" className="text-sm">
+                      <Label htmlFor="edit-modal-description" className="text-xs" style={{ fontSize: "12px" }}>
                         모달 설명
                       </Label>
                       <Input
@@ -1475,7 +1475,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                           });
                         }}
                         placeholder="선택한 데이터를 수정합니다"
-                        className="h-8 text-sm"
+                        className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                       />
                       <p className="text-xs text-gray-500">비워두면 설명이 표시되지 않습니다</p>
                     </div>
@@ -1494,7 +1494,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                       onUpdateComponent({ showSearchButton: checked as boolean });
                     }}
                   />
-                  <Label htmlFor="show-search-button" className="text-sm">
+                  <Label htmlFor="show-search-button" className="text-xs" style={{ fontSize: "12px" }}>
                     검색 버튼 표시
                   </Label>
                 </div>
@@ -1509,7 +1509,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                       onUpdateComponent({ enableExport: checked as boolean });
                     }}
                   />
-                  <Label htmlFor="enable-export" className="text-sm">
+                  <Label htmlFor="enable-export" className="text-xs" style={{ fontSize: "12px" }}>
                     내보내기 기능
                   </Label>
                 </div>
@@ -1521,7 +1521,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
         <TabsContent value="columns" className="mt-4 max-h-[70vh] overflow-y-auto">
           <Card>
             <CardHeader>
-              <CardTitle className="flex items-center space-x-2 text-sm">
+              <CardTitle className="flex items-center space-x-2 text-xs" style={{ fontSize: "12px" }}>
                 <Columns className="h-4 w-4" />
                 <span>컬럼 설정</span>
               </CardTitle>
@@ -1535,7 +1535,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
 
                 <div className="flex flex-wrap items-center gap-2">
                   {/* 파일 컬럼 추가 버튼 */}
-                  <Button size="sm" variant="outline" onClick={addVirtualFileColumn} className="h-8 text-xs">
+                  <Button size="sm" variant="outline" onClick={addVirtualFileColumn} className="h-6 w-full px-2 py-0 text-xs">
                     <Plus className="h-4 w-4" />
                     <span className="ml-1">파일 컬럼</span>
                   </Button>
@@ -1654,7 +1654,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                             }
                           }}
                           placeholder="표시명을 입력하세요"
-                          className="h-8 text-xs"
+                          className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                         />
                       </div>
 
@@ -1673,7 +1673,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                               updateColumn(column.id, { gridColumns: newGridColumns });
                             }}
                           >
-                            <SelectTrigger className="h-8 text-xs">
+                            <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                               <SelectValue />
                             </SelectTrigger>
                             <SelectContent>
@@ -1861,7 +1861,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                                       });
                                     }}
                                   >
-                                    <SelectTrigger className="h-8 text-xs">
+                                    <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                                       <SelectValue />
                                     </SelectTrigger>
                                     <SelectContent>
@@ -1902,7 +1902,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                                         });
                                       }}
                                     >
-                                      <SelectTrigger className="h-8 text-xs">
+                                      <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                                         <SelectValue />
                                       </SelectTrigger>
                                       <SelectContent>
@@ -1947,7 +1947,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                                         });
                                       }}
                                       placeholder="고정값 입력..."
-                                      className="h-8 text-xs"
+                                      className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                                     />
                                   </div>
                                 )}
@@ -1967,7 +1967,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
         <TabsContent value="filters" className="mt-4 max-h-[70vh] overflow-y-auto">
           <Card>
             <CardHeader>
-              <CardTitle className="flex items-center space-x-2 text-sm">
+              <CardTitle className="flex items-center space-x-2 text-xs" style={{ fontSize: "12px" }}>
                 <Filter className="h-4 w-4" />
                 <span>필터 설정</span>
               </CardTitle>
@@ -1995,7 +1995,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
               {component.filters.length === 0 ? (
                 <div className="text-muted-foreground py-8 text-center">
                   <Filter className="mx-auto mb-2 h-8 w-8 opacity-50" />
-                  <p className="text-sm">필터가 없습니다</p>
+                  <p className="text-xs" style={{ fontSize: "12px" }}>필터가 없습니다</p>
                   <p className="text-xs">컬럼을 추가하면 자동으로 필터가 생성됩니다</p>
                 </div>
               ) : (
@@ -2073,7 +2073,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                                       updateFilter(index, { label: newValue });
                                     }}
                                     placeholder="필터 이름 입력..."
-                                    className="h-8 text-xs"
+                                    className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
                                   />
                                 </div>
                                 <p className="text-muted-foreground mt-1 text-xs">
@@ -2112,7 +2112,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                                   }
                                 }}
                               >
-                                <SelectTrigger className="h-8 text-xs">
+                                <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                                   <SelectValue />
                                 </SelectTrigger>
                                 <SelectContent>
@@ -2144,7 +2144,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                                 value={filter.gridColumns.toString()}
                                 onValueChange={(value) => updateFilter(index, { gridColumns: parseInt(value) })}
                               >
-                                <SelectTrigger className="h-8 text-xs">
+                                <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                                   <SelectValue />
                                 </SelectTrigger>
                                 <SelectContent>
@@ -2192,7 +2192,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
         <TabsContent value="modal" className="mt-4 max-h-[70vh] overflow-y-auto">
           <Card>
             <CardHeader>
-              <CardTitle className="flex items-center space-x-2 text-sm">
+              <CardTitle className="flex items-center space-x-2 text-xs" style={{ fontSize: "12px" }}>
                 <Settings className="h-4 w-4" />
                 <span>모달 및 페이징 설정</span>
               </CardTitle>
@@ -2258,7 +2258,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                             });
                           }}
                         />
-                        <Label htmlFor="show-page-size-selector" className="text-sm">
+                        <Label htmlFor="show-page-size-selector" className="text-xs" style={{ fontSize: "12px" }}>
                           페이지 크기 선택기 표시
                         </Label>
                       </div>
@@ -2278,7 +2278,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                             });
                           }}
                         />
-                        <Label htmlFor="show-page-info" className="text-sm">
+                        <Label htmlFor="show-page-info" className="text-xs" style={{ fontSize: "12px" }}>
                           페이지 정보 표시
                         </Label>
                       </div>
@@ -2298,7 +2298,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                             });
                           }}
                         />
-                        <Label htmlFor="show-first-last" className="text-sm">
+                        <Label htmlFor="show-first-last" className="text-xs" style={{ fontSize: "12px" }}>
                           처음/마지막 버튼 표시
                         </Label>
                       </div>
diff --git a/frontend/components/screen/panels/DetailSettingsPanel.tsx b/frontend/components/screen/panels/DetailSettingsPanel.tsx
index 1320778e..14c7e388 100644
--- a/frontend/components/screen/panels/DetailSettingsPanel.tsx
+++ b/frontend/components/screen/panels/DetailSettingsPanel.tsx
@@ -148,7 +148,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         onUpdateProperty(layoutComponent.id, "zones", newZones);
                       }
                     }}
-                    className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                    className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                    style={{ fontSize: "12px" }}
                   />
                 </div>
                 <div>
@@ -185,7 +186,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         onUpdateProperty(layoutComponent.id, "zones", newZones);
                       }
                     }}
-                    className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                    className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                    style={{ fontSize: "12px" }}
                   />
                 </div>
               </div>
@@ -199,7 +201,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                   onChange={(e) =>
                     onUpdateProperty(layoutComponent.id, "layoutConfig.grid.gap", parseInt(e.target.value))
                   }
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  style={{ fontSize: "12px" }}
                 />
               </div>
             </div>
@@ -243,7 +246,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onUpdateProperty(layoutComponent.id, "zones", updatedZones);
                     }
                   }}
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  style={{ fontSize: "12px" }}
                 >
                   <option value="row">가로 (row)</option>
                   <option value="column">세로 (column)</option>
@@ -302,7 +306,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         onUpdateProperty(layoutComponent.id, "zones", newZones);
                       }
                     }}
-                    className="w-20 rounded border border-gray-300 px-2 py-1 text-sm"
+                    className="w-20 rounded border border-gray-300 px-2 py-1 text-xs"
+                    style={{ fontSize: "12px" }}
                   />
                   <span className="text-xs text-gray-500">개</span>
                 </div>
@@ -317,7 +322,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                   onChange={(e) =>
                     onUpdateProperty(layoutComponent.id, "layoutConfig.flexbox.gap", parseInt(e.target.value))
                   }
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  style={{ fontSize: "12px" }}
                 />
               </div>
             </div>
@@ -332,7 +338,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                 <select
                   value={layoutComponent.layoutConfig?.split?.direction || "horizontal"}
                   onChange={(e) => onUpdateProperty(layoutComponent.id, "layoutConfig.split.direction", e.target.value)}
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  style={{ fontSize: "12px" }}
                 >
                   <option value="horizontal">가로 분할</option>
                   <option value="vertical">세로 분할</option>
@@ -381,7 +388,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        style={{ fontSize: "12px" }}
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -403,7 +411,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        style={{ fontSize: "12px" }}
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -425,7 +434,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        style={{ fontSize: "12px" }}
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -447,7 +457,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        style={{ fontSize: "12px" }}
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -475,6 +486,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             );
                           }}
                           className="bg-primary text-primary-foreground hover:bg-primary/90 rounded px-2 py-1 text-xs"
+                          style={{ fontSize: "12px" }}
                         >
                           + 컬럼 추가
                         </button>
@@ -497,7 +509,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                                     currentColumns,
                                   );
                                 }}
-                                className="flex-1 rounded border border-gray-300 px-2 py-1 text-sm"
+                                className="flex-1 rounded border border-gray-300 px-2 py-1 text-xs"
+                                style={{ fontSize: "12px" }}
                               >
                                 <option value="">컬럼을 선택하세요</option>
                                 {currentTable.columns?.map((col) => (
@@ -520,6 +533,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                                   );
                                 }}
                                 className="bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded px-2 py-1 text-xs"
+                                style={{ fontSize: "12px" }}
                               >
                                 삭제
                               </button>
@@ -554,7 +568,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onChange={(e) =>
                         onUpdateProperty(layoutComponent.id, "layoutConfig.card.cardsPerRow", parseInt(e.target.value))
                       }
-                      className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                      className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                      style={{ fontSize: "12px" }}
                     />
                   </div>
 
@@ -568,7 +583,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onChange={(e) =>
                         onUpdateProperty(layoutComponent.id, "layoutConfig.card.cardSpacing", parseInt(e.target.value))
                       }
-                      className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                      className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                      style={{ fontSize: "12px" }}
                     />
                   </div>
                 </div>
@@ -657,7 +673,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         parseInt(e.target.value),
                       )
                     }
-                    className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+                    className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                    style={{ fontSize: "12px" }}
                   />
                 </div>
               </div>
@@ -685,6 +702,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             onUpdateProperty(layoutComponent.id, `zones.${index}.size.width`, e.target.value)
                           }
                           className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                          style={{ fontSize: "12px" }}
                           placeholder="100%"
                         />
                       </div>
@@ -697,6 +715,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             onUpdateProperty(layoutComponent.id, `zones.${index}.size.height`, e.target.value)
                           }
                           className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                          style={{ fontSize: "12px" }}
                           placeholder="auto"
                         />
                       </div>
@@ -909,7 +928,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
             <h3 className="font-medium text-gray-900">컴포넌트 설정</h3>
           </div>
           <div className="mt-2 flex items-center space-x-2">
-            <span className="text-muted-foreground text-sm">타입:</span>
+            <span className="text-muted-foreground text-xs" style={{ fontSize: "12px" }}>
+              타입:
+            </span>
             <span className="rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800">{componentType}</span>
           </div>
         </div>
@@ -957,7 +978,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
             <h3 className="font-medium text-gray-900">파일 컴포넌트 설정</h3>
           </div>
           <div className="mt-2 flex items-center space-x-2">
-            <span className="text-muted-foreground text-sm">타입:</span>
+            <span className="text-muted-foreground text-xs" style={{ fontSize: "12px" }}>
+              타입:
+            </span>
             <span className="rounded bg-purple-100 px-2 py-1 text-xs font-medium text-purple-800">파일 업로드</span>
           </div>
           <div className="mt-1 text-xs text-gray-500">
@@ -1044,12 +1067,16 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           {/* 컴포넌트 정보 */}
           <div className="mb-4 space-y-2">
             <div className="flex items-center space-x-2">
-              <span className="text-muted-foreground text-sm">컴포넌트:</span>
+              <span className="text-muted-foreground text-xs" style={{ fontSize: "12px" }}>
+                컴포넌트:
+              </span>
               <span className="rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800">{componentId}</span>
             </div>
             {webType && currentBaseInputType && (
               <div className="flex items-center space-x-2">
-                <span className="text-muted-foreground text-sm">입력 타입:</span>
+                <span className="text-muted-foreground text-xs" style={{ fontSize: "12px" }}>
+                  입력 타입:
+                </span>
                 <span className="rounded bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800">
                   {currentBaseInputType}
                 </span>
@@ -1057,7 +1084,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
             )}
             {selectedComponent.columnName && (
               <div className="flex items-center space-x-2">
-                <span className="text-muted-foreground text-sm">컬럼:</span>
+                <span className="text-muted-foreground text-xs" style={{ fontSize: "12px" }}>
+                  컬럼:
+                </span>
                 <span className="text-xs text-gray-700">{selectedComponent.columnName}</span>
               </div>
             )}
@@ -1137,7 +1166,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           <h3 className="font-medium text-gray-900">상세 설정</h3>
         </div>
         <div className="mt-2 flex items-center space-x-2">
-          <span className="text-muted-foreground text-sm">입력 타입:</span>
+          <span className="text-muted-foreground text-xs" style={{ fontSize: "12px" }}>
+            입력 타입:
+          </span>
           <span className="rounded bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800">
             {currentBaseInputType}
           </span>
@@ -1150,7 +1181,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
         <div className="space-y-2">
           <label className="block text-sm font-medium text-gray-700">세부 타입 선택</label>
           <Select value={localDetailType} onValueChange={handleDetailTypeChange}>
-            <SelectTrigger className="w-full bg-white">
+            <SelectTrigger className="h-6 w-full px-2 py-0 bg-white text-xs" style={{ fontSize: "12px" }}>
               <SelectValue placeholder="세부 타입을 선택하세요" />
             </SelectTrigger>
             <SelectContent>
diff --git a/frontend/components/screen/panels/FlowButtonGroupPanel.tsx b/frontend/components/screen/panels/FlowButtonGroupPanel.tsx
index 83720945..5a28aa70 100644
--- a/frontend/components/screen/panels/FlowButtonGroupPanel.tsx
+++ b/frontend/components/screen/panels/FlowButtonGroupPanel.tsx
@@ -98,7 +98,7 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
                     size="sm"
                     variant="ghost"
                     onClick={() => onSelectGroup(groupInfo.buttons.map((b) => b.id))}
-                    className="h-7 px-2 text-xs"
+                    className="h-7 px-2 text-xs" style={{ fontSize: "12px" }}
                   >
                     선택
                   </Button>
@@ -152,7 +152,7 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
                 {groupInfo.buttons.map((button) => (
                   <div
                     key={button.id}
-                    className="flex items-center gap-2 rounded bg-white px-2 py-1.5 text-xs"
+                    className="flex items-center gap-2 rounded bg-white px-2 py-1.5 text-xs" style={{ fontSize: "12px" }}
                   >
                     <div className="h-2 w-2 rounded-full bg-blue-500" />
                     <span className="flex-1 truncate font-medium">
diff --git a/frontend/components/screen/panels/GridPanel.tsx b/frontend/components/screen/panels/GridPanel.tsx
index 4df77897..16178e57 100644
--- a/frontend/components/screen/panels/GridPanel.tsx
+++ b/frontend/components/screen/panels/GridPanel.tsx
@@ -68,7 +68,7 @@ export const GridPanel: React.FC<GridPanelProps> = ({
                 size="sm"
                 variant="outline"
                 onClick={onForceGridUpdate}
-                className="h-7 px-2 text-xs"
+                className="h-7 px-2 text-xs" style={{ fontSize: "12px" }}
                 title="현재 해상도에 맞게 모든 컴포넌트를 격자에 재정렬합니다"
               >
                 <RefreshCw className="mr-1 h-3 w-3" />
@@ -266,7 +266,7 @@ export const GridPanel: React.FC<GridPanelProps> = ({
             <div className="space-y-3">
               <h4 className="font-medium text-gray-900">격자 정보</h4>
 
-              <div className="space-y-2 text-sm">
+              <div className="space-y-2 text-xs" style={{ fontSize: "12px" }}>
                 <div className="flex justify-between">
                   <span className="text-muted-foreground">해상도:</span>
                   <span className="font-mono">
diff --git a/frontend/components/screen/panels/LayoutsPanel.tsx b/frontend/components/screen/panels/LayoutsPanel.tsx
index c38082b9..760a8229 100644
--- a/frontend/components/screen/panels/LayoutsPanel.tsx
+++ b/frontend/components/screen/panels/LayoutsPanel.tsx
@@ -214,7 +214,7 @@ export default function LayoutsPanel({
                             </Badge>
                           </div>
                         </div>
-                        <CardTitle className="text-sm">{layout.name}</CardTitle>
+                        <CardTitle className="text-xs" style={{ fontSize: "12px" }}>{layout.name}</CardTitle>
                       </CardHeader>
                       <CardContent className="pt-0">
                         {layout.description && (
diff --git a/frontend/components/screen/panels/PropertiesPanel.tsx b/frontend/components/screen/panels/PropertiesPanel.tsx
index 248e2e8a..b45bc517 100644
--- a/frontend/components/screen/panels/PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/PropertiesPanel.tsx
@@ -551,11 +551,6 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
 
         {/* 액션 버튼들 */}
         <div className="flex flex-wrap gap-1.5">
-          <Button size="sm" variant="outline" onClick={onCopyComponent} className="h-8 px-2.5 text-xs">
-            <Copy className="mr-1 h-3 w-3" />
-            복사
-          </Button>
-
           {canGroup && (
             <Button size="sm" variant="outline" onClick={onGroupComponents} className="h-8 px-2.5 text-xs">
               <Group className="mr-1 h-3 w-3" />
@@ -569,11 +564,6 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
               해제
             </Button>
           )}
-
-          <Button size="sm" variant="destructive" onClick={onDeleteComponent} className="h-8 px-2.5 text-xs">
-            <Trash2 className="mr-1 h-3 w-3" />
-            삭제
-          </Button>
         </div>
       </div>
 
@@ -655,7 +645,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                       }}
                       className="border-input bg-background text-primary focus:ring-ring h-4 w-4 rounded border focus:ring-2 focus:ring-offset-2"
                     />
-                    <Label htmlFor="required" className="text-sm">
+                    <Label htmlFor="required" className="text-xs" style={{ fontSize: "12px" }}>
                       필수 입력
                     </Label>
                   </div>
@@ -671,7 +661,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                       }}
                       className="border-input bg-background text-primary focus:ring-ring h-4 w-4 rounded border focus:ring-2 focus:ring-offset-2"
                     />
-                    <Label htmlFor="readonly" className="text-sm">
+                    <Label htmlFor="readonly" className="text-xs" style={{ fontSize: "12px" }}>
                       읽기 전용
                     </Label>
                   </div>
@@ -952,7 +942,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
               </>
             ) : (
               <div className="bg-accent col-span-2 rounded-lg p-3 text-center">
-                <p className="text-primary text-sm">카드 레이아웃은 자동으로 크기가 계산됩니다</p>
+                <p className="text-primary text-xs" style={{ fontSize: "12px" }}>카드 레이아웃은 자동으로 크기가 계산됩니다</p>
                 <p className="mt-1 text-xs text-blue-500">카드 개수와 간격 설정은 상세설정에서 조정하세요</p>
               </div>
             )}
diff --git a/frontend/components/screen/panels/ResolutionPanel.tsx b/frontend/components/screen/panels/ResolutionPanel.tsx
index 82072987..90680f01 100644
--- a/frontend/components/screen/panels/ResolutionPanel.tsx
+++ b/frontend/components/screen/panels/ResolutionPanel.tsx
@@ -82,9 +82,9 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
     <div className="space-y-4">
       {/* 프리셋 선택 */}
       <div className="space-y-2">
-        <Label className="text-sm font-medium">해상도 프리셋</Label>
+        <Label className="text-xs font-medium">해상도 프리셋</Label>
         <Select value={selectedPreset} onValueChange={handlePresetChange}>
-          <SelectTrigger>
+          <SelectTrigger className="h-6 w-full px-2 py-0" style={{ fontSize: "12px" }}>
             <SelectValue placeholder="해상도를 선택하세요" />
           </SelectTrigger>
           <SelectContent>
@@ -93,7 +93,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
             {SCREEN_RESOLUTIONS.filter((r) => r.category === "desktop").map((resolution) => (
               <SelectItem key={resolution.name} value={resolution.name}>
                 <div className="flex items-center space-x-2">
-                  <Monitor className="h-4 w-4 text-primary" />
+                  <Monitor className="text-primary h-4 w-4" />
                   <span>{resolution.name}</span>
                 </div>
               </SelectItem>
@@ -125,7 +125,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
             <div className="px-2 py-1 text-xs font-medium text-gray-500">사용자 정의</div>
             <SelectItem value="custom">
               <div className="flex items-center space-x-2">
-                <Settings className="h-4 w-4 text-muted-foreground" />
+                <Settings className="text-muted-foreground h-4 w-4" />
                 <span>사용자 정의</span>
               </div>
             </SelectItem>
@@ -139,43 +139,40 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
           <Label className="text-sm font-medium">사용자 정의 해상도</Label>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1">
-              <Label className="text-xs text-muted-foreground">너비 (px)</Label>
+              <Label className="text-muted-foreground text-xs">너비 (px)</Label>
               <Input
                 type="number"
                 value={customWidth}
                 onChange={(e) => setCustomWidth(e.target.value)}
                 placeholder="1920"
                 min="1"
+                className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
+                style={{ fontSize: "12px" }}
               />
             </div>
             <div className="space-y-1">
-              <Label className="text-xs text-muted-foreground">높이 (px)</Label>
+              <Label className="text-muted-foreground text-xs">높이 (px)</Label>
               <Input
                 type="number"
                 value={customHeight}
                 onChange={(e) => setCustomHeight(e.target.value)}
                 placeholder="1080"
                 min="1"
+                className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
+                style={{ fontSize: "12px" }}
               />
             </div>
           </div>
-          <Button onClick={handleCustomResolution} size="sm" className="w-full">
+          <Button
+            onClick={handleCustomResolution}
+            size="sm"
+            className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}
+            style={{ fontSize: "12px" }}
+          >
             적용
           </Button>
         </div>
       )}
-
-      {/* 해상도 정보 */}
-      <div className="space-y-2 text-xs text-gray-500">
-        <div className="flex items-center justify-between">
-          <span>화면 비율:</span>
-          <span>{(currentResolution.width / currentResolution.height).toFixed(2)}:1</span>
-        </div>
-        <div className="flex items-center justify-between">
-          <span>총 픽셀:</span>
-          <span>{(currentResolution.width * currentResolution.height).toLocaleString()}</span>
-        </div>
-      </div>
     </div>
   );
 };
diff --git a/frontend/components/screen/panels/RowSettingsPanel.tsx b/frontend/components/screen/panels/RowSettingsPanel.tsx
index 4bb535aa..2bd48a12 100644
--- a/frontend/components/screen/panels/RowSettingsPanel.tsx
+++ b/frontend/components/screen/panels/RowSettingsPanel.tsx
@@ -106,7 +106,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
               variant={row.gap === preset ? "default" : "outline"}
               size="sm"
               onClick={() => onUpdateRow({ gap: preset })}
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             >
               {GAP_PRESETS[preset].label}
             </Button>
@@ -127,7 +127,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
               variant={row.padding === preset ? "default" : "outline"}
               size="sm"
               onClick={() => onUpdateRow({ padding: preset })}
-              className="text-xs"
+              className="text-xs" style={{ fontSize: "12px" }}
             >
               {GAP_PRESETS[preset].label}
             </Button>
diff --git a/frontend/components/screen/panels/TablesPanel.tsx b/frontend/components/screen/panels/TablesPanel.tsx
index f75b699e..abeff8d6 100644
--- a/frontend/components/screen/panels/TablesPanel.tsx
+++ b/frontend/components/screen/panels/TablesPanel.tsx
@@ -1,23 +1,8 @@
 "use client";
 
-import React, { useState } from "react";
-import { Button } from "@/components/ui/button";
+import React from "react";
 import { Badge } from "@/components/ui/badge";
-import {
-  Database,
-  ChevronDown,
-  ChevronRight,
-  Type,
-  Hash,
-  Calendar,
-  CheckSquare,
-  List,
-  AlignLeft,
-  Code,
-  Building,
-  File,
-  Search,
-} from "lucide-react";
+import { Database, Type, Hash, Calendar, CheckSquare, List, AlignLeft, Code, Building, File } from "lucide-react";
 import { TableInfo, WebType } from "@/types/screen";
 
 interface TablesPanelProps {
@@ -65,23 +50,9 @@ const getWidgetIcon = (widgetType: WebType) => {
 export const TablesPanel: React.FC<TablesPanelProps> = ({
   tables,
   searchTerm,
-  onSearchChange,
   onDragStart,
-  selectedTableName,
   placedColumns = new Set(),
 }) => {
-  const [expandedTables, setExpandedTables] = useState<Set<string>>(new Set());
-
-  const toggleTable = (tableName: string) => {
-    const newExpanded = new Set(expandedTables);
-    if (newExpanded.has(tableName)) {
-      newExpanded.delete(tableName);
-    } else {
-      newExpanded.add(tableName);
-    }
-    setExpandedTables(newExpanded);
-  };
-
   // 이미 배치된 컬럼을 제외한 테이블 정보 생성
   const tablesWithAvailableColumns = tables.map((table) => ({
     ...table,
@@ -91,137 +62,89 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
     }),
   }));
 
+  // 검색어가 있으면 컬럼 필터링
   const filteredTables = tablesWithAvailableColumns
-    .filter((table) => table.columns.length > 0) // 사용 가능한 컬럼이 있는 테이블만 표시
-    .filter(
-      (table) =>
-        table.tableName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        table.columns.some((col) => col.columnName.toLowerCase().includes(searchTerm.toLowerCase())),
-    );
+    .map((table) => {
+      if (!searchTerm) {
+        return table;
+      }
+
+      const searchLower = searchTerm.toLowerCase();
+
+      // 테이블명이 검색어와 일치하면 모든 컬럼 표시
+      if (
+        table.tableName.toLowerCase().includes(searchLower) ||
+        (table.tableLabel && table.tableLabel.toLowerCase().includes(searchLower))
+      ) {
+        return table;
+      }
+
+      // 그렇지 않으면 컬럼명/라벨이 검색어와 일치하는 컬럼만 필터링
+      const filteredColumns = table.columns.filter(
+        (col) =>
+          col.columnName.toLowerCase().includes(searchLower) ||
+          (col.columnLabel && col.columnLabel.toLowerCase().includes(searchLower)),
+      );
+
+      return {
+        ...table,
+        columns: filteredColumns,
+      };
+    })
+    .filter((table) => table.columns.length > 0); // 컬럼이 있는 테이블만 표시
 
   return (
     <div className="flex h-full flex-col">
-      {/* 헤더 */}
-      <div className="border-b p-4">
-        {selectedTableName && (
-          <div className="border-primary/20 bg-primary/5 mb-3 rounded-lg border p-3">
-            <div className="text-xs font-semibold">선택된 테이블</div>
-            <div className="mt-1.5 flex items-center gap-2">
-              <Database className="text-primary h-3 w-3" />
-              <span className="font-mono text-xs font-medium">{selectedTableName}</span>
-            </div>
-          </div>
-        )}
-
-        {/* 검색 */}
-        <div className="relative">
-          <Search className="text-muted-foreground absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
-          <input
-            type="text"
-            placeholder="테이블명, 컬럼명 검색..."
-            value={searchTerm}
-            onChange={(e) => onSearchChange(e.target.value)}
-            className="border-input bg-background focus-visible:ring-ring h-8 w-full rounded-md border px-3 pl-8 text-xs focus-visible:ring-1 focus-visible:outline-none"
-          />
-        </div>
-
-        <div className="text-muted-foreground mt-2 text-xs">총 {filteredTables.length}개</div>
-      </div>
-
-      {/* 테이블 목록 */}
-      <div className="flex-1 overflow-y-auto">
-        <div className="space-y-1.5 p-3">
-          {filteredTables.map((table) => {
-            const isExpanded = expandedTables.has(table.tableName);
-
-            return (
-              <div key={table.tableName} className="bg-card rounded-lg border">
-                {/* 테이블 헤더 */}
-                <div
-                  className="hover:bg-accent/50 flex cursor-pointer items-center justify-between p-2.5 transition-colors"
-                  onClick={() => toggleTable(table.tableName)}
-                >
-                  <div className="flex flex-1 items-center gap-2">
-                    {isExpanded ? (
-                      <ChevronDown className="text-muted-foreground h-3.5 w-3.5" />
-                    ) : (
-                      <ChevronRight className="text-muted-foreground h-3.5 w-3.5" />
-                    )}
-                    <Database className="text-primary h-3.5 w-3.5" />
-                    <div className="min-w-0 flex-1">
-                      <div className="truncate text-xs font-semibold">{table.tableLabel || table.tableName}</div>
-                      <div className="text-muted-foreground text-xs">{table.columns.length}개</div>
-                    </div>
-                  </div>
-
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    draggable
-                    onDragStart={(e) => onDragStart(e, table)}
-                    className="h-6 px-2 text-xs"
-                  >
-                    드래그
-                  </Button>
+      {/* 테이블과 컬럼 평면 목록 */}
+      <div className="flex-1 overflow-y-auto p-3">
+        <div className="space-y-2">
+          {filteredTables.map((table) => (
+            <div key={table.tableName} className="space-y-1">
+              {/* 테이블 헤더 */}
+              <div className="bg-muted/50 flex items-center justify-between rounded-md p-2">
+                <div className="flex items-center gap-2">
+                  <Database className="text-primary h-3.5 w-3.5" />
+                  <span className="text-xs font-semibold">{table.tableLabel || table.tableName}</span>
+                  <Badge variant="secondary" className="h-4 px-1.5 text-[10px]">
+                    {table.columns.length}개
+                  </Badge>
                 </div>
+              </div>
 
-                {/* 컬럼 목록 */}
-                {isExpanded && (
-                  <div className="bg-muted/30 border-t">
-                    <div className={`${table.columns.length > 8 ? "max-h-64 overflow-y-auto" : ""}`}>
-                      {table.columns.map((column, index) => (
-                        <div
-                          key={column.columnName}
-                          className={`hover:bg-accent/50 flex cursor-grab items-center justify-between p-2 transition-colors ${
-                            index < table.columns.length - 1 ? "border-border/50 border-b" : ""
-                          }`}
-                          draggable
-                          onDragStart={(e) => onDragStart(e, table, column)}
-                        >
-                          <div className="flex min-w-0 flex-1 items-center gap-2">
-                            {getWidgetIcon(column.widgetType)}
-                            <div className="min-w-0 flex-1">
-                              <div className="truncate text-xs font-semibold">
-                                {column.columnLabel || column.columnName}
-                              </div>
-                              <div className="text-muted-foreground truncate text-xs">{column.dataType}</div>
-                            </div>
-                          </div>
+              {/* 컬럼 목록 (항상 표시) */}
+              <div className="space-y-1 pl-2">
+                {table.columns.map((column) => (
+                  <div
+                    key={column.columnName}
+                    className="hover:bg-accent/50 flex cursor-grab items-center justify-between rounded-md p-2 transition-colors"
+                    draggable
+                    onDragStart={(e) => onDragStart(e, table, column)}
+                  >
+                    <div className="flex min-w-0 flex-1 items-center gap-2">
+                      {getWidgetIcon(column.widgetType)}
+                      <div className="min-w-0 flex-1">
+                        <div className="truncate text-xs font-medium">{column.columnLabel || column.columnName}</div>
+                        <div className="text-muted-foreground truncate text-[10px]">{column.dataType}</div>
+                      </div>
+                    </div>
 
-                          <div className="flex flex-shrink-0 items-center gap-1">
-                            <Badge variant="secondary" className="h-4 px-1.5 text-xs">
-                              {column.widgetType}
-                            </Badge>
-                            {column.required && (
-                              <Badge variant="destructive" className="h-4 px-1.5 text-xs">
-                                필수
-                              </Badge>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-
-                      {/* 컬럼 수가 많을 때 안내 메시지 */}
-                      {table.columns.length > 8 && (
-                        <div className="bg-muted sticky bottom-0 p-2 text-center">
-                          <div className="text-muted-foreground text-xs">
-                            📜 총 {table.columns.length}개 컬럼 (스크롤하여 더 보기)
-                          </div>
-                        </div>
+                    <div className="flex flex-shrink-0 items-center gap-1">
+                      <Badge variant="secondary" className="h-4 px-1.5 text-[10px]">
+                        {column.widgetType}
+                      </Badge>
+                      {column.required && (
+                        <Badge variant="destructive" className="h-4 px-1 text-[10px]">
+                          필수
+                        </Badge>
                       )}
                     </div>
                   </div>
-                )}
+                ))}
               </div>
-            );
-          })}
+            </div>
+          ))}
         </div>
       </div>
-
-      {/* 푸터 */}
-      <div className="border-t border-gray-200 bg-gray-50 p-3">
-        <div className="text-muted-foreground text-xs">💡 테이블이나 컬럼을 캔버스로 드래그하세요</div>
-      </div>
     </div>
   );
 };
diff --git a/frontend/components/screen/panels/TemplatesPanel.tsx b/frontend/components/screen/panels/TemplatesPanel.tsx
index 76e78337..d4d4bae9 100644
--- a/frontend/components/screen/panels/TemplatesPanel.tsx
+++ b/frontend/components/screen/panels/TemplatesPanel.tsx
@@ -528,7 +528,7 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
         <div className="flex items-center justify-between rounded-xl bg-amber-50/80 border border-amber-200/60 p-3 text-amber-800 mb-4">
           <div className="flex items-center space-x-2">
             <Info className="h-4 w-4" />
-            <span className="text-sm">템플릿 로딩 실패, 기본 템플릿 사용 중</span>
+            <span className="text-xs" style={{ fontSize: "12px" }}>템플릿 로딩 실패, 기본 템플릿 사용 중</span>
           </div>
           <Button size="sm" variant="outline" onClick={() => refetch()} className="border-amber-300 text-amber-700 hover:bg-amber-100">
             <RefreshCw className="h-4 w-4" />
diff --git a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
index bb6ccf66..edc034d7 100644
--- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
+++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
@@ -201,29 +201,22 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
     const area = selectedComponent as AreaComponent;
 
     return (
-      <div className="space-y-1.5">
-        {/* 컴포넌트 정보 - 간소화 */}
-        <div className="bg-muted flex items-center justify-between rounded px-2 py-1">
-          <div className="flex items-center gap-1">
-            <Info className="text-muted-foreground h-2.5 w-2.5" />
-            <span className="text-foreground text-[10px] font-medium">{selectedComponent.type}</span>
-          </div>
-          <span className="text-muted-foreground text-[9px]">{selectedComponent.id.slice(0, 8)}</span>
-        </div>
-
+      <div className="space-y-2">
         {/* 라벨 + 최소 높이 (같은 행) */}
-        <div className="grid grid-cols-2 gap-1.5">
-          <div className="space-y-0.5">
-            <Label className="text-[10px]">라벨</Label>
+        <div className="grid grid-cols-2 gap-2">
+          <div className="space-y-1">
+            <Label className="text-xs">라벨</Label>
             <Input
               value={widget.label || ""}
               onChange={(e) => handleUpdate("label", e.target.value)}
               placeholder="라벨"
-              className="h-6 text-[10px]"
+              className="h-6 w-full px-2 py-0 text-xs"
+              style={{ fontSize: "12px" }}
+              style={{ fontSize: "12px" }}
             />
           </div>
-          <div className="space-y-0.5">
-            <Label className="text-[10px]">높이</Label>
+          <div className="space-y-1">
+            <Label className="text-xs">높이</Label>
             <Input
               type="number"
               value={selectedComponent.size?.height || 0}
@@ -234,136 +227,152 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
               }}
               step={40}
               placeholder="40"
-              className="h-6 text-[10px]"
+              className="h-6 w-full px-2 py-0 text-xs"
+              style={{ fontSize: "12px" }}
+              style={{ fontSize: "12px" }}
             />
           </div>
         </div>
 
         {/* Placeholder (widget만) */}
         {selectedComponent.type === "widget" && (
-          <div className="space-y-0.5">
-            <Label className="text-[10px]">Placeholder</Label>
+          <div className="space-y-1">
+            <Label className="text-xs">Placeholder</Label>
             <Input
               value={widget.placeholder || ""}
               onChange={(e) => handleUpdate("placeholder", e.target.value)}
               placeholder="입력 안내 텍스트"
-              className="h-6 text-[10px]"
+              className="h-6 w-full px-2 py-0 text-xs"
+              style={{ fontSize: "12px" }}
+              style={{ fontSize: "12px" }}
             />
           </div>
         )}
 
         {/* Title (group/area) */}
         {(selectedComponent.type === "group" || selectedComponent.type === "area") && (
-          <div className="space-y-0.5">
-            <Label className="text-[10px]">제목</Label>
+          <div className="space-y-1">
+            <Label className="text-xs">제목</Label>
             <Input
               value={group.title || area.title || ""}
               onChange={(e) => handleUpdate("title", e.target.value)}
               placeholder="제목"
-              className="h-6 text-[10px]"
+              className="h-6 w-full px-2 py-0 text-xs"
+              style={{ fontSize: "12px" }}
+              style={{ fontSize: "12px" }}
             />
           </div>
         )}
 
         {/* Description (area만) */}
         {selectedComponent.type === "area" && (
-          <div className="space-y-0.5">
-            <Label className="text-[10px]">설명</Label>
+          <div className="space-y-1">
+            <Label className="text-xs">설명</Label>
             <Input
               value={area.description || ""}
               onChange={(e) => handleUpdate("description", e.target.value)}
               placeholder="설명"
-              className="h-6 text-[10px]"
+              className="h-6 w-full px-2 py-0 text-xs"
+              style={{ fontSize: "12px" }}
+              style={{ fontSize: "12px" }}
             />
           </div>
         )}
 
-        {/* Grid Columns */}
-        {(selectedComponent as any).gridColumns !== undefined && (
-          <div className="space-y-0.5">
-            <Label className="text-[10px]">Grid Columns</Label>
-            <Select
-              value={((selectedComponent as any).gridColumns || 12).toString()}
-              onValueChange={(value) => handleUpdate("gridColumns", parseInt(value))}
-            >
-              <SelectTrigger className="h-6 text-[10px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {COLUMN_NUMBERS.map((span) => (
-                  <SelectItem key={span} value={span.toString()}>
-                    {span} 컬럼 ({Math.round((span / 12) * 100)}%)
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        )}
-
-        {/* 위치 */}
-        <div className="grid grid-cols-3 gap-2">
-          <div>
-            <Label>X {dragState?.isDragging && <Badge variant="secondary">드래그중</Badge>}</Label>
-            <Input type="number" value={Math.round(currentPosition.x || 0)} disabled />
-          </div>
-          <div>
-            <Label>Y</Label>
-            <Input type="number" value={Math.round(currentPosition.y || 0)} disabled />
-          </div>
-          <div>
-            <Label>Z</Label>
+        {/* Grid Columns + Z-Index (같은 행) */}
+        <div className="grid grid-cols-2 gap-2">
+          {(selectedComponent as any).gridColumns !== undefined && (
+            <div className="space-y-1">
+              <Label className="text-xs">Grid</Label>
+              <Select
+                value={((selectedComponent as any).gridColumns || 12).toString()}
+                onValueChange={(value) => handleUpdate("gridColumns", parseInt(value))}
+              >
+                <SelectTrigger className="h-6 w-full px-2 py-0" style={{ fontSize: "12px" }}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {COLUMN_NUMBERS.map((span) => (
+                    <SelectItem key={span} value={span.toString()} style={{ fontSize: "12px" }}>
+                      {span}열
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+          <div className="space-y-1">
+            <Label className="text-xs">Z-Index</Label>
             <Input
               type="number"
               value={currentPosition.z || 1}
               onChange={(e) => handleUpdate("position.z", parseInt(e.target.value) || 1)}
+              className="h-6 w-full px-2 py-0 text-xs"
+              style={{ fontSize: "12px" }}
+              style={{ fontSize: "12px" }}
             />
           </div>
         </div>
 
         {/* 라벨 스타일 */}
         <Collapsible>
-          <CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg bg-slate-50 p-2 text-sm font-medium hover:bg-slate-100">
+          <CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg bg-slate-50 p-2 text-xs font-medium hover:bg-slate-100">
             라벨 스타일
-            <ChevronDown className="h-4 w-4" />
+            <ChevronDown className="h-3.5 w-3.5" />
           </CollapsibleTrigger>
           <CollapsibleContent className="mt-2 space-y-2">
-            <div>
-              <Label>라벨 텍스트</Label>
+            <div className="space-y-1">
+              <Label className="text-xs">라벨 텍스트</Label>
               <Input
                 value={selectedComponent.style?.labelText || selectedComponent.label || ""}
                 onChange={(e) => handleUpdate("style.labelText", e.target.value)}
+                className="h-6 w-full px-2 py-0 text-xs"
+                style={{ fontSize: "12px" }}
+                style={{ fontSize: "12px" }}
               />
             </div>
             <div className="grid grid-cols-2 gap-2">
-              <div>
-                <Label>폰트 크기</Label>
+              <div className="space-y-1">
+                <Label className="text-xs">크기</Label>
                 <Input
                   value={selectedComponent.style?.labelFontSize || "12px"}
                   onChange={(e) => handleUpdate("style.labelFontSize", e.target.value)}
+                  className="h-6 w-full px-2 py-0 text-xs"
+                  style={{ fontSize: "12px" }}
+                  style={{ fontSize: "12px" }}
                 />
               </div>
-              <div>
-                <Label>색상</Label>
+              <div className="space-y-1">
+                <Label className="text-xs">색상</Label>
                 <Input
                   type="color"
                   value={selectedComponent.style?.labelColor || "#212121"}
                   onChange={(e) => handleUpdate("style.labelColor", e.target.value)}
+                  className="h-6 w-full px-2 py-0 text-xs"
+                  style={{ fontSize: "12px" }}
+                  style={{ fontSize: "12px" }}
                 />
               </div>
             </div>
-            <div>
-              <Label>하단 여백</Label>
-              <Input
-                value={selectedComponent.style?.labelMarginBottom || "4px"}
-                onChange={(e) => handleUpdate("style.labelMarginBottom", e.target.value)}
-              />
-            </div>
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                checked={selectedComponent.style?.labelDisplay !== false}
-                onCheckedChange={(checked) => handleUpdate("style.labelDisplay", checked)}
-              />
-              <Label>라벨 표시</Label>
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1">
+                <Label className="text-xs">여백</Label>
+                <Input
+                  value={selectedComponent.style?.labelMarginBottom || "4px"}
+                  onChange={(e) => handleUpdate("style.labelMarginBottom", e.target.value)}
+                  className="h-6 w-full px-2 py-0 text-xs"
+                  style={{ fontSize: "12px" }}
+                  style={{ fontSize: "12px" }}
+                />
+              </div>
+              <div className="flex items-center space-x-2 pt-5">
+                <Checkbox
+                  checked={selectedComponent.style?.labelDisplay !== false}
+                  onCheckedChange={(checked) => handleUpdate("style.labelDisplay", checked)}
+                  className="h-4 w-4"
+                />
+                <Label className="text-xs">표시</Label>
+              </div>
             </div>
           </CollapsibleContent>
         </Collapsible>
@@ -375,8 +384,9 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
               <Checkbox
                 checked={widget.required === true || selectedComponent.componentConfig?.required === true}
                 onCheckedChange={(checked) => handleUpdate("componentConfig.required", checked)}
+                className="h-4 w-4"
               />
-              <Label>필수 입력</Label>
+              <Label className="text-xs">필수</Label>
             </div>
           )}
           {widget.readonly !== undefined && (
@@ -384,38 +394,12 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
               <Checkbox
                 checked={widget.readonly === true || selectedComponent.componentConfig?.readonly === true}
                 onCheckedChange={(checked) => handleUpdate("componentConfig.readonly", checked)}
+                className="h-4 w-4"
               />
-              <Label>읽기 전용</Label>
+              <Label className="text-xs">읽기전용</Label>
             </div>
           )}
         </div>
-
-        {/* 액션 버튼 */}
-        <Separator />
-        <div className="flex gap-2">
-          {onCopyComponent && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => onCopyComponent(selectedComponent.id)}
-              className="flex-1"
-            >
-              <Copy className="mr-2 h-4 w-4" />
-              복사
-            </Button>
-          )}
-          {onDeleteComponent && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => onDeleteComponent(selectedComponent.id)}
-              className="flex-1 text-red-600 hover:bg-red-50 hover:text-red-700"
-            >
-              <Trash2 className="mr-2 h-4 w-4" />
-              삭제
-            </Button>
-          )}
-        </div>
       </div>
     );
   };
@@ -513,7 +497,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
             <div>
               <Label>세부 타입</Label>
               <Select value={localComponentDetailType || webType} onValueChange={handleDetailTypeChange}>
-                <SelectTrigger>
+                <SelectTrigger className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
                   <SelectValue placeholder="세부 타입 선택" />
                 </SelectTrigger>
                 <SelectContent>
@@ -561,7 +545,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
             <div>
               <Label>입력 타입</Label>
               <Select value={widget.webType} onValueChange={(value) => handleUpdate("webType", value)}>
-                <SelectTrigger>
+                <SelectTrigger className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
diff --git a/frontend/components/screen/panels/WebTypeConfigPanel.tsx b/frontend/components/screen/panels/WebTypeConfigPanel.tsx
index 9227c269..8c44fb48 100644
--- a/frontend/components/screen/panels/WebTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/WebTypeConfigPanel.tsx
@@ -109,7 +109,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
           <>
             <Separator />
             <div className="flex items-center justify-between">
-              <Label htmlFor="multiple" className="text-sm">
+              <Label htmlFor="multiple" className="text-xs" style={{ fontSize: "12px" }}>
                 다중 선택
               </Label>
               <Checkbox
@@ -121,7 +121,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
               />
             </div>
             <div className="flex items-center justify-between">
-              <Label htmlFor="searchable" className="text-sm">
+              <Label htmlFor="searchable" className="text-xs" style={{ fontSize: "12px" }}>
                 검색 가능
               </Label>
               <Checkbox
@@ -259,7 +259,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
 
         {baseType === "date" && (
           <div className="flex items-center justify-between">
-            <Label htmlFor="showTime" className="text-sm">
+            <Label htmlFor="showTime" className="text-xs" style={{ fontSize: "12px" }}>
               시간 입력 포함
             </Label>
             <Checkbox
@@ -395,7 +395,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
         </div>
 
         <div className="flex items-center justify-between">
-          <Label htmlFor="fileMultiple" className="text-sm">
+          <Label htmlFor="fileMultiple" className="text-xs" style={{ fontSize: "12px" }}>
             다중 파일 선택
           </Label>
           <Checkbox
diff --git a/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
index abc400bb..30338460 100644
--- a/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
@@ -90,11 +90,11 @@ export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = (
 
     const newConfig = JSON.parse(JSON.stringify(currentValues));
     // console.log("☑️ CheckboxTypeConfig 업데이트:", {
-      // key,
-      // value,
-      // oldConfig: safeConfig,
-      // newConfig,
-      // localValues,
+    // key,
+    // value,
+    // oldConfig: safeConfig,
+    // newConfig,
+    // localValues,
     // });
 
     setTimeout(() => {
@@ -122,7 +122,7 @@ export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = (
           라벨 위치
         </Label>
         <Select value={localValues.labelPosition} onValueChange={(value) => updateConfig("labelPosition", value)}>
-          <SelectTrigger className="mt-1">
+          <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
             <SelectValue placeholder="라벨 위치 선택" />
           </SelectTrigger>
           <SelectContent>
@@ -194,18 +194,18 @@ export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = (
         <Label className="text-sm font-medium text-gray-700">미리보기</Label>
         <div className="mt-2 flex items-center space-x-2">
           {localValues.labelPosition === "left" && localValues.checkboxText && (
-            <span className="text-sm">{localValues.checkboxText}</span>
+            <span className="text-xs" style={{ fontSize: "12px" }}>{localValues.checkboxText}</span>
           )}
           {localValues.labelPosition === "top" && localValues.checkboxText && (
             <div className="w-full">
-              <div className="text-sm">{localValues.checkboxText}</div>
+              <div className="text-xs" style={{ fontSize: "12px" }}>{localValues.checkboxText}</div>
               <Checkbox checked={localValues.defaultChecked} className="mt-1" />
             </div>
           )}
           {(localValues.labelPosition === "right" || localValues.labelPosition === "bottom") && (
             <>
               <Checkbox checked={localValues.defaultChecked} />
-              {localValues.checkboxText && <span className="text-sm">{localValues.checkboxText}</span>}
+              {localValues.checkboxText && <span className="text-xs" style={{ fontSize: "12px" }}>{localValues.checkboxText}</span>}
             </>
           )}
           {localValues.labelPosition === "left" && <Checkbox checked={localValues.defaultChecked} />}
@@ -218,7 +218,7 @@ export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = (
 
       {/* 안내 메시지 */}
       {localValues.indeterminate && (
-        <div className="rounded-md bg-accent p-3">
+        <div className="bg-accent rounded-md p-3">
           <div className="text-sm font-medium text-blue-900">불확정 상태</div>
           <div className="mt-1 text-xs text-blue-800">
             체크박스가 부분적으로 선택된 상태를 나타낼 수 있습니다. 주로 트리 구조에서 일부 하위 항목만 선택된 경우에
diff --git a/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
index 2f735751..0ab6ac74 100644
--- a/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
@@ -105,10 +105,10 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
     // 실제 config 업데이트
     const newConfig = { ...safeConfig, [key]: value };
     // console.log("💻 CodeTypeConfig 업데이트:", {
-      // key,
-      // value,
-      // oldConfig: safeConfig,
-      // newConfig,
+    // key,
+    // value,
+    // oldConfig: safeConfig,
+    // newConfig,
     // });
     onConfigChange(newConfig);
   };
@@ -121,7 +121,7 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
           프로그래밍 언어
         </Label>
         <Select value={localValues.language} onValueChange={(value) => updateConfig("language", value)}>
-          <SelectTrigger className="mt-1">
+          <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
             <SelectValue placeholder="언어 선택" />
           </SelectTrigger>
           <SelectContent className="max-h-60">
@@ -140,7 +140,7 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
           테마
         </Label>
         <Select value={localValues.theme} onValueChange={(value) => updateConfig("theme", value)}>
-          <SelectTrigger className="mt-1">
+          <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
             <SelectValue placeholder="테마 선택" />
           </SelectTrigger>
           <SelectContent>
@@ -271,7 +271,7 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
       </div>
 
       {/* 안내 메시지 */}
-      <div className="rounded-md bg-accent p-3">
+      <div className="bg-accent rounded-md p-3">
         <div className="text-sm font-medium text-blue-900">코드 에디터 설정</div>
         <div className="mt-1 text-xs text-blue-800">
           • 문법 강조 표시는 선택된 언어에 따라 적용됩니다
diff --git a/frontend/components/screen/panels/webtype-configs/DateTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/DateTypeConfigPanel.tsx
index 1e30def2..0ebfc564 100644
--- a/frontend/components/screen/panels/webtype-configs/DateTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/DateTypeConfigPanel.tsx
@@ -27,8 +27,8 @@ export const DateTypeConfigPanel: React.FC<DateTypeConfigPanelProps> = ({ config
   // 로컬 상태로 실시간 입력 관리
   const [localValues, setLocalValues] = useState(() => {
     // console.log("📅 DateTypeConfigPanel 초기 상태 설정:", {
-      // config,
-      // safeConfig,
+    // config,
+    // safeConfig,
     // });
 
     return {
@@ -47,17 +47,17 @@ export const DateTypeConfigPanel: React.FC<DateTypeConfigPanelProps> = ({ config
     const hasValidConfig = config && Object.keys(config).length > 0;
 
     // console.log("📅 DateTypeConfigPanel config 변경 감지:", {
-      // config,
-      // configExists: !!config,
-      // configKeys: config ? Object.keys(config) : [],
-      // hasValidConfig,
-      // safeConfig,
-      // safeConfigKeys: Object.keys(safeConfig),
-      // currentLocalValues: localValues,
-      // configStringified: JSON.stringify(config),
-      // safeConfigStringified: JSON.stringify(safeConfig),
-      // willUpdateLocalValues: hasValidConfig,
-      // timestamp: new Date().toISOString(),
+    // config,
+    // configExists: !!config,
+    // configKeys: config ? Object.keys(config) : [],
+    // hasValidConfig,
+    // safeConfig,
+    // safeConfigKeys: Object.keys(safeConfig),
+    // currentLocalValues: localValues,
+    // configStringified: JSON.stringify(config),
+    // safeConfigStringified: JSON.stringify(safeConfig),
+    // willUpdateLocalValues: hasValidConfig,
+    // timestamp: new Date().toISOString(),
     // });
 
     // config가 없거나 비어있으면 로컬 상태를 유지
@@ -85,17 +85,17 @@ export const DateTypeConfigPanel: React.FC<DateTypeConfigPanelProps> = ({ config
       localValues.maxDate !== newLocalValues.maxDate;
 
     // console.log("🔄 로컬 상태 업데이트 검사:", {
-      // oldLocalValues: localValues,
-      // newLocalValues,
-      // hasChanges,
-      // changes: {
-        // format: localValues.format !== newLocalValues.format,
-        // showTime: localValues.showTime !== newLocalValues.showTime,
-        // defaultValue: localValues.defaultValue !== newLocalValues.defaultValue,
-        // placeholder: localValues.placeholder !== newLocalValues.placeholder,
-        // minDate: localValues.minDate !== newLocalValues.minDate,
-        // maxDate: localValues.maxDate !== newLocalValues.maxDate,
-      // },
+    // oldLocalValues: localValues,
+    // newLocalValues,
+    // hasChanges,
+    // changes: {
+    // format: localValues.format !== newLocalValues.format,
+    // showTime: localValues.showTime !== newLocalValues.showTime,
+    // defaultValue: localValues.defaultValue !== newLocalValues.defaultValue,
+    // placeholder: localValues.placeholder !== newLocalValues.placeholder,
+    // minDate: localValues.minDate !== newLocalValues.minDate,
+    // maxDate: localValues.maxDate !== newLocalValues.maxDate,
+    // },
     // });
 
     if (hasChanges) {
@@ -113,34 +113,34 @@ export const DateTypeConfigPanel: React.FC<DateTypeConfigPanelProps> = ({ config
     // 실제 config 업데이트 - 현재 로컬 상태를 기반으로 새 객체 생성 (safeConfig 기본값 덮어쓰기 방지)
     const newConfig = JSON.parse(JSON.stringify({ ...localValues, [key]: value }));
     // console.log("📅 DateTypeConfig 업데이트:", {
-      // key,
-      // value,
-      // oldConfig: safeConfig,
-      // newConfig,
-      // localValues,
-      // timestamp: new Date().toISOString(),
-      // changes: {
-        // format: newConfig.format !== safeConfig.format,
-        // showTime: newConfig.showTime !== safeConfig.showTime,
-        // placeholder: newConfig.placeholder !== safeConfig.placeholder,
-        // minDate: newConfig.minDate !== safeConfig.minDate,
-        // maxDate: newConfig.maxDate !== safeConfig.maxDate,
-        // defaultValue: newConfig.defaultValue !== safeConfig.defaultValue,
-      // },
-      // willCallOnConfigChange: true,
+    // key,
+    // value,
+    // oldConfig: safeConfig,
+    // newConfig,
+    // localValues,
+    // timestamp: new Date().toISOString(),
+    // changes: {
+    // format: newConfig.format !== safeConfig.format,
+    // showTime: newConfig.showTime !== safeConfig.showTime,
+    // placeholder: newConfig.placeholder !== safeConfig.placeholder,
+    // minDate: newConfig.minDate !== safeConfig.minDate,
+    // maxDate: newConfig.maxDate !== safeConfig.maxDate,
+    // defaultValue: newConfig.defaultValue !== safeConfig.defaultValue,
+    // },
+    // willCallOnConfigChange: true,
     // });
 
     // console.log("🔄 onConfigChange 호출 직전:", {
-      // newConfig,
-      // configStringified: JSON.stringify(newConfig),
+    // newConfig,
+    // configStringified: JSON.stringify(newConfig),
     // });
 
     // 약간의 지연을 두고 업데이트 (배치 업데이트 방지)
     setTimeout(() => {
       // console.log("✅ onConfigChange 호출 완료:", {
-        // key,
-        // newConfig,
-        // timestamp: new Date().toISOString(),
+      // key,
+      // newConfig,
+      // timestamp: new Date().toISOString(),
       // });
       onConfigChange(newConfig);
     }, 0);
@@ -157,9 +157,9 @@ export const DateTypeConfigPanel: React.FC<DateTypeConfigPanelProps> = ({ config
           value={localValues.format}
           onValueChange={(value) => {
             // console.log("📅 날짜 형식 변경:", {
-              // oldFormat: localValues.format,
-              // newFormat: value,
-              // oldShowTime: localValues.showTime,
+            // oldFormat: localValues.format,
+            // newFormat: value,
+            // oldShowTime: localValues.showTime,
             // });
 
             // format 변경 시 showTime도 자동 동기화
@@ -175,9 +175,9 @@ export const DateTypeConfigPanel: React.FC<DateTypeConfigPanelProps> = ({ config
             );
 
             // console.log("🔄 format+showTime 동시 업데이트:", {
-              // newFormat: value,
-              // newShowTime: hasTime,
-              // newConfig,
+            // newFormat: value,
+            // newShowTime: hasTime,
+            // newConfig,
             // });
 
             // 로컬 상태도 동시 업데이트
@@ -193,7 +193,7 @@ export const DateTypeConfigPanel: React.FC<DateTypeConfigPanelProps> = ({ config
             }, 0);
           }}
         >
-          <SelectTrigger className="mt-1">
+          <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
             <SelectValue placeholder="날짜 형식 선택" />
           </SelectTrigger>
           <SelectContent>
@@ -215,9 +215,9 @@ export const DateTypeConfigPanel: React.FC<DateTypeConfigPanelProps> = ({ config
           onCheckedChange={(checked) => {
             const newShowTime = !!checked;
             // console.log("⏰ 시간 표시 체크박스 변경:", {
-              // oldShowTime: localValues.showTime,
-              // newShowTime,
-              // currentFormat: localValues.format,
+            // oldShowTime: localValues.showTime,
+            // newShowTime,
+            // currentFormat: localValues.format,
             // });
 
             // showTime 변경 시 format도 적절히 조정
@@ -231,9 +231,9 @@ export const DateTypeConfigPanel: React.FC<DateTypeConfigPanelProps> = ({ config
             }
 
             // console.log("🔄 showTime+format 동시 업데이트:", {
-              // newShowTime,
-              // oldFormat: localValues.format,
-              // newFormat,
+            // newShowTime,
+            // oldFormat: localValues.format,
+            // newFormat,
             // });
 
             // 한 번에 두 값을 모두 업데이트 - 현재 로컬 상태 기반으로 생성
diff --git a/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
index 656f482d..2677896d 100644
--- a/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
@@ -92,10 +92,10 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
     // 실제 config 업데이트
     const newConfig = { ...safeConfig, [key]: value };
     // console.log("🏢 EntityTypeConfig 업데이트:", {
-      // key,
-      // value,
-      // oldConfig: safeConfig,
-      // newConfig,
+    // key,
+    // value,
+    // oldConfig: safeConfig,
+    // newConfig,
     // });
     onConfigChange(newConfig);
   };
@@ -233,7 +233,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
           표시 형식
         </Label>
         <Select value={localValues.displayFormat} onValueChange={(value) => updateConfig("displayFormat", value)}>
-          <SelectTrigger className="mt-1">
+          <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
             <SelectValue placeholder="형식 선택" />
           </SelectTrigger>
           <SelectContent>
@@ -267,7 +267,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
         {/* 기존 필터 목록 */}
         <div className="max-h-40 space-y-2 overflow-y-auto">
           {Object.entries(safeConfig.filters || {}).map(([field, value]) => (
-            <div key={field} className="flex items-center space-x-2 rounded border p-2 text-sm">
+            <div key={field} className="flex items-center space-x-2 rounded border p-2 text-xs" style={{ fontSize: "12px" }}>
               <Input
                 value={field}
                 onChange={(e) => updateFilter(field, e.target.value, value as string)}
@@ -317,7 +317,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
         <div className="mt-2">
           <div className="flex items-center space-x-2 rounded border bg-white p-2">
             <Search className="h-4 w-4 text-gray-400" />
-            <div className="flex-1 text-sm text-muted-foreground">
+            <div className="text-muted-foreground flex-1 text-xs" style={{ fontSize: "12px" }}>
               {localValues.placeholder || `${localValues.referenceTable || "엔터티"}를 선택하세요`}
             </div>
             <Database className="h-4 w-4 text-gray-400" />
@@ -334,7 +334,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
       </div>
 
       {/* 안내 메시지 */}
-      <div className="rounded-md bg-accent p-3">
+      <div className="bg-accent rounded-md p-3">
         <div className="text-sm font-medium text-blue-900">엔터티 타입 설정 가이드</div>
         <div className="mt-1 text-xs text-blue-800">
           • <strong>참조 테이블</strong>: 데이터를 가져올 다른 테이블 이름
diff --git a/frontend/components/screen/panels/webtype-configs/NumberTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/NumberTypeConfigPanel.tsx
index 5ad60139..aaa66688 100644
--- a/frontend/components/screen/panels/webtype-configs/NumberTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/NumberTypeConfigPanel.tsx
@@ -89,12 +89,12 @@ export const NumberTypeConfigPanel: React.FC<NumberTypeConfigPanelProps> = ({ co
 
     const newConfig = JSON.parse(JSON.stringify(currentValues));
     // console.log("🔢 NumberTypeConfig 업데이트:", {
-      // key,
-      // value,
-      // oldConfig: safeConfig,
-      // newConfig,
-      // localValues,
-      // timestamp: new Date().toISOString(),
+    // key,
+    // value,
+    // oldConfig: safeConfig,
+    // newConfig,
+    // localValues,
+    // timestamp: new Date().toISOString(),
     // });
 
     // 약간의 지연을 두고 업데이트 (배치 업데이트 방지)
@@ -111,7 +111,7 @@ export const NumberTypeConfigPanel: React.FC<NumberTypeConfigPanelProps> = ({ co
           숫자 형식
         </Label>
         <Select value={localValues.format} onValueChange={(value) => updateConfig("format", value)}>
-          <SelectTrigger className="mt-1">
+          <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
             <SelectValue placeholder="숫자 형식 선택" />
           </SelectTrigger>
           <SelectContent>
diff --git a/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
index 7a2fee5a..197be175 100644
--- a/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
@@ -259,7 +259,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
               {(safeConfig.options || []).map((option) => (
                 <div key={option.value} className="flex items-center space-x-2">
                   <RadioGroupItem value={option.value} id={`preview-${option.value}`} />
-                  <Label htmlFor={`preview-${option.value}`} className="text-sm">
+                  <Label htmlFor={`preview-${option.value}`} className="text-xs" style={{ fontSize: "12px" }}>
                     {option.label}
                   </Label>
                 </div>
diff --git a/frontend/components/screen/panels/webtype-configs/SelectTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/SelectTypeConfigPanel.tsx
index a1ef00c5..3ceb2731 100644
--- a/frontend/components/screen/panels/webtype-configs/SelectTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/SelectTypeConfigPanel.tsx
@@ -82,11 +82,11 @@ export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ co
     // 실제 config 업데이트 - 깊은 복사로 새 객체 보장
     const newConfig = JSON.parse(JSON.stringify({ ...safeConfig, [key]: value }));
     // console.log("📋 SelectTypeConfig 업데이트:", {
-      // key,
-      // value,
-      // oldConfig: safeConfig,
-      // newConfig,
-      // timestamp: new Date().toISOString(),
+    // key,
+    // value,
+    // oldConfig: safeConfig,
+    // newConfig,
+    // timestamp: new Date().toISOString(),
     // });
 
     // 약간의 지연을 두고 업데이트 (배치 업데이트 방지)
@@ -101,10 +101,10 @@ export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ co
       const updatedOptions = [...(safeConfig.options || []), newOptionData];
 
       // console.log("➕ SelectType 옵션 추가:", {
-        // newOption: newOptionData,
-        // updatedOptions,
-        // currentLocalOptions: localOptions,
-        // timestamp: new Date().toISOString(),
+      // newOption: newOptionData,
+      // updatedOptions,
+      // currentLocalOptions: localOptions,
+      // timestamp: new Date().toISOString(),
       // });
 
       // 로컬 상태 즉시 업데이트
@@ -128,9 +128,9 @@ export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ co
 
   const removeOption = (index: number) => {
     // console.log("➖ SelectType 옵션 삭제:", {
-      // removeIndex: index,
-      // currentOptions: safeConfig.options,
-      // currentLocalOptions: localOptions,
+    // removeIndex: index,
+    // currentOptions: safeConfig.options,
+    // currentLocalOptions: localOptions,
     // });
 
     // 로컬 상태 즉시 업데이트
@@ -170,7 +170,7 @@ export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ co
             value={localValues.placeholder}
             onChange={(e) => updateConfig("placeholder", e.target.value)}
             placeholder="옵션을 선택하세요"
-            className="mt-1"
+            className="mt-1 h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }} style={{ fontSize: "12px" }}
           />
         </div>
 
@@ -254,7 +254,7 @@ export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ co
                 onCheckedChange={(checked) => updateOption(index, "disabled", !!checked)}
                 title="비활성화"
               />
-              <Button size="sm" variant="ghost" onClick={() => removeOption(index)} className="h-8 w-8 p-1">
+              <Button size="sm" variant="ghost" onClick={() => removeOption(index)} className="h-6 w-8 p-1">
                 <X className="h-4 w-4" />
               </Button>
             </div>
@@ -279,7 +279,7 @@ export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ co
             size="sm"
             onClick={addOption}
             disabled={!newOption.label.trim() || !newOption.value.trim()}
-            className="h-8 w-8 p-1"
+            className="h-6 w-8 p-1"
           >
             <Plus className="h-4 w-4" />
           </Button>
diff --git a/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
index e4f7dc8d..a8eee28d 100644
--- a/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
@@ -94,11 +94,11 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({ config
 
     const newConfig = JSON.parse(JSON.stringify(currentValues));
     // console.log("📝 TextTypeConfig 업데이트:", {
-      // key,
-      // value,
-      // oldConfig: safeConfig,
-      // newConfig,
-      // localValues,
+    // key,
+    // value,
+    // oldConfig: safeConfig,
+    // newConfig,
+    // localValues,
     // });
 
     setTimeout(() => {
@@ -114,7 +114,7 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({ config
           입력 형식
         </Label>
         <Select value={localValues.format} onValueChange={(value) => updateConfig("format", value)}>
-          <SelectTrigger className="mt-1">
+          <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
             <SelectValue placeholder="입력 형식 선택" />
           </SelectTrigger>
           <SelectContent>
@@ -220,13 +220,13 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({ config
         </div>
 
         {localValues.autoInput && (
-          <div className="space-y-3 border-l-2 border-primary/20 pl-4">
+          <div className="border-primary/20 space-y-3 border-l-2 pl-4">
             <div>
               <Label htmlFor="autoValueType" className="text-sm font-medium">
                 자동값 타입
               </Label>
               <Select value={localValues.autoValueType} onValueChange={(value) => updateConfig("autoValueType", value)}>
-                <SelectTrigger className="mt-1">
+                <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
                   <SelectValue placeholder="자동값 타입 선택" />
                 </SelectTrigger>
                 <SelectContent>
@@ -256,7 +256,7 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({ config
               </div>
             )}
 
-            <div className="rounded-md bg-accent p-3">
+            <div className="bg-accent rounded-md p-3">
               <div className="text-sm font-medium text-blue-900">자동입력 안내</div>
               <div className="mt-1 text-xs text-blue-800">
                 자동입력이 활성화되면 해당 필드는 읽기 전용이 되며, 설정된 타입에 따라 자동으로 값이 입력됩니다.
@@ -280,7 +280,7 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({ config
 
       {/* 형식별 안내 메시지 */}
       {localValues.format !== "none" && (
-        <div className="rounded-md bg-accent p-3">
+        <div className="bg-accent rounded-md p-3">
           <div className="text-sm font-medium text-blue-900">형식 안내</div>
           <div className="mt-1 text-xs text-blue-800">
             {localValues.format === "email" && "유효한 이메일 주소를 입력해야 합니다 (예: user@example.com)"}
diff --git a/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx
index 1b7c89c8..95f3d01c 100644
--- a/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx
@@ -202,7 +202,7 @@ export const TextareaTypeConfigPanel: React.FC<TextareaTypeConfigPanelProps> = (
         <Label className="text-sm font-medium text-gray-700">미리보기</Label>
         <div className="mt-2">
           <textarea
-            className="w-full rounded border border-gray-300 p-2 text-sm"
+            className="w-full rounded border border-gray-300 p-2 text-xs" style={{ fontSize: "12px" }}
             rows={localValues.rows}
             placeholder={localValues.placeholder || "텍스트를 입력하세요..."}
             style={{
diff --git a/frontend/components/screen/toolbar/LeftUnifiedToolbar.tsx b/frontend/components/screen/toolbar/LeftUnifiedToolbar.tsx
index dfd00ee9..3d767ff1 100644
--- a/frontend/components/screen/toolbar/LeftUnifiedToolbar.tsx
+++ b/frontend/components/screen/toolbar/LeftUnifiedToolbar.tsx
@@ -71,26 +71,16 @@ export const LeftUnifiedToolbar: React.FC<LeftUnifiedToolbarProps> = ({ buttons,
   );
 };
 
-// 기본 버튼 설정 (컴포넌트와 편집 2개)
+// 기본 버튼 설정 (통합 패널 1개)
 export const defaultToolbarButtons: ToolbarButton[] = [
-  // 컴포넌트 그룹 (테이블 + 컴포넌트 탭)
+  // 통합 패널 (컴포넌트 + 편집 탭)
   {
-    id: "components",
-    label: "컴포넌트",
+    id: "unified",
+    label: "패널",
     icon: <Layout className="h-5 w-5" />,
-    shortcut: "C",
-    group: "source",
-    panelWidth: 400,
-  },
-
-  // 편집 그룹 (속성 + 스타일 & 해상도 탭)
-  {
-    id: "properties",
-    label: "편집",
-    icon: <Settings className="h-5 w-5" />,
     shortcut: "P",
-    group: "editor",
-    panelWidth: 400,
+    group: "source",
+    panelWidth: 240,
   },
 ];
 
diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index 7b10e071..4f32c502 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+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 } from "lucide-react";
+import { AlertCircle, Loader2, ChevronUp, Filter, X } from "lucide-react";
 import {
   getFlowById,
   getAllStepCounts,
@@ -27,6 +27,17 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination";
 import { useFlowStepStore } from "@/stores/flowStepStore";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 
 interface FlowWidgetProps {
   component: FlowComponent;
@@ -43,6 +54,8 @@ export function FlowWidget({
   flowRefreshKey,
   onFlowRefresh,
 }: FlowWidgetProps) {
+  const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
+
   // 🆕 전역 상태 관리
   const setSelectedStep = useFlowStepStore((state) => state.setSelectedStep);
   const resetFlow = useFlowStepStore((state) => state.resetFlow);
@@ -62,6 +75,13 @@ export function FlowWidget({
   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
   const [columnLabels, setColumnLabels] = useState<Record<string, string>>({}); // 컬럼명 -> 라벨 매핑
 
+  // 🆕 검색 필터 관련 상태
+  const [searchFilterColumns, setSearchFilterColumns] = useState<Set<string>>(new Set()); // 검색 필터로 사용할 컬럼
+  const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false); // 필터 설정 다이얼로그
+  const [searchValues, setSearchValues] = useState<Record<string, string>>({}); // 검색 값
+  const [allAvailableColumns, setAllAvailableColumns] = useState<string[]>([]); // 전체 컬럼 목록
+  const [filteredData, setFilteredData] = useState<any[]>([]); // 필터링된 데이터
+
   /**
    * 🆕 컬럼 표시 결정 함수
    * 1순위: 플로우 스텝 기본 설정 (displayConfig)
@@ -97,6 +117,117 @@ export function FlowWidget({
   // 🆕 플로우 컴포넌트 ID (버튼이 이 플로우를 참조할 때 사용)
   const flowComponentId = component.id;
 
+  // 🆕 localStorage 키 생성
+  const filterSettingKey = useMemo(() => {
+    if (!flowId || selectedStepId === null) return null;
+    return `flowWidget_searchFilters_${flowId}_${selectedStepId}`;
+  }, [flowId, selectedStepId]);
+
+  // 🆕 저장된 필터 설정 불러오기
+  useEffect(() => {
+    if (!filterSettingKey || allAvailableColumns.length === 0) return;
+
+    try {
+      const saved = localStorage.getItem(filterSettingKey);
+      if (saved) {
+        const savedFilters = JSON.parse(saved);
+        setSearchFilterColumns(new Set(savedFilters));
+      } else {
+        // 초기값: 빈 필터 (사용자가 선택해야 함)
+        setSearchFilterColumns(new Set());
+      }
+    } catch (error) {
+      console.error("필터 설정 불러오기 실패:", error);
+      setSearchFilterColumns(new Set());
+    }
+  }, [filterSettingKey, allAvailableColumns]);
+
+  // 🆕 필터 설정 저장
+  const saveFilterSettings = useCallback(() => {
+    if (!filterSettingKey) return;
+
+    try {
+      localStorage.setItem(filterSettingKey, JSON.stringify(Array.from(searchFilterColumns)));
+      setIsFilterSettingOpen(false);
+      toast.success("검색 필터 설정이 저장되었습니다");
+
+      // 검색 값 초기화
+      setSearchValues({});
+    } catch (error) {
+      console.error("필터 설정 저장 실패:", error);
+      toast.error("설정 저장에 실패했습니다");
+    }
+  }, [filterSettingKey, searchFilterColumns]);
+
+  // 🆕 필터 컬럼 토글
+  const toggleFilterColumn = useCallback((columnName: string) => {
+    setSearchFilterColumns((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(columnName)) {
+        newSet.delete(columnName);
+      } else {
+        newSet.add(columnName);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // 🆕 전체 선택/해제
+  const toggleAllFilters = useCallback(() => {
+    if (searchFilterColumns.size === allAvailableColumns.length) {
+      // 전체 해제
+      setSearchFilterColumns(new Set());
+    } else {
+      // 전체 선택
+      setSearchFilterColumns(new Set(allAvailableColumns));
+    }
+  }, [searchFilterColumns, allAvailableColumns]);
+
+  // 🆕 검색 초기화
+  const handleClearSearch = useCallback(() => {
+    setSearchValues({});
+    setFilteredData([]);
+  }, []);
+
+  // 🆕 검색 값이 변경될 때마다 자동 검색 (useEffect로 직접 처리)
+  useEffect(() => {
+    if (!stepData || stepData.length === 0) {
+      setFilteredData([]);
+      return;
+    }
+
+    // 검색 값이 하나라도 있는지 확인
+    const hasSearchValue = Object.values(searchValues).some((val) => val && String(val).trim() !== "");
+
+    if (!hasSearchValue) {
+      // 검색 값이 없으면 필터링 해제
+      setFilteredData([]);
+      return;
+    }
+
+    // 필터링 실행
+    const filtered = stepData.filter((row) => {
+      // 모든 검색 조건을 만족하는지 확인
+      return Object.entries(searchValues).every(([col, searchValue]) => {
+        if (!searchValue || String(searchValue).trim() === "") return true; // 빈 값은 필터링하지 않음
+
+        const cellValue = row[col];
+        if (cellValue === null || cellValue === undefined) return false;
+
+        // 문자열로 변환하여 대소문자 무시 검색
+        return String(cellValue).toLowerCase().includes(String(searchValue).toLowerCase());
+      });
+    });
+
+    setFilteredData(filtered);
+    console.log("🔍 검색 실행:", {
+      totalRows: stepData.length,
+      filteredRows: filtered.length,
+      searchValues,
+      hasSearchValue,
+    });
+  }, [searchValues, stepData]); // stepData와 searchValues가 변경될 때마다 실행
+
   // 선택된 스텝의 데이터를 다시 로드하는 함수
   const refreshStepData = async () => {
     if (!flowId) return;
@@ -149,14 +280,18 @@ export function FlowWidget({
         // 🆕 컬럼 추출 및 우선순위 적용
         if (rows.length > 0) {
           const allColumns = Object.keys(rows[0]);
+          setAllAvailableColumns(allColumns); // 전체 컬럼 목록 저장
           const visibleColumns = getVisibleColumns(selectedStepId, allColumns);
           setStepDataColumns(visibleColumns);
         } else {
+          setAllAvailableColumns([]);
           setStepDataColumns([]);
         }
 
         // 선택 초기화
         setSelectedRows(new Set());
+        setSearchValues({}); // 검색 값도 초기화
+        setFilteredData([]); // 필터링된 데이터 초기화
         onSelectedDataChange?.([], selectedStepId);
       }
     } catch (err: any) {
@@ -180,6 +315,57 @@ export function FlowWidget({
         setLoading(true);
         setError(null);
 
+        // 프리뷰 모드에서는 샘플 데이터만 표시
+        if (isPreviewMode) {
+          console.log("🔒 프리뷰 모드: 플로우 데이터 로드 차단 - 샘플 데이터 표시");
+          setFlowData({
+            id: flowId || 0,
+            flowName: flowName || "샘플 플로우",
+            description: "프리뷰 모드 샘플",
+            isActive: true,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+          } as FlowDefinition);
+
+          const sampleSteps: FlowStep[] = [
+            {
+              id: 1,
+              flowId: flowId || 0,
+              stepName: "시작 단계",
+              stepOrder: 1,
+              stepType: "start",
+              stepConfig: {},
+              createdAt: new Date().toISOString(),
+              updatedAt: new Date().toISOString(),
+            },
+            {
+              id: 2,
+              flowId: flowId || 0,
+              stepName: "진행 중",
+              stepOrder: 2,
+              stepType: "process",
+              stepConfig: {},
+              createdAt: new Date().toISOString(),
+              updatedAt: new Date().toISOString(),
+            },
+            {
+              id: 3,
+              flowId: flowId || 0,
+              stepName: "완료",
+              stepOrder: 3,
+              stepType: "end",
+              stepConfig: {},
+              createdAt: new Date().toISOString(),
+              updatedAt: new Date().toISOString(),
+            },
+          ];
+          setSteps(sampleSteps);
+          setStepCounts({ 1: 5, 2: 3, 3: 2 });
+          setConnections([]);
+          setLoading(false);
+          return;
+        }
+
         // 플로우 정보 조회
         const flowResponse = await getFlowById(flowId!);
         if (!flowResponse.success || !flowResponse.data) {
@@ -242,6 +428,7 @@ export function FlowWidget({
                 setStepData(rows);
                 if (rows.length > 0) {
                   const allColumns = Object.keys(rows[0]);
+                  setAllAvailableColumns(allColumns); // 전체 컬럼 목록 저장
                   // sortedSteps를 직접 전달하여 타이밍 이슈 해결
                   const visibleColumns = getVisibleColumns(firstStep.id, allColumns, sortedSteps);
                   setStepDataColumns(visibleColumns);
@@ -280,6 +467,11 @@ export function FlowWidget({
 
   // 🆕 스텝 클릭 핸들러 (전역 상태 업데이트 추가)
   const handleStepClick = async (stepId: number, stepName: string) => {
+    // 프리뷰 모드에서는 스텝 클릭 차단
+    if (isPreviewMode) {
+      return;
+    }
+
     // 외부 콜백 실행
     if (onStepClick) {
       onStepClick(stepId, stepName);
@@ -335,9 +527,11 @@ export function FlowWidget({
       // 🆕 컬럼 추출 및 우선순위 적용
       if (rows.length > 0) {
         const allColumns = Object.keys(rows[0]);
+        setAllAvailableColumns(allColumns); // 전체 컬럼 목록 저장
         const visibleColumns = getVisibleColumns(stepId, allColumns);
         setStepDataColumns(visibleColumns);
       } else {
+        setAllAvailableColumns([]);
         setStepDataColumns([]);
       }
     } catch (err: any) {
@@ -350,6 +544,11 @@ export function FlowWidget({
 
   // 체크박스 토글
   const toggleRowSelection = (rowIndex: number) => {
+    // 프리뷰 모드에서는 행 선택 차단
+    if (isPreviewMode) {
+      return;
+    }
+
     const newSelected = new Set(selectedRows);
     if (newSelected.has(rowIndex)) {
       newSelected.delete(rowIndex);
@@ -385,9 +584,15 @@ export function FlowWidget({
     onSelectedDataChange?.(selectedData, selectedStepId);
   };
 
+  // 🆕 표시할 데이터 결정
+  // - 검색 값이 있으면 → filteredData 사용 (결과가 0건이어도 filteredData 사용)
+  // - 검색 값이 없으면 → stepData 사용 (전체 데이터)
+  const hasSearchValue = Object.values(searchValues).some((val) => val && String(val).trim() !== "");
+  const displayData = hasSearchValue ? filteredData : stepData;
+
   // 🆕 페이지네이션된 스텝 데이터
-  const paginatedStepData = stepData.slice((stepDataPage - 1) * stepDataPageSize, stepDataPage * stepDataPageSize);
-  const totalStepDataPages = Math.ceil(stepData.length / stepDataPageSize);
+  const paginatedStepData = displayData.slice((stepDataPage - 1) * stepDataPageSize, stepDataPage * stepDataPageSize);
+  const totalStepDataPages = Math.ceil(displayData.length / stepDataPageSize);
 
   if (loading) {
     return (
@@ -513,15 +718,83 @@ export function FlowWidget({
         <div className="bg-muted/30 mt-4 flex w-full flex-col rounded-lg border 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">
-            <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}건의 데이터
-              {selectedRows.size > 0 && (
-                <span className="text-primary ml-2 font-medium">({selectedRows.size}건 선택됨)</span>
+            <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>
+
+              {/* 🆕 필터 설정 버튼 */}
+              {allAvailableColumns.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>
               )}
-            </p>
+            </div>
+
+            {/* 🆕 검색 필터 입력 영역 */}
+            {searchFilterColumns.size > 0 && (
+              <div className="bg-muted/30 mt-4 space-y-3 rounded border p-4">
+                <div className="flex items-center justify-between">
+                  <h5 className="text-sm font-medium">검색 필터</h5>
+                  {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 lg:grid-cols-3">
+                  {Array.from(searchFilterColumns).map((col) => (
+                    <div key={col} className="space-y-1.5">
+                      <Label htmlFor={`search-${col}`} className="text-xs">
+                        {columnLabels[col] || col}
+                      </Label>
+                      <Input
+                        id={`search-${col}`}
+                        value={searchValues[col] || ""}
+                        onChange={(e) =>
+                          setSearchValues((prev) => ({
+                            ...prev,
+                            [col]: e.target.value,
+                          }))
+                        }
+                        placeholder={`${columnLabels[col] || col} 검색...`}
+                        className="h-8 text-xs"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
           </div>
 
           {/* 데이터 영역 - 고정 높이 + 스크롤 */}
@@ -665,7 +938,7 @@ export function FlowWidget({
                         setStepDataPage(1); // 페이지 크기 변경 시 첫 페이지로
                       }}
                     >
-                      <SelectTrigger className="h-8 w-20 text-xs">
+                      <SelectTrigger className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -684,17 +957,29 @@ export function FlowWidget({
                     <PaginationContent>
                       <PaginationItem>
                         <PaginationPrevious
-                          onClick={() => setStepDataPage((p) => Math.max(1, p - 1))}
-                          className={stepDataPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                          onClick={() => {
+                            if (isPreviewMode) {
+                              return;
+                            }
+                            setStepDataPage((p) => Math.max(1, p - 1));
+                          }}
+                          className={
+                            stepDataPage === 1 || isPreviewMode ? "pointer-events-none opacity-50" : "cursor-pointer"
+                          }
                         />
                       </PaginationItem>
                       {totalStepDataPages <= 7 ? (
                         Array.from({ length: totalStepDataPages }, (_, i) => i + 1).map((page) => (
                           <PaginationItem key={page}>
                             <PaginationLink
-                              onClick={() => setStepDataPage(page)}
+                              onClick={() => {
+                                if (isPreviewMode) {
+                                  return;
+                                }
+                                setStepDataPage(page);
+                              }}
                               isActive={stepDataPage === page}
-                              className="cursor-pointer"
+                              className={isPreviewMode ? "pointer-events-none opacity-50" : "cursor-pointer"}
                             >
                               {page}
                             </PaginationLink>
@@ -719,9 +1004,14 @@ export function FlowWidget({
                                 )}
                                 <PaginationItem>
                                   <PaginationLink
-                                    onClick={() => setStepDataPage(page)}
+                                    onClick={() => {
+                                      if (isPreviewMode) {
+                                        return;
+                                      }
+                                      setStepDataPage(page);
+                                    }}
                                     isActive={stepDataPage === page}
-                                    className="cursor-pointer"
+                                    className={isPreviewMode ? "pointer-events-none opacity-50" : "cursor-pointer"}
                                   >
                                     {page}
                                   </PaginationLink>
@@ -732,9 +1022,16 @@ export function FlowWidget({
                       )}
                       <PaginationItem>
                         <PaginationNext
-                          onClick={() => setStepDataPage((p) => Math.min(totalStepDataPages, p + 1))}
+                          onClick={() => {
+                            if (isPreviewMode) {
+                              return;
+                            }
+                            setStepDataPage((p) => Math.min(totalStepDataPages, p + 1));
+                          }}
                           className={
-                            stepDataPage === totalStepDataPages ? "pointer-events-none opacity-50" : "cursor-pointer"
+                            stepDataPage === totalStepDataPages || isPreviewMode
+                              ? "pointer-events-none opacity-50"
+                              : "cursor-pointer"
                           }
                         />
                       </PaginationItem>
@@ -746,6 +1043,76 @@ export function FlowWidget({
           )}
         </div>
       )}
+
+      {/* 🆕 검색 필터 설정 다이얼로그 */}
+      <Dialog open={isFilterSettingOpen} onOpenChange={setIsFilterSettingOpen}>
+        <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="bg-muted/50 flex items-center gap-3 rounded border p-3">
+              <Checkbox
+                id="select-all-filters"
+                checked={searchFilterColumns.size === allAvailableColumns.length && allAvailableColumns.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">
+                {searchFilterColumns.size} / {allAvailableColumns.length}개
+              </span>
+            </div>
+
+            {/* 컬럼 목록 */}
+            <div className="max-h-[50vh] space-y-2 overflow-y-auto rounded border p-2">
+              {allAvailableColumns.map((col) => (
+                <div key={col} className="hover:bg-muted/50 flex items-center gap-3 rounded p-2">
+                  <Checkbox
+                    id={`filter-${col}`}
+                    checked={searchFilterColumns.has(col)}
+                    onCheckedChange={() => toggleFilterColumn(col)}
+                  />
+                  <Label htmlFor={`filter-${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-center text-xs">
+              {searchFilterColumns.size === 0 ? (
+                <span>검색 필터를 사용하려면 최소 1개 이상의 컬럼을 선택하세요</span>
+              ) : (
+                <span>
+                  총 <span className="text-primary font-semibold">{searchFilterColumns.size}개</span>의 검색 필터가
+                  표시됩니다
+                </span>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setIsFilterSettingOpen(false)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button onClick={saveFilterSettings} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/frontend/components/screen/widgets/InputWidget.tsx b/frontend/components/screen/widgets/InputWidget.tsx
index 2d6d4bd7..a1e87a03 100644
--- a/frontend/components/screen/widgets/InputWidget.tsx
+++ b/frontend/components/screen/widgets/InputWidget.tsx
@@ -33,7 +33,8 @@ export default function InputWidget({ widget, value, onChange, className }: Inpu
         onChange={handleChange}
         required={widget.required}
         readOnly={widget.readonly}
-        className={cn("h-9 w-full text-sm", widget.readonly && "bg-muted/50 cursor-not-allowed")}
+        className={cn("h-6 w-full text-xs", widget.readonly && "bg-muted/50 cursor-not-allowed")}
+        style={{ fontSize: "12px" }}
       />
     </div>
   );
diff --git a/frontend/components/screen/widgets/SelectWidget.tsx b/frontend/components/screen/widgets/SelectWidget.tsx
index 3f20a5c6..b053c802 100644
--- a/frontend/components/screen/widgets/SelectWidget.tsx
+++ b/frontend/components/screen/widgets/SelectWidget.tsx
@@ -53,7 +53,7 @@ export default function SelectWidget({ widget, value, onChange, options = [], cl
         </Label>
       )}
       <Select value={value} onValueChange={handleChange} disabled={widget.readonly}>
-        <SelectTrigger className="h-9 w-full text-sm">
+        <SelectTrigger className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
           <SelectValue placeholder={widget.placeholder || "선택해주세요"} />
         </SelectTrigger>
         <SelectContent>
diff --git a/frontend/components/ui/select.tsx b/frontend/components/ui/select.tsx
index 9fedb78d..d5e1f0d7 100644
--- a/frontend/components/ui/select.tsx
+++ b/frontend/components/ui/select.tsx
@@ -20,18 +20,18 @@ function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.V
 
 function SelectTrigger({
   className,
-  size = "default",
+  size = "xs",
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default";
+  size?: "xs" | "sm" | "default";
 }) {
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-48 items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-48 items-center justify-between gap-2 rounded-md border bg-transparent text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=default]:px-3 data-[size=default]:py-2 data-[size=sm]:h-8 data-[size=sm]:px-3 data-[size=sm]:py-1 data-[size=xs]:h-6 data-[size=xs]:px-2 data-[size=xs]:py-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -51,7 +51,7 @@ function SelectContent({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
   return (
-    <SelectPrimitive.Portal container={document.querySelector('[data-radix-portal]') || document.body}>
+    <SelectPrimitive.Portal container={document.querySelector("[data-radix-portal]") || document.body}>
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
diff --git a/frontend/contexts/ScreenPreviewContext.tsx b/frontend/contexts/ScreenPreviewContext.tsx
new file mode 100644
index 00000000..8d37862a
--- /dev/null
+++ b/frontend/contexts/ScreenPreviewContext.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+interface ScreenPreviewContextType {
+  isPreviewMode: boolean; // true: 화면 관리(디자이너), false: 실제 화면
+}
+
+const ScreenPreviewContext = createContext<ScreenPreviewContextType>({
+  isPreviewMode: false,
+});
+
+export const useScreenPreview = () => {
+  return useContext(ScreenPreviewContext);
+};
+
+interface ScreenPreviewProviderProps {
+  isPreviewMode: boolean;
+  children: React.ReactNode;
+}
+
+export const ScreenPreviewProvider: React.FC<ScreenPreviewProviderProps> = ({ isPreviewMode, children }) => {
+  return <ScreenPreviewContext.Provider value={{ isPreviewMode }}>{children}</ScreenPreviewContext.Provider>;
+};
diff --git a/frontend/hooks/useAuth.ts b/frontend/hooks/useAuth.ts
index 7c4cbf51..c90594bb 100644
--- a/frontend/hooks/useAuth.ts
+++ b/frontend/hooks/useAuth.ts
@@ -221,6 +221,12 @@ export const useAuth = () => {
 
         setAuthStatus(finalAuthStatus);
 
+        console.log("✅ 최종 사용자 상태:", {
+          userId: userInfo?.userId,
+          userName: userInfo?.userName,
+          companyCode: userInfo?.companyCode || userInfo?.company_code,
+        });
+
         // 디버깅용 로그
 
         // 로그인되지 않은 상태인 경우 토큰 제거 (리다이렉트는 useEffect에서 처리)
@@ -240,8 +246,9 @@ export const useAuth = () => {
           const payload = JSON.parse(atob(token.split(".")[1]));
 
           const tempUser = {
-            userId: payload.userId || "unknown",
-            userName: payload.userName || "사용자",
+            userId: payload.userId || payload.id || "unknown",
+            userName: payload.userName || payload.name || "사용자",
+            companyCode: payload.companyCode || payload.company_code || "",
             isAdmin: payload.userId === "plm_admin" || payload.userType === "ADMIN",
           };
 
@@ -481,6 +488,7 @@ export const useAuth = () => {
     isAdmin: authStatus.isAdmin,
     userId: user?.userId,
     userName: user?.userName,
+    companyCode: user?.companyCode || user?.company_code, // 🆕 회사 코드
 
     // 함수
     login,
diff --git a/frontend/hooks/useLogin.ts b/frontend/hooks/useLogin.ts
index 1a7513e9..09c32d5f 100644
--- a/frontend/hooks/useLogin.ts
+++ b/frontend/hooks/useLogin.ts
@@ -141,8 +141,18 @@ export const useLogin = () => {
           // 쿠키에도 저장 (미들웨어에서 사용)
           document.cookie = `authToken=${result.data.token}; path=/; max-age=86400; SameSite=Lax`;
 
-          // 로그인 성공
-          router.push(AUTH_CONFIG.ROUTES.MAIN);
+          // 로그인 성공 - 첫 번째 접근 가능한 메뉴로 리다이렉트
+          const firstMenuPath = result.data?.firstMenuPath;
+
+          if (firstMenuPath) {
+            // 접근 가능한 메뉴가 있으면 해당 메뉴로 이동
+            console.log("첫 번째 접근 가능한 메뉴로 이동:", firstMenuPath);
+            router.push(firstMenuPath);
+          } else {
+            // 접근 가능한 메뉴가 없으면 메인 페이지로 이동
+            console.log("접근 가능한 메뉴가 없어 메인 페이지로 이동");
+            router.push(AUTH_CONFIG.ROUTES.MAIN);
+          }
         } else {
           // 로그인 실패
           setError(result.message || FORM_VALIDATION.MESSAGES.LOGIN_FAILED);
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index b2c84506..f8b48fdf 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -93,6 +93,9 @@ export interface DynamicComponentRendererProps {
   // 버튼 액션을 위한 추가 props
   screenId?: number;
   tableName?: string;
+  userId?: string; // 🆕 현재 사용자 ID
+  userName?: string; // 🆕 현재 사용자 이름
+  companyCode?: string; // 🆕 현재 사용자의 회사 코드
   onRefresh?: () => void;
   onClose?: () => void;
   // 테이블 선택된 행 정보 (다중 선택 액션용)
@@ -176,6 +179,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           onRefresh,
           onClose,
           screenId,
+          userId, // 🆕 사용자 ID
+          userName, // 🆕 사용자 이름
+          companyCode, // 🆕 회사 코드
           mode,
           isInModal,
           originalData,
@@ -196,7 +202,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           autoGeneration,
           ...restProps
         } = props;
-        
+
         // DOM 안전한 props만 필터링
         const safeProps = filterDOMProps(restProps);
 
@@ -229,10 +235,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         // 렌더러 props 구성
         // component.style에서 height 제거 (RealtimePreviewDynamic에서 size.height로 처리)
         const { height: _height, ...styleWithoutHeight } = component.style || {};
-        
+
         // 숨김 값 추출
         const hiddenValue = component.hidden || component.componentConfig?.hidden;
-        
+
         const rendererProps = {
           component,
           isSelected,
@@ -257,6 +263,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           onRefresh,
           onClose,
           screenId,
+          userId, // 🆕 사용자 ID
+          userName, // 🆕 사용자 이름
+          companyCode, // 🆕 회사 코드
           mode,
           isInModal,
           readonly: component.readonly,
@@ -345,6 +354,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
       onFormDataChange: props.onFormDataChange,
       screenId: props.screenId,
       tableName: props.tableName,
+      userId: props.userId, // 🆕 사용자 ID
+      userName: props.userName, // 🆕 사용자 이름
+      companyCode: props.companyCode, // 🆕 회사 코드
       onRefresh: props.onRefresh,
       onClose: props.onClose,
       mode: props.mode,
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index 00819387..5f1437ff 100644
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -22,12 +22,16 @@ import {
 import { toast } from "sonner";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { useCurrentFlowStep } from "@/stores/flowStepStore";
+import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 
 export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
   config?: ButtonPrimaryConfig;
   // 추가 props
   screenId?: number;
   tableName?: string;
+  userId?: string; // 🆕 현재 사용자 ID
+  userName?: string; // 🆕 현재 사용자 이름
+  companyCode?: string; // 🆕 현재 사용자의 회사 코드
   onRefresh?: () => void;
   onClose?: () => void;
   onFlowRefresh?: () => void;
@@ -64,6 +68,9 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   onFormDataChange,
   screenId,
   tableName,
+  userId, // 🆕 사용자 ID
+  userName, // 🆕 사용자 이름
+  companyCode, // 🆕 회사 코드
   onRefresh,
   onClose,
   onFlowRefresh,
@@ -73,6 +80,10 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   flowSelectedStepId,
   ...props
 }) => {
+  const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
+
+  // 🔍 디버깅: props 확인
+
   // 🆕 플로우 단계별 표시 제어
   const flowConfig = (component as any).webTypeConfig?.flowVisibilityConfig;
   const currentStep = useCurrentFlowStep(flowConfig?.targetFlowComponentId);
@@ -355,6 +366,11 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   const handleClick = async (e: React.MouseEvent) => {
     e.stopPropagation();
 
+    // 프리뷰 모드에서는 버튼 동작 차단
+    if (isPreviewMode) {
+      return;
+    }
+
     // 디자인 모드에서는 기본 onClick만 실행
     if (isDesignMode) {
       onClick?.();
@@ -377,6 +393,9 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
         originalData: originalData || {}, // 부분 업데이트용 원본 데이터 추가
         screenId,
         tableName,
+        userId, // 🆕 사용자 ID
+        userName, // 🆕 사용자 이름
+        companyCode, // 🆕 회사 코드
         onFormDataChange,
         onRefresh,
         onClose,
diff --git a/frontend/lib/registry/components/date-input/DateInputComponent.tsx b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
index 556dd32e..2d5f8071 100644
--- a/frontend/lib/registry/components/date-input/DateInputComponent.tsx
+++ b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
@@ -45,54 +45,18 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
   // 🎯 자동생성 상태 관리
   const [autoGeneratedValue, setAutoGeneratedValue] = useState<string>("");
 
-  // 🚨 컴포넌트 마운트 확인용 로그
-  console.log("🚨 DateInputComponent 마운트됨!", {
-    componentId: component.id,
-    isInteractive,
-    isDesignMode,
-    autoGeneration,
-    componentAutoGeneration: component.autoGeneration,
-    externalValue,
-    formDataValue: formData?.[component.columnName || ""],
-    timestamp: new Date().toISOString(),
-  });
-
-  // 🧪 무조건 실행되는 테스트
-  useEffect(() => {
-    console.log("🧪 DateInputComponent 무조건 실행 테스트!");
-    const testDate = "2025-01-19"; // 고정된 테스트 날짜
-    setAutoGeneratedValue(testDate);
-    console.log("🧪 autoGeneratedValue 설정 완료:", testDate);
-  }, []); // 빈 의존성 배열로 한 번만 실행
-
   // 자동생성 설정 (props 우선, 컴포넌트 설정 폴백)
   const finalAutoGeneration = autoGeneration || component.autoGeneration;
   const finalHidden = hidden !== undefined ? hidden : component.hidden;
 
-  // 🧪 테스트용 간단한 자동생성 로직
+  // 자동생성 로직
   useEffect(() => {
-    console.log("🔍 DateInputComponent useEffect 실행:", {
-      componentId: component.id,
-      finalAutoGeneration,
-      enabled: finalAutoGeneration?.enabled,
-      type: finalAutoGeneration?.type,
-      isInteractive,
-      isDesignMode,
-      hasOnFormDataChange: !!onFormDataChange,
-      columnName: component.columnName,
-      currentFormValue: formData?.[component.columnName || ""],
-    });
-
-    // 🧪 테스트: 자동생성이 활성화되어 있으면 무조건 현재 날짜 설정
     if (finalAutoGeneration?.enabled) {
       const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
-      console.log("🧪 테스트용 날짜 생성:", today);
-
       setAutoGeneratedValue(today);
 
       // 인터랙티브 모드에서 폼 데이터에도 설정
       if (isInteractive && onFormDataChange && component.columnName) {
-        console.log("📤 테스트용 폼 데이터 업데이트:", component.columnName, today);
         onFormDataChange(component.columnName, today);
       }
     }
@@ -167,17 +131,6 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
     rawValue = component.value;
   }
 
-  console.log("🔍 DateInputComponent 값 디버깅:", {
-    componentId: component.id,
-    fieldName,
-    externalValue,
-    formDataValue: formData?.[component.columnName || ""],
-    componentValue: component.value,
-    rawValue,
-    isInteractive,
-    hasFormData: !!formData,
-  });
-
   // 날짜 형식 변환 함수 (HTML input[type="date"]는 YYYY-MM-DD 형식만 허용)
   const formatDateForInput = (dateValue: any): string => {
     if (!dateValue) return "";
diff --git a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
index a0d78ad8..5f1e3f3c 100644
--- a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
+++ b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
@@ -20,7 +20,7 @@ interface SingleTableWithStickyProps {
   handleSelectAll: (checked: boolean) => void;
   handleRowClick: (row: any) => void;
   renderCheckboxCell: (row: any, index: number) => React.ReactNode;
-  formatCellValue: (value: any, format?: string, columnName?: string) => string;
+  formatCellValue: (value: any, format?: string, columnName?: string, rowData?: Record<string, any>) => string;
   getColumnWidth: (column: ColumnConfig) => number;
   containerWidth?: string; // 컨테이너 너비 설정
 }
@@ -63,7 +63,13 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
           boxSizing: "border-box",
         }}
       >
-        <TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm border-b border-gray-200/40" : "bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm border-b border-gray-200/40"}>
+        <TableHeader
+          className={
+            tableConfig.stickyHeader
+              ? "sticky top-0 z-20 border-b border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm"
+              : "border-b border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm"
+          }
+        >
           <TableRow className="border-b border-gray-200/40">
             {visibleColumns.map((column, colIndex) => {
               // 왼쪽 고정 컬럼들의 누적 너비 계산
@@ -86,12 +92,14 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                   className={cn(
                     column.columnName === "__checkbox__"
                       ? "h-12 border-0 px-6 py-4 text-center align-middle"
-                      : "h-12 cursor-pointer border-0 px-6 py-4 text-left align-middle font-semibold whitespace-nowrap text-gray-700 select-none transition-all duration-200 hover:text-gray-900",
+                      : "h-12 cursor-pointer border-0 px-6 py-4 text-left align-middle font-semibold whitespace-nowrap text-gray-700 transition-all duration-200 select-none hover:text-gray-900",
                     `text-${column.align}`,
                     column.sortable && "hover:bg-orange-200/70",
                     // 고정 컬럼 스타일
-                    column.fixed === "left" && "sticky z-10 border-r border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
-                    column.fixed === "right" && "sticky z-10 border-l border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
+                    column.fixed === "left" &&
+                      "sticky z-10 border-r border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
+                    column.fixed === "right" &&
+                      "sticky z-10 border-l border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
                     // 숨김 컬럼 스타일 (디자인 모드에서만)
                     isDesignMode && column.hidden && "bg-gray-100/50 opacity-40",
                   )}
@@ -112,7 +120,12 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                   <div className="flex items-center gap-2">
                     {column.columnName === "__checkbox__" ? (
                       checkboxConfig.selectAll && (
-                        <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} aria-label="전체 선택" style={{ zIndex: 1 }} />
+                        <Checkbox
+                          checked={isAllSelected}
+                          onCheckedChange={handleSelectAll}
+                          aria-label="전체 선택"
+                          style={{ zIndex: 1 }}
+                        />
                       )
                     ) : (
                       <>
@@ -144,11 +157,18 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                 <div className="flex flex-col items-center justify-center space-y-3">
                   <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-gray-100 to-gray-200">
                     <svg className="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                      />
                     </svg>
                   </div>
                   <span className="text-sm font-medium text-gray-500">데이터가 없습니다</span>
-                  <span className="text-xs text-gray-400 bg-gray-100 px-3 py-1 rounded-full">조건을 변경하여 다시 검색해보세요</span>
+                  <span className="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-400">
+                    조건을 변경하여 다시 검색해보세요
+                  </span>
                 </div>
               </TableCell>
             </TableRow>
@@ -158,7 +178,8 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                 key={`row-${index}`}
                 className={cn(
                   "h-12 cursor-pointer border-b border-gray-100/40 leading-none transition-all duration-200",
-                  tableConfig.tableStyle?.hoverEffect && "hover:bg-gradient-to-r hover:from-orange-50/80 hover:to-orange-100/60 hover:shadow-sm",
+                  tableConfig.tableStyle?.hoverEffect &&
+                    "hover:bg-gradient-to-r hover:from-orange-50/80 hover:to-orange-100/60 hover:shadow-sm",
                   tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/30",
                 )}
                 style={{ minHeight: "48px", height: "48px", lineHeight: "1" }}
@@ -186,8 +207,10 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                         "h-12 px-6 py-4 align-middle text-sm whitespace-nowrap text-gray-600 transition-all duration-200",
                         `text-${column.align}`,
                         // 고정 컬럼 스타일
-                        column.fixed === "left" && "sticky z-10 border-r border-gray-200/40 bg-white/90 backdrop-blur-sm",
-                        column.fixed === "right" && "sticky z-10 border-l border-gray-200/40 bg-white/90 backdrop-blur-sm",
+                        column.fixed === "left" &&
+                          "sticky z-10 border-r border-gray-200/40 bg-white/90 backdrop-blur-sm",
+                        column.fixed === "right" &&
+                          "sticky z-10 border-l border-gray-200/40 bg-white/90 backdrop-blur-sm",
                       )}
                       style={{
                         minHeight: "48px",
@@ -207,7 +230,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                     >
                       {column.columnName === "__checkbox__"
                         ? renderCheckboxCell(row, index)
-                        : formatCellValue(row[column.columnName], column.format, column.columnName) || "\u00A0"}
+                        : formatCellValue(row[column.columnName], column.format, column.columnName, row) || "\u00A0"}
                     </TableCell>
                   );
                 })}
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index a4557c8e..a60334e3 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -620,9 +620,29 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   };
 
   const formatCellValue = useCallback(
-    (value: any, column: ColumnConfig) => {
+    (value: any, column: ColumnConfig, rowData?: Record<string, any>) => {
       if (value === null || value === undefined) return "-";
 
+      // 🎯 엔티티 컬럼 표시 설정이 있는 경우
+      if (column.entityDisplayConfig && rowData) {
+        // displayColumns 또는 selectedColumns 둘 다 체크
+        const displayColumns = column.entityDisplayConfig.displayColumns || column.entityDisplayConfig.selectedColumns;
+        const separator = column.entityDisplayConfig.separator;
+
+        if (displayColumns && displayColumns.length > 0) {
+          // 선택된 컬럼들의 값을 구분자로 조합
+          const values = displayColumns
+            .map((colName) => {
+              const cellValue = rowData[colName];
+              if (cellValue === null || cellValue === undefined) return "";
+              return String(cellValue);
+            })
+            .filter((v) => v !== ""); // 빈 값 제외
+
+          return values.join(separator || " - ");
+        }
+      }
+
       const meta = columnMeta[column.columnName];
       if (meta?.webType && meta?.codeCategory) {
         const convertedValue = optimizedConvertCode(value, meta.codeCategory);
@@ -908,9 +928,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             columnLabels={columnLabels}
             renderCheckboxHeader={renderCheckboxHeader}
             renderCheckboxCell={renderCheckboxCell}
-            formatCellValue={(value: any, format?: string, columnName?: string) => {
+            formatCellValue={(value: any, format?: string, columnName?: string, rowData?: Record<string, any>) => {
               const column = visibleColumns.find((c) => c.columnName === columnName);
-              return column ? formatCellValue(value, column) : String(value);
+              return column ? formatCellValue(value, column, rowData) : String(value);
             }}
             getColumnWidth={getColumnWidth}
             containerWidth={calculatedWidth}
@@ -1091,7 +1111,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           >
                             {column.columnName === "__checkbox__"
                               ? renderCheckboxCell(row, index)
-                              : formatCellValue(cellValue, column)}
+                              : formatCellValue(cellValue, column, row)}
                           </td>
                         );
                       })}
diff --git a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
index e6d31993..6b977155 100644
--- a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
+++ b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
@@ -4,17 +4,15 @@ import React, { useState, useEffect } from "react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { TableListConfig, ColumnConfig } from "./types";
 import { entityJoinApi } from "@/lib/api/entityJoin";
 import { tableTypeApi } from "@/lib/api/screen";
-import { Plus, Trash2, ArrowUp, ArrowDown, Settings, Columns, Filter, Palette, MousePointer } from "lucide-react";
+import { Plus, Trash2, ArrowUp, ArrowDown, ChevronsUpDown, Check } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { cn } from "@/lib/utils";
 
 export interface TableListConfigPanelProps {
   config: TableListConfig;
@@ -236,6 +234,23 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
     fetchEntityJoinColumns();
   }, [config.selectedTable, screenTableName]);
 
+  // 🎯 엔티티 컬럼 자동 로드
+  useEffect(() => {
+    const entityColumns = config.columns?.filter((col) => col.isEntityJoin && col.entityDisplayConfig);
+
+    if (!entityColumns || entityColumns.length === 0) return;
+
+    // 각 엔티티 컬럼에 대해 자동으로 loadEntityDisplayConfig 호출
+    entityColumns.forEach((column) => {
+      // 이미 로드된 경우 스킵
+      if (entityDisplayConfigs[column.columnName]) {
+        return;
+      }
+
+      loadEntityDisplayConfig(column);
+    });
+  }, [config.columns]);
+
   const handleChange = (key: keyof TableListConfig, value: any) => {
     onChange({ [key]: value });
   };
@@ -446,31 +461,16 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
   // 🎯 엔티티 컬럼의 표시 컬럼 정보 로드
   const loadEntityDisplayConfig = async (column: ColumnConfig) => {
-    console.log("🔍 loadEntityDisplayConfig 시작:", {
-      columnName: column.columnName,
-      isEntityJoin: column.isEntityJoin,
-      entityJoinInfo: column.entityJoinInfo,
-      entityDisplayConfig: column.entityDisplayConfig,
-      configSelectedTable: config.selectedTable,
-    });
-
     if (!column.isEntityJoin || !column.entityJoinInfo) {
-      console.log("⚠️ 엔티티 컬럼 조건 불만족:", {
-        isEntityJoin: column.isEntityJoin,
-        entityJoinInfo: column.entityJoinInfo,
-      });
       return;
     }
 
     // entityDisplayConfig가 없으면 초기화
     if (!column.entityDisplayConfig) {
-      console.log("🔧 entityDisplayConfig 초기화:", column.columnName);
-
       // sourceTable을 결정: entityJoinInfo -> config.selectedTable -> screenTableName 순서
       const initialSourceTable = column.entityJoinInfo?.sourceTable || config.selectedTable || screenTableName;
 
       if (!initialSourceTable) {
-        console.warn("⚠️ sourceTable을 결정할 수 없어서 초기화 실패:", column.columnName);
         return;
       }
 
@@ -494,22 +494,18 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
         // 업데이트된 컬럼으로 다시 시도
         const updatedColumn = updatedColumns.find((col) => col.columnName === column.columnName);
         if (updatedColumn) {
-          console.log("🔄 업데이트된 컬럼으로 재시도:", updatedColumn.entityDisplayConfig);
           return loadEntityDisplayConfig(updatedColumn);
         }
       }
       return;
     }
 
-    console.log("🔍 entityDisplayConfig 전체 구조:", column.entityDisplayConfig);
-    console.log("🔍 entityDisplayConfig 키들:", Object.keys(column.entityDisplayConfig));
-
     // sourceTable 결정 우선순위:
     // 1. entityDisplayConfig.sourceTable
     // 2. entityJoinInfo.sourceTable
     // 3. config.selectedTable
     // 4. screenTableName
-    let sourceTable =
+    const sourceTable =
       column.entityDisplayConfig.sourceTable ||
       column.entityJoinInfo?.sourceTable ||
       config.selectedTable ||
@@ -519,28 +515,17 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
     // sourceTable이 여전히 비어있으면 에러
     if (!sourceTable) {
-      console.error("❌ sourceTable이 비어있어서 처리 불가:", {
-        columnName: column.columnName,
-        entityDisplayConfig: column.entityDisplayConfig,
-        entityJoinInfo: column.entityJoinInfo,
-        configSelectedTable: config.selectedTable,
-        screenTableName,
-      });
       return;
     }
 
-    console.log("✅ sourceTable 결정됨:", sourceTable);
-
     if (!joinTable && sourceTable) {
       // joinTable이 없으면 tableTypeApi로 조회해서 설정
       try {
-        console.log("🔍 joinTable이 없어서 tableTypeApi로 조회:", sourceTable);
         const columnList = await tableTypeApi.getColumns(sourceTable);
         const columnInfo = columnList.find((col: any) => (col.column_name || col.columnName) === column.columnName);
 
         if (columnInfo?.reference_table || columnInfo?.referenceTable) {
           joinTable = columnInfo.reference_table || columnInfo.referenceTable;
-          console.log("✅ tableTypeApi에서 조인 테이블 정보 찾음:", joinTable);
 
           // entityDisplayConfig 업데이트
           const updatedConfig = {
@@ -610,11 +595,6 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
           if (updatedColumns) {
             handleChange("columns", updatedColumns);
           }
-        } else {
-          console.log("⚠️ tableTypeApi에서도 referenceTable을 찾을 수 없음:", {
-            columnName: column.columnName,
-            columnInfo: columnInfo,
-          });
         }
       } catch (error) {
         console.error("tableTypeApi 컬럼 정보 조회 실패:", error);
@@ -623,7 +603,6 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
     // sourceTable과 joinTable이 모두 있어야 로드
     if (!sourceTable || !actualJoinTable) {
-      console.log("⚠️ sourceTable 또는 joinTable이 비어있어서 로드 스킵:", { sourceTable, joinTable: actualJoinTable });
       return;
     }
 
@@ -686,11 +665,6 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
     if (updatedColumns) {
       handleChange("columns", updatedColumns);
-      console.log("🎯 엔티티 표시 컬럼 설정 업데이트:", {
-        columnName,
-        selectedColumns: newSelectedColumns,
-        updatedColumn: updatedColumns.find((col) => col.columnName === columnName),
-      });
     }
   };
 
@@ -725,11 +699,6 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
     if (updatedColumns) {
       handleChange("columns", updatedColumns);
-      console.log("🎯 엔티티 표시 구분자 설정 업데이트:", {
-        columnName,
-        separator,
-        updatedColumn: updatedColumns.find((col) => col.columnName === columnName),
-      });
     }
   };
 
@@ -753,1392 +722,366 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
     handleChange("columns", columns);
   };
 
-  // 필터 추가
-  const addFilter = (columnName: string) => {
-    const existingFilter = config.filter?.filters?.find((f) => f.columnName === columnName);
-    if (existingFilter) return;
-
-    const column = availableColumns.find((col) => col.columnName === columnName);
-    if (!column) return;
-
-    // tableColumns에서 해당 컬럼의 메타정보 찾기
-    const tableColumn = tableColumns?.find((tc) => tc.columnName === columnName);
-
-    // 컬럼의 데이터 타입과 웹타입에 따라 위젯 타입 결정
-    const inferWidgetType = (dataType: string, webType?: string): string => {
-      // 웹타입이 있으면 우선 사용
-      if (webType) {
-        return webType;
-      }
-
-      // 데이터 타입으로 추론
-      const type = dataType.toLowerCase();
-      if (type.includes("int") || type.includes("numeric") || type.includes("decimal")) return "number";
-      if (type.includes("date") || type.includes("timestamp")) return "date";
-      if (type.includes("bool")) return "boolean";
-      return "text";
-    };
-
-    const widgetType = inferWidgetType(column.dataType, tableColumn?.webType || tableColumn?.web_type);
-
-    const newFilter = {
-      columnName,
-      widgetType,
-      label: column.label || column.columnName,
-      gridColumns: 3,
-      numberFilterMode: "range" as const,
-      // 코드 타입인 경우 코드 카테고리 추가
-      ...(widgetType === "code" && {
-        codeCategory: tableColumn?.codeCategory || tableColumn?.code_category,
-      }),
-      // 엔티티 타입인 경우 참조 정보 추가
-      ...(widgetType === "entity" && {
-        referenceTable: tableColumn?.referenceTable || tableColumn?.reference_table,
-        referenceColumn: tableColumn?.referenceColumn || tableColumn?.reference_column,
-        displayColumn: tableColumn?.displayColumn || tableColumn?.display_column,
-      }),
-    };
-
-    console.log("🔍 필터 추가:", newFilter);
-
-    const currentFilters = config.filter?.filters || [];
-    handleNestedChange("filter", "filters", [...currentFilters, newFilter]);
-  };
-
-  // 필터 제거
-  const removeFilter = (index: number) => {
-    const currentFilters = config.filter?.filters || [];
-    const updatedFilters = currentFilters.filter((_, i) => i !== index);
-    handleNestedChange("filter", "filters", updatedFilters);
-  };
-
-  // 필터 업데이트
-  const updateFilter = (index: number, key: string, value: any) => {
-    const currentFilters = config.filter?.filters || [];
-    const updatedFilters = currentFilters.map((filter, i) => (i === index ? { ...filter, [key]: value } : filter));
-    handleNestedChange("filter", "filters", updatedFilters);
-  };
-
   return (
     <div className="space-y-4">
       <div className="text-sm font-medium">테이블 리스트 설정</div>
 
-      <Tabs defaultValue="basic" className="w-full">
-        <TabsList className="grid w-full grid-cols-6">
-          <TabsTrigger value="basic" className="flex items-center gap-1">
-            <Settings className="h-3 w-3" />
-            기본
-          </TabsTrigger>
-          <TabsTrigger value="columns" className="flex items-center gap-1">
-            <Columns className="h-3 w-3" />
-            컬럼
-          </TabsTrigger>
-          <TabsTrigger value="join-columns" className="flex items-center gap-1">
-            <Plus className="h-3 w-3" />
-            조인
-          </TabsTrigger>
-          <TabsTrigger value="filter" className="flex items-center gap-1">
-            <Filter className="h-3 w-3" />
-            필터
-          </TabsTrigger>
-          <TabsTrigger value="actions" className="flex items-center gap-1">
-            <MousePointer className="h-3 w-3" />
-            액션
-          </TabsTrigger>
-          <TabsTrigger value="style" className="flex items-center gap-1">
-            <Palette className="h-3 w-3" />
-            스타일
-          </TabsTrigger>
-        </TabsList>
+      <div className="space-y-6">
+        {/* 가로 스크롤 및 컬럼 고정 */}
+        <div className="space-y-3">
+          <div>
+            <h3 className="text-sm font-semibold">가로 스크롤 및 컬럼 고정</h3>
+          </div>
+          <hr className="border-border" />
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="horizontalScrollEnabled"
+              checked={config.horizontalScroll?.enabled}
+              onCheckedChange={(checked) => handleNestedChange("horizontalScroll", "enabled", checked)}
+            />
+            <Label htmlFor="horizontalScrollEnabled">가로 스크롤 사용</Label>
+          </div>
 
-        {/* 기본 설정 탭 */}
-        <TabsContent value="basic" className="space-y-4">
-          <ScrollArea className="h-[600px] pr-4">
-            {/* 표시 모드 설정 */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">표시 모드</CardTitle>
-                <CardDescription>데이터를 어떤 형태로 표시할지 선택하세요</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="space-y-3">
-                  <Label>표시 형태</Label>
-                  <RadioGroup
-                    value={config.displayMode || "table"}
-                    onValueChange={(value: "table" | "card") => handleChange("displayMode", value)}
-                  >
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="table" id="table-mode" />
-                      <Label htmlFor="table-mode" className="cursor-pointer">
-                        테이블 형태 (기본)
-                      </Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="card" id="card-mode" />
-                      <Label htmlFor="card-mode" className="cursor-pointer">
-                        카드 형태
-                      </Label>
-                    </div>
-                  </RadioGroup>
-                </div>
+          {config.horizontalScroll?.enabled && (
+            <div className="space-y-3">
+              <div className="space-y-1">
+                <Label htmlFor="maxVisibleColumns" className="text-sm">
+                  최대 표시 컬럼 수
+                </Label>
+                <Input
+                  id="maxVisibleColumns"
+                  type="number"
+                  value={config.horizontalScroll?.maxVisibleColumns || 8}
+                  onChange={(e) =>
+                    handleNestedChange("horizontalScroll", "maxVisibleColumns", parseInt(e.target.value) || 8)
+                  }
+                  min={3}
+                  max={20}
+                  placeholder="8"
+                  className="h-8"
+                />
+                <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
+              </div>
+            </div>
+          )}
+        </div>
 
-                {/* 카드 모드 설정 */}
-                {config.displayMode === "card" && (
-                  <div className="space-y-4 border-t pt-4">
-                    <div className="space-y-3">
-                      <Label className="text-sm font-medium">카드 레이아웃 설정</Label>
-
-                      <div className="grid grid-cols-2 gap-4">
-                        <div className="space-y-2">
-                          <Label htmlFor="cards-per-row">한 행당 카드 수</Label>
-                          <Select
-                            value={config.cardConfig?.cardsPerRow?.toString() || "3"}
-                            onValueChange={(value) => handleNestedChange("cardConfig", "cardsPerRow", parseInt(value))}
-                          >
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="1">1개</SelectItem>
-                              <SelectItem value="2">2개</SelectItem>
-                              <SelectItem value="3">3개</SelectItem>
-                              <SelectItem value="4">4개</SelectItem>
-                              <SelectItem value="5">5개</SelectItem>
-                              <SelectItem value="6">6개</SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </div>
-
-                        <div className="space-y-2">
-                          <Label htmlFor="card-spacing">카드 간격 (px)</Label>
-                          <Input
-                            id="card-spacing"
-                            type="number"
-                            value={config.cardConfig?.cardSpacing || 16}
-                            onChange={(e) => handleNestedChange("cardConfig", "cardSpacing", parseInt(e.target.value))}
-                            min="0"
-                            max="50"
-                          />
-                        </div>
-                      </div>
-
-                      <div className="space-y-3">
-                        <Label className="text-sm font-medium">카드 필드 매핑</Label>
-
-                        <div className="grid grid-cols-1 gap-3">
-                          <div className="space-y-2">
-                            <Label htmlFor="id-column">ID 컬럼 (사번 등)</Label>
-                            <Select
-                              value={config.cardConfig?.idColumn || ""}
-                              onValueChange={(value) => handleNestedChange("cardConfig", "idColumn", value)}
-                            >
-                              <SelectTrigger>
-                                <SelectValue placeholder="ID 컬럼 선택" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {availableColumns.map((column) => (
-                                  <SelectItem key={column.columnName} value={column.columnName}>
-                                    {column.label || column.columnName}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          </div>
-
-                          <div className="space-y-2">
-                            <Label htmlFor="title-column">제목 컬럼 (이름 등)</Label>
-                            <Select
-                              value={config.cardConfig?.titleColumn || ""}
-                              onValueChange={(value) => handleNestedChange("cardConfig", "titleColumn", value)}
-                            >
-                              <SelectTrigger>
-                                <SelectValue placeholder="제목 컬럼 선택" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {availableColumns.map((column) => (
-                                  <SelectItem key={column.columnName} value={column.columnName}>
-                                    {column.label || column.columnName}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          </div>
-
-                          <div className="space-y-2">
-                            <Label htmlFor="subtitle-column">서브 제목 컬럼 (부서 등)</Label>
-                            <Select
-                              value={config.cardConfig?.subtitleColumn || ""}
-                              onValueChange={(value) => handleNestedChange("cardConfig", "subtitleColumn", value)}
-                            >
-                              <SelectTrigger>
-                                <SelectValue placeholder="서브 제목 컬럼 선택 (선택사항)" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="">선택 안함</SelectItem>
-                                {availableColumns.map((column) => (
-                                  <SelectItem key={column.columnName} value={column.columnName}>
-                                    {column.label || column.columnName}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          </div>
-
-                          <div className="space-y-2">
-                            <Label htmlFor="description-column">설명 컬럼</Label>
-                            <Select
-                              value={config.cardConfig?.descriptionColumn || ""}
-                              onValueChange={(value) => handleNestedChange("cardConfig", "descriptionColumn", value)}
-                            >
-                              <SelectTrigger>
-                                <SelectValue placeholder="설명 컬럼 선택 (선택사항)" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="">선택 안함</SelectItem>
-                                {availableColumns.map((column) => (
-                                  <SelectItem key={column.columnName} value={column.columnName}>
-                                    {column.label || column.columnName}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="flex items-center space-x-2">
-                        <Checkbox
-                          id="show-card-actions"
-                          checked={config.cardConfig?.showActions !== false}
-                          onCheckedChange={(checked) =>
-                            handleNestedChange("cardConfig", "showActions", checked as boolean)
-                          }
-                        />
-                        <Label htmlFor="show-card-actions" className="cursor-pointer">
-                          카드에 액션 버튼 표시
-                        </Label>
-                      </div>
-                    </div>
+        {/* 컬럼 설정 */}
+        {/* 🎯 엔티티 컬럼 표시 설정 섹션 */}
+        {config.columns?.some((col) => col.isEntityJoin) && (
+          <div className="space-y-3">
+            {config.columns
+              ?.filter((col) => col.isEntityJoin && col.entityDisplayConfig)
+              .map((column) => (
+                <div key={column.columnName} className="space-y-2">
+                  <div className="mb-2">
+                    <span className="truncate text-xs font-medium" style={{ fontSize: "12px" }}>
+                      {column.displayName || column.columnName}
+                    </span>
                   </div>
-                )}
-              </CardContent>
-            </Card>
 
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">연결된 테이블</CardTitle>
-                <CardDescription>화면에 연결된 테이블 정보가 자동으로 매핑됩니다</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="space-y-2">
-                  <Label>현재 연결된 테이블</Label>
-                  <div className="rounded-md bg-gray-50 p-3">
-                    <div className="text-sm font-medium">
-                      {screenTableName ? (
-                        <span className="text-blue-600">{screenTableName}</span>
-                      ) : (
-                        <span className="text-gray-500">테이블이 연결되지 않았습니다</span>
-                      )}
-                    </div>
-                    {screenTableName && (
-                      <div className="mt-1 text-xs text-gray-500">화면 설정에서 자동으로 연결된 테이블입니다</div>
-                    )}
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="title">제목</Label>
-                  <Input
-                    id="title"
-                    value={config.title || ""}
-                    onChange={(e) => handleChange("title", e.target.value)}
-                    placeholder="테이블 제목 (선택사항)"
-                  />
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">표시 설정</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="showHeader"
-                    checked={config.showHeader}
-                    onCheckedChange={(checked) => handleChange("showHeader", checked)}
-                  />
-                  <Label htmlFor="showHeader">헤더 표시</Label>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="showFooter"
-                    checked={config.showFooter}
-                    onCheckedChange={(checked) => handleChange("showFooter", checked)}
-                  />
-                  <Label htmlFor="showFooter">푸터 표시</Label>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="autoLoad"
-                    checked={config.autoLoad}
-                    onCheckedChange={(checked) => handleChange("autoLoad", checked)}
-                  />
-                  <Label htmlFor="autoLoad">자동 데이터 로드</Label>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">높이 설정</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="space-y-2">
-                  <Label>높이 모드</Label>
-                  <Select
-                    value={config.height}
-                    onValueChange={(value: "auto" | "fixed" | "viewport") => handleChange("height", value)}
-                  >
-                    <SelectTrigger>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="auto">자동</SelectItem>
-                      <SelectItem value="fixed">고정</SelectItem>
-                      <SelectItem value="viewport">화면 높이</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                {config.height === "fixed" && (
-                  <div className="space-y-2">
-                    <Label htmlFor="fixedHeight">고정 높이 (px)</Label>
-                    <Input
-                      id="fixedHeight"
-                      type="number"
-                      value={config.fixedHeight || 400}
-                      onChange={(e) => handleChange("fixedHeight", parseInt(e.target.value) || 400)}
-                      min={200}
-                      max={1000}
-                    />
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">페이지네이션</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="paginationEnabled"
-                    checked={config.pagination?.enabled}
-                    onCheckedChange={(checked) => handleNestedChange("pagination", "enabled", checked)}
-                  />
-                  <Label htmlFor="paginationEnabled">페이지네이션 사용</Label>
-                </div>
-
-                {config.pagination?.enabled && (
-                  <>
+                  {entityDisplayConfigs[column.columnName] ? (
                     <div className="space-y-2">
-                      <Label htmlFor="pageSize">페이지 크기</Label>
-                      <Select
-                        key={`pageSize-${config.pagination?.pageSize}`}
-                        value={config.pagination?.pageSize?.toString() || "20"}
-                        onValueChange={(value) => {
-                          // console.log("🎯 상세설정에서 페이지 크기 변경:", {
-                          //   from: config.pagination?.pageSize,
-                          //   to: parseInt(value),
-                          //   currentConfigPageSize: config.pagination?.pageSize
-                          // });
-                          handleNestedChange("pagination", "pageSize", parseInt(value));
-                        }}
-                      >
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="10">10개씩</SelectItem>
-                          <SelectItem value="20">20개씩</SelectItem>
-                          <SelectItem value="50">50개씩</SelectItem>
-                          <SelectItem value="100">100개씩</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    <div className="flex items-center space-x-2">
-                      <Checkbox
-                        id="showSizeSelector"
-                        checked={config.pagination?.showSizeSelector}
-                        onCheckedChange={(checked) => handleNestedChange("pagination", "showSizeSelector", checked)}
-                      />
-                      <Label htmlFor="showSizeSelector">페이지 크기 선택기 표시</Label>
-                    </div>
-
-                    <div className="flex items-center space-x-2">
-                      <Checkbox
-                        id="showPageInfo"
-                        checked={config.pagination?.showPageInfo}
-                        onCheckedChange={(checked) => handleNestedChange("pagination", "showPageInfo", checked)}
-                      />
-                      <Label htmlFor="showPageInfo">페이지 정보 표시</Label>
-                    </div>
-                  </>
-                )}
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">가로 스크롤 및 컬럼 고정</CardTitle>
-                <CardDescription>컬럼이 많을 때 가로 스크롤과 컬럼 고정 기능을 설정하세요</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="horizontalScrollEnabled"
-                    checked={config.horizontalScroll?.enabled}
-                    onCheckedChange={(checked) => handleNestedChange("horizontalScroll", "enabled", checked)}
-                  />
-                  <Label htmlFor="horizontalScrollEnabled">가로 스크롤 사용</Label>
-                </div>
-
-                {config.horizontalScroll?.enabled && (
-                  <div className="space-y-3">
-                    <div className="space-y-1">
-                      <Label htmlFor="maxVisibleColumns" className="text-sm">
-                        최대 표시 컬럼 수
-                      </Label>
-                      <Input
-                        id="maxVisibleColumns"
-                        type="number"
-                        value={config.horizontalScroll?.maxVisibleColumns || 8}
-                        onChange={(e) =>
-                          handleNestedChange("horizontalScroll", "maxVisibleColumns", parseInt(e.target.value) || 8)
-                        }
-                        min={3}
-                        max={20}
-                        placeholder="8"
-                        className="h-8"
-                      />
-                      <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
-                    </div>
-
-                    <div className="grid grid-cols-2 gap-2">
+                      {/* 구분자 설정 */}
                       <div className="space-y-1">
-                        <Label htmlFor="minColumnWidth" className="text-sm">
-                          최소 너비 (px)
-                        </Label>
+                        <Label className="text-xs">구분자</Label>
                         <Input
-                          id="minColumnWidth"
-                          type="number"
-                          value={config.horizontalScroll?.minColumnWidth || 100}
-                          onChange={(e) =>
-                            handleNestedChange("horizontalScroll", "minColumnWidth", parseInt(e.target.value) || 100)
-                          }
-                          min={50}
-                          max={500}
-                          placeholder="100"
-                          className="h-8"
+                          value={entityDisplayConfigs[column.columnName].separator}
+                          onChange={(e) => updateEntityDisplaySeparator(column.columnName, e.target.value)}
+                          className="h-6 w-full text-xs"
+                          style={{ fontSize: "12px" }}
+                          placeholder=" - "
                         />
                       </div>
 
+                      {/* 표시 컬럼 선택 (다중 선택) */}
                       <div className="space-y-1">
-                        <Label htmlFor="maxColumnWidth" className="text-sm">
-                          최대 너비 (px)
-                        </Label>
-                        <Input
-                          id="maxColumnWidth"
-                          type="number"
-                          value={config.horizontalScroll?.maxColumnWidth || 300}
-                          onChange={(e) =>
-                            handleNestedChange("horizontalScroll", "maxColumnWidth", parseInt(e.target.value) || 300)
-                          }
-                          min={100}
-                          max={800}
-                          placeholder="300"
-                          className="h-8"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">체크박스 설정</CardTitle>
-                <CardDescription>행 선택을 위한 체크박스 기능을 설정하세요</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="checkboxEnabled"
-                    checked={config.checkbox?.enabled}
-                    onCheckedChange={(checked) => handleNestedChange("checkbox", "enabled", checked)}
-                  />
-                  <Label htmlFor="checkboxEnabled">체크박스 사용</Label>
-                </div>
-
-                {config.checkbox?.enabled && (
-                  <div className="space-y-3">
-                    <div className="flex items-center space-x-2">
-                      <Checkbox
-                        id="checkboxMultiple"
-                        checked={config.checkbox?.multiple}
-                        onCheckedChange={(checked) => handleNestedChange("checkbox", "multiple", checked)}
-                      />
-                      <Label htmlFor="checkboxMultiple">다중 선택 (체크박스)</Label>
-                    </div>
-
-                    <div className="space-y-1">
-                      <Label htmlFor="checkboxPosition" className="text-sm">
-                        체크박스 위치
-                      </Label>
-                      <Select
-                        value={config.checkbox?.position || "left"}
-                        onValueChange={(value) => handleNestedChange("checkbox", "position", value)}
-                      >
-                        <SelectTrigger className="h-8">
-                          <SelectValue placeholder="위치 선택" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="left">왼쪽</SelectItem>
-                          <SelectItem value="right">오른쪽</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    <div className="flex items-center space-x-2">
-                      <Checkbox
-                        id="checkboxSelectAll"
-                        checked={config.checkbox?.selectAll}
-                        onCheckedChange={(checked) => handleNestedChange("checkbox", "selectAll", checked)}
-                      />
-                      <Label htmlFor="checkboxSelectAll">전체 선택/해제 버튼 표시</Label>
-                    </div>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          </ScrollArea>
-        </TabsContent>
-
-        {/* 컬럼 설정 탭 */}
-        <TabsContent value="columns" className="space-y-4">
-          <ScrollArea className="h-[600px] pr-4">
-            {/* 🎯 엔티티 컬럼 표시 설정 섹션 - 컬럼 설정 패널 바깥으로 분리 */}
-            {config.columns?.some((col) => col.isEntityJoin) && (
-              <Card className="border-l-4 border-l-orange-500">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2 text-base">🎯 엔티티 컬럼 표시 설정</CardTitle>
-                  <CardDescription>엔티티 타입 컬럼의 표시할 컬럼들을 조합하여 설정하세요</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  {config.columns
-                    ?.filter((col) => col.isEntityJoin && col.entityDisplayConfig)
-                    .map((column) => (
-                      <div key={column.columnName} className="space-y-3 rounded-lg border bg-orange-50 p-3">
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-2">
-                            <Badge variant="outline" className="border-orange-300 text-orange-600">
-                              {column.columnName}
-                            </Badge>
-                            <span className="text-sm font-medium">{column.displayName}</span>
-                          </div>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => {
-                              // sourceTable 정보가 있는지 확인
-                              const hasSourceTable =
-                                column.entityDisplayConfig?.sourceTable ||
-                                column.entityJoinInfo?.sourceTable ||
-                                config.selectedTable ||
-                                screenTableName;
-
-                              if (!hasSourceTable) {
-                                console.error("❌ sourceTable 정보를 찾을 수 없어서 컬럼 로드 불가:", {
-                                  columnName: column.columnName,
-                                  entityDisplayConfig: column.entityDisplayConfig,
-                                  entityJoinInfo: column.entityJoinInfo,
-                                  configSelectedTable: config.selectedTable,
-                                  screenTableName,
-                                });
-                                alert("컬럼 정보를 로드할 수 없습니다. 테이블 정보가 없습니다.");
-                                return;
-                              }
-
-                              loadEntityDisplayConfig(column);
-                            }}
-                            disabled={
-                              !column.entityDisplayConfig?.sourceTable &&
-                              !column.entityJoinInfo?.sourceTable &&
-                              !config.selectedTable &&
-                              !screenTableName
-                            }
-                            className="h-6 text-xs"
-                          >
-                            <Plus className="mr-1 h-3 w-3" />
-                            컬럼 로드
-                          </Button>
-                        </div>
-
-                        {entityDisplayConfigs[column.columnName] && (
-                          <div className="space-y-3">
-                            {/* 구분자 설정 */}
-                            <div className="space-y-1">
-                              <Label className="text-xs">구분자</Label>
-                              <Input
-                                value={entityDisplayConfigs[column.columnName].separator}
-                                onChange={(e) => updateEntityDisplaySeparator(column.columnName, e.target.value)}
-                                className="h-7 text-xs"
-                                placeholder=" - "
-                              />
-                            </div>
-
-                            {/* 기본 테이블 컬럼 */}
-                            <div className="space-y-1">
-                              <Label className="text-xs text-blue-600">
-                                기본 테이블: {column.entityDisplayConfig?.sourceTable}
-                              </Label>
-                              <div className="grid max-h-20 grid-cols-2 gap-1 overflow-y-auto">
-                                {entityDisplayConfigs[column.columnName].sourceColumns.map((col) => (
-                                  <div key={col.columnName} className="flex items-center space-x-1">
-                                    <Checkbox
-                                      id={`source-${column.columnName}-${col.columnName}`}
-                                      checked={entityDisplayConfigs[column.columnName].selectedColumns.includes(
-                                        col.columnName,
-                                      )}
-                                      onCheckedChange={() =>
-                                        toggleEntityDisplayColumn(column.columnName, col.columnName)
-                                      }
-                                      className="h-3 w-3"
-                                    />
-                                    <Label
-                                      htmlFor={`source-${column.columnName}-${col.columnName}`}
-                                      className="flex-1 cursor-pointer text-xs"
-                                    >
-                                      {col.displayName}
-                                    </Label>
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-
-                            {/* 조인 테이블 컬럼 */}
-                            <div className="space-y-1">
-                              <Label className="text-xs text-green-600">
-                                조인 테이블: {column.entityDisplayConfig?.joinTable}
-                              </Label>
-                              <div className="grid max-h-20 grid-cols-2 gap-1 overflow-y-auto">
-                                {entityDisplayConfigs[column.columnName].joinColumns.map((col) => (
-                                  <div key={col.columnName} className="flex items-center space-x-1">
-                                    <Checkbox
-                                      id={`join-${column.columnName}-${col.columnName}`}
-                                      checked={entityDisplayConfigs[column.columnName].selectedColumns.includes(
-                                        col.columnName,
-                                      )}
-                                      onCheckedChange={() =>
-                                        toggleEntityDisplayColumn(column.columnName, col.columnName)
-                                      }
-                                      className="h-3 w-3"
-                                    />
-                                    <Label
-                                      htmlFor={`join-${column.columnName}-${col.columnName}`}
-                                      className="flex-1 cursor-pointer text-xs"
-                                    >
-                                      {col.displayName}
-                                    </Label>
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-
-                            {/* 선택된 컬럼 미리보기 */}
-                            {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
-                              <div className="space-y-1">
-                                <Label className="text-xs">미리보기</Label>
-                                <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
-                                  {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
-                                    <React.Fragment key={colName}>
-                                      <Badge variant="secondary" className="text-xs">
-                                        {colName}
-                                      </Badge>
-                                      {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
-                                        <span className="text-gray-400">
-                                          {entityDisplayConfigs[column.columnName].separator}
-                                        </span>
-                                      )}
-                                    </React.Fragment>
-                                  ))}
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    ))}
-                </CardContent>
-              </Card>
-            )}
-
-            {!screenTableName ? (
-              <Card>
-                <CardContent className="pt-6">
-                  <div className="text-center text-gray-500">
-                    <p>테이블이 연결되지 않았습니다.</p>
-                    <p className="text-sm">화면에 테이블을 연결한 후 컬럼을 설정할 수 있습니다.</p>
-                  </div>
-                </CardContent>
-              </Card>
-            ) : availableColumns.length === 0 ? (
-              <Card>
-                <CardContent className="pt-6">
-                  <div className="text-center text-gray-500">
-                    <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
-                    <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
-                    <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
-                  </div>
-                </CardContent>
-              </Card>
-            ) : (
-              <>
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="text-base">컬럼 추가 - {screenTableName}</CardTitle>
-                    <CardDescription>
-                      {availableColumns.length > 0
-                        ? `${availableColumns.length}개의 사용 가능한 컬럼에서 선택하세요`
-                        : "컬럼 정보를 불러오는 중..."}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    {availableColumns.length > 0 ? (
-                      <div className="flex flex-wrap gap-2">
-                        {availableColumns
-                          .filter((col) => !config.columns?.find((c) => c.columnName === col.columnName))
-                          .map((column) => (
+                        <Label className="text-xs">표시할 컬럼 선택</Label>
+                        <Popover>
+                          <PopoverTrigger asChild>
                             <Button
-                              key={column.columnName}
                               variant="outline"
-                              size="sm"
-                              onClick={() => addColumn(column.columnName)}
-                              className="flex items-center gap-1"
+                              className="h-6 w-full justify-between text-xs"
+                              style={{ fontSize: "12px" }}
                             >
-                              <Plus className="h-3 w-3" />
-                              {column.label || column.columnName}
-                              <Badge variant="secondary" className="text-xs">
-                                {column.dataType}
-                              </Badge>
+                              {entityDisplayConfigs[column.columnName].selectedColumns.length > 0
+                                ? `${entityDisplayConfigs[column.columnName].selectedColumns.length}개 선택됨`
+                                : "컬럼 선택"}
+                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                             </Button>
-                          ))}
+                          </PopoverTrigger>
+                          <PopoverContent className="w-full p-0" align="start">
+                            <Command>
+                              <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                              <CommandList>
+                                <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                                {entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
+                                  <CommandGroup heading={`기본: ${column.entityDisplayConfig?.sourceTable}`}>
+                                    {entityDisplayConfigs[column.columnName].sourceColumns.map((col) => (
+                                      <CommandItem
+                                        key={`source-${col.columnName}`}
+                                        onSelect={() => toggleEntityDisplayColumn(column.columnName, col.columnName)}
+                                        className="text-xs"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            entityDisplayConfigs[column.columnName].selectedColumns.includes(
+                                              col.columnName,
+                                            )
+                                              ? "opacity-100"
+                                              : "opacity-0",
+                                          )}
+                                        />
+                                        {col.displayName}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                                {entityDisplayConfigs[column.columnName].joinColumns.length > 0 && (
+                                  <CommandGroup heading={`조인: ${column.entityDisplayConfig?.joinTable}`}>
+                                    {entityDisplayConfigs[column.columnName].joinColumns.map((col) => (
+                                      <CommandItem
+                                        key={`join-${col.columnName}`}
+                                        onSelect={() => toggleEntityDisplayColumn(column.columnName, col.columnName)}
+                                        className="text-xs"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            entityDisplayConfigs[column.columnName].selectedColumns.includes(
+                                              col.columnName,
+                                            )
+                                              ? "opacity-100"
+                                              : "opacity-0",
+                                          )}
+                                        />
+                                        {col.displayName}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
                       </div>
-                    ) : (
-                      <div className="py-4 text-center text-gray-500">
-                        <p>컬럼 정보를 불러오는 중입니다...</p>
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-              </>
-            )}
 
-            {screenTableName && (
-              <Card>
-                <CardHeader>
-                  <CardTitle className="text-base">컬럼 설정</CardTitle>
-                  <CardDescription>선택된 컬럼들의 표시 옵션을 설정하세요</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <ScrollArea className="h-96">
-                    <div className="space-y-3">
-                      {config.columns?.map((column, index) => (
-                        <div key={column.columnName} className="space-y-3 rounded-lg border p-3">
-                          <div className="flex items-center justify-between">
-                            <div className="flex items-center space-x-2">
-                              <Checkbox
-                                checked={column.visible}
-                                onCheckedChange={(checked) =>
-                                  updateColumn(column.columnName, { visible: checked as boolean })
-                                }
-                              />
-                              <span className="font-medium">
-                                {availableColumns.find((col) => col.columnName === column.columnName)?.label ||
-                                  column.displayName ||
-                                  column.columnName}
-                              </span>
-                            </div>
-
-                            <div className="flex items-center space-x-1">
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => moveColumn(column.columnName, "up")}
-                                disabled={index === 0}
-                              >
-                                <ArrowUp className="h-3 w-3" />
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => moveColumn(column.columnName, "down")}
-                                disabled={index === (config.columns?.length || 0) - 1}
-                              >
-                                <ArrowDown className="h-3 w-3" />
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => removeColumn(column.columnName)}
-                                className="text-red-500 hover:text-red-600"
-                              >
-                                <Trash2 className="h-3 w-3" />
-                              </Button>
-                            </div>
+                      {/* 선택된 컬럼 미리보기 */}
+                      {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
+                        <div className="space-y-1">
+                          <Label className="text-xs">미리보기</Label>
+                          <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
+                            {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
+                              <React.Fragment key={colName}>
+                                <Badge variant="secondary" className="text-xs">
+                                  {colName}
+                                </Badge>
+                                {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
+                                  <span className="text-gray-400">
+                                    {entityDisplayConfigs[column.columnName].separator}
+                                  </span>
+                                )}
+                              </React.Fragment>
+                            ))}
                           </div>
-
-                          {column.visible && (
-                            <div className="grid grid-cols-2 gap-3">
-                              <div className="space-y-1">
-                                <Label className="text-xs">표시명</Label>
-                                <Input
-                                  value={
-                                    availableColumns.find((col) => col.columnName === column.columnName)?.label ||
-                                    column.displayName ||
-                                    column.columnName
-                                  }
-                                  onChange={(e) => updateColumn(column.columnName, { displayName: e.target.value })}
-                                  className="h-8"
-                                />
-                              </div>
-
-                              {/* 엔티티 타입 컬럼 표시 */}
-                              {column.isEntityJoin && (
-                                <div className="col-span-2">
-                                  <div className="flex items-center gap-2 rounded bg-orange-50 p-2">
-                                    <Badge variant="outline" className="border-orange-300 text-orange-600">
-                                      엔티티 타입
-                                    </Badge>
-                                    <span className="text-xs text-orange-600">
-                                      표시 컬럼 설정은 상단의 "🎯 엔티티 컬럼 표시 설정" 섹션에서 하세요
-                                    </span>
-                                  </div>
-                                </div>
-                              )}
-
-                              <div className="space-y-1">
-                                <Label className="text-xs">정렬</Label>
-                                <Select
-                                  value={column.align}
-                                  onValueChange={(value: "left" | "center" | "right") =>
-                                    updateColumn(column.columnName, { align: value })
-                                  }
-                                >
-                                  <SelectTrigger className="h-8">
-                                    <SelectValue />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    <SelectItem value="left">왼쪽</SelectItem>
-                                    <SelectItem value="center">가운데</SelectItem>
-                                    <SelectItem value="right">오른쪽</SelectItem>
-                                  </SelectContent>
-                                </Select>
-                              </div>
-
-                              <div className="space-y-1">
-                                <Label className="text-xs">형식</Label>
-                                <Select
-                                  value={column.format}
-                                  onValueChange={(value: "text" | "number" | "date" | "currency" | "boolean") =>
-                                    updateColumn(column.columnName, { format: value })
-                                  }
-                                >
-                                  <SelectTrigger className="h-8">
-                                    <SelectValue />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    <SelectItem value="text">텍스트</SelectItem>
-                                    <SelectItem value="number">숫자</SelectItem>
-                                    <SelectItem value="date">날짜</SelectItem>
-                                    <SelectItem value="currency">통화</SelectItem>
-                                    <SelectItem value="boolean">불린</SelectItem>
-                                  </SelectContent>
-                                </Select>
-                              </div>
-
-                              <div className="space-y-1">
-                                <Label className="text-xs">너비 (px)</Label>
-                                <Input
-                                  type="number"
-                                  value={column.width || ""}
-                                  onChange={(e) =>
-                                    updateColumn(column.columnName, {
-                                      width: e.target.value ? parseInt(e.target.value) : undefined,
-                                    })
-                                  }
-                                  placeholder="자동"
-                                  className="h-8"
-                                />
-                              </div>
-
-                              <div className="space-y-1">
-                                <Label className="text-xs">컬럼 고정</Label>
-                                <Select
-                                  value={column.fixed === false ? "none" : column.fixed || "none"}
-                                  onValueChange={(value: string) => {
-                                    const fixedValue = value === "none" ? false : (value as "left" | "right");
-                                    updateColumn(column.columnName, {
-                                      fixed: fixedValue,
-                                      fixedOrder: fixedValue ? column.fixedOrder || 0 : undefined,
-                                    });
-                                  }}
-                                >
-                                  <SelectTrigger className="h-8">
-                                    <SelectValue />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    <SelectItem value="none">고정 안함</SelectItem>
-                                    <SelectItem value="left">왼쪽 고정</SelectItem>
-                                    <SelectItem value="right">오른쪽 고정</SelectItem>
-                                  </SelectContent>
-                                </Select>
-                              </div>
-
-                              {(column.fixed === "left" || column.fixed === "right") && (
-                                <div className="space-y-1">
-                                  <Label className="text-xs">고정 순서</Label>
-                                  <Input
-                                    type="number"
-                                    value={column.fixedOrder || 0}
-                                    onChange={(e) =>
-                                      updateColumn(column.columnName, {
-                                        fixedOrder: parseInt(e.target.value) || 0,
-                                      })
-                                    }
-                                    placeholder="0"
-                                    className="h-8"
-                                    min="0"
-                                  />
-                                </div>
-                              )}
-
-                              <div className="flex items-center space-x-4">
-                                <div className="flex items-center space-x-1">
-                                  <Checkbox
-                                    checked={column.sortable}
-                                    onCheckedChange={(checked) =>
-                                      updateColumn(column.columnName, { sortable: checked as boolean })
-                                    }
-                                  />
-                                  <Label className="text-xs">정렬 가능</Label>
-                                </div>
-                                <div className="flex items-center space-x-1">
-                                  <Checkbox
-                                    checked={column.searchable}
-                                    onCheckedChange={(checked) =>
-                                      updateColumn(column.columnName, { searchable: checked as boolean })
-                                    }
-                                  />
-                                  <Label className="text-xs">검색 가능</Label>
-                                </div>
-                              </div>
-                            </div>
-                          )}
                         </div>
-                      ))}
-                    </div>
-                  </ScrollArea>
-                </CardContent>
-              </Card>
-            )}
-          </ScrollArea>
-        </TabsContent>
-
-        {/* Entity 조인 컬럼 추가 탭 */}
-        <TabsContent value="join-columns" className="space-y-4">
-          <ScrollArea className="h-[600px] pr-4">
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">Entity 조인 컬럼 추가</CardTitle>
-                <CardDescription>Entity 조인된 테이블의 다른 컬럼들을 추가로 표시할 수 있습니다.</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <ScrollArea className="max-h-96 pr-4">
-                  {loadingEntityJoins ? (
-                    <div className="text-muted-foreground py-4 text-center">조인 정보를 가져오는 중...</div>
-                  ) : entityJoinColumns.joinTables.length === 0 ? (
-                    <div className="text-muted-foreground py-8 text-center">
-                      <div className="text-sm">Entity 조인이 설정된 컬럼이 없습니다.</div>
-                      <div className="mt-1 text-xs">
-                        먼저 컬럼의 웹타입을 'entity'로 설정하고 참조 테이블을 지정해주세요.
-                      </div>
+                      )}
                     </div>
                   ) : (
-                    <div className="space-y-4">
-                      {/* 조인 테이블별 그룹 */}
-                      {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
-                        <Card key={tableIndex} className="border-l-4 border-l-blue-500">
-                          <CardHeader className="pb-3">
-                            <CardTitle className="flex items-center gap-2 text-sm">
-                              📊 {joinTable.tableName}
-                              <Badge variant="outline" className="text-xs">
-                                현재: {joinTable.currentDisplayColumn}
-                              </Badge>
-                            </CardTitle>
-                          </CardHeader>
-                          <CardContent className="pt-0">
-                            {joinTable.availableColumns.length === 0 ? (
-                              <div className="text-muted-foreground py-2 text-sm">추가할 수 있는 컬럼이 없습니다.</div>
-                            ) : (
-                              <div className="grid gap-2">
-                                {joinTable.availableColumns.map((column, colIndex) => {
-                                  const matchingJoinColumn = entityJoinColumns.availableColumns.find(
-                                    (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
-                                  );
-
-                                  const isAlreadyAdded = config.columns?.some(
-                                    (col) => col.columnName === matchingJoinColumn?.joinAlias,
-                                  );
-
-                                  return (
-                                    <div
-                                      key={colIndex}
-                                      className="flex items-center justify-between rounded border p-2"
-                                    >
-                                      <div className="flex-1">
-                                        <div className="text-sm font-medium">{column.columnLabel}</div>
-                                        <div className="text-muted-foreground text-xs">
-                                          {column.columnName} ({column.dataType})
-                                        </div>
-                                        {column.description && (
-                                          <div className="text-muted-foreground mt-1 text-xs">{column.description}</div>
-                                        )}
-                                      </div>
-                                      <div className="flex items-center gap-2">
-                                        {isAlreadyAdded ? (
-                                          <Badge variant="secondary" className="text-xs">
-                                            추가됨
-                                          </Badge>
-                                        ) : (
-                                          matchingJoinColumn && (
-                                            <Button
-                                              size="sm"
-                                              variant="outline"
-                                              onClick={() => addEntityColumn(matchingJoinColumn)}
-                                              className="text-xs"
-                                            >
-                                              <Plus className="mr-1 h-3 w-3" />
-                                              추가
-                                            </Button>
-                                          )
-                                        )}
-                                      </div>
-                                    </div>
-                                  );
-                                })}
-                              </div>
-                            )}
-                          </CardContent>
-                        </Card>
-                      ))}
-
-                      {/* 전체 사용 가능한 컬럼 요약 */}
-                      {entityJoinColumns.availableColumns.length > 0 && (
-                        <Card className="bg-muted/30">
-                          <CardHeader className="pb-3">
-                            <CardTitle className="text-sm">📋 추가 가능한 컬럼 요약</CardTitle>
-                          </CardHeader>
-                          <CardContent className="pt-0">
-                            <div className="text-muted-foreground mb-2 text-sm">
-                              총 {entityJoinColumns.availableColumns.length}개의 컬럼을 추가할 수 있습니다.
-                            </div>
-                            <div className="flex flex-wrap gap-1">
-                              {entityJoinColumns.availableColumns.map((column, index) => {
-                                const isAlreadyAdded = config.columns?.some(
-                                  (col) => col.columnName === column.joinAlias,
-                                );
-
-                                return (
-                                  <Badge
-                                    key={index}
-                                    variant={isAlreadyAdded ? "secondary" : "outline"}
-                                    className="cursor-pointer text-xs"
-                                    onClick={() => !isAlreadyAdded && addEntityColumn(column)}
-                                  >
-                                    {column.columnLabel}
-                                    {!isAlreadyAdded && <Plus className="ml-1 h-2 w-2" />}
-                                  </Badge>
-                                );
-                              })}
-                            </div>
-                          </CardContent>
-                        </Card>
-                      )}
-                    </div>
+                    <div className="py-4 text-center text-xs text-gray-400">컬럼 정보 로딩 중...</div>
                   )}
-                </ScrollArea>
-              </CardContent>
-            </Card>
-          </ScrollArea>
-        </TabsContent>
-
-        {/* 필터 설정 탭 */}
-        <TabsContent value="filter" className="space-y-4">
-          <ScrollArea className="h-[600px] pr-4">
-            {/* 필터 기능 활성화 */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">필터 설정</CardTitle>
-                <CardDescription>테이블에서 사용할 검색 필터를 설정하세요</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="filterEnabled"
-                    checked={config.filter?.enabled || false}
-                    onCheckedChange={(checked) => handleNestedChange("filter", "enabled", checked)}
-                  />
-                  <Label htmlFor="filterEnabled">필터 기능 사용</Label>
                 </div>
-              </CardContent>
-            </Card>
+              ))}
+          </div>
+        )}
 
-            {/* 필터 목록 */}
-            {config.filter?.enabled && (
-              <Card>
-                <CardHeader>
-                  <CardTitle className="text-base">사용할 필터</CardTitle>
-                  <CardDescription>검색에 사용할 컬럼 필터를 추가하고 설정하세요</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  {/* 필터 추가 버튼 */}
-                  {availableColumns.length > 0 && (
-                    <div className="flex flex-wrap gap-2">
-                      {availableColumns
-                        .filter((col) => !config.filter?.filters?.find((f) => f.columnName === col.columnName))
-                        .map((column) => (
+        {!screenTableName ? (
+          <div className="space-y-3">
+            <div className="text-center text-gray-500">
+              <p>테이블이 연결되지 않았습니다.</p>
+              <p className="text-sm">화면에 테이블을 연결한 후 컬럼을 설정할 수 있습니다.</p>
+            </div>
+          </div>
+        ) : availableColumns.length === 0 ? (
+          <div className="space-y-3">
+            <div className="text-center text-gray-500">
+              <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
+              <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
+              <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-2">
+              <div>
+                <h3 className="text-sm font-semibold">컬럼 추가</h3>
+              </div>
+              <hr className="border-border" />
+              {availableColumns.length > 0 ? (
+                <div className="space-y-1">
+                  {availableColumns
+                    .filter((col) => !config.columns?.find((c) => c.columnName === col.columnName))
+                    .map((column) => (
+                      <Button
+                        key={column.columnName}
+                        variant="outline"
+                        size="sm"
+                        onClick={() => addColumn(column.columnName)}
+                        className="h-6 w-full justify-start px-2 text-xs"
+                        style={{ fontSize: "12px" }}
+                      >
+                        <Plus className="mr-1 h-3 w-3 shrink-0" />
+                        <span className="truncate">{column.label || column.columnName}</span>
+                      </Button>
+                    ))}
+                </div>
+              ) : (
+                <div className="text-muted-foreground py-2 text-center text-xs">컬럼 정보를 불러오는 중...</div>
+              )}
+            </div>
+
+            {/* Entity 조인 컬럼 추가 */}
+            {entityJoinColumns.joinTables.length > 0 && (
+              <div className="space-y-2">
+                <div>
+                  <h3 className="text-sm font-semibold">Entity 조인 컬럼 추가</h3>
+                </div>
+                <hr className="border-border" />
+                <div className="space-y-3">
+                  {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
+                    <div key={tableIndex} className="space-y-1">
+                      <div className="flex items-center gap-2 px-2">
+                        <span className="text-xs font-medium">{joinTable.tableName}</span>
+                        <Badge variant="outline" className="text-[10px]">
+                          {joinTable.currentDisplayColumn}
+                        </Badge>
+                      </div>
+                      {joinTable.availableColumns.map((column, colIndex) => {
+                        const matchingJoinColumn = entityJoinColumns.availableColumns.find(
+                          (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                        );
+
+                        const isAlreadyAdded = config.columns?.some(
+                          (col) => col.columnName === matchingJoinColumn?.joinAlias,
+                        );
+
+                        return matchingJoinColumn && !isAlreadyAdded ? (
                           <Button
-                            key={column.columnName}
+                            key={colIndex}
                             variant="outline"
                             size="sm"
-                            onClick={() => addFilter(column.columnName)}
-                            className="flex items-center gap-1"
+                            onClick={() => addEntityColumn(matchingJoinColumn)}
+                            className="h-6 w-full justify-start px-2 text-xs"
+                            style={{ fontSize: "12px" }}
                           >
-                            <Plus className="h-3 w-3" />
-                            {column.label || column.columnName}
-                            <Badge variant="secondary" className="text-xs">
-                              {column.dataType}
-                            </Badge>
+                            <Plus className="mr-1 h-3 w-3 shrink-0" />
+                            <span className="truncate">{column.columnLabel}</span>
                           </Button>
-                        ))}
+                        ) : null;
+                      })}
                     </div>
-                  )}
-
-                  {/* 설정된 필터 목록 */}
-                  {config.filter?.filters && config.filter.filters.length > 0 && (
-                    <div className="space-y-3">
-                      <h4 className="text-sm font-medium">설정된 필터</h4>
-                      {config.filter.filters.map((filter, index) => (
-                        <div key={filter.columnName} className="space-y-3 rounded-lg border p-4">
-                          <div className="flex items-center justify-between">
-                            <div className="flex items-center gap-2">
-                              <Badge variant="outline">{filter.widgetType}</Badge>
-                              <span className="font-medium">{filter.label}</span>
-                            </div>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => removeFilter(index)}
-                              className="text-red-600 hover:text-red-700"
-                            >
-                              <Trash2 className="h-3 w-3" />
-                            </Button>
-                          </div>
-
-                          <div className="grid grid-cols-2 gap-3">
-                            <div>
-                              <Label className="text-xs">표시명</Label>
-                              <Input
-                                value={filter.label}
-                                onChange={(e) => updateFilter(index, "label", e.target.value)}
-                                placeholder="필터 라벨"
-                              />
-                            </div>
-                            <div>
-                              <Label className="text-xs">그리드 컬럼</Label>
-                              <Select
-                                value={filter.gridColumns.toString()}
-                                onValueChange={(value) => updateFilter(index, "gridColumns", parseInt(value))}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  <SelectItem value="2">2칸</SelectItem>
-                                  <SelectItem value="3">3칸</SelectItem>
-                                  <SelectItem value="4">4칸</SelectItem>
-                                  <SelectItem value="6">6칸</SelectItem>
-                                </SelectContent>
-                              </Select>
-                            </div>
-
-                            {/* 숫자 타입인 경우 검색 모드 선택 */}
-                            {(filter.widgetType === "number" || filter.widgetType === "decimal") && (
-                              <div>
-                                <Label className="text-xs">검색 모드</Label>
-                                <Select
-                                  value={filter.numberFilterMode || "range"}
-                                  onValueChange={(value) => updateFilter(index, "numberFilterMode", value)}
-                                >
-                                  <SelectTrigger>
-                                    <SelectValue />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    <SelectItem value="exact">정확한 값</SelectItem>
-                                    <SelectItem value="range">범위 검색</SelectItem>
-                                  </SelectContent>
-                                </Select>
-                              </div>
-                            )}
-
-                            {/* 코드 타입인 경우 코드 카테고리 */}
-                            {filter.widgetType === "code" && (
-                              <div>
-                                <Label className="text-xs">코드 카테고리</Label>
-                                <Input
-                                  value={filter.codeCategory || ""}
-                                  onChange={(e) => updateFilter(index, "codeCategory", e.target.value)}
-                                  placeholder="코드 카테고리"
-                                />
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
+                  ))}
+                </div>
+              </div>
             )}
-          </ScrollArea>
-        </TabsContent>
+          </>
+        )}
 
-        {/* 액션 설정 탭 */}
-        <TabsContent value="actions" className="space-y-4">
-          <ScrollArea className="h-[600px] pr-4">
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">행 액션</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="showActions"
-                    checked={config.actions?.showActions}
-                    onCheckedChange={(checked) => handleNestedChange("actions", "showActions", checked)}
-                  />
-                  <Label htmlFor="showActions">행 액션 버튼 표시</Label>
-                </div>
+        {screenTableName && (
+          <div className="space-y-3">
+            <div>
+              <h3 className="text-sm font-semibold">컬럼 설정</h3>
+              <p className="text-muted-foreground text-xs">컬럼별 표시 옵션을 설정하세요</p>
+            </div>
+            <hr className="border-border" />
 
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="bulkActions"
-                    checked={config.actions?.bulkActions}
-                    onCheckedChange={(checked) => handleNestedChange("actions", "bulkActions", checked)}
-                  />
-                  <Label htmlFor="bulkActions">일괄 액션 사용</Label>
-                </div>
-              </CardContent>
-            </Card>
-          </ScrollArea>
-        </TabsContent>
+            {/* 간결한 리스트 형식 컬럼 설정 */}
+            <div className="space-y-1">
+              {config.columns?.map((column, index) => (
+                <div
+                  key={column.columnName}
+                  className="hover:bg-muted/30 flex h-6 items-center justify-between rounded border px-2"
+                >
+                  {/* 컬럼명 */}
+                  <span className="flex-1 truncate text-xs" style={{ fontSize: "12px" }}>
+                    {availableColumns.find((col) => col.columnName === column.columnName)?.label ||
+                      column.displayName ||
+                      column.columnName}
+                  </span>
 
-        {/* 스타일 설정 탭 */}
-        <TabsContent value="style" className="space-y-4">
-          <ScrollArea className="h-[600px] pr-4">
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">테이블 스타일</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="space-y-2">
-                  <Label>테마</Label>
-                  <Select
-                    value={config.tableStyle?.theme}
-                    onValueChange={(value: "default" | "striped" | "bordered" | "minimal") =>
-                      handleNestedChange("tableStyle", "theme", value)
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="default">기본</SelectItem>
-                      <SelectItem value="striped">줄무늬</SelectItem>
-                      <SelectItem value="bordered">테두리</SelectItem>
-                      <SelectItem value="minimal">미니멀</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
+                  {/* 필터 체크박스 + 순서 변경 + 삭제 버튼 */}
+                  <div className="flex shrink-0 items-center gap-1">
+                    <Checkbox
+                      checked={config.filter?.filters?.some((f) => f.columnName === column.columnName) || false}
+                      onCheckedChange={(checked) => {
+                        const currentFilters = config.filter?.filters || [];
+                        const columnLabel =
+                          availableColumns.find((col) => col.columnName === column.columnName)?.label ||
+                          column.displayName ||
+                          column.columnName;
 
-                <div className="space-y-2">
-                  <Label>행 높이</Label>
-                  <Select
-                    value={config.tableStyle?.rowHeight}
-                    onValueChange={(value: "compact" | "normal" | "comfortable") =>
-                      handleNestedChange("tableStyle", "rowHeight", value)
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="compact">좁음</SelectItem>
-                      <SelectItem value="normal">보통</SelectItem>
-                      <SelectItem value="comfortable">넓음</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
+                        if (checked) {
+                          // 필터 추가
+                          handleChange("filter", {
+                            ...config.filter,
+                            enabled: true,
+                            filters: [
+                              ...currentFilters,
+                              {
+                                columnName: column.columnName,
+                                label: columnLabel,
+                                type: "text",
+                              },
+                            ],
+                          });
+                        } else {
+                          // 필터 제거
+                          handleChange("filter", {
+                            ...config.filter,
+                            filters: currentFilters.filter((f) => f.columnName !== column.columnName),
+                          });
+                        }
+                      }}
+                      className="h-3 w-3"
+                    />
+                  </div>
 
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="alternateRows"
-                    checked={config.tableStyle?.alternateRows}
-                    onCheckedChange={(checked) => handleNestedChange("tableStyle", "alternateRows", checked)}
-                  />
-                  <Label htmlFor="alternateRows">교대로 행 색상 변경</Label>
+                  {/* 순서 변경 + 삭제 버튼 */}
+                  <div className="flex shrink-0 items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => moveColumn(column.columnName, "up")}
+                      disabled={index === 0}
+                      className="h-6 w-6 p-0"
+                    >
+                      <ArrowUp className="h-3 w-3" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => moveColumn(column.columnName, "down")}
+                      disabled={index === (config.columns?.length || 0) - 1}
+                      className="h-6 w-6 p-0"
+                    >
+                      <ArrowDown className="h-3 w-3" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeColumn(column.columnName)}
+                      className="h-6 w-6 p-0 text-red-500 hover:text-red-600"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
                 </div>
-
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="hoverEffect"
-                    checked={config.tableStyle?.hoverEffect}
-                    onCheckedChange={(checked) => handleNestedChange("tableStyle", "hoverEffect", checked)}
-                  />
-                  <Label htmlFor="hoverEffect">마우스 오버 효과</Label>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="stickyHeader"
-                    checked={config.stickyHeader}
-                    onCheckedChange={(checked) => handleChange("stickyHeader", checked)}
-                  />
-                  <Label htmlFor="stickyHeader">헤더 고정</Label>
-                </div>
-              </CardContent>
-            </Card>
-          </ScrollArea>
-        </TabsContent>
-      </Tabs>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/frontend/lib/registry/components/text-input/TextInputComponent.tsx b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
index 7c963f6e..495d9775 100644
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -51,19 +51,6 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
   // 숨김 상태 (props에서 전달받은 값 우선 사용)
   const isHidden = props.hidden !== undefined ? props.hidden : component.hidden || componentConfig.hidden || false;
 
-  // 디버깅: 컴포넌트 설정 확인
-  console.log("👻 텍스트 입력 컴포넌트 상태:", {
-    componentId: component.id,
-    label: component.label,
-    isHidden,
-    componentConfig: componentConfig,
-    readonly: componentConfig.readonly,
-    disabled: componentConfig.disabled,
-    required: componentConfig.required,
-    isDesignMode,
-    willRender: !(isHidden && !isDesignMode),
-  });
-
   // 자동생성된 값 상태
   const [autoGeneratedValue, setAutoGeneratedValue] = useState<string>("");
 
@@ -94,55 +81,27 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
 
   // 자동생성 값 생성 (컴포넌트 마운트 시 또는 폼 데이터 변경 시)
   useEffect(() => {
-    console.log("🔄 자동생성 useEffect 실행:", {
-      enabled: testAutoGeneration.enabled,
-      type: testAutoGeneration.type,
-      isInteractive,
-      columnName: component.columnName,
-      hasFormData: !!formData,
-      hasOnFormDataChange: !!onFormDataChange,
-    });
-
     if (testAutoGeneration.enabled && testAutoGeneration.type !== "none") {
       // 폼 데이터에 이미 값이 있으면 자동생성하지 않음
       const currentFormValue = formData?.[component.columnName];
       const currentComponentValue = component.value;
 
-      console.log("🔍 자동생성 조건 확인:", {
-        currentFormValue,
-        currentComponentValue,
-        hasCurrentValue: !!(currentFormValue || currentComponentValue),
-        autoGeneratedValue,
-      });
-
       // 자동생성된 값이 없고, 현재 값도 없을 때만 생성
       if (!autoGeneratedValue && !currentFormValue && !currentComponentValue) {
         const generatedValue = AutoGenerationUtils.generateValue(testAutoGeneration, component.columnName);
-        console.log("✨ 자동생성된 값:", generatedValue);
 
         if (generatedValue) {
           setAutoGeneratedValue(generatedValue);
 
           // 폼 데이터에 자동생성된 값 설정 (인터랙티브 모드에서만)
           if (isInteractive && onFormDataChange && component.columnName) {
-            console.log("📝 폼 데이터에 자동생성 값 설정:", {
-              columnName: component.columnName,
-              value: generatedValue,
-            });
             onFormDataChange(component.columnName, generatedValue);
           }
         }
       } else if (!autoGeneratedValue && testAutoGeneration.type !== "none") {
         // 디자인 모드에서도 미리보기용 자동생성 값 표시
         const previewValue = AutoGenerationUtils.generatePreviewValue(testAutoGeneration);
-        console.log("🎨 디자인 모드 미리보기 값:", previewValue);
         setAutoGeneratedValue(previewValue);
-      } else {
-        console.log("⏭️ 이미 값이 있어서 자동생성 건너뜀:", {
-          hasAutoGenerated: !!autoGeneratedValue,
-          hasFormValue: !!currentFormValue,
-          hasComponentValue: !!currentComponentValue,
-        });
       }
     }
   }, [testAutoGeneration, isInteractive, component.columnName, component.value, formData, onFormDataChange]);
@@ -159,11 +118,12 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
     ...component.style,
     ...style,
     // 숨김 기능: 편집 모드에서만 연하게 표시
-    ...(isHidden && isDesignMode && {
-      opacity: 0.4,
-      backgroundColor: "#f3f4f6",
-      pointerEvents: "auto",
-    }),
+    ...(isHidden &&
+      isDesignMode && {
+        opacity: 0.4,
+        backgroundColor: "#f3f4f6",
+        pointerEvents: "auto",
+      }),
   };
 
   // 디자인 모드 스타일
@@ -636,18 +596,6 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
             displayValue = typeof rawValue === "object" ? "" : String(rawValue);
           }
 
-          console.log("📄 Input 값 계산:", {
-            isInteractive,
-            hasFormData: !!formData,
-            columnName: component.columnName,
-            formDataValue: formData?.[component.columnName],
-            formDataValueType: typeof formData?.[component.columnName],
-            componentValue: component.value,
-            autoGeneratedValue,
-            finalDisplayValue: displayValue,
-            isObject: typeof displayValue === "object",
-          });
-
           return displayValue;
         })()}
         placeholder={
diff --git a/frontend/lib/utils/autoGeneration.ts b/frontend/lib/utils/autoGeneration.ts
index d7f67f3b..d5f01db8 100644
--- a/frontend/lib/utils/autoGeneration.ts
+++ b/frontend/lib/utils/autoGeneration.ts
@@ -92,19 +92,19 @@ export class AutoGenerationUtils {
    * 현재 사용자 ID 가져오기 (실제로는 인증 컨텍스트에서 가져와야 함)
    */
   static getCurrentUserId(): string {
-    // TODO: 실제 인증 시스템과 연동
+    // JWT 토큰에서 사용자 정보 추출 시도
     if (typeof window !== "undefined") {
-      const userInfo = localStorage.getItem("userInfo");
-      if (userInfo) {
+      const token = localStorage.getItem("authToken");
+      if (token) {
         try {
-          const parsed = JSON.parse(userInfo);
-          return parsed.userId || parsed.id || "unknown";
+          const payload = JSON.parse(atob(token.split(".")[1]));
+          return payload.userId || payload.id || "unknown";
         } catch {
-          return "unknown";
+          // JWT 파싱 실패 시 fallback
         }
       }
     }
-    return "system";
+    return "unknown";
   }
 
   /**
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index f6205057..16ec7271 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -65,6 +65,9 @@ export interface ButtonActionContext {
   originalData?: Record<string, any>; // 부분 업데이트용 원본 데이터
   screenId?: number;
   tableName?: string;
+  userId?: string; // 🆕 현재 로그인한 사용자 ID
+  userName?: string; // 🆕 현재 로그인한 사용자 이름
+  companyCode?: string; // 🆕 현재 사용자의 회사 코드
   onFormDataChange?: (fieldName: string, value: any) => void;
   onClose?: () => void;
   onRefresh?: () => void;
@@ -207,10 +210,22 @@ export class ButtonActionExecutor {
           // INSERT 처리
           console.log("🆕 INSERT 모드로 저장:", { formData });
 
+          // 🆕 자동으로 작성자 정보 추가
+          const writerValue = context.userId || context.userName || "unknown";
+          const companyCodeValue = context.companyCode || "";
+
+          const dataWithUserInfo = {
+            ...formData,
+            writer: writerValue,
+            created_by: writerValue,
+            updated_by: writerValue,
+            company_code: companyCodeValue,
+          };
+
           saveResult = await DynamicFormApi.saveFormData({
             screenId,
             tableName,
-            data: formData,
+            data: dataWithUserInfo,
           });
         }
 
diff --git a/frontend/lib/utils/flowValidation.ts b/frontend/lib/utils/flowValidation.ts
index 97e8b0e5..193e9dde 100644
--- a/frontend/lib/utils/flowValidation.ts
+++ b/frontend/lib/utils/flowValidation.ts
@@ -1,6 +1,6 @@
 /**
  * 노드 플로우 검증 유틸리티
- * 
+ *
  * 감지 가능한 문제:
  * 1. 병렬 실행 시 동일 테이블/컬럼 충돌
  * 2. WHERE 조건 누락 (전체 테이블 삭제/업데이트)
@@ -26,12 +26,12 @@ export type FlowEdge = TypedFlowEdge;
 /**
  * 플로우 전체 검증
  */
-export function validateFlow(
-  nodes: FlowNode[],
-  edges: FlowEdge[]
-): FlowValidation[] {
+export function validateFlow(nodes: FlowNode[], edges: FlowEdge[]): FlowValidation[] {
   const validations: FlowValidation[] = [];
 
+  // 0. 연결되지 않은 노드 검증 (최우선)
+  validations.push(...detectDisconnectedNodes(nodes, edges));
+
   // 1. 병렬 실행 충돌 검증
   validations.push(...detectParallelConflicts(nodes, edges));
 
@@ -47,14 +47,44 @@ export function validateFlow(
   return validations;
 }
 
+/**
+ * 연결되지 않은 노드(고아 노드) 감지
+ */
+function detectDisconnectedNodes(nodes: FlowNode[], edges: FlowEdge[]): FlowValidation[] {
+  const validations: FlowValidation[] = [];
+
+  // 노드가 없으면 검증 스킵
+  if (nodes.length === 0) {
+    return validations;
+  }
+
+  // 연결된 노드 ID 수집
+  const connectedNodeIds = new Set<string>();
+  for (const edge of edges) {
+    connectedNodeIds.add(edge.source);
+    connectedNodeIds.add(edge.target);
+  }
+
+  // Comment 노드는 고아 노드여도 괜찮음 (메모 용도)
+  const disconnectedNodes = nodes.filter((node) => !connectedNodeIds.has(node.id) && node.type !== "comment");
+
+  // 고아 노드가 있으면 경고
+  for (const node of disconnectedNodes) {
+    validations.push({
+      nodeId: node.id,
+      severity: "warning",
+      type: "disconnected-node",
+      message: `"${node.data.displayName || node.type}" 노드가 다른 노드와 연결되어 있지 않습니다. 이 노드는 실행되지 않습니다.`,
+    });
+  }
+
+  return validations;
+}
+
 /**
  * 특정 노드에서 도달 가능한 모든 노드 찾기 (DFS)
  */
-function getReachableNodes(
-  startNodeId: string,
-  allNodes: FlowNode[],
-  edges: FlowEdge[]
-): FlowNode[] {
+function getReachableNodes(startNodeId: string, allNodes: FlowNode[], edges: FlowEdge[]): FlowNode[] {
   const reachable = new Set<string>();
   const visited = new Set<string>();
 
@@ -77,10 +107,7 @@ function getReachableNodes(
 /**
  * 병렬 실행 시 동일 테이블/컬럼 충돌 감지
  */
-function detectParallelConflicts(
-  nodes: FlowNode[],
-  edges: FlowEdge[]
-): FlowValidation[] {
+function detectParallelConflicts(nodes: FlowNode[], edges: FlowEdge[]): FlowValidation[] {
   const validations: FlowValidation[] = [];
 
   // 🆕 연결된 노드만 필터링 (고아 노드 제외)
@@ -93,41 +120,50 @@ function detectParallelConflicts(
   // 🆕 소스 노드 찾기
   const sourceNodes = nodes.filter(
     (node) =>
-      (node.type === "tableSource" ||
-        node.type === "externalDBSource" ||
-        node.type === "restAPISource") &&
-      connectedNodeIds.has(node.id)
+      (node.type === "tableSource" || node.type === "externalDBSource" || node.type === "restAPISource") &&
+      connectedNodeIds.has(node.id),
   );
 
   // 각 소스 노드에서 시작하는 플로우별로 검증
   for (const sourceNode of sourceNodes) {
     // 이 소스에서 도달 가능한 모든 노드 찾기
     const reachableNodes = getReachableNodes(sourceNode.id, nodes, edges);
-    
+
     // 레벨별로 그룹화
     const levels = groupNodesByLevel(
       reachableNodes,
       edges.filter(
-        (e) =>
-          reachableNodes.some((n) => n.id === e.source) &&
-          reachableNodes.some((n) => n.id === e.target)
-      )
+        (e) => reachableNodes.some((n) => n.id === e.source) && reachableNodes.some((n) => n.id === e.target),
+      ),
     );
 
     // 각 레벨에서 충돌 검사
     for (const [levelNum, levelNodes] of levels.entries()) {
-      const updateNodes = levelNodes.filter(
-        (node) => node.type === "updateAction" || node.type === "deleteAction"
-      );
+      const updateNodes = levelNodes.filter((node) => node.type === "updateAction" || node.type === "deleteAction");
 
       if (updateNodes.length < 2) continue;
 
+      // 🆕 조건 노드로 분기된 노드들인지 확인
+      // 같은 레벨의 노드들이 조건 노드를 통해 분기되었다면 병렬이 아님
+      const parentNodes = updateNodes.map((node) => {
+        const incomingEdge = edges.find((e) => e.target === node.id);
+        return incomingEdge ? nodes.find((n) => n.id === incomingEdge.source) : null;
+      });
+
+      // 모든 부모 노드가 같은 조건 노드라면 병렬이 아닌 조건 분기
+      const uniqueParents = new Set(parentNodes.map((p) => p?.id).filter(Boolean));
+      const isConditionalBranch = uniqueParents.size === 1 && parentNodes[0]?.type === "condition";
+
+      if (isConditionalBranch) {
+        // 조건 분기는 순차 실행이므로 병렬 충돌 검사 스킵
+        continue;
+      }
+
       // 같은 테이블을 수정하는 노드들 찾기
       const tableMap = new Map<string, FlowNode[]>();
 
       for (const node of updateNodes) {
-        const tableName =
-          node.data.targetTable || node.data.externalTargetTable;
+        const tableName = node.data.targetTable || node.data.externalTargetTable;
         if (tableName) {
           if (!tableMap.has(tableName)) {
             tableMap.set(tableName, []);
@@ -143,9 +179,7 @@ function detectParallelConflicts(
           const fieldMap = new Map<string, FlowNode[]>();
 
           for (const node of conflictNodes) {
-            const fields = node.data.fieldMappings?.map(
-              (m: any) => m.targetField
-            ) || [];
+            const fields = node.data.fieldMappings?.map((m: any) => m.targetField) || [];
             for (const field of fields) {
               if (!fieldMap.has(field)) {
                 fieldMap.set(field, []);
@@ -211,10 +245,7 @@ function detectMissingWhereConditions(nodes: FlowNode[]): FlowValidation[] {
 /**
  * 순환 참조 감지 (무한 루프)
  */
-function detectCircularReferences(
-  nodes: FlowNode[],
-  edges: FlowEdge[]
-): FlowValidation[] {
+function detectCircularReferences(nodes: FlowNode[], edges: FlowEdge[]): FlowValidation[] {
   const validations: FlowValidation[] = [];
 
   // 인접 리스트 생성
@@ -281,10 +312,7 @@ function detectCircularReferences(
 /**
  * 데이터 소스 타입 불일치 감지
  */
-function detectDataSourceMismatch(
-  nodes: FlowNode[],
-  edges: FlowEdge[]
-): FlowValidation[] {
+function detectDataSourceMismatch(nodes: FlowNode[], edges: FlowEdge[]): FlowValidation[] {
   const validations: FlowValidation[] = [];
 
   // 각 노드의 데이터 소스 타입 추적
@@ -292,10 +320,7 @@ function detectDataSourceMismatch(
 
   // Source 노드들의 타입 수집
   for (const node of nodes) {
-    if (
-      node.type === "tableSource" ||
-      node.type === "externalDBSource"
-    ) {
+    if (node.type === "tableSource" || node.type === "externalDBSource") {
       const dataSourceType = node.data.dataSourceType || "context-data";
       nodeDataSourceTypes.set(node.id, dataSourceType);
     }
@@ -311,19 +336,13 @@ function detectDataSourceMismatch(
 
   // Action 노드들 검사
   for (const node of nodes) {
-    if (
-      node.type === "updateAction" ||
-      node.type === "deleteAction" ||
-      node.type === "insertAction"
-    ) {
+    if (node.type === "updateAction" || node.type === "deleteAction" || node.type === "insertAction") {
       const dataSourceType = nodeDataSourceTypes.get(node.id);
 
       // table-all 모드인데 WHERE에 특정 레코드 조건이 있는 경우
       if (dataSourceType === "table-all") {
         const whereConditions = node.data.whereConditions || [];
-        const hasPrimaryKeyCondition = whereConditions.some(
-          (cond: any) => cond.field === "id"
-        );
+        const hasPrimaryKeyCondition = whereConditions.some((cond: any) => cond.field === "id");
 
         if (hasPrimaryKeyCondition) {
           validations.push({
@@ -343,10 +362,7 @@ function detectDataSourceMismatch(
 /**
  * 레벨별로 노드 그룹화 (위상 정렬)
  */
-function groupNodesByLevel(
-  nodes: FlowNode[],
-  edges: FlowEdge[]
-): Map<number, FlowNode[]> {
+function groupNodesByLevel(nodes: FlowNode[], edges: FlowEdge[]): Map<number, FlowNode[]> {
   const levels = new Map<number, FlowNode[]>();
   const nodeLevel = new Map<string, number>();
   const inDegree = new Map<string, number>();
@@ -411,9 +427,7 @@ export function summarizeValidations(validations: FlowValidation[]): {
   hasBlockingIssues: boolean;
 } {
   const errorCount = validations.filter((v) => v.severity === "error").length;
-  const warningCount = validations.filter(
-    (v) => v.severity === "warning"
-  ).length;
+  const warningCount = validations.filter((v) => v.severity === "warning").length;
   const infoCount = validations.filter((v) => v.severity === "info").length;
 
   return {
@@ -427,12 +441,6 @@ export function summarizeValidations(validations: FlowValidation[]): {
 /**
  * 특정 노드의 검증 결과 가져오기
  */
-export function getNodeValidations(
-  nodeId: string,
-  validations: FlowValidation[]
-): FlowValidation[] {
-  return validations.filter(
-    (v) => v.nodeId === nodeId || v.affectedNodes?.includes(nodeId)
-  );
+export function getNodeValidations(nodeId: string, validations: FlowValidation[]): FlowValidation[] {
+  return validations.filter((v) => v.nodeId === nodeId || v.affectedNodes?.includes(nodeId));
 }
-
diff --git a/frontend/types/auth.ts b/frontend/types/auth.ts
index f1d5bbd8..cd8e65b6 100644
--- a/frontend/types/auth.ts
+++ b/frontend/types/auth.ts
@@ -10,7 +10,11 @@ export interface LoginFormData {
 export interface LoginResponse {
   success: boolean;
   message?: string;
-  data?: any;
+  data?: {
+    token?: string;
+    userInfo?: any;
+    firstMenuPath?: string | null;
+  };
   errorCode?: string;
 }