다국어 관리 시스템 개선: 카테고리 및 키 자동 생성 기능 추가

2026-01-13 18:28:11 +09:00
parent 989b7e53a7
commit b576837f18
23 changed files with 2745 additions and 182 deletions
--- a/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
+++ b/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
@@ -5,21 +5,8 @@ import { Plus, X, Save, FolderOpen, RefreshCw, Eye, AlertCircle } from "lucide-r
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { cn } from "@/lib/utils";
@@ -100,9 +87,9 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
  const handleBlur = (field: keyof typeof localValues) => {
    const numValue = parseInt(localValues[field]) || 0;
    const clampedValue = Math.max(0, Math.min(numValue, field === "levels" ? maxLevels : maxRows));
-    
+
    setLocalValues((prev) => ({ ...prev, [field]: clampedValue.toString() }));
-    
+
    const updateField = field === "startRow" ? "startRow" : field === "endRow" ? "endRow" : "levels";
    onUpdate(condition.id, { [updateField]: clampedValue });
  };
@@ -113,10 +100,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
      <div className="flex items-center justify-between rounded-t-lg bg-blue-600 px-4 py-2 text-white">
        <span className="font-medium">조건 {index + 1}</span>
        {!readonly && (
-          <button
-            onClick={() => onRemove(condition.id)}
-            className="rounded p-1 transition-colors hover:bg-blue-700"
-          >
+          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-blue-700">
            <X className="h-4 w-4" />
          </button>
        )}
@@ -198,20 +182,18 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
  tableName,
 }) => {
  // 조건 목록
-  const [conditions, setConditions] = useState<RackLineCondition[]>(
-    config.initialConditions || []
-  );
-  
+  const [conditions, setConditions] = useState<RackLineCondition[]>(config.initialConditions || []);
+
  // 템플릿 관련 상태
  const [templates, setTemplates] = useState<RackStructureTemplate[]>([]);
  const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
  const [templateName, setTemplateName] = useState("");
  const [isSaveMode, setIsSaveMode] = useState(false);
-  
+
  // 미리보기 데이터
  const [previewData, setPreviewData] = useState<GeneratedLocation[]>([]);
  const [isPreviewGenerated, setIsPreviewGenerated] = useState(false);
-  
+
  // 기존 데이터 중복 체크 관련 상태
  const [existingLocations, setExistingLocations] = useState<ExistingLocation[]>([]);
  const [isCheckingDuplicates, setIsCheckingDuplicates] = useState(false);
@@ -270,19 +252,22 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
  }, [formData, fieldMapping]);

  // 카테고리 코드를 라벨로 변환하는 헬퍼 함수
-  const getCategoryLabel = useCallback((value: string | undefined): string | undefined => {
-    if (!value) return undefined;
-    if (isCategoryCode(value)) {
-      return categoryLabels[value] || value;
-    }
-    return value;
-  }, [categoryLabels]);
+  const getCategoryLabel = useCallback(
+    (value: string | undefined): string | undefined => {
+      if (!value) return undefined;
+      if (isCategoryCode(value)) {
+        return categoryLabels[value] || value;
+      }
+      return value;
+    },
+    [categoryLabels],
+  );

  // 필드 매핑을 통해 formData에서 컨텍스트 추출
  const context: RackStructureContext = useMemo(() => {
    // propContext가 있으면 우선 사용
    if (propContext) return propContext;
-    
+
    // formData와 fieldMapping을 사용하여 컨텍스트 생성
    if (!formData) return {};

@@ -292,22 +277,13 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
    const rawStatus = fieldMapping.statusField ? formData[fieldMapping.statusField] : undefined;

    const ctx = {
-      warehouseCode: fieldMapping.warehouseCodeField 
-        ? formData[fieldMapping.warehouseCodeField] 
-        : undefined,
-      warehouseName: fieldMapping.warehouseNameField 
-        ? formData[fieldMapping.warehouseNameField] 
-        : undefined,
-      // 카테고리 값은 라벨로 변환 (화면 표시용)
+      warehouseCode: fieldMapping.warehouseCodeField ? formData[fieldMapping.warehouseCodeField] : undefined,
+      warehouseName: fieldMapping.warehouseNameField ? formData[fieldMapping.warehouseNameField] : undefined,
+      // 카테고리 값은 라벨로 변환
      floor: getCategoryLabel(rawFloor?.toString()),
      zone: getCategoryLabel(rawZone),
      locationType: getCategoryLabel(rawLocationType),
      status: getCategoryLabel(rawStatus),
-      // 카테고리 코드 원본값 (DB 쿼리/저장용)
-      floorCode: rawFloor?.toString(),
-      zoneCode: rawZone?.toString(),
-      locationTypeCode: rawLocationType?.toString(),
-      statusCode: rawStatus?.toString(),
    };

    console.log("🏗️ [RackStructure] context 생성:", {
@@ -337,26 +313,24 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
  // 조건 추가
  const addCondition = useCallback(() => {
    if (conditions.length >= maxConditions) return;
-    
+
    // 마지막 조건의 다음 열부터 시작
    const lastCondition = conditions[conditions.length - 1];
    const startRow = lastCondition ? lastCondition.endRow + 1 : 1;
-    
+
    const newCondition: RackLineCondition = {
      id: generateId(),
      startRow,
      endRow: startRow + 2,
      levels: 3,
    };
-    
+
    setConditions((prev) => [...prev, newCondition]);
  }, [conditions, maxConditions]);

  // 조건 업데이트
  const updateCondition = useCallback((id: string, updates: Partial<RackLineCondition>) => {
-    setConditions((prev) =>
-      prev.map((cond) => (cond.id === id ? { ...cond, ...updates } : cond))
-    );
+    setConditions((prev) => prev.map((cond) => (cond.id === id ? { ...cond, ...updates } : cond)));
  }, []);

  // 조건 삭제
@@ -367,26 +341,26 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
  // 열 범위 중복 검사
  const rowOverlapErrors = useMemo(() => {
    const errors: { conditionIndex: number; overlappingWith: number; overlappingRows: number[] }[] = [];
-    
+
    for (let i = 0; i < conditions.length; i++) {
      const cond1 = conditions[i];
      if (cond1.startRow <= 0 || cond1.endRow < cond1.startRow) continue;
-      
+
      for (let j = i + 1; j < conditions.length; j++) {
        const cond2 = conditions[j];
        if (cond2.startRow <= 0 || cond2.endRow < cond2.startRow) continue;
-        
+
        // 범위 겹침 확인
        const overlapStart = Math.max(cond1.startRow, cond2.startRow);
        const overlapEnd = Math.min(cond1.endRow, cond2.endRow);
-        
+
        if (overlapStart <= overlapEnd) {
          // 겹치는 열 목록
          const overlappingRows: number[] = [];
          for (let r = overlapStart; r <= overlapEnd; r++) {
            overlappingRows.push(r);
          }
-          
+
          errors.push({
            conditionIndex: i,
            overlappingWith: j,
@@ -395,7 +369,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
        }
      }
    }
-    
+
    return errors;
  }, [conditions]);

@@ -404,12 +378,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({

  // 기존 데이터 조회를 위한 값 추출 (useMemo 객체 참조 문제 방지)
  const warehouseCodeForQuery = context.warehouseCode;
-  // DB 쿼리 시에는 카테고리 코드 사용 (코드로 통일)
-  const floorForQuery = (context as any).floorCode || context.floor;
-  const zoneForQuery = (context as any).zoneCode || context.zone;
-  // 화면 표시용 라벨
-  const floorLabel = context.floor;
-  const zoneLabel = context.zone;
+  const floorForQuery = context.floor; // 라벨 값 (예: "1층")
+  const zoneForQuery = context.zone; // 라벨 값 (예: "A구역")

  // 기존 데이터 조회 (창고/층/구역이 변경될 때마다)
  useEffect(() => {
@@ -443,19 +413,19 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({

        // 직접 apiClient 사용하여 정확한 형식으로 요청
        // 백엔드는 search를 객체로 받아서 각 필드를 WHERE 조건으로 처리
-        const response = await apiClient.post(`/table-management/tables/warehouse_location/data`, {
+        // autoFilter: true로 회사별 데이터 필터링 적용
+        const response = await apiClient.post("/table-management/tables/warehouse_location/data", {
          page: 1,
          size: 1000, // 충분히 큰 값
-          search: searchParams,  // 백엔드가 기대하는 형식 (equals 연산자로 정확한 일치)
+          search: searchParams, // 백엔드가 기대하는 형식 (equals 연산자로 정확한 일치)
+          autoFilter: true, // 회사별 데이터 필터링 (멀티테넌시)
        });

        console.log("🔍 기존 위치 데이터 응답:", response.data);

        // API 응답 구조: { success: true, data: { data: [...], total, ... } }
        const responseData = response.data?.data || response.data;
-        const dataArray = Array.isArray(responseData) 
-          ? responseData 
-          : (responseData?.data || []);
+        const dataArray = Array.isArray(responseData) ? responseData : responseData?.data || [];

        if (dataArray.length > 0) {
          const existing = dataArray.map((item: any) => ({
@@ -504,9 +474,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
    // 기존 데이터와 중복 체크
    const errors: { row: number; existingLevels: number[] }[] = [];
    plannedRows.forEach((levels, row) => {
-      const existingForRow = existingLocations.filter(
-        (loc) => parseInt(loc.row_num) === row
-      );
+      const existingForRow = existingLocations.filter((loc) => parseInt(loc.row_num) === row);
      if (existingForRow.length > 0) {
        const existingLevels = existingForRow.map((loc) => parseInt(loc.level_num));
        const duplicateLevels = levels.filter((l) => existingLevels.includes(l));
@@ -553,14 +521,14 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({

      // 코드 생성 (예: WH001-1층D구역-01-1)
      const code = `${warehouseCode}-${floor}${zone}-${row.toString().padStart(2, "0")}-${level}`;
-      
+
      // 이름 생성 - zone에 이미 "구역"이 포함되어 있으면 그대로 사용
      const zoneName = zone.includes("구역") ? zone : `${zone}구역`;
      const name = `${zoneName}-${row.toString().padStart(2, "0")}열-${level}단`;

      return { code, name };
    },
-    [context]
+    [context],
  );

  // 미리보기 생성
@@ -581,20 +549,26 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({

    // 열 범위 중복 검증
    if (hasRowOverlap) {
-      const overlapInfo = rowOverlapErrors.map((err) => {
-        const rows = err.overlappingRows.join(", ");
-        return `조건 ${err.conditionIndex + 1}과 조건 ${err.overlappingWith + 1}의 ${rows}열`;
-      }).join("\n");
+      const overlapInfo = rowOverlapErrors
+        .map((err) => {
+          const rows = err.overlappingRows.join(", ");
+          return `조건 ${err.conditionIndex + 1}과 조건 ${err.overlappingWith + 1}의 ${rows}열`;
+        })
+        .join("\n");
      alert(`열 범위가 중복됩니다:\n${overlapInfo}\n\n중복된 열을 수정해주세요.`);
      return;
    }

    // 기존 데이터와 중복 검증 - duplicateErrors 직접 체크
    if (duplicateErrors.length > 0) {
-      const duplicateInfo = duplicateErrors.map((err) => {
-        return `${err.row}열 ${err.existingLevels.join(", ")}단`;
-      }).join(", ");
-      alert(`이미 등록된 위치가 있습니다:\n${duplicateInfo}\n\n해당 열/단을 제외하고 등록하거나, 기존 데이터를 삭제해주세요.`);
+      const duplicateInfo = duplicateErrors
+        .map((err) => {
+          return `${err.row}열 ${err.existingLevels.join(", ")}단`;
+        })
+        .join(", ");
+      alert(
+        `이미 등록된 위치가 있습니다:\n${duplicateInfo}\n\n해당 열/단을 제외하고 등록하거나, 기존 데이터를 삭제해주세요.`,
+      );
      return;
    }

@@ -606,20 +580,18 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
          for (let level = 1; level <= cond.levels; level++) {
            const { code, name } = generateLocationCode(row, level);
            // 테이블 컬럼명과 동일하게 생성
-            // DB 저장 시에는 카테고리 코드 사용 (코드로 통일)
-            const ctxAny = context as any;
            locations.push({
              row_num: String(row),
              level_num: String(level),
              location_code: code,
              location_name: name,
-              location_type: ctxAny?.locationTypeCode || context?.locationType || "선반",
-              status: ctxAny?.statusCode || context?.status || "사용",
-              // 추가 필드 (테이블 컬럼명과 동일) - 카테고리 코드 사용
+              location_type: context?.locationType || "선반",
+              status: context?.status || "사용",
+              // 추가 필드 (테이블 컬럼명과 동일)
              warehouse_code: context?.warehouseCode,
              warehouse_name: context?.warehouseName,
-              floor: ctxAny?.floorCode || context?.floor,
-              zone: ctxAny?.zoneCode || context?.zone,
+              floor: context?.floor,
+              zone: context?.zone,
            });
          }
        }
@@ -634,7 +606,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({

    setPreviewData(locations);
    setIsPreviewGenerated(true);
-    
+
    console.log("🏗️ [RackStructure] 생성된 위치 데이터:", {
      locationsCount: locations.length,
      firstLocation: locations[0],
@@ -645,9 +617,19 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
        zone: context?.zone,
      },
    });
-    
+
    onChange?.(locations);
-  }, [conditions, context, generateLocationCode, onChange, missingFields, hasRowOverlap, duplicateErrors, existingLocations, rowOverlapErrors]);
+  }, [
+    conditions,
+    context,
+    generateLocationCode,
+    onChange,
+    missingFields,
+    hasRowOverlap,
+    duplicateErrors,
+    existingLocations,
+    rowOverlapErrors,
+  ]);

  // 템플릿 저장
  const saveTemplate = useCallback(() => {
@@ -682,8 +664,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="flex items-center gap-2 text-base">
-            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />
-            렉 라인 구조 설정
+            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />렉 라인 구조 설정
          </CardTitle>
          {!readonly && (
            <div className="flex items-center gap-2">
@@ -724,9 +705,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
              <AlertDescription>
                다음 필드를 먼저 입력해주세요: <strong>{missingFields.join(", ")}</strong>
                <br />
-                <span className="text-xs">
-                  (설정 패널에서 필드 매핑을 확인하세요)
-                </span>
+                <span className="text-xs">(설정 패널에서 필드 매핑을 확인하세요)</span>
              </AlertDescription>
            </Alert>
          )}
@@ -740,13 +719,12 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                <ul className="mt-1 list-inside list-disc text-xs">
                  {rowOverlapErrors.map((err, idx) => (
                    <li key={idx}>
-                      조건 {err.conditionIndex + 1}과 조건 {err.overlappingWith + 1}: {err.overlappingRows.join(", ")}열 중복
+                      조건 {err.conditionIndex + 1}과 조건 {err.overlappingWith + 1}: {err.overlappingRows.join(", ")}열
+                      중복
                    </li>
                  ))}
                </ul>
-                <span className="mt-1 block text-xs">
-                  중복된 열 범위를 수정해주세요.
-                </span>
+                <span className="mt-1 block text-xs">중복된 열 범위를 수정해주세요.</span>
              </AlertDescription>
            </Alert>
          )}
@@ -764,9 +742,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                    </li>
                  ))}
                </ul>
-                <span className="mt-1 block text-xs">
-                  해당 열/단을 제외하거나 기존 데이터를 삭제해주세요.
-                </span>
+                <span className="mt-1 block text-xs">해당 열/단을 제외하거나 기존 데이터를 삭제해주세요.</span>
              </AlertDescription>
            </Alert>
          )}
@@ -775,9 +751,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
          {isCheckingDuplicates && (
            <Alert className="mb-4">
              <AlertCircle className="h-4 w-4 animate-spin" />
-              <AlertDescription>
-                기존 위치 데이터를 확인하는 중...
-              </AlertDescription>
+              <AlertDescription>기존 위치 데이터를 확인하는 중...</AlertDescription>
            </Alert>
          )}

@@ -801,14 +775,10 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                </span>
              )}
              {context.floor && (
-                <span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">
-                  층: {context.floor}
-                </span>
+                <span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">층: {context.floor}</span>
              )}
              {context.zone && (
-                <span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">
-                  구역: {context.zone}
-                </span>
+                <span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">구역: {context.zone}</span>
              )}
              {context.locationType && (
                <span className="rounded bg-orange-100 px-2 py-1 text-xs text-orange-800">
@@ -816,9 +786,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                </span>
              )}
              {context.status && (
-                <span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">
-                  상태: {context.status}
-                </span>
+                <span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">상태: {context.status}</span>
              )}
            </div>
          )}
@@ -854,8 +822,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
              <p className="mb-4 text-gray-500">조건을 추가하여 렉 구조를 설정하세요</p>
              {!readonly && (
                <Button onClick={addCondition} className="gap-1">
-                  <Plus className="h-4 w-4" />
-                  첫 번째 조건 추가
+                  <Plus className="h-4 w-4" />첫 번째 조건 추가
                </Button>
              )}
            </div>
@@ -941,14 +908,11 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                          <TableCell className="text-center">{idx + 1}</TableCell>
                          <TableCell className="font-mono">{loc.location_code}</TableCell>
                          <TableCell>{loc.location_name}</TableCell>
-                          {/* 미리보기에서는 카테고리 코드를 라벨로 변환하여 표시 */}
-                          <TableCell className="text-center">{getCategoryLabel(loc.floor) || context?.floor || "1"}</TableCell>
-                          <TableCell className="text-center">{getCategoryLabel(loc.zone) || context?.zone || "A"}</TableCell>
-                          <TableCell className="text-center">
-                            {loc.row_num.padStart(2, "0")}
-                          </TableCell>
+                          <TableCell className="text-center">{loc.floor || context?.floor || "1"}</TableCell>
+                          <TableCell className="text-center">{loc.zone || context?.zone || "A"}</TableCell>
+                          <TableCell className="text-center">{loc.row_num.padStart(2, "0")}</TableCell>
                          <TableCell className="text-center">{loc.level_num}</TableCell>
-                          <TableCell className="text-center">{getCategoryLabel(loc.location_type) || loc.location_type}</TableCell>
+                          <TableCell className="text-center">{loc.location_type}</TableCell>
                          <TableCell className="text-center">-</TableCell>
                        </TableRow>
                      ))}
@@ -970,9 +934,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
      <Dialog open={isTemplateDialogOpen} onOpenChange={setIsTemplateDialogOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
-            <DialogTitle>
-              {isSaveMode ? "템플릿 저장" : "템플릿 관리"}
-            </DialogTitle>
+            <DialogTitle>{isSaveMode ? "템플릿 저장" : "템플릿 관리"}</DialogTitle>
          </DialogHeader>

          {isSaveMode ? (
@@ -998,11 +960,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
            <div className="space-y-4">
              {/* 저장 버튼 */}
              {conditions.length > 0 && (
-                <Button
-                  variant="outline"
-                  className="w-full gap-2"
-                  onClick={() => setIsSaveMode(true)}
-                >
+                <Button variant="outline" className="w-full gap-2" onClick={() => setIsSaveMode(true)}>
                  <Save className="h-4 w-4" />
                  현재 조건을 템플릿으로 저장
                </Button>
@@ -1020,23 +978,13 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                      >
                        <div>
                          <div className="font-medium">{template.name}</div>
-                          <div className="text-xs text-gray-500">
-                            {template.conditions.length}개 조건
-                          </div>
+                          <div className="text-xs text-gray-500">{template.conditions.length}개 조건</div>
                        </div>
                        <div className="flex gap-2">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => loadTemplate(template)}
-                          >
+                          <Button variant="outline" size="sm" onClick={() => loadTemplate(template)}>
                            불러오기
                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => deleteTemplate(template.id)}
-                          >
+                          <Button variant="ghost" size="sm" onClick={() => deleteTemplate(template.id)}>
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
@@ -1045,9 +993,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                  </ScrollArea>
                </div>
              ) : (
-                <div className="py-8 text-center text-gray-500">
-                  저장된 템플릿이 없습니다
-                </div>
+                <div className="py-8 text-center text-gray-500">저장된 템플릿이 없습니다</div>
              )}
            </div>
          )}
@@ -1065,5 +1011,3 @@ export const RackStructureWrapper: React.FC<RackStructureComponentProps> = (prop
    </div>
  );
 };
-
-