다국어 화면에서 수정기능 구현

2026-01-14 16:33:22 +09:00
parent 14f8714ea1
commit 16c9c71a23
5 changed files with 668 additions and 126 deletions
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -38,6 +38,7 @@ import { useTableOptions } from "@/contexts/TableOptionsContext";
 import { TableFilter, ColumnVisibility, GroupSumConfig } from "@/types/table-options";
 import { useAuth } from "@/hooks/useAuth";
 import { useSplitPanel } from "./SplitPanelContext";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";

 export interface SplitPanelLayoutComponentProps extends ComponentRendererProps {
  // 추가 props
@@ -58,6 +59,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
  const componentConfig = (component.componentConfig || {}) as SplitPanelLayoutConfig;
  // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
  const companyCode = (props as any).companyCode as string | undefined;
+  // 🌐 다국어 컨텍스트
+  const { getTranslatedText } = useScreenMultiLang();

  // 기본 설정값
  const splitRatio = componentConfig.splitRatio || 30;
@@ -2559,7 +2562,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
          >
            <div className="flex w-full items-center justify-between">
              <CardTitle className="text-base font-semibold">
-                {componentConfig.leftPanel?.title || "좌측 패널"}
+                {getTranslatedText(componentConfig.leftPanel?.langKey, componentConfig.leftPanel?.title || "좌측 패널")}
              </CardTitle>
              {!isDesignMode && componentConfig.leftPanel?.showAdd && (
                <Button size="sm" variant="outline" onClick={() => handleAddClick("left")}>
@@ -2593,9 +2596,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 1</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 2</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 3</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">컬럼 1</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">컬럼 2</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">컬럼 3</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-200 bg-white">
@@ -2644,10 +2647,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                      visibleLeftColumns.length > 0
                        ? visibleLeftColumns.map((col: any) => {
                            const colName = typeof col === "string" ? col : col.name || col.columnName;
+                            const originalLabel =
+                              leftColumnLabels[colName] || (typeof col === "object" ? col.label : null) || colName;
+                            const colLangKey = typeof col === "object" ? col.langKey : undefined;
                            return {
                              name: colName,
-                              label:
-                                leftColumnLabels[colName] || (typeof col === "object" ? col.label : null) || colName,
+                              label: colLangKey ? getTranslatedText(colLangKey, originalLabel) : originalLabel,
                              width: typeof col === "object" ? col.width : 150,
                              align: (typeof col === "object" ? col.align : "left") as "left" | "center" | "right",
                              format: typeof col === "object" ? col.format : undefined, // 🆕 포맷 설정 포함
@@ -2679,7 +2684,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                    {columnsToShow.map((col, idx) => (
                                      <th
                                        key={idx}
-                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500"
                                        style={{
                                          width: col.width ? `${col.width}px` : "auto",
                                          textAlign: col.align || "left",
@@ -2740,7 +2745,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                              {columnsToShow.map((col, idx) => (
                                <th
                                  key={idx}
-                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500"
                                  style={{
                                    width: col.width ? `${col.width}px` : "auto",
                                    textAlign: col.align || "left",
@@ -3079,10 +3084,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
            <div className="flex w-full items-center justify-between">
              <CardTitle className="text-base font-semibold">
                {activeTabIndex === 0
-                  ? componentConfig.rightPanel?.title || "우측 패널"
-                  : componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.title ||
-                    componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.label ||
-                    "우측 패널"}
+                  ? getTranslatedText(
+                      componentConfig.rightPanel?.langKey,
+                      componentConfig.rightPanel?.title || "우측 패널",
+                    )
+                  : getTranslatedText(
+                      componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.titleLangKey,
+                      componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.title ||
+                        componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.label ||
+                        "우측 패널",
+                    )}
              </CardTitle>
              {!isDesignMode && (
                <div className="flex items-center gap-2">
@@ -3368,12 +3379,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                        let columnsToShow: any[] = [];

                        if (displayColumns.length > 0) {
-                          // 설정된 컬럼 사용
-                          columnsToShow = displayColumns.map((col) => ({
-                            ...col,
-                            label: rightColumnLabels[col.name] || col.label || col.name,
-                            format: col.format,
-                          }));
+                          // 설정된 컬럼 사용 - 🌐 다국어 처리 추가
+                          columnsToShow = displayColumns.map((col) => {
+                            const originalLabel = rightColumnLabels[col.name] || col.label || col.name;
+                            const colLangKey = (col as any).langKey;
+                            return {
+                              ...col,
+                              label: colLangKey ? getTranslatedText(colLangKey, originalLabel) : originalLabel,
+                              format: col.format,
+                            };
+                          });

                          // 🆕 그룹 합산 모드이고, 키 컬럼이 표시 목록에 없으면 맨 앞에 추가
                          if (isGroupedMode && keyColumns.length > 0) {
@@ -3422,7 +3437,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                    {columnsToShow.map((col, idx) => (
                                      <th
                                        key={idx}
-                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500"
                                        style={{
                                          width: col.width ? `${col.width}px` : "auto",
                                          textAlign: col.align || "left",
@@ -3435,9 +3450,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                    {!isDesignMode &&
                                      ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
                                        (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
-                                        <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">
-                                          작업
-                                        </th>
+                                        <th className="px-3 py-2 text-right text-xs font-medium text-gray-500">작업</th>
                                      )}
                                  </tr>
                                </thead>
@@ -3752,7 +3765,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                        <div className="space-y-2">
                          {displayEntries.map(([key, value, label]) => (
                            <div key={key} className="bg-card rounded-lg border p-4 shadow-sm">
-                              <div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide uppercase">
+                              <div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide">
                                {label || getColumnLabel(key)}
                              </div>
                              <div className="text-sm">{String(value)}</div>
--- a/frontend/lib/registry/components/split-panel-layout/types.ts
+++ b/frontend/lib/registry/components/split-panel-layout/types.ts
@@ -11,9 +11,13 @@ export interface AdditionalTabConfig {
  // 탭 고유 정보
  tabId: string;
  label: string;
+  langKeyId?: number; // 탭 라벨 다국어 키 ID
+  langKey?: string; // 탭 라벨 다국어 키

  // === 우측 패널과 동일한 설정 ===
  title: string;
+  titleLangKeyId?: number; // 탭 제목 다국어 키 ID
+  titleLangKey?: string; // 탭 제목 다국어 키
  panelHeaderHeight?: number;
  tableName?: string;
  dataSource?: string;
@@ -107,6 +111,8 @@ export interface SplitPanelLayoutConfig {
  // 좌측 패널 설정
  leftPanel: {
    title: string;
+    langKeyId?: number; // 다국어 키 ID
+    langKey?: string; // 다국어 키
    panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
    tableName?: string; // 데이터베이스 테이블명
    dataSource?: string; // API 엔드포인트
@@ -170,6 +176,8 @@ export interface SplitPanelLayoutConfig {
  // 우측 패널 설정
  rightPanel: {
    title: string;
+    langKeyId?: number; // 다국어 키 ID
+    langKey?: string; // 다국어 키
    panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
    tableName?: string;
    dataSource?: string;