kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

커스텀 훅 분리 및 react query 최적화

This commit is contained in:
hyeonsu 2025-09-03 14:57:52 +09:00
parent 63c7b80391
commit 4654a571f4
10 changed files with 527 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/app/(main)/admin/commonCode/page.tsx
View File

@ -1,14 +1,14 @@
"use client";
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CodeCategoryPanel } from "@/components/admin/CodeCategoryPanel";
import { CodeDetailPanel } from "@/components/admin/CodeDetailPanel";
import { useSelectedCategory } from "@/hooks/useSelectedCategory";
// import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거
export default function CommonCodeManagementPage() {
// const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거
const [selectedCategoryCode, setSelectedCategoryCode] = useState<string>("");
const { selectedCategoryCode, selectCategory } = useSelectedCategory();
return (
<div className="container mx-auto space-y-6 p-6">
@ -30,10 +30,7 @@ export default function CommonCodeManagementPage() {
<CardTitle className="flex items-center gap-2">📂 코드 카테고리</CardTitle>
</CardHeader>
<CardContent className="p-0">
<CodeCategoryPanel
selectedCategoryCode={selectedCategoryCode}
onSelectCategory={setSelectedCategoryCode}
/>
<CodeCategoryPanel selectedCategoryCode={selectedCategoryCode} onSelectCategory={selectCategory} />
</CardContent>
</Card>
</div>

284
frontend/components/admin/CodeCategoryFormModal.tsx
View File

@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@ -13,13 +13,13 @@ import { LoadingSpinner } from "@/components/common/LoadingSpinner";
import { ValidationMessage } from "@/components/common/ValidationMessage";
import { useCategories, useCreateCategory, useUpdateCategory } from "@/hooks/queries/useCategories";
import { useCheckCategoryDuplicate } from "@/hooks/queries/useValidation";
import { useFormValidation } from "@/hooks/useFormValidation";
import {
createCategorySchema,
updateCategorySchema,
type CreateCategoryData,
type UpdateCategoryData,
} from "@/lib/schemas/commonCode";
import type { CodeCategory } from "@/types/commonCode";
interface CodeCategoryFormModalProps {
isOpen: boolean;
@ -36,87 +36,88 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }:
const editingCategory = categories.find((c) => c.category_code === editingCategoryCode);
// 검증 상태 관리
const [validationStates, setValidationStates] = useState({
categoryCode: { enabled: false, value: "" },
categoryName: { enabled: false, value: "" },
categoryNameEng: { enabled: false, value: "" },
description: { enabled: false, value: "" }, // 설명 필드 추가
const formValidation = useFormValidation({
fields: ["categoryCode", "categoryName", "categoryNameEng", "description"],
});
// 중복 검사 훅들
const categoryCodeCheck = useCheckCategoryDuplicate(
"categoryCode",
validationStates.categoryCode.value,
formValidation.getFieldValue("categoryCode"),
isEditing ? editingCategoryCode : undefined,
validationStates.categoryCode.enabled,
formValidation.isFieldValidated("categoryCode"),
);
const categoryNameCheck = useCheckCategoryDuplicate(
"categoryName",
validationStates.categoryName.value,
formValidation.getFieldValue("categoryName"),
isEditing ? editingCategoryCode : undefined,
validationStates.categoryName.enabled,
formValidation.isFieldValidated("categoryName"),
);
const categoryNameEngCheck = useCheckCategoryDuplicate(
"categoryNameEng",
validationStates.categoryNameEng.value,
formValidation.getFieldValue("categoryNameEng"),
isEditing ? editingCategoryCode : undefined,
validationStates.categoryNameEng.enabled,
formValidation.isFieldValidated("categoryNameEng"),
);
// 중복 검사 결과 확인 (수정 시에는 카테고리 코드 검사 제외)
const hasDuplicateErrors =
(!isEditing && categoryCodeCheck.data?.isDuplicate && validationStates.categoryCode.enabled) ||
(categoryNameCheck.data?.isDuplicate && validationStates.categoryName.enabled) ||
(categoryNameEngCheck.data?.isDuplicate && validationStates.categoryNameEng.enabled);
(!isEditing && categoryCodeCheck.data?.isDuplicate && formValidation.isFieldValidated("categoryCode")) ||
(categoryNameCheck.data?.isDuplicate && formValidation.isFieldValidated("categoryName")) ||
(categoryNameEngCheck.data?.isDuplicate && formValidation.isFieldValidated("categoryNameEng"));
// 중복 검사 로딩 중인지 확인 (수정 시에는 카테고리 코드 검사 제외)
const isDuplicateChecking =
(!isEditing && categoryCodeCheck.isLoading) || categoryNameCheck.isLoading || categoryNameEngCheck.isLoading;
// 필수 필드들이 모두 검증되었는지 확인 (생성 시에만 적용)
const requiredFieldsValidated =
isEditing ||
(validationStates.categoryCode.enabled &&
validationStates.categoryName.enabled &&
validationStates.categoryNameEng.enabled &&
validationStates.description.enabled);
// 폼 스키마 선택 (생성/수정에 따라)
const schema = isEditing ? updateCategorySchema : createCategorySchema;
const form = useForm<CreateCategoryData | UpdateCategoryData>({
resolver: zodResolver(schema),
mode: "onChange", // 실시간 검증 활성화
// 생성과 수정을 위한 별도 폼 설정
const createForm = useForm<CreateCategoryData>({
resolver: zodResolver(createCategorySchema),
mode: "onChange",
defaultValues: {
categoryCode: "",
categoryName: "",
categoryNameEng: "",
description: "",
sortOrder: 1,
...(isEditing && { isActive: true }),
},
});
const updateForm = useForm<UpdateCategoryData>({
resolver: zodResolver(updateCategorySchema),
mode: "onChange",
defaultValues: {
categoryName: "",
categoryNameEng: "",
description: "",
sortOrder: 1,
isActive: "Y",
},
});
// 폼은 조건부로 직접 사용
// 편집 모드일 때 기존 데이터 로드
useEffect(() => {
if (isOpen) {
if (isEditing && editingCategory) {
// 수정 모드: 기존 데이터 로드
form.reset({
categoryCode: editingCategory.category_code, // 카테고리 코드도 표시
updateForm.reset({
categoryName: editingCategory.category_name,
categoryNameEng: editingCategory.category_name_eng || "",
description: editingCategory.description || "",
sortOrder: editingCategory.sort_order,
isActive: editingCategory.is_active, // 🔧 "Y"/"N" 문자열 그대로 사용
isActive: editingCategory.is_active as "Y" | "N", // 타입 안전한 캐스팅
});
} else {
// 새 카테고리 모드: 자동 순서 계산
const maxSortOrder = categories.length > 0 ? Math.max(...categories.map((c) => c.sort_order)) : 0;
form.reset({
createForm.reset({
categoryCode: "",
categoryName: "",
categoryNameEng: "",
@ -125,27 +126,30 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }:
});
}
}
}, [isOpen, isEditing, editingCategory, categories, form]);
}, [isOpen, isEditing, editingCategory, categories, createForm, updateForm]);
const handleSubmit = form.handleSubmit(async (data) => {
try {
if (isEditing && editingCategoryCode) {
// 수정
await updateCategoryMutation.mutateAsync({
categoryCode: editingCategoryCode,
data: data as UpdateCategoryData,
});
} else {
// 생성
await createCategoryMutation.mutateAsync(data as CreateCategoryData);
}
onClose();
form.reset();
} catch (error) {
console.error("카테고리 저장 실패:", error);
}
});
const handleSubmit = isEditing
? updateForm.handleSubmit(async (data) => {
try {
await updateCategoryMutation.mutateAsync({
categoryCode: editingCategoryCode!,
data: data as UpdateCategoryData,
});
onClose();
updateForm.reset();
} catch (error) {
console.error("카테고리 수정 실패:", error);
}
})
: createForm.handleSubmit(async (data) => {
try {
await createCategoryMutation.mutateAsync(data as CreateCategoryData);
onClose();
createForm.reset();
} catch (error) {
console.error("카테고리 생성 실패:", error);
}
});
const isLoading = createCategoryMutation.isPending || updateCategoryMutation.isPending;
@ -158,29 +162,21 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }:
<form onSubmit={handleSubmit} className="space-y-4">
{/* 카테고리 코드 */}
{
{!isEditing && (
<div className="space-y-2">
<Label htmlFor="categoryCode">카테고리 코드 *</Label>
<Input
id="categoryCode"
{...form.register("categoryCode")}
disabled={isLoading || isEditing} // 수정 시에는 비활성화
{...createForm.register("categoryCode")}
disabled={isLoading}
placeholder="카테고리 코드를 입력하세요"
className={form.formState.errors.categoryCode ? "border-red-500" : ""}
onBlur={(e) => {
const value = e.target.value.trim();
if (value) {
setValidationStates((prev) => ({
...prev,
categoryCode: { enabled: true, value },
}));
}
}}
className={createForm.formState.errors.categoryCode ? "border-red-500" : ""}
onBlur={formValidation.createBlurHandler("categoryCode")}
/>
{form.formState.errors.categoryCode && (
<p className="text-sm text-red-600">{form.formState.errors.categoryCode.message}</p>
{createForm.formState.errors.categoryCode && (
<p className="text-sm text-red-600">{createForm.formState.errors.categoryCode.message}</p>
)}
{!isEditing && !form.formState.errors.categoryCode && (
{!createForm.formState.errors.categoryCode && (
<ValidationMessage
message={categoryCodeCheck.data?.message}
isValid={!categoryCodeCheck.data?.isDuplicate}
@ -188,31 +184,44 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }:
/>
)}
</div>
}
)}
{/* 카테고리 코드 표시 (수정 시) */}
{isEditing && editingCategory && (
<div className="space-y-2">
<Label htmlFor="categoryCodeDisplay">카테고리 코드</Label>
<Input id="categoryCodeDisplay" value={editingCategory.category_code} disabled className="bg-gray-50" />
<p className="text-sm text-gray-500">카테고리 코드는 수정할 수 없습니다.</p>
</div>
)}
{/* 카테고리명 */}
<div className="space-y-2">
<Label htmlFor="categoryName">카테고리명 *</Label>
<Input
id="categoryName"
{...form.register("categoryName")}
{...(isEditing ? updateForm.register("categoryName") : createForm.register("categoryName"))}
disabled={isLoading}
placeholder="카테고리명을 입력하세요"
className={form.formState.errors.categoryName ? "border-red-500" : ""}
onBlur={(e) => {
const value = e.target.value.trim();
if (value) {
setValidationStates((prev) => ({
...prev,
categoryName: { enabled: true, value },
}));
}
}}
className={
isEditing
? updateForm.formState.errors.categoryName
? "border-red-500"
: ""
: createForm.formState.errors.categoryName
? "border-red-500"
: ""
}
onBlur={formValidation.createBlurHandler("categoryName")}
/>
{form.formState.errors.categoryName && (
<p className="text-sm text-red-600">{form.formState.errors.categoryName.message}</p>
)}
{!form.formState.errors.categoryName && (
{isEditing
? updateForm.formState.errors.categoryName && (
<p className="text-sm text-red-600">{updateForm.formState.errors.categoryName.message}</p>
)
: createForm.formState.errors.categoryName && (
<p className="text-sm text-red-600">{createForm.formState.errors.categoryName.message}</p>
)}
{!(isEditing ? updateForm.formState.errors.categoryName : createForm.formState.errors.categoryName) && (
<ValidationMessage
message={categoryNameCheck.data?.message}
isValid={!categoryNameCheck.data?.isDuplicate}
@ -226,24 +235,30 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }:
<Label htmlFor="categoryNameEng">카테고리 영문명 *</Label>
<Input
id="categoryNameEng"
{...form.register("categoryNameEng")}
{...(isEditing ? updateForm.register("categoryNameEng") : createForm.register("categoryNameEng"))}
disabled={isLoading}
placeholder="카테고리 영문명을 입력하세요"
className={form.formState.errors.categoryNameEng ? "border-red-500" : ""}
onBlur={(e) => {
const value = e.target.value.trim();
if (value) {
setValidationStates((prev) => ({
...prev,
categoryNameEng: { enabled: true, value },
}));
}
}}
className={
isEditing
? updateForm.formState.errors.categoryNameEng
? "border-red-500"
: ""
: createForm.formState.errors.categoryNameEng
? "border-red-500"
: ""
}
onBlur={formValidation.createBlurHandler("categoryNameEng")}
/>
{form.formState.errors.categoryNameEng && (
<p className="text-sm text-red-600">{form.formState.errors.categoryNameEng.message}</p>
)}
{!form.formState.errors.categoryNameEng && (
{isEditing
? updateForm.formState.errors.categoryNameEng && (
<p className="text-sm text-red-600">{updateForm.formState.errors.categoryNameEng.message}</p>
)
: createForm.formState.errors.categoryNameEng && (
<p className="text-sm text-red-600">{createForm.formState.errors.categoryNameEng.message}</p>
)}
{!(isEditing
? updateForm.formState.errors.categoryNameEng
: createForm.formState.errors.categoryNameEng) && (
<ValidationMessage
message={categoryNameEngCheck.data?.message}
isValid={!categoryNameEngCheck.data?.isDuplicate}
@ -257,24 +272,28 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }:
<Label htmlFor="description">설명 *</Label>
<Textarea
id="description"
{...form.register("description")}
{...(isEditing ? updateForm.register("description") : createForm.register("description"))}
disabled={isLoading}
placeholder="설명을 입력하세요"
rows={3}
className={form.formState.errors.description ? "border-red-500" : ""}
onBlur={(e) => {
const value = e.target.value.trim();
if (value) {
setValidationStates((prev) => ({
...prev,
description: { enabled: true, value },
}));
}
}}
className={
isEditing
? updateForm.formState.errors.description
? "border-red-500"
: ""
: createForm.formState.errors.description
? "border-red-500"
: ""
}
onBlur={formValidation.createBlurHandler("description")}
/>
{form.formState.errors.description && (
<p className="text-sm text-red-600">{form.formState.errors.description.message}</p>
)}
{isEditing
? updateForm.formState.errors.description && (
<p className="text-sm text-red-600">{updateForm.formState.errors.description.message}</p>
)
: createForm.formState.errors.description && (
<p className="text-sm text-red-600">{createForm.formState.errors.description.message}</p>
)}
</div>
{/* 정렬 순서 */}
@ -283,14 +302,28 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }:
<Input
id="sortOrder"
type="number"
{...form.register("sortOrder", { valueAsNumber: true })}
{...(isEditing
? updateForm.register("sortOrder", { valueAsNumber: true })
: createForm.register("sortOrder", { valueAsNumber: true }))}
disabled={isLoading}
min={1}
className={form.formState.errors.sortOrder ? "border-red-500" : ""}
className={
isEditing
? updateForm.formState.errors.sortOrder
? "border-red-500"
: ""
: createForm.formState.errors.sortOrder
? "border-red-500"
: ""
}
/>
{form.formState.errors.sortOrder && (
<p className="text-sm text-red-600">{form.formState.errors.sortOrder.message}</p>
)}
{isEditing
? updateForm.formState.errors.sortOrder && (
<p className="text-sm text-red-600">{updateForm.formState.errors.sortOrder.message}</p>
)
: createForm.formState.errors.sortOrder && (
<p className="text-sm text-red-600">{createForm.formState.errors.sortOrder.message}</p>
)}
</div>
{/* 활성 상태 (수정 시에만) */}
@ -298,11 +331,11 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }:
<div className="flex items-center space-x-2">
<Switch
id="isActive"
checked={form.watch("isActive") === "Y"}
onCheckedChange={(checked) => form.setValue("isActive", checked ? "Y" : "N")}
checked={updateForm.watch("isActive") === "Y"}
onCheckedChange={(checked) => updateForm.setValue("isActive", checked ? "Y" : "N")}
disabled={isLoading}
/>
<Label htmlFor="isActive">{form.watch("isActive") === "Y" ? "활성" : "비활성"}</Label>
<Label htmlFor="isActive">{updateForm.watch("isActive") === "Y" ? "활성" : "비활성"}</Label>
</div>
)}
@ -313,7 +346,12 @@ export function CodeCategoryFormModal({ isOpen, onClose, editingCategoryCode }:
</Button>
<Button
type="submit"
disabled={isLoading || !form.formState.isValid || hasDuplicateErrors || isDuplicateChecking}
disabled={
isLoading ||
!(isEditing ? updateForm.formState.isValid : createForm.formState.isValid) ||
hasDuplicateErrors ||
isDuplicateChecking
}
>
{isLoading ? (
<>

28
frontend/components/admin/CodeCategoryPanel.tsx
View File

@ -3,13 +3,13 @@
import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
import { CodeCategoryFormModal } from "./CodeCategoryFormModal";
import { CategoryItem } from "./CategoryItem";
import { AlertModal } from "@/components/common/AlertModal";
import { Search, Plus } from "lucide-react";
import { useCategories, useDeleteCategory } from "@/hooks/queries/useCategories";
import { useSearchAndFilter } from "@/hooks/useSearchAndFilter";
interface CodeCategoryPanelProps {
selectedCategoryCode: string;
@ -21,25 +21,23 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
const { data: categories = [], isLoading, error } = useCategories();
const deleteCategoryMutation = useDeleteCategory();
// 로컬 상태
const [searchTerm, setSearchTerm] = useState("");
const [showActiveOnly, setShowActiveOnly] = useState(false);
// 검색 및 필터링 훅 사용
const {
searchTerm,
setSearchTerm,
showActiveOnly,
setShowActiveOnly,
filteredItems: filteredCategories,
} = useSearchAndFilter(categories, {
searchFields: ["category_name", "category_code"],
});
// 모달 상태
const [showFormModal, setShowFormModal] = useState(false);
const [editingCategory, setEditingCategory] = useState<string>("");
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [deletingCategory, setDeletingCategory] = useState<string>("");
// 필터링된 카테고리 목록
const filteredCategories = categories.filter((category) => {
const matchesSearch =
category.category_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
category.category_code.toLowerCase().includes(searchTerm.toLowerCase());
const matchesActive = !showActiveOnly || category.is_active === "Y";
return matchesSearch && matchesActive;
});
// 새 카테고리 생성
const handleNewCategory = () => {
setEditingCategory("");

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

@ -14,23 +14,10 @@ import { useCodes, useDeleteCode, useReorderCodes } from "@/hooks/queries/useCod
import type { CodeInfo } from "@/types/commonCode";
// Drag and Drop
import {
DndContext,
closestCenter,
KeyboardSensor,
PointerSensor,
useSensor,
useSensors,
DragOverlay,
type DragStartEvent,
type DragEndEvent,
} from "@dnd-kit/core";
import {
arrayMove,
SortableContext,
sortableKeyboardCoordinates,
verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { DndContext, DragOverlay } from "@dnd-kit/core";
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
import { useDragAndDrop } from "@/hooks/useDragAndDrop";
import { useSearchAndFilter } from "@/hooks/useSearchAndFilter";
interface CodeDetailPanelProps {
categoryCode: string;
@ -42,35 +29,36 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
const deleteCodeMutation = useDeleteCode();
const reorderCodesMutation = useReorderCodes();
// 로컬 상태
const [searchTerm, setSearchTerm] = useState("");
const [showActiveOnly, setShowActiveOnly] = useState(false);
// 검색 및 필터링 훅 사용
const {
searchTerm,
setSearchTerm,
showActiveOnly,
setShowActiveOnly,
filteredItems: filteredCodes,
} = useSearchAndFilter(codes, {
searchFields: ["code_name", "code_value"],
});
// 모달 상태
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, {
coordinateGetter: sortableKeyboardCoordinates,
}),
);
// 필터링된 코드 목록
const filteredCodes = codes.filter((code) => {
const matchesSearch =
code.code_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
code.code_value.toLowerCase().includes(searchTerm.toLowerCase());
const matchesActive = !showActiveOnly || code.is_active === "Y";
return matchesSearch && matchesActive;
// 드래그 앤 드롭 훅 사용
const dragAndDrop = useDragAndDrop({
items: filteredCodes,
onReorder: async (reorderedItems) => {
await reorderCodesMutation.mutateAsync({
categoryCode,
codes: reorderedItems.map((item) => ({
codeValue: item.id,
sortOrder: item.sortOrder,
})),
});
},
getItemId: (code) => code.code_value,
});
// 새 코드 생성
@ -108,38 +96,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
}
};
// 드래그 시작 핸들러
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) {
const oldIndex = filteredCodes.findIndex((code) => code.code_value === active.id);
const newIndex = filteredCodes.findIndex((code) => code.code_value === over.id);
const newOrder = arrayMove(filteredCodes, oldIndex, newIndex);
// 순서 업데이트를 위한 데이터 준비
const reorderData = newOrder.map((code, index) => ({
codeValue: code.code_value,
sortOrder: index + 1,
}));
try {
await reorderCodesMutation.mutateAsync({
categoryCode,
codes: reorderData,
});
} catch (error) {
console.error("코드 순서 변경 실패:", error);
}
}
};
// 드래그 앤 드롭 로직은 useDragAndDrop 훅에서 처리
if (!categoryCode) {
return (
@ -213,12 +170,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
</div>
) : (
<div className="p-2">
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
>
<DndContext {...dragAndDrop.dndContextProps}>
<SortableContext
items={filteredCodes.map((code) => code.code_value)}
strategy={verticalListSortingStrategy}
@ -237,10 +189,10 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
</SortableContext>
<DragOverlay>
{activeId ? (
{dragAndDrop.activeItem ? (
<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);
const activeCode = dragAndDrop.activeItem;
if (!activeCode) return null;
return (
<div className="flex items-start justify-between">

4
frontend/components/admin/SortableCodeItem.tsx
View File

@ -12,12 +12,12 @@ import type { CodeInfo } from "@/types/commonCode";
interface SortableCodeItemProps {
code: CodeInfo;
categoryCode: string;
onEdit: () => void;
onDelete: () => void;
categoryCode: string;
}
export function SortableCodeItem({ code, onEdit, onDelete, categoryCode }: SortableCodeItemProps) {
export function SortableCodeItem({ code, categoryCode, onEdit, onDelete }: SortableCodeItemProps) {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: code.code_value });
const updateCodeMutation = useUpdateCode();

7
frontend/hooks/queries/useCategories.ts
View File

@ -43,8 +43,8 @@ export function useUpdateCategory() {
commonCodeApi.categories.update(categoryCode, data),
onSuccess: (_, variables) => {
// 해당 카테고리 상세 쿼리 무효화
queryClient.invalidateQueries({
queryKey: queryKeys.categories.detail(variables.categoryCode)
queryClient.invalidateQueries({
queryKey: queryKeys.categories.detail(variables.categoryCode),
});
// 모든 카테고리 목록 쿼리 무효화
queryClient.invalidateQueries({ queryKey: queryKeys.categories.lists() });
@ -67,7 +67,7 @@ export function useDeleteCategory() {
// 해당 카테고리와 관련된 모든 쿼리 무효화
queryClient.invalidateQueries({ queryKey: queryKeys.categories.all });
queryClient.invalidateQueries({ queryKey: queryKeys.codes.all });
// 해당 카테고리의 캐시 제거
queryClient.removeQueries({ queryKey: queryKeys.categories.detail(categoryCode) });
},
@ -76,4 +76,3 @@ export function useDeleteCategory() {
},
});
}

92
frontend/hooks/useDragAndDrop.ts Normal file
View File

@ -0,0 +1,92 @@
import { useState } from "react";
import {
DndContext,
closestCenter,
KeyboardSensor,
PointerSensor,
useSensor,
useSensors,
type DragStartEvent,
type DragEndEvent,
} from "@dnd-kit/core";
import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
export interface DragAndDropItem {
[key: string]: any;
}
export interface UseDragAndDropProps<T extends DragAndDropItem> {
items: T[];
onReorder: (reorderedItems: Array<{ id: string; sortOrder: number }>) => Promise<void>;
getItemId: (item: T) => string;
}
export function useDragAndDrop<T extends DragAndDropItem>({ items, onReorder, getItemId }: UseDragAndDropProps<T>) {
const [activeId, setActiveId] = useState<string | null>(null);
// 드래그 센서 설정
const sensors = useSensors(
useSensor(PointerSensor, {
activationConstraint: {
distance: 8, // 8px 이동 후 드래그 시작
},
}),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
}),
);
// 드래그 시작 핸들러
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) {
const oldIndex = items.findIndex((item) => getItemId(item) === active.id);
const newIndex = items.findIndex((item) => getItemId(item) === over.id);
if (oldIndex !== -1 && newIndex !== -1) {
const newOrder = arrayMove(items, oldIndex, newIndex);
// 순서 업데이트를 위한 데이터 준비
const reorderedItems = newOrder.map((item, index) => ({
id: getItemId(item),
sortOrder: index + 1,
}));
try {
await onReorder(reorderedItems);
} catch (error) {
console.error("순서 변경 실패:", error);
}
}
}
};
// 현재 드래그 중인 아이템 찾기
const activeItem = activeId ? items.find((item) => getItemId(item) === activeId) : null;
return {
// 상태
activeId,
activeItem,
// 센서 및 핸들러
sensors,
handleDragStart,
handleDragEnd,
// DndContext props
dndContextProps: {
sensors,
collisionDetection: closestCenter,
onDragStart: handleDragStart,
onDragEnd: handleDragEnd,
},
};
}

89
frontend/hooks/useFormValidation.ts Normal file
View File

@ -0,0 +1,89 @@
import { useState } from "react";
export interface ValidationState {
enabled: boolean;
value: string;
}
export interface ValidationStates {
[fieldName: string]: ValidationState;
}
export interface UseFormValidationProps {
fields: string[];
initialStates?: Partial<ValidationStates>;
}
export function useFormValidation({ fields, initialStates = {} }: UseFormValidationProps) {
// 검증 상태 초기화
const initValidationStates = (): ValidationStates => {
const states: ValidationStates = {};
fields.forEach((field) => {
states[field] = initialStates[field] || { enabled: false, value: "" };
});
return states;
};
const [validationStates, setValidationStates] = useState<ValidationStates>(initValidationStates);
// 특정 필드의 검증 상태 업데이트
const updateFieldValidation = (fieldName: string, value: string) => {
setValidationStates((prev) => ({
...prev,
[fieldName]: { enabled: true, value: value.trim() },
}));
};
// onBlur 핸들러 생성
const createBlurHandler =
(fieldName: string) => (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const value = event.target.value.trim();
if (value) {
updateFieldValidation(fieldName, value);
}
};
// 모든 필수 필드가 검증되었는지 확인
const areAllFieldsValidated = (requiredFields?: string[]) => {
const fieldsToCheck = requiredFields || fields;
return fieldsToCheck.every((field) => validationStates[field]?.enabled);
};
// 검증 상태 초기화
const resetValidation = (newStates?: Partial<ValidationStates>) => {
if (newStates) {
setValidationStates((prev) => {
const updated = { ...prev };
Object.entries(newStates).forEach(([key, value]) => {
if (value !== undefined) {
updated[key] = value;
}
});
return updated;
});
} else {
setValidationStates(initValidationStates());
}
};
// 특정 필드 검증 상태 확인
const isFieldValidated = (fieldName: string) => validationStates[fieldName]?.enabled || false;
// 필드 값 가져오기
const getFieldValue = (fieldName: string) => validationStates[fieldName]?.value || "";
return {
// 상태
validationStates,
// 액션
updateFieldValidation,
resetValidation,
// 유틸리티
createBlurHandler,
areAllFieldsValidated,
isFieldValidated,
getFieldValue,
};
}

81
frontend/hooks/useSearchAndFilter.ts Normal file
View File

@ -0,0 +1,81 @@
import { useState, useMemo } from "react";
export interface SearchAndFilterOptions {
searchFields: string[];
initialSearchTerm?: string;
initialShowActiveOnly?: boolean;
}
export interface SearchAndFilterResult<T> {
// 상태
searchTerm: string;
showActiveOnly: boolean;
filteredItems: T[];
// 액션
setSearchTerm: (term: string) => void;
setShowActiveOnly: (show: boolean) => void;
// 유틸리티
clearSearch: () => void;
toggleActiveFilter: () => void;
}
/**
* 검색 및 활성 상태 필터링을 위한 커스텀 훅
* @param items 필터링할 아이템 배열
* @param options 검색 옵션 (검색 필드, 초기값 등)
*/
export function useSearchAndFilter<T extends { is_active: string }>(
items: T[],
options: SearchAndFilterOptions,
): SearchAndFilterResult<T> {
const { searchFields, initialSearchTerm = "", initialShowActiveOnly = false } = options;
// 검색 및 필터 상태
const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
const [showActiveOnly, setShowActiveOnly] = useState(initialShowActiveOnly);
// 필터링된 아이템 계산
const filteredItems = useMemo(() => {
return items.filter((item) => {
// 검색 조건 확인
const matchesSearch =
searchTerm.trim() === "" ||
searchFields.some((field) => {
const fieldValue = (item as any)[field];
return fieldValue && fieldValue.toString().toLowerCase().includes(searchTerm.toLowerCase());
});
// 활성 상태 조건 확인
const matchesActive = !showActiveOnly || item.is_active === "Y";
return matchesSearch && matchesActive;
});
}, [items, searchTerm, showActiveOnly, searchFields]);
// 검색어 초기화
const clearSearch = () => {
setSearchTerm("");
};
// 활성 필터 토글
const toggleActiveFilter = () => {
setShowActiveOnly((prev) => !prev);
};
return {
// 상태
searchTerm,
showActiveOnly,
filteredItems,
// 액션
setSearchTerm,
setShowActiveOnly,
// 유틸리티
clearSearch,
toggleActiveFilter,
};
}

51
frontend/hooks/useSelectedCategory.ts Normal file
View File

@ -0,0 +1,51 @@
import { useState, useCallback, useMemo } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { queryKeys } from "@/lib/queryKeys";
import type { CategoryInfo } from "@/types/commonCode";
/**
* 선택된 카테고리 상태를 관리하는 커스텀 훅
* React Query 캐시를 활용하여 전역 상태 관리
*/
export function useSelectedCategory() {
const queryClient = useQueryClient();
const [selectedCategoryCode, setSelectedCategoryCode] = useState<string>("");
// 현재 선택된 카테고리 정보를 React Query 캐시에서 가져오기
const selectedCategory = useMemo(() => {
if (!selectedCategoryCode) {
return null;
}
const categories = queryClient.getQueryData<CategoryInfo[]>(queryKeys.categories.list());
if (!categories || !Array.isArray(categories)) {
return null;
}
return categories.find((category) => category.category_code === selectedCategoryCode) || null;
}, [selectedCategoryCode, queryClient]);
// 카테고리 선택 함수
const selectCategory = useCallback((categoryCode: string) => {
setSelectedCategoryCode(categoryCode);
}, []);
// 카테고리 선택 해제 함수
const clearSelection = useCallback(() => {
setSelectedCategoryCode("");
}, []);
// 선택된 카테고리가 있는지 확인
const hasSelection = Boolean(selectedCategoryCode);
return {
// 상태
selectedCategoryCode,
selectedCategory,
hasSelection,
// 액션
selectCategory,
clearSelection,
};
}