다국어 화면에서 수정기능 구현
This commit is contained in:
kjs
@@ -53,6 +53,14 @@ interface LangKey {
|
||||
categoryName?: string;
|
||||
}
|
||||
|
||||
// 번역 텍스트 타입
|
||||
interface LangText {
|
||||
langCode: string;
|
||||
langName: string;
|
||||
langNative: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
// 입력 가능한 폼 컴포넌트 타입 목록
|
||||
const INPUT_COMPONENT_TYPES = new Set([
|
||||
"text-input",
|
||||
@@ -508,7 +516,32 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
|
||||
});
|
||||
}
|
||||
|
||||
// 6. 분할 패널 컬럼 - columnLabelMap에서 한글 라벨 조회
|
||||
// 6. 분할 패널 제목 및 컬럼 - columnLabelMap에서 한글 라벨 조회
|
||||
// 6-1. 좌측 패널 제목
|
||||
if (config?.leftPanel?.title && typeof config.leftPanel.title === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_left_title`,
|
||||
config.leftPanel.title,
|
||||
"title",
|
||||
compType,
|
||||
`${compLabel} (좌측)`,
|
||||
config.leftPanel.langKeyId,
|
||||
config.leftPanel.langKey
|
||||
);
|
||||
}
|
||||
// 6-2. 우측 패널 제목
|
||||
if (config?.rightPanel?.title && typeof config.rightPanel.title === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_right_title`,
|
||||
config.rightPanel.title,
|
||||
"title",
|
||||
compType,
|
||||
`${compLabel} (우측)`,
|
||||
config.rightPanel.langKeyId,
|
||||
config.rightPanel.langKey
|
||||
);
|
||||
}
|
||||
// 6-3. 좌측 패널 컬럼
|
||||
const leftTableName = config?.leftPanel?.selectedTable || config?.leftPanel?.tableName || tableName;
|
||||
if (config?.leftPanel?.columns && Array.isArray(config.leftPanel.columns)) {
|
||||
config.leftPanel.columns.forEach((col: any, index: number) => {
|
||||
@@ -546,6 +579,56 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
|
||||
});
|
||||
}
|
||||
|
||||
// 6-5. 추가 탭 (additionalTabs) 제목 및 컬럼 - rightPanel.additionalTabs 확인
|
||||
const additionalTabs = config?.rightPanel?.additionalTabs || config?.additionalTabs;
|
||||
if (additionalTabs && Array.isArray(additionalTabs)) {
|
||||
additionalTabs.forEach((tab: any, tabIndex: number) => {
|
||||
// 탭 라벨
|
||||
if (tab.label && typeof tab.label === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_addtab_${tabIndex}_label`,
|
||||
tab.label,
|
||||
"tab",
|
||||
compType,
|
||||
compLabel,
|
||||
tab.langKeyId,
|
||||
tab.langKey
|
||||
);
|
||||
}
|
||||
// 탭 제목
|
||||
if (tab.title && typeof tab.title === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_addtab_${tabIndex}_title`,
|
||||
tab.title,
|
||||
"title",
|
||||
compType,
|
||||
`${compLabel} (탭: ${tab.label || tabIndex})`,
|
||||
tab.titleLangKeyId,
|
||||
tab.titleLangKey
|
||||
);
|
||||
}
|
||||
// 탭 컬럼
|
||||
const tabTableName = tab.tableName || tab.selectedTable || rightTableName;
|
||||
if (tab.columns && Array.isArray(tab.columns)) {
|
||||
tab.columns.forEach((col: any, colIndex: number) => {
|
||||
const colName = col.columnName || col.field || col.name;
|
||||
const colLabel = columnLabelMap[tabTableName]?.[colName] || col.displayName || col.label || colName;
|
||||
if (colLabel && typeof colLabel === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_addtab_${tabIndex}_col_${colIndex}`,
|
||||
colLabel,
|
||||
"column",
|
||||
compType,
|
||||
`${compLabel} (탭: ${tab.label || tabIndex})`,
|
||||
col.langKeyId,
|
||||
col.langKey
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 7. 검색 필터
|
||||
if (config?.filter?.filters && Array.isArray(config.filter.filters)) {
|
||||
config.filter.filters.forEach((filter: any, index: number) => {
|
||||
@@ -732,9 +815,160 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
|
||||
const connectedCount = selectedItems.size;
|
||||
const totalCount = extractedLabels.length;
|
||||
|
||||
// 선택된 라벨 항목
|
||||
const [selectedLabelItem, setSelectedLabelItem] = useState<ExtractedLabel | null>(null);
|
||||
|
||||
// 선택된 라벨의 번역 텍스트 로드
|
||||
const [isLoadingTranslations, setIsLoadingTranslations] = useState(false);
|
||||
|
||||
// 모든 항목의 편집된 번역을 저장하는 맵 (itemId -> langCode -> text)
|
||||
const [allEditedTranslations, setAllEditedTranslations] = useState<Record<string, Record<string, string>>>({});
|
||||
|
||||
// 현재 선택된 항목의 편집된 번역
|
||||
const currentTranslations = selectedLabelItem ? (allEditedTranslations[selectedLabelItem.id] || {}) : {};
|
||||
|
||||
// 저장 중 상태
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// 활성화된 언어 목록
|
||||
const [activeLanguages, setActiveLanguages] = useState<Array<{ langCode: string; langName: string; langNative: string }>>([]);
|
||||
|
||||
// 언어 목록 로드
|
||||
useEffect(() => {
|
||||
const loadLanguages = async () => {
|
||||
try {
|
||||
const response = await apiClient.get("/multilang/languages");
|
||||
if (response.data?.success && Array.isArray(response.data.data)) {
|
||||
const activeLangs = response.data.data
|
||||
.filter((lang: any) => (lang.isActive || lang.is_active) === "Y")
|
||||
.map((lang: any) => ({
|
||||
langCode: lang.langCode || lang.lang_code,
|
||||
langName: lang.langName || lang.lang_name,
|
||||
langNative: lang.langNative || lang.lang_native,
|
||||
}));
|
||||
setActiveLanguages(activeLangs);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("언어 목록 로드 실패:", error);
|
||||
}
|
||||
};
|
||||
if (isOpen) {
|
||||
loadLanguages();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// 선택된 라벨의 번역 텍스트 로드
|
||||
useEffect(() => {
|
||||
const loadTranslations = async () => {
|
||||
if (!selectedLabelItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 언어 목록이 아직 로드되지 않았으면 대기
|
||||
if (activeLanguages.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 이미 이 항목의 번역을 로드한 적이 있으면 스킵
|
||||
if (allEditedTranslations[selectedLabelItem.id]) {
|
||||
return;
|
||||
}
|
||||
|
||||
const connectedKey = selectedItems.get(selectedLabelItem.id);
|
||||
if (!connectedKey?.langKeyId) {
|
||||
// 키가 연결되지 않은 경우 빈 번역으로 초기화
|
||||
const defaultTranslations = activeLanguages.reduce((acc, lang) => {
|
||||
acc[lang.langCode] = lang.langCode === "KR" ? selectedLabelItem.label : "";
|
||||
return acc;
|
||||
}, {} as Record<string, string>);
|
||||
|
||||
setAllEditedTranslations((prev) => ({
|
||||
...prev,
|
||||
[selectedLabelItem.id]: defaultTranslations,
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoadingTranslations(true);
|
||||
try {
|
||||
const response = await apiClient.get(`/multilang/keys/${connectedKey.langKeyId}/texts`);
|
||||
if (response.data?.success && response.data?.data) {
|
||||
const textsMap: Record<string, string> = {};
|
||||
response.data.data.forEach((t: any) => {
|
||||
textsMap[t.langCode || t.lang_code] = t.langText || t.lang_text || "";
|
||||
});
|
||||
|
||||
// 모든 활성 언어에 대해 번역 텍스트 생성
|
||||
const loadedTranslations = activeLanguages.reduce((acc, lang) => {
|
||||
acc[lang.langCode] = textsMap[lang.langCode] || "";
|
||||
return acc;
|
||||
}, {} as Record<string, string>);
|
||||
|
||||
setAllEditedTranslations((prev) => ({
|
||||
...prev,
|
||||
[selectedLabelItem.id]: loadedTranslations,
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("번역 텍스트 로드 실패:", error);
|
||||
} finally {
|
||||
setIsLoadingTranslations(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadTranslations();
|
||||
}, [selectedLabelItem, selectedItems, activeLanguages, allEditedTranslations]);
|
||||
|
||||
// 현재 항목의 번역 텍스트 변경
|
||||
const handleTranslationChange = (langCode: string, text: string) => {
|
||||
if (!selectedLabelItem) return;
|
||||
|
||||
setAllEditedTranslations((prev) => ({
|
||||
...prev,
|
||||
[selectedLabelItem.id]: {
|
||||
...(prev[selectedLabelItem.id] || {}),
|
||||
[langCode]: text,
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
// 모든 번역 텍스트 저장 (최종 저장 시)
|
||||
const handleSaveAllTranslations = async () => {
|
||||
const savePromises: Promise<void>[] = [];
|
||||
|
||||
// 키가 연결된 항목들의 번역만 저장
|
||||
for (const [itemId, translations] of Object.entries(allEditedTranslations)) {
|
||||
const connectedKey = selectedItems.get(itemId);
|
||||
if (!connectedKey?.langKeyId) continue;
|
||||
|
||||
const texts = activeLanguages.map((lang) => ({
|
||||
langCode: lang.langCode,
|
||||
langText: translations[lang.langCode] || "",
|
||||
}));
|
||||
|
||||
savePromises.push(
|
||||
apiClient.post(`/multilang/keys/${connectedKey.langKeyId}/texts`, { texts })
|
||||
.then(() => {})
|
||||
.catch((error) => {
|
||||
console.error(`번역 저장 실패 (keyId: ${connectedKey.langKeyId}):`, error);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
await Promise.all(savePromises);
|
||||
};
|
||||
|
||||
// 모달 닫힐 때 선택 초기화
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setSelectedLabelItem(null);
|
||||
setAllEditedTranslations({});
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="max-h-[85vh] max-w-3xl">
|
||||
<DialogContent className="max-h-[85vh] max-w-5xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Languages className="h-5 w-5" />
|
||||
@@ -745,117 +979,214 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 검색 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="라벨 또는 키로 검색..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
{/* 좌우 분할 레이아웃 */}
|
||||
<div className="flex gap-4" style={{ height: "500px" }}>
|
||||
{/* 왼쪽: 라벨 목록 */}
|
||||
<div className="flex w-1/2 flex-col overflow-hidden">
|
||||
{/* 검색 */}
|
||||
<div className="relative mb-2 shrink-0">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="라벨 또는 키로 검색..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 라벨 목록 */}
|
||||
<ScrollArea className="h-[400px] rounded-md border">
|
||||
<div className="p-2">
|
||||
{groupedLabels.length === 0 ? (
|
||||
<div className="flex h-32 items-center justify-center text-sm text-muted-foreground">
|
||||
{searchText ? "검색 결과가 없습니다." : "다국어 대상이 없습니다."}
|
||||
{/* 라벨 목록 */}
|
||||
<ScrollArea className="min-h-0 flex-1 rounded-md border">
|
||||
<div className="p-2">
|
||||
{groupedLabels.length === 0 ? (
|
||||
<div className="flex h-32 items-center justify-center text-sm text-muted-foreground">
|
||||
{searchText ? "검색 결과가 없습니다." : "다국어 대상이 없습니다."}
|
||||
</div>
|
||||
) : (
|
||||
groupedLabels.map((group) => (
|
||||
<div key={group.id} className="mb-2">
|
||||
{/* 그룹 헤더 */}
|
||||
<button
|
||||
onClick={() => toggleGroup(group.id)}
|
||||
className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-muted"
|
||||
>
|
||||
{group.isExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
{group.icon}
|
||||
<span>{group.label}</span>
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
{group.items.filter((i) => selectedItems.has(i.id)).length} / {group.items.length}
|
||||
</Badge>
|
||||
</button>
|
||||
|
||||
{/* 그룹 아이템 */}
|
||||
{group.isExpanded && (
|
||||
<div className="ml-6 mt-1 space-y-1">
|
||||
{group.items.map((item) => {
|
||||
const isConnected = selectedItems.has(item.id);
|
||||
const isSelected = selectedLabelItem?.id === item.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => setSelectedLabelItem(item)}
|
||||
className={cn(
|
||||
"flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2 text-sm transition-colors",
|
||||
isSelected
|
||||
? "border-primary bg-primary/10 ring-1 ring-primary"
|
||||
: isConnected
|
||||
? "border-green-200 bg-green-50 hover:bg-green-100"
|
||||
: "border-gray-200 bg-white hover:bg-gray-50"
|
||||
)}
|
||||
>
|
||||
{/* 상태 아이콘 */}
|
||||
<div className="shrink-0">
|
||||
{isConnected ? (
|
||||
<Check className="h-4 w-4 text-green-600" />
|
||||
) : (
|
||||
<X className="h-4 w-4 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 타입 배지 */}
|
||||
<Badge variant="outline" className="shrink-0 text-xs">
|
||||
{getTypeLabel(item.type)}
|
||||
</Badge>
|
||||
|
||||
{/* 라벨 텍스트 */}
|
||||
<span className="flex-1 truncate font-medium">{item.label}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
groupedLabels.map((group) => (
|
||||
<div key={group.id} className="mb-2">
|
||||
{/* 그룹 헤더 */}
|
||||
<button
|
||||
onClick={() => toggleGroup(group.id)}
|
||||
className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-muted"
|
||||
>
|
||||
{group.isExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
{group.icon}
|
||||
<span>{group.label}</span>
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
{group.items.filter((i) => selectedItems.has(i.id)).length} / {group.items.length}
|
||||
</Badge>
|
||||
</button>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* 그룹 아이템 */}
|
||||
{group.isExpanded && (
|
||||
<div className="ml-6 mt-1 space-y-1">
|
||||
{group.items.map((item) => {
|
||||
const isConnected = selectedItems.has(item.id);
|
||||
const connectedKey = selectedItems.get(item.id);
|
||||
{/* 오른쪽: 선택된 항목 상세 및 번역 편집 */}
|
||||
<div className="flex w-1/2 flex-col rounded-md border bg-gray-50 p-4">
|
||||
{selectedLabelItem ? (
|
||||
<>
|
||||
{/* 선택된 항목 정보 */}
|
||||
<div className="mb-4 rounded-md border bg-white p-3">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<Badge variant="outline">{getTypeLabel(selectedLabelItem.type)}</Badge>
|
||||
<span className="font-medium">{selectedLabelItem.label}</span>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md border px-3 py-2 text-sm",
|
||||
isConnected ? "border-green-200 bg-green-50" : "border-gray-200 bg-white"
|
||||
)}
|
||||
>
|
||||
{/* 상태 아이콘 */}
|
||||
<div className="shrink-0">
|
||||
{isConnected ? (
|
||||
<Check className="h-4 w-4 text-green-600" />
|
||||
) : (
|
||||
<X className="h-4 w-4 text-gray-400" />
|
||||
)}
|
||||
{/* 키 선택 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">다국어 키:</span>
|
||||
<KeySelectCombobox
|
||||
value={
|
||||
selectedItems.get(selectedLabelItem.id)?.langKeyId &&
|
||||
selectedItems.get(selectedLabelItem.id)?.langKey
|
||||
? {
|
||||
keyId: selectedItems.get(selectedLabelItem.id)!.langKeyId!,
|
||||
langKey: selectedItems.get(selectedLabelItem.id)!.langKey!,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onChange={(key) => handleKeySelect(selectedLabelItem.id, key)}
|
||||
langKeys={langKeys}
|
||||
isLoading={isLoadingKeys}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 번역 텍스트 편집 */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<div className="mb-2">
|
||||
<h4 className="text-sm font-medium">번역 텍스트</h4>
|
||||
</div>
|
||||
|
||||
{isLoadingTranslations || activeLanguages.length === 0 ? (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : !selectedItems.get(selectedLabelItem.id)?.langKeyId ? (
|
||||
<div className="flex h-32 items-center justify-center text-sm text-muted-foreground">
|
||||
먼저 다국어 키를 선택해주세요
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="h-[280px]">
|
||||
<div className="space-y-3 pr-4">
|
||||
{activeLanguages.map((lang) => (
|
||||
<div key={lang.langCode} className="rounded-md border bg-white p-3">
|
||||
<div className="mb-1.5 flex items-center gap-2">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{lang.langCode}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{lang.langNative || lang.langName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 타입 배지 */}
|
||||
<Badge variant="outline" className="shrink-0 text-xs">
|
||||
{getTypeLabel(item.type)}
|
||||
</Badge>
|
||||
|
||||
{/* 라벨 텍스트 */}
|
||||
<span className="flex-1 truncate font-medium">{item.label}</span>
|
||||
|
||||
{/* 키 선택 콤보박스 */}
|
||||
<KeySelectCombobox
|
||||
value={
|
||||
connectedKey?.langKeyId && connectedKey?.langKey
|
||||
? { keyId: connectedKey.langKeyId, langKey: connectedKey.langKey }
|
||||
: undefined
|
||||
}
|
||||
onChange={(key) => handleKeySelect(item.id, key)}
|
||||
langKeys={langKeys}
|
||||
isLoading={isLoadingKeys}
|
||||
<Input
|
||||
value={currentTranslations[lang.langCode] || ""}
|
||||
onChange={(e) => handleTranslationChange(lang.langCode, e.target.value)}
|
||||
placeholder={`${lang.langName} 번역 입력...`}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
</>
|
||||
) : (
|
||||
<div className="flex h-full flex-col items-center justify-center text-muted-foreground">
|
||||
<Languages className="mb-2 h-12 w-12 opacity-20" />
|
||||
<p className="text-sm">좌측에서 항목을 선택하세요</p>
|
||||
<p className="text-xs">선택한 항목의 다국어 설정을 할 수 있습니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2">
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
닫기
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
// 변경사항 저장
|
||||
const updates = Array.from(selectedItems.entries())
|
||||
.filter(([, data]) => data.langKeyId && data.langKey)
|
||||
.map(([id, data]) => ({
|
||||
componentId: id,
|
||||
langKeyId: data.langKeyId!,
|
||||
langKey: data.langKey!,
|
||||
}));
|
||||
onSave(updates);
|
||||
onClose();
|
||||
disabled={isSaving}
|
||||
onClick={async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
// 1. 번역 텍스트 저장
|
||||
await handleSaveAllTranslations();
|
||||
|
||||
// 2. 컴포넌트 매핑 저장
|
||||
const updates = Array.from(selectedItems.entries())
|
||||
.filter(([, data]) => data.langKeyId && data.langKey)
|
||||
.map(([id, data]) => ({
|
||||
componentId: id,
|
||||
langKeyId: data.langKeyId!,
|
||||
langKey: data.langKey!,
|
||||
}));
|
||||
onSave(updates);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error("저장 실패:", error);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
저장
|
||||
{isSaving ? (
|
||||
<>
|
||||
<Loader2 className="mr-1 h-4 w-4 animate-spin" />
|
||||
저장 중...
|
||||
</>
|
||||
) : (
|
||||
"저장"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
Reference in New Issue
Block a user