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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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();