860 lines
28 KiB
TypeScript
860 lines
28 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Button } from "@/components/ui/button";
|
||
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 { DataTable } from "@/components/common/DataTable";
|
||
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
|
||
import { useAuth } from "@/hooks/useAuth";
|
||
import LangKeyModal from "./LangKeyModal";
|
||
import LanguageModal from "./LanguageModal";
|
||
import { apiClient } from "@/lib/api/client";
|
||
|
||
interface Language {
|
||
langCode: string;
|
||
langName: string;
|
||
langNative: string;
|
||
isActive: string;
|
||
}
|
||
|
||
interface LangKey {
|
||
keyId: number;
|
||
companyCode: string;
|
||
menuName: string;
|
||
langKey: string;
|
||
description: string;
|
||
isActive: string;
|
||
}
|
||
|
||
interface LangText {
|
||
textId: number;
|
||
keyId: number;
|
||
langCode: string;
|
||
langText: string;
|
||
isActive: string;
|
||
}
|
||
|
||
export default function MultiLangPage() {
|
||
const { user } = useAuth();
|
||
const [loading, setLoading] = useState(true);
|
||
const [languages, setLanguages] = useState<Language[]>([]);
|
||
const [langKeys, setLangKeys] = useState<LangKey[]>([]);
|
||
const [selectedKey, setSelectedKey] = useState<LangKey | null>(null);
|
||
const [langTexts, setLangTexts] = useState<LangText[]>([]);
|
||
const [editingTexts, setEditingTexts] = useState<LangText[]>([]);
|
||
const [selectedCompany, setSelectedCompany] = useState("all");
|
||
const [searchText, setSearchText] = useState("");
|
||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||
const [editingKey, setEditingKey] = useState<LangKey | null>(null);
|
||
const [selectedKeys, setSelectedKeys] = useState<Set<number>>(new Set());
|
||
|
||
// 언어 관리 관련 상태
|
||
const [isLanguageModalOpen, setIsLanguageModalOpen] = useState(false);
|
||
const [editingLanguage, setEditingLanguage] = useState<Language | null>(null);
|
||
const [selectedLanguages, setSelectedLanguages] = useState<Set<string>>(new Set());
|
||
const [activeTab, setActiveTab] = useState<"keys" | "languages">("keys");
|
||
|
||
const [companies, setCompanies] = useState<Array<{ code: string; name: string }>>([]);
|
||
|
||
// 회사 목록 조회
|
||
const fetchCompanies = async () => {
|
||
try {
|
||
console.log("회사 목록 조회 시작");
|
||
const response = await apiClient.get("/admin/companies");
|
||
console.log("회사 목록 응답 데이터:", response.data);
|
||
|
||
const data = response.data;
|
||
if (data.success) {
|
||
const companyList = data.data.map((company: any) => ({
|
||
code: company.company_code,
|
||
name: company.company_name,
|
||
}));
|
||
console.log("변환된 회사 목록:", companyList);
|
||
setCompanies(companyList);
|
||
} else {
|
||
console.error("회사 목록 조회 실패:", data.message);
|
||
}
|
||
} catch (error) {
|
||
console.error("회사 목록 조회 실패:", error);
|
||
}
|
||
};
|
||
|
||
// 언어 목록 조회
|
||
const fetchLanguages = async () => {
|
||
try {
|
||
const response = await apiClient.get("/multilang/languages");
|
||
const data = response.data;
|
||
if (data.success) {
|
||
setLanguages(data.data);
|
||
}
|
||
} catch (error) {
|
||
console.error("언어 목록 조회 실패:", error);
|
||
}
|
||
};
|
||
|
||
// 다국어 키 목록 조회
|
||
const fetchLangKeys = async () => {
|
||
try {
|
||
const response = await apiClient.get("/multilang/keys");
|
||
const data = response.data;
|
||
if (data.success) {
|
||
console.log("✅ 전체 키 목록 로드:", data.data.length, "개");
|
||
setLangKeys(data.data);
|
||
} else {
|
||
console.error("❌ 키 목록 로드 실패:", data.message);
|
||
}
|
||
} catch (error) {
|
||
console.error("다국어 키 목록 조회 실패:", error);
|
||
}
|
||
};
|
||
|
||
// 필터링된 데이터 계산 - 메뉴관리와 동일한 방식
|
||
const getFilteredLangKeys = () => {
|
||
let filteredKeys = langKeys;
|
||
|
||
// 회사 필터링
|
||
if (selectedCompany && selectedCompany !== "all") {
|
||
filteredKeys = filteredKeys.filter((key) => key.companyCode === selectedCompany);
|
||
}
|
||
|
||
// 텍스트 검색 필터링
|
||
if (searchText.trim()) {
|
||
const searchLower = searchText.toLowerCase();
|
||
filteredKeys = filteredKeys.filter((key) => {
|
||
const langKey = (key.langKey || "").toLowerCase();
|
||
const description = (key.description || "").toLowerCase();
|
||
const menuName = (key.menuName || "").toLowerCase();
|
||
const companyName = companies.find((c) => c.code === key.companyCode)?.name?.toLowerCase() || "";
|
||
|
||
return (
|
||
langKey.includes(searchLower) ||
|
||
description.includes(searchLower) ||
|
||
menuName.includes(searchLower) ||
|
||
companyName.includes(searchLower)
|
||
);
|
||
});
|
||
}
|
||
|
||
return filteredKeys;
|
||
};
|
||
|
||
// 선택된 키의 다국어 텍스트 조회
|
||
const fetchLangTexts = async (keyId: number) => {
|
||
try {
|
||
console.log("다국어 텍스트 조회 시작: keyId =", keyId);
|
||
const response = await apiClient.get(`/multilang/keys/${keyId}/texts`);
|
||
const data = response.data;
|
||
console.log("다국어 텍스트 조회 응답:", data);
|
||
if (data.success) {
|
||
setLangTexts(data.data);
|
||
// 편집용 텍스트 초기화
|
||
const editingData = data.data.map((text: LangText) => ({ ...text }));
|
||
setEditingTexts(editingData);
|
||
console.log("편집용 텍스트 설정:", editingData);
|
||
}
|
||
} catch (error) {
|
||
console.error("다국어 텍스트 조회 실패:", error);
|
||
}
|
||
};
|
||
|
||
// 언어 키 선택 처리
|
||
const handleKeySelect = (key: LangKey) => {
|
||
console.log("언어 키 선택:", key);
|
||
setSelectedKey(key);
|
||
fetchLangTexts(key.keyId);
|
||
};
|
||
|
||
// 디버깅용 useEffect
|
||
useEffect(() => {
|
||
if (selectedKey) {
|
||
console.log("선택된 키 변경:", selectedKey);
|
||
console.log("언어 목록:", languages);
|
||
console.log("편집 텍스트:", editingTexts);
|
||
}
|
||
}, [selectedKey, languages, editingTexts]);
|
||
|
||
// 텍스트 변경 처리
|
||
const handleTextChange = (langCode: string, value: string) => {
|
||
const newEditingTexts = [...editingTexts];
|
||
const existingIndex = newEditingTexts.findIndex((t) => t.langCode === langCode);
|
||
|
||
if (existingIndex >= 0) {
|
||
newEditingTexts[existingIndex].langText = value;
|
||
} else {
|
||
newEditingTexts.push({
|
||
textId: 0,
|
||
keyId: selectedKey!.keyId,
|
||
langCode: langCode,
|
||
langText: value,
|
||
isActive: "Y",
|
||
});
|
||
}
|
||
|
||
setEditingTexts(newEditingTexts);
|
||
};
|
||
|
||
// 텍스트 저장
|
||
const handleSave = async () => {
|
||
if (!selectedKey) return;
|
||
|
||
try {
|
||
// 백엔드가 기대하는 형식으로 데이터 변환
|
||
const requestData = {
|
||
texts: editingTexts.map((text) => ({
|
||
langCode: text.langCode,
|
||
langText: text.langText,
|
||
isActive: text.isActive || "Y",
|
||
createdBy: user?.userId || "system",
|
||
updatedBy: user?.userId || "system",
|
||
})),
|
||
};
|
||
|
||
const response = await apiClient.post(`/multilang/keys/${selectedKey.keyId}/texts`, requestData);
|
||
const data = response.data;
|
||
if (data.success) {
|
||
alert("저장되었습니다.");
|
||
// 저장 후 다시 조회
|
||
fetchLangTexts(selectedKey.keyId);
|
||
}
|
||
} catch (error) {
|
||
console.error("텍스트 저장 실패:", error);
|
||
alert("저장에 실패했습니다.");
|
||
}
|
||
};
|
||
|
||
// 언어 키 추가/수정 모달 열기
|
||
const handleAddKey = () => {
|
||
setEditingKey(null); // 새 키 추가는 null로 설정
|
||
setIsModalOpen(true);
|
||
};
|
||
|
||
// 언어 추가/수정 모달 열기
|
||
const handleAddLanguage = () => {
|
||
setEditingLanguage(null);
|
||
setIsLanguageModalOpen(true);
|
||
};
|
||
|
||
// 언어 수정
|
||
const handleEditLanguage = (language: Language) => {
|
||
setEditingLanguage(language);
|
||
setIsLanguageModalOpen(true);
|
||
};
|
||
|
||
// 언어 저장 (추가/수정)
|
||
const handleSaveLanguage = async (languageData: any) => {
|
||
try {
|
||
const requestData = {
|
||
...languageData,
|
||
createdBy: user?.userId || "admin",
|
||
updatedBy: user?.userId || "admin",
|
||
};
|
||
|
||
let response;
|
||
if (editingLanguage) {
|
||
response = await apiClient.put(`/multilang/languages/${editingLanguage.langCode}`, requestData);
|
||
} else {
|
||
response = await apiClient.post("/multilang/languages", requestData);
|
||
}
|
||
|
||
const result = response.data;
|
||
|
||
if (result.success) {
|
||
alert(editingLanguage ? "언어가 수정되었습니다." : "언어가 추가되었습니다.");
|
||
setIsLanguageModalOpen(false);
|
||
fetchLanguages(); // 언어 목록 새로고침
|
||
} else {
|
||
alert(`오류: ${result.message}`);
|
||
}
|
||
} catch (error) {
|
||
console.error("언어 저장 중 오류:", error);
|
||
alert("언어 저장 중 오류가 발생했습니다.");
|
||
}
|
||
};
|
||
|
||
// 언어 삭제
|
||
const handleDeleteLanguages = async () => {
|
||
if (selectedLanguages.size === 0) {
|
||
alert("삭제할 언어를 선택해주세요.");
|
||
return;
|
||
}
|
||
|
||
if (
|
||
!confirm(
|
||
`선택된 ${selectedLanguages.size}개의 언어를 영구적으로 삭제하시겠습니까?\n이 작업은 되돌릴 수 없습니다.`,
|
||
)
|
||
) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const deletePromises = Array.from(selectedLanguages).map((langCode) =>
|
||
apiClient.delete(`/admin/multilang/languages/${langCode}`),
|
||
);
|
||
|
||
const responses = await Promise.all(deletePromises);
|
||
const failedDeletes = responses.filter((response) => !response.data.success);
|
||
|
||
if (failedDeletes.length === 0) {
|
||
alert("선택된 언어가 삭제되었습니다.");
|
||
setSelectedLanguages(new Set());
|
||
fetchLanguages(); // 언어 목록 새로고침
|
||
} else {
|
||
alert(`${failedDeletes.length}개의 언어 삭제에 실패했습니다.`);
|
||
}
|
||
} catch (error) {
|
||
console.error("언어 삭제 중 오류:", error);
|
||
alert("언어 삭제 중 오류가 발생했습니다.");
|
||
}
|
||
};
|
||
|
||
// 언어 선택 체크박스 처리
|
||
const handleLanguageCheckboxChange = (langCode: string, checked: boolean) => {
|
||
const newSelected = new Set(selectedLanguages);
|
||
if (checked) {
|
||
newSelected.add(langCode);
|
||
} else {
|
||
newSelected.delete(langCode);
|
||
}
|
||
setSelectedLanguages(newSelected);
|
||
};
|
||
|
||
// 언어 전체 선택/해제
|
||
const handleSelectAllLanguages = (checked: boolean) => {
|
||
if (checked) {
|
||
setSelectedLanguages(new Set(languages.map((lang) => lang.langCode)));
|
||
} else {
|
||
setSelectedLanguages(new Set());
|
||
}
|
||
};
|
||
|
||
// 언어 키 수정 모달 열기
|
||
const handleEditKey = (key: LangKey) => {
|
||
setEditingKey(key);
|
||
setIsModalOpen(true);
|
||
};
|
||
|
||
// 언어 키 저장 (추가/수정)
|
||
const handleSaveKey = async (keyData: any) => {
|
||
try {
|
||
const requestData = {
|
||
...keyData,
|
||
createdBy: user?.userId || "admin",
|
||
updatedBy: user?.userId || "admin",
|
||
};
|
||
|
||
let response;
|
||
if (editingKey) {
|
||
response = await apiClient.put(`/multilang/keys/${editingKey.keyId}`, requestData);
|
||
} else {
|
||
response = await apiClient.post("/multilang/keys", requestData);
|
||
}
|
||
|
||
const data = response.data;
|
||
|
||
if (data.success) {
|
||
alert(editingKey ? "언어 키가 수정되었습니다." : "언어 키가 추가되었습니다.");
|
||
fetchLangKeys(); // 목록 새로고침
|
||
setIsModalOpen(false);
|
||
} else {
|
||
// 중복 체크 오류 메시지 처리
|
||
if (data.message && data.message.includes("이미 존재하는 언어키")) {
|
||
alert(data.message);
|
||
} else {
|
||
alert(data.message || "언어 키 저장에 실패했습니다.");
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("언어 키 저장 실패:", error);
|
||
alert("언어 키 저장에 실패했습니다.");
|
||
}
|
||
};
|
||
|
||
// 체크박스 선택/해제
|
||
const handleCheckboxChange = (keyId: number, checked: boolean) => {
|
||
const newSelectedKeys = new Set(selectedKeys);
|
||
if (checked) {
|
||
newSelectedKeys.add(keyId);
|
||
} else {
|
||
newSelectedKeys.delete(keyId);
|
||
}
|
||
setSelectedKeys(newSelectedKeys);
|
||
};
|
||
|
||
// 키 상태 토글
|
||
const handleToggleStatus = async (keyId: number) => {
|
||
try {
|
||
const response = await apiClient.put(`/multilang/keys/${keyId}/toggle`);
|
||
const data = response.data;
|
||
if (data.success) {
|
||
alert(`키가 ${data.data}되었습니다.`);
|
||
fetchLangKeys();
|
||
} else {
|
||
alert("상태 변경 중 오류가 발생했습니다.");
|
||
}
|
||
} catch (error) {
|
||
console.error("키 상태 토글 실패:", error);
|
||
alert("키 상태 변경 중 오류가 발생했습니다.");
|
||
}
|
||
};
|
||
|
||
// 언어 상태 토글
|
||
const handleToggleLanguageStatus = async (langCode: string) => {
|
||
try {
|
||
const response = await apiClient.put(`/multilang/languages/${langCode}/toggle`);
|
||
const data = response.data;
|
||
if (data.success) {
|
||
alert(`언어가 ${data.data}되었습니다.`);
|
||
fetchLanguages();
|
||
} else {
|
||
alert("언어 상태 변경 중 오류가 발생했습니다.");
|
||
}
|
||
} catch (error) {
|
||
console.error("언어 상태 토글 실패:", error);
|
||
alert("언어 상태 변경 중 오류가 발생했습니다.");
|
||
}
|
||
};
|
||
|
||
// 전체 선택/해제
|
||
const handleSelectAll = (checked: boolean) => {
|
||
if (checked) {
|
||
const allKeyIds = getFilteredLangKeys().map((key) => key.keyId);
|
||
setSelectedKeys(new Set(allKeyIds));
|
||
} else {
|
||
setSelectedKeys(new Set());
|
||
}
|
||
};
|
||
|
||
// 선택된 키들 일괄 삭제
|
||
const handleDeleteSelectedKeys = async () => {
|
||
if (selectedKeys.size === 0) {
|
||
alert("삭제할 키를 선택해주세요.");
|
||
return;
|
||
}
|
||
|
||
if (
|
||
!confirm(
|
||
`선택된 ${selectedKeys.size}개의 언어 키를 영구적으로 삭제하시겠습니까?\n\n⚠️ 이 작업은 되돌릴 수 없습니다.`,
|
||
)
|
||
) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const deletePromises = Array.from(selectedKeys).map((keyId) => apiClient.delete(`/multilang/keys/${keyId}`));
|
||
|
||
const responses = await Promise.all(deletePromises);
|
||
const allSuccess = responses.every((response) => response.data.success);
|
||
|
||
if (allSuccess) {
|
||
alert(`${selectedKeys.size}개의 언어 키가 영구적으로 삭제되었습니다.`);
|
||
setSelectedKeys(new Set());
|
||
fetchLangKeys(); // 목록 새로고침
|
||
|
||
// 선택된 키가 삭제된 경우 편집 영역 닫기
|
||
if (selectedKey && selectedKeys.has(selectedKey.keyId)) {
|
||
handleCancel();
|
||
}
|
||
} else {
|
||
alert("일부 키 삭제에 실패했습니다.");
|
||
}
|
||
} catch (error) {
|
||
console.error("선택된 키 삭제 실패:", error);
|
||
alert("선택된 키 삭제에 실패했습니다.");
|
||
}
|
||
};
|
||
|
||
// 개별 키 삭제 (기존 함수 유지)
|
||
const handleDeleteKey = async (keyId: number) => {
|
||
if (!confirm("정말로 이 언어 키를 영구적으로 삭제하시겠습니까?\n\n⚠️ 이 작업은 되돌릴 수 없습니다.")) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await apiClient.delete(`/multilang/keys/${keyId}`);
|
||
const data = response.data;
|
||
if (data.success) {
|
||
alert("언어 키가 영구적으로 삭제되었습니다.");
|
||
fetchLangKeys(); // 목록 새로고침
|
||
if (selectedKey && selectedKey.keyId === keyId) {
|
||
handleCancel(); // 선택된 키가 삭제된 경우 편집 영역 닫기
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("언어 키 삭제 실패:", error);
|
||
alert("언어 키 삭제에 실패했습니다.");
|
||
}
|
||
};
|
||
|
||
// 취소 처리
|
||
const handleCancel = () => {
|
||
setSelectedKey(null);
|
||
setLangTexts([]);
|
||
setEditingTexts([]);
|
||
};
|
||
|
||
useEffect(() => {
|
||
const initializeData = async () => {
|
||
setLoading(true);
|
||
await Promise.all([fetchCompanies(), fetchLanguages(), fetchLangKeys()]);
|
||
setLoading(false);
|
||
};
|
||
initializeData();
|
||
}, []);
|
||
|
||
// 검색 관련 useEffect 제거 - 실시간 필터링만 사용
|
||
|
||
const columns = [
|
||
{
|
||
id: "select",
|
||
header: () => {
|
||
const filteredKeys = getFilteredLangKeys();
|
||
return (
|
||
<input
|
||
type="checkbox"
|
||
checked={selectedKeys.size === filteredKeys.length && filteredKeys.length > 0}
|
||
onChange={(e) => handleSelectAll(e.target.checked)}
|
||
className="h-4 w-4"
|
||
/>
|
||
);
|
||
},
|
||
cell: ({ row }: any) => (
|
||
<input
|
||
type="checkbox"
|
||
checked={selectedKeys.has(row.original.keyId)}
|
||
onChange={(e) => handleCheckboxChange(row.original.keyId, e.target.checked)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
className="h-4 w-4"
|
||
disabled={row.original.isActive === "N"}
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
accessorKey: "companyCode",
|
||
header: "회사",
|
||
cell: ({ row }: any) => {
|
||
const companyName =
|
||
row.original.companyCode === "*"
|
||
? "공통"
|
||
: companies.find((c) => c.code === row.original.companyCode)?.name || row.original.companyCode;
|
||
|
||
return <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{companyName}</span>;
|
||
},
|
||
},
|
||
{
|
||
accessorKey: "menuName",
|
||
header: "메뉴명",
|
||
cell: ({ row }: any) => (
|
||
<span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.menuName}</span>
|
||
),
|
||
},
|
||
|
||
{
|
||
accessorKey: "langKey",
|
||
header: "언어 키",
|
||
cell: ({ row }: any) => (
|
||
<div
|
||
className={`cursor-pointer rounded p-1 hover:bg-gray-100 ${
|
||
row.original.isActive === "N" ? "text-gray-400" : ""
|
||
}`}
|
||
onDoubleClick={() => handleEditKey(row.original)}
|
||
>
|
||
{row.original.langKey}
|
||
</div>
|
||
),
|
||
},
|
||
|
||
{
|
||
accessorKey: "description",
|
||
header: "설명",
|
||
cell: ({ row }: any) => (
|
||
<span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.description}</span>
|
||
),
|
||
},
|
||
{
|
||
accessorKey: "isActive",
|
||
header: "상태",
|
||
cell: ({ row }: any) => (
|
||
<button
|
||
onClick={() => handleToggleStatus(row.original.keyId)}
|
||
className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
|
||
row.original.isActive === "Y"
|
||
? "bg-green-100 text-green-800 hover:bg-green-200"
|
||
: "bg-gray-100 text-gray-800 hover:bg-gray-200"
|
||
}`}
|
||
>
|
||
{row.original.isActive === "Y" ? "활성" : "비활성"}
|
||
</button>
|
||
),
|
||
},
|
||
];
|
||
|
||
// 언어 테이블 컬럼 정의
|
||
const languageColumns = [
|
||
{
|
||
id: "select",
|
||
header: () => (
|
||
<input
|
||
type="checkbox"
|
||
checked={selectedLanguages.size === languages.length && languages.length > 0}
|
||
onChange={(e) => handleSelectAllLanguages(e.target.checked)}
|
||
className="h-4 w-4"
|
||
/>
|
||
),
|
||
cell: ({ row }: any) => (
|
||
<input
|
||
type="checkbox"
|
||
checked={selectedLanguages.has(row.original.langCode)}
|
||
onChange={(e) => handleLanguageCheckboxChange(row.original.langCode, e.target.checked)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
className="h-4 w-4"
|
||
disabled={row.original.isActive === "N"}
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
accessorKey: "langCode",
|
||
header: "언어 코드",
|
||
cell: ({ row }: any) => (
|
||
<div
|
||
className={`cursor-pointer rounded p-1 hover:bg-gray-100 ${
|
||
row.original.isActive === "N" ? "text-gray-400" : ""
|
||
}`}
|
||
onDoubleClick={() => handleEditLanguage(row.original)}
|
||
>
|
||
{row.original.langCode}
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
accessorKey: "langName",
|
||
header: "언어명 (영문)",
|
||
cell: ({ row }: any) => (
|
||
<span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.langName}</span>
|
||
),
|
||
},
|
||
{
|
||
accessorKey: "langNative",
|
||
header: "언어명 (원어)",
|
||
cell: ({ row }: any) => (
|
||
<span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.langNative}</span>
|
||
),
|
||
},
|
||
{
|
||
accessorKey: "isActive",
|
||
header: "상태",
|
||
cell: ({ row }: any) => (
|
||
<button
|
||
onClick={() => handleToggleLanguageStatus(row.original.langCode)}
|
||
className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
|
||
row.original.isActive === "Y"
|
||
? "bg-green-100 text-green-800 hover:bg-green-200"
|
||
: "bg-gray-100 text-gray-800 hover:bg-gray-200"
|
||
}`}
|
||
>
|
||
{row.original.isActive === "Y" ? "활성" : "비활성"}
|
||
</button>
|
||
),
|
||
},
|
||
];
|
||
|
||
if (loading) {
|
||
return <LoadingSpinner />;
|
||
}
|
||
|
||
return (
|
||
<div className="container mx-auto p-2">
|
||
{/* 탭 네비게이션 */}
|
||
<div className="flex space-x-1 border-b">
|
||
<button
|
||
onClick={() => setActiveTab("keys")}
|
||
className={`rounded-t-lg px-3 py-1.5 text-sm font-medium transition-colors ${
|
||
activeTab === "keys" ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||
}`}
|
||
>
|
||
다국어 키 관리
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab("languages")}
|
||
className={`rounded-t-lg px-3 py-1.5 text-sm font-medium transition-colors ${
|
||
activeTab === "languages" ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||
}`}
|
||
>
|
||
언어 관리
|
||
</button>
|
||
</div>
|
||
|
||
{/* 메인 콘텐츠 영역 */}
|
||
<div className="mt-2">
|
||
{/* 언어 관리 탭 */}
|
||
{activeTab === "languages" && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>언어 관리</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="mb-4 flex items-center justify-between">
|
||
<div className="text-sm text-gray-600">총 {languages.length}개의 언어가 등록되어 있습니다.</div>
|
||
<div className="flex space-x-2">
|
||
{selectedLanguages.size > 0 && (
|
||
<Button variant="destructive" onClick={handleDeleteLanguages}>
|
||
선택 삭제 ({selectedLanguages.size})
|
||
</Button>
|
||
)}
|
||
<Button onClick={handleAddLanguage}>새 언어 추가</Button>
|
||
</div>
|
||
</div>
|
||
<DataTable data={languages} columns={languageColumns} searchable />
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 다국어 키 관리 탭의 메인 영역 */}
|
||
{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="flex items-center justify-between">
|
||
<CardTitle>언어 키 목록</CardTitle>
|
||
<div className="flex space-x-2">
|
||
<Button variant="destructive" onClick={handleDeleteSelectedKeys} disabled={selectedKeys.size === 0}>
|
||
선택 삭제 ({selectedKeys.size})
|
||
</Button>
|
||
<Button onClick={handleAddKey}>새 키 추가</Button>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{/* 검색 필터 영역 */}
|
||
<div className="mb-2 grid grid-cols-1 gap-2 md:grid-cols-3">
|
||
<div>
|
||
<Label htmlFor="company">회사</Label>
|
||
<Select value={selectedCompany} onValueChange={setSelectedCompany}>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="전체 회사" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">전체 회사</SelectItem>
|
||
{companies.map((company) => (
|
||
<SelectItem key={company.code} value={company.code}>
|
||
{company.name}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div>
|
||
<Label htmlFor="search">검색</Label>
|
||
<Input
|
||
placeholder="키명, 설명, 메뉴, 회사로 검색..."
|
||
value={searchText}
|
||
onChange={(e) => setSearchText(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-end">
|
||
<div className="text-sm text-gray-600">검색 결과: {getFilteredLangKeys().length}건</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 테이블 영역 */}
|
||
<div>
|
||
<div className="mb-2 text-sm text-gray-600">전체: {getFilteredLangKeys().length}건</div>
|
||
<DataTable
|
||
columns={columns}
|
||
data={getFilteredLangKeys()}
|
||
searchable={false}
|
||
onRowClick={handleKeySelect}
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 우측: 선택된 키의 다국어 관리 (3/10) */}
|
||
<Card className="lg:col-span-3">
|
||
<CardHeader>
|
||
<CardTitle>
|
||
{selectedKey ? (
|
||
<>
|
||
선택된 키:{" "}
|
||
<Badge variant="secondary" className="ml-2">
|
||
{selectedKey.companyCode}.{selectedKey.menuName}.{selectedKey.langKey}
|
||
</Badge>
|
||
</>
|
||
) : (
|
||
"다국어 편집"
|
||
)}
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{selectedKey ? (
|
||
<div>
|
||
{/* 스크롤 가능한 텍스트 영역 */}
|
||
<div className="max-h-80 space-y-4 overflow-y-auto pr-2">
|
||
{languages
|
||
.filter((lang) => lang.isActive === "Y")
|
||
.map((lang) => {
|
||
const text = editingTexts.find((t) => t.langCode === lang.langCode);
|
||
return (
|
||
<div key={lang.langCode} className="flex items-center space-x-4">
|
||
<Badge variant="outline" className="w-20 flex-shrink-0 text-center">
|
||
{lang.langName}
|
||
</Badge>
|
||
<Input
|
||
placeholder={`${lang.langName} 텍스트 입력`}
|
||
value={text?.langText || ""}
|
||
onChange={(e) => handleTextChange(lang.langCode, e.target.value)}
|
||
className="flex-1"
|
||
/>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
{/* 저장 버튼 - 고정 위치 */}
|
||
<div className="mt-4 flex space-x-2 border-t pt-4">
|
||
<Button onClick={handleSave}>저장</Button>
|
||
<Button variant="outline" onClick={handleCancel}>
|
||
취소
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex h-64 items-center justify-center text-gray-500">
|
||
<div className="text-center">
|
||
<div className="mb-2 text-lg font-medium">언어 키를 선택하세요</div>
|
||
<div className="text-sm">좌측 목록에서 편집할 언어 키를 클릭하세요</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 언어 키 추가/수정 모달 */}
|
||
<LangKeyModal
|
||
isOpen={isModalOpen}
|
||
onClose={() => setIsModalOpen(false)}
|
||
onSave={handleSaveKey}
|
||
keyData={editingKey}
|
||
companies={companies}
|
||
/>
|
||
|
||
{/* 언어 추가/수정 모달 */}
|
||
<LanguageModal
|
||
isOpen={isLanguageModalOpen}
|
||
onClose={() => setIsLanguageModalOpen(false)}
|
||
onSave={handleSaveLanguage}
|
||
languageData={editingLanguage}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|