Merge branch 'gbpark-node' of http://39.117.244.52:3000/kjs/ERP-node into jskim-node

frontend/app/(main)/admin/systemMng/tableMngList/page.tsx

@@ -217,10 +217,16 @@ export default function TableManagementPage() {
   // 메모이제이션된 입력타입 옵션
   const memoizedInputTypeOptions = useMemo(() => inputTypeOptions, []);
 
-  // 참조 테이블 옵션 (실제 테이블 목록에서 가져옴)
+  // 참조 테이블 옵션 (한글라벨 (영어명) 동시 표시)
   const referenceTableOptions = [
     { value: "none", label: getTextFromUI(TABLE_MANAGEMENT_KEYS.LABEL_NONE, "선택 안함") },
-    ...tables.map((table) => ({ value: table.tableName, label: table.displayName || table.tableName })),
+    ...tables.map((table) => ({
+      value: table.tableName,
+      label:
+        table.displayName && table.displayName !== table.tableName
+          ? `${table.displayName} (${table.tableName})`
+          : table.tableName,
+    })),
   ];
 
   // 공통 코드 카테고리 목록 상태
@@ -1610,6 +1616,8 @@ export default function TableManagementPage() {
                     onIndexToggle={(columnName, checked) =>
                       handleIndexToggle(columnName, "index", checked)
                     }
+                    tables={tables}
+                    referenceTableColumns={referenceTableColumns}
                   />
                 </>
               )}
@@ -1809,11 +1817,16 @@ export default function TableManagementPage() {
                 <p className="text-sm font-medium">변경될 PK 컬럼:</p>
                 {pendingPkColumns.length > 0 ? (
                   <div className="mt-2 flex flex-wrap gap-2">
-                    {pendingPkColumns.map((col) => (
-                      <Badge key={col} variant="secondary" className="font-mono text-xs">
-                        {col}
-                      </Badge>
-                    ))}
+                    {pendingPkColumns.map((col) => {
+                      const colInfo = columns.find((c) => c.columnName === col);
+                      return (
+                        <Badge key={col} variant="secondary" className="text-xs">
+                          {colInfo?.displayName && colInfo.displayName !== col
+                            ? `${colInfo.displayName} (${col})`
+                            : col}
+                        </Badge>
+                      );
+                    })}
                   </div>
                 ) : (
                   <p className="text-destructive mt-2 text-sm">PK가 모두 제거됩니다</p>

frontend/components/admin/CompanySwitcher.tsx

@@ -174,6 +174,8 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
                   ? "bg-accent/50 font-semibold"
                   : ""
               }`}
+              role="button"
+              aria-label={`${company.company_name} ${company.company_code}`}
               onClick={() => handleCompanySwitch(company.company_code)}
             >
               <div className="flex flex-col">

frontend/components/admin/table-type/ColumnDetailPanel.tsx

@@ -76,9 +76,34 @@ export function ColumnDetailPanel({
 
   if (!column) return null;
 
-  const refTableOpts = referenceTableOptions.length
-    ? referenceTableOptions
-    : [{ value: "none", label: "선택 안함" }, ...tables.map((t) => ({ value: t.tableName, label: t.displayName || t.tableName }))];
+  const refTableOpts = useMemo(() => {
+    const hasKorean = (s: string) => /[가-힣]/.test(s);
+    const raw = referenceTableOptions.length
+      ? [...referenceTableOptions]
+      : [
+          { value: "none", label: "없음" },
+          ...tables.map((t) => ({
+            value: t.tableName,
+            label:
+              t.displayName && t.displayName !== t.tableName
+                ? `${t.displayName} (${t.tableName})`
+                : t.tableName,
+          })),
+        ];
+
+    const noneOpt = raw.find((o) => o.value === "none");
+    const rest = raw.filter((o) => o.value !== "none");
+
+    rest.sort((a, b) => {
+      const aK = hasKorean(a.label);
+      const bK = hasKorean(b.label);
+      if (aK && !bK) return -1;
+      if (!aK && bK) return 1;
+      return a.label.localeCompare(b.label, "ko");
+    });
+
+    return noneOpt ? [noneOpt, ...rest] : rest;
+  }, [referenceTableOptions, tables]);
 
   return (
     <div className="flex h-full w-full flex-col border-l bg-card">
@@ -90,7 +115,11 @@ export function ColumnDetailPanel({
               {typeConf.label}
             </span>
           )}
-          <span className="truncate font-mono text-sm font-medium">{column.columnName}</span>
+          <span className="truncate text-sm font-medium">
+            {column.displayName && column.displayName !== column.columnName
+              ? `${column.displayName} (${column.columnName})`
+              : column.columnName}
+          </span>
         </div>
         <Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={onClose} aria-label="닫기">
           <X className="h-4 w-4" />
@@ -170,23 +199,33 @@ export function ColumnDetailPanel({
                     <CommandList className="max-h-[200px]">
                       <CommandEmpty className="py-2 text-center text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
                       <CommandGroup>
-                        {refTableOpts.map((opt) => (
-                          <CommandItem
-                            key={opt.value}
-                            value={`${opt.label} ${opt.value}`}
-                            onSelect={() => {
-                              onColumnChange("referenceTable", opt.value === "none" ? undefined : opt.value);
-                              if (opt.value !== "none") onLoadReferenceColumns?.(opt.value);
-                              setEntityTableOpen(false);
-                            }}
-                            className="text-xs"
-                          >
-                            <Check
-                              className={cn("mr-2 h-3 w-3", column.referenceTable === opt.value ? "opacity-100" : "opacity-0")}
-                            />
-                            {opt.label}
-                          </CommandItem>
-                        ))}
+                        {refTableOpts.map((opt) => {
+                          const hasKorean = opt.value !== "none" && opt.label !== opt.value && !opt.label.startsWith(opt.value);
+                          return (
+                            <CommandItem
+                              key={opt.value}
+                              value={`${opt.label} ${opt.value}`}
+                              onSelect={() => {
+                                onColumnChange("referenceTable", opt.value === "none" ? undefined : opt.value);
+                                if (opt.value !== "none") onLoadReferenceColumns?.(opt.value);
+                                setEntityTableOpen(false);
+                              }}
+                              className="text-xs"
+                            >
+                              <Check
+                                className={cn("mr-2 h-3 w-3", column.referenceTable === opt.value ? "opacity-100" : "opacity-0")}
+                              />
+                              {hasKorean ? (
+                                <div className="flex flex-col">
+                                  <span className="font-medium">{opt.label.replace(` (${opt.value})`, "")}</span>
+                                  <span className="text-[10px] text-muted-foreground">{opt.value}</span>
+                                </div>
+                              ) : (
+                                opt.label
+                              )}
+                            </CommandItem>
+                          );
+                        })}
                       </CommandGroup>
                     </CommandList>
                   </Command>
@@ -207,7 +246,12 @@ export function ColumnDetailPanel({
                       className="h-9 w-full justify-between text-xs"
                     >
                       {column.referenceColumn && column.referenceColumn !== "none"
-                        ? column.referenceColumn
+                        ? (() => {
+                            const matched = refColumns.find((c) => c.columnName === column.referenceColumn);
+                            return matched?.displayName && matched.displayName !== column.referenceColumn
+                              ? `${matched.displayName} (${column.referenceColumn})`
+                              : column.referenceColumn;
+                          })()
                         : "컬럼 선택..."}
                       <ChevronsUpDown className="ml-2 h-3 w-3 opacity-50" />
                     </Button>
@@ -245,7 +289,14 @@ export function ColumnDetailPanel({
                                   column.referenceColumn === refCol.columnName ? "opacity-100" : "opacity-0",
                                 )}
                               />
-                              {refCol.columnName}
+                              {refCol.displayName && refCol.displayName !== refCol.columnName ? (
+                                <div className="flex flex-col">
+                                  <span className="font-medium">{refCol.displayName}</span>
+                                  <span className="text-[10px] text-muted-foreground">{refCol.columnName}</span>
+                                </div>
+                              ) : (
+                                <span>{refCol.columnName}</span>
+                              )}
                             </CommandItem>
                           ))}
                         </CommandGroup>
@@ -259,12 +310,20 @@ export function ColumnDetailPanel({
             {/* 참조 요약 미니맵 */}
             {column.referenceTable && column.referenceTable !== "none" && column.referenceColumn && (
               <div className="flex items-center gap-2 rounded-md bg-violet-50 px-3 py-2">
-                <span className="font-mono text-[11px] font-semibold text-violet-600">
-                  {column.referenceTable}
+                <span className="text-[11px] font-semibold text-violet-600">
+                  {(() => {
+                    const tbl = refTableOpts.find((o) => o.value === column.referenceTable);
+                    return tbl?.label ?? column.referenceTable;
+                  })()}
                 </span>
                 <span className="text-muted-foreground text-[10px]">→</span>
-                <span className="font-mono text-[11px] font-semibold text-violet-600">
-                  {column.referenceColumn}
+                <span className="text-[11px] font-semibold text-violet-600">
+                  {(() => {
+                    const col = refColumns.find((c) => c.columnName === column.referenceColumn);
+                    return col?.displayName && col.displayName !== column.referenceColumn
+                      ? `${col.displayName} (${column.referenceColumn})`
+                      : column.referenceColumn;
+                  })()}
                 </span>
               </div>
             )}

frontend/components/admin/table-type/ColumnGrid.tsx

@@ -5,8 +5,9 @@ import { MoreHorizontal, Database, Layers, FileStack } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
-import type { ColumnTypeInfo } from "./types";
+import type { ColumnTypeInfo, TableInfo } from "./types";
 import { INPUT_TYPE_COLORS, getColumnGroup } from "./types";
+import type { ReferenceTableColumn } from "@/lib/api/entityJoin";
 
 export interface ColumnGridConstraints {
   primaryKey: { columns: string[] };
@@ -23,6 +24,9 @@ export interface ColumnGridProps {
   getColumnIndexState?: (columnName: string) => { isPk: boolean; hasIndex: boolean };
   onPkToggle?: (columnName: string, checked: boolean) => void;
   onIndexToggle?: (columnName: string, checked: boolean) => void;
+  /** 호버 시 한글 라벨 표시용 (Badge title) */
+  tables?: TableInfo[];
+  referenceTableColumns?: Record<string, ReferenceTableColumn[]>;
 }
 
 function getIndexState(
@@ -53,6 +57,8 @@ export function ColumnGrid({
   getColumnIndexState: externalGetIndexState,
   onPkToggle,
   onIndexToggle,
+  tables,
+  referenceTableColumns,
 }: ColumnGridProps) {
   const getIdxState = useMemo(
     () => externalGetIndexState ?? ((name: string) => getIndexState(name, constraints)),
@@ -136,13 +142,12 @@ export function ColumnGrid({
                       {/* 4px 색상바 (타입별 진한 색) */}
                       <div className={cn("h-full min-h-8 w-1 rounded-full", typeConf.barColor)} />
 
-                      {/* 라벨 + 컬럼명 */}
+                      {/* 라벨 + 컬럼명 (한글라벨 (영어명) 동시 표시) */}
                       <div className="min-w-0">
                         <div className="truncate text-sm font-medium">
-                          {column.displayName || column.columnName}
-                        </div>
-                        <div className="truncate font-mono text-xs text-muted-foreground">
-                          {column.columnName}
+                          {column.displayName && column.displayName !== column.columnName
+                            ? `${column.displayName} (${column.columnName})`
+                            : column.columnName}
                         </div>
                       </div>
 
@@ -150,11 +155,38 @@ export function ColumnGrid({
                       <div className="flex min-w-0 flex-wrap gap-1">
                         {column.inputType === "entity" && column.referenceTable && column.referenceTable !== "none" && (
                           <>
-                            <Badge variant="outline" className="text-xs font-normal">
+                            <Badge
+                              variant="outline"
+                              className="text-xs font-normal"
+                              title={
+                                tables
+                                  ? (() => {
+                                      const t = tables.find((tb) => tb.tableName === column.referenceTable);
+                                      return t?.displayName && t.displayName !== t.tableName
+                                        ? `${t.displayName} (${column.referenceTable})`
+                                        : column.referenceTable;
+                                    })()
+                                  : column.referenceTable
+                              }
+                            >
                               {column.referenceTable}
                             </Badge>
                             <span className="text-muted-foreground text-xs">→</span>
-                            <Badge variant="outline" className="text-xs font-normal">
+                            <Badge
+                              variant="outline"
+                              className="text-xs font-normal"
+                              title={
+                                referenceTableColumns?.[column.referenceTable]
+                                  ? (() => {
+                                      const refCols = referenceTableColumns[column.referenceTable];
+                                      const c = refCols.find((rc) => rc.columnName === (column.referenceColumn ?? ""));
+                                      return c?.displayName && c.displayName !== c.columnName
+                                        ? `${c.displayName} (${column.referenceColumn})`
+                                        : column.referenceColumn ?? "—";
+                                    })()
+                                  : column.referenceColumn ?? "—"
+                              }
+                            >
                               {column.referenceColumn || "—"}
                             </Badge>
                           </>

frontend/components/layout/AppLayout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, Suspense, useEffect } from "react";
+import { useState, Suspense, useEffect, useCallback } from "react";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import {
@@ -341,6 +341,10 @@ function AppLayoutInner({ children }: AppLayoutProps) {
 
   const currentMenus = isAdminMode ? adminMenus : userMenus;
 
+  const currentTabs = useTabStore((s) => s[s.mode].tabs);
+  const currentActiveTabId = useTabStore((s) => s[s.mode].activeTabId);
+  const activeTab = currentTabs.find((t) => t.id === currentActiveTabId);
+
   const toggleMenu = (menuId: string) => {
     const newExpanded = new Set(expandedMenus);
     if (newExpanded.has(menuId)) {
@@ -478,6 +482,26 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     }
   };
 
+  // pathname + 활성 탭 기반 활성 메뉴 판별 (탭 네비게이션에서도 사이드바 활성 표시)
+  const isMenuActive = useCallback(
+    (menu: any): boolean => {
+      if (pathname === menu.url) return true;
+      if (!activeTab) return false;
+
+      const menuObjid = parseInt((menu.objid || menu.id)?.toString() || "0");
+
+      if (activeTab.type === "admin" && activeTab.adminUrl) {
+        return menu.url === activeTab.adminUrl;
+      }
+      if (activeTab.type === "screen") {
+        if (activeTab.menuObjid != null && menuObjid === activeTab.menuObjid) return true;
+        if (activeTab.screenId != null && menu.screenId === activeTab.screenId) return true;
+      }
+      return false;
+    },
+    [pathname, activeTab],
+  );
+
   // 메뉴 트리 렌더링 (기존 MainLayout 스타일 적용)
   const renderMenu = (menu: any, level: number = 0) => {
     const isExpanded = expandedMenus.has(menu.id);
@@ -489,8 +513,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           draggable={isLeaf}
           onDragStart={(e) => handleMenuDragStart(e, menu)}
           className={`group flex min-h-[44px] cursor-pointer items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 ease-in-out sm:min-h-[40px] ${
-            pathname === menu.url
-              ? "border-primary bg-primary/8 text-primary border-l-3 font-semibold"
+            isMenuActive(menu)
+              ? "border-l-[3px] border-l-primary bg-primary/10 dark:bg-primary/15 text-primary font-semibold"
               : isExpanded
                 ? "bg-accent/60 text-foreground"
                 : "text-muted-foreground hover:bg-accent hover:text-foreground"
@@ -518,8 +542,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 draggable={!child.hasChildren}
                 onDragStart={(e) => handleMenuDragStart(e, child)}
                 className={`flex min-h-[44px] cursor-pointer items-center rounded-md px-3 py-2 text-sm transition-colors duration-150 hover:cursor-pointer sm:min-h-[40px] ${
-                  pathname === child.url
-                    ? "border-primary bg-primary/8 text-primary border-l-3 font-semibold"
+                  isMenuActive(child)
+                    ? "border-l-[3px] border-l-primary bg-primary/10 dark:bg-primary/15 text-primary font-semibold"
                     : "text-muted-foreground hover:bg-accent hover:text-foreground"
                 }`}
                 onClick={() => handleMenuClick(child)}
@@ -544,6 +568,30 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     );
   }
 
+  const uiMenus = user ? convertMenuToUI(currentMenus, user as ExtendedUserInfo) : [];
+
+  // 활성 탭에 해당하는 메뉴가 속한 부모 메뉴 자동 확장
+  useEffect(() => {
+    if (!activeTab || uiMenus.length === 0) return;
+
+    const toExpand: string[] = [];
+    for (const menu of uiMenus) {
+      if (menu.hasChildren && menu.children) {
+        const hasActiveChild = menu.children.some((child: any) => isMenuActive(child));
+        if (hasActiveChild && !expandedMenus.has(menu.id)) {
+          toExpand.push(menu.id);
+        }
+      }
+    }
+    if (toExpand.length > 0) {
+      setExpandedMenus((prev) => {
+        const next = new Set(prev);
+        toExpand.forEach((id) => next.add(id));
+        return next;
+      });
+    }
+  }, [activeTab, uiMenus, isMenuActive, expandedMenus]);
+
   if (!user) {
     return (
       <div className="flex h-screen items-center justify-center">
@@ -555,8 +603,6 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     );
   }
 
-  const uiMenus = convertMenuToUI(currentMenus, user as ExtendedUserInfo);
-
   return (
     <div className="bg-background flex h-screen flex-col">
       {/* 모바일 헤더 */}

frontend/components/layout/TabBar.tsx

@@ -493,8 +493,8 @@ export function TabBar() {
         className={cn(
           "group relative flex h-7 shrink-0 cursor-pointer items-center gap-0.5 rounded-t-md border border-b-0 px-3 select-none",
           isActive
-            ? "text-foreground z-10 -mb-px h-[30px] bg-white"
-            : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground border-transparent",
+            ? "text-primary z-10 -mb-px h-[30px] bg-primary/15 dark:bg-primary/20 border-primary/40 border-t-[3px] border-t-primary font-semibold"
+            : "bg-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground border-transparent",
         )}
         style={{
           width: TAB_WIDTH,

frontend/components/numbering-rule/AutoConfigPanel.tsx

@@ -478,7 +478,7 @@ const DateConfigPanel: React.FC<DateConfigPanelProps> = ({
               </PopoverContent>
             </Popover>
             {sourceTableName && columns.length === 0 && !loadingColumns && (
-              <p className="mt-1 text-[10px] text-amber-600 sm:text-xs">
+              <p className="mt-1 text-[10px] text-warning sm:text-xs">
                 이 테이블에 날짜 타입 컬럼이 없습니다
               </p>
             )}

frontend/components/numbering-rule/NumberingRuleCard.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -27,25 +26,24 @@ export const NumberingRuleCard: React.FC<NumberingRuleCardProps> = ({
   tableName,
 }) => {
   return (
-    <Card className="border-border bg-card flex-1">
-      <CardHeader className="pb-3">
-        <div className="flex items-center justify-between">
-          <Badge variant="outline" className="text-xs sm:text-sm">
-            규칙 {part.order}
-          </Badge>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={onDelete}
-            className="text-destructive h-7 w-7 sm:h-8 sm:w-8"
-            disabled={isPreview}
-          >
-            <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
-          </Button>
-        </div>
-      </CardHeader>
+    <div className="config-field flex-1 rounded-[8px] border border-border bg-muted/50 px-3 py-3 sm:px-4 sm:py-4">
+      <div className="mb-3 flex items-center justify-between sm:mb-4">
+        <Badge variant="outline" className="text-xs sm:text-sm">
+          규칙 {part.order}
+        </Badge>
+        <Button
+          variant="destructive"
+          size="icon"
+          onClick={onDelete}
+          className="h-7 w-7 sm:h-8 sm:w-8"
+          disabled={isPreview}
+          aria-label="규칙 삭제"
+        >
+          <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
+        </Button>
+      </div>
 
-      <CardContent className="space-y-3 sm:space-y-4">
+      <div className="space-y-3 sm:space-y-4">
         <div>
           <Label className="text-xs font-medium sm:text-sm">구분 유형</Label>
           <Select
@@ -117,7 +115,7 @@ export const NumberingRuleCard: React.FC<NumberingRuleCardProps> = ({
             isPreview={isPreview}
           />
         )}
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 };

frontend/components/numbering-rule/NumberingRuleDesigner.tsx

@@ -5,28 +5,16 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Plus, Save, Edit2, FolderTree } from "lucide-react";
+import { Plus, Save, ListOrdered } from "lucide-react";
 import { toast } from "sonner";
 import { showErrorToast } from "@/lib/utils/toastUtils";
 import { NumberingRuleConfig, NumberingRulePart, SEPARATOR_OPTIONS, SeparatorType } from "@/types/numbering-rule";
+import { CODE_PART_TYPE_OPTIONS } from "@/types/numbering-rule";
 import { NumberingRuleCard } from "./NumberingRuleCard";
-import { NumberingRulePreview } from "./NumberingRulePreview";
-import { saveNumberingRuleToTest } from "@/lib/api/numberingRule";
-import { apiClient } from "@/lib/api/client";
+import { NumberingRulePreview, computePartDisplayItems, getPartTypeColorClass } from "./NumberingRulePreview";
+import { getNumberingRules, saveNumberingRuleToTest } from "@/lib/api/numberingRule";
 import { cn } from "@/lib/utils";
 
-interface NumberingColumn {
-  tableName: string;
-  tableLabel: string;
-  columnName: string;
-  columnLabel: string;
-}
-
-interface GroupedColumns {
-  tableLabel: string;
-  columns: NumberingColumn[];
-}
-
 interface NumberingRuleDesignerProps {
   initialConfig?: NumberingRuleConfig;
   onSave?: (config: NumberingRuleConfig) => void;
@@ -34,8 +22,8 @@ interface NumberingRuleDesignerProps {
   maxRules?: number;
   isPreview?: boolean;
   className?: string;
-  currentTableName?: string; // 현재 화면의 테이블명 (자동 감지용)
-  menuObjid?: number; // 현재 메뉴 OBJID (메뉴 스코프)
+  currentTableName?: string;
+  menuObjid?: number;
 }
 
 export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
@@ -48,124 +36,84 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
   currentTableName,
   menuObjid,
 }) => {
-  const [numberingColumns, setNumberingColumns] = useState<NumberingColumn[]>([]);
-  const [selectedColumn, setSelectedColumn] = useState<{ tableName: string; columnName: string } | null>(null);
+  const [rulesList, setRulesList] = useState<NumberingRuleConfig[]>([]);
+  const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null);
   const [currentRule, setCurrentRule] = useState<NumberingRuleConfig | null>(null);
+  const [selectedPartOrder, setSelectedPartOrder] = useState<number | null>(null);
   const [loading, setLoading] = useState(false);
-  const [columnSearch, setColumnSearch] = useState("");
-  const [rightTitle, setRightTitle] = useState("규칙 편집");
-  const [editingRightTitle, setEditingRightTitle] = useState(false);
-  
-  // 구분자 관련 상태 (개별 파트 사이 구분자)
   const [separatorTypes, setSeparatorTypes] = useState<Record<number, SeparatorType>>({});
   const [customSeparators, setCustomSeparators] = useState<Record<number, string>>({});
 
-  // 좌측: 채번 타입 컬럼 목록 로드
+  const selectedRule = rulesList.find((r) => r.ruleId === selectedRuleId) ?? currentRule;
+
+  // 좌측: 규칙 목록 로드
   useEffect(() => {
-    loadNumberingColumns();
+    loadRules();
   }, []);
 
-  const loadNumberingColumns = async () => {
+  const loadRules = async () => {
     setLoading(true);
     try {
-      const response = await apiClient.get("/table-management/numbering-columns");
-      if (response.data.success && response.data.data) {
-        setNumberingColumns(response.data.data);
+      const response = await getNumberingRules();
+      if (response.success && response.data) {
+        setRulesList(response.data);
+        if (response.data.length > 0 && !selectedRuleId) {
+          const first = response.data[0];
+          setSelectedRuleId(first.ruleId);
+          setCurrentRule(JSON.parse(JSON.stringify(first)));
+        }
       }
-    } catch (error: any) {
-      console.error("채번 컬럼 목록 로드 실패:", error);
+    } catch (e) {
+      console.error("채번 규칙 목록 로드 실패:", e);
     } finally {
       setLoading(false);
     }
   };
 
-  // 컬럼 선택 시 해당 컬럼의 채번 규칙 로드
-  const handleSelectColumn = async (tableName: string, columnName: string) => {
-    setSelectedColumn({ tableName, columnName });
-    setLoading(true);
-    try {
-      const response = await apiClient.get(`/numbering-rules/by-column/${tableName}/${columnName}`);
-      if (response.data.success && response.data.data) {
-        const rule = response.data.data as NumberingRuleConfig;
-        setCurrentRule(JSON.parse(JSON.stringify(rule)));
-      } else {
-        // 규칙 없으면 신규 생성 모드
-        const newRule: NumberingRuleConfig = {
-          ruleId: `rule-${Date.now()}`,
-          ruleName: `${columnName} 채번`,
-          parts: [],
-          separator: "-",
-          resetPeriod: "none",
-          currentSequence: 1,
-          scopeType: "table",
-          tableName,
-          columnName,
-        };
-        setCurrentRule(newRule);
-      }
-    } catch {
-      const newRule: NumberingRuleConfig = {
-        ruleId: `rule-${Date.now()}`,
-        ruleName: `${columnName} 채번`,
-        parts: [],
-        separator: "-",
-        resetPeriod: "none",
-        currentSequence: 1,
-        scopeType: "table",
-        tableName,
-        columnName,
-      };
-      setCurrentRule(newRule);
-    } finally {
-      setLoading(false);
-    }
+  const handleSelectRule = (rule: NumberingRuleConfig) => {
+    setSelectedRuleId(rule.ruleId);
+    setCurrentRule(JSON.parse(JSON.stringify(rule)));
+    setSelectedPartOrder(null);
   };
 
-  // 테이블별로 그룹화
-  const groupedColumns = numberingColumns.reduce<Record<string, GroupedColumns>>((acc, col) => {
-    if (!acc[col.tableName]) {
-      acc[col.tableName] = { tableLabel: col.tableLabel, columns: [] };
-    }
-    acc[col.tableName].columns.push(col);
-    return acc;
-  }, {});
-
-  // 검색 필터 적용
-  const filteredGroups = Object.entries(groupedColumns).filter(([tableName, group]) => {
-    if (!columnSearch) return true;
-    const search = columnSearch.toLowerCase();
-    return (
-      tableName.toLowerCase().includes(search) ||
-      group.tableLabel.toLowerCase().includes(search) ||
-      group.columns.some(
-        (c) => c.columnName.toLowerCase().includes(search) || c.columnLabel.toLowerCase().includes(search)
-      )
-    );
-  });
+  const handleAddNewRule = () => {
+    const newRule: NumberingRuleConfig = {
+      ruleId: `rule-${Date.now()}`,
+      ruleName: "새 규칙",
+      parts: [],
+      separator: "-",
+      resetPeriod: "none",
+      currentSequence: 1,
+      scopeType: "global",
+      tableName: currentTableName ?? "",
+      columnName: "",
+    };
+    setRulesList((prev) => [...prev, newRule]);
+    setSelectedRuleId(newRule.ruleId);
+    setCurrentRule(JSON.parse(JSON.stringify(newRule)));
+    setSelectedPartOrder(null);
+    toast.success("새 규칙이 추가되었습니다");
+  };
 
   useEffect(() => {
-    if (currentRule) {
-      onChange?.(currentRule);
-    }
+    if (currentRule) onChange?.(currentRule);
   }, [currentRule, onChange]);
 
-  // currentRule이 변경될 때 파트별 구분자 상태 동기화
   useEffect(() => {
     if (currentRule && currentRule.parts.length > 0) {
       const newSepTypes: Record<number, SeparatorType> = {};
       const newCustomSeps: Record<number, string> = {};
-      
       currentRule.parts.forEach((part) => {
         const sep = part.separatorAfter ?? currentRule.separator ?? "-";
         if (sep === "") {
           newSepTypes[part.order] = "none";
           newCustomSeps[part.order] = "";
         } else {
-          const predefinedOption = SEPARATOR_OPTIONS.find(
-            opt => opt.value !== "custom" && opt.value !== "none" && opt.displayValue === sep
+          const opt = SEPARATOR_OPTIONS.find(
+            (o) => o.value !== "custom" && o.value !== "none" && o.displayValue === sep
           );
-          if (predefinedOption) {
-            newSepTypes[part.order] = predefinedOption.value;
+          if (opt) {
+            newSepTypes[part.order] = opt.value;
             newCustomSeps[part.order] = "";
           } else {
             newSepTypes[part.order] = "custom";
@@ -173,54 +121,45 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
           }
         }
       });
-      
       setSeparatorTypes(newSepTypes);
       setCustomSeparators(newCustomSeps);
     }
   }, [currentRule?.ruleId]);
 
-  // 개별 파트 구분자 변경 핸들러
   const handlePartSeparatorChange = useCallback((partOrder: number, type: SeparatorType) => {
-    setSeparatorTypes(prev => ({ ...prev, [partOrder]: type }));
+    setSeparatorTypes((prev) => ({ ...prev, [partOrder]: type }));
     if (type !== "custom") {
-      const option = SEPARATOR_OPTIONS.find(opt => opt.value === type);
+      const option = SEPARATOR_OPTIONS.find((opt) => opt.value === type);
       const newSeparator = option?.displayValue ?? "";
-      setCustomSeparators(prev => ({ ...prev, [partOrder]: "" }));
+      setCustomSeparators((prev) => ({ ...prev, [partOrder]: "" }));
       setCurrentRule((prev) => {
         if (!prev) return null;
         return {
           ...prev,
-          parts: prev.parts.map((part) =>
-            part.order === partOrder ? { ...part, separatorAfter: newSeparator } : part
-          ),
+          parts: prev.parts.map((p) => (p.order === partOrder ? { ...p, separatorAfter: newSeparator } : p)),
         };
       });
     }
   }, []);
 
-  // 개별 파트 직접 입력 구분자 변경 핸들러
   const handlePartCustomSeparatorChange = useCallback((partOrder: number, value: string) => {
     const trimmedValue = value.slice(0, 2);
-    setCustomSeparators(prev => ({ ...prev, [partOrder]: trimmedValue }));
+    setCustomSeparators((prev) => ({ ...prev, [partOrder]: trimmedValue }));
     setCurrentRule((prev) => {
       if (!prev) return null;
       return {
         ...prev,
-        parts: prev.parts.map((part) =>
-          part.order === partOrder ? { ...part, separatorAfter: trimmedValue } : part
-        ),
+        parts: prev.parts.map((p) => (p.order === partOrder ? { ...p, separatorAfter: trimmedValue } : p)),
       };
     });
   }, []);
 
   const handleAddPart = useCallback(() => {
     if (!currentRule) return;
-
     if (currentRule.parts.length >= maxRules) {
       toast.error(`최대 ${maxRules}개까지 추가할 수 있습니다`);
       return;
     }
-
     const newPart: NumberingRulePart = {
       id: `part-${Date.now()}`,
       order: currentRule.parts.length + 1,
@@ -229,40 +168,33 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
       autoConfig: { textValue: "CODE" },
       separatorAfter: "-",
     };
-
-    setCurrentRule((prev) => {
-      if (!prev) return null;
-      return { ...prev, parts: [...prev.parts, newPart] };
-    });
-
-    // 새 파트의 구분자 상태 초기화
-    setSeparatorTypes(prev => ({ ...prev, [newPart.order]: "-" }));
-    setCustomSeparators(prev => ({ ...prev, [newPart.order]: "" }));
-
+    setCurrentRule((prev) => (prev ? { ...prev, parts: [...prev.parts, newPart] } : null));
+    setSeparatorTypes((prev) => ({ ...prev, [newPart.order]: "-" }));
+    setCustomSeparators((prev) => ({ ...prev, [newPart.order]: "" }));
     toast.success(`규칙 ${newPart.order}가 추가되었습니다`);
   }, [currentRule, maxRules]);
 
-  // partOrder 기반으로 파트 업데이트 (id가 null일 수 있으므로 order 사용)
   const handleUpdatePart = useCallback((partOrder: number, updates: Partial<NumberingRulePart>) => {
     setCurrentRule((prev) => {
       if (!prev) return null;
       return {
         ...prev,
-        parts: prev.parts.map((part) => (part.order === partOrder ? { ...part, ...updates } : part)),
+        parts: prev.parts.map((p) => (p.order === partOrder ? { ...p, ...updates } : p)),
       };
     });
   }, []);
 
-  // partOrder 기반으로 파트 삭제 (id가 null일 수 있으므로 order 사용)
   const handleDeletePart = useCallback((partOrder: number) => {
     setCurrentRule((prev) => {
       if (!prev) return null;
       return {
         ...prev,
-        parts: prev.parts.filter((part) => part.order !== partOrder).map((part, index) => ({ ...part, order: index + 1 })),
+        parts: prev.parts
+          .filter((p) => p.order !== partOrder)
+          .map((p, i) => ({ ...p, order: i + 1 })),
       };
     });
-
+    setSelectedPartOrder(null);
     toast.success("규칙이 삭제되었습니다");
   }, []);
 
@@ -271,246 +203,283 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
       toast.error("저장할 규칙이 없습니다");
       return;
     }
-
     if (currentRule.parts.length === 0) {
       toast.error("최소 1개 이상의 규칙을 추가해주세요");
       return;
     }
-
     setLoading(true);
     try {
-      // 파트별 기본 autoConfig 정의
       const defaultAutoConfigs: Record<string, any> = {
         sequence: { sequenceLength: 3, startFrom: 1 },
         number: { numberLength: 4, numberValue: 1 },
         date: { dateFormat: "YYYYMMDD" },
         text: { textValue: "" },
       };
-
-      // 저장 전에 각 파트의 autoConfig에 기본값 채우기
       const partsWithDefaults = currentRule.parts.map((part) => {
         if (part.generationMethod === "auto") {
           const defaults = defaultAutoConfigs[part.partType] || {};
-          return {
-            ...part,
-            autoConfig: { ...defaults, ...part.autoConfig },
-          };
+          return { ...part, autoConfig: { ...defaults, ...part.autoConfig } };
         }
         return part;
       });
-
       const ruleToSave = {
         ...currentRule,
         parts: partsWithDefaults,
-        scopeType: "table" as const,
-        tableName: selectedColumn?.tableName || currentRule.tableName || "",
-        columnName: selectedColumn?.columnName || currentRule.columnName || "",
+        scopeType: "global" as const,
+        tableName: currentRule.tableName || currentTableName || "",
+        columnName: currentRule.columnName || "",
       };
-
-      // 테스트 테이블에 저장 (numbering_rules)
       const response = await saveNumberingRuleToTest(ruleToSave);
-
       if (response.success && response.data) {
-        const currentData = JSON.parse(JSON.stringify(response.data)) as NumberingRuleConfig;
-        setCurrentRule(currentData);
+        const saved: NumberingRuleConfig = JSON.parse(JSON.stringify(response.data));
+        setCurrentRule(saved);
+        setRulesList((prev) => {
+          const idx = prev.findIndex((r) => r.ruleId === currentRule.ruleId);
+          if (idx >= 0) {
+            const next = [...prev];
+            next[idx] = saved;
+            return next;
+          }
+          return [...prev, saved];
+        });
+        setSelectedRuleId(saved.ruleId);
         await onSave?.(response.data);
         toast.success("채번 규칙이 저장되었습니다");
       } else {
-        showErrorToast("채번 규칙 저장에 실패했습니다", response.error, { guidance: "설정을 확인하고 다시 시도해 주세요." });
+        showErrorToast("채번 규칙 저장에 실패했습니다", response.error, {
+          guidance: "설정을 확인하고 다시 시도해 주세요.",
+        });
       }
-    } catch (error: any) {
-      showErrorToast("채번 규칙 저장에 실패했습니다", error, { guidance: "설정을 확인하고 다시 시도해 주세요." });
+    } catch (error: unknown) {
+      showErrorToast("채번 규칙 저장에 실패했습니다", error, {
+        guidance: "설정을 확인하고 다시 시도해 주세요.",
+      });
     } finally {
       setLoading(false);
     }
-  }, [currentRule, onSave, selectedColumn]);
+  }, [currentRule, onSave, currentTableName]);
+
+  const selectedPart = currentRule?.parts.find((p) => p.order === selectedPartOrder) ?? null;
+  const globalSep = currentRule?.separator ?? "-";
+  const partItems = currentRule ? computePartDisplayItems(currentRule) : [];
 
   return (
-    <div className={`flex h-full gap-4 ${className}`}>
-      {/* 좌측: 채번 컬럼 목록 (카테고리 패턴) */}
-      <div className="flex w-72 flex-shrink-0 flex-col gap-3">
-        <h2 className="text-sm font-semibold sm:text-base">채번 컬럼</h2>
-
-        <Input
-          value={columnSearch}
-          onChange={(e) => setColumnSearch(e.target.value)}
-          placeholder="검색..."
-          className="h-8 text-xs"
-        />
-
-        <div className="flex-1 space-y-1 overflow-y-auto">
-          {loading && numberingColumns.length === 0 ? (
-            <div className="flex h-32 items-center justify-center">
-              <p className="text-muted-foreground text-xs">로딩 중...</p>
+    <div className={cn("flex h-full", className)}>
+      {/* 좌측: 규칙 리스트 (code-nav, 220px) */}
+      <div className="code-nav flex w-[220px] flex-shrink-0 flex-col border-r border-border">
+        <div className="code-nav-head flex items-center justify-between gap-2 border-b border-border px-3 py-2.5">
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            <ListOrdered className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <span className="truncate text-xs font-bold">채번 규칙 ({rulesList.length})</span>
+          </div>
+          <Button
+            size="sm"
+            variant="default"
+            className="h-8 shrink-0 gap-1 text-xs font-medium"
+            onClick={handleAddNewRule}
+            disabled={isPreview || loading}
+          >
+            <Plus className="h-3.5 w-3.5" />
+            추가
+          </Button>
+        </div>
+        <div className="code-nav-list flex-1 overflow-y-auto">
+          {loading && rulesList.length === 0 ? (
+            <div className="flex h-24 items-center justify-center text-xs text-muted-foreground">
+              로딩 중...
             </div>
-          ) : filteredGroups.length === 0 ? (
-            <div className="border-border bg-muted/50 flex h-32 items-center justify-center rounded-lg border border-dashed">
-              <p className="text-muted-foreground text-xs">
-                {numberingColumns.length === 0
-                  ? "채번 타입 컬럼이 없습니다"
-                  : "검색 결과가 없습니다"}
-              </p>
+          ) : rulesList.length === 0 ? (
+            <div className="flex h-24 items-center justify-center rounded-lg border border-dashed border-border bg-muted/50 text-xs text-muted-foreground">
+              규칙이 없습니다
             </div>
           ) : (
-            filteredGroups.map(([tableName, group]) => (
-              <div key={tableName} className="mb-2">
-                <div className="text-muted-foreground mb-1 flex items-center gap-1 px-1 text-[11px] font-medium">
-                  <FolderTree className="h-3 w-3" />
-                  <span>{group.tableLabel}</span>
-                  <span className="text-muted-foreground/60">({group.columns.length})</span>
-                </div>
-                {group.columns.map((col) => {
-                  const isSelected =
-                    selectedColumn?.tableName === col.tableName &&
-                    selectedColumn?.columnName === col.columnName;
-                  return (
-                    <div
-                      key={`${col.tableName}.${col.columnName}`}
-                      className={cn(
-                        "cursor-pointer rounded-md px-3 py-1.5 text-xs transition-colors",
-                        isSelected
-                          ? "bg-primary/10 text-primary border-primary border font-medium"
-                          : "hover:bg-accent"
-                      )}
-                      onClick={() => handleSelectColumn(col.tableName, col.columnName)}
-                    >
-                      {col.columnLabel}
-                    </div>
-                  );
-                })}
-              </div>
-            ))
+            rulesList.map((rule) => {
+              const isSelected = selectedRuleId === rule.ruleId;
+              return (
+                <button
+                  key={rule.ruleId}
+                  type="button"
+                  className={cn(
+                    "code-nav-item flex w-full items-center gap-2 border-b border-border/50 px-3 py-2 text-left transition-colors",
+                    isSelected
+                      ? "border-l-[3px] border-primary bg-primary/5 pl-2.5 font-bold"
+                      : "hover:bg-accent"
+                  )}
+                  onClick={() => handleSelectRule(rule)}
+                >
+                  <span className="rule-name min-w-0 flex-1 truncate text-xs font-semibold">
+                    {rule.ruleName}
+                  </span>
+                  <span className="rule-table max-w-[70px] shrink-0 truncate text-[9px] text-muted-foreground">
+                    {rule.tableName || "-"}
+                  </span>
+                  <span className="rule-parts shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[8px] font-bold text-muted-foreground">
+                    {rule.parts?.length ?? 0}
+                  </span>
+                </button>
+              );
+            })
           )}
         </div>
       </div>
 
-      {/* 구분선 */}
-      <div className="bg-border h-full w-px"></div>
-
-      {/* 우측: 편집 영역 */}
-      <div className="flex flex-1 flex-col gap-4">
+      {/* 우측: 미리보기 + 파이프라인 + 설정 + 저장 바 (code-main) */}
+      <div className="code-main flex min-w-0 flex-1 flex-col overflow-hidden">
         {!currentRule ? (
-          <div className="flex h-full flex-col items-center justify-center">
-            <div className="text-center">
-              <FolderTree className="text-muted-foreground mx-auto mb-3 h-10 w-10" />
-              <p className="text-muted-foreground mb-2 text-lg font-medium">컬럼을 선택해주세요</p>
-              <p className="text-muted-foreground text-sm">좌측에서 채번 컬럼을 선택하면 규칙을 편집할 수 있습니다</p>
-            </div>
+          <div className="flex flex-1 flex-col items-center justify-center text-center">
+            <ListOrdered className="mb-3 h-10 w-10 text-muted-foreground" />
+            <p className="mb-2 text-lg font-medium text-muted-foreground">규칙을 선택하세요</p>
+            <p className="text-sm text-muted-foreground">
+              좌측에서 채번 규칙을 선택하거나 &quot;추가&quot;로 새 규칙을 만드세요
+            </p>
           </div>
         ) : (
           <>
-            <div className="flex items-center justify-between">
-              {editingRightTitle ? (
-                <Input
-                  value={rightTitle}
-                  onChange={(e) => setRightTitle(e.target.value)}
-                  onBlur={() => setEditingRightTitle(false)}
-                  onKeyDown={(e) => e.key === "Enter" && setEditingRightTitle(false)}
-                  className="h-8 text-sm font-semibold"
-                  autoFocus
-                />
-              ) : (
-                <h2 className="text-sm font-semibold sm:text-base">{rightTitle}</h2>
-              )}
-              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setEditingRightTitle(true)}>
-                <Edit2 className="h-3 w-3" />
-              </Button>
+            <div className="flex flex-col gap-2 px-6 pt-4">
+              <Label className="text-xs font-medium">규칙명</Label>
+              <Input
+                value={currentRule.ruleName}
+                onChange={(e) => setCurrentRule((prev) => (prev ? { ...prev, ruleName: e.target.value } : null))}
+                placeholder="예: 프로젝트 코드"
+                className="h-9 text-sm"
+              />
             </div>
 
-            <div className="space-y-3">
-              {/* 첫 번째 줄: 규칙명 + 미리보기 */}
-              <div className="flex items-center gap-3">
-                <div className="flex-1 space-y-2">
-                  <Label className="text-sm font-medium">규칙명</Label>
-                  <Input
-                    value={currentRule.ruleName}
-                    onChange={(e) => setCurrentRule((prev) => ({ ...prev!, ruleName: e.target.value }))}
-                    className="h-9"
-                    placeholder="예: 프로젝트 코드"
-                  />
-                </div>
-                <div className="flex-1 space-y-2">
-                  <Label className="text-sm font-medium">미리보기</Label>
-                  <NumberingRulePreview config={currentRule} />
-                </div>
-              </div>
-
-
+            {/* 큰 미리보기 스트립 (code-preview-strip) */}
+            <div className="code-preview-strip flex-shrink-0 border-b border-border px-6 py-5">
+              <NumberingRulePreview config={currentRule} variant="strip" />
             </div>
 
-            <div className="flex-1 overflow-y-auto">
-              <div className="mb-3 flex items-center justify-between">
-                <h3 className="text-sm font-semibold">코드 구성</h3>
-                <span className="text-muted-foreground text-xs">
+            {/* 파이프라인 영역 (code-pipeline-area) */}
+            <div className="code-pipeline-area flex flex-col gap-3 border-b border-border px-6 py-5">
+              <div className="area-label flex items-center gap-1.5">
+                <span className="text-xs font-bold">코드 구성</span>
+                <span className="cnt text-xs font-medium text-muted-foreground">
                   {currentRule.parts.length}/{maxRules}
                 </span>
               </div>
-
-              {currentRule.parts.length === 0 ? (
-                <div className="border-border bg-muted/50 flex h-32 items-center justify-center rounded-lg border border-dashed">
-                  <p className="text-muted-foreground text-xs sm:text-sm">규칙을 추가하여 코드를 구성하세요</p>
-                </div>
-              ) : (
-                <div className="flex flex-wrap items-stretch gap-3">
-                  {currentRule.parts.map((part, index) => (
-                    <React.Fragment key={`part-${part.order}-${index}`}>
-                      <div className="flex w-[200px] flex-col">
-                        <NumberingRuleCard
-                          part={part}
-                          onUpdate={(updates) => handleUpdatePart(part.order, updates)}
-                          onDelete={() => handleDeletePart(part.order)}
-                          isPreview={isPreview}
-                          tableName={selectedColumn?.tableName}
-                        />
-                        {/* 카드 하단에 구분자 설정 (마지막 파트 제외) */}
-                        {index < currentRule.parts.length - 1 && (
-                          <div className="mt-2 flex items-center gap-1">
-                            <span className="text-muted-foreground text-[10px] whitespace-nowrap">뒤 구분자</span>
-                            <Select
-                              value={separatorTypes[part.order] || "-"}
-                              onValueChange={(value) => handlePartSeparatorChange(part.order, value as SeparatorType)}
-                            >
-                              <SelectTrigger className="h-6 flex-1 text-[10px]">
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {SEPARATOR_OPTIONS.map((option) => (
-                                  <SelectItem key={option.value} value={option.value} className="text-xs">
-                                    {option.label}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                            {separatorTypes[part.order] === "custom" && (
-                              <Input
-                                value={customSeparators[part.order] || ""}
-                                onChange={(e) => handlePartCustomSeparatorChange(part.order, e.target.value)}
-                                className="h-6 w-14 text-center text-[10px]"
-                                placeholder="2자"
-                                maxLength={2}
-                              />
+              <div className="code-pipeline flex flex-1 flex-wrap items-center gap-0 overflow-x-auto overflow-y-hidden pb-2">
+                {currentRule.parts.length === 0 ? (
+                  <div className="flex h-24 min-w-[200px] items-center justify-center rounded-xl border-2 border-dashed border-border bg-muted/30 text-xs text-muted-foreground">
+                    규칙을 추가하여 코드를 구성하세요
+                  </div>
+                ) : (
+                  <>
+                    {currentRule.parts.map((part, index) => {
+                      const item = partItems.find((i) => i.order === part.order);
+                      const sep = part.separatorAfter ?? globalSep;
+                      const isSelected = selectedPartOrder === part.order;
+                      const typeLabel = CODE_PART_TYPE_OPTIONS.find((o) => o.value === part.partType)?.label ?? part.partType;
+                      return (
+                        <React.Fragment key={`part-${part.order}-${index}`}>
+                          <button
+                            type="button"
+                            className={cn(
+                              "pipe-segment min-w-[120px] flex-shrink-0 rounded-[10px] border-2 px-4 py-3 text-center transition-all",
+                              part.partType === "date" && "border-warning",
+                              part.partType === "text" && "border-primary",
+                              part.partType === "sequence" && "border-primary",
+                              (part.partType === "number" || part.partType === "category" || part.partType === "reference") && "border-border",
+                              isSelected && "border-primary bg-primary/5 shadow-md ring-2 ring-primary/30"
                             )}
-                          </div>
-                        )}
-                      </div>
-                    </React.Fragment>
-                  ))}
-                </div>
-              )}
+                            onClick={() => setSelectedPartOrder(part.order)}
+                          >
+                            <div className="seg-type text-[8px] font-bold uppercase tracking-wide text-muted-foreground">
+                              {typeLabel}
+                            </div>
+                            <div className={cn("seg-value mt-1 truncate font-mono text-base font-extrabold leading-none", getPartTypeColorClass(part.partType))}>
+                              {item?.displayValue ?? "-"}
+                            </div>
+                          </button>
+                          {index < currentRule.parts.length - 1 && (
+                            <div className="pipe-connector flex w-8 flex-shrink-0 flex-col items-center justify-center gap-0.5">
+                              <span className="conn-line text-xs font-bold text-muted-foreground">→</span>
+                              <span className="conn-sep rounded border border-border bg-muted px-1 py-0.5 text-[8px] font-semibold text-muted-foreground">
+                                {sep || "-"}
+                              </span>
+                            </div>
+                          )}
+                        </React.Fragment>
+                      );
+                    })}
+                    <button
+                      type="button"
+                      className="pipe-add flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-dashed border-border text-muted-foreground transition-colors hover:border-primary hover:bg-primary/5 hover:text-primary"
+                      onClick={handleAddPart}
+                      disabled={currentRule.parts.length >= maxRules || isPreview || loading}
+                      aria-label="규칙 추가"
+                    >
+                      <Plus className="h-5 w-5" />
+                    </button>
+                  </>
+                )}
+              </div>
             </div>
 
-            <div className="flex gap-2">
+            {/* 설정 패널 (선택된 세그먼트 상세, code-config-panel) */}
+            {selectedPart && (
+              <div className="code-config-panel min-h-0 flex-1 overflow-y-auto px-6 py-5">
+                <div className="code-config-grid grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3">
+                  <NumberingRuleCard
+                    part={selectedPart}
+                    onUpdate={(updates) => handleUpdatePart(selectedPart.order, updates)}
+                    onDelete={() => handleDeletePart(selectedPart.order)}
+                    isPreview={isPreview}
+                    tableName={currentRule.tableName ?? currentTableName}
+                  />
+                </div>
+                {currentRule.parts.some((p) => p.order === selectedPart.order) && (
+                  <div className="mt-3 flex items-center gap-2">
+                    <span className="text-[10px] text-muted-foreground">뒤 구분자</span>
+                    <Select
+                      value={separatorTypes[selectedPart.order] ?? "-"}
+                      onValueChange={(v) => handlePartSeparatorChange(selectedPart.order, v as SeparatorType)}
+                    >
+                      <SelectTrigger className="h-7 w-24 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {SEPARATOR_OPTIONS.map((opt) => (
+                          <SelectItem key={opt.value} value={opt.value} className="text-xs">
+                            {opt.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    {separatorTypes[selectedPart.order] === "custom" && (
+                      <Input
+                        value={customSeparators[selectedPart.order] ?? ""}
+                        onChange={(e) => handlePartCustomSeparatorChange(selectedPart.order, e.target.value)}
+                        className="h-7 w-14 text-center text-[10px]"
+                        placeholder="2자"
+                        maxLength={2}
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 저장 바 (code-save-bar) */}
+            <div className="code-save-bar flex flex-shrink-0 items-center justify-between gap-4 border-t border-border bg-muted/30 px-6 py-4">
+              <div className="min-w-0 flex-1 text-xs text-muted-foreground">
+                {currentRule.tableName && (
+                  <span>테이블: {currentRule.tableName}</span>
+                )}
+                {currentRule.columnName && (
+                  <span className="ml-2">컬럼: {currentRule.columnName}</span>
+                )}
+                <span className="ml-2">구분자: {globalSep || "-"}</span>
+                {currentRule.resetPeriod && currentRule.resetPeriod !== "none" && (
+                  <span className="ml-2">리셋: {currentRule.resetPeriod}</span>
+                )}
+              </div>
               <Button
-                onClick={handleAddPart}
-                disabled={currentRule.parts.length >= maxRules || isPreview || loading}
-                variant="outline"
-                className="h-9 flex-1 text-sm"
+                onClick={handleSave}
+                disabled={isPreview || loading}
+                className="h-9 gap-2 text-sm font-medium"
               >
-                <Plus className="mr-2 h-4 w-4" />
-                규칙 추가
-              </Button>
-              <Button onClick={handleSave} disabled={isPreview || loading} className="h-9 flex-1 text-sm">
-                <Save className="mr-2 h-4 w-4" />
+                <Save className="h-4 w-4" />
                 {loading ? "저장 중..." : "저장"}
               </Button>
             </div>

frontend/components/numbering-rule/NumberingRulePreview.tsx

@@ -1,88 +1,163 @@
 "use client";
 
 import React, { useMemo } from "react";
-import { NumberingRuleConfig } from "@/types/numbering-rule";
+import { cn } from "@/lib/utils";
+import { NumberingRuleConfig, NumberingRulePart, CodePartType } from "@/types/numbering-rule";
+import { CODE_PART_TYPE_OPTIONS } from "@/types/numbering-rule";
+
+/** 파트별 표시값 + 타입 (미리보기 스트립/세그먼트용) */
+export interface PartDisplayItem {
+  partType: CodePartType;
+  displayValue: string;
+  order: number;
+}
+
+/** config에서 파트별 표시값 배열 계산 (정렬된 parts 기준) */
+export function computePartDisplayItems(config: NumberingRuleConfig): PartDisplayItem[] {
+  if (!config.parts || config.parts.length === 0) return [];
+  const sorted = [...config.parts].sort((a, b) => a.order - b.order);
+  const globalSep = config.separator ?? "-";
+  return sorted.map((part) => ({
+    order: part.order,
+    partType: part.partType,
+    displayValue: getPartDisplayValue(part),
+  }));
+}
+
+function getPartDisplayValue(part: NumberingRulePart): string {
+  if (part.generationMethod === "manual") {
+    return part.manualConfig?.value || "XXX";
+  }
+  const c = part.autoConfig || {};
+  switch (part.partType) {
+    case "sequence":
+      return String(c.startFrom ?? 1).padStart(c.sequenceLength ?? 3, "0");
+    case "number":
+      return String(c.numberValue ?? 0).padStart(c.numberLength ?? 4, "0");
+    case "date": {
+      const format = c.dateFormat || "YYYYMMDD";
+      if (c.useColumnValue && c.sourceColumnName) {
+        return format === "YYYY" ? "[YYYY]" : format === "YY" ? "[YY]" : format === "YYYYMM" ? "[YYYYMM]" : format === "YYMM" ? "[YYMM]" : format === "YYMMDD" ? "[YYMMDD]" : "[DATE]";
+      }
+      const now = new Date();
+      const y = now.getFullYear();
+      const m = String(now.getMonth() + 1).padStart(2, "0");
+      const d = String(now.getDate()).padStart(2, "0");
+      if (format === "YYYY") return String(y);
+      if (format === "YY") return String(y).slice(-2);
+      if (format === "YYYYMM") return `${y}${m}`;
+      if (format === "YYMM") return `${String(y).slice(-2)}${m}`;
+      if (format === "YYYYMMDD") return `${y}${m}${d}`;
+      if (format === "YYMMDD") return `${String(y).slice(-2)}${m}${d}`;
+      return `${y}${m}${d}`;
+    }
+    case "text":
+      return c.textValue || "TEXT";
+    default:
+      return "XXX";
+  }
+}
+
+/** 파트 타입별 미리보기용 텍스트 색상 클래스 (CSS 변수 기반) */
+export function getPartTypeColorClass(partType: CodePartType): string {
+  switch (partType) {
+    case "date":
+      return "text-warning";
+    case "text":
+      return "text-primary";
+    case "sequence":
+      return "text-primary";
+    case "number":
+      return "text-muted-foreground";
+    case "category":
+    case "reference":
+      return "text-muted-foreground";
+    default:
+      return "text-foreground";
+  }
+}
+
+/** 파트 타입별 점(dot) 배경 색상 (범례용) */
+export function getPartTypeDotClass(partType: CodePartType): string {
+  switch (partType) {
+    case "date":
+      return "bg-warning";
+    case "text":
+    case "sequence":
+      return "bg-primary";
+    case "number":
+    case "category":
+    case "reference":
+      return "bg-muted-foreground";
+    default:
+      return "bg-foreground";
+  }
+}
 
 interface NumberingRulePreviewProps {
   config: NumberingRuleConfig;
   compact?: boolean;
+  /** 큰 미리보기 스트립: 28px, 파트별 색상, 하단 범례 */
+  variant?: "default" | "strip";
 }
 
 export const NumberingRulePreview: React.FC<NumberingRulePreviewProps> = ({ 
   config, 
-  compact = false 
+  compact = false,
+  variant = "default",
 }) => {
+  const partItems = useMemo(() => computePartDisplayItems(config), [config]);
+  const sortedParts = useMemo(
+    () => (config.parts ? [...config.parts].sort((a, b) => a.order - b.order) : []),
+    [config.parts]
+  );
   const generatedCode = useMemo(() => {
-    if (!config.parts || config.parts.length === 0) {
-      return "규칙을 추가해주세요";
-    }
-
-    const sortedParts = config.parts.sort((a, b) => a.order - b.order);
-    
-    const partValues = sortedParts.map((part) => {
-      if (part.generationMethod === "manual") {
-        return part.manualConfig?.value || "XXX";
-      }
-
-      const autoConfig = part.autoConfig || {};
-
-      switch (part.partType) {
-        case "sequence": {
-          const length = autoConfig.sequenceLength || 3;
-          const startFrom = autoConfig.startFrom || 1;
-          return String(startFrom).padStart(length, "0");
-        }
-        case "number": {
-          const length = autoConfig.numberLength || 4;
-          const value = autoConfig.numberValue || 0;
-          return String(value).padStart(length, "0");
-        }
-        case "date": {
-          const format = autoConfig.dateFormat || "YYYYMMDD";
-          if (autoConfig.useColumnValue && autoConfig.sourceColumnName) {
-            switch (format) {
-              case "YYYY": return "[YYYY]";
-              case "YY": return "[YY]";
-              case "YYYYMM": return "[YYYYMM]";
-              case "YYMM": return "[YYMM]";
-              case "YYYYMMDD": return "[YYYYMMDD]";
-              case "YYMMDD": return "[YYMMDD]";
-              default: return "[DATE]";
-            }
-          }
-          const now = new Date();
-          const year = now.getFullYear();
-          const month = String(now.getMonth() + 1).padStart(2, "0");
-          const day = String(now.getDate()).padStart(2, "0");
-          switch (format) {
-            case "YYYY": return String(year);
-            case "YY": return String(year).slice(-2);
-            case "YYYYMM": return `${year}${month}`;
-            case "YYMM": return `${String(year).slice(-2)}${month}`;
-            case "YYYYMMDD": return `${year}${month}${day}`;
-            case "YYMMDD": return `${String(year).slice(-2)}${month}${day}`;
-            default: return `${year}${month}${day}`;
-          }
-        }
-        case "text":
-          return autoConfig.textValue || "TEXT";
-        default:
-          return "XXX";
-      }
-    });
-
-    // 파트별 개별 구분자로 결합
+    if (partItems.length === 0) return "규칙을 추가해주세요";
     const globalSep = config.separator ?? "-";
     let result = "";
-    partValues.forEach((val, idx) => {
-      result += val;
-      if (idx < partValues.length - 1) {
-        const sep = sortedParts[idx].separatorAfter ?? globalSep;
-        result += sep;
+    partItems.forEach((item, idx) => {
+      result += item.displayValue;
+      if (idx < partItems.length - 1) {
+        const part = sortedParts.find((p) => p.order === item.order);
+        result += part?.separatorAfter ?? globalSep;
       }
     });
     return result;
-  }, [config]);
+  }, [config.separator, partItems, sortedParts]);
+
+  if (variant === "strip") {
+    const globalSep = config.separator ?? "-";
+    return (
+      <div className="rounded-lg border border-border bg-gradient-to-b from-muted to-card px-4 py-4 sm:px-6 sm:py-5">
+        <div className="font-mono text-[22px] font-extrabold tracking-tight sm:text-[28px]">
+          {partItems.length === 0 ? (
+            <span className="text-muted-foreground">규칙을 추가해주세요</span>
+          ) : (
+            partItems.map((item, idx) => (
+              <React.Fragment key={item.order}>
+                <span className={getPartTypeColorClass(item.partType)}>{item.displayValue}</span>
+                {idx < partItems.length - 1 && (
+                  <span className="text-muted-foreground">
+                    {sortedParts.find((p) => p.order === item.order)?.separatorAfter ?? globalSep}
+                  </span>
+                )}
+              </React.Fragment>
+            ))
+          )}
+        </div>
+        {partItems.length > 0 && (
+          <div className="preview-desc mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+            {CODE_PART_TYPE_OPTIONS.filter((opt) => partItems.some((p) => p.partType === opt.value)).map((opt) => (
+              <span key={opt.value} className="flex items-center gap-1.5">
+                <span className={cn("h-[6px] w-[6px] shrink-0 rounded-full", getPartTypeDotClass(opt.value))} />
+                {opt.label}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
 
   if (compact) {
     return (

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -362,15 +362,15 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
     // 런타임 모드에서 컴포넌트 타입별 높이 처리
     if (!isDesignMode) {
       const compType = (component as any).componentType || component.componentConfig?.type || "";
-      // 테이블: 부모 flex 컨테이너가 높이 관리 (flex: 1)
-      const flexGrowTypes = [
+      // 레이아웃 계열: 부모 래퍼를 꽉 채움 (ResponsiveGridRenderer가 % 높이 관리)
+      const fillParentTypes = [
         "table-list", "v2-table-list",
         "split-panel-layout", "split-panel-layout2",
         "v2-split-panel-layout", "screen-split-panel",
         "v2-tab-container", "tab-container",
         "tabs-widget", "v2-tabs-widget",
       ];
-      if (flexGrowTypes.some(t => compType === t)) {
+      if (fillParentTypes.some(t => compType === t)) {
         return "100%";
       }
       const autoHeightTypes = [

frontend/components/screen/ResponsiveGridRenderer.tsx

@@ -23,8 +23,9 @@ function getComponentTypeId(component: ComponentData): string {
 }
 
 /**
- * 디자이너 절대좌표를 캔버스 대비 비율로 변환하여 렌더링.
- * 화면이 줄어들면 비율에 맞게 축소, 늘어나면 확대.
+ * 디자이너 절대좌표를 캔버스 대비 비율(%)로 변환하여 렌더링.
+ * 가로: 컨테이너 너비 대비 % → 반응형 스케일
+ * 세로: 컨테이너 높이 대비 % → 뷰포트에 맞게 자동 조절
  */
 function ProportionalRenderer({
   components,
@@ -47,19 +48,12 @@ function ProportionalRenderer({
   }, []);
 
   const topLevel = components.filter((c) => !c.parentId);
-  const ratio = containerW > 0 ? containerW / canvasWidth : 1;
-
-  const maxBottom = topLevel.reduce((max, c) => {
-    const bottom = c.position.y + (c.size?.height || 40);
-    return Math.max(max, bottom);
-  }, 0);
 
   return (
     <div
       ref={containerRef}
       data-screen-runtime="true"
-      className="bg-background relative w-full overflow-x-hidden"
-      style={{ minHeight: containerW > 0 ? `${maxBottom * ratio}px` : "200px" }}
+      className="bg-background relative h-full w-full overflow-hidden"
     >
       {containerW > 0 &&
         topLevel.map((component) => {
@@ -72,9 +66,9 @@ function ProportionalRenderer({
               style={{
                 position: "absolute",
                 left: `${(component.position.x / canvasWidth) * 100}%`,
-                top: `${component.position.y * ratio}px`,
+                top: `${(component.position.y / canvasHeight) * 100}%`,
                 width: `${((component.size?.width || 100) / canvasWidth) * 100}%`,
-                height: `${(component.size?.height || 40) * ratio}px`,
+                height: `${((component.size?.height || 40) / canvasHeight) * 100}%`,
                 zIndex: component.position.z || 1,
               }}
             >

frontend/components/screen/panels/V2PropertiesPanel.tsx

@@ -17,7 +17,6 @@ import {
   GroupComponent,
   DataTableComponent,
   TableInfo,
-  LayoutComponent,
   FileComponent,
   AreaComponent,
 } from "@/types/screen";
@@ -47,7 +46,7 @@ import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent
 
 // ComponentRegistry import (동적 ConfigPanel 가져오기용)
 import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
-import { columnMetaCache } from "@/lib/registry/DynamicComponentRenderer";
+import { columnMetaCache, loadColumnMeta } from "@/lib/registry/DynamicComponentRenderer";
 import { DynamicComponentConfigPanel, hasComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";
 import StyleEditor from "../StyleEditor";
 import { Slider } from "@/components/ui/slider";
@@ -98,6 +97,24 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
   // 🆕 전체 테이블 목록 (selected-items-detail-input 등에서 사용)
   const [allTables, setAllTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
 
+  // 🆕 선택된 컴포넌트의 테이블에 대한 columnMeta 캐시가 비어 있으면 로드 후 재렌더
+  const [columnMetaVersion, setColumnMetaVersion] = useState(0);
+  useEffect(() => {
+    if (!selectedComponent) return;
+    const tblName =
+      (selectedComponent as any).tableName ||
+      currentTable?.tableName ||
+      tables?.[0]?.tableName;
+    if (!tblName) return;
+    if (columnMetaCache[tblName]) return;
+    loadColumnMeta(tblName).then(() => setColumnMetaVersion((v) => v + 1));
+  }, [
+    selectedComponent?.id,
+    (selectedComponent as any)?.tableName,
+    currentTable?.tableName,
+    tables?.[0]?.tableName,
+  ]);
+
   // 🆕 전체 테이블 목록 로드
   useEffect(() => {
     const loadAllTables = async () => {
@@ -211,20 +228,20 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
         // 현재 화면의 테이블명 가져오기
         const currentTableName = tables?.[0]?.tableName;
 
-        // DB input_type 가져오기 (columnMetaCache에서 최신값 조회)
-        const colName = selectedComponent.columnName || currentConfig.fieldKey || currentConfig.columnName;
-        const tblName = selectedComponent.tableName || currentTable?.tableName || currentTableName;
+        // DB input_type만 조회 (saved config와 분리하여 전달)
+        const colName = (selectedComponent as any).columnName || currentConfig.fieldKey || currentConfig.columnName;
+        const tblName = (selectedComponent as any).tableName || currentTable?.tableName || currentTableName;
         const dbMeta = colName && tblName && !colName.includes(".") ? columnMetaCache[tblName]?.[colName] : undefined;
         const dbInputType = dbMeta ? (() => { const raw = dbMeta.input_type || dbMeta.inputType; return raw === "direct" || raw === "auto" ? undefined : raw; })() : undefined;
-        const inputType = dbInputType || currentConfig.inputType || currentConfig.webType || (selectedComponent as any).inputType;
 
         // 컴포넌트별 추가 props
         const extraProps: Record<string, any> = {};
-        const resolvedTableName = selectedComponent.tableName || currentTable?.tableName || currentTableName;
-        const resolvedColumnName = selectedComponent.columnName || currentConfig.fieldKey || currentConfig.columnName;
+        const resolvedTableName = (selectedComponent as any).tableName || currentTable?.tableName || currentTableName;
+        const resolvedColumnName = (selectedComponent as any).columnName || currentConfig.fieldKey || currentConfig.columnName;
 
         if (componentId === "v2-input" || componentId === "v2-select") {
-          extraProps.inputType = inputType;
+          extraProps.componentType = componentId;
+          extraProps.inputType = dbInputType;
           extraProps.tableName = resolvedTableName;
           extraProps.columnName = resolvedColumnName;
           extraProps.screenTableName = resolvedTableName;
@@ -256,7 +273,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
         const currentConfig = selectedComponent.componentConfig || {};
 
         // 🔧 ConfigPanelWrapper를 인라인 함수 대신 직접 JSX 반환 (리마운트 방지)
-        const config = currentConfig || definition.defaultProps?.componentConfig || {};
+        const config = currentConfig || (definition as any).defaultProps?.componentConfig || {};
 
         const handlePanelConfigChange = (newConfig: any) => {
           // 🔧 Partial 업데이트: 기존 componentConfig를 유지하면서 새 설정만 병합
@@ -282,14 +299,14 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                 onConfigChange={handlePanelConfigChange}
                 tables={tables}
                 allTables={allTables}
-                screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
-                tableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
+                screenTableName={(selectedComponent as any).tableName || currentTable?.tableName || currentTableName}
+                tableName={(selectedComponent as any).tableName || currentTable?.tableName || currentTableName}
                 columnName={
                   (selectedComponent as any).columnName || currentConfig?.columnName || currentConfig?.fieldName
                 }
                 inputType={(selectedComponent as any).inputType || currentConfig?.inputType}
                 componentType={componentType}
-                tableColumns={currentTable?.columns || []}
+                tableColumns={(currentTable as any)?.columns || []}
                 allComponents={allComponents}
                 currentComponent={selectedComponent}
                 menuObjid={menuObjid}
@@ -323,8 +340,8 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
           componentType={componentType}
           config={selectedComponent.componentConfig || {}}
           onChange={handleDynamicConfigChange}
-          screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
-          tableColumns={currentTable?.columns || []}
+          screenTableName={(selectedComponent as any).tableName || currentTable?.tableName || currentTableName}
+          tableColumns={(currentTable as any)?.columns || []}
           tables={tables}
           menuObjid={menuObjid}
           allComponents={allComponents}
@@ -491,7 +508,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
               <span className="text-muted-foreground text-xs">제목</span>
               <div className="w-[160px]">
                 <Input
-                  value={group.title || area.title || ""}
+                  value={(group as any).title || (area as any).title || ""}
                   onChange={(e) => handleUpdate("title", e.target.value)}
                   placeholder="제목"
                   className="h-7 text-xs"
@@ -503,7 +520,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                 <span className="text-muted-foreground text-xs">설명</span>
                 <div className="w-[160px]">
                   <Input
-                    value={area.description || ""}
+                    value={(area as any).description || ""}
                     onChange={(e) => handleUpdate("description", e.target.value)}
                     placeholder="설명"
                     className="h-7 text-xs"
@@ -519,9 +536,9 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
           <h4 className="text-muted-foreground py-2 text-[10px] font-semibold tracking-wider uppercase">OPTIONS</h4>
           {(isInputField || widget.required !== undefined) &&
             (() => {
-              const colName = widget.columnName || selectedComponent?.columnName;
+              const colName = widget.columnName || (selectedComponent as any)?.columnName;
               const colMeta = colName
-                ? currentTable?.columns?.find(
+                ? (currentTable as any)?.columns?.find(
                     (c: any) => (c.columnName || c.column_name || "").toLowerCase() === colName.toLowerCase(),
                   )
                 : null;
@@ -568,7 +585,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
           <div className="flex items-center justify-between py-1.5">
             <span className="text-muted-foreground text-xs">숨김</span>
             <Checkbox
-              checked={selectedComponent.hidden === true || selectedComponent.componentConfig?.hidden === true}
+              checked={(selectedComponent as any).hidden === true || selectedComponent.componentConfig?.hidden === true}
               onCheckedChange={(checked) => {
                 handleUpdate("hidden", checked);
                 handleUpdate("componentConfig.hidden", checked);
@@ -689,7 +706,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
               <div className="flex items-center justify-between py-1.5">
                 <span className="text-muted-foreground text-xs">표시</span>
                 <Checkbox
-                  checked={selectedComponent.style?.labelDisplay === true || selectedComponent.labelDisplay === true}
+                  checked={selectedComponent.style?.labelDisplay === true || (selectedComponent as any).labelDisplay === true}
                   onCheckedChange={(checked) => {
                     const boolValue = checked === true;
                     handleUpdate("style.labelDisplay", boolValue);
@@ -785,7 +802,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
       const webType = selectedComponent.componentConfig?.webType;
 
       // 테이블 패널에서 드래그한 컴포넌트인지 확인
-      const isFromTablePanel = !!(selectedComponent.tableName && selectedComponent.columnName);
+      const isFromTablePanel = !!((selectedComponent as any).tableName && (selectedComponent as any).columnName);
 
       if (!componentId) {
         return (
@@ -845,8 +862,8 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
           <DynamicComponentConfigPanel
             componentId={componentId}
             config={selectedComponent.componentConfig || {}}
-            screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
-            tableColumns={currentTable?.columns || []}
+            screenTableName={(selectedComponent as any).tableName || currentTable?.tableName || currentTableName}
+            tableColumns={(currentTable as any)?.columns || []}
             tables={tables}
             menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
             allComponents={allComponents} // 🆕 연쇄 드롭다운 부모 감지용
@@ -1006,8 +1023,8 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
           <DynamicComponentConfigPanel
             componentId={widget.widgetType}
             config={widget.componentConfig || {}}
-            screenTableName={widget.tableName || currentTable?.tableName || currentTableName}
-            tableColumns={currentTable?.columns || []}
+            screenTableName={(widget as any).tableName || currentTable?.tableName || currentTableName}
+            tableColumns={(currentTable as any)?.columns || []}
             tables={tables}
             menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
             allComponents={allComponents} // 🆕 연쇄 드롭다운 부모 감지용
@@ -1023,17 +1040,17 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
       return (
         <div className="space-y-4">
           {/* WebType 선택 (있는 경우만) */}
-          {widget.webType && (
+          {(widget as any).webType && (
             <div>
               <Label>입력 타입</Label>
-              <Select value={widget.webType} onValueChange={(value) => handleUpdate("webType", value)}>
+              <Select value={(widget as any).webType} onValueChange={(value) => handleUpdate("webType", value)}>
                 <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
                   {webTypes.map((wt) => (
                     <SelectItem key={wt.web_type} value={wt.web_type}>
-                      {wt.web_type_name_kor || wt.web_type}
+                      {(wt as any).web_type_name_kor || wt.web_type}
                     </SelectItem>
                   ))}
                 </SelectContent>

frontend/components/table-category/CategoryColumnList.tsx

@@ -5,10 +5,11 @@ import { apiClient } from "@/lib/api/client";
 import { getCategoryValues } from "@/lib/api/tableCategoryValue";
 import { ChevronRight, FolderTree, Loader2, Search, X } from "lucide-react";
 import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
 
-interface CategoryColumn {
+export interface CategoryColumn {
   tableName: string;
-  tableLabel?: string; // 테이블 라벨 추가
+  tableLabel?: string;
   columnName: string;
   columnLabel: string;
   inputType: string;
@@ -16,17 +17,30 @@ interface CategoryColumn {
 }
 
 interface CategoryColumnListProps {
-  tableName: string; // 현재 화면의 테이블 (사용하지 않음 - 형제 메뉴 전체 표시)
+  tableName: string;
   selectedColumn: string | null;
-  onColumnSelect: (columnName: string, columnLabel: string, tableName: string) => void;
-  menuObjid?: number; // 현재 메뉴 OBJID (필수)
+  onColumnSelect: (uniqueKeyOrColumnName: string, columnLabel: string, tableName: string) => void;
+  menuObjid?: number;
+  /** 대시보드 모드: 테이블 단위 네비만 표시, 선택 시 onTableSelect 호출 */
+  selectedTable?: string | null;
+  onTableSelect?: (tableName: string) => void;
+  /** 컬럼 로드 완료 시 부모에 전달 (Stat Strip 등 계산용) */
+  onColumnsLoaded?: (columns: CategoryColumn[]) => void;
 }
 
 /**
  * 카테고리 컬럼 목록 (좌측 패널)
  * - 형제 메뉴들의 모든 카테고리 타입 컬럼을 표시 (메뉴 스코프)
  */
-export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect, menuObjid }: CategoryColumnListProps) {
+export function CategoryColumnList({
+  tableName,
+  selectedColumn,
+  onColumnSelect,
+  menuObjid,
+  selectedTable = null,
+  onTableSelect,
+  onColumnsLoaded,
+}: CategoryColumnListProps) {
   const [columns, setColumns] = useState<CategoryColumn[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
@@ -151,8 +165,8 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect,
       );
 
       setColumns(columnsWithCount);
+      onColumnsLoaded?.(columnsWithCount);
 
-      // 첫 번째 컬럼 자동 선택
       if (columnsWithCount.length > 0 && !selectedColumn) {
         const firstCol = columnsWithCount[0];
         onColumnSelect(`${firstCol.tableName}.${firstCol.columnName}`, firstCol.columnLabel, firstCol.tableName);
@@ -160,6 +174,7 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect,
     } catch (error) {
       console.error("❌ 테이블 기반 카테고리 컬럼 조회 실패:", error);
       setColumns([]);
+      onColumnsLoaded?.([]);
     } finally {
       setIsLoading(false);
     }
@@ -248,21 +263,20 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect,
       }
 
       setColumns(columnsWithCount);
+      onColumnsLoaded?.(columnsWithCount);
 
-      // 첫 번째 컬럼 자동 선택
       if (columnsWithCount.length > 0 && !selectedColumn) {
         const firstCol = columnsWithCount[0];
         onColumnSelect(`${firstCol.tableName}.${firstCol.columnName}`, firstCol.columnLabel, firstCol.tableName);
       }
     } catch (error) {
       console.error("❌ 카테고리 컬럼 조회 실패:", error);
-      // 에러 시에도 tableName 기반으로 fallback
       if (tableName) {
-        console.log("⚠️ menuObjid API 에러, tableName 기반으로 fallback:", tableName);
         await loadCategoryColumnsByTable();
         return;
       } else {
         setColumns([]);
+        onColumnsLoaded?.([]);
       }
     }
     setIsLoading(false);
@@ -291,6 +305,72 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect,
     );
   }
 
+  // 대시보드 모드: 테이블 단위 네비만 표시
+  if (onTableSelect != null) {
+    return (
+      <div className="flex h-full flex-col">
+        <div className="border-b p-2.5">
+          <div className="relative">
+            <Search className="text-muted-foreground absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
+            <Input
+              type="text"
+              placeholder="테이블 검색..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="h-8 border-0 bg-transparent pl-8 pr-8 text-xs shadow-none focus-visible:ring-0"
+            />
+            {searchQuery && (
+              <button
+                type="button"
+                onClick={() => setSearchQuery("")}
+                className="text-muted-foreground hover:text-foreground absolute right-2 top-1/2 -translate-y-1/2"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="flex-1 space-y-0 overflow-y-auto">
+          {filteredColumns.length === 0 && searchQuery ? (
+            <div className="text-muted-foreground py-4 text-center text-xs">
+              &apos;{searchQuery}&apos;에 대한 검색 결과가 없습니다
+            </div>
+          ) : null}
+          {groupedColumns.map((group) => {
+            const totalValues = group.columns.reduce((sum, c) => sum + (c.valueCount ?? 0), 0);
+            const isActive = selectedTable === group.tableName;
+            return (
+              <button
+                key={group.tableName}
+                type="button"
+                onClick={() => onTableSelect(group.tableName)}
+                className={cn(
+                  "flex w-full items-center gap-2 px-3 py-2.5 text-left transition-colors",
+                  isActive
+                    ? "border-l-[3px] border-primary bg-primary/5 font-bold text-primary"
+                    : "hover:bg-muted/50",
+                )}
+              >
+                <div
+                  className="flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-[5px] bg-primary/20 text-primary"
+                  aria-hidden
+                >
+                  <FolderTree className="h-3.5 w-3.5" />
+                </div>
+                <span className="min-w-0 flex-1 truncate text-xs font-medium">
+                  {group.tableLabel || group.tableName}
+                </span>
+                <span className="bg-muted text-muted-foreground shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-bold">
+                  {group.columns.length}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-3">
       <div className="space-y-1">
@@ -298,7 +378,6 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect,
         <p className="text-muted-foreground text-xs">관리할 카테고리 컬럼을 선택하세요</p>
       </div>
 
-      {/* 검색 입력 필드 */}
       <div className="relative">
         <Search className="text-muted-foreground absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
         <Input
@@ -310,6 +389,7 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect,
         />
         {searchQuery && (
           <button
+            type="button"
             onClick={() => setSearchQuery("")}
             className="text-muted-foreground hover:text-foreground absolute right-2 top-1/2 -translate-y-1/2"
           >

frontend/components/table-category/CategoryValueAddDialog.tsx

@@ -120,7 +120,7 @@ export const CategoryValueAddDialog: React.FC<
         <div className="space-y-3 sm:space-y-4">
           <div>
             <Label htmlFor="valueLabel" className="text-xs sm:text-sm">
-              이름
+              이름 <span className="text-destructive">*</span>
             </Label>
             <Input
               id="valueLabel"

frontend/components/table-category/CategoryValueEditDialog.tsx

@@ -86,7 +86,7 @@ export const CategoryValueEditDialog: React.FC<
         <div className="space-y-3 sm:space-y-4">
           <div>
             <Label htmlFor="valueLabel" className="text-xs sm:text-sm">
-              이름
+              이름 <span className="text-destructive">*</span>
             </Label>
             <Input
               id="valueLabel"

frontend/components/table-category/CategoryValueManager.tsx

@@ -30,6 +30,8 @@ interface CategoryValueManagerProps {
   columnLabel: string;
   onValueCountChange?: (count: number) => void;
   menuObjid?: number; // 현재 메뉴 OBJID (메뉴 스코프)
+  /** 편집기 헤더 오른쪽에 표시할 내용 (예: 트리/목록 세그먼트) */
+  headerRight?: React.ReactNode;
 }
 
 export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
@@ -38,6 +40,7 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
   columnLabel,
   onValueCountChange,
   menuObjid,
+  headerRight,
 }) => {
   const { toast } = useToast();
   const [values, setValues] = useState<TableCategoryValue[]>([]);
@@ -284,7 +287,7 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
 
   return (
     <div className="flex h-full flex-col">
-      {/* 헤더 */}
+      {/* 편집기 헤더: 컬럼명 + 값 수 + 비활성 토글 + 새 값 추가 + headerRight(트리·목록 세그먼트 등) */}
       <div className="border-b p-4">
         <div className="mb-4 flex items-center justify-between">
           <div>
@@ -308,11 +311,11 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
                 비활성 항목 표시
               </label>
             </div>
-            
             <Button onClick={() => setIsAddDialogOpen(true)} size="sm">
               <Plus className="mr-2 h-4 w-4" />
               새 값 추가
             </Button>
+            {headerRight != null ? <div className="flex items-center">{headerRight}</div> : null}
           </div>
         </div>
 
@@ -405,7 +408,6 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
                           value.isActive !== false
                         )
                       }
-                      className="data-[state=checked]:bg-emerald-500"
                     />
 
                     <Button

frontend/components/table-category/CategoryValueManagerTree.tsx

@@ -19,6 +19,7 @@ import {
   Search,
   RefreshCw,
 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -59,6 +60,8 @@ interface CategoryValueManagerTreeProps {
   columnName: string;
   columnLabel: string;
   onValueCountChange?: (count: number) => void;
+  /** 편집기 헤더 오른쪽에 표시할 내용 (예: 트리/목록 세그먼트) */
+  headerRight?: React.ReactNode;
 }
 
 // 트리 노드 컴포넌트
@@ -114,13 +117,13 @@ const TreeNode: React.FC<TreeNodeProps> = ({
     return null;
   }
 
-  // 깊이별 아이콘
+  // 깊이별 아이콘 (대/중분류 = Folder, 소분류 = Tag)
   const getIcon = () => {
     if (hasChildren) {
       return isExpanded ? (
-        <FolderOpen className="h-4 w-4 text-amber-500" />
+        <FolderOpen className="text-muted-foreground h-4 w-4" />
       ) : (
-        <Folder className="h-4 w-4 text-amber-500" />
+        <Folder className="text-muted-foreground h-4 w-4" />
       );
     }
     return <Tag className="h-4 w-4 text-primary" />;
@@ -141,31 +144,28 @@ const TreeNode: React.FC<TreeNodeProps> = ({
   };
 
   return (
-    <div>
+    <div className="mb-px">
       <div
         className={cn(
-          "group flex items-center gap-1 rounded-md px-2 py-2 transition-colors",
-          isSelected ? "border-primary bg-primary/10 border-l-2" : "hover:bg-muted/50",
+          "group flex cursor-pointer items-center gap-[5px] rounded-[6px] px-[8px] py-[5px] transition-colors",
+          isSelected ? "border-primary border-l-2 bg-primary/10" : "hover:bg-muted/50",
           isChecked && "bg-primary/5",
-          "cursor-pointer",
         )}
         style={{ paddingLeft: `${level * 20 + 8}px` }}
         onClick={() => onSelect(node)}
       >
-        {/* 체크박스 */}
         <Checkbox
           checked={isChecked}
           onCheckedChange={(checked) => {
             onCheck(node.valueId, checked as boolean);
           }}
           onClick={(e) => e.stopPropagation()}
-          className="mr-1"
+          className="mr-1 shrink-0"
         />
 
-        {/* 확장 토글 */}
         <button
           type="button"
-          className="hover:bg-muted flex h-6 w-6 items-center justify-center rounded"
+          className="flex h-6 w-6 shrink-0 items-center justify-center rounded hover:bg-muted"
           onClick={(e) => {
             e.stopPropagation();
             if (hasChildren) {
@@ -184,22 +184,24 @@ const TreeNode: React.FC<TreeNodeProps> = ({
           )}
         </button>
 
-        {/* 아이콘 */}
         {getIcon()}
 
-        {/* 라벨 */}
-        <div className="flex flex-1 items-center gap-2">
-          <span className={cn("text-sm", node.depth === 1 && "font-medium")}>{node.valueLabel}</span>
-          <span className="bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-[10px]">{getDepthLabel()}</span>
+        <div className="flex min-w-0 flex-1 items-center gap-[5px]">
+          <span className={cn("truncate text-sm", node.depth === 1 && "font-medium")}>
+            {node.valueLabel}
+          </span>
+          <span className="bg-muted text-muted-foreground shrink-0 rounded-[4px] px-1.5 py-0.5 text-[8px] font-bold">
+            {getDepthLabel()}
+          </span>
         </div>
 
-        {/* 비활성 표시 */}
         {!node.isActive && (
-          <span className="bg-destructive/10 text-destructive rounded px-1.5 py-0.5 text-[10px]">비활성</span>
+          <span className="bg-destructive/5 text-destructive shrink-0 rounded-[4px] px-1.5 py-0.5 text-[8px] font-bold">
+            비활성
+          </span>
         )}
 
-        {/* 액션 버튼 */}
-        <div className="flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+        <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
           {canAddChild && (
             <Button
               variant="ghost"
@@ -272,6 +274,7 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
   columnName,
   columnLabel,
   onValueCountChange,
+  headerRight,
 }) => {
   // 상태
   const [tree, setTree] = useState<CategoryValue[]>([]);
@@ -634,10 +637,13 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
 
   return (
     <div className="flex h-full flex-col">
-      {/* 헤더 */}
+      {/* 편집기 헤더: 컬럼명 + 값 수 Badge + 비활성/전체펼침/대분류추가 + headerRight(트리·목록 세그먼트 등) */}
       <div className="mb-3 flex items-center justify-between border-b pb-3">
         <div className="flex items-center gap-2">
           <h3 className="text-base font-semibold">{columnLabel} 카테고리</h3>
+          <Badge variant="secondary" className="rounded-full px-2 py-0.5 text-xs font-bold">
+            {countAllValues(tree)}개
+          </Badge>
           {checkedIds.size > 0 && (
             <span className="bg-primary/10 text-primary rounded-full px-2 py-0.5 text-xs">
               {checkedIds.size}개 선택
@@ -665,6 +671,7 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
             <Plus className="h-3.5 w-3.5" />
             대분류 추가
           </Button>
+          {headerRight != null ? <div className="flex items-center">{headerRight}</div> : null}
         </div>
       </div>
 
@@ -720,7 +727,7 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
             <p className="text-muted-foreground mt-1 text-xs">상단의 대분류 추가 버튼을 클릭하여 시작하세요</p>
           </div>
         ) : (
-          <div className="p-2">
+          <div className="py-1">
             {tree.map((node) => (
               <TreeNode
                 key={node.valueId}

frontend/components/ui/tabs.tsx

@@ -26,7 +26,7 @@ function TabsList({
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "bg-muted/30 text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        "bg-muted/50 text-muted-foreground inline-flex h-10 w-fit items-center justify-center rounded-lg border border-border/50 p-1",
         className
       )}
       {...props}
@@ -42,7 +42,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[state=active]:bg-background data-[state=active]:font-semibold dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-foreground/70 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

frontend/components/v2/config-panels/V2FieldConfigPanel.tsx

@@ -77,9 +77,9 @@ interface CategoryValueOption {
   valueLabel: string;
 }
 
-// ─── 하위 호환: 기존 config에서 fieldType 추론 ───
+// ─── 하위 호환: 기존 config에서 fieldType 추론 (우선순위: DB값 > 사용자 fieldType > 컴포넌트구조 > saved config > 기본값) ───
 function resolveFieldType(config: Record<string, any>, componentType?: string, metaInputType?: string): FieldType {
-  // DB input_type이 전달된 경우 (데이터타입관리에서 변경 시) 우선 적용
+  // (a) metaInputType: DB 전용 (undefined면 스킵, V2PropertiesPanel에서 dbInputType만 전달)
   if (metaInputType && metaInputType !== "direct" && metaInputType !== "auto") {
     const dbType = metaInputType as FieldType;
     if (["text", "number", "textarea", "numbering", "select", "category", "entity"].includes(dbType)) {
@@ -87,9 +87,10 @@ function resolveFieldType(config: Record<string, any>, componentType?: string, m
     }
   }
 
+  // (b) 사용자가 설정 패널에서 직접 선택한 fieldType
   if (config.fieldType) return config.fieldType as FieldType;
 
-  // v2-select 계열
+  // (c) v2-select 계열: componentType 또는 config.source 기반
   if (componentType === "v2-select" || config.source) {
     const source = config.source === "code" ? "category" : config.source;
     if (source === "entity") return "entity";
@@ -97,11 +98,13 @@ function resolveFieldType(config: Record<string, any>, componentType?: string, m
     return "select";
   }
 
-  // v2-input 계열
+  // (d) saved config fallback (config.inputType / config.type)
   const it = config.inputType || config.type;
   if (it === "number") return "number";
   if (it === "textarea") return "textarea";
   if (it === "numbering") return "numbering";
+
+  // (e) 최종 기본값
   return "text";
 }
 

frontend/hooks/useLogin.ts

@@ -2,12 +2,13 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { LoginFormData, LoginResponse } from "@/types/auth";
+import { LoginFormData } from "@/types/auth";
 import { AUTH_CONFIG, FORM_VALIDATION } from "@/constants/auth";
-import { API_BASE_URL } from "@/lib/api/client";
+import { apiCall } from "@/lib/api/client";
 
 /**
  * 로그인 관련 비즈니스 로직을 관리하는 커스텀 훅
+ * API 호출은 lib/api/client의 apiCall(Axios) 사용 (fetch 직접 사용 금지)
  */
 export const useLogin = () => {
   const router = useRouter();
@@ -73,67 +74,34 @@ export const useLogin = () => {
   }, [formData]);
 
   /**
-   * API 호출 공통 함수
-   */
-  const apiCall = useCallback(async (endpoint: string, options: RequestInit = {}): Promise<LoginResponse> => {
-    // 로컬 스토리지에서 토큰 가져오기
-    const token = localStorage.getItem("authToken");
-
-    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-        ...(token && { Authorization: `Bearer ${token}` }),
-        ...options.headers,
-      },
-      ...options,
-    });
-
-    const result = await response.json();
-    return result;
-  }, []);
-
-  /**
-   * 기존 인증 상태 확인
+   * 기존 인증 상태 확인 (apiCall 사용)
    */
   const checkExistingAuth = useCallback(async () => {
     try {
-      // 로컬 스토리지에서 토큰 확인
       const token = localStorage.getItem("authToken");
-      if (!token) {
-        // 토큰이 없으면 로그인 페이지 유지
-        return;
-      }
+      if (!token) return;
 
-      // 토큰이 있으면 API 호출로 유효성 확인
-      const result = await apiCall(AUTH_CONFIG.ENDPOINTS.STATUS);
+      const result = await apiCall<{ isAuthenticated?: boolean }>("GET", AUTH_CONFIG.ENDPOINTS.STATUS);
 
-      // 백엔드가 isAuthenticated 필드를 반환함
       if (result.success && result.data?.isAuthenticated) {
-        // 이미 로그인된 경우 메인으로 리다이렉트
         router.push(AUTH_CONFIG.ROUTES.MAIN);
       } else {
-        // 토큰이 유효하지 않으면 제거
         localStorage.removeItem("authToken");
         document.cookie = "authToken=; path=/; max-age=0; SameSite=Lax";
       }
-    } catch (error) {
-      // 에러가 발생하면 토큰 제거
+    } catch {
       localStorage.removeItem("authToken");
       document.cookie = "authToken=; path=/; max-age=0; SameSite=Lax";
-      console.debug("기존 인증 체크 중 오류 (정상):", error);
     }
-  }, [apiCall, router]);
+  }, [router]);
 
   /**
-   * 로그인 처리
+   * 로그인 처리 (apiCall 사용 - Axios 기반, fetch 미사용)
    */
   const handleLogin = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();
 
-      // 입력값 검증
       const validationError = validateForm();
       if (validationError) {
         setError(validationError);
@@ -144,9 +112,13 @@ export const useLogin = () => {
       setError("");
 
       try {
-        const result = await apiCall(AUTH_CONFIG.ENDPOINTS.LOGIN, {
-          method: "POST",
-          body: JSON.stringify(formData),
+        const result = await apiCall<{
+          token?: string;
+          firstMenuPath?: string;
+          popLandingPath?: string;
+        }>("POST", AUTH_CONFIG.ENDPOINTS.LOGIN, {
+          userId: formData.userId,
+          password: formData.password,
         });
 
         if (result.success && result.data?.token) {
@@ -185,7 +157,7 @@ export const useLogin = () => {
         setIsLoading(false);
       }
     },
-    [formData, validateForm, apiCall, router, isPopMode],
+    [formData, validateForm, router, isPopMode],
   );
 
   // 컴포넌트 마운트 시 기존 인증 상태 확인

frontend/lib/registry/DynamicComponentRenderer.tsx

@@ -30,18 +30,20 @@ export function invalidateColumnMetaCache(tableName?: string): void {
   }
 }
 
-async function loadColumnMeta(tableName: string, forceReload = false): Promise<void> {
+export async function loadColumnMeta(tableName: string, forceReload = false): Promise<void> {
   const now = Date.now();
-  const isStale = columnMetaTimestamp[tableName] && (now - columnMetaTimestamp[tableName] > CACHE_TTL_MS);
+  const cachedAt = columnMetaTimestamp[tableName];
+  const isStale =
+    typeof cachedAt === "number" && now - cachedAt > CACHE_TTL_MS;
 
-  if (!forceReload && !isStale && columnMetaCache[tableName]) return;
+  if (!forceReload && !isStale && tableName in columnMetaCache && columnMetaCache[tableName]) return;
 
   if (forceReload || isStale) {
     delete columnMetaCache[tableName];
     delete columnMetaLoading[tableName];
   }
 
-  if (columnMetaLoading[tableName]) {
+  if (tableName in columnMetaLoading) {
     await columnMetaLoading[tableName];
     return;
   }
@@ -663,7 +665,8 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
   }
 
   // 1. 새 컴포넌트 시스템에서 먼저 조회
-  const newComponent = ComponentRegistry.getComponent(componentType);
+  const newComponent =
+    componentType != null ? ComponentRegistry.getComponent(componentType) : null;
 
   if (newComponent) {
     // 새 컴포넌트 시스템으로 렌더링
@@ -775,7 +778,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
 
         // 렌더러 props 구성
         // 숨김 값 추출
-        const hiddenValue = component.hidden || component.componentConfig?.hidden;
+        const hiddenValue = (component as any).hidden || component.componentConfig?.hidden;
 
         // 숨김 처리: 인터랙티브 모드(실제 뷰)에서만 숨김, 디자인 모드에서는 표시
         if (hiddenValue && isInteractive) {
@@ -892,7 +895,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           // 새로운 기능들 전달
           // 🆕 webTypeConfig.numberingRuleId가 있으면 autoGeneration으로 변환
           autoGeneration:
-            component.autoGeneration ||
+            (component as any).autoGeneration ||
             component.componentConfig?.autoGeneration ||
             ((component as any).webTypeConfig?.numberingRuleId
               ? {
@@ -992,7 +995,8 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
 
         let renderedElement: React.ReactElement;
         if (isClass) {
-          const rendererInstance = new NewComponentRenderer(rendererProps);
+          const RendererClass = NewComponentRenderer as new (props: any) => { render: () => React.ReactElement };
+          const rendererInstance = new RendererClass(rendererProps);
           renderedElement = rendererInstance.render();
         } else {
           renderedElement = <NewComponentRenderer key={refreshKey} {...rendererProps} />;
@@ -1004,7 +1008,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           const labelFontSize = component.style?.labelFontSize || "14px";
           const labelColor = getAdaptiveLabelColor(component.style?.labelColor);
           const labelFontWeight = component.style?.labelFontWeight || "500";
-          const isRequired = effectiveComponent.required || isColumnRequiredByMeta(screenTableName, baseColumnName);
+          const isRequired =
+            effectiveComponent.required ||
+            isColumnRequiredByMeta(screenTableName ?? "", baseColumnName ?? "");
           const isLeft = labelPosition === "left";
 
           return (
@@ -1038,7 +1044,8 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
   }
 
   // 2. 레거시 시스템에서 조회
-  const renderer = legacyComponentRegistry.get(componentType);
+  const renderer =
+    componentType != null ? legacyComponentRegistry.get(componentType) : undefined;
 
   if (!renderer) {
     console.error(`⚠️ 등록되지 않은 컴포넌트 타입: ${componentType}`, {

frontend/lib/registry/components/v2-category-manager/V2CategoryManagerComponent.tsx

@@ -2,18 +2,19 @@
 
 /**
  * V2 카테고리 관리 컴포넌트
- * - 트리 구조 기반 카테고리 값 관리
+ * - 대시보드 레이아웃: Stat Strip + 좌측 테이블 nav + 칩 바 + 트리/목록 편집기
  * - 3단계 계층 구조 지원 (대분류/중분류/소분류)
  */
 
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
+import type { CategoryColumn } from "@/components/table-category/CategoryColumnList";
 import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
 import { CategoryValueManagerTree } from "@/components/table-category/CategoryValueManagerTree";
 import { LayoutList, TreeDeciduous } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
-import { ResponsiveSplitPanel } from "@/components/common/ResponsiveSplitPanel";
 import { V2CategoryManagerConfig, defaultV2CategoryManagerConfig, ViewMode } from "./types";
 
 interface V2CategoryManagerComponentProps {
@@ -33,80 +34,87 @@ export function V2CategoryManagerComponent({
   componentConfig,
   ...props
 }: V2CategoryManagerComponentProps) {
-  // 설정 병합 (componentConfig도 포함)
   const config: V2CategoryManagerConfig = {
     ...defaultV2CategoryManagerConfig,
     ...externalConfig,
     ...componentConfig,
   };
 
-  // tableName 우선순위: props > selectedScreen > componentConfig
-  const effectiveTableName = tableName || selectedScreen?.tableName || (componentConfig as any)?.tableName || "";
-  
-  // menuObjid 우선순위: props > selectedScreen
+  const effectiveTableName =
+    tableName || selectedScreen?.tableName || (componentConfig as any)?.tableName || "";
   const propsMenuObjid = typeof props.menuObjid === "number" ? props.menuObjid : undefined;
   const effectiveMenuObjid = menuObjid || propsMenuObjid || selectedScreen?.menuObjid;
 
-  // 디버그 로그
-  useEffect(() => {
-    console.log("🔍 V2CategoryManagerComponent props:", {
-      tableName,
-      menuObjid,
-      selectedScreen,
-      effectiveTableName,
-      effectiveMenuObjid,
-      config,
-    });
-  }, [tableName, menuObjid, selectedScreen, effectiveTableName, effectiveMenuObjid, config]);
-
-  // 선택된 컬럼 상태
+  const [columns, setColumns] = useState<CategoryColumn[]>([]);
+  const [selectedTable, setSelectedTable] = useState<string | null>(null);
   const [selectedColumn, setSelectedColumn] = useState<{
     uniqueKey: string;
     columnName: string;
     columnLabel: string;
     tableName: string;
   } | null>(null);
-
-  // 뷰 모드 상태
   const [viewMode, setViewMode] = useState<ViewMode>(config.viewMode);
 
-  // 컬럼 선택 핸들러
-  const handleColumnSelect = useCallback((uniqueKey: string, columnLabel: string, tableName: string) => {
-    const columnName = uniqueKey.split(".")[1];
-    setSelectedColumn({ uniqueKey, columnName, columnLabel, tableName });
+  const handleColumnsLoaded = useCallback((loaded: CategoryColumn[]) => {
+    setColumns(loaded);
+    if (loaded.length > 0) {
+      setSelectedTable((prev) => prev ?? loaded[0].tableName);
+    }
   }, []);
 
-  // 우측 패널 콘텐츠
+  const handleTableSelect = useCallback((tableName: string) => {
+    setSelectedTable(tableName);
+    setSelectedColumn(null);
+  }, []);
+
+  const handleColumnSelect = useCallback(
+    (uniqueKey: string, columnLabel: string, colTableName: string) => {
+      const columnName = uniqueKey.includes(".") ? uniqueKey.split(".")[1] : uniqueKey;
+      setSelectedColumn({ uniqueKey: uniqueKey.includes(".") ? uniqueKey : `${colTableName}.${uniqueKey}`, columnName, columnLabel, tableName: colTableName });
+    },
+    [],
+  );
+
+  const stats = useMemo(() => {
+    const columnCount = columns.length;
+    const totalValues = columns.reduce((sum, c) => sum + (c.valueCount ?? 0), 0);
+    const tableCount = new Set(columns.map((c) => c.tableName)).size;
+    const inactiveCount = 0;
+    return { columnCount, totalValues, tableCount, inactiveCount };
+  }, [columns]);
+
+  const columnsForSelectedTable = useMemo(
+    () => (selectedTable ? columns.filter((c) => c.tableName === selectedTable) : []),
+    [columns, selectedTable],
+  );
+
+  /** 편집기 헤더에 표시할 트리/목록 세그먼트 (보기 방식 토글) */
+  const viewModeSegment =
+    config.showViewModeToggle ? (
+      <div className="flex rounded-md border p-0.5">
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "tree" && "bg-accent")}
+          onClick={() => setViewMode("tree")}
+        >
+          <TreeDeciduous className="h-3.5 w-3.5" />
+          트리
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "list" && "bg-accent")}
+          onClick={() => setViewMode("list")}
+        >
+          <LayoutList className="h-3.5 w-3.5" />
+          목록
+        </Button>
+      </div>
+    ) : null;
+
   const rightContent = (
     <>
-      {/* 뷰 모드 토글 */}
-      {config.showViewModeToggle && (
-        <div className="mb-2 flex items-center justify-end gap-1">
-          <span className="text-muted-foreground mr-2 text-xs">보기 방식:</span>
-          <div className="flex rounded-md border p-0.5">
-            <Button
-              variant="ghost"
-              size="sm"
-              className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "tree" && "bg-accent")}
-              onClick={() => setViewMode("tree")}
-            >
-              <TreeDeciduous className="h-3.5 w-3.5" />
-              트리
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "list" && "bg-accent")}
-              onClick={() => setViewMode("list")}
-            >
-              <LayoutList className="h-3.5 w-3.5" />
-              목록
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {/* 카테고리 값 관리 */}
       <div className="min-h-0 flex-1 overflow-y-auto">
         {selectedColumn ? (
           viewMode === "tree" ? (
@@ -115,6 +123,7 @@ export function V2CategoryManagerComponent({
               tableName={selectedColumn.tableName}
               columnName={selectedColumn.columnName}
               columnLabel={selectedColumn.columnLabel}
+              headerRight={viewModeSegment}
             />
           ) : (
             <CategoryValueManager
@@ -123,6 +132,7 @@ export function V2CategoryManagerComponent({
               columnName={selectedColumn.columnName}
               columnLabel={selectedColumn.columnLabel}
               menuObjid={effectiveMenuObjid}
+              headerRight={viewModeSegment}
             />
           )
         ) : (
@@ -130,7 +140,9 @@ export function V2CategoryManagerComponent({
             <div className="flex flex-col items-center gap-2 text-center">
               <TreeDeciduous className="text-muted-foreground/30 h-10 w-10" />
               <p className="text-muted-foreground text-sm">
-                {config.showColumnList ? "좌측에서 관리할 카테고리 컬럼을 선택하세요" : "카테고리 컬럼이 설정되지 않았습니다"}
+                {config.showColumnList
+                  ? "칩에서 카테고리 컬럼을 선택하세요"
+                  : "카테고리 컬럼이 설정되지 않았습니다"}
               </p>
             </div>
           </div>
@@ -148,24 +160,107 @@ export function V2CategoryManagerComponent({
   }
 
   return (
-    <ResponsiveSplitPanel
-      left={
-        <CategoryColumnList
-          tableName={effectiveTableName}
-          selectedColumn={selectedColumn?.uniqueKey || null}
-          onColumnSelect={handleColumnSelect}
-          menuObjid={effectiveMenuObjid}
-        />
-      }
-      right={rightContent}
-      leftTitle="카테고리 컬럼"
-      leftWidth={config.leftPanelWidth}
-      minLeftWidth={10}
-      maxLeftWidth={40}
-      height={config.height}
-    />
+    <div
+      className="flex h-full flex-col overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm"
+      style={{ height: config.height }}
+    >
+      {/* Stat Strip: 카테고리 컬럼(primary) | 전체 값(success) | 테이블(primary) | 비활성(warning) */}
+      <div className="grid grid-cols-4 border-b bg-background">
+        <div className="border-r py-3.5 text-center last:border-r-0">
+          <div className="text-[22px] font-extrabold leading-none tracking-tight text-primary">
+            {stats.columnCount}
+          </div>
+          <div className="mt-1 text-[9px] font-semibold uppercase tracking-widest text-muted-foreground">
+            카테고리 컬럼
+          </div>
+        </div>
+        <div className="border-r py-3.5 text-center last:border-r-0">
+          <div className="text-[22px] font-extrabold leading-none tracking-tight text-success">
+            {stats.totalValues}
+          </div>
+          <div className="mt-1 text-[9px] font-semibold uppercase tracking-widest text-muted-foreground">
+            전체 값
+          </div>
+        </div>
+        <div className="border-r py-3.5 text-center last:border-r-0">
+          <div className="text-[22px] font-extrabold leading-none tracking-tight text-primary">
+            {stats.tableCount}
+          </div>
+          <div className="mt-1 text-[9px] font-semibold uppercase tracking-widest text-muted-foreground">
+            테이블
+          </div>
+        </div>
+        <div className="py-3.5 text-center">
+          <div className="text-[22px] font-extrabold leading-none tracking-tight text-warning">
+            {stats.inactiveCount}
+          </div>
+          <div className="mt-1 text-[9px] font-semibold uppercase tracking-widest text-muted-foreground">
+            비활성
+          </div>
+        </div>
+      </div>
+
+      <div className="flex min-h-0 flex-1">
+        {/* 좌측 테이블 nav: 240px */}
+        <div className="flex w-[240px] shrink-0 flex-col border-r">
+          <CategoryColumnList
+            tableName={effectiveTableName}
+            selectedColumn={selectedColumn?.uniqueKey ?? null}
+            onColumnSelect={handleColumnSelect}
+            menuObjid={effectiveMenuObjid}
+            selectedTable={selectedTable}
+            onTableSelect={setSelectedTable}
+            onColumnsLoaded={handleColumnsLoaded}
+          />
+        </div>
+
+        {/* 우측: 칩 바 + 편집기 */}
+        <div className="flex min-w-0 flex-1 flex-col">
+          {/* 칩 바 */}
+          <div className="flex flex-wrap gap-1.5 border-b bg-background px-4 py-3">
+            {columnsForSelectedTable.map((col) => {
+              const uniqueKey = `${col.tableName}.${col.columnName}`;
+              const isActive = selectedColumn?.uniqueKey === uniqueKey;
+              return (
+                <button
+                  key={uniqueKey}
+                  type="button"
+                  onClick={() =>
+                    handleColumnSelect(uniqueKey, col.columnLabel || col.columnName, col.tableName)
+                  }
+                  className={cn(
+                    "inline-flex items-center gap-1.5 rounded-full border px-[10px] py-[5px] text-[11px] font-semibold transition-colors",
+                    isActive
+                      ? "border-primary bg-primary/5 text-primary"
+                      : "border-border bg-muted/50 hover:border-primary hover:bg-primary/5 hover:text-primary",
+                  )}
+                >
+                  <span>{col.columnLabel || col.columnName}</span>
+                  <Badge
+                    variant="secondary"
+                    className={cn(
+                      "h-4 rounded-full px-1.5 text-[9px] font-bold",
+                      isActive ? "bg-primary/15 text-primary" : "bg-muted text-muted-foreground",
+                    )}
+                  >
+                    {col.valueCount ?? 0}
+                  </Badge>
+                </button>
+              );
+            })}
+            {selectedTable && columnsForSelectedTable.length === 0 && (
+              <span className="text-muted-foreground text-xs">이 테이블에 카테고리 컬럼이 없습니다</span>
+            )}
+          </div>
+
+          {/* 편집기 영역 */}
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden p-3">
+            {rightContent}
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }
 
 export default V2CategoryManagerComponent;
-

frontend/lib/registry/components/v2-table-list/SingleTableWithSticky.tsx

@@ -35,7 +35,11 @@ interface SingleTableWithStickyProps {
   editingValue?: string;
   onEditingValueChange?: (value: string) => void;
   onEditKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  editInputRef?: React.RefObject<HTMLInputElement>;
+  onEditSave?: () => void;
+  editInputRef?: React.RefObject<HTMLInputElement | HTMLSelectElement>;
+  // 인라인 편집 타입별 옵션 (select/category/code, number, date 지원)
+  columnMeta?: Record<string, { inputType?: string }>;
+  categoryMappings?: Record<string, Record<string, { label: string }>>;
   // 검색 하이라이트 관련 props
   searchHighlights?: Set<string>;
   currentSearchIndex?: number;
@@ -69,7 +73,10 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
   editingValue,
   onEditingValueChange,
   onEditKeyDown,
+  onEditSave,
   editInputRef,
+  columnMeta,
+  categoryMappings,
   // 검색 하이라이트 관련 props
   searchHighlights,
   currentSearchIndex = 0,
@@ -102,9 +109,10 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
           }}
         >
           <TableHeader
-            className={cn("bg-background border-b", tableConfig?.stickyHeader && "sticky top-0 z-30 shadow-sm")}
+            className={cn("border-b border-border/60", tableConfig?.stickyHeader && "sticky top-0 z-30 shadow-sm")}
+            style={{ backgroundColor: "hsl(var(--muted) / 0.4)" }}
           >
-            <TableRow className="border-b">
+            <TableRow className="border-b border-border/60">
               {actualColumns.map((column, colIndex) => {
                 // 왼쪽 고정 컬럼들의 누적 너비 계산
                 const leftFixedWidth = actualColumns
@@ -125,10 +133,10 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                     key={column.columnName}
                     className={cn(
                       column.columnName === "__checkbox__"
-                        ? "bg-background h-9 border-0 px-3 py-1.5 text-center align-middle sm:px-4 sm:py-2"
-                        : "text-foreground hover:text-foreground bg-background h-9 cursor-pointer border-0 px-3 py-1.5 text-left align-middle text-xs font-semibold whitespace-nowrap transition-all duration-200 select-none sm:px-4 sm:py-2 sm:text-sm",
+                        ? "h-9 border-0 px-3 py-1.5 text-center align-middle sm:px-4 sm:py-2"
+                        : "text-muted-foreground hover:text-foreground h-9 cursor-pointer border-0 px-3 py-1.5 text-left align-middle text-[10px] font-bold uppercase tracking-[0.04em] whitespace-nowrap transition-all duration-200 select-none sm:px-4 sm:py-2 sm:text-xs",
                       `text-${column.align}`,
-                      column.sortable && "hover:bg-primary/10",
+                      column.sortable && "hover:bg-muted/50",
                       // 고정 컬럼 스타일
                       column.fixed === "left" && "border-border bg-background sticky z-40 border-r shadow-sm",
                       column.fixed === "right" && "border-border bg-background sticky z-40 border-l shadow-sm",
@@ -136,28 +144,33 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                       isDesignMode && column.hidden && "bg-muted/50 opacity-40",
                     )}
                     style={{
-                      width: getColumnWidth(column),
-                      minWidth: "100px", // 최소 너비 보장
-                      maxWidth: "300px", // 최대 너비 제한
+                      width: column.columnName === "__checkbox__" ? 48 : getColumnWidth(column),
+                      minWidth: column.columnName === "__checkbox__" ? "48px" : "100px",
+                      maxWidth: column.columnName === "__checkbox__" ? "48px" : "300px",
                       boxSizing: "border-box",
                       overflow: "hidden",
                       textOverflow: "ellipsis",
-                      whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
-                      backgroundColor: "hsl(var(--background))",
-                      // sticky 위치 설정
+                      whiteSpace: "nowrap",
+                      backgroundColor: "hsl(var(--muted) / 0.4)",
                       ...(column.fixed === "left" && { left: leftFixedWidth }),
                       ...(column.fixed === "right" && { right: rightFixedWidth }),
                     }}
                     onClick={() => column.sortable && sortHandler(column.columnName)}
                   >
-                    <div className="flex items-center gap-2">
+                    <div className={cn("flex items-center", column.columnName === "__checkbox__" ? "justify-center" : "gap-2")}>
                       {column.columnName === "__checkbox__" ? (
                         checkboxConfig.selectAll && (
                           <Checkbox
                             checked={isAllSelected}
                             onCheckedChange={handleSelectAll}
                             aria-label="전체 선택"
-                            style={{ zIndex: 1 }}
+                            style={{
+                              width: 16,
+                              height: 16,
+                              borderWidth: 1.5,
+                              borderColor: isAllSelected ? "hsl(var(--primary))" : "hsl(var(--muted-foreground) / 0.5)",
+                              zIndex: 1,
+                            }}
                           />
                         )
                       ) : (
@@ -221,8 +234,9 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                 <TableRow
                   key={`row-${index}`}
                   className={cn(
-                    "bg-background h-10 cursor-pointer border-b transition-colors",
-                    tableConfig.tableStyle?.hoverEffect && "hover:bg-muted/50",
+                    "cursor-pointer border-b border-border/50 transition-[background] duration-75",
+                    index % 2 === 0 ? "bg-background" : "bg-muted/20",
+                    tableConfig.tableStyle?.hoverEffect !== false && "hover:bg-accent",
                   )}
                   onClick={(e) => handleRowClick?.(row, index, e)}
                 >
@@ -266,9 +280,10 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                       highlightArray[currentSearchIndex] === cellKey;
 
                     // formatCellValue 결과 (이미지 등 JSX 반환 가능)
-                    const rawCellValue =
-                      formatCellValue(row[column.columnName], column.format, column.columnName, row) || "\u00A0";
-                    // 이미지 등 JSX 반환 여부 확인
+                    const formattedValue = formatCellValue(row[column.columnName], column.format, column.columnName, row);
+                    const rawCellValue = (formattedValue === null || formattedValue === undefined || formattedValue === "")
+                      ? <span className="text-muted-foreground/50">-</span>
+                      : formattedValue;
                     const isReactElement = typeof rawCellValue === "object" && React.isValidElement(rawCellValue);
 
                     // 셀 값에서 검색어 하이라이트 렌더링
@@ -317,26 +332,22 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                         key={`cell-${column.columnName}`}
                         id={isCurrentSearchResult ? "current-search-result" : undefined}
                         className={cn(
-                          "text-foreground h-10 px-3 py-1.5 align-middle text-xs transition-colors sm:px-4 sm:py-2 sm:text-sm",
-                          // 이미지 셀은 overflow/ellipsis 제외 (이미지 잘림 방지)
+                          "text-foreground h-10 align-middle text-[11px] transition-colors",
+                          column.columnName === "__checkbox__" ? "px-0 py-[7px] text-center" : "px-3 py-[7px]",
                           !isReactElement && "whitespace-nowrap",
-                          `text-${column.align}`,
-                          // 고정 컬럼 스타일
+                          column.columnName !== "__checkbox__" && `text-${column.align}`,
                           column.fixed === "left" &&
                             "border-border bg-background/90 sticky z-10 border-r backdrop-blur-sm",
                           column.fixed === "right" &&
                             "border-border bg-background/90 sticky z-10 border-l backdrop-blur-sm",
-                          // 편집 가능 셀 스타일
                           onCellDoubleClick && column.columnName !== "__checkbox__" && "cursor-text",
                         )}
                         style={{
-                          width: getColumnWidth(column),
-                          minWidth: "100px", // 최소 너비 보장
-                          maxWidth: "300px", // 최대 너비 제한
+                          width: column.columnName === "__checkbox__" ? 48 : getColumnWidth(column),
+                          minWidth: column.columnName === "__checkbox__" ? "48px" : "100px",
+                          maxWidth: column.columnName === "__checkbox__" ? "48px" : "300px",
                           boxSizing: "border-box",
-                          // 이미지 셀은 overflow 허용
                           ...(isReactElement ? {} : { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }),
-                          // sticky 위치 설정
                           ...(column.fixed === "left" && { left: leftFixedWidth }),
                           ...(column.fixed === "right" && { right: rightFixedWidth }),
                         }}
@@ -350,15 +361,20 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                         {column.columnName === "__checkbox__" ? (
                           renderCheckboxCell?.(row, index)
                         ) : isEditing ? (
-                          // 인라인 편집 입력 필드
-                          <input
-                            ref={editInputRef}
-                            type="text"
-                            value={editingValue ?? ""}
-                            onChange={(e) => onEditingValueChange?.(e.target.value)}
-                            onKeyDown={onEditKeyDown}
-                            onBlur={() => {
-                              // blur 시 저장 (Enter와 동일)
+                          // 인라인 편집: inputType에 따라 select(category/code), number, date, text
+                          (() => {
+                            const meta = columnMeta?.[column.columnName];
+                            const inputType = meta?.inputType ?? (column as { inputType?: string }).inputType;
+                            const isNumeric = inputType === "number" || inputType === "decimal";
+                            const isCategoryType = inputType === "category" || inputType === "code";
+                            const categoryOptions = categoryMappings?.[column.columnName];
+                            const hasCategoryOptions =
+                              isCategoryType && categoryOptions && Object.keys(categoryOptions).length > 0;
+
+                            // 인라인 편집: 행 높이 유지를 위해 select/input 모두 h-8(32px) 고정
+                            const commonInputClass =
+                              "border-primary bg-background focus:ring-primary h-8 w-full shrink-0 rounded border px-2 text-xs focus:ring-2 focus:outline-none sm:text-sm";
+                            const handleBlurSave = () => {
                               if (onEditKeyDown) {
                                 const fakeEvent = {
                                   key: "Enter",
@@ -366,10 +382,79 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                                 } as React.KeyboardEvent<HTMLInputElement>;
                                 onEditKeyDown(fakeEvent);
                               }
-                            }}
-                            className="border-primary bg-background focus:ring-primary h-8 w-full rounded border px-2 text-xs focus:ring-2 focus:outline-none sm:text-sm"
-                            onClick={(e) => e.stopPropagation()}
-                          />
+                              onEditSave?.();
+                            };
+
+                            // category/code 타입: select는 반드시 h-8(32px)로 행 높이 유지
+                            if (hasCategoryOptions) {
+                              const selectOptions = Object.entries(categoryOptions).map(([value, info]) => ({
+                                value,
+                                label: info.label,
+                              }));
+                              return (
+                                <select
+                                  ref={editInputRef as React.RefObject<HTMLSelectElement>}
+                                  value={editingValue ?? ""}
+                                  onChange={(e) => onEditingValueChange?.(e.target.value)}
+                                  onKeyDown={onEditKeyDown}
+                                  onBlur={handleBlurSave}
+                                  className={cn(commonInputClass, "h-8")}
+                                  onClick={(e) => e.stopPropagation()}
+                                >
+                                  <option value="">선택하세요</option>
+                                  {selectOptions.map((opt) => (
+                                    <option key={opt.value} value={opt.value}>
+                                      {opt.label}
+                                    </option>
+                                  ))}
+                                </select>
+                              );
+                            }
+
+                            if (inputType === "date" || inputType === "datetime") {
+                              try {
+                                const { InlineCellDatePicker } = require("@/components/screen/filters/InlineCellDatePicker");
+                                return (
+                                  <InlineCellDatePicker
+                                    value={editingValue ?? ""}
+                                    onChange={(v) => onEditingValueChange?.(v)}
+                                    onSave={() => {
+                                      handleBlurSave();
+                                    }}
+                                    onKeyDown={onEditKeyDown}
+                                    inputRef={editInputRef as React.RefObject<HTMLInputElement>}
+                                  />
+                                );
+                              } catch {
+                                return (
+                                  <input
+                                    ref={editInputRef as React.RefObject<HTMLInputElement>}
+                                    type="text"
+                                    value={editingValue ?? ""}
+                                    onChange={(e) => onEditingValueChange?.(e.target.value)}
+                                    onKeyDown={onEditKeyDown}
+                                    onBlur={handleBlurSave}
+                                    className={commonInputClass}
+                                    onClick={(e) => e.stopPropagation()}
+                                  />
+                                );
+                              }
+                            }
+
+                            return (
+                              <input
+                                ref={editInputRef as React.RefObject<HTMLInputElement>}
+                                type={isNumeric ? "number" : "text"}
+                                value={editingValue ?? ""}
+                                onChange={(e) => onEditingValueChange?.(e.target.value)}
+                                onKeyDown={onEditKeyDown}
+                                onBlur={handleBlurSave}
+                                className={commonInputClass}
+                                style={isNumeric ? { textAlign: "right" } : undefined}
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                            );
+                          })()
                         ) : (
                           renderCellContent()
                         )}

frontend/lib/registry/components/v2-table-list/TableListComponent.tsx

@@ -368,6 +368,7 @@ import {
   CheckSquare,
   Trash2,
   Lock,
+  GripVertical,
 } from "lucide-react";
 import * as XLSX from "xlsx";
 import { FileText, ChevronRightIcon } from "lucide-react";
@@ -1067,10 +1068,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [isTableOptionsOpen, setIsTableOptionsOpen] = useState(false);
   const [showGridLines, setShowGridLines] = useState(true);
   const [viewMode, setViewMode] = useState<"table" | "card" | "grouped-card">("table");
-  // 체크박스 컬럼은 항상 기본 틀고정
-  const [frozenColumns, setFrozenColumns] = useState<string[]>(
-    (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [],
-  );
+  const [frozenColumns, setFrozenColumns] = useState<string[]>([]);
   const [frozenColumnCount, setFrozenColumnCount] = useState<number>(0);
 
   // 🆕 Search Panel (통합 검색) 관련 상태
@@ -1373,14 +1371,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       frozenColumnCount, // 현재 틀고정 컬럼 수
       onFrozenColumnCountChange: (count: number) => {
         setFrozenColumnCount(count);
-        // 체크박스 컬럼은 항상 틀고정에 포함
-        const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
-        // 표시 가능한 컬럼 중 처음 N개를 틀고정 컬럼으로 설정
         const visibleCols = columnsToRegister
           .filter((col) => col.visible !== false)
           .map((col) => col.columnName || col.field);
-        const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, count)];
-        setFrozenColumns(newFrozenColumns);
+        setFrozenColumns(visibleCols.slice(0, count));
       },
       // 탭 관련 정보 (탭 내부의 테이블인 경우)
       parentTabId,
@@ -3280,12 +3274,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       if (state.sortDirection) setSortDirection(state.sortDirection);
       if (state.groupByColumns) setGroupByColumns(state.groupByColumns);
       if (state.frozenColumns) {
-        // 체크박스 컬럼이 항상 포함되도록 보장
-        const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? "__checkbox__" : null;
-        const restoredFrozenColumns =
-          checkboxColumn && !state.frozenColumns.includes(checkboxColumn)
-            ? [checkboxColumn, ...state.frozenColumns]
-            : state.frozenColumns;
+        // 체크박스 컬럼은 frozen 대상에서 제외 (배경색 이중 적용 방지)
+        const restoredFrozenColumns = (state.frozenColumns || []).filter((col: string) => col !== "__checkbox__");
         setFrozenColumns(restoredFrozenColumns);
       }
       if (state.frozenColumnCount !== undefined) setFrozenColumnCount(state.frozenColumnCount); // 틀고정 컬럼 수 복원
@@ -4434,7 +4424,19 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     if (!tableConfig.checkbox?.selectAll) return null;
     if (tableConfig.checkbox?.multiple === false) return null;
 
-    return <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} aria-label="전체 선택" />;
+    return (
+      <Checkbox
+        checked={isAllSelected}
+        onCheckedChange={handleSelectAll}
+        aria-label="전체 선택"
+        style={{
+          width: 16,
+          height: 16,
+          borderWidth: 1.5,
+          borderColor: isAllSelected ? "hsl(var(--primary))" : "hsl(var(--muted-foreground) / 0.5)",
+        }}
+      />
+    );
   };
 
   const renderCheckboxCell = (row: any, index: number) => {
@@ -4446,6 +4448,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         checked={isChecked}
         onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean)}
         aria-label={`행 ${index + 1} 선택`}
+        style={{
+          width: 16,
+          height: 16,
+          borderWidth: 1.5,
+          borderColor: isChecked ? "hsl(var(--primary))" : "hsl(var(--muted-foreground) / 0.5)",
+        }}
       />
     );
   };
@@ -5634,6 +5642,15 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             }}
             getColumnWidth={getColumnWidth}
             containerWidth={calculatedWidth}
+            onCellDoubleClick={handleCellDoubleClick}
+            editingCell={editingCell}
+            editingValue={editingValue}
+            onEditingValueChange={setEditingValue}
+            onEditKeyDown={handleEditKeyDown}
+            onEditSave={saveEditing}
+            editInputRef={editInputRef}
+            columnMeta={columnMeta}
+            categoryMappings={categoryMappings}
           />
         </div>
 
@@ -5838,7 +5855,41 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           )}
         </div>
 
-        {/* 🆕 배치 편집 툴바 */}
+        {/* 필터 칩 바 */}
+        {filterGroups.length > 0 && filterGroups.some(g => g.conditions.some(c => c.column && c.value)) && (
+          <div className="border-border bg-muted/30 flex items-center gap-2 border-b px-4 py-1.5">
+            {filterGroups.flatMap(group =>
+              group.conditions
+                .filter(c => c.column && c.value)
+                .map(condition => {
+                  const label = columnLabels[condition.column] || condition.column;
+                  const opLabel = condition.operator === "equals" ? "=" : condition.operator === "contains" ? "⊃" : condition.operator === "notEquals" ? "≠" : condition.operator === "startsWith" ? "^" : condition.operator === "endsWith" ? "$" : condition.operator === "greaterThan" ? ">" : condition.operator === "lessThan" ? "<" : condition.operator;
+                  return (
+                    <span
+                      key={condition.id}
+                      className="border-border bg-background text-muted-foreground inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-[10px] font-semibold"
+                    >
+                      {label} {opLabel} {condition.value}
+                      <button
+                        onClick={() => removeFilterCondition(group.id, condition.id)}
+                        className="hover:text-destructive ml-0.5 leading-none transition-colors"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </span>
+                  );
+                })
+            )}
+            <button
+              onClick={clearFilterBuilder}
+              className="text-muted-foreground hover:text-foreground ml-auto text-[9px] font-semibold transition-colors"
+            >
+              전체 초기화
+            </button>
+          </div>
+        )}
+
+        {/* 배치 편집 툴바 */}
         {(editMode === "batch" || pendingChanges.size > 0) && (
           <div className="border-border flex items-center justify-between border-b bg-amber-50 px-4 py-2 sm:px-6 dark:bg-amber-950/30">
             <div className="flex items-center gap-3 text-xs sm:text-sm">
@@ -5946,8 +5997,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 {/* 🆕 Multi-Level Headers (Column Bands) */}
                 {columnBandsInfo?.hasBands && (
                   <tr
-                    className="border-primary/10 bg-muted/70 h-8 border-b sm:h-10"
-                    style={{ backgroundColor: "hsl(var(--muted) / 0.7)" }}
+                    className="border-border/60 bg-muted/40 h-8 border-b sm:h-10"
+                    style={{ backgroundColor: "hsl(var(--muted) / 0.4)" }}
                   >
                     {visibleColumns.map((column, colIdx) => {
                       // 이 컬럼이 속한 band 찾기
@@ -5988,9 +6039,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   </tr>
                 )}
                 <tr
-                  className="border-primary/20 bg-muted h-10 border-b-2 sm:h-12"
+                  className="bg-muted/80 h-10 border-b border-border/60 sm:h-12"
                   style={{
-                    backgroundColor: "hsl(var(--muted))",
+                    backgroundColor: "hsl(var(--muted) / 0.4)",
                   }}
                 >
                   {visibleColumns.map((column, columnIndex) => {
@@ -6018,11 +6069,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         key={column.columnName}
                         ref={(el) => (columnRefs.current[column.columnName] = el)}
                         className={cn(
-                          "text-foreground/90 relative h-8 overflow-hidden text-xs font-bold text-ellipsis whitespace-nowrap select-none sm:h-10 sm:text-sm",
-                          column.columnName === "__checkbox__" ? "px-0 py-1" : "px-2 py-1 sm:px-4 sm:py-2",
+                          "group text-muted-foreground relative h-8 overflow-hidden text-[10px] font-bold uppercase tracking-[0.04em] text-ellipsis whitespace-nowrap select-none sm:h-10 sm:text-xs",
+                          column.columnName === "__checkbox__" ? "px-0 py-1" : "px-3 py-2",
                           column.sortable !== false &&
                             column.columnName !== "__checkbox__" &&
-                            "hover:bg-muted/70 cursor-pointer transition-colors",
+                            "hover:text-foreground hover:bg-muted/50 cursor-pointer transition-colors",
+                          sortColumn === column.columnName && "!text-primary",
                           isFrozen && "sticky z-40 shadow-[2px_0_4px_rgba(0,0,0,0.1)]",
                           // 🆕 Column Reordering 스타일
                           isColumnDragEnabled &&
@@ -6042,7 +6094,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                           maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                           userSelect: "none",
-                          backgroundColor: "hsl(var(--muted))",
+                          backgroundColor: "hsl(var(--muted) / 0.4)",
                           ...(isFrozen && { left: `${leftPosition}px` }),
                         }}
                         // 🆕 Column Reordering 이벤트
@@ -6062,9 +6114,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           renderCheckboxHeader()
                         ) : (
                           <div style={{ display: "flex", alignItems: "center", gap: "4px", justifyContent: "center" }}>
+                            {isColumnDragEnabled && (
+                              <GripVertical className="absolute left-0.5 top-1/2 h-3 w-3 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-40" />
+                            )}
                             <span>{columnLabels[column.columnName] || column.displayName}</span>
                             {column.sortable !== false && sortColumn === column.columnName && (
-                              <span>{sortDirection === "asc" ? "↑" : "↓"}</span>
+                              <span className="text-primary">{sortDirection === "asc" ? "↑" : "↓"}</span>
                             )}
                             {/* 🆕 헤더 필터 버튼 */}
                             {tableConfig.headerFilter !== false &&
@@ -6289,7 +6344,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             <tr
                               key={index}
                               className={cn(
-                                "bg-background hover:bg-muted/50 cursor-pointer border-b transition-colors",
+                                "hover:bg-accent cursor-pointer border-b border-border/50 transition-[background] duration-75",
+                                index % 2 === 0 ? "bg-background" : "bg-muted/20",
                               )}
                               onClick={(e) => handleRowClick(row, index, e)}
                             >
@@ -6320,13 +6376,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                   <td
                                     key={column.columnName}
                                     className={cn(
-                                      "text-foreground text-xs font-normal sm:text-sm",
-                                      // 이미지 컬럼은 overflow/ellipsis 제외 (이미지 잘림 방지)
-                                      inputType !== "image" && "overflow-hidden text-ellipsis whitespace-nowrap",
+                                      "text-foreground text-[11px] font-normal",
+                                      inputType !== "image" && "overflow-hidden text-ellipsis whitespace-nowrap max-w-[170px]",
                                       column.columnName === "__checkbox__"
-                                        ? "px-0 py-1"
-                                        : "px-2 py-1 sm:px-4 sm:py-1.5",
+                                        ? "px-0 py-[7px] text-center"
+                                        : "px-3 py-[7px]",
                                       isFrozen && "sticky z-20 shadow-[2px_0_4px_rgba(0,0,0,0.08)]",
+                                      (inputType === "code" || inputType === "category") && "font-mono text-[10px] text-primary font-medium",
+                                      isNumeric && "tabular-nums",
                                     )}
                                     style={{
                                       textAlign:
@@ -6341,16 +6398,18 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                           : `${100 / visibleColumns.length}%`,
                                       minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                                       maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                                      ...(isFrozen && {
-                                        left: `${leftPosition}px`,
-                                        backgroundColor: "hsl(var(--background))",
-                                      }),
-                                    }}
-                                  >
+                                  ...(isFrozen && {
+                                    left: `${leftPosition}px`,
+                                    backgroundColor: index % 2 === 0
+                                      ? "hsl(var(--background))"
+                                      : "hsl(var(--muted) / 0.2)",
+                                  }),
+                                }}
+                              >
                                     {column.columnName === "__checkbox__"
                                       ? renderCheckboxCell(row, index)
                                       : formatCellValue(cellValue, column, row)}
-                                  </td>
+                              </td>
                                 );
                               })}
                             </tr>
@@ -6426,10 +6485,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         <tr
                           key={index}
                           className={cn(
-                            "bg-background hover:bg-muted/50 cursor-pointer border-b transition-colors",
-                            isRowSelected && "bg-primary/10 hover:bg-primary/15",
+                            "hover:bg-accent cursor-pointer border-b border-border/50 transition-[background] duration-75",
+                            index % 2 === 0 ? "bg-background" : "bg-muted/20",
+                            isRowSelected && "!bg-primary/10 hover:!bg-primary/15",
                             isRowFocused && "ring-primary/50 ring-1 ring-inset",
-                            // 🆕 Drag & Drop 스타일
                             isDragEnabled && "cursor-grab active:cursor-grabbing",
                             isDragging && "bg-muted opacity-50",
                             isDropTarget && "border-t-primary border-t-2",
@@ -6489,23 +6548,20 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 data-row={index}
                                 data-col={colIndex}
                                 className={cn(
-                                  "text-foreground text-xs font-normal sm:text-sm",
-                                  // 이미지 컬럼은 overflow/ellipsis 제외 (이미지 잘림 방지)
-                                  inputType !== "image" && "overflow-hidden text-ellipsis whitespace-nowrap",
-                                  column.columnName === "__checkbox__" ? "px-0 py-1" : "px-2 py-1 sm:px-4 sm:py-1.5",
+                                  "text-foreground text-[11px] font-normal",
+                                  inputType !== "image" && "overflow-hidden text-ellipsis whitespace-nowrap max-w-[170px]",
+                                  column.columnName === "__checkbox__" ? "px-0 py-[7px] text-center" : "px-3 py-[7px]",
                                   isFrozen && "sticky z-20 shadow-[2px_0_4px_rgba(0,0,0,0.08)]",
-                                  // 🆕 포커스된 셀 스타일
                                   isCellFocused && !editingCell && "ring-primary bg-primary/5 ring-2 ring-inset",
-                                  // 🆕 편집 중인 셀 스타일
                                   editingCell?.rowIndex === index && editingCell?.colIndex === colIndex && "p-0",
-                                  // 🆕 배치 편집: 수정된 셀 스타일 (노란 배경)
                                   isModified && !cellValidationError && "bg-amber-100 dark:bg-amber-900/40",
-                                  // 🆕 유효성 에러: 빨간 테두리 및 배경
                                   cellValidationError && "bg-red-50 ring-2 ring-red-500 ring-inset dark:bg-red-950/40",
-                                  // 🆕 검색 하이라이트 스타일 (노란 배경)
                                   isSearchHighlighted && !isCellFocused && "bg-yellow-200 dark:bg-yellow-700/50",
-                                  // 🆕 편집 불가 컬럼 스타일 (연한 회색 배경)
-                                  column.editable === false && "bg-gray-50 dark:bg-gray-900/30",
+                                  column.editable === false && "bg-muted/10 dark:bg-muted/10",
+                                  // 코드 컬럼: mono 폰트 + primary 색상
+                                  (inputType === "code" || inputType === "category") && "font-mono text-[10px] text-primary font-medium",
+                                  // 숫자 컬럼: tabular-nums 오른쪽 정렬
+                                  isNumeric && "tabular-nums",
                                 )}
                                 // 🆕 유효성 에러 툴팁
                                 title={cellValidationError || undefined}
@@ -6522,7 +6578,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                   maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                                   ...(isFrozen && {
                                     left: `${leftPosition}px`,
-                                    backgroundColor: "hsl(var(--background))",
+                                    backgroundColor: index % 2 === 0
+                                      ? "hsl(var(--background))"
+                                      : "hsl(var(--muted) / 0.2)",
                                   }),
                                 }}
                                 onClick={(e) => handleCellClick(index, colIndex, e)}
@@ -6581,7 +6639,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                             onChange={(e) => setEditingValue(e.target.value)}
                                             onKeyDown={handleEditKeyDown}
                                             onBlur={saveEditing}
-                                            className="border-primary bg-background h-full w-full border-2 px-2 py-1 text-xs focus:outline-none sm:px-4 sm:py-1.5 sm:text-sm"
+                                            className="border-primary bg-background h-8 w-full shrink-0 border-2 px-2 py-1 text-xs focus:outline-none sm:px-4 sm:py-1.5 sm:text-sm"
                                             autoFocus
                                           >
                                             <option value="">선택하세요</option>
@@ -6609,7 +6667,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                         );
                                       }
 
-                                      // 일반 입력 필드
+                                      // 일반 입력 필드 (행 높이 유지: h-8 고정)
                                       return (
                                         <input
                                           ref={editInputRef}
@@ -6618,7 +6676,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                           onChange={(e) => setEditingValue(e.target.value)}
                                           onKeyDown={handleEditKeyDown}
                                           onBlur={saveEditing}
-                                          className="border-primary bg-background h-full w-full border-2 px-2 py-1 text-xs focus:outline-none sm:px-4 sm:py-1.5 sm:text-sm"
+                                          className="border-primary bg-background h-8 w-full shrink-0 border-2 px-2 py-1 text-xs focus:outline-none sm:px-4 sm:py-1.5 sm:text-sm"
                                           style={{
                                             textAlign: isNumeric ? "right" : column.align || "left",
                                           }}
@@ -6627,7 +6685,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                     })()
                                   : column.columnName === "__checkbox__"
                                     ? renderCheckboxCell(row, index)
-                                    : formatCellValue(cellValue, column, row)}
+                                    : (cellValue === null || cellValue === undefined || cellValue === "")
+                                      ? <span className="text-muted-foreground/50">-</span>
+                                      : formatCellValue(cellValue, column, row)}
                               </td>
                             );
                           })}
@@ -6687,7 +6747,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                   : undefined,
                             ...(isFrozen && {
                               left: `${leftPosition}px`,
-                              backgroundColor: "hsl(var(--muted) / 0.8)",
+                              backgroundColor: "hsl(var(--muted) / 0.4)",
                             }),
                           }}
                         >

frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx

@@ -48,7 +48,7 @@ const TabsDesignEditor: React.FC<{
     return cn(
       "px-4 py-2 text-sm font-medium cursor-pointer transition-colors",
       isActive
-        ? "bg-background border-b-2 border-primary text-primary"
+        ? "bg-primary/20 dark:bg-primary/25 border-b-2 border-primary text-primary font-semibold"
         : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
     );
   };
@@ -283,7 +283,7 @@ const TabsDesignEditor: React.FC<{
   return (
     <div className="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-background">
       {/* 탭 헤더 */}
-      <div className="flex items-center border-b bg-muted/30">
+      <div className="flex items-center border-b bg-muted/50">
         {tabs.length > 0 ? (
           tabs.map((tab) => (
             <div
@@ -649,8 +649,8 @@ ComponentRegistry.registerComponent({
       return cn(
         "px-4 py-2 text-sm font-medium cursor-pointer transition-colors",
         isActive
-          ? "bg-background border-b-2 border-primary text-primary"
-          : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+          ? "bg-primary/10 border-b-2 border-primary text-primary font-semibold"
+          : "text-foreground/70 hover:text-foreground hover:bg-muted/50"
       );
     };
 
@@ -662,7 +662,7 @@ ComponentRegistry.registerComponent({
         onDragEnd={onDragEnd}
       >
         {/* 탭 헤더 */}
-        <div className="flex items-center border-b bg-muted/30">
+        <div className="flex items-center border-b bg-muted/50">
           {tabs.length > 0 ? (
             tabs.map((tab) => (
               <div