chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

현대적 라이브러리 도입 완료

Browse Source
This commit is contained in:
hyeonsu
2025-09-02 18:25:44 +09:00
parent 40b2328876
commit 8b495b9e80
22 changed files with 1275 additions and 1048 deletions
Download Patch File Download Diff File Expand all files Collapse all files

393
frontend/components/admin/CodeDetailPanel.tsx
View File

@@ -1,16 +1,19 @@
"use client";
import { useState, useEffect } from "react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
import { useCommonCode } from "@/hooks/useCommonCode";
// import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거
import { CodeFormModal } from "./CodeFormModal";
import { SortableCodeItem } from "./SortableCodeItem";
import { AlertModal } from "@/components/common/AlertModal";
import { Search, Plus, Edit, Trash2, GripVertical } from "lucide-react";
import { Search, Plus } from "lucide-react";
import { cn } from "@/lib/utils";
import { useCodes, useDeleteCode, useReorderCodes } from "@/hooks/queries/useCodes";
import type { CodeInfo } from "@/types/commonCode";
// Drag and Drop
import {
DndContext,
closestCenter,
@@ -18,7 +21,9 @@ import {
PointerSensor,
useSensor,
useSensors,
DragEndEvent,
DragOverlay,
type DragStartEvent,
type DragEndEvent,
} from "@dnd-kit/core";
import {
arrayMove,
@@ -26,93 +31,30 @@ import {
sortableKeyboardCoordinates,
verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
interface CodeDetailPanelProps {
categoryCode: string;
}
// 드래그 가능한 코드 아이템 컴포넌트
interface SortableCodeItemProps {
code: any;
onEdit: (code: any) => void;
onDelete: (code: any) => void;
}
function SortableCodeItem({ code, onEdit, onDelete }: SortableCodeItemProps) {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: `${code.code_category}-${code.code_value}`,
});
const style = {
transform: CSS.Transform.toString(transform),
transition,
};
return (
<div
ref={setNodeRef}
style={style}
className={cn(
"group flex items-center justify-between rounded-lg p-3 transition-colors",
isDragging ? "border-2 border-blue-200 bg-blue-50 opacity-50 shadow-lg" : "hover:bg-muted",
)}
{...attributes}
>
{/* 드래그 핸들 */}
<div className="mr-2 cursor-grab text-gray-400 hover:text-gray-600 active:cursor-grabbing" {...listeners}>
<GripVertical className="h-4 w-4" />
</div>
<div className="min-w-0 flex-1">
<div className="mb-1 flex items-center gap-2">
<span className="text-sm font-medium">{code.code_name}</span>
{code.is_active === "Y" ? (
<Badge variant="secondary" className="text-xs">
활성
</Badge>
) : (
<Badge variant="outline" className="text-xs">
비활성
</Badge>
)}
</div>
<div className="text-muted-foreground flex items-center gap-2 text-xs">
<span className="font-mono">{code.code_value}</span>
{code.code_name_eng && <span>({code.code_name_eng})</span>}
</div>
{code.description && <p className="text-muted-foreground mt-1 text-xs">{code.description}</p>}
</div>
<div className="flex gap-1">
<Button
size="sm"
variant="ghost"
onClick={() => onEdit(code)}
className="opacity-0 transition-opacity group-hover:opacity-100"
>
<Edit className="h-3 w-3" />
</Button>
<Button
size="sm"
variant="ghost"
onClick={() => onDelete(code)}
className="text-red-600 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-700"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
</div>
);
}
export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
// const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거
const { codes, setCodes, codesLoading, codesError, fetchCodes, createCode, updateCode, deleteCode, reorderCodes } =
useCommonCode();
// React Query로 코드 데이터 관리
const { data: codes = [], isLoading, error } = useCodes(categoryCode);
const deleteCodeMutation = useDeleteCode();
const reorderCodesMutation = useReorderCodes();
// 드래그앤드롭 센서 설정
// 로컬 상태
const [searchTerm, setSearchTerm] = useState("");
const [showActiveOnly, setShowActiveOnly] = useState(false);
const [showFormModal, setShowFormModal] = useState(false);
const [editingCode, setEditingCode] = useState<CodeInfo | null>(null);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [deletingCode, setDeletingCode] = useState<CodeInfo | null>(null);
// 드래그 상태
const [activeId, setActiveId] = useState<string | null>(null);
// Drag and Drop 센서
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor, {
@@ -120,154 +62,116 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
}),
);
// 카테고리 변경 시 코드 조회
useEffect(() => {
if (categoryCode) {
console.log("🔍 카테고리 변경됨, 코드 조회:", categoryCode);
fetchCodes(categoryCode);
}
}, [categoryCode, fetchCodes]);
// 로컬 상태
const [searchTerm, setSearchTerm] = useState("");
const [showActiveOnly, setShowActiveOnly] = useState(false); // 활성 필터 상태
const [showFormModal, setShowFormModal] = useState(false);
const [editingCode, setEditingCode] = useState<any>(null); // 전체 코드 객체 저장
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [deletingCode, setDeletingCode] = useState<{ categoryCode: string; codeValue: string }>({
categoryCode: "",
codeValue: "",
});
// 검색 및 활성 상태 필터링
// 필터링된 코드 목록
const filteredCodes = codes.filter((code) => {
// 검색 조건
const matchesSearch =
code.code_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
code.code_value.toLowerCase().includes(searchTerm.toLowerCase());
// 활성 상태 필터 조건
const matchesActiveFilter = showActiveOnly ? code.is_active : true;
const matchesActive = !showActiveOnly || code.is_active === "Y";
return matchesSearch && matchesActiveFilter;
return matchesSearch && matchesActive;
});
// 코드 생성 핸들러
const handleCreateCode = () => {
if (!categoryCode) return;
setEditingCode(null); // 새 코드 모드
// 새 코드 생성
const handleNewCode = () => {
setEditingCode(null);
setShowFormModal(true);
};
// 코드 수정 핸들러
const handleEditCode = (codeValue: string) => {
console.log("🔧 코드 수정 핸들러 호출:", { categoryCode, codeValue });
const codeToEdit = codes.find((code) => code.code_value === codeValue);
console.log("📋 수정할 코드 데이터:", codeToEdit);
setEditingCode(codeToEdit || null); // 전체 코드 객체 전달
// 코드 수정
const handleEditCode = (code: CodeInfo) => {
setEditingCode(code);
setShowFormModal(true);
};
// 코드 삭제 핸들러
const handleDeleteCode = (codeValue: string) => {
setDeletingCode({ categoryCode, codeValue });
// 코드 삭제 확인
const handleDeleteCode = (code: CodeInfo) => {
setDeletingCode(code);
setShowDeleteModal(true);
};
// 삭제 확인 핸들러
// 코드 삭제 실행
const handleConfirmDelete = async () => {
if (!deletingCode.categoryCode || !deletingCode.codeValue) return;
if (!deletingCode) return;
try {
await deleteCode(deletingCode.categoryCode, deletingCode.codeValue);
await deleteCodeMutation.mutateAsync({
categoryCode,
codeValue: deletingCode.code_value,
});
setShowDeleteModal(false);
setDeletingCode({ categoryCode: "", codeValue: "" });
setDeletingCode(null);
} catch (error) {
console.error("코드 삭제 오류:", error);
// 에러 처리는 useCommonCode 훅에서 처리됨
console.error("코드 삭제 실패:", error);
}
};
// 드래그 종료 핸들러
// 드래그 시작 핸들러
const handleDragStart = (event: DragStartEvent) => {
setActiveId(event.active.id as string);
};
// 드래그 앤 드롭 처리
const handleDragEnd = async (event: DragEndEvent) => {
setActiveId(null);
const { active, over } = event;
if (!over || active.id === over.id) {
return;
}
if (over && active.id !== over.id) {
const oldIndex = filteredCodes.findIndex((code) => code.code_value === active.id);
const newIndex = filteredCodes.findIndex((code) => code.code_value === over.id);
const activeIndex = filteredCodes.findIndex((code) => `${code.code_category}-${code.code_value}` === active.id);
const overIndex = filteredCodes.findIndex((code) => `${code.code_category}-${code.code_value}` === over.id);
const newOrder = arrayMove(filteredCodes, oldIndex, newIndex);
if (activeIndex !== overIndex) {
// 전체 codes 배열에서 현재 카테고리의 코드들을 찾아서 재정렬
const currentCategoryCodes = codes.filter((code) => code.code_category === categoryCode);
const otherCategoryCodes = codes.filter((code) => code.code_category !== categoryCode);
// 현재 카테고리 코드들의 순서를 변경
const reorderedCategoryCodes = arrayMove(currentCategoryCodes, activeIndex, overIndex);
// 전체 codes 배열 업데이트
const newCodesArray = [...otherCategoryCodes, ...reorderedCategoryCodes];
setCodes(newCodesArray);
// 순서 업데이트를 위한 데이터 준비
const reorderData = newOrder.map((code, index) => ({
codeValue: code.code_value,
sortOrder: index + 1,
}));
try {
// 서버에 순서 변경 요청
console.log("🔄 코드 순서 변경:", {
await reorderCodesMutation.mutateAsync({
categoryCode,
from: activeIndex,
to: overIndex,
reorderedCodes: reorderedCategoryCodes.map((code) => code.code_value),
codes: reorderData,
});
// 백엔드 API 호출 - 실제 DB에 순서 저장
await reorderCodes(
categoryCode,
reorderedCategoryCodes.map((code, index) => ({
codeValue: code.code_value,
sortOrder: index + 1,
})),
);
} catch (error) {
console.error("순서 변경 실패:", error);
// 실패 시 원래 순서로 복원
fetchCodes(categoryCode);
console.error("코드 순서 변경 실패:", error);
}
}
};
// 카테고리가 선택되지 않은 경우
if (!categoryCode) {
return (
<div className="text-muted-foreground flex h-64 items-center justify-center">
<div className="text-center">
<p className="mb-2 text-lg font-medium">카테고리를 선택하세요</p>
<p className="text-sm">왼쪽에서 카테고리를 선택하면 해당 코드 목록이 표시됩니다.</p>
<div className="flex h-full items-center justify-center">
<div className="text-center text-gray-500">
<p>카테고리를 선택하세요</p>
</div>
</div>
);
}
// 에러 상태
if (codesError) {
if (error) {
return (
<div className="p-4 text-center text-red-600">
<p className="mb-2">❌ {codesError}</p>
<Button onClick={() => fetchCodes(categoryCode)} variant="outline" size="sm">
다시 시도
</Button>
<div className="flex h-full items-center justify-center">
<div className="text-center">
<p className="text-red-600">코드를 불러오는 중 오류가 발생했습니다.</p>
<Button variant="outline" onClick={() => window.location.reload()} className="mt-2">
다시 시도
</Button>
</div>
</div>
);
}
return (
<div className="space-y-4">
{/* 검색 및 추가 버튼 */}
<div className="space-y-3 border-b p-4">
<div className="flex gap-2">
<div className="relative flex-1">
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
<div className="flex h-full flex-col">
{/* 검색 및 필터 */}
<div className="border-b p-4">
<div className="space-y-3">
{/* 검색 */}
<div className="relative">
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
<Input
placeholder="코드 검색..."
value={searchTerm}
@@ -275,55 +179,99 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
className="pl-10"
/>
</div>
</div>
{/* 활성 상태 필터 토글 */}
<div className="flex items-center gap-2">
<label className="flex cursor-pointer items-center gap-2 text-sm">
{/* 활성 필터 */}
<div className="flex items-center space-x-2">
<input
type="checkbox"
id="activeOnlyCodes"
checked={showActiveOnly}
onChange={(e) => setShowActiveOnly(e.target.checked)}
className="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500"
className="rounded border-gray-300"
/>
활성 코드만 표시
</label>
</div>
<label htmlFor="activeOnlyCodes" className="text-sm text-gray-600">
활성 코드만 표시
</label>
</div>
<Button onClick={handleCreateCode} className="w-full" size="sm">
<Plus className="mr-2 h-4 w-4" />새 코드
</Button>
{/* 새 코드 버튼 */}
<Button onClick={handleNewCode} className="w-full" size="sm">
<Plus className="mr-2 h-4 w-4" />새 코드
</Button>
</div>
</div>
{/* 코드 목록 (드래그앤드롭) */}
<div className="max-h-96 overflow-y-auto">
{codesLoading ? (
<div className="p-4 text-center">
<LoadingSpinner size="sm" />
<p className="text-muted-foreground mt-2 text-sm">코드를 불러오는 중...</p>
{/* 코드 목록 */}
<div className="flex-1 overflow-y-auto">
{isLoading ? (
<div className="flex h-32 items-center justify-center">
<LoadingSpinner />
</div>
) : filteredCodes.length === 0 ? (
<div className="text-muted-foreground p-4 text-center">
<p>코드가 없습니다.</p>
<div className="p-4 text-center text-gray-500">
{searchTerm ? "검색 결과가 없습니다." : "코드가 없습니다."}
</div>
) : (
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<SortableContext
items={filteredCodes.map((code) => `${code.code_category}-${code.code_value}`)}
strategy={verticalListSortingStrategy}
<div className="p-2">
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
>
<div className="space-y-1">
{filteredCodes.map((code) => (
<SortableCodeItem
key={`${code.code_category}-${code.code_value}`}
code={code}
onEdit={(code) => handleEditCode(code.code_value)}
onDelete={(code) => handleDeleteCode(code.code_value)}
/>
))}
</div>
</SortableContext>
</DndContext>
<SortableContext
items={filteredCodes.map((code) => code.code_value)}
strategy={verticalListSortingStrategy}
>
<div className="space-y-1">
{filteredCodes.map((code) => (
<SortableCodeItem
key={code.code_value}
code={code}
categoryCode={categoryCode}
onEdit={() => handleEditCode(code)}
onDelete={() => handleDeleteCode(code)}
/>
))}
</div>
</SortableContext>
<DragOverlay>
{activeId ? (
<div className="cursor-grabbing rounded-lg border border-gray-300 bg-white p-3 shadow-lg">
{(() => {
const activeCode = filteredCodes.find((code) => code.code_value === activeId);
if (!activeCode) return null;
return (
<div className="flex items-start justify-between">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<h3 className="font-medium text-gray-900">{activeCode.code_name}</h3>
<Badge
variant={activeCode.is_active === "Y" ? "default" : "secondary"}
className={cn(
"transition-colors",
activeCode.is_active === "Y"
? "bg-green-100 text-green-800"
: "bg-gray-100 text-gray-600",
)}
>
{activeCode.is_active === "Y" ? "활성" : "비활성"}
</Badge>
</div>
<p className="mt-1 text-sm text-gray-600">{activeCode.code_value}</p>
{activeCode.description && (
<p className="mt-1 text-sm text-gray-500">{activeCode.description}</p>
)}
</div>
</div>
);
})()}
</div>
) : null}
</DragOverlay>
</DndContext>
</div>
)}
</div>
@@ -333,13 +281,10 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
isOpen={showFormModal}
onClose={() => {
setShowFormModal(false);
setEditingCode(null); // 모달 닫을 때 편집 상태 초기화
setEditingCode(null);
}}
categoryCode={categoryCode}
editingCode={editingCode} // 전체 코드 객체 전달
codes={codes} // 현재 코드 목록 전달
onCreateCode={createCode} // 코드 생성 함수 전달
onUpdateCode={updateCode} // 코드 수정 함수 전달
editingCode={editingCode}
/>
)}
@@ -348,11 +293,11 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
<AlertModal
isOpen={showDeleteModal}
onClose={() => setShowDeleteModal(false)}
onConfirm={handleConfirmDelete}
type="error"
title="삭제 확인"
message="이 코드를 삭제하시겠습니까?"
title="코드 삭제"
message="정말로 이 코드를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
confirmText="삭제"
onConfirm={handleConfirmDelete}
/>
)}
</div>