From aa86729f9a2ab95346a2851e3837de1c367aae17 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Fri, 20 Jun 2025 11:37:31 +0000
Subject: (대표님) 20250620 작업사항
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/evaluation/table/evaluation-filter-sheet.tsx | 1031 ++++++++++++++++++++++
 1 file changed, 1031 insertions(+)
 create mode 100644 lib/evaluation/table/evaluation-filter-sheet.tsx

(limited to 'lib/evaluation/table/evaluation-filter-sheet.tsx')

diff --git a/lib/evaluation/table/evaluation-filter-sheet.tsx b/lib/evaluation/table/evaluation-filter-sheet.tsx
new file mode 100644
index 00000000..7cda4989
--- /dev/null
+++ b/lib/evaluation/table/evaluation-filter-sheet.tsx
@@ -0,0 +1,1031 @@
+// ================================================================
+// 2. PERIODIC EVALUATIONS FILTER SHEET
+// ================================================================
+
+"use client"
+
+import { useEffect, useTransition, useState, useRef } from "react"
+import { useRouter, useParams } from "next/navigation"
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Search, X } from "lucide-react"
+import { customAlphabet } from "nanoid"
+import { parseAsStringEnum, useQueryState } from "nuqs"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+import { getFiltersStateParser } from "@/lib/parsers"
+
+// nanoid 생성기
+const generateId = customAlphabet("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", 6)
+
+// 정기평가 필터 스키마 정의
+const periodicEvaluationFilterSchema = z.object({
+  evaluationYear: z.string().optional(),
+  evaluationPeriod: z.string().optional(),
+  division: z.string().optional(),
+  status: z.string().optional(),
+  domesticForeign: z.string().optional(),
+  materialType: z.string().optional(),
+  vendorCode: z.string().optional(),
+  vendorName: z.string().optional(),
+  documentsSubmitted: z.string().optional(),
+  evaluationGrade: z.string().optional(),
+  finalGrade: z.string().optional(),
+  minTotalScore: z.string().optional(),
+  maxTotalScore: z.string().optional(),
+})
+
+// 옵션 정의
+const evaluationPeriodOptions = [
+  { value: "상반기", label: "상반기" },
+  { value: "하반기", label: "하반기" },
+  { value: "연간", label: "연간" },
+]
+
+const divisionOptions = [
+  { value: "PLANT", label: "해양" },
+  { value: "SHIP", label: "조선" },
+]
+
+const statusOptions = [
+  { value: "PENDING_SUBMISSION", label: "제출대기" },
+  { value: "SUBMITTED", label: "제출완료" },
+  { value: "IN_REVIEW", label: "검토중" },
+  { value: "REVIEW_COMPLETED", label: "검토완료" },
+  { value: "FINALIZED", label: "최종확정" },
+]
+
+const domesticForeignOptions = [
+  { value: "DOMESTIC", label: "내자" },
+  { value: "FOREIGN", label: "외자" },
+]
+
+const materialTypeOptions = [
+  { value: "EQUIPMENT", label: "기자재" },
+  { value: "BULK", label: "벌크" },
+  { value: "EQUIPMENT_BULK", label: "기자재/벌크" },
+]
+
+const documentsSubmittedOptions = [
+  { value: "true", label: "제출완료" },
+  { value: "false", label: "미제출" },
+]
+
+const gradeOptions = [
+  { value: "S", label: "S등급" },
+  { value: "A", label: "A등급" },
+  { value: "B", label: "B등급" },
+  { value: "C", label: "C등급" },
+  { value: "D", label: "D등급" },
+]
+
+type PeriodicEvaluationFilterFormValues = z.infer<typeof periodicEvaluationFilterSchema>
+
+interface PeriodicEvaluationFilterSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSearch?: () => void;
+  isLoading?: boolean;
+}
+
+export function PeriodicEvaluationFilterSheet({
+  isOpen,
+  onClose,
+  onSearch,
+  isLoading = false
+}: PeriodicEvaluationFilterSheetProps) {
+  const router = useRouter()
+  const params = useParams();
+
+  const [isPending, startTransition] = useTransition()
+  const [isInitializing, setIsInitializing] = useState(false)
+  const lastAppliedFilters = useRef<string>("")
+
+  // nuqs로 URL 상태 관리
+  const [filters, setFilters] = useQueryState(
+    "basicFilters",
+    getFiltersStateParser().withDefault([])
+  )
+
+  const [joinOperator, setJoinOperator] = useQueryState(
+    "basicJoinOperator",
+    parseAsStringEnum(["and", "or"]).withDefault("and")
+  )
+
+  // 폼 상태 초기화
+  const form = useForm<PeriodicEvaluationFilterFormValues>({
+    resolver: zodResolver(periodicEvaluationFilterSchema),
+    defaultValues: {
+      evaluationYear: new Date().getFullYear().toString(),
+      evaluationPeriod: "",
+      division: "",
+      status: "",
+      domesticForeign: "",
+      materialType: "",
+      vendorCode: "",
+      vendorName: "",
+      documentsSubmitted: "",
+      evaluationGrade: "",
+      finalGrade: "",
+      minTotalScore: "",
+      maxTotalScore: "",
+    },
+  })
+
+  // URL 필터에서 초기 폼 상태 설정
+  useEffect(() => {
+    const currentFiltersString = JSON.stringify(filters);
+
+    if (isOpen && filters && filters.length > 0 && currentFiltersString !== lastAppliedFilters.current) {
+      setIsInitializing(true);
+
+      const formValues = { ...form.getValues() };
+      let formUpdated = false;
+
+      filters.forEach(filter => {
+        if (filter.id in formValues) {
+          // @ts-ignore - 동적 필드 접근
+          formValues[filter.id] = filter.value;
+          formUpdated = true;
+        }
+      });
+
+      if (formUpdated) {
+        form.reset(formValues);
+        lastAppliedFilters.current = currentFiltersString;
+      }
+
+      setIsInitializing(false);
+    }
+  }, [filters, isOpen])
+
+  // 현재 적용된 필터 카운트
+  const getActiveFilterCount = () => {
+    return filters?.length || 0
+  }
+
+  // 폼 제출 핸들러
+  async function onSubmit(data: PeriodicEvaluationFilterFormValues) {
+    if (isInitializing) return;
+
+    startTransition(async () => {
+      try {
+        const newFilters = []
+
+        if (data.evaluationYear?.trim()) {
+          newFilters.push({
+            id: "evaluationYear",
+            value: parseInt(data.evaluationYear.trim()),
+            type: "number",
+            operator: "eq",
+            rowId: generateId()
+          })
+        }
+
+        if (data.evaluationPeriod?.trim()) {
+          newFilters.push({
+            id: "evaluationPeriod",
+            value: data.evaluationPeriod.trim(),
+            type: "select",
+            operator: "eq",
+            rowId: generateId()
+          })
+        }
+
+        if (data.division?.trim()) {
+          newFilters.push({
+            id: "division",
+            value: data.division.trim(),
+            type: "select",
+            operator: "eq",
+            rowId: generateId()
+          })
+        }
+
+        if (data.status?.trim()) {
+          newFilters.push({
+            id: "status",
+            value: data.status.trim(),
+            type: "select",
+            operator: "eq",
+            rowId: generateId()
+          })
+        }
+
+        if (data.domesticForeign?.trim()) {
+          newFilters.push({
+            id: "domesticForeign",
+            value: data.domesticForeign.trim(),
+            type: "select",
+            operator: "eq",
+            rowId: generateId()
+          })
+        }
+
+        if (data.materialType?.trim()) {
+          newFilters.push({
+            id: "materialType",
+            value: data.materialType.trim(),
+            type: "select",
+            operator: "eq",
+            rowId: generateId()
+          })
+        }
+
+        if (data.vendorCode?.trim()) {
+          newFilters.push({
+            id: "vendorCode",
+            value: data.vendorCode.trim(),
+            type: "text",
+            operator: "iLike",
+            rowId: generateId()
+          })
+        }
+
+        if (data.vendorName?.trim()) {
+          newFilters.push({
+            id: "vendorName",
+            value: data.vendorName.trim(),
+            type: "text",
+            operator: "iLike",
+            rowId: generateId()
+          })
+        }
+
+        if (data.documentsSubmitted?.trim()) {
+          newFilters.push({
+            id: "documentsSubmitted",
+            value: data.documentsSubmitted.trim() === "true",
+            type: "boolean",
+            operator: "eq",
+            rowId: generateId()
+          })
+        }
+
+        if (data.evaluationGrade?.trim()) {
+          newFilters.push({
+            id: "evaluationGrade",
+            value: data.evaluationGrade.trim(),
+            type: "select",
+            operator: "eq",
+            rowId: generateId()
+          })
+        }
+
+        if (data.finalGrade?.trim()) {
+          newFilters.push({
+            id: "finalGrade",
+            value: data.finalGrade.trim(),
+            type: "select",
+            operator: "eq",
+            rowId: generateId()
+          })
+        }
+
+        if (data.minTotalScore?.trim()) {
+          newFilters.push({
+            id: "totalScore",
+            value: parseFloat(data.minTotalScore.trim()),
+            type: "number",
+            operator: "gte",
+            rowId: generateId()
+          })
+        }
+
+        if (data.maxTotalScore?.trim()) {
+          newFilters.push({
+            id: "totalScore",
+            value: parseFloat(data.maxTotalScore.trim()),
+            type: "number",
+            operator: "lte",
+            rowId: generateId()
+          })
+        }
+
+        // URL 업데이트
+        const currentUrl = new URL(window.location.href);
+        const params = new URLSearchParams(currentUrl.search);
+        
+        params.delete('basicFilters');
+        params.delete('basicJoinOperator');
+        params.delete('page');
+        
+        if (newFilters.length > 0) {
+          params.set('basicFilters', JSON.stringify(newFilters));
+          params.set('basicJoinOperator', joinOperator);
+        }
+        
+        params.set('page', '1');
+        
+        const newUrl = `${currentUrl.pathname}?${params.toString()}`;
+        window.location.href = newUrl;
+
+        lastAppliedFilters.current = JSON.stringify(newFilters);
+
+        if (onSearch) {
+          onSearch();
+        }
+      } catch (error) {
+        console.error("정기평가 필터 적용 오류:", error);
+      }
+    })
+  }
+
+  // 필터 초기화 핸들러
+  async function handleReset() {
+    try {
+      setIsInitializing(true);
+
+      form.reset({
+        evaluationYear: new Date().getFullYear().toString(),
+        evaluationPeriod: "",
+        division: "",
+        status: "",
+        domesticForeign: "",
+        materialType: "",
+        vendorCode: "",
+        vendorName: "",
+        documentsSubmitted: "",
+        evaluationGrade: "",
+        finalGrade: "",
+        minTotalScore: "",
+        maxTotalScore: "",
+      });
+
+      const currentUrl = new URL(window.location.href);
+      const params = new URLSearchParams(currentUrl.search);
+
+      params.delete('basicFilters');
+      params.delete('basicJoinOperator');
+      params.set('page', '1');
+
+      const newUrl = `${currentUrl.pathname}?${params.toString()}`;
+      window.location.href = newUrl;
+
+      lastAppliedFilters.current = "";
+      setIsInitializing(false);
+    } catch (error) {
+      console.error("정기평가 필터 초기화 오류:", error);
+      setIsInitializing(false);
+    }
+  }
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col h-full max-h-full bg-[#F5F7FB] px-6 sm:px-8">
+      {/* Filter Panel Header */}
+      <div className="flex items-center justify-between px-6 min-h-[60px] shrink-0">
+        <h3 className="text-lg font-semibold whitespace-nowrap">정기평가 검색 필터</h3>
+        <div className="flex items-center gap-2">
+          {getActiveFilterCount() > 0 && (
+            <Badge variant="secondary" className="px-2 py-1">
+              {getActiveFilterCount()}개 필터 적용됨
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      {/* Join Operator Selection */}
+      <div className="px-6 shrink-0">
+        <label className="text-sm font-medium">조건 결합 방식</label>
+        <Select
+          value={joinOperator}
+          onValueChange={(value: "and" | "or") => setJoinOperator(value)}
+          disabled={isInitializing}
+        >
+          <SelectTrigger className="h-8 w-[180px] mt-2 bg-white">
+            <SelectValue placeholder="조건 결합 방식" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="and">모든 조건 충족 (AND)</SelectItem>
+            <SelectItem value="or">하나라도 충족 (OR)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col h-full min-h-0">
+          {/* Scrollable content area */}
+          <div className="flex-1 min-h-0 overflow-y-auto px-6 pb-4">
+            <div className="space-y-4 pt-2">
+              
+              {/* 평가년도 */}
+              <FormField
+                control={form.control}
+                name="evaluationYear"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>평가년도</FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Input
+                          type="number"
+                          placeholder="평가년도 입력"
+                          {...field}
+                          className={cn(field.value && "pr-8", "bg-white")}
+                          disabled={isInitializing}
+                        />
+                        {field.value && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="absolute right-0 top-0 h-full px-2"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              form.setValue("evaluationYear", "");
+                            }}
+                            disabled={isInitializing}
+                          >
+                            <X className="size-3.5" />
+                          </Button>
+                        )}
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 평가기간 */}
+              <FormField
+                control={form.control}
+                name="evaluationPeriod"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>평가기간</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      disabled={isInitializing}
+                    >
+                      <FormControl>
+                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
+                          <div className="flex justify-between w-full">
+                            <SelectValue placeholder="평가기간 선택" />
+                            {field.value && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-4 w-4 -mr-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  form.setValue("evaluationPeriod", "");
+                                }}
+                                disabled={isInitializing}
+                              >
+                                <X className="size-3" />
+                              </Button>
+                            )}
+                          </div>
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {evaluationPeriodOptions.map(option => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 구분 */}
+              <FormField
+                control={form.control}
+                name="division"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>구분</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      disabled={isInitializing}
+                    >
+                      <FormControl>
+                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
+                          <div className="flex justify-between w-full">
+                            <SelectValue placeholder="구분 선택" />
+                            {field.value && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-4 w-4 -mr-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  form.setValue("division", "");
+                                }}
+                                disabled={isInitializing}
+                              >
+                                <X className="size-3" />
+                              </Button>
+                            )}
+                          </div>
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {divisionOptions.map(option => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 진행상태 */}
+              <FormField
+                control={form.control}
+                name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>진행상태</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      disabled={isInitializing}
+                    >
+                      <FormControl>
+                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
+                          <div className="flex justify-between w-full">
+                            <SelectValue placeholder="진행상태 선택" />
+                            {field.value && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-4 w-4 -mr-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  form.setValue("status", "");
+                                }}
+                                disabled={isInitializing}
+                              >
+                                <X className="size-3" />
+                              </Button>
+                            )}
+                          </div>
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {statusOptions.map(option => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 내외자 구분 */}
+              <FormField
+                control={form.control}
+                name="domesticForeign"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>내외자 구분</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      disabled={isInitializing}
+                    >
+                      <FormControl>
+                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
+                          <div className="flex justify-between w-full">
+                            <SelectValue placeholder="내외자 구분 선택" />
+                            {field.value && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-4 w-4 -mr-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  form.setValue("domesticForeign", "");
+                                }}
+                                disabled={isInitializing}
+                              >
+                                <X className="size-3" />
+                              </Button>
+                            )}
+                          </div>
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {domesticForeignOptions.map(option => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 자재구분 */}
+              <FormField
+                control={form.control}
+                name="materialType"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>자재구분</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      disabled={isInitializing}
+                    >
+                      <FormControl>
+                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
+                          <div className="flex justify-between w-full">
+                            <SelectValue placeholder="자재구분 선택" />
+                            {field.value && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-4 w-4 -mr-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  form.setValue("materialType", "");
+                                }}
+                                disabled={isInitializing}
+                              >
+                                <X className="size-3" />
+                              </Button>
+                            )}
+                          </div>
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {materialTypeOptions.map(option => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 벤더 코드 */}
+              <FormField
+                control={form.control}
+                name="vendorCode"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>벤더 코드</FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Input
+                          placeholder="벤더 코드 입력"
+                          {...field}
+                          className={cn(field.value && "pr-8", "bg-white")}
+                          disabled={isInitializing}
+                        />
+                        {field.value && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="absolute right-0 top-0 h-full px-2"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              form.setValue("vendorCode", "");
+                            }}
+                            disabled={isInitializing}
+                          >
+                            <X className="size-3.5" />
+                          </Button>
+                        )}
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 벤더명 */}
+              <FormField
+                control={form.control}
+                name="vendorName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>벤더명</FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Input
+                          placeholder="벤더명 입력"
+                          {...field}
+                          className={cn(field.value && "pr-8", "bg-white")}
+                          disabled={isInitializing}
+                        />
+                        {field.value && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="absolute right-0 top-0 h-full px-2"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              form.setValue("vendorName", "");
+                            }}
+                            disabled={isInitializing}
+                          >
+                            <X className="size-3.5" />
+                          </Button>
+                        )}
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 문서제출여부 */}
+              <FormField
+                control={form.control}
+                name="documentsSubmitted"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>문서제출여부</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      disabled={isInitializing}
+                    >
+                      <FormControl>
+                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
+                          <div className="flex justify-between w-full">
+                            <SelectValue placeholder="문서제출여부 선택" />
+                            {field.value && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-4 w-4 -mr-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  form.setValue("documentsSubmitted", "");
+                                }}
+                                disabled={isInitializing}
+                              >
+                                <X className="size-3" />
+                              </Button>
+                            )}
+                          </div>
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {documentsSubmittedOptions.map(option => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 평가등급 */}
+              <FormField
+                control={form.control}
+                name="evaluationGrade"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>평가등급</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      disabled={isInitializing}
+                    >
+                      <FormControl>
+                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
+                          <div className="flex justify-between w-full">
+                            <SelectValue placeholder="평가등급 선택" />
+                            {field.value && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-4 w-4 -mr-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  form.setValue("evaluationGrade", "");
+                                }}
+                                disabled={isInitializing}
+                              >
+                                <X className="size-3" />
+                              </Button>
+                            )}
+                          </div>
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {gradeOptions.map(option => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 최종등급 */}
+              <FormField
+                control={form.control}
+                name="finalGrade"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>최종등급</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      disabled={isInitializing}
+                    >
+                      <FormControl>
+                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
+                          <div className="flex justify-between w-full">
+                            <SelectValue placeholder="최종등급 선택" />
+                            {field.value && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-4 w-4 -mr-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  form.setValue("finalGrade", "");
+                                }}
+                                disabled={isInitializing}
+                              >
+                                <X className="size-3" />
+                              </Button>
+                            )}
+                          </div>
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {gradeOptions.map(option => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 점수 범위 */}
+              <div className="grid grid-cols-2 gap-2">
+                <FormField
+                  control={form.control}
+                  name="minTotalScore"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>최소점수</FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <Input
+                            type="number"
+                            step="0.1"
+                            placeholder="최소"
+                            {...field}
+                            className={cn(field.value && "pr-8", "bg-white")}
+                            disabled={isInitializing}
+                          />
+                          {field.value && (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="absolute right-0 top-0 h-full px-2"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                form.setValue("minTotalScore", "");
+                              }}
+                              disabled={isInitializing}
+                            >
+                              <X className="size-3.5" />
+                            </Button>
+                          )}
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="maxTotalScore"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>최대점수</FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <Input
+                            type="number"
+                            step="0.1"
+                            placeholder="최대"
+                            {...field}
+                            className={cn(field.value && "pr-8", "bg-white")}
+                            disabled={isInitializing}
+                          />
+                          {field.value && (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="absolute right-0 top-0 h-full px-2"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                form.setValue("maxTotalScore", "");
+                              }}
+                              disabled={isInitializing}
+                            >
+                              <X className="size-3.5" />
+                            </Button>
+                          )}
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+            </div>
+          </div>
+
+          {/* Fixed buttons at bottom */}
+          <div className="p-4 shrink-0">
+            <div className="flex gap-2 justify-end">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleReset}
+                disabled={isPending || getActiveFilterCount() === 0 || isInitializing}
+                className="px-4"
+              >
+                초기화
+              </Button>
+              <Button
+                type="submit"
+                variant="samsung"
+                disabled={isPending || isLoading || isInitializing}
+                className="px-4"
+              >
+                <Search className="size-4 mr-2" />
+                {isPending || isLoading ? "조회 중..." : "조회"}
+              </Button>
+            </div>
+          </div>
+        </form>
+      </Form>
+    </div>
+  )
+}
\ No newline at end of file
-- 
cgit v1.2.3