.cursor/rules/inputtype-usage-guide.mdc

@@ -1,279 +0,0 @@
-# inputType 사용 가이드
-
-## 핵심 원칙
-
-**컬럼 타입 판단 시 반드시 `inputType`을 사용해야 합니다. `webType`은 레거시이며 더 이상 사용하지 않습니다.**
-
----
-
-## 올바른 사용법
-
-### ✅ inputType 사용 (권장)
-
-```typescript
-// 카테고리 타입 체크
-if (columnMeta.inputType === "category") {
-  // 카테고리 처리 로직
-}
-
-// 코드 타입 체크
-if (meta.inputType === "code") {
-  // 코드 처리 로직
-}
-
-// 필터링
-const categoryColumns = Object.entries(columnMeta)
-  .filter(([_, meta]) => meta.inputType === "category")
-  .map(([columnName, _]) => columnName);
-```
-
-### ❌ webType 사용 (금지)
-
-```typescript
-// ❌ 절대 사용 금지!
-if (columnMeta.webType === "category") { ... }
-
-// ❌ 이것도 금지!
-const categoryColumns = columns.filter(col => col.webType === "category");
-```
-
----
-
-## API에서 inputType 가져오기
-
-### Backend API
-
-```typescript
-// 컬럼 입력 타입 정보 가져오기
-const inputTypes = await tableTypeApi.getColumnInputTypes(tableName);
-
-// inputType 맵 생성
-const inputTypeMap: Record<string, string> = {};
-inputTypes.forEach((col: any) => {
-  inputTypeMap[col.columnName] = col.inputType;
-});
-```
-
-### columnMeta 구조
-
-```typescript
-interface ColumnMeta {
-  webType?: string; // 레거시, 사용 금지
-  codeCategory?: string;
-  inputType?: string; // ✅ 반드시 이것 사용!
-}
-
-const columnMeta: Record<string, ColumnMeta> = {
-  material: {
-    webType: "category", // 무시
-    codeCategory: "",
-    inputType: "category", // ✅ 이것만 사용
-  },
-};
-```
-
----
-
-## 캐시 사용 시 주의사항
-
-### ❌ 잘못된 캐시 처리 (inputType 누락)
-
-```typescript
-const cached = tableColumnCache.get(cacheKey);
-if (cached) {
-  const meta: Record<string, ColumnMeta> = {};
-
-  cached.columns.forEach((col: any) => {
-    meta[col.columnName] = {
-      webType: col.webType,
-      codeCategory: col.codeCategory,
-      // ❌ inputType 누락!
-    };
-  });
-}
-```
-
-### ✅ 올바른 캐시 처리 (inputType 포함)
-
-```typescript
-const cached = tableColumnCache.get(cacheKey);
-if (cached) {
-  const meta: Record<string, ColumnMeta> = {};
-
-  // 캐시된 inputTypes 맵 생성
-  const inputTypeMap: Record<string, string> = {};
-  if (cached.inputTypes) {
-    cached.inputTypes.forEach((col: any) => {
-      inputTypeMap[col.columnName] = col.inputType;
-    });
-  }
-
-  cached.columns.forEach((col: any) => {
-    meta[col.columnName] = {
-      webType: col.webType,
-      codeCategory: col.codeCategory,
-      inputType: inputTypeMap[col.columnName], // ✅ inputType 포함!
-    };
-  });
-}
-```
-
----
-
-## 주요 inputType 종류
-
-| inputType  | 설명             | 사용 예시          |
-| ---------- | ---------------- | ------------------ |
-| `text`     | 일반 텍스트 입력 | 이름, 설명 등      |
-| `number`   | 숫자 입력        | 금액, 수량 등      |
-| `date`     | 날짜 입력        | 생성일, 수정일 등  |
-| `datetime` | 날짜+시간 입력   | 타임스탬프 등      |
-| `category` | 카테고리 선택    | 분류, 상태 등      |
-| `code`     | 공통 코드 선택   | 코드 마스터 데이터 |
-| `boolean`  | 예/아니오        | 활성화 여부 등     |
-| `email`    | 이메일 입력      | 이메일 주소        |
-| `url`      | URL 입력         | 웹사이트 주소      |
-| `image`    | 이미지 업로드    | 프로필 사진 등     |
-| `file`     | 파일 업로드      | 첨부파일 등        |
-
----
-
-## 실제 적용 사례
-
-### 1. TableListComponent - 카테고리 매핑 로드
-
-```typescript
-// ✅ inputType으로 카테고리 컬럼 필터링
-const categoryColumns = Object.entries(columnMeta)
-  .filter(([_, meta]) => meta.inputType === "category")
-  .map(([columnName, _]) => columnName);
-
-// 각 카테고리 컬럼의 값 목록 조회
-for (const columnName of categoryColumns) {
-  const response = await apiClient.get(
-    `/table-categories/${tableName}/${columnName}/values`
-  );
-  // 매핑 처리...
-}
-```
-
-### 2. InteractiveDataTable - 셀 값 렌더링
-
-```typescript
-// ✅ inputType으로 렌더링 분기
-const inputType = columnMeta[column.columnName]?.inputType;
-
-switch (inputType) {
-  case "category":
-    // 카테고리 배지 렌더링
-    return <Badge>{categoryLabel}</Badge>;
-
-  case "code":
-    // 코드명 표시
-    return codeName;
-
-  case "date":
-    // 날짜 포맷팅
-    return formatDate(value);
-
-  default:
-    return value;
-}
-```
-
-### 3. 검색 필터 생성
-
-```typescript
-// ✅ inputType에 따라 다른 검색 UI 제공
-const renderSearchInput = (column: ColumnConfig) => {
-  const inputType = columnMeta[column.columnName]?.inputType;
-
-  switch (inputType) {
-    case "category":
-      return <CategorySelect column={column} />;
-
-    case "code":
-      return <CodeSelect column={column} />;
-
-    case "date":
-      return <DateRangePicker column={column} />;
-
-    case "number":
-      return <NumberRangeInput column={column} />;
-
-    default:
-      return <TextInput column={column} />;
-  }
-};
-```
-
----
-
-## 마이그레이션 체크리스트
-
-기존 코드에서 `webType`을 `inputType`으로 전환할 때:
-
-- [ ] `webType` 참조를 모두 `inputType`으로 변경
-- [ ] API 호출 시 `getColumnInputTypes()` 포함 확인
-- [ ] 캐시 사용 시 `cached.inputTypes` 매핑 확인
-- [ ] 타입 정의에서 `inputType` 필드 포함
-- [ ] 조건문에서 `inputType` 체크로 변경
-- [ ] 테스트 실행하여 정상 동작 확인
-
----
-
-## 디버깅 팁
-
-### inputType이 undefined인 경우
-
-```typescript
-// 디버깅 로그 추가
-console.log("columnMeta:", columnMeta);
-console.log("inputType:", columnMeta[columnName]?.inputType);
-
-// 체크 포인트:
-// 1. getColumnInputTypes() 호출 확인
-// 2. inputTypeMap 생성 확인
-// 3. meta 객체에 inputType 할당 확인
-// 4. 캐시 사용 시 cached.inputTypes 확인
-```
-
-### webType만 있고 inputType이 없는 경우
-
-```typescript
-// ❌ 잘못된 데이터 구조
-{
-  material: {
-    webType: "category",
-    codeCategory: "",
-    // inputType 누락!
-  }
-}
-
-// ✅ 올바른 데이터 구조
-{
-  material: {
-    webType: "category",    // 레거시, 무시됨
-    codeCategory: "",
-    inputType: "category"   // ✅ 필수!
-  }
-}
-```
-
----
-
-## 참고 자료
-
-- **컴포넌트**: `/frontend/lib/registry/components/table-list/TableListComponent.tsx`
-- **API 클라이언트**: `/frontend/lib/api/tableType.ts`
-- **타입 정의**: `/frontend/types/table.ts`
-
----
-
-## 요약
-
-1. **항상 `inputType` 사용**, `webType` 사용 금지
-2. **API에서 `getColumnInputTypes()` 호출** 필수
-3. **캐시 사용 시 `inputTypes` 포함** 확인
-4. **디버깅 시 `inputType` 값 확인**
-5. **기존 코드 마이그레이션** 시 체크리스트 활용

frontend/components/admin/MenuManagement.tsx

@@ -22,7 +22,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { useMenu } from "@/contexts/MenuContext";
-import { useMenuManagementText, setTranslationCache, getMenuTextSync } from "@/lib/utils/multilang";
+import { useMenuManagementText, setTranslationCache } from "@/lib/utils/multilang";
 import { useMultiLang } from "@/hooks/useMultiLang";
 import { apiClient } from "@/lib/api/client";
 
@@ -545,9 +545,9 @@ export const MenuManagement: React.FC = () => {
     // uiTexts에서 번역 텍스트 찾기
     let text = uiTexts[key];
 
-    // uiTexts에 없으면 getMenuTextSync로 기본 한글 텍스트 가져오기
+    // uiTexts에 없으면 fallback 또는 키 사용
     if (!text) {
-      text = getMenuTextSync(key, userLang) || fallback || key;
+      text = fallback || key;
     }
 
     // 파라미터 치환

frontend/components/admin/MenuTable.tsx

@@ -7,7 +7,7 @@ import { Badge } from "@/components/ui/badge";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { toast } from "sonner";
 
-import { MENU_MANAGEMENT_KEYS, getMenuTextSync } from "@/lib/utils/multilang";
+import { MENU_MANAGEMENT_KEYS } from "@/lib/utils/multilang";
 
 interface MenuTableProps {
   menus: MenuItem[];
@@ -39,8 +39,7 @@ export const MenuTable: React.FC<MenuTableProps> = ({
 }) => {
   // 다국어 텍스트 가져오기 함수
   const getText = (key: string, fallback?: string): string => {
-    // uiTexts에서 먼저 찾고, 없으면 기본 한글 텍스트를 가져옴
+    return uiTexts[key] || fallback || key;
-    return uiTexts[key] || getMenuTextSync(key, "KR") || fallback || key;
   };
 
   // 다국어 텍스트 표시 함수 (기본값 처리)

frontend/components/admin/RoleDeleteModal.tsx

@@ -133,7 +133,7 @@ export function RoleDeleteModal({ isOpen, onClose, onSuccess, role }: RoleDelete
           )}
         </div>
 
-        <ResizableDialogFooter className="gap-2 sm:gap-0">
+        <DialogFooter className="gap-2 sm:gap-0">
           <Button
             variant="outline"
             onClick={onClose}

frontend/components/admin/RoleFormModal.tsx

@@ -359,7 +359,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
           )}
         </div>
 
-        <ResizableDialogFooter className="gap-2 sm:gap-0">
+        <DialogFooter className="gap-2 sm:gap-0">
           <Button
             variant="outline"
             onClick={onClose}

frontend/components/screen/InteractiveDataTable.tsx

@@ -144,8 +144,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const [filteredData, setFilteredData] = useState<any[]>([]); // 필터링된 데이터
   const [columnLabels, setColumnLabels] = useState<Record<string, string>>({}); // 컬럼명 -> 라벨 매핑
 
-  // 카테고리 값 매핑 캐시 (컬럼명 -> {코드 -> {라벨, 색상}})
+  // 카테고리 값 매핑 캐시 (컬럼명 -> {코드 -> 라벨})
-  const [categoryMappings, setCategoryMappings] = useState<Record<string, Record<string, { label: string; color?: string }>>>({});
+  const [categoryMappings, setCategoryMappings] = useState<Record<string, Record<string, string>>>({});
 
   // 공통코드 옵션 가져오기
   const loadCodeOptions = useCallback(
@@ -208,7 +208,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         if (!categoryColumns || categoryColumns.length === 0) return;
 
         // 각 카테고리 컬럼의 값 목록 조회
-        const mappings: Record<string, Record<string, { label: string; color?: string }>> = {};
+        const mappings: Record<string, Record<string, string>> = {};
 
         for (const col of categoryColumns) {
           try {
@@ -217,23 +217,18 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             );
 
             if (response.data.success && response.data.data) {
-              // valueCode -> {label, color} 매핑 생성
+              // valueCode -> valueLabel 매핑 생성
-              const mapping: Record<string, { label: string; color?: string }> = {};
+              const mapping: Record<string, string> = {};
               response.data.data.forEach((item: any) => {
-                mapping[item.valueCode] = {
+                mapping[item.valueCode] = item.valueLabel;
-                  label: item.valueLabel,
-                  color: item.color,
-                };
               });
               mappings[col.columnName] = mapping;
-              console.log(`✅ 카테고리 매핑 로드 성공 [${col.columnName}]:`, mapping);
             }
           } catch (error) {
-            console.error(`❌ 카테고리 값 로드 실패 [${col.columnName}]:`, error);
+            // 카테고리 값 로드 실패 시 무시
           }
         }
 
-        console.log("📊 전체 카테고리 매핑:", mappings);
         setCategoryMappings(mappings);
       } catch (error) {
         console.error("카테고리 매핑 로드 실패:", error);
@@ -1916,27 +1911,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     // 실제 웹 타입으로 스위치 (input_type="category"도 포함됨)
     switch (actualWebType) {
       case "category": {
-        // 카테고리 타입: 배지로 표시
+        // 카테고리 타입: 코드값 -> 라벨로 변환
-        if (!value) return "";
-        
         const mapping = categoryMappings[column.columnName];
-        const categoryData = mapping?.[String(value)];
+        if (mapping && value) {
-        
+          const label = mapping[String(value)];
-        // 매핑 데이터가 있으면 라벨과 색상 사용, 없으면 코드값과 기본색상
+          return label || String(value);
-        const displayLabel = categoryData?.label || String(value);
+        }
-        const displayColor = categoryData?.color || "#64748b"; // 기본 slate 색상
+        return String(value || "");
-        
-        return (
-          <Badge 
-            style={{ 
-              backgroundColor: displayColor,
-              borderColor: displayColor
-            }} 
-            className="text-white"
-          >
-            {displayLabel}
-          </Badge>
-        );
       }
 
       case "date":

frontend/components/table-category/CategoryValueAddDialog.tsx

@@ -11,33 +11,9 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
 import { TableCategoryValue } from "@/types/tableCategoryValue";
 
-// 기본 색상 팔레트
-const DEFAULT_COLORS = [
-  "#ef4444", // red
-  "#f97316", // orange
-  "#f59e0b", // amber
-  "#eab308", // yellow
-  "#84cc16", // lime
-  "#22c55e", // green
-  "#10b981", // emerald
-  "#14b8a6", // teal
-  "#06b6d4", // cyan
-  "#0ea5e9", // sky
-  "#3b82f6", // blue
-  "#6366f1", // indigo
-  "#8b5cf6", // violet
-  "#a855f7", // purple
-  "#d946ef", // fuchsia
-  "#ec4899", // pink
-  "#64748b", // slate
-  "#6b7280", // gray
-];
-
 interface CategoryValueAddDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -50,7 +26,6 @@ export const CategoryValueAddDialog: React.FC<
 > = ({ open, onOpenChange, onAdd, columnLabel }) => {
   const [valueLabel, setValueLabel] = useState("");
   const [description, setDescription] = useState("");
-  const [color, setColor] = useState("#3b82f6");
 
   // 라벨에서 코드 자동 생성
   const generateCode = (label: string): string => {
@@ -84,14 +59,13 @@ export const CategoryValueAddDialog: React.FC<
       valueCode,
       valueLabel: valueLabel.trim(),
       description: description.trim(),
-      color: color,
+      color: "#3b82f6",
       isDefault: false,
     });
 
     // 초기화
     setValueLabel("");
     setDescription("");
-    setColor("#3b82f6");
   };
 
   return (
@@ -107,57 +81,24 @@ export const CategoryValueAddDialog: React.FC<
         </DialogHeader>
 
         <div className="space-y-3 sm:space-y-4">
-          <div>
-            <Label htmlFor="valueLabel" className="text-xs sm:text-sm">
-              이름
-            </Label>
           <Input
             id="valueLabel"
-              placeholder="예: 개발, 긴급, 진행중"
+            placeholder="이름 (예: 개발, 긴급, 진행중)"
             value={valueLabel}
             onChange={(e) => setValueLabel(e.target.value)}
-              className="h-8 text-xs sm:h-10 sm:text-sm mt-1.5"
+            className="h-8 text-xs sm:h-10 sm:text-sm"
             autoFocus
           />
-          </div>
 
-          <div>
-            <Label className="text-xs sm:text-sm">배지 색상</Label>
-            <div className="mt-1.5 flex items-center gap-3">
-              <div className="grid grid-cols-9 gap-2">
-                {DEFAULT_COLORS.map((c) => (
-                  <button
-                    key={c}
-                    type="button"
-                    onClick={() => setColor(c)}
-                    className={`h-7 w-7 rounded-md border-2 transition-all ${
-                      color === c ? "border-foreground scale-110" : "border-transparent hover:scale-105"
-                    }`}
-                    style={{ backgroundColor: c }}
-                    title={c}
-                  />
-                ))}
-              </div>
-              <Badge style={{ backgroundColor: color, borderColor: color }} className="text-white">
-                미리보기
-              </Badge>
-            </div>
-          </div>
-
-          <div>
-            <Label htmlFor="description" className="text-xs sm:text-sm">
-              설명 (선택사항)
-            </Label>
           <Textarea
             id="description"
-              placeholder="설명을 입력하세요"
+            placeholder="설명 (선택사항)"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
-              className="text-xs sm:text-sm mt-1.5"
+            className="text-xs sm:text-sm"
             rows={3}
           />
         </div>
-        </div>
 
         <DialogFooter className="gap-2 sm:gap-0">
           <Button

frontend/components/table-category/CategoryValueEditDialog.tsx

@@ -11,9 +11,7 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
 import { TableCategoryValue } from "@/types/tableCategoryValue";
 
 interface CategoryValueEditDialogProps {
@@ -24,39 +22,15 @@ interface CategoryValueEditDialogProps {
   columnLabel: string;
 }
 
-// 기본 색상 팔레트
-const DEFAULT_COLORS = [
-  "#ef4444", // red
-  "#f97316", // orange
-  "#f59e0b", // amber
-  "#eab308", // yellow
-  "#84cc16", // lime
-  "#22c55e", // green
-  "#10b981", // emerald
-  "#14b8a6", // teal
-  "#06b6d4", // cyan
-  "#0ea5e9", // sky
-  "#3b82f6", // blue
-  "#6366f1", // indigo
-  "#8b5cf6", // violet
-  "#a855f7", // purple
-  "#d946ef", // fuchsia
-  "#ec4899", // pink
-  "#64748b", // slate
-  "#6b7280", // gray
-];
-
 export const CategoryValueEditDialog: React.FC<
   CategoryValueEditDialogProps
 > = ({ open, onOpenChange, value, onUpdate, columnLabel }) => {
   const [valueLabel, setValueLabel] = useState(value.valueLabel);
   const [description, setDescription] = useState(value.description || "");
-  const [color, setColor] = useState(value.color || "#3b82f6");
 
   useEffect(() => {
     setValueLabel(value.valueLabel);
     setDescription(value.description || "");
-    setColor(value.color || "#3b82f6");
   }, [value]);
 
   const handleSubmit = () => {
@@ -67,7 +41,6 @@ export const CategoryValueEditDialog: React.FC<
     onUpdate(value.valueId!, {
       valueLabel: valueLabel.trim(),
       description: description.trim(),
-      color: color,
     });
   };
 
@@ -84,57 +57,24 @@ export const CategoryValueEditDialog: React.FC<
         </DialogHeader>
 
         <div className="space-y-3 sm:space-y-4">
-          <div>
-            <Label htmlFor="valueLabel" className="text-xs sm:text-sm">
-              이름
-            </Label>
           <Input
             id="valueLabel"
-              placeholder="예: 개발, 긴급, 진행중"
+            placeholder="이름 (예: 개발, 긴급, 진행중)"
             value={valueLabel}
             onChange={(e) => setValueLabel(e.target.value)}
-              className="h-8 text-xs sm:h-10 sm:text-sm mt-1.5"
+            className="h-8 text-xs sm:h-10 sm:text-sm"
             autoFocus
           />
-          </div>
 
-          <div>
-            <Label className="text-xs sm:text-sm">배지 색상</Label>
-            <div className="mt-1.5 flex items-center gap-3">
-              <div className="grid grid-cols-9 gap-2">
-                {DEFAULT_COLORS.map((c) => (
-                  <button
-                    key={c}
-                    type="button"
-                    onClick={() => setColor(c)}
-                    className={`h-7 w-7 rounded-md border-2 transition-all ${
-                      color === c ? "border-foreground scale-110" : "border-transparent hover:scale-105"
-                    }`}
-                    style={{ backgroundColor: c }}
-                    title={c}
-                  />
-                ))}
-              </div>
-              <Badge style={{ backgroundColor: color, borderColor: color }} className="text-white">
-                미리보기
-              </Badge>
-            </div>
-          </div>
-
-          <div>
-            <Label htmlFor="description" className="text-xs sm:text-sm">
-              설명 (선택사항)
-            </Label>
           <Textarea
             id="description"
-              placeholder="설명을 입력하세요"
+            placeholder="설명 (선택사항)"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
-              className="text-xs sm:text-sm mt-1.5"
+            className="text-xs sm:text-sm"
             rows={3}
           />
         </div>
-        </div>
 
         <DialogFooter className="gap-2 sm:gap-0">
           <Button

frontend/components/table-category/CategoryValueManager.tsx

@@ -49,33 +49,25 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
   const [editingValue, setEditingValue] = useState<TableCategoryValue | null>(
     null
   );
-  const [showInactive, setShowInactive] = useState(false); // 비활성 항목 표시 옵션 (기본: 숨김)
 
   // 카테고리 값 로드
   useEffect(() => {
     loadCategoryValues();
   }, [tableName, columnName]);
 
-  // 검색 필터링 + 비활성 필터링
+  // 검색 필터링
   useEffect(() => {
-    let filtered = values;
-
-    // 비활성 항목 필터링 (기본: 활성만 표시, 체크하면 비활성도 표시)
-    if (!showInactive) {
-      filtered = filtered.filter((v) => v.isActive !== false);
-    }
-
-    // 검색어 필터링
     if (searchQuery) {
-      filtered = filtered.filter(
+      const filtered = values.filter(
         (v) =>
           v.valueCode.toLowerCase().includes(searchQuery.toLowerCase()) ||
           v.valueLabel.toLowerCase().includes(searchQuery.toLowerCase())
       );
-    }
-
       setFilteredValues(filtered);
-  }, [searchQuery, values, showInactive]);
+    } else {
+      setFilteredValues(values);
+    }
+  }, [searchQuery, values]);
 
   const loadCategoryValues = async () => {
     setIsLoading(true);
@@ -272,28 +264,11 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
               총 {filteredValues.length}개 항목
             </p>
           </div>
-          <div className="flex items-center gap-3">
-            {/* 비활성 항목 표시 옵션 */}
-            <div className="flex items-center gap-2">
-              <Checkbox
-                id="show-inactive"
-                checked={showInactive}
-                onCheckedChange={(checked) => setShowInactive(checked as boolean)}
-              />
-              <label
-                htmlFor="show-inactive"
-                className="text-sm text-muted-foreground cursor-pointer whitespace-nowrap"
-              >
-                비활성 항목 표시
-              </label>
-            </div>
-            
           <Button onClick={() => setIsAddDialogOpen(true)} size="sm">
             <Plus className="mr-2 h-4 w-4" />
             새 값 추가
           </Button>
         </div>
-        </div>
 
         {/* 검색바 */}
         <div className="relative">
@@ -319,15 +294,10 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
           </div>
         ) : (
           <div className="space-y-2">
-            {filteredValues.map((value) => {
+            {filteredValues.map((value) => (
-              const isInactive = value.isActive === false;
-              
-              return (
               <div
                 key={value.valueId}
-                  className={`flex items-center gap-3 rounded-md border bg-card p-3 transition-colors hover:bg-accent ${
+                className="flex items-center gap-3 rounded-md border bg-card p-3 transition-colors hover:bg-accent"
-                    isInactive ? "opacity-50" : ""
-                  }`}
               >
                 <Checkbox
                   checked={selectedValueIds.includes(value.valueId!)}
@@ -335,38 +305,27 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
                 />
 
                 <div className="flex flex-1 items-center gap-2">
-                    {/* 색상 표시 (앞쪽으로 이동) */}
+                  <Badge variant="outline" className="text-xs">
-                    {value.color && (
+                    {value.valueCode}
-                      <div
+                  </Badge>
-                        className="h-4 w-4 rounded-full border flex-shrink-0"
+                  <span className="text-sm font-medium">
-                        style={{ backgroundColor: value.color }}
-                      />
-                    )}
-                    
-                    {/* 라벨 */}
-                    <span className={`text-sm font-medium ${isInactive ? "line-through" : ""}`}>
                     {value.valueLabel}
                   </span>
-                    
-                    {/* 설명 */}
                   {value.description && (
                     <span className="text-xs text-muted-foreground">
                       - {value.description}
                     </span>
                   )}
-                    
-                    {/* 기본값 배지 */}
                   {value.isDefault && (
                     <Badge variant="secondary" className="text-[10px]">
                       기본값
                     </Badge>
                   )}
-                    
+                  {value.color && (
-                    {/* 비활성 배지 */}
+                    <div
-                    {isInactive && (
+                      className="h-4 w-4 rounded-full border"
-                      <Badge variant="outline" className="text-[10px] text-muted-foreground">
+                      style={{ backgroundColor: value.color }}
-                        비활성
+                    />
-                      </Badge>
                   )}
                 </div>
 
@@ -401,8 +360,7 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
                   </Button>
                 </div>
               </div>
-              );
+            ))}
-            })}
           </div>
         )}
       </div>

frontend/components/ui/resizable-dialog.tsx

@@ -87,7 +87,7 @@ const ResizableDialogContent = React.forwardRef<
     if (!stableIdRef.current) {
       if (modalId) {
         stableIdRef.current = modalId;
-        // // console.log("✅ ResizableDialog - 명시적 modalId 사용:", modalId);
+        console.log("✅ ResizableDialog - 명시적 modalId 사용:", modalId);
       } else {
         // className 기반 ID 생성
         if (className) {
@@ -95,7 +95,10 @@ const ResizableDialogContent = React.forwardRef<
             return ((acc << 5) - acc) + char.charCodeAt(0);
           }, 0);
           stableIdRef.current = `modal-${Math.abs(hash).toString(36)}`;
-          // console.log("🔄 ResizableDialog - className 기반 ID 생성:", { className, generatedId: stableIdRef.current });
+          console.log("🔄 ResizableDialog - className 기반 ID 생성:", {
+            className,
+            generatedId: stableIdRef.current,
+          });
         } else if (userStyle) {
           // userStyle 기반 ID 생성
           const styleStr = JSON.stringify(userStyle);
@@ -103,11 +106,14 @@ const ResizableDialogContent = React.forwardRef<
             return ((acc << 5) - acc) + char.charCodeAt(0);
           }, 0);
           stableIdRef.current = `modal-${Math.abs(hash).toString(36)}`;
-          // console.log("🔄 ResizableDialog - userStyle 기반 ID 생성:", { userStyle, generatedId: stableIdRef.current });
+          console.log("🔄 ResizableDialog - userStyle 기반 ID 생성:", {
+            userStyle,
+            generatedId: stableIdRef.current,
+          });
         } else {
           // 기본 ID
           stableIdRef.current = 'modal-default';
-          // console.log("⚠️ ResizableDialog - 기본 ID 사용 (모든 모달이 같은 크기 공유)");
+          console.log("⚠️ ResizableDialog - 기본 ID 사용 (모든 모달이 같은 크기 공유)");
         }
       }
     }
@@ -165,16 +171,22 @@ const ResizableDialogContent = React.forwardRef<
     const [wasOpen, setWasOpen] = React.useState(false);
     
     React.useEffect(() => {
-      // console.log("🔍 모달 상태 변화 감지:", { actualOpen, wasOpen, externalOpen, contextOpen: context.open, effectiveModalId });
+      console.log("🔍 모달 상태 변화 감지:", { 
+        actualOpen, 
+        wasOpen, 
+        externalOpen, 
+        contextOpen: context.open,
+        effectiveModalId 
+      });
       
       if (actualOpen && !wasOpen) {
         // 모달이 방금 열림
-        // console.log("🔓 모달 열림 감지, 초기화 리셋:", { effectiveModalId });
+        console.log("🔓 모달 열림 감지, 초기화 리셋:", { effectiveModalId });
         setIsInitialized(false);
         setWasOpen(true);
       } else if (!actualOpen && wasOpen) {
         // 모달이 방금 닫힘
-        // console.log("🔒 모달 닫힘 감지:", { effectiveModalId });
+        console.log("🔒 모달 닫힘 감지:", { effectiveModalId });
         setWasOpen(false);
       }
     }, [actualOpen, wasOpen, effectiveModalId, externalOpen, context.open]);
@@ -182,7 +194,11 @@ const ResizableDialogContent = React.forwardRef<
     // modalId가 변경되면 초기화 리셋 (다른 모달이 열린 경우)
     React.useEffect(() => {
       if (effectiveModalId !== lastModalId) {
-        // console.log("🔄 모달 ID 변경 감지, 초기화 리셋:", { 이전: lastModalId, 현재: effectiveModalId, isInitialized });
+        console.log("🔄 모달 ID 변경 감지, 초기화 리셋:", {
+          이전: lastModalId,
+          현재: effectiveModalId,
+          isInitialized,
+        });
         setIsInitialized(false);
         setUserResized(false); // 사용자 리사이징 플래그도 리셋
         setLastModalId(effectiveModalId);
@@ -191,7 +207,11 @@ const ResizableDialogContent = React.forwardRef<
 
     // 모달이 열릴 때 초기 크기 설정 (localStorage와 내용 크기 중 큰 값 사용)
     React.useEffect(() => {
-      // console.log("🔍 초기 크기 설정 useEffect 실행:", { isInitialized, hasContentRef: !!contentRef.current, effectiveModalId });
+      console.log("🔍 초기 크기 설정 useEffect 실행:", {
+        isInitialized,
+        hasContentRef: !!contentRef.current,
+        effectiveModalId,
+      });
       
       if (!isInitialized) {
         // 내용의 실제 크기 측정 (약간의 지연 후, contentRef가 준비될 때까지 대기)
@@ -211,9 +231,22 @@ const ResizableDialogContent = React.forwardRef<
             contentWidth = contentRef.current.scrollWidth || defaultWidth;
             contentHeight = contentRef.current.scrollHeight || defaultHeight;
             
-            // console.log("📏 모달 내용 크기 측정:", { attempt: attempts, scrollWidth: contentRef.current.scrollWidth, scrollHeight: contentRef.current.scrollHeight, clientWidth: contentRef.current.clientWidth, clientHeight: contentRef.current.clientHeight, contentWidth, contentHeight });
+            console.log("📏 모달 내용 크기 측정:", {
+              attempt: attempts,
+              scrollWidth: contentRef.current.scrollWidth,
+              scrollHeight: contentRef.current.scrollHeight,
+              clientWidth: contentRef.current.clientWidth,
+              clientHeight: contentRef.current.clientHeight,
+              contentWidth,
+              contentHeight,
+            });
           } else {
-            // console.log("⚠️ contentRef 없음, 재시도:", { attempt: attempts, maxAttempts, defaultWidth, defaultHeight });
+            console.log("⚠️ contentRef 없음, 재시도:", { 
+              attempt: attempts, 
+              maxAttempts,
+              defaultWidth, 
+              defaultHeight 
+            });
             
             // contentRef가 아직 없으면 재시도
             if (attempts < maxAttempts) {
@@ -232,7 +265,7 @@ const ResizableDialogContent = React.forwardRef<
             height: Math.max(minHeight, Math.min(maxHeight, Math.max(contentHeight + paddingAndMargin, initialSize.height))),
           };
           
-          // console.log("📐 내용 기반 크기:", contentBasedSize);
+          console.log("📐 내용 기반 크기:", contentBasedSize);
           
           // localStorage에서 저장된 크기 확인
           let finalSize = contentBasedSize;
@@ -242,7 +275,12 @@ const ResizableDialogContent = React.forwardRef<
               const storageKey = `modal_size_${effectiveModalId}_${userId}`;
               const saved = localStorage.getItem(storageKey);
               
-              // console.log("📦 localStorage 확인:", { effectiveModalId, userId, storageKey, saved: saved ? "있음" : "없음" });
+              console.log("📦 localStorage 확인:", {
+                effectiveModalId,
+                userId,
+                storageKey,
+                saved: saved ? "있음" : "없음",
+              });
               
               if (saved) {
                 const parsed = JSON.parse(saved);
@@ -254,22 +292,27 @@ const ResizableDialogContent = React.forwardRef<
                     height: Math.max(minHeight, Math.min(maxHeight, parsed.height)),
                   };
                   
-                  // console.log("💾 사용자가 리사이징한 크기 복원:", savedSize);
+                  console.log("💾 사용자가 리사이징한 크기 복원:", savedSize);
                   
                   // ✅ 중요: 사용자가 명시적으로 리사이징한 경우, 사용자 크기를 우선 사용
                   // (사용자가 의도적으로 작게 만든 것을 존중)
                   finalSize = savedSize;
                   setUserResized(true);
                   
-                  // console.log("✅ 최종 크기 (사용자가 설정한 크기 우선 적용):", { savedSize, contentBasedSize, finalSize, note: "사용자가 리사이징한 크기를 그대로 사용합니다" });
+                  console.log("✅ 최종 크기 (사용자가 설정한 크기 우선 적용):", {
+                    savedSize,
+                    contentBasedSize,
+                    finalSize,
+                    note: "사용자가 리사이징한 크기를 그대로 사용합니다",
+                  });
                 } else {
-                  // console.log("ℹ️ 자동 계산된 크기는 무시, 내용 크기 사용");
+                  console.log("ℹ️ 자동 계산된 크기는 무시, 내용 크기 사용");
                 }
               } else {
-                // console.log("ℹ️ localStorage에 저장된 크기 없음, 내용 크기 사용");
+                console.log("ℹ️ localStorage에 저장된 크기 없음, 내용 크기 사용");
               }
             } catch (error) {
-              // console.error("❌ 모달 크기 복원 실패:", error);
+              console.error("❌ 모달 크기 복원 실패:", error);
             }
           }
           
@@ -341,9 +384,15 @@ const ResizableDialogContent = React.forwardRef<
               userResized: true, // 사용자가 직접 리사이징했음을 표시
             };
             localStorage.setItem(storageKey, JSON.stringify(currentSize));
-            // console.log("💾 localStorage에 크기 저장 (사용자 리사이징):", { effectiveModalId, userId, storageKey, size: currentSize, stateSize: { width: size.width, height: size.height } });
+            console.log("💾 localStorage에 크기 저장 (사용자 리사이징):", {
+              effectiveModalId,
+              userId,
+              storageKey,
+              size: currentSize,
+              stateSize: { width: size.width, height: size.height },
+            });
           } catch (error) {
-            // console.error("❌ 모달 크기 저장 실패:", error);
+            console.error("❌ 모달 크기 저장 실패:", error);
           }
         }
       };

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

@@ -142,14 +142,7 @@ export interface TableListComponentProps {
   onClose?: () => void;
   screenId?: string;
   userId?: string; // 사용자 ID (컬럼 순서 저장용)
-  onSelectedRowsChange?: (
+  onSelectedRowsChange?: (selectedRows: any[], selectedRowsData: any[], sortBy?: string, sortOrder?: "asc" | "desc", columnOrder?: string[], tableDisplayData?: any[]) => void;
-    selectedRows: any[],
-    selectedRowsData: any[],
-    sortBy?: string,
-    sortOrder?: "asc" | "desc",
-    columnOrder?: string[],
-    tableDisplayData?: any[],
-  ) => void;
   onConfigChange?: (config: any) => void;
   refreshKey?: number;
 }
@@ -252,13 +245,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [localPageSize, setLocalPageSize] = useState<number>(tableConfig.pagination?.pageSize || 20);
   const [displayColumns, setDisplayColumns] = useState<ColumnConfig[]>([]);
   const [joinColumnMapping, setJoinColumnMapping] = useState<Record<string, string>>({});
-  const [columnMeta, setColumnMeta] = useState<
+  const [columnMeta, setColumnMeta] = useState<Record<string, { webType?: string; codeCategory?: string }>>({});
-    Record<string, { webType?: string; codeCategory?: string; inputType?: string }>
-  >({});
-  const [categoryMappings, setCategoryMappings] = useState<
-    Record<string, Record<string, { label: string; color?: string }>>
-  >({});
-  const [categoryMappingsKey, setCategoryMappingsKey] = useState(0); // 강제 리렌더링용
   const [searchValues, setSearchValues] = useState<Record<string, any>>({});
   const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
@@ -288,7 +275,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   useEffect(() => {
     if (!tableConfig.selectedTable || !userId) return;
 
-    const userKey = userId || "guest";
+    const userKey = userId || 'guest';
     const storageKey = `table_column_order_${tableConfig.selectedTable}_${userKey}`;
     const savedOrder = localStorage.getItem(storageKey);
 
@@ -326,9 +313,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             tableDisplayStore.setTableData(
               tableConfig.selectedTable,
               initialData,
-              parsedOrder.filter((col) => col !== "__checkbox__"),
+              parsedOrder.filter(col => col !== '__checkbox__'),
               sortColumn,
-              sortDirection,
+              sortDirection
             );
           }
           
@@ -358,22 +345,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       const cached = tableColumnCache.get(cacheKey);
       if (cached && Date.now() - cached.timestamp < TABLE_CACHE_TTL) {
         const labels: Record<string, string> = {};
-        const meta: Record<string, { webType?: string; codeCategory?: string; inputType?: string }> = {};
+        const meta: Record<string, { webType?: string; codeCategory?: string }> = {};
-
-        // 캐시된 inputTypes 맵 생성
-        const inputTypeMap: Record<string, string> = {};
-        if (cached.inputTypes) {
-          cached.inputTypes.forEach((col: any) => {
-            inputTypeMap[col.columnName] = col.inputType;
-          });
-        }
 
         cached.columns.forEach((col: any) => {
           labels[col.columnName] = col.displayName || col.comment || col.columnName;
           meta[col.columnName] = {
             webType: col.webType,
             codeCategory: col.codeCategory,
-            inputType: inputTypeMap[col.columnName], // 캐시된 inputType 사용!
           };
         });
 
@@ -451,135 +429,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
   }, [tableConfig.selectedTable]);
 
-  // ========================================
-  // 카테고리 값 매핑 로드
-  // ========================================
-
-  // 카테고리 컬럼 목록 추출 (useMemo로 최적화)
-  const categoryColumns = useMemo(() => {
-    const cols = Object.entries(columnMeta)
-      .filter(([_, meta]) => meta.inputType === "category")
-      .map(([columnName, _]) => columnName);
-    
-    console.log("🔍 [TableList] 카테고리 컬럼 추출:", {
-      columnMeta,
-      categoryColumns: cols,
-      columnMetaKeys: Object.keys(columnMeta),
-    });
-    
-    return cols;
-  }, [columnMeta]);
-
-  // 카테고리 매핑 로드 (columnMeta 변경 시 즉시 실행)
-  useEffect(() => {
-    const loadCategoryMappings = async () => {
-      console.log("🔄 [TableList] loadCategoryMappings 트리거:", {
-        hasTable: !!tableConfig.selectedTable,
-        table: tableConfig.selectedTable,
-        categoryColumnsLength: categoryColumns.length,
-        categoryColumns,
-        columnMetaKeys: Object.keys(columnMeta),
-      });
-
-      if (!tableConfig.selectedTable) {
-        console.log("⏭️ [TableList] 테이블 선택 안됨, 카테고리 매핑 로드 스킵");
-        return;
-      }
-
-      if (categoryColumns.length === 0) {
-        console.log("⏭️ [TableList] 카테고리 컬럼 없음, 카테고리 매핑 로드 스킵");
-        setCategoryMappings({});
-        return;
-      }
-      
-      console.log("🚀 [TableList] 카테고리 매핑 로드 시작:", {
-        table: tableConfig.selectedTable,
-        categoryColumns,
-        columnMetaKeys: Object.keys(columnMeta),
-      });
-
-      try {
-        const mappings: Record<string, Record<string, { label: string; color?: string }>> = {};
-
-        for (const columnName of categoryColumns) {
-          try {
-            console.log(`📡 [TableList] API 호출 시작 [${columnName}]:`, {
-              url: `/table-categories/${tableConfig.selectedTable}/${columnName}/values`,
-            });
-
-            const apiClient = (await import("@/lib/api/client")).apiClient;
-            const response = await apiClient.get(`/table-categories/${tableConfig.selectedTable}/${columnName}/values`);
-
-            console.log(`📡 [TableList] API 응답 [${columnName}]:`, {
-              success: response.data.success,
-              dataLength: response.data.data?.length,
-              rawData: response.data,
-              items: response.data.data,
-            });
-
-            if (response.data.success && response.data.data && Array.isArray(response.data.data)) {
-              const mapping: Record<string, { label: string; color?: string }> = {};
-              
-              response.data.data.forEach((item: any) => {
-                // valueCode를 문자열로 변환하여 키로 사용
-                const key = String(item.valueCode);
-                mapping[key] = {
-                  label: item.valueLabel,
-                  color: item.color,
-                };
-                console.log(`  🔑 [${columnName}] "${key}" => "${item.valueLabel}" (색상: ${item.color})`);
-              });
-              
-              if (Object.keys(mapping).length > 0) {
-                mappings[columnName] = mapping;
-                console.log(`✅ [TableList] 카테고리 매핑 로드 완료 [${columnName}]:`, {
-                  columnName,
-                  mappingCount: Object.keys(mapping).length,
-                  mappingKeys: Object.keys(mapping),
-                  mapping,
-                });
-              } else {
-                console.warn(`⚠️ [TableList] 매핑 데이터가 비어있음 [${columnName}]`);
-              }
-            } else {
-              console.warn(`⚠️ [TableList] 카테고리 값 없음 [${columnName}]:`, {
-                success: response.data.success,
-                hasData: !!response.data.data,
-                isArray: Array.isArray(response.data.data),
-                response: response.data,
-              });
-            }
-          } catch (error: any) {
-            console.error(`❌ [TableList] 카테고리 값 로드 실패 [${columnName}]:`, {
-              error: error.message,
-              stack: error.stack,
-              response: error.response?.data,
-              status: error.response?.status,
-            });
-          }
-        }
-
-        console.log("📊 [TableList] 전체 카테고리 매핑 설정:", {
-          mappingsCount: Object.keys(mappings).length,
-          mappingsKeys: Object.keys(mappings),
-          mappings,
-        });
-        
-        if (Object.keys(mappings).length > 0) {
-          setCategoryMappings(mappings);
-          setCategoryMappingsKey((prev) => prev + 1);
-          console.log("✅ [TableList] setCategoryMappings 호출 완료");
-        } else {
-          console.warn("⚠️ [TableList] 매핑이 비어있어 상태 업데이트 스킵");
-        }
-      } catch (error) {
-        console.error("❌ [TableList] 카테고리 매핑 로드 실패:", error);
-      }
-    };
-
-    loadCategoryMappings();
-  }, [tableConfig.selectedTable, categoryColumns.length, JSON.stringify(categoryColumns)]); // 더 명확한 의존성
-
   // ========================================
   // 데이터 가져오기
   // ========================================
@@ -736,7 +585,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         const bStr = String(bVal).toLowerCase();
         
         // 자연스러운 정렬 (숫자 포함 문자열)
-        const comparison = aStr.localeCompare(bStr, undefined, { numeric: true, sensitivity: "base" });
+        const comparison = aStr.localeCompare(bStr, undefined, { numeric: true, sensitivity: 'base' });
         return newSortDirection === "desc" ? -comparison : comparison;
       });
       
@@ -765,7 +614,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         columnOrder: columnOrder.length > 0 ? columnOrder : undefined,
         tableDisplayDataCount: reorderedData.length,
         firstRowAfterSort: reorderedData[0]?.[newSortColumn],
-        lastRowAfterSort: reorderedData[reorderedData.length - 1]?.[newSortColumn],
+        lastRowAfterSort: reorderedData[reorderedData.length - 1]?.[newSortColumn]
       });
       onSelectedRowsChange(
         Array.from(selectedRows), 
@@ -773,20 +622,18 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         newSortColumn, 
         newSortDirection,
         columnOrder.length > 0 ? columnOrder : undefined,
-        reorderedData,
+        reorderedData
       );
       
       // 전역 저장소에 정렬된 데이터 저장
       if (tableConfig.selectedTable) {
-        const cleanColumnOrder = (
+        const cleanColumnOrder = (columnOrder.length > 0 ? columnOrder : visibleColumns.map(c => c.columnName)).filter(col => col !== '__checkbox__');
-          columnOrder.length > 0 ? columnOrder : visibleColumns.map((c) => c.columnName)
-        ).filter((col) => col !== "__checkbox__");
         tableDisplayStore.setTableData(
           tableConfig.selectedTable,
           reorderedData,
           cleanColumnOrder,
           newSortColumn,
-          newSortDirection,
+          newSortDirection
         );
       }
     } else {
@@ -927,16 +774,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     // columnOrder 상태가 있으면 그 순서대로 정렬
     if (columnOrder.length > 0) {
       const orderedCols = columnOrder
-        .map((colName) => cols.find((c) => c.columnName === colName))
+        .map(colName => cols.find(c => c.columnName === colName))
         .filter(Boolean) as ColumnConfig[];
       
       // columnOrder에 없는 새로운 컬럼들 추가
-      const remainingCols = cols.filter((c) => !columnOrder.includes(c.columnName));
+      const remainingCols = cols.filter(c => !columnOrder.includes(c.columnName));
       
       console.log("🔄 columnOrder 기반 정렬:", { 
         columnOrder, 
         orderedColsCount: orderedCols.length, 
-        remainingColsCount: remainingCols.length,
+        remainingColsCount: remainingCols.length 
       });
       
       return [...orderedCols, ...remainingCols];
@@ -952,7 +799,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     console.log("🔍 [컬럼 순서 전달 useEffect] 실행됨:", {
       hasCallback: !!onSelectedRowsChange,
       visibleColumnsLength: visibleColumns.length,
-      visibleColumnsNames: visibleColumns.map((c) => c.columnName),
+      visibleColumnsNames: visibleColumns.map(c => c.columnName),
     });
 
     if (!onSelectedRowsChange) {
@@ -965,7 +812,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       return;
     }
 
-    const currentColumnOrder = visibleColumns.map((col) => col.columnName).filter((name) => name !== "__checkbox__"); // 체크박스 컬럼 제외
+    const currentColumnOrder = visibleColumns
+      .map(col => col.columnName)
+      .filter(name => name !== "__checkbox__"); // 체크박스 컬럼 제외
 
     console.log("🔍 [컬럼 순서] 체크박스 제외 후:", currentColumnOrder);
 
@@ -1011,9 +860,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       sortColumn,
       sortDirection,
       currentColumnOrder,
-      reorderedData,
+      reorderedData
     );
-  }, [visibleColumns.length, visibleColumns.map((c) => c.columnName).join(",")]); // 의존성 단순화
+  }, [visibleColumns.length, visibleColumns.map(c => c.columnName).join(",")]); // 의존성 단순화
 
   const getColumnWidth = (column: ColumnConfig) => {
     if (column.columnName === "__checkbox__") return 50;
@@ -1087,51 +936,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           <img 
             src={imageUrl} 
             alt="이미지" 
-            className="h-10 w-10 rounded object-cover"
+            className="h-10 w-10 object-cover rounded"
             onError={(e) => {
-              e.currentTarget.src =
+              e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23f3f4f6'/%3E%3C/svg%3E";
-                "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23f3f4f6'/%3E%3C/svg%3E";
             }}
           />
         );
       }
       
-      // 카테고리 타입: 배지로 표시
-      if (inputType === "category") {
-        if (!value) return "";
-
-        const mapping = categoryMappings[column.columnName];
-        const categoryData = mapping?.[String(value)];
-
-        console.log(`🎨 [카테고리 배지] ${column.columnName}:`, {
-          value,
-          stringValue: String(value),
-          mapping,
-          categoryData,
-          hasMapping: !!mapping,
-          hasCategoryData: !!categoryData,
-          allCategoryMappings: categoryMappings, // 전체 매핑 확인
-          categoryMappingsKeys: Object.keys(categoryMappings),
-        });
-
-        // 매핑 데이터가 있으면 라벨과 색상 사용, 없으면 코드값과 기본색상
-        const displayLabel = categoryData?.label || String(value);
-        const displayColor = categoryData?.color || "#64748b"; // 기본 slate 색상
-
-        const { Badge } = require("@/components/ui/badge");
-        return (
-          <Badge
-            style={{
-              backgroundColor: displayColor,
-              borderColor: displayColor,
-            }}
-            className="text-white"
-          >
-            {displayLabel}
-          </Badge>
-        );
-      }
-
       // 코드 타입: 코드 값 → 코드명 변환
       if (inputType === "code" && meta?.codeCategory && value) {
         try {
@@ -1188,7 +1000,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           return String(value);
       }
     },
-    [columnMeta, optimizedConvertCode, categoryMappings],
+    [columnMeta, optimizedConvertCode],
   );
 
   // ========================================
@@ -1307,19 +1119,18 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   }, []);
 
   // 사용자 옵션 저장 핸들러
-  const handleTableOptionsSave = useCallback(
+  const handleTableOptionsSave = useCallback((config: {
-    (config: {
     columns: Array<{ columnName: string; label: string; visible: boolean; width?: number; frozen?: boolean }>;
     showGridLines: boolean;
     viewMode: "table" | "card" | "grouped-card";
   }) => {
     // 컬럼 순서 업데이트
-      const newColumnOrder = config.columns.map((col) => col.columnName);
+    const newColumnOrder = config.columns.map(col => col.columnName);
     setColumnOrder(newColumnOrder);
 
     // 컬럼 너비 업데이트
     const newWidths: Record<string, number> = {};
-      config.columns.forEach((col) => {
+    config.columns.forEach(col => {
       if (col.width) {
         newWidths[col.columnName] = col.width;
       }
@@ -1327,7 +1138,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     setColumnWidths(newWidths);
 
     // 틀고정 컬럼 업데이트
-      const newFrozenColumns = config.columns.filter((col) => col.frozen).map((col) => col.columnName);
+    const newFrozenColumns = config.columns.filter(col => col.frozen).map(col => col.columnName);
     setFrozenColumns(newFrozenColumns);
 
     // 그리드선 표시 업데이트
@@ -1337,8 +1148,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     setViewMode(config.viewMode);
 
     // 컬럼 표시/숨기기 업데이트
-      const newDisplayColumns = displayColumns.map((col) => {
+    const newDisplayColumns = displayColumns.map(col => {
-        const configCol = config.columns.find((c) => c.columnName === col.columnName);
+      const configCol = config.columns.find(c => c.columnName === col.columnName);
       if (configCol) {
         return { ...col, visible: configCol.visible };
       }
@@ -1347,9 +1158,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     setDisplayColumns(newDisplayColumns);
 
     toast.success("테이블 옵션이 저장되었습니다");
-    },
+  }, [displayColumns]);
-    [displayColumns],
-  );
 
   // 그룹 펼치기/접기 토글
   const toggleGroupCollapse = useCallback((groupKey: string) => {
@@ -1498,9 +1307,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     if (!tableConfig.pagination?.enabled || isDesignMode) return null;
 
     return (
-      <div className="border-border bg-background relative flex h-14 w-full flex-shrink-0 items-center justify-center border-t-2 px-4 sm:h-[60px] sm:px-6">
+      <div
+        className="w-full h-14 flex items-center justify-center relative border-t-2 border-border bg-background px-4 flex-shrink-0 sm:h-[60px] sm:px-6"
+      >
         {/* 중앙 페이지네이션 컨트롤 */}
-        <div className="flex items-center gap-2 sm:gap-4">
+        <div
+          className="flex items-center gap-2 sm:gap-4"
+        >
           <Button
             variant="outline"
             size="sm"
@@ -1520,7 +1333,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             <ChevronLeft className="h-3 w-3 sm:h-4 sm:w-4" />
           </Button>
 
-          <span className="text-foreground min-w-[60px] text-center text-xs font-medium sm:min-w-[80px] sm:text-sm">
+          <span className="text-xs font-medium text-foreground min-w-[60px] text-center sm:text-sm sm:min-w-[80px]">
             {currentPage} / {totalPages || 1}
           </span>
 
@@ -1543,7 +1356,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             <ChevronsRight className="h-3 w-3 sm:h-4 sm:w-4" />
           </Button>
 
-          <span className="text-muted-foreground ml-2 text-[10px] sm:ml-4 sm:text-xs">
+          <span className="text-[10px] text-muted-foreground ml-2 sm:text-xs sm:ml-4">
             전체 {totalItems.toLocaleString()}개
           </span>
         </div>
@@ -1596,7 +1409,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     return (
       <div {...domProps}>
         {tableConfig.filter?.enabled && (
-          <div className="border-border border-b px-4 py-2 sm:px-6 sm:py-2">
+          <div className="px-4 py-2 border-b border-border sm:px-6 sm:py-2">
             <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:gap-3">
               <div className="flex-1">
                 <AdvancedSearchFilters
@@ -1612,7 +1425,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   variant="outline"
                   size="sm"
                   onClick={() => setIsTableOptionsOpen(true)}
-                  className="w-full flex-shrink-0 sm:mt-1 sm:w-auto"
+                  className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
                 >
                   <TableIcon className="mr-2 h-4 w-4" />
                   테이블 옵션
@@ -1621,7 +1434,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   variant="outline"
                   size="sm"
                   onClick={() => setIsFilterSettingOpen(true)}
-                  className="w-full flex-shrink-0 sm:mt-1 sm:w-auto"
+                  className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
                 >
                   <Settings className="mr-2 h-4 w-4" />
                   필터 설정
@@ -1630,7 +1443,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   variant="outline"
                   size="sm"
                   onClick={() => setIsGroupSettingOpen(true)}
-                  className="w-full flex-shrink-0 sm:mt-1 sm:w-auto"
+                  className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
                 >
                   <Layers className="mr-2 h-4 w-4" />
                   그룹 설정
@@ -1642,7 +1455,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         {/* 그룹 표시 배지 */}
         {groupByColumns.length > 0 && (
-          <div className="border-border bg-muted/30 border-b px-4 py-1.5 sm:px-6">
+          <div className="px-4 py-1.5 border-b border-border bg-muted/30 sm:px-6">
             <div className="flex items-center gap-2 text-xs sm:text-sm">
               <span className="text-muted-foreground">그룹:</span>
               <div className="flex flex-wrap items-center gap-2">
@@ -1703,7 +1516,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       <div {...domProps}>
         {/* 필터 */}
         {tableConfig.filter?.enabled && (
-          <div className="border-border flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
+          <div className="px-4 py-3 border-b border-border flex-shrink-0 sm:px-6 sm:py-4">
             <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-4">
               <div className="flex-1">
                 <AdvancedSearchFilters
@@ -1719,7 +1532,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   variant="outline"
                   size="sm"
                   onClick={() => setIsTableOptionsOpen(true)}
-                  className="w-full flex-shrink-0 sm:mt-1 sm:w-auto"
+                  className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
                 >
                   <TableIcon className="mr-2 h-4 w-4" />
                   테이블 옵션
@@ -1728,7 +1541,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   variant="outline"
                   size="sm"
                   onClick={() => setIsFilterSettingOpen(true)}
-                  className="w-full flex-shrink-0 sm:mt-1 sm:w-auto"
+                  className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
                 >
                   <Settings className="mr-2 h-4 w-4" />
                   필터 설정
@@ -1737,7 +1550,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   variant="outline"
                   size="sm"
                   onClick={() => setIsGroupSettingOpen(true)}
-                  className="w-full flex-shrink-0 sm:mt-1 sm:w-auto"
+                  className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
                 >
                   <Layers className="mr-2 h-4 w-4" />
                   그룹 설정
@@ -1749,7 +1562,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         {/* 그룹 표시 배지 */}
         {groupByColumns.length > 0 && (
-          <div className="border-border bg-muted/30 border-b px-4 py-2 sm:px-6">
+          <div className="px-4 py-2 border-b border-border bg-muted/30 sm:px-6">
             <div className="flex items-center gap-2 text-xs sm:text-sm">
               <span className="text-muted-foreground">그룹:</span>
               <div className="flex flex-wrap items-center gap-2">
@@ -1775,17 +1588,20 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         {/* 테이블 컨테이너 */}
         <div 
-          className="flex w-full max-w-full flex-1 flex-col overflow-hidden"
+          className="flex-1 flex flex-col overflow-hidden w-full max-w-full"
           style={{ marginTop: `${tableConfig.filter?.bottomSpacing ?? 8}px` }}
         >
           {/* 스크롤 영역 */}
           <div
-            className="bg-background h-[400px] w-full max-w-full overflow-x-auto overflow-y-scroll sm:h-[500px]"
+            className="w-full max-w-full h-[400px] overflow-y-scroll overflow-x-auto bg-background sm:h-[500px]"
             style={{ position: "relative" }}
           >
             {/* 테이블 */}
             <table
-              className={cn("table-mobile-fixed w-full max-w-full", !showGridLines && "hide-grid")}
+              className={cn(
+                "w-full max-w-full table-mobile-fixed",
+                !showGridLines && "hide-grid"
+              )}
               style={{
                 borderCollapse: "collapse",
                 width: "100%",
@@ -1803,7 +1619,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 }}
               >
                 <tr 
-                  className="border-primary/20 bg-muted h-10 border-b-2 sm:h-12"
+                  className="h-10 border-b-2 border-primary/20 bg-muted sm:h-12"
                   style={{
                     backgroundColor: "hsl(var(--muted))",
                   }}
@@ -1828,26 +1644,19 @@ 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",
+                          "relative h-8 text-xs font-bold text-foreground/90 overflow-hidden 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",
-                          column.sortable !== false &&
+                          (column.sortable !== false && column.columnName !== "__checkbox__") && "cursor-pointer hover:bg-muted/70 transition-colors",
-                            column.columnName !== "__checkbox__" &&
+                          isFrozen && "sticky z-60 shadow-[2px_0_4px_rgba(0,0,0,0.1)]"
-                            "hover:bg-muted/70 cursor-pointer transition-colors",
-                          isFrozen && "sticky z-60 shadow-[2px_0_4px_rgba(0,0,0,0.1)]",
                         )}
                         style={{
                           textAlign: column.columnName === "__checkbox__" ? "center" : "center",
-                          width:
+                          width: column.columnName === "__checkbox__" ? '48px' : (columnWidth ? `${columnWidth}px` : undefined),
-                            column.columnName === "__checkbox__"
+                          minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
-                              ? "48px"
+                          maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
-                              : columnWidth
+                          userSelect: 'none',
-                                ? `${columnWidth}px`
-                                : undefined,
-                          minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                          maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                          userSelect: "none",
                           backgroundColor: "hsl(var(--muted))",
-                          ...(isFrozen && { left: `${leftPosition}px` }),
+                          ...(isFrozen && { left: `${leftPosition}px` })
                         }}
                         onClick={() => {
                           if (isResizing.current) return;
@@ -1869,8 +1678,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         {/* 리사이즈 핸들 (체크박스 제외) */}
                         {columnIndex < visibleColumns.length - 1 && column.columnName !== "__checkbox__" && (
                           <div
-                            className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-blue-500"
+                            className="absolute right-0 top-0 h-full w-2 cursor-col-resize hover:bg-blue-500 z-20"
-                            style={{ marginRight: "-4px", paddingLeft: "4px", paddingRight: "4px" }}
+                            style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
                             onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
                             onMouseDown={(e) => {
                               e.preventDefault();
@@ -1885,8 +1694,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               const startWidth = columnWidth || thElement.offsetWidth;
                               
                               // 드래그 중 텍스트 선택 방지
-                              document.body.style.userSelect = "none";
+                              document.body.style.userSelect = 'none';
-                              document.body.style.cursor = "col-resize";
+                              document.body.style.cursor = 'col-resize';
                               
                               const handleMouseMove = (moveEvent: MouseEvent) => {
                                 moveEvent.preventDefault();
@@ -1904,24 +1713,24 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 // 최종 너비를 state에 저장
                                 if (thElement) {
                                   const finalWidth = Math.max(80, thElement.offsetWidth);
-                                  setColumnWidths((prev) => ({ ...prev, [column.columnName]: finalWidth }));
+                                  setColumnWidths(prev => ({ ...prev, [column.columnName]: finalWidth }));
                                 }
                                 
                                 // 텍스트 선택 복원
-                                document.body.style.userSelect = "";
+                                document.body.style.userSelect = '';
-                                document.body.style.cursor = "";
+                                document.body.style.cursor = '';
                                 
                                 // 약간의 지연 후 리사이즈 플래그 해제 (클릭 이벤트가 먼저 처리되지 않도록)
                                 setTimeout(() => {
                                   isResizing.current = false;
                                 }, 100);
                                 
-                                document.removeEventListener("mousemove", handleMouseMove);
+                                document.removeEventListener('mousemove', handleMouseMove);
-                                document.removeEventListener("mouseup", handleMouseUp);
+                                document.removeEventListener('mouseup', handleMouseUp);
                               };
                               
-                              document.addEventListener("mousemove", handleMouseMove);
+                              document.addEventListener('mousemove', handleMouseMove);
-                              document.addEventListener("mouseup", handleMouseUp);
+                              document.addEventListener('mouseup', handleMouseUp);
                             }}
                           />
                         )}
@@ -1932,13 +1741,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               </thead>
 
               {/* 바디 (스크롤) */}
-              <tbody key={`tbody-${categoryMappingsKey}`} style={{ position: "relative" }}>
+              <tbody style={{ position: "relative" }}>
                 {loading ? (
                   <tr>
                     <td colSpan={visibleColumns.length} className="p-12 text-center">
                       <div className="flex flex-col items-center gap-3">
-                        <RefreshCw className="text-muted-foreground h-8 w-8 animate-spin" />
+                        <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
-                        <div className="text-muted-foreground text-sm font-medium">로딩 중...</div>
+                        <div className="text-sm font-medium text-muted-foreground">로딩 중...</div>
                       </div>
                     </td>
                   </tr>
@@ -1946,8 +1755,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   <tr>
                     <td colSpan={visibleColumns.length} className="p-12 text-center">
                       <div className="flex flex-col items-center gap-3">
-                        <div className="text-destructive text-sm font-medium">오류 발생</div>
+                        <div className="text-sm font-medium text-destructive">오류 발생</div>
-                        <div className="text-muted-foreground text-xs">{error}</div>
+                        <div className="text-xs text-muted-foreground">{error}</div>
                       </div>
                     </td>
                   </tr>
@@ -1955,9 +1764,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   <tr>
                     <td colSpan={visibleColumns.length} className="p-12 text-center">
                       <div className="flex flex-col items-center gap-3">
-                        <TableIcon className="text-muted-foreground/50 h-12 w-12" />
+                        <TableIcon className="h-12 w-12 text-muted-foreground/50" />
-                        <div className="text-muted-foreground text-sm font-medium">데이터가 없습니다</div>
+                        <div className="text-sm font-medium text-muted-foreground">데이터가 없습니다</div>
-                        <div className="text-muted-foreground text-xs">
+                        <div className="text-xs text-muted-foreground">
                           조건을 변경하거나 새로운 데이터를 추가해보세요
                         </div>
                       </div>
@@ -1973,11 +1782,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         <tr>
                           <td
                             colSpan={visibleColumns.length}
-                            className="bg-muted/50 border-border sticky top-[48px] z-[5] border-b"
+                            className="bg-muted/50 border-b border-border sticky top-[48px] z-[5]"
                             style={{ top: "48px" }}
                           >
                             <div
-                              className="hover:bg-muted flex cursor-pointer items-center gap-3 p-3"
+                              className="flex items-center gap-3 p-3 cursor-pointer hover:bg-muted"
                               onClick={() => toggleGroupCollapse(group.groupKey)}
                             >
                               {isCollapsed ? (
@@ -1985,7 +1794,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               ) : (
                                 <ChevronDown className="h-4 w-4 flex-shrink-0" />
                               )}
-                              <span className="flex-1 text-sm font-medium">{group.groupKey}</span>
+                              <span className="font-medium text-sm flex-1">{group.groupKey}</span>
                               <span className="text-muted-foreground text-xs">({group.count}건)</span>
                             </div>
                           </td>
@@ -1996,7 +1805,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                     <tr
                       key={index}
                       className={cn(
-                                "bg-background hover:bg-muted/50 h-10 cursor-pointer border-b transition-colors sm:h-12",
+                        "h-10 border-b transition-colors bg-background hover:bg-muted/50 cursor-pointer sm:h-12"
                       )}
                       onClick={(e) => handleRowClick(row, index, e)}
                     >
@@ -2025,24 +1834,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           <td
                             key={column.columnName}
                             className={cn(
-                                      "text-foreground h-10 overflow-hidden text-xs text-ellipsis whitespace-nowrap sm:h-12 sm:text-sm",
+                              "h-10 text-xs text-foreground overflow-hidden text-ellipsis whitespace-nowrap sm:h-12 sm:text-sm",
                               column.columnName === "__checkbox__" ? "px-0 py-1" : "px-2 py-1 sm:px-4 sm:py-2",
-                                      isFrozen && "bg-background sticky z-10 shadow-[2px_0_4px_rgba(0,0,0,0.05)]",
+                              isFrozen && "sticky z-10 bg-background shadow-[2px_0_4px_rgba(0,0,0,0.05)]"
                             )}
                             style={{
-                                      textAlign:
+                              textAlign: column.columnName === "__checkbox__" ? "center" : (isNumeric ? "right" : (column.align || "left")),
-                                        column.columnName === "__checkbox__"
+                              width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
-                                          ? "center"
+                              minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
-                                          : isNumeric
+                              maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
-                                            ? "right"
+                              ...(isFrozen && { left: `${leftPosition}px` })
-                                            : column.align || "left",
-                                      width:
-                                        column.columnName === "__checkbox__"
-                                          ? "48px"
-                                          : `${100 / visibleColumns.length}%`,
-                                      minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                                      maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                                      ...(isFrozen && { left: `${leftPosition}px` }),
                             }}
                           >
                             {column.columnName === "__checkbox__"
@@ -2062,7 +1863,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                     <tr
                       key={index}
                       className={cn(
-                        "bg-background hover:bg-muted/50 h-10 cursor-pointer border-b transition-colors sm:h-12",
+                        "h-10 border-b transition-colors bg-background hover:bg-muted/50 cursor-pointer sm:h-12"
                       )}
                       onClick={(e) => handleRowClick(row, index, e)}
                     >
@@ -2091,21 +1892,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           <td
                             key={column.columnName}
                             className={cn(
-                              "text-foreground h-10 overflow-hidden text-xs text-ellipsis whitespace-nowrap sm:h-12 sm:text-sm",
+                              "h-10 text-xs text-foreground overflow-hidden text-ellipsis whitespace-nowrap sm:h-12 sm:text-sm",
                               column.columnName === "__checkbox__" ? "px-0 py-1" : "px-2 py-1 sm:px-4 sm:py-2",
-                              isFrozen && "bg-background sticky z-10 shadow-[2px_0_4px_rgba(0,0,0,0.05)]",
+                              isFrozen && "sticky z-10 bg-background shadow-[2px_0_4px_rgba(0,0,0,0.05)]"
                             )}
                             style={{
-                              textAlign:
+                              textAlign: column.columnName === "__checkbox__" ? "center" : (isNumeric ? "right" : (column.align || "left")),
-                                column.columnName === "__checkbox__"
+                              width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
-                                  ? "center"
+                              minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
-                                  : isNumeric
+                              maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
-                                    ? "right"
+                              ...(isFrozen && { left: `${leftPosition}px` })
-                                    : column.align || "left",
-                              width: column.columnName === "__checkbox__" ? "48px" : `${100 / visibleColumns.length}%`,
-                              minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                              maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                              ...(isFrozen && { left: `${leftPosition}px` }),
                             }}
                           >
                             {column.columnName === "__checkbox__"
@@ -2272,7 +2068,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       <TableOptionsModal
         isOpen={isTableOptionsOpen}
         onClose={() => setIsTableOptionsOpen(false)}
-        columns={visibleColumns.map((col) => ({
+        columns={visibleColumns.map(col => ({
           columnName: col.columnName,
           label: columnLabels[col.columnName] || col.displayName || col.columnName,
           visible: col.visible !== false,

frontend/lib/utils/multilang.ts

@@ -288,19 +288,9 @@ function getDefaultText(key: string): string {
     [MENU_MANAGEMENT_KEYS.USER_MENU]: "사용자 메뉴",
     [MENU_MANAGEMENT_KEYS.ADMIN_DESCRIPTION]: "시스템 관리 및 설정 메뉴",
     [MENU_MANAGEMENT_KEYS.USER_DESCRIPTION]: "일반 사용자 업무 메뉴",
-    [MENU_MANAGEMENT_KEYS.LIST_TITLE]: "메뉴 목록",
-    [MENU_MANAGEMENT_KEYS.LIST_TOTAL]: "전체",
-    [MENU_MANAGEMENT_KEYS.LIST_SEARCH_RESULT]: "검색 결과",
-    [MENU_MANAGEMENT_KEYS.FILTER_COMPANY]: "회사 필터",
-    [MENU_MANAGEMENT_KEYS.FILTER_COMPANY_ALL]: "전체",
-    [MENU_MANAGEMENT_KEYS.FILTER_COMPANY_COMMON]: "공통",
-    [MENU_MANAGEMENT_KEYS.FILTER_COMPANY_SEARCH]: "회사 검색...",
-    [MENU_MANAGEMENT_KEYS.FILTER_SEARCH]: "검색",
-    [MENU_MANAGEMENT_KEYS.FILTER_SEARCH_PLACEHOLDER]: "메뉴명 검색...",
-    [MENU_MANAGEMENT_KEYS.FILTER_RESET]: "초기화",
     [MENU_MANAGEMENT_KEYS.BUTTON_ADD]: "추가",
     [MENU_MANAGEMENT_KEYS.BUTTON_ADD_TOP_LEVEL]: "최상위 메뉴 추가",
-    [MENU_MANAGEMENT_KEYS.BUTTON_ADD_SUB]: "하위",
+    [MENU_MANAGEMENT_KEYS.BUTTON_ADD_SUB]: "하위 메뉴 추가",
     [MENU_MANAGEMENT_KEYS.BUTTON_EDIT]: "수정",
     [MENU_MANAGEMENT_KEYS.BUTTON_DELETE]: "삭제",
     [MENU_MANAGEMENT_KEYS.BUTTON_DELETE_SELECTED]: "선택 삭제",
@@ -350,48 +340,9 @@ function getDefaultText(key: string): string {
     [MENU_MANAGEMENT_KEYS.STATUS_ACTIVE]: "활성화",
     [MENU_MANAGEMENT_KEYS.STATUS_INACTIVE]: "비활성화",
     [MENU_MANAGEMENT_KEYS.STATUS_UNSPECIFIED]: "미지정",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_LOADING]: "로딩 중...",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_MENU_DELETE_PROCESSING]: "메뉴를 삭제하는 중...",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_MENU_SAVE_SUCCESS]: "메뉴가 성공적으로 저장되었습니다.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_MENU_SAVE_FAILED]: "메뉴 저장에 실패했습니다.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_MENU_DELETE_SUCCESS]: "메뉴가 성공적으로 삭제되었습니다.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_MENU_DELETE_FAILED]: "메뉴 삭제에 실패했습니다.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_MENU_DELETE_BATCH_SUCCESS]: "{count}개의 메뉴가 성공적으로 삭제되었습니다.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_MENU_DELETE_BATCH_PARTIAL]: "{success}개 삭제됨, {failed}개 실패",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_MENU_STATUS_TOGGLE_SUCCESS]: "메뉴 상태가 변경되었습니다.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_MENU_STATUS_TOGGLE_FAILED]: "메뉴 상태 변경에 실패했습니다.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_VALIDATION_MENU_NAME_REQUIRED]: "메뉴명을 입력하세요.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_VALIDATION_COMPANY_REQUIRED]: "회사를 선택하세요.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_VALIDATION_SELECT_MENU_DELETE]: "삭제할 메뉴를 선택하세요.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_MENU_LIST]: "메뉴 목록을 불러오는데 실패했습니다.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_MENU_INFO]: "메뉴 정보를 불러오는데 실패했습니다.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_COMPANY_LIST]: "회사 목록을 불러오는데 실패했습니다.",
-    [MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_LANG_KEY_LIST]: "다국어 키 목록을 불러오는데 실패했습니다.",
-    [MENU_MANAGEMENT_KEYS.UI_EXPAND]: "펼치기",
-    [MENU_MANAGEMENT_KEYS.UI_COLLAPSE]: "접기",
-    [MENU_MANAGEMENT_KEYS.UI_MENU_COLLAPSE]: "메뉴 접기",
-    [MENU_MANAGEMENT_KEYS.UI_LANGUAGE]: "언어",
-    // 추가 매핑: key 문자열 자체도 한글로 매핑
-    "menu.type.title": "메뉴 타입",
-    "menu.management.admin": "관리자",
-    "menu.management.admin.description": "시스템 관리 및 설정 메뉴",
-    "menu.management.user": "사용자",
-    "menu.management.user.description": "일반 사용자 업무 메뉴",
-    "menu.list.title": "메뉴 목록",
-    "filter.company.all": "전체",
-    "filter.search.placeholder": "메뉴명 검색...",
-    "filter.reset": "초기화",
-    "button.add.top.level": "최상위 메뉴 추가",
-    "button.delete.selected": "선택 삭제",
-    "table.header.menu.name": "메뉴명",
-    "table.header.sequence": "순서",
-    "table.header.company": "회사",
-    "table.header.menu.url": "URL",
-    "table.header.status": "상태",
-    "table.header.actions": "작업",
   };
 
-  return defaultTexts[key] || "";
+  return defaultTexts[key] || key;
 }
 
 /**