diff --git a/frontend/app/(main)/admin/commonCode/page.tsx b/frontend/app/(main)/admin/commonCode/page.tsx
index b1941bb2..be946e05 100644
--- a/frontend/app/(main)/admin/commonCode/page.tsx
+++ b/frontend/app/(main)/admin/commonCode/page.tsx
@@ -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>
diff --git a/frontend/components/admin/CodeCategoryFormModal.tsx b/frontend/components/admin/CodeCategoryFormModal.tsx
index 3c61be1a..465b84df 100644
--- a/frontend/components/admin/CodeCategoryFormModal.tsx
+++ b/frontend/components/admin/CodeCategoryFormModal.tsx
@@ -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 ? (
                 <>
diff --git a/frontend/components/admin/CodeCategoryPanel.tsx b/frontend/components/admin/CodeCategoryPanel.tsx
index cfb5f883..57a7c799 100644
--- a/frontend/components/admin/CodeCategoryPanel.tsx
+++ b/frontend/components/admin/CodeCategoryPanel.tsx
@@ -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("");
diff --git a/frontend/components/admin/CodeDetailPanel.tsx b/frontend/components/admin/CodeDetailPanel.tsx
index 15116e98..fd0bdf2e 100644
--- a/frontend/components/admin/CodeDetailPanel.tsx
+++ b/frontend/components/admin/CodeDetailPanel.tsx
@@ -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">
diff --git a/frontend/components/admin/SortableCodeItem.tsx b/frontend/components/admin/SortableCodeItem.tsx
index ba8781b5..dd473757 100644
--- a/frontend/components/admin/SortableCodeItem.tsx
+++ b/frontend/components/admin/SortableCodeItem.tsx
@@ -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();
 
diff --git a/frontend/hooks/queries/useCategories.ts b/frontend/hooks/queries/useCategories.ts
index 4cf3b23f..6665f591 100644
--- a/frontend/hooks/queries/useCategories.ts
+++ b/frontend/hooks/queries/useCategories.ts
@@ -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() {
     },
   });
 }
-
diff --git a/frontend/hooks/useDragAndDrop.ts b/frontend/hooks/useDragAndDrop.ts
new file mode 100644
index 00000000..cc6b6cb2
--- /dev/null
+++ b/frontend/hooks/useDragAndDrop.ts
@@ -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,
+    },
+  };
+}
diff --git a/frontend/hooks/useFormValidation.ts b/frontend/hooks/useFormValidation.ts
new file mode 100644
index 00000000..ad8bf2c7
--- /dev/null
+++ b/frontend/hooks/useFormValidation.ts
@@ -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,
+  };
+}
diff --git a/frontend/hooks/useSearchAndFilter.ts b/frontend/hooks/useSearchAndFilter.ts
new file mode 100644
index 00000000..c0f38abe
--- /dev/null
+++ b/frontend/hooks/useSearchAndFilter.ts
@@ -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,
+  };
+}
diff --git a/frontend/hooks/useSelectedCategory.ts b/frontend/hooks/useSelectedCategory.ts
new file mode 100644
index 00000000..3b9861f6
--- /dev/null
+++ b/frontend/hooks/useSelectedCategory.ts
@@ -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,
+  };
+}