화면 다국어 처리

backend-node/src/controllers/adminController.ts

@@ -553,10 +553,24 @@ export const setUserLocale = async (
 
     const { locale } = req.body;
 
-    if (!locale || !["ko", "en", "ja", "zh"].includes(locale)) {
+    if (!locale) {
       res.status(400).json({
         success: false,
-        message: "유효하지 않은 로케일입니다. (ko, en, ja, zh 중 선택)",
+        message: "로케일이 필요합니다.",
+      });
+      return;
+    }
+
+    // language_master 테이블에서 유효한 언어 코드인지 확인
+    const validLang = await queryOne<{ lang_code: string }>(
+      "SELECT lang_code FROM language_master WHERE lang_code = $1 AND is_active = 'Y'",
+      [locale]
+    );
+
+    if (!validLang) {
+      res.status(400).json({
+        success: false,
+        message: `유효하지 않은 로케일입니다: ${locale}`,
       });
       return;
     }
@@ -3103,6 +3117,23 @@ export const updateProfile = async (
     }
 
     if (locale !== undefined) {
+      // language_master 테이블에서 유효한 언어 코드인지 확인
+      const validLang = await queryOne<{ lang_code: string }>(
+        "SELECT lang_code FROM language_master WHERE lang_code = $1 AND is_active = 'Y'",
+        [locale]
+      );
+
+      if (!validLang) {
+        res.status(400).json({
+          result: false,
+          error: {
+            code: "INVALID_LOCALE",
+            details: `유효하지 않은 로케일입니다: ${locale}`,
+          },
+        });
+        return;
+      }
+
       updateFields.push(`locale = $${paramIndex}`);
       updateValues.push(locale);
       paramIndex++;

backend-node/src/services/multilangService.ts

@@ -1189,6 +1189,7 @@ export class MultiLangService {
   /**
    * 배치 번역 조회 (회사별 우선순위 적용)
    * 우선순위: 회사별 키 > 공통 키(*)
+   * 폴백: 요청 언어 번역이 없으면 KR 번역 사용
    */
   async getBatchTranslations(
     params: BatchTranslationRequest
@@ -1233,16 +1234,10 @@ export class MultiLangService {
       );
 
       const result: Record<string, string> = {};
-
-      // 기본값으로 모든 키 설정
-      params.langKeys.forEach((key) => {
-        result[key] = key;
-      });
+      const processedKeys = new Set<string>();
 
       // 우선순위 기반으로 번역 적용
       // priority가 낮은 것(회사별)이 먼저 오므로, 먼저 처리된 키는 덮어쓰지 않음
-      const processedKeys = new Set<string>();
-      
       translations.forEach((translation) => {
         const langKey = translation.lang_key;
         if (params.langKeys.includes(langKey) && !processedKeys.has(langKey)) {
@@ -1251,6 +1246,55 @@ export class MultiLangService {
         }
       });
 
+      // 번역이 없는 키들에 대해 KR 폴백 조회 (요청 언어가 KR이 아닌 경우)
+      const missingKeys = params.langKeys.filter((key) => !processedKeys.has(key));
+      
+      if (missingKeys.length > 0 && params.userLang !== "KR") {
+        logger.info("KR 폴백 번역 조회 시작", { missingCount: missingKeys.length });
+        
+        const fallbackPlaceholders = missingKeys.map((_, i) => `$${i + 3}`).join(", ");
+        const fallbackTranslations = await query<{
+          lang_text: string;
+          lang_key: string;
+          company_code: string;
+          priority: number;
+        }>(
+          `SELECT mlt.lang_text, mlkm.lang_key, mlkm.company_code,
+                  CASE WHEN mlkm.company_code = $2 THEN 1 ELSE 2 END as priority
+           FROM multi_lang_text mlt
+           INNER JOIN multi_lang_key_master mlkm ON mlt.key_id = mlkm.key_id
+           WHERE mlt.lang_code = 'KR'
+             AND mlt.is_active = $1
+             AND mlkm.lang_key IN (${fallbackPlaceholders})
+             AND mlkm.company_code IN ($2, '*')
+             AND mlkm.is_active = $1
+           ORDER BY mlkm.lang_key ASC, priority ASC`,
+          ["Y", params.companyCode, ...missingKeys]
+        );
+
+        // KR 폴백 적용
+        const fallbackProcessed = new Set<string>();
+        fallbackTranslations.forEach((translation) => {
+          const langKey = translation.lang_key;
+          if (!result[langKey] && !fallbackProcessed.has(langKey)) {
+            result[langKey] = translation.lang_text;
+            fallbackProcessed.add(langKey);
+          }
+        });
+        
+        logger.info("KR 폴백 번역 조회 완료", {
+          missingCount: missingKeys.length,
+          foundFallback: fallbackTranslations.length,
+        });
+      }
+
+      // 여전히 없는 키는 키 자체를 반환 (최후의 폴백)
+      params.langKeys.forEach((key) => {
+        if (!result[key]) {
+          result[key] = key;
+        }
+      });
+
       logger.info("배치 번역 조회 완료", {
         totalKeys: params.langKeys.length,
         foundTranslations: translations.length,

frontend/app/(main)/screens/[screenId]/page.tsx

@@ -23,6 +23,7 @@ import { TableSearchWidgetHeightProvider, useTableSearchWidgetHeight } from "@/c
 import { ScreenContextProvider } from "@/contexts/ScreenContext"; // 컴포넌트 간 통신
 import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; // 분할 패널 리사이즈
 import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 관리
+import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext"; // 화면 다국어
 
 function ScreenViewPage() {
   const params = useParams();
@@ -345,6 +346,7 @@ function ScreenViewPage() {
 
           {/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
           {layoutReady && layout && layout.components.length > 0 ? (
+            <ScreenMultiLangProvider components={layout.components} companyCode={companyCode}>
               <div
                 className="bg-background relative"
                 style={{
@@ -770,6 +772,7 @@ function ScreenViewPage() {
                 );
               })()}
               </div>
+            </ScreenMultiLangProvider>
           ) : (
             // 빈 화면일 때
             <div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>

frontend/components/layout/ProfileModal.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import {
   Dialog,
   DialogContent,
@@ -15,6 +16,14 @@ import { Camera, X, Car, Wrench, Clock, Plus, Trash2 } from "lucide-react";
 import { ProfileFormData } from "@/types/profile";
 import { Separator } from "@/components/ui/separator";
 import { VehicleRegisterData } from "@/lib/api/driver";
+import { apiClient } from "@/lib/api/client";
+
+// 언어 정보 타입
+interface LanguageInfo {
+  langCode: string;
+  langName: string;
+  langNative: string;
+}
 
 // 운전자 정보 타입
 export interface DriverInfo {
@@ -148,6 +157,46 @@ export function ProfileModal({
   onSave,
   onAlertClose,
 }: ProfileModalProps) {
+  // 언어 목록 상태
+  const [languages, setLanguages] = useState<LanguageInfo[]>([]);
+
+  // 언어 목록 로드
+  useEffect(() => {
+    const loadLanguages = async () => {
+      try {
+        const response = await apiClient.get("/multilang/languages");
+        if (response.data?.success && response.data?.data) {
+          // is_active가 'Y'인 언어만 필터링하고 정렬
+          const activeLanguages = response.data.data
+            .filter((lang: any) => lang.isActive === "Y" || lang.is_active === "Y")
+            .map((lang: any) => ({
+              langCode: lang.langCode || lang.lang_code,
+              langName: lang.langName || lang.lang_name,
+              langNative: lang.langNative || lang.lang_native,
+            }))
+            .sort((a: LanguageInfo, b: LanguageInfo) => {
+              // KR을 먼저 표시
+              if (a.langCode === "KR") return -1;
+              if (b.langCode === "KR") return 1;
+              return a.langCode.localeCompare(b.langCode);
+            });
+          setLanguages(activeLanguages);
+        }
+      } catch (error) {
+        console.error("언어 목록 로드 실패:", error);
+        // 기본값 설정
+        setLanguages([
+          { langCode: "KR", langName: "Korean", langNative: "한국어" },
+          { langCode: "US", langName: "English", langNative: "English" },
+        ]);
+      }
+    };
+
+    if (isOpen) {
+      loadLanguages();
+    }
+  }, [isOpen]);
+
   // 차량 상태 한글 변환
   const getStatusLabel = (status: string | null) => {
     switch (status) {
@@ -293,10 +342,15 @@ export function ProfileModal({
                     <SelectValue placeholder="선택해주세요" />
                   </SelectTrigger>
                   <SelectContent>
+                    {languages.length > 0 ? (
+                      languages.map((lang) => (
+                        <SelectItem key={lang.langCode} value={lang.langCode}>
+                          {lang.langNative} ({lang.langCode})
+                        </SelectItem>
+                      ))
+                    ) : (
                       <SelectItem value="KR">한국어 (KR)</SelectItem>
-                    <SelectItem value="US">English (US)</SelectItem>
-                    <SelectItem value="JP">日本語 (JP)</SelectItem>
-                    <SelectItem value="CN">中文 (CN)</SelectItem>
+                    )}
                   </SelectContent>
                 </Select>
               </div>

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
@@ -48,6 +48,7 @@ import { isFileComponent } from "@/lib/utils/componentTypeUtils";
 import { buildGridClasses } from "@/lib/constants/columnSpans";
 import { cn } from "@/lib/utils";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
+import { useMultiLang } from "@/hooks/useMultiLang";
 import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
 import { TableOptionsToolbar } from "./table-options/TableOptionsToolbar";
 import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
@@ -187,9 +188,63 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { userName, user } = useAuth(); // 현재 로그인한 사용자명과 사용자 정보 가져오기
+  const { userLang } = useMultiLang(); // 다국어 훅
   const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
   const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
   
+  // 다국어 번역 상태 (langKeyId가 있는 컴포넌트들의 번역 텍스트)
+  const [translations, setTranslations] = useState<Record<string, string>>({});
+
+  // 다국어 키 수집 및 번역 로드
+  useEffect(() => {
+    const loadTranslations = async () => {
+      // 모든 컴포넌트에서 langKey 수집
+      const langKeysToFetch: string[] = [];
+      
+      const collectLangKeys = (comps: ComponentData[]) => {
+        comps.forEach((comp) => {
+          // 컴포넌트 라벨의 langKey
+          if ((comp as any).langKey) {
+            langKeysToFetch.push((comp as any).langKey);
+          }
+          // componentConfig 내의 langKey (버튼 텍스트 등)
+          if ((comp as any).componentConfig?.langKey) {
+            langKeysToFetch.push((comp as any).componentConfig.langKey);
+          }
+          // 자식 컴포넌트 재귀 처리
+          if ((comp as any).children) {
+            collectLangKeys((comp as any).children);
+          }
+        });
+      };
+      
+      collectLangKeys(allComponents);
+      
+      // langKey가 있으면 배치 조회
+      if (langKeysToFetch.length > 0 && userLang) {
+        try {
+          const { apiClient } = await import("@/lib/api/client");
+          const response = await apiClient.post("/multilang/batch", {
+            langKeys: [...new Set(langKeysToFetch)], // 중복 제거
+          }, {
+            params: {
+              userLang,
+              companyCode: user?.companyCode || "*",
+            },
+          });
+          
+          if (response.data?.success && response.data?.data) {
+            setTranslations(response.data.data);
+          }
+        } catch (error) {
+          console.error("다국어 번역 로드 실패:", error);
+        }
+      }
+    };
+    
+    loadTranslations();
+  }, [allComponents, userLang, user?.companyCode]);
+  
   // 팝업 화면 상태
   const [popupScreen, setPopupScreen] = useState<{
     screenId: number;
@@ -568,10 +623,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       );
     }
 
-    const { widgetType, label, placeholder, required, readonly, columnName } = comp;
+    const { widgetType, label: originalLabel, placeholder, required, readonly, columnName } = comp;
     const fieldName = columnName || comp.id;
     const currentValue = formData[fieldName] || "";
     
+    // 다국어 라벨 적용 (langKey가 있으면 번역 텍스트 사용)
+    const compLangKey = (comp as any).langKey;
+    const label = compLangKey && translations[compLangKey] ? translations[compLangKey] : originalLabel;
+
     // 스타일 적용
     const applyStyles = (element: React.ReactElement) => {
       if (!comp.style) return element;
@@ -1877,6 +1936,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
         };
 
+        // 버튼 텍스트 다국어 적용 (componentConfig.langKey 확인)
+        const buttonLangKey = (widget as any).componentConfig?.langKey;
+        const buttonText = buttonLangKey && translations[buttonLangKey] 
+          ? translations[buttonLangKey] 
+          : (widget as any).componentConfig?.text || label || "버튼";
+
         return applyStyles(
           <Button
             onClick={handleButtonClick}
@@ -1892,7 +1957,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               borderColor: config?.borderColor,
             }}
           >
-            {label || "버튼"}
+            {buttonText}
           </Button>
         );
       }
@@ -2035,7 +2100,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     (component.label || component.style?.labelText) &&
     !templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함
 
-  const labelText = component.style?.labelText || component.label || "";
+  // 다국어 라벨 텍스트 결정 (langKey가 있으면 번역 텍스트 사용)
+  const langKey = (component as any).langKey;
+  const originalLabelText = component.style?.labelText || component.label || "";
+  const labelText = langKey && translations[langKey] ? translations[langKey] : originalLabelText;
 
   // 라벨 표시 여부 로그 (디버깅용)
   if (component.type === "widget") {
@@ -2044,6 +2112,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       hideLabel,
       shouldShowLabel,
       labelText,
+      langKey,
+      hasTranslation: !!translations[langKey],
     });
   }
 

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -17,6 +17,7 @@ import {
   File,
 } from "lucide-react";
 import { useSplitPanel } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 // 컴포넌트 렌더러들 자동 등록
 import "@/lib/registry/components";
@@ -129,6 +130,9 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   onFormDataChange,
   onHeightChange, // 🆕 조건부 컨테이너 높이 변화 콜백
 }) => {
+  // 🆕 화면 다국어 컨텍스트
+  const { getTranslatedText } = useScreenMultiLang();
+  
   const [actualHeight, setActualHeight] = React.useState<number | null>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
   const lastUpdatedHeight = React.useRef<number | null>(null);

frontend/contexts/ScreenMultiLangContext.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect, useMemo, ReactNode } from "react";
+import { apiClient } from "@/lib/api/client";
+import { useMultiLang } from "@/hooks/useMultiLang";
+import { ComponentData } from "@/types/screen";
+
+interface ScreenMultiLangContextValue {
+  translations: Record<string, string>;
+  loading: boolean;
+  getTranslatedText: (langKey: string | undefined, fallback: string) => string;
+}
+
+const ScreenMultiLangContext = createContext<ScreenMultiLangContextValue | null>(null);
+
+interface ScreenMultiLangProviderProps {
+  children: ReactNode;
+  components: ComponentData[];
+  companyCode?: string;
+}
+
+/**
+ * 화면 컴포넌트들의 다국어 번역을 제공하는 Provider
+ * 모든 langKey를 수집하여 한 번에 배치 조회하고, 하위 컴포넌트에서 번역 텍스트를 사용할 수 있게 함
+ */
+export const ScreenMultiLangProvider: React.FC<ScreenMultiLangProviderProps> = ({
+  children,
+  components,
+  companyCode = "*",
+}) => {
+  const { userLang } = useMultiLang();
+  const [translations, setTranslations] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+
+  // 모든 컴포넌트에서 langKey 수집
+  const langKeys = useMemo(() => {
+    const keys: string[] = [];
+
+    const collectLangKeys = (comps: ComponentData[]) => {
+      comps.forEach((comp) => {
+        // 컴포넌트 라벨의 langKey
+        if ((comp as any).langKey) {
+          keys.push((comp as any).langKey);
+        }
+        // componentConfig 내의 langKey (버튼 텍스트 등)
+        if ((comp as any).componentConfig?.langKey) {
+          keys.push((comp as any).componentConfig.langKey);
+        }
+        // properties 내의 langKey (레거시)
+        if ((comp as any).properties?.langKey) {
+          keys.push((comp as any).properties.langKey);
+        }
+        // 테이블 리스트 컬럼의 langKey 수집
+        if ((comp as any).componentConfig?.columns) {
+          (comp as any).componentConfig.columns.forEach((col: any) => {
+            if (col.langKey) {
+              keys.push(col.langKey);
+            }
+          });
+        }
+        // 자식 컴포넌트 재귀 처리
+        if ((comp as any).children) {
+          collectLangKeys((comp as any).children);
+        }
+      });
+    };
+
+    collectLangKeys(components);
+    return [...new Set(keys)]; // 중복 제거
+  }, [components]);
+
+  // langKey가 있으면 배치 조회
+  useEffect(() => {
+    const loadTranslations = async () => {
+      if (langKeys.length === 0 || !userLang) {
+        return;
+      }
+
+      setLoading(true);
+      try {
+        console.log("🌐 [ScreenMultiLang] 다국어 배치 로드:", { langKeys: langKeys.length, userLang, companyCode });
+
+        const response = await apiClient.post(
+          "/multilang/batch",
+          { langKeys },
+          {
+            params: {
+              userLang,
+              companyCode,
+            },
+          }
+        );
+
+        if (response.data?.success && response.data?.data) {
+          console.log("✅ [ScreenMultiLang] 다국어 로드 완료:", Object.keys(response.data.data).length, "개");
+          setTranslations(response.data.data);
+        }
+      } catch (error) {
+        console.error("❌ [ScreenMultiLang] 다국어 로드 실패:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadTranslations();
+  }, [langKeys, userLang, companyCode]);
+
+  // 번역 텍스트 가져오기 헬퍼
+  const getTranslatedText = (langKey: string | undefined, fallback: string): string => {
+    if (!langKey) return fallback;
+    return translations[langKey] || fallback;
+  };
+
+  const value = useMemo(
+    () => ({
+      translations,
+      loading,
+      getTranslatedText,
+    }),
+    [translations, loading]
+  );
+
+  return <ScreenMultiLangContext.Provider value={value}>{children}</ScreenMultiLangContext.Provider>;
+};
+
+/**
+ * 화면 다국어 컨텍스트 사용 훅
+ */
+export const useScreenMultiLang = (): ScreenMultiLangContextValue => {
+  const context = useContext(ScreenMultiLangContext);
+  if (!context) {
+    // 컨텍스트가 없으면 기본값 반환 (fallback)
+    return {
+      translations: {},
+      loading: false,
+      getTranslatedText: (_, fallback) => fallback,
+    };
+  }
+  return context;
+};
+

frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx

@@ -27,6 +27,7 @@ import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
 import { applyMappingRules } from "@/lib/utils/dataMapping";
 import { apiClient } from "@/lib/api/client";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
   config?: ButtonPrimaryConfig;
@@ -107,6 +108,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const screenContext = useScreenContextOptional(); // 화면 컨텍스트
   const splitPanelContext = useSplitPanelContext(); // 분할 패널 컨텍스트
+  const { getTranslatedText } = useScreenMultiLang(); // 다국어 컨텍스트
   // 🆕 ScreenContext에서 splitPanelPosition 가져오기 (중첩 화면에서도 작동)
   const splitPanelPosition = screenContext?.splitPanelPosition;
 
@@ -1285,7 +1287,10 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     ...userStyle,
   };
 
-  const buttonContent = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
+  // 다국어 적용: componentConfig.langKey가 있으면 번역 텍스트 사용
+  const langKey = (component as any).componentConfig?.langKey;
+  const originalButtonText = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
+  const buttonContent = getTranslatedText(langKey, originalButtonText);
 
   return (
     <>

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

@@ -6,6 +6,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { ColumnConfig } from "./types";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 interface SingleTableWithStickyProps {
   visibleColumns?: ColumnConfig[];
@@ -74,13 +75,14 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
   currentSearchIndex = 0,
   searchTerm = "",
 }) => {
+  const { getTranslatedText } = useScreenMultiLang();
   const checkboxConfig = tableConfig?.checkbox || {};
   const actualColumns = visibleColumns || columns || [];
   const sortHandler = onSort || handleSort || (() => {});
 
   return (
     <div
-      className="relative flex flex-col bg-background shadow-sm"
+      className="bg-background relative flex flex-col shadow-sm"
       style={{
         width: "100%",
         boxSizing: "border-box",
@@ -96,10 +98,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
           }}
         >
           <TableHeader
-          className={cn(
-            "border-b bg-background",
-            tableConfig?.stickyHeader && "sticky top-0 z-30 shadow-sm"
-          )}
+            className={cn("bg-background border-b", tableConfig?.stickyHeader && "sticky top-0 z-30 shadow-sm")}
           >
             <TableRow className="border-b">
               {actualColumns.map((column, colIndex) => {
@@ -122,15 +121,13 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                     key={column.columnName}
                     className={cn(
                       column.columnName === "__checkbox__"
-                      ? "h-10 border-0 px-3 py-2 text-center align-middle sm:h-12 sm:px-6 sm:py-3 bg-background"
-                      : "h-10 cursor-pointer border-0 px-3 py-2 text-left align-middle font-semibold whitespace-nowrap text-xs text-foreground transition-all duration-200 select-none hover:text-foreground sm:h-12 sm:px-6 sm:py-3 sm:text-sm bg-background",
+                        ? "bg-background h-10 border-0 px-3 py-2 text-center align-middle sm:h-12 sm:px-6 sm:py-3"
+                        : "text-foreground hover:text-foreground bg-background h-10 cursor-pointer border-0 px-3 py-2 text-left align-middle text-xs font-semibold whitespace-nowrap transition-all duration-200 select-none sm:h-12 sm:px-6 sm:py-3 sm:text-sm",
                       `text-${column.align}`,
                       column.sortable && "hover:bg-primary/10",
                       // 고정 컬럼 스타일
-                    column.fixed === "left" &&
-                      "sticky z-40 border-r border-border bg-background shadow-sm",
-                    column.fixed === "right" &&
-                      "sticky z-40 border-l border-border bg-background shadow-sm",
+                      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",
                       // 숨김 컬럼 스타일 (디자인 모드에서만)
                       isDesignMode && column.hidden && "bg-muted/50 opacity-40",
                     )}
@@ -162,14 +159,20 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                       ) : (
                         <>
                           <span className="flex-1 truncate">
-                          {columnLabels[column.columnName] || column.displayName || column.columnName}
+                            {/* langKey가 있으면 다국어 번역 사용, 없으면 기존 라벨 */}
+                            {(column as any).langKey
+                              ? getTranslatedText(
+                                  (column as any).langKey,
+                                  columnLabels[column.columnName] || column.displayName || column.columnName,
+                                )
+                              : columnLabels[column.columnName] || column.displayName || column.columnName}
                           </span>
                           {column.sortable && sortColumn === column.columnName && (
-                          <span className="ml-1 flex h-4 w-4 items-center justify-center rounded-md bg-background/50 shadow-sm sm:ml-2 sm:h-5 sm:w-5">
+                            <span className="bg-background/50 ml-1 flex h-4 w-4 items-center justify-center rounded-md shadow-sm sm:ml-2 sm:h-5 sm:w-5">
                               {sortDirection === "asc" ? (
-                              <ArrowUp className="h-2.5 w-2.5 text-primary sm:h-3.5 sm:w-3.5" />
+                                <ArrowUp className="text-primary h-2.5 w-2.5 sm:h-3.5 sm:w-3.5" />
                               ) : (
-                              <ArrowDown className="h-2.5 w-2.5 text-primary sm:h-3.5 sm:w-3.5" />
+                                <ArrowDown className="text-primary h-2.5 w-2.5 sm:h-3.5 sm:w-3.5" />
                               )}
                             </span>
                           )}
@@ -187,8 +190,13 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
               <TableRow>
                 <TableCell colSpan={visibleColumns.length} className="py-12 text-center">
                   <div className="flex flex-col items-center justify-center space-y-3">
-                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted">
-                          <svg className="h-6 w-6 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div className="bg-muted flex h-12 w-12 items-center justify-center rounded-full">
+                      <svg
+                        className="text-muted-foreground h-6 w-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
                         <path
                           strokeLinecap="round"
                           strokeLinejoin="round"
@@ -197,8 +205,8 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                         />
                       </svg>
                     </div>
-                        <span className="text-sm font-medium text-muted-foreground">데이터가 없습니다</span>
-                        <span className="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">
+                    <span className="text-muted-foreground text-sm font-medium">데이터가 없습니다</span>
+                    <span className="bg-muted text-muted-foreground rounded-full px-3 py-1 text-xs">
                       조건을 변경하여 다시 검색해보세요
                     </span>
                   </div>
@@ -209,7 +217,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                 <TableRow
                   key={`row-${index}`}
                   className={cn(
-                  "h-14 cursor-pointer border-b transition-colors bg-background sm:h-16",
+                    "bg-background h-14 cursor-pointer border-b transition-colors sm:h-16",
                     tableConfig.tableStyle?.hoverEffect && "hover:bg-muted/50",
                   )}
                   onClick={() => handleRowClick(row)}
@@ -226,7 +234,9 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                     const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
                     const rightFixedWidth =
                       rightFixedIndex >= 0
-                      ? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
+                        ? rightFixedColumns
+                            .slice(rightFixedIndex + 1)
+                            .reduce((sum, col) => sum + getColumnWidth(col), 0)
                         : 0;
 
                     // 현재 셀이 편집 중인지 확인
@@ -238,20 +248,23 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                     const hasSearchTerm = searchTerm ? cellValue.includes(searchTerm.toLowerCase()) : false;
 
                     // 인덱스 기반 하이라이트 + 실제 값 검증
-                  const isHighlighted = column.columnName !== "__checkbox__" && 
+                    const isHighlighted =
+                      column.columnName !== "__checkbox__" &&
                       hasSearchTerm &&
                       (searchHighlights?.has(cellKey) ?? false);
 
                     // 현재 검색 결과인지 확인 (currentSearchIndex가 -1이면 현재 페이지에 없음)
                     const highlightArray = searchHighlights ? Array.from(searchHighlights) : [];
-                  const isCurrentSearchResult = isHighlighted && 
+                    const isCurrentSearchResult =
+                      isHighlighted &&
                       currentSearchIndex >= 0 &&
                       currentSearchIndex < highlightArray.length &&
                       highlightArray[currentSearchIndex] === cellKey;
 
                     // 셀 값에서 검색어 하이라이트 렌더링
                     const renderCellContent = () => {
-                    const cellValue = formatCellValue(row[column.columnName], column.format, column.columnName, row) || "\u00A0";
+                      const cellValue =
+                        formatCellValue(row[column.columnName], column.format, column.columnName, row) || "\u00A0";
 
                       if (!isHighlighted || !searchTerm || column.columnName === "__checkbox__") {
                         return cellValue;
@@ -271,12 +284,14 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                       return (
                         <>
                           {before}
-                        <mark className={cn(
+                          <mark
+                            className={cn(
                               "rounded px-0.5",
                               isCurrentSearchResult
-                            ? "bg-orange-400 text-white font-semibold" 
-                            : "bg-yellow-200 text-yellow-900"
-                        )}>
+                                ? "bg-orange-400 font-semibold text-white"
+                                : "bg-yellow-200 text-yellow-900",
+                            )}
+                          >
                             {match}
                           </mark>
                           {after}
@@ -289,13 +304,13 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                         key={`cell-${column.columnName}`}
                         id={isCurrentSearchResult ? "current-search-result" : undefined}
                         className={cn(
-                        "h-14 px-3 py-2 align-middle text-xs whitespace-nowrap text-foreground transition-colors sm:h-16 sm:px-6 sm:py-3 sm:text-sm",
+                          "text-foreground h-14 px-3 py-2 align-middle text-xs whitespace-nowrap transition-colors sm:h-16 sm:px-6 sm:py-3 sm:text-sm",
                           `text-${column.align}`,
                           // 고정 컬럼 스타일
                           column.fixed === "left" &&
-                          "sticky z-10 border-r border-border bg-background/90 backdrop-blur-sm",
+                            "border-border bg-background/90 sticky z-10 border-r backdrop-blur-sm",
                           column.fixed === "right" &&
-                          "sticky z-10 border-l border-border bg-background/90 backdrop-blur-sm",
+                            "border-border bg-background/90 sticky z-10 border-l backdrop-blur-sm",
                           // 편집 가능 셀 스타일
                           onCellDoubleClick && column.columnName !== "__checkbox__" && "cursor-text",
                         )}
@@ -331,11 +346,14 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                             onBlur={() => {
                               // blur 시 저장 (Enter와 동일)
                               if (onEditKeyDown) {
-                              const fakeEvent = { key: "Enter", preventDefault: () => {} } as React.KeyboardEvent<HTMLInputElement>;
+                                const fakeEvent = {
+                                  key: "Enter",
+                                  preventDefault: () => {},
+                                } as React.KeyboardEvent<HTMLInputElement>;
                                 onEditKeyDown(fakeEvent);
                               }
                             }}
-                          className="h-8 w-full rounded border border-primary bg-background px-2 text-xs focus:outline-none focus:ring-2 focus:ring-primary sm:text-sm"
+                            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()}
                           />
                         ) : (

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

@@ -67,6 +67,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
 import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 // ========================================
 // 인터페이스
@@ -243,6 +244,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   parentTabsComponentId,
   companyCode,
 }) => {
+  // ========================================
+  // 다국어 번역 훅
+  // ========================================
+  const { getTranslatedText } = useScreenMultiLang();
+
   // ========================================
   // 설정 및 스타일
   // ========================================
@@ -5821,7 +5827,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             rowSpan={2}
                             className="border-primary/10 border-r px-2 py-1 text-center text-xs font-semibold sm:px-4 sm:text-sm"
                           >
-                            {columnLabels[column.columnName] || column.columnName}
+                            {/* langKey가 있으면 다국어 번역 사용 */}
+                            {(column as any).langKey 
+                              ? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.columnName)
+                              : columnLabels[column.columnName] || column.columnName}
                           </th>
                         );
                       }
@@ -5917,7 +5926,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 <Lock className="text-muted-foreground h-3 w-3" />
                               </span>
                             )}
-                            <span>{columnLabels[column.columnName] || column.displayName}</span>
+                            <span>
+                              {/* langKey가 있으면 다국어 번역 사용 */}
+                              {(column as any).langKey 
+                                ? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.displayName || column.columnName)
+                                : columnLabels[column.columnName] || column.displayName}
+                            </span>
                             {column.sortable !== false && sortColumn === column.columnName && (
                               <span>{sortDirection === "asc" ? "↑" : "↓"}</span>
                             )}