jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kjs
2026-01-13 18:28:11 +09:00
parent 989b7e53a7
commit b576837f18
23 changed files with 2745 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
View File

@@ -128,3 +128,4 @@ export default function ScreenManagementPage() {
);
}

97
frontend/app/(main)/admin/systemMng/i18nList/page.tsx
View File

@@ -7,13 +7,19 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Plus } from "lucide-react";
import { DataTable } from "@/components/common/DataTable";
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
import { useAuth } from "@/hooks/useAuth";
import LangKeyModal from "@/components/admin/LangKeyModal";
import LanguageModal from "@/components/admin/LanguageModal";
import { CategoryTree } from "@/components/admin/multilang/CategoryTree";
import { KeyGenerateModal } from "@/components/admin/multilang/KeyGenerateModal";
import { apiClient } from "@/lib/api/client";
import { LangCategory } from "@/lib/api/multilang";
interface Language {
langCode: string;
@@ -59,6 +65,10 @@ export default function I18nPage() {
const [selectedLanguages, setSelectedLanguages] = useState<Set<string>>(new Set());
const [activeTab, setActiveTab] = useState<"keys" | "languages">("keys");
// 카테고리 관련 상태
const [selectedCategory, setSelectedCategory] = useState<LangCategory | null>(null);
const [isGenerateModalOpen, setIsGenerateModalOpen] = useState(false);
const [companies, setCompanies] = useState<Array<{ code: string; name: string }>>([]);
// 회사 목록 조회
@@ -678,27 +688,70 @@ export default function I18nPage() {
{/* 다국어 키 관리 탭 */}
{activeTab === "keys" && (
<div className="grid grid-cols-1 gap-4 lg:grid-cols-10">
{/* 좌측: 언어 키 목록 (7/10) */}
<Card className="lg:col-span-7">
<CardHeader>
<div className="grid grid-cols-1 gap-4 lg:grid-cols-12">
{/* 좌측: 카테고리 트리 (2/12) */}
<Card className="lg:col-span-2">
<CardHeader className="py-3">
<div className="flex items-center justify-between">
<CardTitle>언어 키 목록</CardTitle>
<CardTitle className="text-sm">카테고리</CardTitle>
</div>
</CardHeader>
<CardContent className="p-2">
<ScrollArea className="h-[500px]">
<CategoryTree
selectedCategoryId={selectedCategory?.categoryId || null}
onSelectCategory={(cat) => setSelectedCategory(cat)}
onDoubleClickCategory={(cat) => {
setSelectedCategory(cat);
setIsGenerateModalOpen(true);
}}
/>
</ScrollArea>
</CardContent>
</Card>
{/* 중앙: 언어 키 목록 (6/12) */}
<Card className="lg:col-span-6">
<CardHeader className="py-3">
<div className="flex items-center justify-between">
<CardTitle className="text-sm">
언어 키 목록
{selectedCategory && (
<Badge variant="secondary" className="ml-2">
{selectedCategory.categoryName}
</Badge>
)}
</CardTitle>
<div className="flex space-x-2">
<Button variant="destructive" onClick={handleDeleteSelectedKeys} disabled={selectedKeys.size === 0}>
<Button
size="sm"
variant="destructive"
onClick={handleDeleteSelectedKeys}
disabled={selectedKeys.size === 0}
>
선택 삭제 ({selectedKeys.size})
</Button>
<Button onClick={handleAddKey}>새 키 추가</Button>
<Button size="sm" variant="outline" onClick={handleAddKey}>
수동 추가
</Button>
<Button
size="sm"
onClick={() => setIsGenerateModalOpen(true)}
disabled={!selectedCategory}
>
<Plus className="mr-1 h-4 w-4" />
자동 생성
</Button>
</div>
</div>
</CardHeader>
<CardContent>
<CardContent className="pt-0">
{/* 검색 필터 영역 */}
<div className="mb-2 grid grid-cols-1 gap-2 md:grid-cols-3">
<div>
<Label htmlFor="company">회사</Label>
<Label htmlFor="company" className="text-xs">회사</Label>
<Select value={selectedCompany} onValueChange={setSelectedCompany}>
<SelectTrigger>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="전체 회사" />
</SelectTrigger>
<SelectContent>
@@ -713,22 +766,22 @@ export default function I18nPage() {
</div>
<div>
<Label htmlFor="search">검색</Label>
<Label htmlFor="search" className="text-xs">검색</Label>
<Input
placeholder="키명, 설명, 메뉴, 회사로 검색..."
placeholder="키명, 설명으로 검색..."
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
className="h-8 text-xs"
/>
</div>
<div className="flex items-end">
<div className="text-sm text-muted-foreground">검색 결과: {getFilteredLangKeys().length}건</div>
<div className="text-xs text-muted-foreground">결과: {getFilteredLangKeys().length}건</div>
</div>
</div>
{/* 테이블 영역 */}
<div>
<div className="mb-2 text-sm text-muted-foreground">전체: {getFilteredLangKeys().length}건</div>
<DataTable
columns={columns}
data={getFilteredLangKeys()}
@@ -739,8 +792,8 @@ export default function I18nPage() {
</CardContent>
</Card>
{/* 우측: 선택된 키의 다국어 관리 (3/10) */}
<Card className="lg:col-span-3">
{/* 우측: 선택된 키의 다국어 관리 (4/12) */}
<Card className="lg:col-span-4">
<CardHeader>
<CardTitle>
{selectedKey ? (
@@ -817,6 +870,18 @@ export default function I18nPage() {
onSave={handleSaveLanguage}
languageData={editingLanguage}
/>
{/* 키 자동 생성 모달 */}
<KeyGenerateModal
isOpen={isGenerateModalOpen}
onClose={() => setIsGenerateModalOpen(false)}
selectedCategory={selectedCategory}
companyCode={user?.companyCode || ""}
isSuperAdmin={user?.companyCode === "*"}
onSuccess={() => {
fetchLangKeys();
}}
/>
</div>
</div>
</div>

199
frontend/components/admin/multilang/CategoryTree.tsx Normal file
View File

@@ -0,0 +1,199 @@
"use client";
import { useState, useEffect } from "react";
import { ChevronRight, ChevronDown, Folder, FolderOpen, Tag } from "lucide-react";
import { cn } from "@/lib/utils";
import { LangCategory, getCategories } from "@/lib/api/multilang";
interface CategoryTreeProps {
selectedCategoryId: number | null;
onSelectCategory: (category: LangCategory | null) => void;
onDoubleClickCategory?: (category: LangCategory) => void;
}
interface CategoryNodeProps {
category: LangCategory;
level: number;
selectedCategoryId: number | null;
onSelectCategory: (category: LangCategory) => void;
onDoubleClickCategory?: (category: LangCategory) => void;
}
function CategoryNode({
category,
level,
selectedCategoryId,
onSelectCategory,
onDoubleClickCategory,
}: CategoryNodeProps) {
const [isExpanded, setIsExpanded] = useState(true);
const hasChildren = category.children && category.children.length > 0;
const isSelected = selectedCategoryId === category.categoryId;
return (
<div>
<div
className={cn(
"flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors",
isSelected
? "bg-primary text-primary-foreground"
: "hover:bg-muted"
)}
style={{ paddingLeft: `${level * 16 + 8}px` }}
onClick={() => onSelectCategory(category)}
onDoubleClick={() => onDoubleClickCategory?.(category)}
>
{/* 확장/축소 아이콘 */}
{hasChildren ? (
<button
className="shrink-0"
onClick={(e) => {
e.stopPropagation();
setIsExpanded(!isExpanded);
}}
>
{isExpanded ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</button>
) : (
<span className="w-4" />
)}
{/* 폴더/태그 아이콘 */}
{hasChildren || level === 0 ? (
isExpanded ? (
<FolderOpen className="h-4 w-4 shrink-0 text-amber-500" />
) : (
<Folder className="h-4 w-4 shrink-0 text-amber-500" />
)
) : (
<Tag className="h-4 w-4 shrink-0 text-blue-500" />
)}
{/* 카테고리 이름 */}
<span className="truncate">{category.categoryName}</span>
{/* prefix 표시 */}
<span
className={cn(
"ml-auto text-xs",
isSelected ? "text-primary-foreground/70" : "text-muted-foreground"
)}
>
{category.keyPrefix}
</span>
</div>
{/* 자식 카테고리 */}
{hasChildren && isExpanded && (
<div>
{category.children!.map((child) => (
<CategoryNode
key={child.categoryId}
category={child}
level={level + 1}
selectedCategoryId={selectedCategoryId}
onSelectCategory={onSelectCategory}
onDoubleClickCategory={onDoubleClickCategory}
/>
))}
</div>
)}
</div>
);
}
export function CategoryTree({
selectedCategoryId,
onSelectCategory,
onDoubleClickCategory,
}: CategoryTreeProps) {
const [categories, setCategories] = useState<LangCategory[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
loadCategories();
}, []);
const loadCategories = async () => {
try {
setLoading(true);
const response = await getCategories();
if (response.success && response.data) {
setCategories(response.data);
} else {
setError(response.error?.details || "카테고리 로드 실패");
}
} catch (err) {
setError("카테고리 로드 중 오류 발생");
} finally {
setLoading(false);
}
};
if (loading) {
return (
<div className="flex h-32 items-center justify-center">
<div className="animate-pulse text-sm text-muted-foreground">
카테고리 로딩 중...
</div>
</div>
);
}
if (error) {
return (
<div className="flex h-32 items-center justify-center">
<div className="text-sm text-destructive">{error}</div>
</div>
);
}
if (categories.length === 0) {
return (
<div className="flex h-32 items-center justify-center">
<div className="text-sm text-muted-foreground">
카테고리가 없습니다
</div>
</div>
);
}
return (
<div className="space-y-0.5">
{/* 전체 선택 옵션 */}
<div
className={cn(
"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
selectedCategoryId === null
? "bg-primary text-primary-foreground"
: "hover:bg-muted"
)}
onClick={() => onSelectCategory(null)}
>
<Folder className="h-4 w-4 shrink-0" />
<span>전체</span>
</div>
{/* 카테고리 트리 */}
{categories.map((category) => (
<CategoryNode
key={category.categoryId}
category={category}
level={0}
selectedCategoryId={selectedCategoryId}
onSelectCategory={onSelectCategory}
onDoubleClickCategory={onDoubleClickCategory}
/>
))}
</div>
);
}
export default CategoryTree;

497
frontend/components/admin/multilang/KeyGenerateModal.tsx Normal file
View File

@@ -0,0 +1,497 @@
"use client";
import { useState, useEffect, useCallback } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} 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 { Alert, AlertDescription } from "@/components/ui/alert";
import { Loader2, AlertCircle, CheckCircle2, Info, Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import {
LangCategory,
Language,
generateKey,
previewKey,
createOverrideKey,
getLanguages,
getCategoryPath,
KeyPreview,
} from "@/lib/api/multilang";
import { apiClient } from "@/lib/api/client";
interface Company {
companyCode: string;
companyName: string;
}
interface KeyGenerateModalProps {
isOpen: boolean;
onClose: () => void;
selectedCategory: LangCategory | null;
companyCode: string;
isSuperAdmin: boolean;
onSuccess: () => void;
}
export function KeyGenerateModal({
isOpen,
onClose,
selectedCategory,
companyCode,
isSuperAdmin,
onSuccess,
}: KeyGenerateModalProps) {
// 상태
const [keyMeaning, setKeyMeaning] = useState("");
const [usageNote, setUsageNote] = useState("");
const [targetCompanyCode, setTargetCompanyCode] = useState(companyCode);
const [languages, setLanguages] = useState<Language[]>([]);
const [texts, setTexts] = useState<Record<string, string>>({});
const [categoryPath, setCategoryPath] = useState<LangCategory[]>([]);
const [preview, setPreview] = useState<KeyPreview | null>(null);
const [loading, setLoading] = useState(false);
const [previewLoading, setPreviewLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [companies, setCompanies] = useState<Company[]>([]);
const [companySearchOpen, setCompanySearchOpen] = useState(false);
// 초기화
useEffect(() => {
if (isOpen) {
setKeyMeaning("");
setUsageNote("");
setTargetCompanyCode(isSuperAdmin ? "*" : companyCode);
setTexts({});
setPreview(null);
setError(null);
loadLanguages();
if (isSuperAdmin) {
loadCompanies();
}
if (selectedCategory) {
loadCategoryPath(selectedCategory.categoryId);
} else {
setCategoryPath([]);
}
}
}, [isOpen, selectedCategory, companyCode, isSuperAdmin]);
// 회사 목록 로드 (최고관리자 전용)
const loadCompanies = async () => {
try {
const response = await apiClient.get("/admin/companies");
if (response.data.success && response.data.data) {
// snake_case를 camelCase로 변환하고 공통(*)은 제외
const companyList = response.data.data
.filter((c: any) => c.company_code !== "*")
.map((c: any) => ({
companyCode: c.company_code,
companyName: c.company_name,
}));
setCompanies(companyList);
}
} catch (err) {
console.error("회사 목록 로드 실패:", err);
}
};
// 언어 목록 로드
const loadLanguages = async () => {
const response = await getLanguages();
if (response.success && response.data) {
const activeLanguages = response.data.filter((l) => l.isActive === "Y");
setLanguages(activeLanguages);
// 초기 텍스트 상태 설정
const initialTexts: Record<string, string> = {};
activeLanguages.forEach((lang) => {
initialTexts[lang.langCode] = "";
});
setTexts(initialTexts);
}
};
// 카테고리 경로 로드
const loadCategoryPath = async (categoryId: number) => {
const response = await getCategoryPath(categoryId);
if (response.success && response.data) {
setCategoryPath(response.data);
}
};
// 키 미리보기 (디바운스)
const loadPreview = useCallback(async () => {
if (!selectedCategory || !keyMeaning.trim()) {
setPreview(null);
return;
}
setPreviewLoading(true);
try {
const response = await previewKey(
selectedCategory.categoryId,
keyMeaning.trim().toLowerCase().replace(/\s+/g, "_"),
targetCompanyCode
);
if (response.success && response.data) {
setPreview(response.data);
}
} catch (err) {
console.error("키 미리보기 실패:", err);
} finally {
setPreviewLoading(false);
}
}, [selectedCategory, keyMeaning, targetCompanyCode]);
// keyMeaning 변경 시 디바운스로 미리보기 로드
useEffect(() => {
const timer = setTimeout(loadPreview, 500);
return () => clearTimeout(timer);
}, [loadPreview]);
// 텍스트 변경 핸들러
const handleTextChange = (langCode: string, value: string) => {
setTexts((prev) => ({ ...prev, [langCode]: value }));
};
// 저장 핸들러
const handleSave = async () => {
if (!selectedCategory) {
setError("카테고리를 선택해주세요");
return;
}
if (!keyMeaning.trim()) {
setError("키 의미를 입력해주세요");
return;
}
// 최소 하나의 텍스트 입력 검증
const hasText = Object.values(texts).some((t) => t.trim());
if (!hasText) {
setError("최소 하나의 언어에 대한 텍스트를 입력해주세요");
return;
}
setLoading(true);
setError(null);
try {
// 오버라이드 모드인지 확인
if (preview?.isOverride && preview.baseKeyId) {
// 오버라이드 키 생성
const response = await createOverrideKey({
companyCode: targetCompanyCode,
baseKeyId: preview.baseKeyId,
texts: Object.entries(texts)
.filter(([_, text]) => text.trim())
.map(([langCode, langText]) => ({ langCode, langText })),
});
if (response.success) {
onSuccess();
onClose();
} else {
setError(response.error?.details || "오버라이드 키 생성 실패");
}
} else {
// 새 키 생성
const response = await generateKey({
companyCode: targetCompanyCode,
categoryId: selectedCategory.categoryId,
keyMeaning: keyMeaning.trim().toLowerCase().replace(/\s+/g, "_"),
usageNote: usageNote.trim() || undefined,
texts: Object.entries(texts)
.filter(([_, text]) => text.trim())
.map(([langCode, langText]) => ({ langCode, langText })),
});
if (response.success) {
onSuccess();
onClose();
} else {
setError(response.error?.details || "키 생성 실패");
}
}
} catch (err: any) {
setError(err.message || "키 생성 중 오류 발생");
} finally {
setLoading(false);
}
};
// 생성될 키 미리보기
const generatedKeyPreview = categoryPath.length > 0 && keyMeaning.trim()
? [...categoryPath.map((c) => c.keyPrefix), keyMeaning.trim().toLowerCase().replace(/\s+/g, "_")].join(".")
: "";
return (
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
<DialogHeader>
<DialogTitle className="text-base sm:text-lg">
{preview?.isOverride ? "오버라이드 키 생성" : "다국어 키 생성"}
</DialogTitle>
<DialogDescription className="text-xs sm:text-sm">
{preview?.isOverride
? "공통 키에 대한 회사별 오버라이드를 생성합니다"
: "새로운 다국어 키를 자동으로 생성합니다"}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-2">
{/* 카테고리 경로 표시 */}
<div>
<Label className="text-xs sm:text-sm">카테고리</Label>
<div className="mt-1 flex flex-wrap gap-1">
{categoryPath.length > 0 ? (
categoryPath.map((cat, idx) => (
<span key={cat.categoryId} className="flex items-center">
<Badge variant="secondary" className="text-xs">
{cat.categoryName}
</Badge>
{idx < categoryPath.length - 1 && (
<span className="mx-1 text-muted-foreground">/</span>
)}
</span>
))
) : (
<span className="text-sm text-muted-foreground">
카테고리를 선택해주세요
</span>
)}
</div>
</div>
{/* 키 의미 입력 */}
<div>
<Label htmlFor="keyMeaning" className="text-xs sm:text-sm">
키 의미 *
</Label>
<Input
id="keyMeaning"
value={keyMeaning}
onChange={(e) => setKeyMeaning(e.target.value)}
placeholder="예: add_new_item, search_button, save_success"
className="h-8 text-xs sm:h-10 sm:text-sm"
/>
<p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
영문 소문자와 밑줄(_)을 사용하세요
</p>
</div>
{/* 생성될 키 미리보기 */}
{generatedKeyPreview && (
<div className={cn(
"rounded-md border p-3",
preview?.exists
? "border-destructive bg-destructive/10"
: preview?.isOverride
? "border-blue-500 bg-blue-500/10"
: "border-green-500 bg-green-500/10"
)}>
<div className="flex items-center gap-2">
{previewLoading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : preview?.exists ? (
<AlertCircle className="h-4 w-4 text-destructive" />
) : preview?.isOverride ? (
<Info className="h-4 w-4 text-blue-500" />
) : (
<CheckCircle2 className="h-4 w-4 text-green-500" />
)}
<code className="text-xs font-mono sm:text-sm">
{generatedKeyPreview}
</code>
</div>
{preview?.exists && (
<p className="mt-1 text-xs text-destructive">
이미 존재하는 키입니다
</p>
)}
{preview?.isOverride && !preview?.exists && (
<p className="mt-1 text-xs text-blue-600">
공통 키가 존재합니다. 회사별 오버라이드로 생성됩니다.
</p>
)}
</div>
)}
{/* 대상 회사 선택 (최고 관리자만) */}
{isSuperAdmin && (
<div>
<Label className="text-xs sm:text-sm">대상</Label>
<div className="mt-1">
<Popover open={companySearchOpen} onOpenChange={setCompanySearchOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={companySearchOpen}
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
>
{targetCompanyCode === "*"
? "공통 (*) - 모든 회사 적용"
: companies.find((c) => c.companyCode === targetCompanyCode)
? `${companies.find((c) => c.companyCode === targetCompanyCode)?.companyName} (${targetCompanyCode})`
: "대상 선택"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent
className="p-0"
style={{ width: "var(--radix-popover-trigger-width)" }}
align="start"
>
<Command>
<CommandInput placeholder="회사 검색..." className="text-xs sm:text-sm" />
<CommandList>
<CommandEmpty className="py-2 text-center text-xs sm:text-sm">
검색 결과가 없습니다
</CommandEmpty>
<CommandGroup>
<CommandItem
value="공통"
onSelect={() => {
setTargetCompanyCode("*");
setCompanySearchOpen(false);
}}
className="text-xs sm:text-sm"
>
<Check
className={cn(
"mr-2 h-4 w-4",
targetCompanyCode === "*" ? "opacity-100" : "opacity-0"
)}
/>
공통 (*) - 모든 회사 적용
</CommandItem>
{companies.map((company) => (
<CommandItem
key={company.companyCode}
value={`${company.companyName} ${company.companyCode}`}
onSelect={() => {
setTargetCompanyCode(company.companyCode);
setCompanySearchOpen(false);
}}
className="text-xs sm:text-sm"
>
<Check
className={cn(
"mr-2 h-4 w-4",
targetCompanyCode === company.companyCode ? "opacity-100" : "opacity-0"
)}
/>
{company.companyName} ({company.companyCode})
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
)}
{/* 사용 메모 */}
<div>
<Label htmlFor="usageNote" className="text-xs sm:text-sm">
사용 메모 (선택)
</Label>
<Textarea
id="usageNote"
value={usageNote}
onChange={(e) => setUsageNote(e.target.value)}
placeholder="이 키가 어디서 사용되는지 메모"
className="h-16 resize-none text-xs sm:text-sm"
/>
</div>
{/* 번역 텍스트 입력 */}
<div>
<Label className="text-xs sm:text-sm">번역 텍스트 *</Label>
<div className="mt-2 space-y-2">
{languages.map((lang) => (
<div key={lang.langCode} className="flex items-center gap-2">
<Badge variant="outline" className="w-12 justify-center text-xs">
{lang.langCode}
</Badge>
<Input
value={texts[lang.langCode] || ""}
onChange={(e) => handleTextChange(lang.langCode, e.target.value)}
placeholder={`${lang.langName} 텍스트`}
className="h-8 flex-1 text-xs sm:h-9 sm:text-sm"
/>
</div>
))}
</div>
</div>
{/* 에러 메시지 */}
{error && (
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertDescription className="text-xs sm:text-sm">
{error}
</AlertDescription>
</Alert>
)}
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button
variant="outline"
onClick={onClose}
disabled={loading}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
취소
</Button>
<Button
onClick={handleSave}
disabled={loading || !selectedCategory || !keyMeaning.trim() || preview?.exists}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
{loading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
생성 중...
</>
) : preview?.isOverride ? (
"오버라이드 생성"
) : (
"키 생성"
)}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
export default KeyGenerateModal;

1
frontend/contexts/ActiveTabContext.tsx
View File

@@ -141,3 +141,4 @@ export const useActiveTabOptional = () => {

1
frontend/hooks/useAutoFill.ts
View File

@@ -198,3 +198,4 @@ export function applyAutoFillToFormData(

362
frontend/lib/api/multilang.ts Normal file
View File

@@ -0,0 +1,362 @@
/**
* 다국어 관리 API 클라이언트
* 카테고리, 키 자동 생성, 오버라이드 등 확장 기능 포함
*/
import { apiClient } from "./client";
// =====================================================
// 타입 정의
// =====================================================
export interface Language {
langCode: string;
langName: string;
langNative: string;
isActive: string;
sortOrder?: number;
}
export interface LangCategory {
categoryId: number;
categoryCode: string;
categoryName: string;
parentId?: number | null;
level: number;
keyPrefix: string;
description?: string;
sortOrder: number;
isActive: string;
children?: LangCategory[];
}
export interface LangKey {
keyId?: number;
companyCode: string;
menuName?: string;
langKey: string;
description?: string;
isActive: string;
categoryId?: number;
keyMeaning?: string;
usageNote?: string;
baseKeyId?: number;
createdDate?: Date;
}
export interface LangText {
textId?: number;
keyId: number;
langCode: string;
langText: string;
isActive: string;
}
export interface GenerateKeyRequest {
companyCode: string;
categoryId: number;
keyMeaning: string;
usageNote?: string;
texts: Array<{
langCode: string;
langText: string;
}>;
}
export interface CreateOverrideKeyRequest {
companyCode: string;
baseKeyId: number;
texts: Array<{
langCode: string;
langText: string;
}>;
}
export interface KeyPreview {
langKey: string;
exists: boolean;
isOverride: boolean;
baseKeyId?: number;
}
export interface ApiResponse<T> {
success: boolean;
message?: string;
data?: T;
error?: {
code: string;
details?: any;
};
}
// =====================================================
// 카테고리 관련 API
// =====================================================
/**
* 카테고리 트리 조회
*/
export async function getCategories(): Promise<ApiResponse<LangCategory[]>> {
try {
const response = await apiClient.get("/multilang/categories");
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "CATEGORY_FETCH_ERROR",
details: error.message,
},
};
}
}
/**
* 카테고리 상세 조회
*/
export async function getCategoryById(categoryId: number): Promise<ApiResponse<LangCategory>> {
try {
const response = await apiClient.get(`/multilang/categories/${categoryId}`);
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "CATEGORY_FETCH_ERROR",
details: error.message,
},
};
}
}
/**
* 카테고리 경로 조회 (부모 포함)
*/
export async function getCategoryPath(categoryId: number): Promise<ApiResponse<LangCategory[]>> {
try {
const response = await apiClient.get(`/multilang/categories/${categoryId}/path`);
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "CATEGORY_PATH_ERROR",
details: error.message,
},
};
}
}
// =====================================================
// 언어 관련 API
// =====================================================
/**
* 언어 목록 조회
*/
export async function getLanguages(): Promise<ApiResponse<Language[]>> {
try {
const response = await apiClient.get("/multilang/languages");
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "LANGUAGE_FETCH_ERROR",
details: error.message,
},
};
}
}
// =====================================================
// 키 관련 API
// =====================================================
/**
* 다국어 키 목록 조회
*/
export async function getLangKeys(params?: {
companyCode?: string;
menuCode?: string;
categoryId?: number;
searchText?: string;
}): Promise<ApiResponse<LangKey[]>> {
try {
const queryParams = new URLSearchParams();
if (params?.companyCode) queryParams.append("companyCode", params.companyCode);
if (params?.menuCode) queryParams.append("menuCode", params.menuCode);
if (params?.categoryId) queryParams.append("categoryId", params.categoryId.toString());
if (params?.searchText) queryParams.append("searchText", params.searchText);
const url = `/multilang/keys${queryParams.toString() ? `?${queryParams.toString()}` : ""}`;
const response = await apiClient.get(url);
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "KEYS_FETCH_ERROR",
details: error.message,
},
};
}
}
/**
* 키의 텍스트 조회
*/
export async function getLangTexts(keyId: number): Promise<ApiResponse<LangText[]>> {
try {
const response = await apiClient.get(`/multilang/keys/${keyId}/texts`);
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "TEXTS_FETCH_ERROR",
details: error.message,
},
};
}
}
/**
* 키 자동 생성
*/
export async function generateKey(data: GenerateKeyRequest): Promise<ApiResponse<number>> {
try {
const response = await apiClient.post("/multilang/keys/generate", data);
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "KEY_GENERATE_ERROR",
details: error.response?.data?.error?.details || error.message,
},
};
}
}
/**
* 키 미리보기
*/
export async function previewKey(
categoryId: number,
keyMeaning: string,
companyCode: string
): Promise<ApiResponse<KeyPreview>> {
try {
const response = await apiClient.post("/multilang/keys/preview", {
categoryId,
keyMeaning,
companyCode,
});
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "KEY_PREVIEW_ERROR",
details: error.message,
},
};
}
}
/**
* 오버라이드 키 생성
*/
export async function createOverrideKey(
data: CreateOverrideKeyRequest
): Promise<ApiResponse<number>> {
try {
const response = await apiClient.post("/multilang/keys/override", data);
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "OVERRIDE_CREATE_ERROR",
details: error.response?.data?.error?.details || error.message,
},
};
}
}
/**
* 회사별 오버라이드 키 목록 조회
*/
export async function getOverrideKeys(companyCode: string): Promise<ApiResponse<LangKey[]>> {
try {
const response = await apiClient.get(`/multilang/keys/overrides/${companyCode}`);
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "OVERRIDE_KEYS_FETCH_ERROR",
details: error.message,
},
};
}
}
/**
* 키 텍스트 저장
*/
export async function saveLangTexts(
keyId: number,
texts: Array<{ langCode: string; langText: string }>
): Promise<ApiResponse<string>> {
try {
const response = await apiClient.post(`/multilang/keys/${keyId}/texts`, { texts });
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "TEXTS_SAVE_ERROR",
details: error.message,
},
};
}
}
/**
* 키 삭제
*/
export async function deleteLangKey(keyId: number): Promise<ApiResponse<string>> {
try {
const response = await apiClient.delete(`/multilang/keys/${keyId}`);
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "KEY_DELETE_ERROR",
details: error.message,
},
};
}
}
/**
* 키 상태 토글
*/
export async function toggleLangKey(keyId: number): Promise<ApiResponse<string>> {
try {
const response = await apiClient.put(`/multilang/keys/${keyId}/toggle`);
return response.data;
} catch (error: any) {
return {
success: false,
error: {
code: "KEY_TOGGLE_ERROR",
details: error.message,
},
};
}
}

248
frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
View File

@@ -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>
);
};