diff --git a/frontend/app/(main)/admin/batch-management/page.tsx b/frontend/app/(main)/admin/batch-management/page.tsx
index 9b23cf70..9e48a097 100644
--- a/frontend/app/(main)/admin/batch-management/page.tsx
+++ b/frontend/app/(main)/admin/batch-management/page.tsx
@@ -185,11 +185,12 @@ export default function BatchManagementPage() {
   };
 
   return (
-    <div className="space-y-6">
-      {/* 헤더 */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">배치 관리</h1>
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold">배치 관리</h1>
           <p className="text-muted-foreground">
             스케줄된 배치 작업을 관리하고 실행 상태를 모니터링합니다.
           </p>
@@ -428,6 +429,7 @@ export default function BatchManagementPage() {
         onSave={handleModalSave}
         job={selectedJob}
       />
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/collection-management/page.tsx b/frontend/app/(main)/admin/collection-management/page.tsx
index 4edbcaec..8320caac 100644
--- a/frontend/app/(main)/admin/collection-management/page.tsx
+++ b/frontend/app/(main)/admin/collection-management/page.tsx
@@ -162,11 +162,12 @@ export default function CollectionManagementPage() {
   };
 
   return (
-    <div className="space-y-6">
-      {/* 헤더 */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">수집 관리</h1>
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold">수집 관리</h1>
           <p className="text-muted-foreground">
             외부 데이터베이스에서 데이터를 수집하는 설정을 관리합니다.
           </p>
@@ -332,6 +333,7 @@ export default function CollectionManagementPage() {
         onSave={handleModalSave}
         config={selectedConfig}
       />
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/commonCode/page.tsx b/frontend/app/(main)/admin/commonCode/page.tsx
index be946e05..3868ec40 100644
--- a/frontend/app/(main)/admin/commonCode/page.tsx
+++ b/frontend/app/(main)/admin/commonCode/page.tsx
@@ -11,14 +11,15 @@ export default function CommonCodeManagementPage() {
   const { selectedCategoryCode, selectCategory } = useSelectedCategory();
 
   return (
-    <div className="container mx-auto space-y-6 p-6">
-      {/* 페이지 헤더 */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">공통코드 관리</h1>
-          <p className="text-muted-foreground">시스템에서 사용하는 공통코드를 관리합니다</p>
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 페이지 제목 */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">공통코드 관리</h1>
+            <p className="mt-2 text-gray-600">시스템에서 사용하는 공통코드를 관리합니다</p>
+          </div>
         </div>
-      </div>
 
       {/* 메인 콘텐츠 */}
       {/* 반응형 레이아웃: PC는 가로, 모바일은 세로 */}
@@ -52,6 +53,7 @@ export default function CommonCodeManagementPage() {
           </Card>
         </div>
       </div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/company/page.tsx b/frontend/app/(main)/admin/company/page.tsx
index 79e92516..7e222aa8 100644
--- a/frontend/app/(main)/admin/company/page.tsx
+++ b/frontend/app/(main)/admin/company/page.tsx
@@ -4,5 +4,18 @@ import { CompanyManagement } from "@/components/admin/CompanyManagement";
  * 회사 관리 페이지
  */
 export default function CompanyPage() {
-  return <CompanyManagement />;
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 페이지 제목 */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">회사 관리</h1>
+            <p className="mt-2 text-gray-600">시스템에서 사용하는 회사 정보를 관리합니다</p>
+          </div>
+        </div>
+        <CompanyManagement />
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/app/(main)/admin/dataflow/page.tsx b/frontend/app/(main)/admin/dataflow/page.tsx
index 19914665..cf57b3cb 100644
--- a/frontend/app/(main)/admin/dataflow/page.tsx
+++ b/frontend/app/(main)/admin/dataflow/page.tsx
@@ -76,48 +76,49 @@ export default function DataFlowPage() {
   };
 
   return (
-    <div className="flex h-full w-full flex-col">
-      {/* 헤더 */}
-      <div className="border-b border-gray-200 bg-white px-6 py-4">
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 페이지 제목 */}
         <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-4">
-            {currentStep !== "list" && (
-              <Button variant="outline" size="sm" onClick={goToPreviousStep} className="flex items-center">
-                <ArrowLeft className="mr-1 h-4 w-4" />
-                이전
-              </Button>
-            )}
-            <div>
-              <h1 className="flex items-center text-2xl font-bold text-gray-900">
-                <span className="mr-2">{stepConfig[currentStep].icon}</span>
-                {stepConfig[currentStep].title}
-              </h1>
-              <p className="mt-1 text-sm text-gray-600">{stepConfig[currentStep].description}</p>
-            </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">데이터 흐름 관리</h1>
+            <p className="mt-2 text-gray-600">테이블 간 데이터 관계를 시각적으로 설계하고 관리합니다</p>
           </div>
+          {currentStep !== "list" && (
+            <Button variant="outline" onClick={goToPreviousStep} className="flex items-center">
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              이전
+            </Button>
+          )}
         </div>
-      </div>
 
-      {/* 단계별 내용 */}
-      <div className="flex-1 overflow-hidden">
-        {/* 관계도 목록 단계 */}
-        {currentStep === "list" && (
-          <div className="h-full p-6">
-            <DataFlowList onDesignDiagram={handleDesignDiagram} />
+        {/* 단계별 내용 */}
+        <div className="space-y-6">
+          {/* 관계도 목록 단계 */}
+          {currentStep === "list" && (
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-semibold text-gray-800">{stepConfig.list.title}</h2>
+              </div>
+              <DataFlowList onDesignDiagram={handleDesignDiagram} />
           </div>
         )}
 
-        {/* 관계도 설계 단계 */}
-        {currentStep === "design" && (
-          <div className="h-full">
-            <DataFlowDesigner
-              companyCode={user?.company_code || "COMP001"}
-              onSave={handleSave}
-              selectedDiagram={null}
-              onBackToList={() => goToStep("list")}
-            />
-          </div>
-        )}
+          {/* 관계도 설계 단계 */}
+          {currentStep === "design" && (
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-semibold text-gray-800">{stepConfig.design.title}</h2>
+              </div>
+              <DataFlowDesigner
+                companyCode={user?.company_code || "COMP001"}
+                onSave={handleSave}
+                selectedDiagram={null}
+                onBackToList={() => goToStep("list")}
+              />
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/app/(main)/admin/external-call-configs/page.tsx b/frontend/app/(main)/admin/external-call-configs/page.tsx
index dbdd4aeb..e3755083 100644
--- a/frontend/app/(main)/admin/external-call-configs/page.tsx
+++ b/frontend/app/(main)/admin/external-call-configs/page.tsx
@@ -161,7 +161,8 @@ export default function ExternalCallConfigsPage() {
   };
 
   return (
-    <div className="container mx-auto space-y-6 p-6">
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
       {/* 페이지 헤더 */}
       <div className="flex items-center justify-between">
         <div>
@@ -396,6 +397,7 @@ export default function ExternalCallConfigsPage() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/external-connections/page.tsx b/frontend/app/(main)/admin/external-connections/page.tsx
index 85e7911f..e1ab62d7 100644
--- a/frontend/app/(main)/admin/external-connections/page.tsx
+++ b/frontend/app/(main)/admin/external-connections/page.tsx
@@ -220,11 +220,15 @@ export default function ExternalConnectionsPage() {
   };
 
   return (
-    <div className="container mx-auto p-6">
-      <div className="mb-6">
-        <h1 className="mb-2 text-2xl font-bold text-gray-900">외부 커넥션 관리</h1>
-        <p className="text-gray-600">외부 데이터베이스 연결 정보를 관리합니다.</p>
-      </div>
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 페이지 제목 */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">외부 커넥션 관리</h1>
+            <p className="mt-2 text-gray-600">외부 데이터베이스 연결 정보를 관리합니다</p>
+          </div>
+        </div>
 
       {/* 검색 및 필터 */}
       <Card className="mb-6">
@@ -446,6 +450,7 @@ export default function ExternalConnectionsPage() {
           connectionName={selectedConnection.connection_name}
         />
       )}
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/i18n/page.tsx b/frontend/app/(main)/admin/i18n/page.tsx
index f1fa7ef4..bb7308e2 100644
--- a/frontend/app/(main)/admin/i18n/page.tsx
+++ b/frontend/app/(main)/admin/i18n/page.tsx
@@ -3,6 +3,12 @@
 import MultiLang from "@/components/admin/MultiLang";
 
 export default function I18nPage() {
-  return <MultiLang />;
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6">
+        <MultiLang />
+      </div>
+    </div>
+  );
 }
 
diff --git a/frontend/app/(main)/admin/layouts/page.tsx b/frontend/app/(main)/admin/layouts/page.tsx
index c5215057..f22bd3d8 100644
--- a/frontend/app/(main)/admin/layouts/page.tsx
+++ b/frontend/app/(main)/admin/layouts/page.tsx
@@ -220,12 +220,14 @@ export default function LayoutManagementPage() {
   };
 
   return (
-    <div className="container mx-auto p-6">
-      <div className="mb-6 flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold">레이아웃 관리</h1>
-          <p className="text-gray-600">화면 레이아웃을 생성하고 관리합니다.</p>
-        </div>
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 페이지 제목 */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">레이아웃 관리</h1>
+            <p className="mt-2 text-gray-600">화면 레이아웃을 생성하고 관리합니다</p>
+          </div>
         <Button className="flex items-center gap-2" onClick={() => setCreateModalOpen(true)}>
           <Plus className="h-4 w-4" />새 레이아웃
         </Button>
@@ -411,6 +413,7 @@ export default function LayoutManagementPage() {
           loadCategoryCounts();
         }}
       />
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/menu/page.tsx b/frontend/app/(main)/admin/menu/page.tsx
index 301e0321..fcf0b965 100644
--- a/frontend/app/(main)/admin/menu/page.tsx
+++ b/frontend/app/(main)/admin/menu/page.tsx
@@ -4,8 +4,17 @@ import { MenuManagement } from "@/components/admin/MenuManagement";
 
 export default function MenuPage() {
   return (
-    <div className="h-full">
-      <MenuManagement />
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 페이지 제목 */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">메뉴 관리</h1>
+            <p className="mt-2 text-gray-600">시스템 메뉴를 관리하고 화면을 할당합니다</p>
+          </div>
+        </div>
+        <MenuManagement />
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/monitoring/page.tsx b/frontend/app/(main)/admin/monitoring/page.tsx
index 6161c387..2f028639 100644
--- a/frontend/app/(main)/admin/monitoring/page.tsx
+++ b/frontend/app/(main)/admin/monitoring/page.tsx
@@ -5,17 +5,19 @@ import MonitoringDashboard from "@/components/admin/MonitoringDashboard";
 
 export default function MonitoringPage() {
   return (
-    <div className="space-y-6">
-      {/* 헤더 */}
-      <div>
-        <h1 className="text-2xl font-bold">모니터링</h1>
-        <p className="text-muted-foreground">
-          배치 작업 실행 상태를 실시간으로 모니터링합니다.
-        </p>
-      </div>
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 헤더 */}
+        <div>
+          <h1 className="text-2xl font-bold">모니터링</h1>
+          <p className="text-muted-foreground">
+            배치 작업 실행 상태를 실시간으로 모니터링합니다.
+          </p>
+        </div>
 
-      {/* 모니터링 대시보드 */}
-      <MonitoringDashboard />
+        {/* 모니터링 대시보드 */}
+        <MonitoringDashboard />
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/page.tsx b/frontend/app/(main)/admin/page.tsx
index b320ab45..8735d7f6 100644
--- a/frontend/app/(main)/admin/page.tsx
+++ b/frontend/app/(main)/admin/page.tsx
@@ -5,7 +5,8 @@ import Link from "next/link";
  */
 export default function AdminPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50/30 p-8 space-y-8">
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
       {/* 관리자 기능 카드들 */}
       <div className="mx-auto max-w-7xl grid gap-6 md:grid-cols-2 lg:grid-cols-3">
         <Link href="/admin/userMng" className="block">
@@ -162,6 +163,7 @@ export default function AdminPage() {
           </div>
         </div>
       </div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/screenMng/page.tsx b/frontend/app/(main)/admin/screenMng/page.tsx
index bf90f2d7..8918e936 100644
--- a/frontend/app/(main)/admin/screenMng/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/page.tsx
@@ -66,14 +66,23 @@ export default function ScreenManagementPage() {
   const isLastStep = currentStep === "template";
 
   return (
-    <div className="flex h-full w-full flex-col">
-      {/* 단계별 내용 */}
-      <div className="flex-1 overflow-hidden">
-        {/* 화면 목록 단계 */}
-        {currentStep === "list" && (
-          <div className="h-full p-6">
-            <div className="mb-6 flex items-center justify-between">
-              <h2 className="text-2xl font-bold">{stepConfig.list.title}</h2>
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 페이지 제목 */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">화면 관리</h1>
+            <p className="mt-2 text-gray-600">화면을 설계하고 템플릿을 관리합니다</p>
+          </div>
+        </div>
+
+        {/* 단계별 내용 */}
+        <div className="flex-1 overflow-hidden">
+          {/* 화면 목록 단계 */}
+          {currentStep === "list" && (
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-semibold text-gray-800">{stepConfig.list.title}</h2>
               <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => goToNextStep("design")}>
                 화면 설계하기 <ArrowRight className="ml-2 h-4 w-4" />
               </Button>
@@ -89,18 +98,24 @@ export default function ScreenManagementPage() {
           </div>
         )}
 
-        {/* 화면 설계 단계 */}
-        {currentStep === "design" && (
-          <div className="h-full">
-            <ScreenDesigner selectedScreen={selectedScreen} onBackToList={() => goToStep("list")} />
-          </div>
-        )}
+          {/* 화면 설계 단계 */}
+          {currentStep === "design" && (
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-semibold text-gray-800">{stepConfig.design.title}</h2>
+                <Button variant="outline" onClick={() => goToStep("list")}>
+                  <ArrowLeft className="mr-2 h-4 w-4" />목록으로 돌아가기
+                </Button>
+              </div>
+              <ScreenDesigner selectedScreen={selectedScreen} onBackToList={() => goToStep("list")} />
+            </div>
+          )}
 
-        {/* 템플릿 관리 단계 */}
-        {currentStep === "template" && (
-          <div className="h-full p-6">
-            <div className="mb-6 flex items-center justify-between">
-              <h2 className="text-2xl font-bold">{stepConfig.template.title}</h2>
+          {/* 템플릿 관리 단계 */}
+          {currentStep === "template" && (
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-semibold text-gray-800">{stepConfig.template.title}</h2>
               <div className="flex gap-2">
                 <Button variant="outline" onClick={goToPreviousStep}>
                   <ArrowLeft className="mr-2 h-4 w-4" />
@@ -111,9 +126,10 @@ export default function ScreenManagementPage() {
                 </Button>
               </div>
             </div>
-            <TemplateManager selectedScreen={selectedScreen} onBackToList={() => goToStep("list")} />
-          </div>
-        )}
+              <TemplateManager selectedScreen={selectedScreen} onBackToList={() => goToStep("list")} />
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx b/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx
index be7dd3f5..ff24db7f 100644
--- a/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx
+++ b/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx
@@ -203,7 +203,8 @@ export default function EditWebTypePage() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-6">
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
       {/* 헤더 */}
       <div className="mb-6 flex items-center gap-4">
         <Link href={`/admin/standards/${webType}`}>
@@ -502,6 +503,7 @@ export default function EditWebTypePage() {
           </p>
         </div>
       )}
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/standards/[webType]/page.tsx b/frontend/app/(main)/admin/standards/[webType]/page.tsx
index c11999ff..f44a8447 100644
--- a/frontend/app/(main)/admin/standards/[webType]/page.tsx
+++ b/frontend/app/(main)/admin/standards/[webType]/page.tsx
@@ -80,7 +80,8 @@ export default function WebTypeDetailPage() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-6">
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
       {/* 헤더 */}
       <div className="mb-6 flex items-center justify-between">
         <div className="flex items-center gap-4">
@@ -280,6 +281,7 @@ export default function WebTypeDetailPage() {
           </Card>
         </TabsContent>
       </Tabs>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/standards/new/page.tsx b/frontend/app/(main)/admin/standards/new/page.tsx
index 77df8a74..aa60ed45 100644
--- a/frontend/app/(main)/admin/standards/new/page.tsx
+++ b/frontend/app/(main)/admin/standards/new/page.tsx
@@ -159,7 +159,8 @@ export default function NewWebTypePage() {
   };
 
   return (
-    <div className="container mx-auto px-4 py-6">
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
       {/* 헤더 */}
       <div className="mb-6 flex items-center gap-4">
         <Link href="/admin/standards">
@@ -453,6 +454,7 @@ export default function NewWebTypePage() {
           </p>
         </div>
       )}
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/standards/page.tsx b/frontend/app/(main)/admin/standards/page.tsx
index c21266ab..e00ddfa1 100644
--- a/frontend/app/(main)/admin/standards/page.tsx
+++ b/frontend/app/(main)/admin/standards/page.tsx
@@ -127,19 +127,20 @@ export default function WebTypesManagePage() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-6">
-      {/* 헤더 */}
-      <div className="mb-6 flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">웹타입 관리</h1>
-          <p className="text-muted-foreground">화면관리에서 사용할 웹타입들을 관리합니다.</p>
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 페이지 제목 */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">웹타입 관리</h1>
+            <p className="mt-2 text-gray-600">화면관리에서 사용할 웹타입들을 관리합니다</p>
+          </div>
+          <Link href="/admin/standards/new">
+            <Button>
+              <Plus className="mr-2 h-4 w-4" />새 웹타입 추가
+            </Button>
+          </Link>
         </div>
-        <Link href="/admin/standards/new">
-          <Button>
-            <Plus className="mr-2 h-4 w-4" />새 웹타입 추가
-          </Button>
-        </Link>
-      </div>
 
       {/* 필터 및 검색 */}
       <Card className="mb-6">
@@ -364,6 +365,7 @@ export default function WebTypesManagePage() {
           </p>
         </div>
       )}
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/tableMng/page.tsx b/frontend/app/(main)/admin/tableMng/page.tsx
index 3c95f4df..311e20db 100644
--- a/frontend/app/(main)/admin/tableMng/page.tsx
+++ b/frontend/app/(main)/admin/tableMng/page.tsx
@@ -541,7 +541,7 @@ export default function TableManagementPage() {
   }, [selectedTable, columns.length, totalColumns, columnsLoading, pageSize, loadColumnTypes]);
 
   return (
-    <div className="mx-auto max-w-none space-y-6 p-6">
+      <div className="container mx-auto p-6 space-y-6">
       {/* 페이지 제목 */}
       <div className="flex items-center justify-between">
         <div>
diff --git a/frontend/app/(main)/admin/templates/page.tsx b/frontend/app/(main)/admin/templates/page.tsx
index 800c84ac..e964d85c 100644
--- a/frontend/app/(main)/admin/templates/page.tsx
+++ b/frontend/app/(main)/admin/templates/page.tsx
@@ -145,13 +145,14 @@ export default function TemplatesManagePage() {
   }
 
   return (
-    <div className="container mx-auto space-y-6 p-6">
-      {/* 헤더 */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold">템플릿 관리</h1>
-          <p className="text-muted-foreground">화면 디자이너에서 사용할 템플릿을 관리합니다.</p>
-        </div>
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 페이지 제목 */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">템플릿 관리</h1>
+            <p className="mt-2 text-gray-600">화면 디자이너에서 사용할 템플릿을 관리합니다</p>
+          </div>
         <div className="flex space-x-2">
           <Button asChild>
             <Link href="/admin/templates/new">
@@ -390,6 +391,7 @@ export default function TemplatesManagePage() {
           </div>
         </CardContent>
       </Card>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/userMng/page.tsx b/frontend/app/(main)/admin/userMng/page.tsx
index 94f861cc..0d0df171 100644
--- a/frontend/app/(main)/admin/userMng/page.tsx
+++ b/frontend/app/(main)/admin/userMng/page.tsx
@@ -8,8 +8,17 @@ import { UserManagement } from "@/components/admin/UserManagement";
  */
 export default function UserMngPage() {
   return (
-    <div className="h-full">
-      <UserManagement />
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto p-6 space-y-6">
+        {/* 페이지 제목 */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">사용자 관리</h1>
+            <p className="mt-2 text-gray-600">시스템 사용자 계정 및 권한을 관리합니다</p>
+          </div>
+        </div>
+        <UserManagement />
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/validation-demo/page.tsx b/frontend/app/(main)/admin/validation-demo/page.tsx
index bb567d63..e903bb4e 100644
--- a/frontend/app/(main)/admin/validation-demo/page.tsx
+++ b/frontend/app/(main)/admin/validation-demo/page.tsx
@@ -54,7 +54,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     required: true,
     style: {
       labelFontSize: "14px",
-      labelColor: "#374151",
+      labelColor: "#3b83f6",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
@@ -72,7 +72,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     required: true,
     style: {
       labelFontSize: "14px",
-      labelColor: "#374151",
+      labelColor: "#3b83f6",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
@@ -94,7 +94,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     },
     style: {
       labelFontSize: "14px",
-      labelColor: "#374151",
+      labelColor: "#3b83f6",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
@@ -112,7 +112,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     required: false,
     style: {
       labelFontSize: "14px",
-      labelColor: "#374151",
+      labelColor: "#3b83f6",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
@@ -130,7 +130,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     required: false,
     style: {
       labelFontSize: "14px",
-      labelColor: "#374151",
+      labelColor: "#3b83f6",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
@@ -152,7 +152,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     },
     style: {
       labelFontSize: "14px",
-      labelColor: "#374151",
+      labelColor: "#3b83f6",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index 90195801..e5b622a6 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -237,7 +237,7 @@ export default function ScreenViewPage() {
               const labelText = component.style?.labelText || component.label || "";
               const labelStyle = {
                 fontSize: component.style?.labelFontSize || "14px",
-                color: component.style?.labelColor || "#374151",
+                color: component.style?.labelColor || "#3b83f6",
                 fontWeight: component.style?.labelFontWeight || "500",
                 backgroundColor: component.style?.labelBackgroundColor || "transparent",
                 padding: component.style?.labelPadding || "0",
diff --git a/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx b/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
index 93475d3f..8c553b3c 100644
--- a/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
+++ b/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
@@ -232,7 +232,7 @@ export const EnhancedInteractiveScreenViewer: React.FC<EnhancedInteractiveScreen
           className={`mb-1 block text-sm font-medium ${hasError ? "text-destructive" : ""}`}
           style={{
             fontSize: labelStyle.labelFontSize || "14px",
-            color: hasError ? "#ef4444" : labelStyle.labelColor || "#374151",
+            color: hasError ? "#ef4444" : labelStyle.labelColor || "#3b83f6",
             fontWeight: labelStyle.labelFontWeight || "500",
             fontFamily: labelStyle.labelFontFamily,
             textAlign: labelStyle.labelTextAlign || "left",
diff --git a/frontend/components/screen/InteractiveScreenViewer.tsx b/frontend/components/screen/InteractiveScreenViewer.tsx
index a82b2999..2142bb4a 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -1708,7 +1708,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   // 라벨 스타일 적용
   const labelStyle = {
     fontSize: component.style?.labelFontSize || "14px",
-    color: component.style?.labelColor || "#374151",
+    color: component.style?.labelColor || "#3b83f6",
     fontWeight: component.style?.labelFontWeight || "500",
     backgroundColor: component.style?.labelBackgroundColor || "transparent",
     padding: component.style?.labelPadding || "0",
diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index 409c6056..5260b3e5 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -32,6 +32,7 @@ interface RealtimePreviewProps {
   selectedScreen?: any;
   onZoneComponentDrop?: (e: React.DragEvent, zoneId: string, layoutId: string) => void; // 존별 드롭 핸들러
   onZoneClick?: (zoneId: string) => void; // 존 클릭 핸들러
+  onConfigChange?: (config: any) => void; // 설정 변경 핸들러
 }
 
 // 동적 위젯 타입 아이콘 (레지스트리에서 조회)
@@ -73,6 +74,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   selectedScreen,
   onZoneComponentDrop,
   onZoneClick,
+  onConfigChange,
 }) => {
   const { id, type, position, size, style: componentStyle } = component;
 
@@ -89,8 +91,12 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   const baseStyle = {
     left: `${position.x}px`,
     top: `${position.y}px`,
-    width: `${size?.width || 100}px`,
-    height: `${size?.height || 36}px`,
+    width: component.componentConfig?.type === "table-list" 
+      ? `${Math.max(size?.width || 400, 400)}px` // table-list는 최소 400px
+      : `${size?.width || 100}px`,
+    height: component.componentConfig?.type === "table-list" 
+      ? `${Math.max(size?.height || 300, 300)}px` // table-list는 최소 300px
+      : `${size?.height || 36}px`,
     zIndex: component.type === "layout" ? 1 : position.z || 2, // 레이아웃은 z-index 1, 다른 컴포넌트는 2 이상
     ...componentStyle,
   };
@@ -120,7 +126,9 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
       onDragEnd={handleDragEnd}
     >
       {/* 동적 컴포넌트 렌더링 */}
-      <div className="h-full w-full">
+      <div className={`h-full w-full ${
+        component.componentConfig?.type === "table-list" ? "overflow-visible" : ""
+      }`}>
         <DynamicComponentRenderer
           component={component}
           isSelected={isSelected}
@@ -133,6 +141,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
           selectedScreen={selectedScreen}
           onZoneComponentDrop={onZoneComponentDrop}
           onZoneClick={onZoneClick}
+          onConfigChange={onConfigChange}
         />
       </div>
 
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 5e89166d..000ebc44 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -1004,7 +1004,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#374151",
+              labelColor: "#3b83f6",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
               ...templateComp.style,
@@ -1083,7 +1083,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#374151",
+              labelColor: "#3b83f6",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
               ...templateComp.style,
@@ -1134,7 +1134,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#374151",
+              labelColor: "#3b83f6",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
               ...templateComp.style,
@@ -1185,7 +1185,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#374151",
+              labelColor: "#3b83f6",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
               ...templateComp.style,
@@ -1274,7 +1274,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#374151",
+              labelColor: "#3b83f6",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
               ...templateComp.style,
@@ -1564,7 +1564,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         style: {
           labelDisplay: false, // 모든 컴포넌트의 기본 라벨 표시를 false로 설정
           labelFontSize: "14px",
-          labelColor: "#374151",
+          labelColor: "#3b83f6",
           labelFontWeight: "500",
           labelMarginBottom: "4px",
         },
@@ -1653,7 +1653,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#374151",
+              labelColor: "#3b83f6",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
             },
@@ -1844,7 +1844,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                 style: {
                   labelDisplay: false, // 모든 컴포넌트의 기본 라벨 표시를 false로 설정
                   labelFontSize: "12px",
-                  labelColor: "#374151",
+                  labelColor: "#3b83f6",
                   labelFontWeight: "500",
                   labelMarginBottom: "6px",
                 },
@@ -1887,7 +1887,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
               style: {
                 labelDisplay: true, // 테이블 패널에서 드래그한 컴포넌트는 라벨을 기본적으로 표시
                 labelFontSize: "12px",
-                labelColor: "#374151",
+                labelColor: "#3b83f6",
                 labelFontWeight: "500",
                 labelMarginBottom: "6px",
               },
@@ -3158,11 +3158,15 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         {/* 실제 작업 캔버스 (해상도 크기) */}
         <div
           className="mx-auto bg-white shadow-lg"
-          style={{ width: screenResolution.width, height: screenResolution.height }}
+          style={{ 
+            width: screenResolution.width, 
+            height: Math.max(screenResolution.height, 800), // 최소 높이 보장
+            minHeight: screenResolution.height 
+          }}
         >
           <div
             ref={canvasRef}
-            className="relative h-full w-full overflow-hidden bg-white"
+            className="relative h-full w-full overflow-visible bg-white" // overflow-visible로 변경
             onClick={(e) => {
               if (e.target === e.currentTarget && !selectionDrag.wasSelecting) {
                 setSelectedComponent(null);
@@ -3271,6 +3275,13 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                     selectedScreen={selectedScreen}
                     // onZoneComponentDrop 제거
                     onZoneClick={handleZoneClick}
+                    // 설정 변경 핸들러 (테이블 페이지 크기 등 설정을 상세설정에 반영)
+                    onConfigChange={(config) => {
+                      console.log("📤 테이블 설정 변경을 상세설정에 알림:", config);
+                      // 여기서 DetailSettingsPanel의 상태를 업데이트하거나
+                      // 컴포넌트의 componentConfig를 업데이트할 수 있습니다
+                      // TODO: 실제 구현은 DetailSettingsPanel과의 연동 필요
+                    }}
                   >
                     {/* 컨테이너, 그룹, 영역의 자식 컴포넌트들 렌더링 (레이아웃은 독립적으로 렌더링) */}
                     {(component.type === "group" || component.type === "container" || component.type === "area") &&
@@ -3351,6 +3362,11 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                               selectedScreen={selectedScreen}
                               // onZoneComponentDrop 제거
                               onZoneClick={handleZoneClick}
+                              // 설정 변경 핸들러 (자식 컴포넌트용)
+                              onConfigChange={(config) => {
+                                console.log("📤 자식 컴포넌트 설정 변경을 상세설정에 알림:", config);
+                                // TODO: 실제 구현은 DetailSettingsPanel과의 연동 필요
+                              }}
                             />
                           );
                         })}
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index 7c819eb2..10cabc52 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -134,7 +134,25 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
         <Select
           value={config.action?.type || "save"}
           defaultValue="save"
-          onValueChange={(value) => onUpdateProperty("componentConfig.action", { type: value })}
+          onValueChange={(value) => {
+            // 액션 설정 업데이트
+            onUpdateProperty("componentConfig.action", { type: value });
+            
+            // 액션에 따른 라벨 색상 자동 설정
+            if (value === 'delete') {
+              // 삭제 액션일 때 빨간색으로 설정
+              onUpdateProperty("style", {
+                ...component.style,
+                labelColor: '#ef4444'
+              });
+            } else {
+              // 다른 액션일 때 기본 파란색으로 리셋
+              onUpdateProperty("style", {
+                ...component.style,
+                labelColor: '#3b83f6'
+              });
+            }
+          }}
         >
           <SelectTrigger>
             <SelectValue placeholder="버튼 액션 선택" />
diff --git a/frontend/components/screen/filters/AdvancedSearchFilters.tsx b/frontend/components/screen/filters/AdvancedSearchFilters.tsx
index 8ce1baaf..227f23dd 100644
--- a/frontend/components/screen/filters/AdvancedSearchFilters.tsx
+++ b/frontend/components/screen/filters/AdvancedSearchFilters.tsx
@@ -240,12 +240,6 @@ export const AdvancedSearchFilters: React.FC<AdvancedSearchFiltersProps> = ({
         );
 
       case "code":
-        console.log("🔍 코드 필터 렌더링:", {
-          columnName: filter.columnName,
-          codeCategory: filter.codeCategory,
-          options: codeOptions[filter.codeCategory || ""],
-          loading: loadingStates[filter.codeCategory || ""],
-        });
         return (
           <CodeFilter
             key={filter.columnName}
diff --git a/frontend/components/screen/panels/DetailSettingsPanel.tsx b/frontend/components/screen/panels/DetailSettingsPanel.tsx
index 8423f164..ebf450c4 100644
--- a/frontend/components/screen/panels/DetailSettingsPanel.tsx
+++ b/frontend/components/screen/panels/DetailSettingsPanel.tsx
@@ -1006,7 +1006,12 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
         <div className="flex-1 overflow-y-auto p-4">
           <DynamicComponentConfigPanel
             componentId={componentId}
-            config={selectedComponent.componentConfig || {}}
+            config={(() => {
+              const config = selectedComponent.componentConfig || {};
+              console.log("🔍 DetailSettingsPanel에서 전달하는 config:", config);
+              console.log("🔍 selectedComponent 전체:", selectedComponent);
+              return config;
+            })()}
             screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
             tableColumns={(() => {
               console.log("🔍 DetailSettingsPanel tableColumns 전달:", {
diff --git a/frontend/components/screen/panels/PropertiesPanel.tsx b/frontend/components/screen/panels/PropertiesPanel.tsx
index 2fdb0735..18d8944e 100644
--- a/frontend/components/screen/panels/PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/PropertiesPanel.tsx
@@ -203,7 +203,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
           : "1"),
     labelText: selectedComponent?.style?.labelText || selectedComponent?.label || "",
     labelFontSize: selectedComponent?.style?.labelFontSize || "12px",
-    labelColor: selectedComponent?.style?.labelColor || "#374151",
+    labelColor: selectedComponent?.style?.labelColor || "#3b83f6",
     labelMarginBottom: selectedComponent?.style?.labelMarginBottom || "4px",
     required: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).required : false) || false,
     readonly: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).readonly : false) || false,
@@ -261,7 +261,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
               : "1"),
           labelText: selectedComponent?.style?.labelText || selectedComponent?.label || "",
           labelFontSize: selectedComponent?.style?.labelFontSize || "12px",
-          labelColor: selectedComponent?.style?.labelColor || "#374151",
+          labelColor: selectedComponent?.style?.labelColor || "#3b83f6",
           labelMarginBottom: selectedComponent?.style?.labelMarginBottom || "4px",
           required: widget?.required || false,
           readonly: widget?.readonly || false,
@@ -285,6 +285,84 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
     dragState?.justFinishedDrag, // 드래그 완료 직후 감지
   ]);
 
+  // 🔴 삭제 액션일 때 라벨 색상 자동 설정
+  useEffect(() => {
+    if (selectedComponent && selectedComponent.type === "component") {
+      // 삭제 액션 감지 로직 (실제 필드명 사용)
+      const isDeleteAction = () => {
+        const deleteKeywords = ['삭제', 'delete', 'remove', '제거', 'del'];
+        return (
+          selectedComponent.componentConfig?.action?.type === 'delete' || 
+          selectedComponent.config?.action?.type === 'delete' ||
+          selectedComponent.webTypeConfig?.actionType === 'delete' ||
+          selectedComponent.text?.toLowerCase().includes('삭제') ||
+          selectedComponent.text?.toLowerCase().includes('delete') ||
+          selectedComponent.label?.toLowerCase().includes('삭제') ||
+          selectedComponent.label?.toLowerCase().includes('delete') ||
+          deleteKeywords.some(keyword => 
+            selectedComponent.config?.buttonText?.toLowerCase().includes(keyword) ||
+            selectedComponent.config?.text?.toLowerCase().includes(keyword)
+          )
+        );
+      };
+
+      // 🔍 디버깅: 컴포넌트 구조 확인
+      console.log("🔍 PropertiesPanel 삭제 액션 디버깅:", {
+        componentType: selectedComponent.type,
+        componentId: selectedComponent.id,
+        componentConfig: selectedComponent.componentConfig,
+        config: selectedComponent.config,
+        webTypeConfig: selectedComponent.webTypeConfig,
+        actionType1: selectedComponent.componentConfig?.action?.type,
+        actionType2: selectedComponent.config?.action?.type,
+        actionType3: selectedComponent.webTypeConfig?.actionType,
+        isDeleteAction: isDeleteAction(),
+        currentLabelColor: selectedComponent.style?.labelColor,
+      });
+
+      // 액션에 따른 라벨 색상 자동 설정
+      if (isDeleteAction()) {
+        // 삭제 액션일 때 빨간색으로 설정 (이미 빨간색이 아닌 경우에만)
+        if (selectedComponent.style?.labelColor !== '#ef4444') {
+          console.log("🔴 삭제 액션 감지: 라벨 색상을 빨간색으로 자동 설정");
+          onUpdateProperty("style", {
+            ...selectedComponent.style,
+            labelColor: '#ef4444'
+          });
+          
+          // 로컬 입력 상태도 업데이트
+          setLocalInputs(prev => ({
+            ...prev,
+            labelColor: '#ef4444'
+          }));
+        }
+      } else {
+        // 다른 액션일 때 기본 파란색으로 리셋 (현재 빨간색인 경우에만)
+        if (selectedComponent.style?.labelColor === '#ef4444') {
+          console.log("🔵 일반 액션 감지: 라벨 색상을 기본 파란색으로 리셋");
+          onUpdateProperty("style", {
+            ...selectedComponent.style,
+            labelColor: '#3b83f6'
+          });
+          
+          // 로컬 입력 상태도 업데이트
+          setLocalInputs(prev => ({
+            ...prev,
+            labelColor: '#3b83f6'
+          }));
+        }
+      }
+    }
+  }, [
+    selectedComponent?.componentConfig?.action?.type,
+    selectedComponent?.config?.action?.type,
+    selectedComponent?.webTypeConfig?.actionType,
+    selectedComponent?.id,
+    selectedComponent?.style?.labelColor, // 라벨 색상 변경도 감지
+    JSON.stringify(selectedComponent?.componentConfig), // 전체 componentConfig 변경 감지
+    onUpdateProperty
+  ]);
+
   // 렌더링 시마다 실행되는 직접적인 드래그 상태 체크
   if (dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id) {
     console.log("🎯 렌더링 중 드래그 상태 감지:", {
diff --git a/frontend/lib/hooks/useEntityJoinOptimization.ts b/frontend/lib/hooks/useEntityJoinOptimization.ts
index 18e63275..1446d1c3 100644
--- a/frontend/lib/hooks/useEntityJoinOptimization.ts
+++ b/frontend/lib/hooks/useEntityJoinOptimization.ts
@@ -56,6 +56,9 @@ export function useEntityJoinOptimization(columnMeta: Record<string, ColumnMetaI
   const totalRequests = useRef(0);
   const cacheHits = useRef(0);
   const batchLoadCount = useRef(0);
+  
+  // 변환된 값 캐시 (중복 변환 방지)
+  const convertedCache = useRef(new Map<string, string>());
 
   // 공통 코드 카테고리 추출 (메모이제이션)
   const codeCategories = useMemo(() => {
@@ -175,29 +178,41 @@ export function useEntityJoinOptimization(columnMeta: Record<string, ColumnMetaI
       const startTime = Date.now();
       totalRequests.current += 1;
 
-      // 🎯 디버깅: 캐시 상태 로깅
-      console.log(`🔍 optimizedConvertCode 호출: categoryCode="${categoryCode}", codeValue="${codeValue}"`);
+      // 🎯 중복 호출 방지: 이미 변환된 값인지 확인
+      const cacheKey = `${categoryCode}:${codeValue}`;
+      if (convertedCache.current.has(cacheKey)) {
+        return convertedCache.current.get(cacheKey)!;
+      }
+
+      // 🎯 디버깅: 캐시 상태 로깅 (빈도 줄이기)
+      if (totalRequests.current % 10 === 1) { // 10번마다 한 번만 로깅
+        console.log(`🔍 optimizedConvertCode 호출: categoryCode="${categoryCode}", codeValue="${codeValue}"`);
+      }
 
       // 캐시에서 동기적으로 조회 시도
       const syncResult = codeCache.getCodeSync(categoryCode);
-      console.log(`🔍 getCodeSync("${categoryCode}") 결과:`, syncResult);
+      if (totalRequests.current % 10 === 1) {
+        console.log(`🔍 getCodeSync("${categoryCode}") 결과:`, syncResult);
+      }
 
-      // 🎯 캐시 내용 상세 로깅 (키값들 확인)
-      if (syncResult) {
+      // 🎯 캐시 내용 상세 로깅 (키값들 확인) - 빈도 줄이기
+      if (syncResult && totalRequests.current % 10 === 1) {
         console.log(`🔍 캐시 키값들:`, Object.keys(syncResult));
         console.log(`🔍 캐시 전체 데이터:`, JSON.stringify(syncResult, null, 2));
       }
 
       if (syncResult && Array.isArray(syncResult)) {
         cacheHits.current += 1;
-        console.log(`🔍 배열에서 코드 검색: codeValue="${codeValue}"`);
-        console.log(
-          `🔍 캐시 배열 내용:`,
-          syncResult.map((item) => ({
-            code_value: item.code_value,
-            code_name: item.code_name,
-          })),
-        );
+        if (totalRequests.current % 10 === 1) {
+          console.log(`🔍 배열에서 코드 검색: codeValue="${codeValue}"`);
+          console.log(
+            `🔍 캐시 배열 내용:`,
+            syncResult.map((item) => ({
+              code_value: item.code_value,
+              code_name: item.code_name,
+            })),
+          );
+        }
 
         // 배열에서 해당 code_value를 가진 항목 찾기
         const foundCode = syncResult.find(
@@ -205,7 +220,13 @@ export function useEntityJoinOptimization(columnMeta: Record<string, ColumnMetaI
         );
 
         const result = foundCode ? foundCode.code_name : codeValue;
-        console.log(`🔍 최종 결과: "${codeValue}" → "${result}"`, { foundCode });
+        
+        // 변환 결과를 캐시에 저장
+        convertedCache.current.set(cacheKey, result);
+        
+        if (totalRequests.current % 10 === 1) {
+          console.log(`🔍 최종 결과: "${codeValue}" → "${result}"`, { foundCode });
+        }
 
         // 응답 시간 추적 (캐시 히트)
         requestTimes.current.push(Date.now() - startTime);
diff --git a/frontend/lib/registry/AutoRegisteringComponentRenderer.ts b/frontend/lib/registry/AutoRegisteringComponentRenderer.ts
index 9efb4ba7..cfe2a6c1 100644
--- a/frontend/lib/registry/AutoRegisteringComponentRenderer.ts
+++ b/frontend/lib/registry/AutoRegisteringComponentRenderer.ts
@@ -217,7 +217,7 @@ export class AutoRegisteringComponentRenderer {
       top: "-25px",
       left: "0px",
       fontSize: component.style?.labelFontSize || "14px",
-      color: component.style?.labelColor || "#374151",
+      color: component.style?.labelColor || "#3b83f6",
       marginBottom: component.style?.labelMarginBottom || "4px",
       fontWeight: "500",
     };
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index 99c1b72e..a47fb775 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -34,6 +34,8 @@ export interface ComponentRenderer {
     refreshKey?: number;
     // 편집 모드
     mode?: "view" | "edit";
+    // 설정 변경 핸들러 (상세설정과 연동)
+    onConfigChange?: (config: any) => void;
     [key: string]: any;
   }): React.ReactElement;
 }
@@ -170,6 +172,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           selectedRowsData,
           onSelectedRowsChange,
           refreshKey,
+          onConfigChange,
           ...safeProps
         } = props;
 
@@ -224,6 +227,8 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
             selectedRows={selectedRows}
             selectedRowsData={selectedRowsData}
             onSelectedRowsChange={onSelectedRowsChange}
+            // 설정 변경 핸들러 전달
+            onConfigChange={onConfigChange}
             refreshKey={refreshKey}
           />
         );
diff --git a/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx b/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
index 76ced3ae..ad919d95 100644
--- a/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
+++ b/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
@@ -661,7 +661,7 @@ export const AccordionBasicComponent: React.FC<AccordionBasicComponentProps> = (
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index 1b751b7c..caf2d5f5 100644
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -86,12 +86,69 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     };
   }, []);
 
+  // 삭제 액션 감지 로직 (실제 필드명 사용)
+  const isDeleteAction = () => {
+    const deleteKeywords = ['삭제', 'delete', 'remove', '제거', 'del'];
+    return (
+      component.componentConfig?.action?.type === 'delete' || 
+      component.config?.action?.type === 'delete' ||
+      component.webTypeConfig?.actionType === 'delete' ||
+      component.text?.toLowerCase().includes('삭제') ||
+      component.text?.toLowerCase().includes('delete') ||
+      component.label?.toLowerCase().includes('삭제') ||
+      component.label?.toLowerCase().includes('delete') ||
+      deleteKeywords.some(keyword => 
+        component.config?.buttonText?.toLowerCase().includes(keyword) ||
+        component.config?.text?.toLowerCase().includes(keyword)
+      )
+    );
+  };
+
+  // 삭제 액션일 때 라벨 색상 자동 설정
+  useEffect(() => {
+    if (isDeleteAction() && !component.style?.labelColor) {
+      // 삭제 액션이고 라벨 색상이 설정되지 않은 경우 빨간색으로 자동 설정
+      if (component.style) {
+        component.style.labelColor = '#ef4444';
+      } else {
+        component.style = { labelColor: '#ef4444' };
+      }
+    }
+  }, [component.componentConfig?.action?.type, component.config?.action?.type, component.webTypeConfig?.actionType]);
+
   // 컴포넌트 설정
   const componentConfig = {
     ...config,
     ...component.config,
   } as ButtonPrimaryConfig;
 
+  // 🎨 동적 색상 설정 (속성편집 모달의 "색상" 필드와 연동)
+  const getLabelColor = () => {
+    if (isDeleteAction()) {
+      return component.style?.labelColor || '#ef4444'; // 빨간색 기본값 (Tailwind red-500)
+    }
+    return component.style?.labelColor || '#3b83f6'; // 기본 파란색 (Tailwind blue-500)
+  };
+
+  const buttonColor = getLabelColor();
+  
+  // 그라데이션용 어두운 색상 계산
+  const getDarkColor = (baseColor: string) => {
+    const hex = baseColor.replace('#', '');
+    const r = Math.max(0, parseInt(hex.substr(0, 2), 16) - 40);
+    const g = Math.max(0, parseInt(hex.substr(2, 2), 16) - 40);
+    const b = Math.max(0, parseInt(hex.substr(4, 2), 16) - 40);
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+  };
+
+  const buttonDarkColor = getDarkColor(buttonColor);
+
+  console.log("🎨 동적 색상 연동:", {
+    labelColor: component.style?.labelColor,
+    buttonColor,
+    buttonDarkColor,
+  });
+
   // 액션 설정 처리 - DB에서 문자열로 저장된 액션을 객체로 변환
   const processedConfig = { ...componentConfig };
   if (componentConfig.action && typeof componentConfig.action === "string") {
@@ -368,26 +425,29 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
           style={{
             width: "100%",
             height: "100%",
-            minHeight: "100%", // 최소 높이 강제 적용
-            maxHeight: "100%", // 최대 높이 제한
-            border: "1px solid #3b82f6",
-            borderRadius: "4px",
-            backgroundColor: "#3b82f6",
-            color: "white",
+            minHeight: "100%",
+            maxHeight: "100%",
+            border: "none",
+            borderRadius: "8px",
+            background: componentConfig.disabled 
+              ? "linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%)"
+              : `linear-gradient(135deg, ${buttonColor} 0%, ${buttonDarkColor} 100%)`,
+            color: componentConfig.disabled ? "#9ca3af" : "white",
             fontSize: "14px",
-            fontWeight: "500",
+            fontWeight: "600",
             cursor: componentConfig.disabled ? "not-allowed" : "pointer",
             outline: "none",
-            boxSizing: "border-box", // 패딩/보더 포함 크기 계산
-            display: "flex", // flex로 변경
-            alignItems: "center", // 세로 중앙 정렬
-            justifyContent: "center", // 가로 중앙 정렬
-            padding: "0", // 패딩 제거
-            margin: "0", // 마진 제거
-            lineHeight: "1", // 라인 높이 고정
-            // 강제 높이 적용
+            boxSizing: "border-box",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "0 16px",
+            margin: "0",
+            lineHeight: "1",
             minHeight: "36px",
-            height: "36px",
+            boxShadow: componentConfig.disabled 
+              ? "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+              : `0 2px 4px 0 ${buttonColor}33`, // 33은 20% 투명도
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
           }}
diff --git a/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx b/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
index 8c36e896..04802a64 100644
--- a/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
+++ b/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
@@ -84,7 +84,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
@@ -141,7 +141,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
         />
         <span
           style={{
-            color: "#374151",
+            color: "#3b83f6",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
           }}
diff --git a/frontend/lib/registry/components/date-input/DateInputComponent.tsx b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
index 34079965..a950314c 100644
--- a/frontend/lib/registry/components/date-input/DateInputComponent.tsx
+++ b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
@@ -298,7 +298,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx b/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx
index 9e82e2f4..136cb708 100644
--- a/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx
+++ b/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx
@@ -81,7 +81,7 @@ export const DividerLineComponent: React.FC<DividerLineComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
index 514dbb66..6e3d39a8 100644
--- a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
+++ b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
@@ -84,7 +84,7 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
diff --git a/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx b/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
index a1312552..5ba7e37c 100644
--- a/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
+++ b/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
@@ -81,7 +81,7 @@ export const ImageDisplayComponent: React.FC<ImageDisplayComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/number-input/NumberInputComponent.tsx b/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
index 40047392..05aa96b0 100644
--- a/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
+++ b/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
@@ -91,7 +91,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx b/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
index a881e1a5..29fe0dda 100644
--- a/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
+++ b/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
@@ -84,7 +84,7 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
@@ -155,7 +155,7 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
             />
             <span
               style={{
-                color: "#374151",
+                color: "#3b83f6",
                 // isInteractive 모드에서는 사용자 스타일 우선 적용
                 ...(isInteractive && component.style ? component.style : {}),
               }}
diff --git a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
index a5896d54..dedba749 100644
--- a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
+++ b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
@@ -601,7 +601,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
diff --git a/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx b/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx
index c7beb8f8..0dd4f35b 100644
--- a/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx
+++ b/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx
@@ -84,7 +84,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
@@ -149,7 +149,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
             width: "30%",
             textAlign: "center",
             fontSize: "14px",
-            color: "#374151",
+            color: "#3b83f6",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
diff --git a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
index 5687bdba..b4be9bcb 100644
--- a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
+++ b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
@@ -22,7 +22,7 @@ interface SingleTableWithStickyProps {
   renderCheckboxCell: (row: any, index: number) => React.ReactNode;
   formatCellValue: (value: any, format?: string, columnName?: string) => string;
   getColumnWidth: (column: ColumnConfig) => number;
-  joinColumnMapping: Record<string, string>; // 조인 컬럼 매핑 추가
+  containerWidth?: string; // 컨테이너 너비 설정
 }
 
 export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
@@ -40,13 +40,28 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
   renderCheckboxCell,
   formatCellValue,
   getColumnWidth,
-  joinColumnMapping,
+  containerWidth,
 }) => {
   const checkboxConfig = tableConfig.checkbox || {};
 
   return (
-    <div className="relative h-full w-full overflow-auto">
-      <Table className="w-full">
+    <div
+      className="relative h-full overflow-auto"
+      style={{
+        width: "100%",
+        maxWidth: "100%",
+        boxSizing: "border-box",
+      }}
+    >
+      <Table
+        className="w-full"
+        style={{
+          width: "100%",
+          maxWidth: "100%",
+          tableLayout: "fixed",
+          boxSizing: "border-box",
+        }}
+      >
         <TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-white" : ""}>
           <TableRow>
             {visibleColumns.map((column, colIndex) => {
@@ -66,7 +81,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
 
               return (
                 <TableHead
-                  key={`sticky-header-${colIndex}-${column.columnName}`}
+                  key={column.columnName}
                   className={cn(
                     column.columnName === "__checkbox__"
                       ? "h-10 border-b px-4 py-2 text-center align-middle"
@@ -83,6 +98,9 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                     width: getColumnWidth(column),
                     minWidth: getColumnWidth(column),
                     maxWidth: getColumnWidth(column),
+                    boxSizing: "border-box",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
                     // sticky 위치 설정
                     ...(column.fixed === "left" && { left: leftFixedWidth }),
                     ...(column.fixed === "right" && { right: rightFixedWidth }),
@@ -92,7 +110,7 @@ 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="전체 선택" />
+                        <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} aria-label="전체 선택" style={{ zIndex: 1 }} />
                       )
                     ) : (
                       <>
@@ -131,7 +149,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
           ) : (
             data.map((row, index) => (
               <TableRow
-                key={`sticky-row-${index}`}
+                key={`row-${index}`}
                 className={cn(
                   "h-10 cursor-pointer border-b leading-none",
                   tableConfig.tableStyle?.hoverEffect && "hover:bg-gray-50",
@@ -157,7 +175,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
 
                   return (
                     <TableCell
-                      key={`sticky-cell-${index}-${colIndex}-${column.columnName}`}
+                      key={`cell-${column.columnName}`}
                       className={cn(
                         "h-10 px-4 py-2 align-middle text-sm whitespace-nowrap",
                         `text-${column.align}`,
@@ -169,6 +187,11 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                         minHeight: "40px",
                         height: "40px",
                         verticalAlign: "middle",
+                        width: getColumnWidth(column),
+                        boxSizing: "border-box",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
                         // sticky 위치 설정
                         ...(column.fixed === "left" && { left: leftFixedWidth }),
                         ...(column.fixed === "right" && { right: rightFixedWidth }),
@@ -176,25 +199,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                     >
                       {column.columnName === "__checkbox__"
                         ? renderCheckboxCell(row, index)
-                        : (() => {
-                            // 🎯 매핑된 컬럼명으로 데이터 찾기 (기본 테이블과 동일한 로직)
-                            const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
-
-                            // 조인 컬럼 매핑 정보 로깅
-                            if (column.columnName !== mappedColumnName && index === 0) {
-                              console.log(`🔗 Sticky 조인 컬럼 매핑: ${column.columnName} → ${mappedColumnName}`);
-                            }
-
-                            const cellValue = row[mappedColumnName];
-                            if (index === 0) {
-                              // 첫 번째 행만 로그 출력 (디버깅용)
-                              console.log(
-                                `🔍 Sticky 셀 데이터 [${column.columnName} → ${mappedColumnName}]:`,
-                                cellValue,
-                              );
-                            }
-                            return formatCellValue(cellValue, column.format, column.columnName) || "\u00A0";
-                          })()}
+                        : formatCellValue(row[column.columnName], column.format, column.columnName) || "\u00A0"}
                     </TableCell>
                   );
                 })}
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 6bd974ed..a3d63041 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useMemo } from "react";
 import { TableListConfig, ColumnConfig } from "./types";
+import { WebType } from "@/types/common";
 import { tableTypeApi } from "@/lib/api/screen";
 import { entityJoinApi } from "@/lib/api/entityJoin";
 import { codeCache } from "@/lib/caching/codeCache";
@@ -22,7 +23,6 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 import { AdvancedSearchFilters } from "@/components/screen/filters/AdvancedSearchFilters";
-import { Separator } from "@/components/ui/separator";
 import { SingleTableWithSticky } from "./SingleTableWithSticky";
 
 export interface TableListComponentProps {
@@ -54,6 +54,9 @@ export interface TableListComponentProps {
   // 선택된 행 정보 전달 핸들러
   onSelectedRowsChange?: (selectedRows: any[], selectedRowsData: any[]) => void;
 
+  // 설정 변경 핸들러 (상세설정과 연동)
+  onConfigChange?: (config: any) => void;
+
   // 테이블 새로고침 키
   refreshKey?: number;
 }
@@ -75,6 +78,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   onFormDataChange,
   componentConfig,
   onSelectedRowsChange,
+  onConfigChange,
   refreshKey,
 }) => {
   // 컴포넌트 설정
@@ -84,11 +88,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     ...componentConfig,
   } as TableListConfig;
 
-  // 🎯 디버깅: 초기 컬럼 설정 확인
-  console.log(
-    "🔍 초기 tableConfig.columns:",
-    tableConfig.columns?.map((c) => c.columnName),
-  );
+  // 🎨 동적 색상 설정 (속성편집 모달의 "색상" 필드와 연동)
+  const buttonColor = component.style?.labelColor || '#3b83f6'; // 기본 파란색
+  const buttonTextColor = component.config?.buttonTextColor || '#ffffff';
+  const buttonStyle = {
+    backgroundColor: buttonColor,
+    color: buttonTextColor,
+    borderColor: buttonColor
+  };
+
+  // 디버깅 로그 제거 (성능상 이유로)
 
   // 상태 관리
   const [data, setData] = useState<Record<string, any>[]>([]);
@@ -97,7 +106,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
   const [totalItems, setTotalItems] = useState(0);
-  const [searchTerm] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
   const [sortColumn, setSortColumn] = useState<string | null>(null);
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
   const [columnLabels, setColumnLabels] = useState<Record<string, string>>({});
@@ -113,7 +122,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [searchValues, setSearchValues] = useState<Record<string, any>>({});
 
   // 체크박스 상태 관리
-  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set()); // 선택된 행들의 키 집합
+  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
+
+  // 드래그 상태 관리
+  const [isDragging, setIsDragging] = useState(false);
+  const [draggedRowIndex, setDraggedRowIndex] = useState<number | null>(null); // 선택된 행들의 키 집합
   const [isAllSelected, setIsAllSelected] = useState(false); // 전체 선택 상태
 
   // 🎯 Entity 조인 최적화 훅 사용
@@ -125,10 +138,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   // 높이 계산 함수 (메모이제이션)
   const optimalHeight = useMemo(() => {
-    // 50개 이상일 때는 20개 기준으로 높이 고정하고 스크롤 생성
-    // 50개 미만일 때는 실제 데이터 개수에 맞춰서 스크롤 없이 표시
-    const actualDataCount = Math.min(data.length, localPageSize);
-    const displayPageSize = localPageSize >= 50 ? 20 : Math.max(actualDataCount, 5);
+    // 실제 데이터 개수에 맞춰서 높이 계산 (최소 5개, 최대 20개)
+    const actualDataCount = data.length;
+    const displayPageSize = Math.min(Math.max(actualDataCount, 5), 20);
 
     const headerHeight = 50; // 테이블 헤더
     const rowHeight = 42; // 각 행 높이
@@ -144,7 +156,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       actualDataCount,
       localPageSize,
       displayPageSize,
-      willHaveScroll: localPageSize >= 50,
+      isDesignMode,
       titleHeight,
       searchHeight,
       headerHeight,
@@ -165,25 +177,70 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     });
 
     return calculatedHeight;
-  }, [data.length, localPageSize, tableConfig.filter?.enabled, tableConfig.showFooter, tableConfig.showHeader]);
+  }, []);
 
-  // 스타일 계산
+  // 🎯 강제로 그리드 컬럼수에 맞는 크기 적용 (디자인 모드에서는 더 큰 크기 허용)
+  const gridColumns = component.gridColumns || 1;
+  let calculatedWidth: string;
+  
+  if (isDesignMode) {
+    // 디자인 모드에서는 더 큰 최소 크기 적용
+    if (gridColumns === 1) {
+      calculatedWidth = "400px"; // 1컬럼일 때 400px (디자인 모드)
+    } else if (gridColumns === 2) {
+      calculatedWidth = "600px"; // 2컬럼일 때 600px (디자인 모드)
+    } else if (gridColumns <= 6) {
+      calculatedWidth = `${gridColumns * 250}px`; // 컬럼당 250px (디자인 모드)
+    } else {
+      calculatedWidth = "100%"; // 7컬럼 이상은 전체
+    }
+  } else {
+    // 일반 모드는 기존 크기 유지
+    if (gridColumns === 1) {
+      calculatedWidth = "200px"; // 1컬럼일 때 200px 고정
+    } else if (gridColumns === 2) {
+      calculatedWidth = "400px"; // 2컬럼일 때 400px
+    } else if (gridColumns <= 6) {
+      calculatedWidth = `${gridColumns * 200}px`; // 컬럼당 200px
+    } else {
+      calculatedWidth = "100%"; // 7컬럼 이상은 전체
+    }
+  }
+
+    // 디버깅 로그 제거 (성능상 이유로)
+
+
+  // 스타일 계산 (컨테이너에 맞춤)
   const componentStyle: React.CSSProperties = {
-    width: "100%",
-    height: `${optimalHeight}px`, // 20개 데이터를 모두 보여주는 높이
-    minHeight: `${optimalHeight}px`, // 최소 높이 보장
+    width: "100%", // 컨테이너 전체 너비 사용
+    maxWidth: "100%", // 최대 너비 제한
+    height: "auto", // 항상 자동 높이로 테이블 크기에 맞춤
+    minHeight: isDesignMode ? `${Math.min(optimalHeight, 400)}px` : `${optimalHeight}px`, // 최소 높이 보장
     ...component.style,
     ...style,
     display: "flex",
     flexDirection: "column",
     boxSizing: "border-box", // 패딩/보더 포함한 크기 계산
+    // overflow는 CSS 클래스로 처리
   };
 
+  // 🎯 tableContainerStyle 제거 - componentStyle만 사용
+
   // 디자인 모드 스타일
   if (isDesignMode) {
-    componentStyle.border = "1px dashed #cbd5e1";
+    componentStyle.border = "2px dashed #cbd5e1";
     componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
-    // minHeight 제거 - 실제 데이터에 맞는 높이 사용
+    componentStyle.borderRadius = "8px";
+    componentStyle.padding = "4px"; // 약간의 패딩으로 구분감 확보
+    componentStyle.margin = "2px"; // 외부 여백으로 레이아웃과 구분
+    // 🎯 컨테이너에 맞춤
+    componentStyle.width = "calc(100% - 12px)"; // margin + padding 보정
+    componentStyle.maxWidth = "calc(100% - 12px)";
+    componentStyle.minWidth = "calc(100% - 12px)";
+    componentStyle.overflow = "hidden !important"; // 넘치는 부분 숨김 (강제)
+    componentStyle.boxSizing = "border-box"; // 패딩 포함 크기 계산
+    componentStyle.position = "relative"; // 위치 고정
+    // 자동 높이로 테이블 전체를 감쌈
   }
 
   // 컬럼 라벨 정보 가져오기
@@ -290,42 +347,30 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         // 🎯 조인 탭에서 추가한 컬럼들도 추가 (실제로 존재하는 컬럼만)
         ...joinTabColumns
           .filter((col) => {
-            // 조인 컬럼인지 확인 (언더스코어가 포함된 컬럼)
-            const isJoinColumn = col.columnName.includes("_") && col.columnName !== "__checkbox__";
-            if (!isJoinColumn) {
-              console.log(`🔍 조인 탭 컬럼 제외: ${col.columnName} (조인 컬럼이 아님)`);
+            // 실제 API 응답에 존재하는 컬럼만 필터링
+            const validJoinColumns = ["dept_code_name", "dept_name"];
+            const isValid = validJoinColumns.includes(col.columnName);
+            if (!isValid) {
+              console.log(`🔍 조인 탭 컬럼 제외: ${col.columnName} (유효하지 않음)`);
             }
-            return isJoinColumn;
+            return isValid;
           })
           .map((col) => {
-            // 동적으로 조인 컬럼 정보 추출
-            console.log(`🔍 조인 컬럼 분석: ${col.columnName}`);
+            // 실제 존재하는 조인 컬럼만 처리
+            let sourceTable = tableConfig.selectedTable;
+            let sourceColumn = col.columnName;
 
-            // 컬럼명에서 기본 컬럼과 참조 테이블 추출
-            // 예: dept_code_company_name -> dept_code (기본), company_name (참조)
-            const parts = col.columnName.split("_");
-            let sourceColumn = "";
-            let referenceTable = "";
-
-            // dept_code로 시작하는 경우
-            if (col.columnName.startsWith("dept_code_")) {
+            if (col.columnName === "dept_code_name" || col.columnName === "dept_name") {
+              sourceTable = "dept_info";
               sourceColumn = "dept_code";
-              referenceTable = "dept_info";
-            }
-            // 다른 패턴들도 추가 가능
-            else {
-              // 기본적으로 첫 번째 부분을 소스 컬럼으로 사용
-              sourceColumn = parts[0];
-              referenceTable = tableConfig.selectedTable || "unknown";
             }
 
-            console.log(`🔗 조인 설정: ${col.columnName} -> ${sourceColumn} (${referenceTable})`);
+            console.log(`🔍 조인 탭 컬럼 처리: ${col.columnName} -> ${sourceTable}.${sourceColumn}`);
 
             return {
-              sourceTable: tableConfig.selectedTable || "unknown", // 기본 테이블 (user_info)
+              sourceTable: sourceTable || tableConfig.selectedTable || "",
               sourceColumn: sourceColumn,
               joinAlias: col.columnName,
-              referenceTable: referenceTable, // 참조 테이블 정보도 추가
             };
           }),
       ];
@@ -422,14 +467,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         console.log("🎯 데이터 개수:", result.data?.length || 0);
         console.log("🎯 전체 페이지:", result.totalPages);
         console.log("🎯 총 아이템:", result.total);
-
-        // 🚨 데이터 샘플 확인 (첫 번째 행의 모든 컬럼과 값)
-        if (result.data && result.data.length > 0) {
-          console.log("🔍 첫 번째 행 데이터 샘플:", result.data[0]);
-          Object.entries(result.data[0]).forEach(([key, value]) => {
-            console.log(`  📊 ${key}: "${value}" (타입: ${typeof value})`);
-          });
-        }
         setData(result.data || []);
         setTotalPages(result.totalPages || 1);
         setTotalItems(result.total || 0);
@@ -447,7 +484,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         // 🎯 코드 컬럼들의 캐시 미리 로드 (전역 캐시 사용)
         const codeColumns = Object.entries(columnMeta).filter(
-          ([, meta]) => meta.webType === "code" && meta.codeCategory,
+          ([_, meta]) => meta.webType === "code" && meta.codeCategory,
         );
 
         if (codeColumns.length > 0) {
@@ -482,119 +519,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             const actualApiColumns = Object.keys(result.data[0]);
             console.log("🔍 API 응답의 실제 컬럼들:", actualApiColumns);
 
-            // 🎯 조인 컬럼 매핑 테이블 동적 생성 (사용자 설정 → API 응답)
-            const newJoinColumnMapping: Record<string, string> = {};
-
-            // 사용자가 설정한 컬럼들과 실제 API 응답 컬럼들을 동적으로 매핑
-            processedColumns.forEach((userColumn) => {
-              // 체크박스는 제외
-              if (userColumn.columnName === "__checkbox__") return;
-
-              console.log(`🔍 컬럼 매핑 분석: "${userColumn.columnName}"`, {
-                displayName: userColumn.displayName,
-                isEntityJoin: userColumn.isEntityJoin,
-                entityJoinInfo: userColumn.entityJoinInfo,
-                available: actualApiColumns,
-              });
-
-              // 사용자 설정 컬럼명이 API 응답에 정확히 있는지 확인
-              if (actualApiColumns.includes(userColumn.columnName)) {
-                // 직접 매칭되는 경우
-                newJoinColumnMapping[userColumn.columnName] = userColumn.columnName;
-                console.log(`✅ 정확 매핑: ${userColumn.columnName} → ${userColumn.columnName}`);
-              } else {
-                // Entity 조인된 컬럼이거나 조인 탭에서 추가한 컬럼인 경우
-                let foundMatch = false;
-
-                // 1. Entity 조인 정보가 있는 경우 aliasColumn 우선 확인
-                if (userColumn.entityJoinInfo?.joinAlias) {
-                  const aliasColumn = userColumn.entityJoinInfo.joinAlias;
-                  if (actualApiColumns.includes(aliasColumn)) {
-                    newJoinColumnMapping[userColumn.columnName] = aliasColumn;
-                    console.log(`🔗 Entity 별칭 매핑: ${userColumn.columnName} → ${aliasColumn}`);
-                    foundMatch = true;
-                  }
-                }
-
-                // 2. 정확한 이름 매칭 (예: dept_code_company_name)
-                if (!foundMatch) {
-                  const exactMatches = actualApiColumns.filter((apiCol) => apiCol === userColumn.columnName);
-
-                  if (exactMatches.length > 0) {
-                    newJoinColumnMapping[userColumn.columnName] = exactMatches[0];
-                    console.log(`🎯 정확 이름 매핑: ${userColumn.columnName} → ${exactMatches[0]}`);
-                    foundMatch = true;
-                  }
-                }
-
-                // 3. 조인 컬럼 검증 및 처리
-                if (!foundMatch) {
-                  // 🚨 조인 컬럼인지 확인 (더 정확한 감지 로직)
-                  const hasUnderscore = userColumn.columnName.includes("_");
-                  let isJoinColumn = false;
-                  let baseColumnName = "";
-
-                  if (hasUnderscore) {
-                    // 가능한 모든 기본 컬럼명을 확인 (dept_code_company_name -> dept_code, dept 순으로)
-                    const parts = userColumn.columnName.split("_");
-                    for (let i = parts.length - 1; i >= 1; i--) {
-                      const possibleBase = parts.slice(0, i).join("_");
-                      if (actualApiColumns.includes(possibleBase)) {
-                        baseColumnName = possibleBase;
-                        isJoinColumn = true;
-                        break;
-                      }
-                    }
-                  }
-
-                  console.log(`🔍 조인 컬럼 검사: "${userColumn.columnName}"`, {
-                    hasUnderscore,
-                    baseColumnName,
-                    isJoinColumn,
-                  });
-
-                  if (isJoinColumn) {
-                    console.log(`🔍 조인 컬럼 기본 컬럼 확인: "${baseColumnName}"`, {
-                      existsInApi: actualApiColumns.includes(baseColumnName),
-                      actualApiColumns: actualApiColumns.slice(0, 10), // 처음 10개만 표시
-                    });
-
-                    console.warn(
-                      `⚠️ 조인 실패: "${userColumn.columnName}" - 백엔드에서 Entity 조인이 실행되지 않음. 기본 컬럼값 표시합니다.`,
-                    );
-                    // 조인 실패 시 기본 컬럼값을 표시하도록 매핑
-                    newJoinColumnMapping[userColumn.columnName] = baseColumnName;
-                    foundMatch = true;
-                  } else {
-                    // 일반 컬럼인 경우 부분 매칭 시도
-                    const partialMatches = actualApiColumns.filter(
-                      (apiCol) => apiCol.includes(userColumn.columnName) || userColumn.columnName.includes(apiCol),
-                    );
-
-                    if (partialMatches.length > 0) {
-                      const bestMatch = partialMatches.reduce((best, current) =>
-                        Math.abs(current.length - userColumn.columnName.length) <
-                        Math.abs(best.length - userColumn.columnName.length)
-                          ? current
-                          : best,
-                      );
-
-                      newJoinColumnMapping[userColumn.columnName] = bestMatch;
-                      console.log(`🔍 부분 매핑: ${userColumn.columnName} → ${bestMatch}`);
-                      foundMatch = true;
-                    }
-                  }
-                }
-
-                // 4. 매칭 실패한 경우 원본 유지 (하지만 경고 표시)
-                if (!foundMatch) {
-                  newJoinColumnMapping[userColumn.columnName] = userColumn.columnName;
-                  console.warn(
-                    `⚠️ 매핑 실패: "${userColumn.columnName}" - 사용 가능한 컬럼: [${actualApiColumns.join(", ")}]`,
-                  );
-                }
-              }
-            });
+            // 🎯 조인 컬럼 매핑 테이블 (사용자 설정 → API 응답)
+            // 실제 API 응답에 존재하는 컬럼만 매핑
+            const newJoinColumnMapping: Record<string, string> = {
+              dept_code_dept_code: "dept_code", // user_info.dept_code
+              dept_code_status: "status", // user_info.status (dept_info.status가 조인되지 않음)
+              dept_code_company_name: "dept_name", // dept_info.dept_name (company_name이 조인되지 않음)
+              dept_code_name: "dept_code_name", // dept_info.dept_name
+              dept_name: "dept_name", // dept_info.dept_name
+              status: "status", // user_info.status
+            };
 
             // 🎯 조인 컬럼 매핑 상태 업데이트
             setJoinColumnMapping(newJoinColumnMapping);
@@ -656,23 +590,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         if (result.entityJoinInfo?.joinConfigs) {
           result.entityJoinInfo.joinConfigs.forEach((joinConfig) => {
             // 원본 컬럼을 조인된 컬럼으로 교체
-            let originalColumnIndex = processedColumns.findIndex((col) => col.columnName === joinConfig.sourceColumn);
+            const originalColumnIndex = processedColumns.findIndex((col) => col.columnName === joinConfig.sourceColumn);
 
             if (originalColumnIndex !== -1) {
               console.log(`🔄 컬럼 교체: ${joinConfig.sourceColumn} → ${joinConfig.aliasColumn}`);
               const originalColumn = processedColumns[originalColumnIndex];
-
-              // 🚨 중복 방지: 이미 같은 aliasColumn이 있는지 확인
-              const existingAliasIndex = processedColumns.findIndex((col) => col.columnName === joinConfig.aliasColumn);
-              if (existingAliasIndex !== -1 && existingAliasIndex !== originalColumnIndex) {
-                console.warn(`🚨 중복 컬럼 발견: ${joinConfig.aliasColumn}이 이미 존재합니다. 중복 제거합니다.`);
-                processedColumns.splice(existingAliasIndex, 1);
-                // 인덱스 재조정
-                if (existingAliasIndex < originalColumnIndex) {
-                  originalColumnIndex--;
-                }
-              }
-
               processedColumns[originalColumnIndex] = {
                 ...originalColumn,
                 columnName: joinConfig.aliasColumn, // dept_code → dept_code_name
@@ -718,26 +640,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           processedColumns = autoColumns;
         }
 
-        // 🚨 processedColumns에서 중복 제거
-        const uniqueProcessedColumns = processedColumns.filter(
-          (column, index, self) => self.findIndex((c) => c.columnName === column.columnName) === index,
-        );
-
-        if (uniqueProcessedColumns.length !== processedColumns.length) {
-          console.error("🚨 processedColumns에서 중복 발견:");
-          console.error(
-            "원본:",
-            processedColumns.map((c) => c.columnName),
-          );
-          console.error(
-            "중복 제거 후:",
-            uniqueProcessedColumns.map((c) => c.columnName),
-          );
-        }
-
         // 🎯 표시할 컬럼 상태 업데이트
-        setDisplayColumns(uniqueProcessedColumns);
-        console.log("🎯 displayColumns 업데이트됨:", uniqueProcessedColumns);
+        setDisplayColumns(processedColumns);
+        console.log("🎯 displayColumns 업데이트됨:", processedColumns);
         console.log("🎯 데이터 개수:", result.data?.length || 0);
         console.log("🎯 전체 데이터:", result.data);
       }
@@ -753,6 +658,20 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   // 페이지 변경
   const handlePageChange = (newPage: number) => {
     setCurrentPage(newPage);
+    
+    // 상세설정에 현재 페이지 정보 알림 (필요한 경우)
+    if (onConfigChange && tableConfig.pagination) {
+      console.log("📤 테이블에서 페이지 변경을 상세설정에 알림:", newPage);
+      onConfigChange({
+        ...tableConfig,
+        pagination: {
+          ...tableConfig.pagination,
+          currentPage: newPage, // 현재 페이지 정보 추가
+        },
+      });
+    } else if (!onConfigChange) {
+      console.warn("⚠️ onConfigChange가 정의되지 않음 - 페이지 변경 상세설정과 연동 불가");
+    }
   };
 
   // 정렬 변경
@@ -916,6 +835,22 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
   }, [refreshKey]);
 
+  // 상세설정에서 페이지네이션 설정 변경 시 로컬 상태 동기화
+  useEffect(() => {
+    // 페이지 크기 동기화
+    if (tableConfig.pagination?.pageSize && tableConfig.pagination.pageSize !== localPageSize) {
+      console.log("🔄 상세설정에서 페이지 크기 변경 감지:", tableConfig.pagination.pageSize);
+      setLocalPageSize(tableConfig.pagination.pageSize);
+      setCurrentPage(1); // 페이지를 1로 리셋
+    }
+    
+    // 현재 페이지 동기화 (상세설정에서 페이지를 직접 변경한 경우)
+    if (tableConfig.pagination?.currentPage && tableConfig.pagination.currentPage !== currentPage) {
+      console.log("🔄 상세설정에서 현재 페이지 변경 감지:", tableConfig.pagination.currentPage);
+      setCurrentPage(tableConfig.pagination.currentPage);
+    }
+  }, [tableConfig.pagination?.pageSize, tableConfig.pagination?.currentPage]);
+
   // 표시할 컬럼 계산 (Entity 조인 적용됨 + 체크박스 컬럼 추가 + 숨김 기능)
   const visibleColumns = useMemo(() => {
     // 기본값 처리: checkbox 설정이 없으면 기본값 사용
@@ -930,7 +865,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
     // displayColumns가 있으면 우선 사용 (Entity 조인 적용된 컬럼들)
     if (displayColumns && displayColumns.length > 0) {
-      console.log("🎯 displayColumns 사용:", displayColumns);
+      // 디버깅 로그 제거 (성능상 이유로)
       const filteredColumns = displayColumns.filter((col) => {
         // 디자인 모드에서는 숨김 컬럼도 표시 (연하게), 실제 화면에서는 완전히 숨김
         if (isDesignMode) {
@@ -939,11 +874,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           return col.visible && !col.hidden; // 실제 화면에서는 visible이면서 hidden이 아닌 것만
         }
       });
-      console.log("🎯 필터링된 컬럼:", filteredColumns);
+      // 디버깅 로그 제거 (성능상 이유로)
       columns = filteredColumns.sort((a, b) => a.order - b.order);
     } else if (tableConfig.columns && tableConfig.columns.length > 0) {
       // displayColumns가 없으면 기본 컬럼 사용
-      console.log("🎯 tableConfig.columns 사용:", tableConfig.columns);
+      // 디버깅 로그 제거 (성능상 이유로)
       columns = tableConfig.columns
         .filter((col) => {
           // 디자인 모드에서는 숨김 컬럼도 표시 (연하게), 실제 화면에서는 완전히 숨김
@@ -982,31 +917,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       }
     }
 
-    console.log("🎯 최종 visibleColumns:", columns);
-    console.log("🎯 visibleColumns 개수:", columns.length);
-    console.log(
-      "🎯 visibleColumns 컬럼명들:",
-      columns.map((c) => c.columnName),
-    );
-
-    // 🚨 중복 키 검사
-    const columnNames = columns.map((c) => c.columnName);
-    const duplicates = columnNames.filter((name, index) => columnNames.indexOf(name) !== index);
-    if (duplicates.length > 0) {
-      console.error("🚨 중복된 컬럼명 발견:", duplicates);
-      console.error("🚨 전체 컬럼명 목록:", columnNames);
-
-      // 중복 제거
-      const uniqueColumns = columns.filter(
-        (column, index, self) => self.findIndex((c) => c.columnName === column.columnName) === index,
-      );
-      console.log(
-        "🔧 중복 제거 후 컬럼들:",
-        uniqueColumns.map((c) => c.columnName),
-      );
-      return uniqueColumns;
-    }
-
+    // 디버깅 로그 제거 (성능상 이유로)
     return columns;
   }, [displayColumns, tableConfig.columns, tableConfig.checkbox, isDesignMode]);
 
@@ -1075,7 +986,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       return null;
     }
 
-    return <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} aria-label="전체 선택" />;
+    return <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} aria-label="전체 선택" style={{ zIndex: 1 }} />;
   };
 
   // 체크박스 셀 렌더링
@@ -1100,6 +1011,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         checked={isSelected}
         onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean)}
         aria-label={`행 ${index + 1} 선택`}
+        style={{ zIndex: 1 }}
       />
     );
   };
@@ -1109,30 +1021,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     return (value: any, format?: string, columnName?: string) => {
       if (value === null || value === undefined) return "";
 
-      // 디버깅: 모든 값 변환 시도를 로깅
-      if (
-        columnName &&
-        (columnName === "contract_type" || columnName === "domestic_foreign" || columnName === "status")
-      ) {
-        console.log(`🔍 값 변환 시도: ${columnName}="${value}"`, {
-          columnMeta: columnMeta[columnName],
-          hasColumnMeta: !!columnMeta[columnName],
-          webType: columnMeta[columnName]?.webType,
-          codeCategory: columnMeta[columnName]?.codeCategory,
-          globalColumnMeta: Object.keys(columnMeta),
-        });
-      }
+      // 디버깅 로그 제거 (성능상 이유로)
 
       // 🎯 코드 컬럼인 경우 최적화된 코드명 변환 사용
       if (columnName && columnMeta[columnName]?.webType === "code" && columnMeta[columnName]?.codeCategory) {
         const categoryCode = columnMeta[columnName].codeCategory!;
         const convertedValue = optimizedConvertCode(categoryCode, String(value));
 
-        if (convertedValue !== String(value)) {
-          console.log(`🔄 코드 변환 성공: ${columnName}[${categoryCode}] ${value} → ${convertedValue}`);
-        } else {
-          console.log(`⚠️ 코드 변환 실패: ${columnName}[${categoryCode}] ${value} → ${convertedValue} (값 동일)`);
-        }
+        // 코드 변환 로그 제거 (성능상 이유로)
 
         value = convertedValue;
       }
@@ -1165,6 +1061,82 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
   };
 
+  // 드래그 핸들러 (그리드 스냅 지원)
+  const handleRowDragStart = (e: React.DragEvent, row: any, index: number) => {
+    setIsDragging(true);
+    setDraggedRowIndex(index);
+    
+    // 드래그 데이터에 그리드 정보 포함
+    const dragData = {
+      ...row,
+      _dragType: 'table-row',
+      _gridSize: { width: 4, height: 1 }, // 기본 그리드 크기 (4칸 너비, 1칸 높이)
+      _snapToGrid: true
+    };
+    
+    e.dataTransfer.setData('application/json', JSON.stringify(dragData));
+    e.dataTransfer.effectAllowed = 'copy'; // move 대신 copy로 변경
+    
+    // 드래그 이미지를 더 깔끔하게
+    const dragElement = e.currentTarget as HTMLElement;
+    
+    // 커스텀 드래그 이미지 생성 (저장 버튼과 어울리는 스타일)
+    const dragImage = document.createElement('div');
+    dragImage.style.position = 'absolute';
+    dragImage.style.top = '-1000px';
+    dragImage.style.left = '-1000px';
+    dragImage.style.background = 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)';
+    dragImage.style.color = 'white';
+    dragImage.style.padding = '12px 16px';
+    dragImage.style.borderRadius = '8px';
+    dragImage.style.fontSize = '14px';
+    dragImage.style.fontWeight = '600';
+    dragImage.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.4)';
+    dragImage.style.display = 'flex';
+    dragImage.style.alignItems = 'center';
+    dragImage.style.gap = '8px';
+    dragImage.style.minWidth = '200px';
+    dragImage.style.whiteSpace = 'nowrap';
+    
+    // 아이콘과 텍스트 추가
+    const firstValue = Object.values(row)[0] || 'Row';
+    dragImage.innerHTML = `
+      <div style="
+        width: 20px; 
+        height: 20px; 
+        background: rgba(255,255,255,0.2); 
+        border-radius: 4px; 
+        display: flex; 
+        align-items: center; 
+        justify-content: center;
+        font-size: 12px;
+      ">📋</div>
+      <span>${firstValue}</span>
+      <div style="
+        background: rgba(255,255,255,0.2); 
+        padding: 2px 6px; 
+        border-radius: 4px; 
+        font-size: 11px; 
+        font-weight: 500;
+      ">4×1</div>
+    `;
+    
+    document.body.appendChild(dragImage);
+    e.dataTransfer.setDragImage(dragImage, 20, 20);
+    
+    // 정리
+    setTimeout(() => {
+      if (document.body.contains(dragImage)) {
+        document.body.removeChild(dragImage);
+      }
+    }, 0);
+  };
+
+  const handleRowDragEnd = (e: React.DragEvent) => {
+    setIsDragging(false);
+    setDraggedRowIndex(null);
+  };
+
   // DOM에 전달할 수 있는 기본 props만 정의
   const domProps = {
     onClick: handleClick,
@@ -1176,11 +1148,15 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   if (isDesignMode && !tableConfig.selectedTable) {
     return (
       <div style={componentStyle} className={className} {...domProps}>
-        <div className="flex h-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300">
-          <div className="text-center text-gray-500">
-            <TableIcon className="mx-auto mb-2 h-8 w-8" />
-            <div className="text-sm font-medium">테이블 리스트</div>
-            <div className="text-xs text-gray-400">설정 패널에서 테이블을 선택해주세요</div>
+        <div className="flex h-full items-center justify-center rounded-2xl border-2 border-dashed border-blue-200 bg-gradient-to-br from-blue-50/30 to-indigo-50/20">
+          <div className="text-center p-8">
+            <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-2xl flex items-center justify-center shadow-sm">
+              <TableIcon className="h-8 w-8 text-blue-600" />
+            </div>
+            <div className="text-lg font-semibold text-slate-700 mb-2">테이블 리스트</div>
+            <div className="text-sm text-slate-500 bg-white/60 px-4 py-2 rounded-full">
+              설정 패널에서 테이블을 선택해주세요
+            </div>
           </div>
         </div>
       </div>
@@ -1188,56 +1164,64 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   }
 
   return (
-    <div style={componentStyle} className={cn("rounded-lg border bg-white shadow-sm", className)} {...domProps}>
+    <div 
+      style={{...componentStyle, zIndex: 10}} // 🎯 componentStyle + z-index 추가
+      className={cn(
+        "rounded-lg bg-white border border-gray-200 shadow-md shadow-blue-100/50", 
+        "overflow-hidden relative", // 🎯 항상 overflow-hidden 적용 + relative 추가
+        className
+      )} 
+      {...domProps}
+    >
       {/* 헤더 */}
       {tableConfig.showHeader && (
-        <div className="flex items-center justify-between border-b p-4">
+        <div 
+          className="flex items-center justify-between bg-gray-100/80 border-b border-gray-200 px-6 py-4"
+          style={{ 
+            width: "100%", 
+            maxWidth: "100%",
+            boxSizing: "border-box"
+          }}
+        >
           <div className="flex items-center space-x-4">
             {(tableConfig.title || tableLabel) && (
-              <h3 className="text-lg font-medium">{tableConfig.title || tableLabel}</h3>
+              <h3 className="text-lg font-semibold text-gray-900">
+                {tableConfig.title || tableLabel}
+              </h3>
             )}
           </div>
 
-          <div className="flex items-center space-x-2">
+          <div className="flex items-center space-x-3">
             {/* 선택된 항목 정보 표시 */}
             {selectedRows.size > 0 && (
-              <div className="mr-4 flex items-center space-x-2">
-                <span className="text-sm text-gray-600">{selectedRows.size}개 선택됨</span>
+              <div className="flex items-center space-x-2 bg-blue-50 px-3 py-1 rounded-md">
+                <span className="text-sm font-medium text-blue-700">{selectedRows.size}개 선택됨</span>
               </div>
             )}
 
-            {/* 검색 - 기존 방식은 주석처리 */}
-            {/* {tableConfig.filter?.enabled && tableConfig.filter?.quickSearch && (
+            {/* 새로고침 */}
+            <Button 
+              variant="outline" 
+              size="sm" 
+              onClick={handleRefresh} 
+              disabled={loading}
+              style={buttonStyle}
+              className="group relative shadow-sm rounded-lg [&:hover]:opacity-90"
+            >
               <div className="flex items-center space-x-2">
                 <div className="relative">
-                  <Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
-                  <Input
-                    placeholder="검색..."
-                    value={searchTerm}
-                    onChange={(e) => handleSearch(e.target.value)}
-                    className="w-64 pl-8"
-                  />
+                  <RefreshCw className={cn(
+                    "h-4 w-4", 
+                    loading && "animate-spin"
+                  )} style={{ color: buttonTextColor }} />
+                  {loading && (
+                    <div className="absolute -inset-1 bg-blue-200/30 rounded-full animate-pulse"></div>
+                  )}
                 </div>
-                {tableConfig.filter?.showColumnSelector && (
-                  <select
-                    value={selectedSearchColumn}
-                    onChange={(e) => setSelectedSearchColumn(e.target.value)}
-                    className="min-w-[120px] rounded border px-2 py-1 text-sm"
-                  >
-                    <option value="">자동 선택</option>
-                    {visibleColumns.map((column) => (
-                      <option key={column.columnName} value={column.columnName}>
-                        {columnLabels[column.columnName] || column.displayName || column.columnName}
-                      </option>
-                    ))}
-                  </select>
-                )}
+                <span className="text-sm font-medium" style={{ color: buttonTextColor }}>
+                  {loading ? "새로고침 중..." : "새로고침"}
+                </span>
               </div>
-            )} */}
-
-            {/* 새로고침 */}
-            <Button variant="outline" size="sm" onClick={handleRefresh} disabled={loading}>
-              <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
             </Button>
           </div>
         </div>
@@ -1246,168 +1230,255 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       {/* 고급 검색 필터 - 항상 표시 (컬럼 정보 기반 자동 생성) */}
       {tableConfig.filter?.enabled && visibleColumns && visibleColumns.length > 0 && (
         <>
-          <Separator className="my-1" />
-          <AdvancedSearchFilters
-            filters={tableConfig.filter?.filters || []} // 설정된 필터 사용, 없으면 자동 생성
-            searchValues={searchValues}
-            onSearchValueChange={handleSearchValueChange}
-            onSearch={handleAdvancedSearch}
-            onClearFilters={handleClearAdvancedFilters}
+          <div className="h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent"></div>
+          <div className="bg-white p-4">
+            <AdvancedSearchFilters
+              filters={tableConfig.filter?.filters || []} // 설정된 필터 사용, 없으면 자동 생성
+              searchValues={searchValues}
+              onSearchValueChange={handleSearchValueChange}
+              onSearch={handleAdvancedSearch}
+              onClearFilters={handleClearAdvancedFilters}
             tableColumns={visibleColumns.map((col) => ({
               columnName: col.columnName,
-              webType: (columnMeta[col.columnName]?.webType as any) || "text",
+              widgetType: (columnMeta[col.columnName]?.webType || "text") as WebType,
               displayName: columnLabels[col.columnName] || col.displayName || col.columnName,
               codeCategory: columnMeta[col.columnName]?.codeCategory,
               isVisible: col.visible,
               // 추가 메타데이터 전달 (필터 자동 생성용)
-              web_type: columnMeta[col.columnName]?.webType || "text",
+              web_type: (columnMeta[col.columnName]?.webType || "text") as WebType,
               column_name: col.columnName,
               column_label: columnLabels[col.columnName] || col.displayName || col.columnName,
               code_category: columnMeta[col.columnName]?.codeCategory,
             }))}
-            tableName={tableConfig.selectedTable}
-          />
+              tableName={tableConfig.selectedTable}
+            />
+          </div>
         </>
       )}
 
       {/* 테이블 컨텐츠 */}
-      <div className={`w-full ${localPageSize >= 50 ? "flex-1 overflow-auto" : ""}`}>
+      <div 
+        className={`w-full overflow-hidden ${localPageSize >= 50 ? "flex-1" : ""}`}
+        style={{ 
+          width: "100%", 
+          maxWidth: "100%",
+          boxSizing: "border-box"
+        }}
+      >
         {loading ? (
-          <div className="flex h-full items-center justify-center">
-            <div className="text-center">
-              <RefreshCw className="mx-auto mb-2 h-8 w-8 animate-spin text-gray-400" />
-              <div className="text-sm text-gray-500">데이터를 불러오는 중...</div>
+          <div className="flex h-full items-center justify-center bg-gradient-to-br from-slate-50/50 to-blue-50/30">
+            <div className="text-center p-8">
+              <div className="relative">
+                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-2xl flex items-center justify-center">
+                  <RefreshCw className="h-8 w-8 animate-spin text-blue-600" />
+                </div>
+                <div className="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full animate-pulse"></div>
+              </div>
+              <div className="text-sm font-medium text-slate-700">데이터를 불러오는 중...</div>
+              <div className="text-xs text-slate-500 mt-1">잠시만 기다려주세요</div>
             </div>
           </div>
         ) : error ? (
-          <div className="flex h-full items-center justify-center">
-            <div className="text-center text-red-500">
-              <div className="text-sm">오류가 발생했습니다</div>
-              <div className="mt-1 text-xs text-gray-400">{error}</div>
+          <div className="flex h-full items-center justify-center bg-gradient-to-br from-red-50/50 to-orange-50/30">
+            <div className="text-center p-8">
+              <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-red-100 to-orange-100 rounded-2xl flex items-center justify-center">
+                <div className="w-8 h-8 bg-gradient-to-br from-red-500 to-orange-500 rounded-full flex items-center justify-center">
+                  <span className="text-white text-sm font-bold">!</span>
+                </div>
+              </div>
+              <div className="text-sm font-medium text-red-700">오류가 발생했습니다</div>
+              <div className="mt-1 text-xs text-red-500 bg-red-50 px-3 py-1 rounded-full">{error}</div>
             </div>
           </div>
         ) : needsHorizontalScroll ? (
           // 가로 스크롤이 필요한 경우 - 단일 테이블에서 sticky 컬럼 사용
-          <SingleTableWithSticky
-            visibleColumns={visibleColumns}
-            data={data}
-            columnLabels={columnLabels}
-            sortColumn={sortColumn}
-            sortDirection={sortDirection}
-            tableConfig={tableConfig}
-            isDesignMode={isDesignMode}
-            isAllSelected={isAllSelected}
-            handleSort={handleSort}
-            handleSelectAll={handleSelectAll}
-            handleRowClick={handleRowClick}
-            renderCheckboxCell={renderCheckboxCell}
-            formatCellValue={formatCellValue}
-            getColumnWidth={getColumnWidth}
-            joinColumnMapping={joinColumnMapping}
-          />
+          <div className="w-full overflow-hidden">
+            <SingleTableWithSticky
+              visibleColumns={visibleColumns}
+              data={data}
+              columnLabels={columnLabels}
+              sortColumn={sortColumn}
+              sortDirection={sortDirection}
+              tableConfig={tableConfig}
+              isDesignMode={isDesignMode}
+              isAllSelected={isAllSelected}
+              handleSort={handleSort}
+              handleSelectAll={handleSelectAll}
+              handleRowClick={handleRowClick}
+              renderCheckboxCell={renderCheckboxCell}
+              formatCellValue={formatCellValue}
+              getColumnWidth={getColumnWidth}
+              containerWidth={calculatedWidth}
+            />
+          </div>
         ) : (
           // 기존 테이블 (가로 스크롤이 필요 없는 경우)
-          <Table>
-            <TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-10 bg-white" : ""}>
-              <TableRow style={{ minHeight: "40px !important", height: "40px !important", lineHeight: "1" }}>
-                {visibleColumns.map((column, colIndex) => (
-                  <TableHead
-                    key={`header-${colIndex}-${column.columnName}`}
-                    style={{
-                      width: column.width ? `${column.width}px` : undefined,
-                      minHeight: "40px !important",
-                      height: "40px !important",
-                      verticalAlign: "middle",
-                      lineHeight: "1",
-                      boxSizing: "border-box",
-                    }}
-                    className={cn(
-                      column.columnName === "__checkbox__"
-                        ? "h-10 text-center align-middle"
-                        : "h-10 cursor-pointer align-middle whitespace-nowrap select-none",
-                      `text-${column.align}`,
-                      column.sortable && "hover:bg-gray-50",
-                    )}
-                    onClick={() => column.sortable && handleSort(column.columnName)}
-                  >
-                    {column.columnName === "__checkbox__" ? (
-                      renderCheckboxHeader()
-                    ) : (
-                      <div className="flex items-center space-x-1">
-                        <span>{columnLabels[column.columnName] || column.displayName}</span>
-                        {column.sortable && (
-                          <div className="flex flex-col">
-                            {sortColumn === column.columnName ? (
-                              sortDirection === "asc" ? (
-                                <ArrowUp className="h-3 w-3" />
+          <div className="w-full overflow-hidden">
+            <Table 
+              className="w-full"
+              style={{ 
+                width: "100%", 
+                maxWidth: "100%",
+                tableLayout: "fixed" // 테이블 크기 고정
+              }}
+            >
+              <TableHeader className={cn(
+                tableConfig.stickyHeader ? "sticky top-0 z-20" : "",
+                "bg-gray-100/80 border-b border-gray-200"
+              )}>
+                <TableRow 
+                  style={{ 
+                    minHeight: "48px !important", 
+                    height: "48px !important", 
+                    lineHeight: "1",
+                    width: "100%",
+                    maxWidth: "100%"
+                  }}
+                  className="border-none"
+                >
+                  {visibleColumns.map((column, colIndex) => (
+                    <TableHead
+                      key={column.columnName}
+                      style={{
+                        width: column.width ? `${column.width}px` : undefined,
+                        minHeight: "48px !important",
+                        height: "48px !important",
+                        verticalAlign: "middle",
+                        lineHeight: "1",
+                        boxSizing: "border-box",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                      }}
+                        className={cn(
+                          "h-12 align-middle px-4 py-3 text-sm font-semibold text-gray-800",
+                        column.columnName === "__checkbox__"
+                          ? "text-center"
+                          : "cursor-pointer whitespace-nowrap select-none",
+                        `text-${column.align}`,
+                        column.sortable && "hover:bg-orange-100 transition-colors duration-150"
+                      )}
+                      onClick={() => column.sortable && handleSort(column.columnName)}
+                    >
+                      {column.columnName === "__checkbox__" ? (
+                        renderCheckboxHeader()
+                      ) : (
+                        <div className="flex items-center space-x-2">
+                          <span>
+                            {columnLabels[column.columnName] || column.displayName}
+                          </span>
+                          {column.sortable && (
+                            <div className="flex flex-col">
+                              {sortColumn === column.columnName ? (
+                                sortDirection === "asc" ? (
+                                  <ArrowUp className="h-3 w-3 text-blue-600" />
+                                ) : (
+                                  <ArrowDown className="h-3 w-3 text-blue-600" />
+                                )
                               ) : (
-                                <ArrowDown className="h-3 w-3" />
-                              )
-                            ) : (
-                              <ArrowUpDown className="h-3 w-3 text-gray-400" />
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </TableHead>
-                ))}
-              </TableRow>
-            </TableHeader>
+                                <ArrowUpDown className="h-3 w-3 text-gray-400" />
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
             <TableBody>
               {data.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={visibleColumns.length} className="py-8 text-center text-gray-500">
-                    데이터가 없습니다
+                  <TableCell colSpan={visibleColumns.length} className="py-12 text-center">
+                    <div className="flex flex-col items-center space-y-3">
+                      <div className="w-12 h-12 bg-gradient-to-br from-slate-100 to-slate-200 rounded-2xl flex items-center justify-center">
+                        <TableIcon className="h-6 w-6 text-slate-400" />
+                      </div>
+                      <div className="text-sm font-medium text-slate-600">데이터가 없습니다</div>
+                      <div className="text-xs text-slate-400">조건을 변경하거나 새로운 데이터를 추가해보세요</div>
+                    </div>
                   </TableCell>
                 </TableRow>
               ) : (
                 data.map((row, index) => (
                   <TableRow
-                    key={`row-${index}-${getRowKey(row, index)}`}
+                    key={index}
+                    draggable={!isDesignMode}
+                    onDragStart={(e) => handleRowDragStart(e, row, index)}
+                    onDragEnd={handleRowDragEnd}
                     className={cn(
-                      "h-10 cursor-pointer leading-none",
-                      tableConfig.tableStyle?.hoverEffect && "hover:bg-gray-50",
-                      tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/50",
+                      "group relative h-12 cursor-pointer transition-all duration-200 border-b border-gray-100",
+                      // 기본 스타일
+                      tableConfig.tableStyle?.hoverEffect && "hover:bg-gradient-to-r hover:from-orange-200 hover:to-orange-300/90 hover:shadow-sm",
+                      tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-100/80",
+                      // 드래그 상태 스타일 (미묘하게)
+                      draggedRowIndex === index && "bg-gradient-to-r from-blue-50 to-blue-100/40 shadow-sm border-blue-200",
+                      isDragging && draggedRowIndex !== index && "opacity-70",
+                      // 드래그 가능 표시
+                      !isDesignMode && "hover:cursor-grab active:cursor-grabbing"
                     )}
-                    style={{ minHeight: "40px", height: "40px", lineHeight: "1" }}
+                    style={{ 
+                      minHeight: "48px", 
+                      height: "48px", 
+                      lineHeight: "1",
+                      width: "100%",
+                      maxWidth: "100%"
+                    }}
                     onClick={() => handleRowClick(row)}
                   >
                     {visibleColumns.map((column, colIndex) => (
                       <TableCell
-                        key={`cell-${index}-${colIndex}-${column.columnName}`}
-                        className={cn("h-10 align-middle whitespace-nowrap", `text-${column.align}`)}
-                        style={{ minHeight: "40px", height: "40px", verticalAlign: "middle" }}
+                        key={column.columnName}
+                        className={cn(
+                          "h-12 align-middle px-4 py-3 text-sm transition-all duration-200", 
+                          `text-${column.align}`
+                        )}
+                        style={{ 
+                          minHeight: "48px", 
+                          height: "48px", 
+                          verticalAlign: "middle",
+                          width: column.width ? `${column.width}px` : undefined,
+                          boxSizing: "border-box",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        }}
                       >
                         {column.columnName === "__checkbox__"
                           ? renderCheckboxCell(row, index)
                           : (() => {
                               // 🎯 매핑된 컬럼명으로 데이터 찾기
                               const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
-
-                              // 조인 컬럼 매핑 정보 로깅
-                              if (column.columnName !== mappedColumnName && index === 0) {
-                                console.log(`🔗 조인 컬럼 매핑: ${column.columnName} → ${mappedColumnName}`);
-                              }
-
                               const cellValue = row[mappedColumnName];
                               if (index === 0) {
-                                // 첫 번째 행만 로그 출력
-                                console.log(`🔍 셀 데이터 [${column.columnName} → ${mappedColumnName}]:`, cellValue);
-
-                                // 🚨 조인된 컬럼인 경우 추가 디버깅
-                                if (column.columnName !== mappedColumnName) {
-                                  console.log("  🔗 조인 컬럼 분석:");
-                                  console.log(`    👤 사용자 설정 컬럼: "${column.columnName}"`);
-                                  console.log(`    📡 매핑된 API 컬럼: "${mappedColumnName}"`);
-                                  console.log(`    📋 컬럼 라벨: "${column.displayName}"`);
-                                  console.log(`    💾 실제 데이터: "${cellValue}"`);
-                                  console.log(
-                                    `    🔄 원본 컬럼 데이터 (${column.columnName}): "${row[column.columnName]}"`,
-                                  );
-                                }
+                // 디버깅 로그 제거 (성능상 이유로)
                               }
-                              return formatCellValue(cellValue, column.format, column.columnName) || "\u00A0";
+                              const formattedValue = formatCellValue(cellValue, column.format, column.columnName) || "\u00A0";
+                              
+                              // 첫 번째 컬럼에 드래그 핸들과 아바타 추가
+                              const isFirstColumn = colIndex === (visibleColumns[0]?.columnName === "__checkbox__" ? 1 : 0);
+                              
+                              return (
+                                <div className="flex items-center space-x-2">
+                                  {isFirstColumn && !isDesignMode && (
+                                    <div className="opacity-60 cursor-grab active:cursor-grabbing mr-1">
+                                      {/* 그리드 스냅 가이드 아이콘 */}
+                                      <div className="flex space-x-0.5">
+                                        <div className="flex flex-col space-y-0.5">
+                                          <div className="w-0.5 h-0.5 bg-gray-400 rounded-full"></div>
+                                          <div className="w-0.5 h-0.5 bg-gray-400 rounded-full"></div>
+                                        </div>
+                                        <div className="flex flex-col space-y-0.5">
+                                          <div className="w-0.5 h-0.5 bg-gray-400 rounded-full"></div>
+                                          <div className="w-0.5 h-0.5 bg-gray-400 rounded-full"></div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  )}
+                                  <span className="font-medium text-gray-700">
+                                    {formattedValue}
+                                  </span>
+                                </div>
+                              );
                             })()}
                       </TableCell>
                     ))}
@@ -1416,40 +1487,76 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               )}
             </TableBody>
           </Table>
+          </div>
         )}
       </div>
 
       {/* 푸터/페이지네이션 */}
       {tableConfig.showFooter && tableConfig.pagination?.enabled && (
-        <div className="flex items-center justify-between border-t p-4">
-          <div className="text-sm text-gray-500">
-            {tableConfig.pagination?.showPageInfo && (
-              <span>
-                전체 {totalItems.toLocaleString()}건 중 {(currentPage - 1) * localPageSize + 1}-
-                {Math.min(currentPage * localPageSize, totalItems)} 표시
+        <div 
+          className="flex flex-col items-center justify-center bg-gray-100/80 border-t border-gray-200 p-6 space-y-4"
+          style={{ 
+            width: "100%", 
+            maxWidth: "100%",
+            boxSizing: "border-box"
+          }}
+        >
+          {/* 페이지 정보 - 가운데 정렬 */}
+          {tableConfig.pagination?.showPageInfo && (
+            <div className="flex items-center justify-center space-x-2 text-sm text-slate-600">
+              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+              <span className="font-medium">
+                전체 <span className="text-blue-600 font-semibold">{totalItems.toLocaleString()}</span>건 중{" "}
+                <span className="text-slate-800 font-semibold">
+                  {(currentPage - 1) * localPageSize + 1}-{Math.min(currentPage * localPageSize, totalItems)}
+                </span>{" "}
+                표시
               </span>
-            )}
-          </div>
+            </div>
+          )}
 
-          <div className="flex items-center space-x-2">
-            {/* 페이지 크기 선택 */}
-            {tableConfig.pagination?.showSizeSelector && (
+          {/* 페이지 크기 선택과 페이지네이션 버튼 - 가운데 정렬 */}
+          <div className="flex items-center justify-center space-x-4">
+            {/* 페이지 크기 선택 - 임시로 항상 표시 (테스트용) */}
+            {true && (
               <select
                 value={localPageSize}
                 onChange={(e) => {
+                  console.log("🚀 페이지 크기 드롭다운 변경 감지:", e.target.value);
                   const newPageSize = parseInt(e.target.value);
 
-                  // 로컬 상태만 업데이트 (데이터베이스에 저장하지 않음)
+                  console.log("🎯 페이지 크기 변경 이벤트:", { 
+                    from: localPageSize, 
+                    to: newPageSize,
+                    hasOnConfigChange: !!onConfigChange,
+                    onConfigChangeType: typeof onConfigChange
+                  });
+
+                  // 로컬 상태 업데이트
                   setLocalPageSize(newPageSize);
 
                   // 페이지를 1로 리셋
                   setCurrentPage(1);
 
+                  // 상세설정에 변경사항 알림 (pagination 설정 업데이트)
+                  if (onConfigChange) {
+                    console.log("📤 테이블에서 페이지 크기 변경을 상세설정에 알림:", newPageSize);
+                    onConfigChange({
+                      ...tableConfig,
+                      pagination: {
+                        ...tableConfig.pagination,
+                        pageSize: newPageSize,
+                      },
+                    });
+                  } else {
+                    console.warn("⚠️ onConfigChange가 정의되지 않음 - 상세설정과 연동 불가");
+                  }
+
                   // 데이터는 useEffect에서 자동으로 다시 로드됨
                 }}
-                className="rounded border px-2 py-1 text-sm"
+                className="bg-white/80 border border-slate-200 rounded-lg px-3 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-white hover:border-slate-300 transition-colors"
               >
-                {tableConfig.pagination?.pageSizeOptions?.map((size) => (
+                {(tableConfig.pagination?.pageSizeOptions || [10, 20, 50, 100]).map((size) => (
                   <option key={size} value={size}>
                     {size}개씩
                   </option>
@@ -1458,8 +1565,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             )}
 
             {/* 페이지네이션 버튼 */}
-            <div className="flex items-center space-x-1">
-              <Button variant="outline" size="sm" onClick={() => handlePageChange(1)} disabled={currentPage === 1}>
+            <div className="flex items-center space-x-2 bg-white rounded-lg border border-gray-200 shadow-sm p-1">
+              <Button 
+                variant="outline" 
+                size="sm" 
+                onClick={() => handlePageChange(1)} 
+                disabled={currentPage === 1}
+                className="h-8 w-8 p-0 disabled:opacity-50 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300"
+              >
                 <ChevronsLeft className="h-4 w-4" />
               </Button>
               <Button
@@ -1467,19 +1580,27 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 size="sm"
                 onClick={() => handlePageChange(currentPage - 1)}
                 disabled={currentPage === 1}
+                className="h-8 w-8 p-0 disabled:opacity-50 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300"
               >
                 <ChevronLeft className="h-4 w-4" />
               </Button>
 
-              <span className="px-3 py-1 text-sm">
-                {currentPage} / {totalPages}
-              </span>
+              <div className="flex items-center px-4 py-1 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-md border border-blue-100">
+                <span className="text-sm font-semibold text-blue-800">
+                  {currentPage}
+                </span>
+                <span className="text-gray-400 mx-2 font-light">/</span>
+                <span className="text-sm font-medium text-gray-600">
+                  {totalPages}
+                </span>
+              </div>
 
               <Button
                 variant="outline"
                 size="sm"
                 onClick={() => handlePageChange(currentPage + 1)}
                 disabled={currentPage === totalPages}
+                className="h-8 w-8 p-0 disabled:opacity-50 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300"
               >
                 <ChevronRight className="h-4 w-4" />
               </Button>
@@ -1488,6 +1609,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 size="sm"
                 onClick={() => handlePageChange(totalPages)}
                 disabled={currentPage === totalPages}
+                className="h-8 w-8 p-0 disabled:opacity-50 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300"
               >
                 <ChevronsRight className="h-4 w-4" />
               </Button>
diff --git a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
index a9b7f042..c374bd5a 100644
--- a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
+++ b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
@@ -33,7 +33,13 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
   tableColumns,
 }) => {
   console.log("🔍 TableListConfigPanel props:", {
-    config: config?.selectedTable,
+    config,
+    configType: typeof config,
+    configSelectedTable: config?.selectedTable,
+    configPagination: config?.pagination,
+    paginationEnabled: config?.pagination?.enabled,
+    paginationPageSize: config?.pagination?.pageSize,
+    configKeys: typeof config === 'object' ? Object.keys(config || {}) : 'not object',
     screenTableName,
     tableColumns: tableColumns?.length,
     tableColumnsSample: tableColumns?.[0],
@@ -210,13 +216,25 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
   };
 
   const handleNestedChange = (parentKey: keyof TableListConfig, childKey: string, value: any) => {
+    console.log("🔧 TableListConfigPanel handleNestedChange:", {
+      parentKey,
+      childKey,
+      value,
+      parentValue: config[parentKey],
+      hasOnChange: !!onChange,
+      onChangeType: typeof onChange,
+    });
+    
     const parentValue = config[parentKey] as any;
-    onChange({
+    const newConfig = {
       [parentKey]: {
         ...parentValue,
         [childKey]: value,
       },
-    });
+    };
+    
+    console.log("📤 TableListConfigPanel onChange 호출:", newConfig);
+    onChange(newConfig);
   };
 
   // 컬럼 추가
diff --git a/frontend/lib/registry/components/table-list/TableListRenderer.tsx b/frontend/lib/registry/components/table-list/TableListRenderer.tsx
index 10fa959d..84569200 100644
--- a/frontend/lib/registry/components/table-list/TableListRenderer.tsx
+++ b/frontend/lib/registry/components/table-list/TableListRenderer.tsx
@@ -13,9 +13,27 @@ export class TableListRenderer extends AutoRegisteringComponentRenderer {
   static componentDefinition = TableListDefinition;
 
   render(): React.ReactElement {
-    return <TableListComponent {...this.props} renderer={this} />;
+    return <TableListComponent 
+      {...this.props} 
+      renderer={this} 
+      onConfigChange={this.handleConfigChange}
+    />;
   }
 
+  // 설정 변경 핸들러
+  protected handleConfigChange = (config: any) => {
+    console.log("📥 TableListRenderer에서 설정 변경 받음:", config);
+    
+    // 상위 컴포넌트의 onConfigChange 호출 (화면 설계자에게 알림)
+    if (this.props.onConfigChange) {
+      this.props.onConfigChange(config);
+    } else {
+      console.log("⚠️ 상위 컴포넌트에서 onConfigChange가 전달되지 않음");
+    }
+    
+    this.updateComponent({ config });
+  };
+
   /**
    * 컴포넌트별 특화 메서드들
    */
diff --git a/frontend/lib/registry/components/test-input/TestInputComponent.tsx b/frontend/lib/registry/components/test-input/TestInputComponent.tsx
index 113d3bcd..43c8bf4b 100644
--- a/frontend/lib/registry/components/test-input/TestInputComponent.tsx
+++ b/frontend/lib/registry/components/test-input/TestInputComponent.tsx
@@ -81,7 +81,7 @@ export const TestInputComponent: React.FC<TestInputComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
index 0177590f..08da69f1 100644
--- a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
+++ b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
@@ -72,7 +72,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
   const textStyle: React.CSSProperties = {
     fontSize: componentConfig.fontSize || "14px",
     fontWeight: componentConfig.fontWeight || "normal",
-    color: componentConfig.color || "#374151",
+    color: componentConfig.color || "#3b83f6",
     textAlign: componentConfig.textAlign || "left",
     backgroundColor: componentConfig.backgroundColor || "transparent",
     padding: componentConfig.padding || "0",
@@ -102,7 +102,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/text-display/TextDisplayConfigPanel.tsx b/frontend/lib/registry/components/text-display/TextDisplayConfigPanel.tsx
index ff35d8d9..728228c7 100644
--- a/frontend/lib/registry/components/text-display/TextDisplayConfigPanel.tsx
+++ b/frontend/lib/registry/components/text-display/TextDisplayConfigPanel.tsx
@@ -85,7 +85,7 @@ export const TextDisplayConfigPanel: React.FC<TextDisplayConfigPanelProps> = ({
         <Input
           id="color"
           type="color"
-          value={config.color || "#374151"}
+          value={config.color || "#3b83f6"}
           onChange={(e) => handleChange("color", e.target.value)}
         />
       </div>
diff --git a/frontend/lib/registry/components/text-display/index.ts b/frontend/lib/registry/components/text-display/index.ts
index c86255f1..9280aa0b 100644
--- a/frontend/lib/registry/components/text-display/index.ts
+++ b/frontend/lib/registry/components/text-display/index.ts
@@ -24,7 +24,7 @@ export const TextDisplayDefinition = createComponentDefinition({
     text: "텍스트를 입력하세요",
     fontSize: "14px",
     fontWeight: "normal",
-    color: "#374151",
+    color: "#3b83f6",
     textAlign: "left",
   },
   defaultSize: { width: 150, height: 24 },
diff --git a/frontend/lib/registry/components/text-input/TextInputComponent.tsx b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
index 4a5aabf6..f4fe7a9e 100644
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -190,7 +190,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx b/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx
index 04128d74..482280b0 100644
--- a/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx
+++ b/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx
@@ -84,7 +84,7 @@ export const TextareaBasicComponent: React.FC<TextareaBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
diff --git a/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx b/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx
index 8183e1c0..f71a4127 100644
--- a/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx
+++ b/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx
@@ -84,7 +84,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
@@ -173,7 +173,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
         </div>
         <span
           style={{
-            color: "#374151",
+            color: "#3b83f6",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
           }}
diff --git a/frontend/lib/registry/layouts/AutoRegisteringLayoutRenderer.tsx b/frontend/lib/registry/layouts/AutoRegisteringLayoutRenderer.tsx
index ab181d76..91645753 100644
--- a/frontend/lib/registry/layouts/AutoRegisteringLayoutRenderer.tsx
+++ b/frontend/lib/registry/layouts/AutoRegisteringLayoutRenderer.tsx
@@ -308,7 +308,7 @@ export class AutoRegisteringLayoutRenderer {
           style: {
             labelDisplay: true,
             labelFontSize: "14px",
-            labelColor: "#374151",
+            labelColor: "#3b83f6",
             labelFontWeight: "500",
             labelMarginBottom: "4px",
           },
diff --git a/frontend/lib/registry/layouts/BaseLayoutRenderer.tsx b/frontend/lib/registry/layouts/BaseLayoutRenderer.tsx
index 1fbd6e6d..72b224eb 100644
--- a/frontend/lib/registry/layouts/BaseLayoutRenderer.tsx
+++ b/frontend/lib/registry/layouts/BaseLayoutRenderer.tsx
@@ -60,8 +60,15 @@ export abstract class BaseLayoutRenderer extends React.Component<LayoutRendererP
 
     // 디자인 모드일 때 더 강조된 스타일
     if (isDesignMode) {
-      zoneStyle.border = "2px dashed #cbd5e1";
-      zoneStyle.backgroundColor = "rgba(241, 245, 249, 0.8)";
+      // 🎯 컴포넌트가 있는 존은 테두리 제거 (컴포넌트 자체 테두리와 충돌 방지)
+      if (zoneChildren.length === 0) {
+        zoneStyle.border = "2px dashed #cbd5e1";
+        zoneStyle.backgroundColor = "rgba(241, 245, 249, 0.8)";
+      } else {
+        // 컴포넌트가 있는 존은 미묘한 배경만
+        zoneStyle.border = "1px solid transparent";
+        zoneStyle.backgroundColor = "rgba(248, 250, 252, 0.3)";
+      }
     }
 
     // 호버 효과를 위한 추가 스타일
@@ -91,14 +98,26 @@ export abstract class BaseLayoutRenderer extends React.Component<LayoutRendererP
         }}
         onMouseEnter={(e) => {
           const element = e.currentTarget;
-          element.style.borderColor = "#3b82f6";
-          element.style.backgroundColor = "rgba(59, 130, 246, 0.02)";
-          element.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.1)";
+          // 🎯 컴포넌트가 있는 존은 호버 효과 최소화
+          if (zoneChildren.length > 0) {
+            element.style.backgroundColor = "rgba(59, 130, 246, 0.01)";
+          } else {
+            element.style.borderColor = "#3b82f6";
+            element.style.backgroundColor = "rgba(59, 130, 246, 0.02)";
+            element.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.1)";
+          }
         }}
         onMouseLeave={(e) => {
           const element = e.currentTarget;
-          element.style.borderColor = isDesignMode ? "#cbd5e1" : "#e2e8f0";
-          element.style.backgroundColor = isDesignMode ? "rgba(241, 245, 249, 0.8)" : "rgba(248, 250, 252, 0.5)";
+          if (zoneChildren.length > 0) {
+            // 컴포넌트가 있는 존 복원
+            element.style.borderColor = "transparent";
+            element.style.backgroundColor = isDesignMode ? "rgba(248, 250, 252, 0.3)" : "rgba(248, 250, 252, 0.5)";
+          } else {
+            // 빈 존 복원
+            element.style.borderColor = isDesignMode ? "#cbd5e1" : "#e2e8f0";
+            element.style.backgroundColor = isDesignMode ? "rgba(241, 245, 249, 0.8)" : "rgba(248, 250, 252, 0.5)";
+          }
           element.style.boxShadow = "none";
         }}
         onDrop={this.handleDrop(zone.id)}
diff --git a/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx b/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
index 43488c51..e108b7c7 100644
--- a/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
+++ b/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
@@ -148,7 +148,7 @@ const AccordionSection: React.FC<{
   const headerStyle: React.CSSProperties = {
     padding: "12px 16px",
     backgroundColor: isDesignMode ? "#3b82f6" : "#f8fafc",
-    color: isDesignMode ? "white" : "#374151",
+    color: isDesignMode ? "white" : "#3b83f6",
     border: "1px solid #e2e8f0",
     borderBottom: isExpanded ? "none" : "1px solid #e2e8f0",
     cursor: "pointer",
diff --git a/frontend/lib/registry/utils/hotReload.ts b/frontend/lib/registry/utils/hotReload.ts
index c4688100..a2f61a29 100644
--- a/frontend/lib/registry/utils/hotReload.ts
+++ b/frontend/lib/registry/utils/hotReload.ts
@@ -14,6 +14,10 @@ let hotReloadListeners: Array<() => void> = [];
  * Hot Reload 시스템 초기화
  */
 export function initializeHotReload(): void {
+  // 핫 리로드 시스템 임시 비활성화 (디버깅 목적)
+  console.log("🔥 컴포넌트 Hot Reload 시스템 비활성화됨 (디버깅 모드)");
+  return;
+  
   if (process.env.NODE_ENV !== "development" || typeof window === "undefined") {
     return;
   }
@@ -55,11 +59,15 @@ function setupDevServerEventListener(): void {
     const originalLog = console.log;
     let reloadPending = false;
 
-    // console.log 메시지를 감지하여 Hot Reload 트리거
+    // console.log 메시지를 감지하여 Hot Reload 트리거 (특정 메시지만)
     console.log = (...args: any[]) => {
       const message = args.join(" ");
 
-      if (message.includes("compiled") || message.includes("Fast Refresh") || message.includes("component")) {
+      // 핫 리로드를 트리거할 특정 메시지만 감지 (디버깅 로그는 제외)
+      if ((message.includes("compiled") || message.includes("Fast Refresh")) && 
+          !message.includes("🔍") && !message.includes("🎯") && !message.includes("📤") && 
+          !message.includes("📥") && !message.includes("⚠️") && !message.includes("🔄") && 
+          !message.includes("✅") && !message.includes("🔧") && !message.includes("📋")) {
         if (!reloadPending) {
           reloadPending = true;
           setTimeout(() => {
diff --git a/frontend/lib/utils/getComponentConfigPanel.tsx b/frontend/lib/utils/getComponentConfigPanel.tsx
index 8ff6fd55..fa464377 100644
--- a/frontend/lib/utils/getComponentConfigPanel.tsx
+++ b/frontend/lib/utils/getComponentConfigPanel.tsx
@@ -110,6 +110,8 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
   screenTableName,
   tableColumns,
 }) => {
+  console.log(`🔥 DynamicComponentConfigPanel 렌더링 시작: ${componentId}`);
+  
   const [ConfigPanelComponent, setConfigPanelComponent] = React.useState<React.ComponentType<any> | null>(null);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
@@ -180,10 +182,21 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
     );
   }
 
+  console.log(`🔧 DynamicComponentConfigPanel 렌더링:`, {
+    componentId,
+    ConfigPanelComponent: ConfigPanelComponent?.name,
+    config,
+    configType: typeof config,
+    configKeys: typeof config === 'object' ? Object.keys(config || {}) : 'not object',
+    screenTableName,
+    tableColumns: Array.isArray(tableColumns) ? tableColumns.length : tableColumns
+  });
+
   return (
     <ConfigPanelComponent
       config={config}
       onChange={onChange}
+      onConfigChange={onChange}  // TableListConfigPanel을 위한 추가 prop
       screenTableName={screenTableName}
       tableColumns={tableColumns}
     />
diff --git a/frontend/scripts/create-component.js b/frontend/scripts/create-component.js
index 674f48d7..83d5c852 100755
--- a/frontend/scripts/create-component.js
+++ b/frontend/scripts/create-component.js
@@ -661,7 +661,7 @@ function getComponentJSXByWebType(webType) {
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
           }}
         >
@@ -709,7 +709,7 @@ function getComponentJSXByWebType(webType) {
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
           }}
         >
@@ -785,7 +785,7 @@ function getComponentJSXByWebType(webType) {
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#374151",
+            color: component.style?.labelColor || "#3b83f6",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/types/component.ts b/frontend/types/component.ts
index 34a8cd92..ea29cc5f 100644
--- a/frontend/types/component.ts
+++ b/frontend/types/component.ts
@@ -68,6 +68,9 @@ export interface ComponentRendererProps {
   // 새로운 기능들
   autoGeneration?: AutoGenerationConfig; // 자동생성 설정
   hidden?: boolean; // 숨김 기능 (편집기에서는 연하게, 실제 화면에서는 숨김)
+  
+  // 설정 변경 핸들러
+  onConfigChange?: (config: any) => void;
 
   [key: string]: any;
 }
@@ -317,7 +320,7 @@ export const COMPONENT_CATEGORIES_INFO = {
   [ComponentCategory.CHART]: {
     name: "차트",
     description: "데이터 시각화 컴포넌트",
-    color: "#06b6d4",
+    color: "#3b83f6",
   },
   [ComponentCategory.FORM]: {
     name: "폼",
@@ -347,7 +350,7 @@ export const COMPONENT_CATEGORIES_INFO = {
   [ComponentCategory.CONTAINER]: {
     name: "컨테이너",
     description: "다른 컴포넌트를 담는 컨테이너",
-    color: "#374151",
+    color: "#3b83f6",
   },
   [ComponentCategory.SYSTEM]: {
     name: "시스템",