(최겸) PQ/실사 수정 및 개발

1 files changed, 650 insertions, 650 deletions

diff --git a/lib/pq/pq-review-table-new/pq-filter-sheet.tsx b/lib/pq/pq-review-table-new/pq-filter-sheet.tsx
index 979f25a2..ff1b890b 100644
--- a/lib/pq/pq-review-table-new/pq-filter-sheet.tsx
+++ b/lib/pq/pq-review-table-new/pq-filter-sheet.tsx
@@ -1,651 +1,651 @@
-"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 { CalendarIcon, ChevronRight, 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 { useTranslation } from '@/i18n/client'
-import { getFiltersStateParser } from "@/lib/parsers"
-import { DateRangePicker } from "@/components/date-range-picker"
-
-// nanoid 생성기
-const generateId = customAlphabet("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", 6)
-
-// PQ 필터 스키마 정의
-const pqFilterSchema = z.object({
-  requesterName: z.string().optional(),
-  pqNumber: z.string().optional(),
-  vendorName: z.string().optional(),
-  status: z.string().optional(),
-  evaluationResult: z.string().optional(),
-  createdAtRange: z.object({
-    from: z.date().optional(),
-    to: z.date().optional(),
-  }).optional(),
-})
-
-// PQ 상태 옵션 정의
-const pqStatusOptions = [
-  { value: "REQUESTED", label: "요청됨" },
-  { value: "IN_PROGRESS", label: "진행 중" },
-  { value: "SUBMITTED", label: "제출됨" },
-  { value: "APPROVED", label: "승인됨" },
-  { value: "REJECTED", label: "거부됨" },
-]
-
-// 평가 결과 옵션 정의
-const evaluationResultOptions = [
-  { value: "APPROVED", label: "승인" },
-  { value: "SUPPLEMENT", label: "보완" },
-  { value: "REJECTED", label: "불가" },
-]
-
-type PQFilterFormValues = z.infer<typeof pqFilterSchema>
-
-interface PQFilterSheetProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSearch?: () => void;
-  isLoading?: boolean;
-}
-
-export function PQFilterSheet({
-  isOpen,
-  onClose,
-  onSearch,
-  isLoading = false
-}: PQFilterSheetProps) {
-  const router = useRouter()
-  const params = useParams();
-  const lng = params ? (params.lng as string) : 'ko';
-  const { t } = useTranslation(lng);
-
-  const [isPending, startTransition] = useTransition()
-
-  // 초기화 상태 추가 - 폼 초기화 중에는 상태 변경을 방지
-  const [isInitializing, setIsInitializing] = useState(false)
-  // 마지막으로 적용된 필터를 추적하기 위한 ref
-  const lastAppliedFilters = useRef<string>("")
-
-  // nuqs로 URL 상태 관리 - 파라미터명을 'pqBasicFilters'로 변경
-  const [filters, setFilters] = useQueryState(
-    "basicFilters",
-    getFiltersStateParser().withDefault([])
-  )
-
-  // joinOperator 설정
-  const [joinOperator, setJoinOperator] = useQueryState(
-    "basicJoinOperator",
-    parseAsStringEnum(["and", "or"]).withDefault("and")
-  )
-
-  // 현재 URL의 페이지 파라미터도 가져옴
-  const [page, setPage] = useQueryState("page", { defaultValue: "1" })
-
-  // 폼 상태 초기화
-  const form = useForm<PQFilterFormValues>({
-    resolver: zodResolver(pqFilterSchema),
-    defaultValues: {
-      requesterName: "",
-      pqNumber: "",
-      vendorName: "",
-      status: "",
-      evaluationResult: "",
-      createdAtRange: {
-        from: undefined,
-        to: undefined,
-      },
-    },
-  })
-
-  // 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 === "createdAt" && Array.isArray(filter.value) && filter.value.length > 0) {
-          formValues.createdAtRange = {
-            from: filter.value[0] ? new Date(filter.value[0]) : undefined,
-            to: filter.value[1] ? new Date(filter.value[1]) : undefined,
-          };
-          formUpdated = true;
-        } else if (filter.id in formValues) {
-          // @ts-ignore - 동적 필드 접근
-          formValues[filter.id] = filter.value;
-          formUpdated = true;
-        }
-      });
-
-      // 폼 값이 변경된 경우에만 reset으로 한 번에 업데이트
-      if (formUpdated) {
-        form.reset(formValues);
-        lastAppliedFilters.current = currentFiltersString;
-      }
-
-      setIsInitializing(false);
-    }
-  }, [filters, isOpen])
-
-  // 현재 적용된 필터 카운트
-  const getActiveFilterCount = () => {
-    return filters?.length || 0
-  }
-
-// 폼 제출 핸들러 - 수동 URL 업데이트 버전
-async function onSubmit(data: PQFilterFormValues) {
-  // 초기화 중이면 제출 방지
-  if (isInitializing) return;
-
-  startTransition(async () => {
-    try {
-      // 필터 배열 생성
-      const newFilters = []
-
-      if (data.requesterName?.trim()) {
-        newFilters.push({
-          id: "requesterName",
-          value: data.requesterName.trim(),
-          type: "text",
-          operator: "iLike",
-          rowId: generateId()
-        })
-      }
-
-      if (data.pqNumber?.trim()) {
-        newFilters.push({
-          id: "pqNumber",
-          value: data.pqNumber.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.status?.trim()) {
-        newFilters.push({
-          id: "status",
-          value: data.status.trim(),
-          type: "select",
-          operator: "eq",
-          rowId: generateId()
-        })
-      }
-
-      if (data.evaluationResult?.trim()) {
-        newFilters.push({
-          id: "evaluationResult",
-          value: data.evaluationResult.trim(),
-          type: "select",
-          operator: "eq",
-          rowId: generateId()
-        })
-      }
-
-      // 생성일 범위 추가
-      if (data.createdAtRange?.from) {
-        newFilters.push({
-          id: "createdAt",
-          value: [
-            data.createdAtRange.from.toISOString().split('T')[0],
-            data.createdAtRange.to ? data.createdAtRange.to.toISOString().split('T')[0] : undefined
-          ].filter(Boolean),
-          type: "date",
-          operator: "isBetween",
-          rowId: generateId()
-        })
-      }
-
-      // 수동으로 URL 업데이트 (nuqs 대신)
-      const currentUrl = new URL(window.location.href);
-      const params = new URLSearchParams(currentUrl.search);
-      
-      // 기존 필터 관련 파라미터 제거
-      params.delete('basicFilters');
-      params.delete('pqBasicFilters');
-      params.delete('basicJoinOperator');
-      params.delete('pqBasicJoinOperator');
-      params.delete('page');
-      
-      // 새로운 필터 추가
-      if (newFilters.length > 0) {
-        params.set('basicFilters', JSON.stringify(newFilters));
-        params.set('basicJoinOperator', joinOperator);
-      }
-      
-      // 페이지를 1로 설정
-      params.set('page', '1');
-      
-      const newUrl = `${currentUrl.pathname}?${params.toString()}`;
-      console.log("New URL:", newUrl);
-      
-      // 페이지 완전 새로고침으로 서버 렌더링 강제
-      window.location.href = newUrl;
-
-      // 마지막 적용된 필터 업데이트
-      lastAppliedFilters.current = JSON.stringify(newFilters);
-
-      // 필터 업데이트 후 조회 핸들러 호출 (제공된 경우)
-      if (onSearch) {
-        console.log("Calling onSearch...");
-        onSearch();
-      }
-
-      console.log("=== PQ Filter Submit Complete ===");
-    } catch (error) {
-      console.error("PQ 필터 적용 오류:", error);
-    }
-  })
-}
-
-  // 필터 초기화 핸들러
-  // 필터 초기화 핸들러
-  async function handleReset() {
-    try {
-      setIsInitializing(true);
-
-      form.reset({
-        requesterName: "",
-        pqNumber: "",
-        vendorName: "",
-        status: "",
-        evaluationResult: "",
-        createdAtRange: { from: undefined, to: undefined },
-      });
-
-      console.log("=== PQ Filter Reset Debug ===");
-      console.log("Current URL before reset:", window.location.href);
-
-      // 수동으로 URL 초기화
-      const currentUrl = new URL(window.location.href);
-      const params = new URLSearchParams(currentUrl.search);
-
-      // 필터 관련 파라미터 제거
-      params.delete('basicFilters');
-      params.delete('pqBasicFilters');
-      params.delete('basicJoinOperator');
-      params.delete('pqBasicJoinOperator');
-      params.set('page', '1');
-
-      const newUrl = `${currentUrl.pathname}?${params.toString()}`;
-      console.log("Reset URL:", newUrl);
-
-      // 페이지 완전 새로고침
-      window.location.href = newUrl;
-
-      // 마지막 적용된 필터 초기화
-      lastAppliedFilters.current = "";
-
-      console.log("PQ 필터 초기화 완료");
-      setIsInitializing(false);
-    } catch (error) {
-      console.error("PQ 필터 초기화 오류:", error);
-      setIsInitializing(false);
-    }
-  }
-
-  // Don't render if not open (for side panel use)
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <div className="flex flex-col h-full max-h-full bg-[#F5F7FB] px-6 sm:px-8"  style={{backgroundColor:"#F5F7FB", paddingLeft:"2rem", paddingRight:"2rem"}}>
-      {/* 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">PQ 검색 필터</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="requesterName"
-                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("requesterName", "");
-                            }}
-                            disabled={isInitializing}
-                          >
-                            <X className="size-3.5" />
-                            <span className="sr-only">Clear</span>
-                          </Button>
-                        )}
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* PQ 번호 */}
-              <FormField
-                control={form.control}
-                name="pqNumber"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>PQ 번호</FormLabel>
-                    <FormControl>
-                      <div className="relative">
-                        <Input
-                          placeholder="PQ 번호 입력"
-                          {...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("pqNumber", "");
-                            }}
-                            disabled={isInitializing}
-                          >
-                            <X className="size-3.5" />
-                            <span className="sr-only">Clear</span>
-                          </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" />
-                            <span className="sr-only">Clear</span>
-                          </Button>
-                        )}
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* PQ 상태 */}
-              <FormField
-                control={form.control}
-                name="status"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>PQ 상태</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="PQ 상태 선택" />
-                            {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" />
-                                <span className="sr-only">Clear</span>
-                              </Button>
-                            )}
-                          </div>
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {pqStatusOptions.map(option => (
-                          <SelectItem key={option.value} value={option.value}>
-                            {option.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* 평가 결과 */}
-              <FormField
-                control={form.control}
-                name="evaluationResult"
-                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("evaluationResult", "");
-                                }}
-                                disabled={isInitializing}
-                              >
-                                <X className="size-3" />
-                                <span className="sr-only">Clear</span>
-                              </Button>
-                            )}
-                          </div>
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {evaluationResultOptions.map(option => (
-                          <SelectItem key={option.value} value={option.value}>
-                            {option.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* PQ 생성일 */}
-              <FormField
-                control={form.control}
-                name="createdAtRange"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>PQ 생성일</FormLabel>
-                    <FormControl>
-                      <div className="relative">
-                        <DateRangePicker
-                          triggerSize="default"
-                          triggerClassName="w-full bg-white"
-                          align="start"
-                          showClearButton={true}
-                          placeholder="PQ 생성일 범위를 선택하세요"
-                          value={field.value || undefined}
-                          onChange={field.onChange}
-                          disabled={isInitializing}
-                        />
-                        {(field.value?.from || field.value?.to) && (
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            className="absolute right-10 top-0 h-full px-2"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              form.setValue("createdAtRange", { from: undefined, to: undefined });
-                            }}
-                            disabled={isInitializing}
-                          >
-                            <X className="size-3.5" />
-                            <span className="sr-only">Clear</span>
-                          </Button>
-                        )}
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </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>
-  )
+"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 { CalendarIcon, ChevronRight, 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 { useTranslation } from '@/i18n/client'

+import { getFiltersStateParser } from "@/lib/parsers"

+import { DateRangePicker } from "@/components/date-range-picker"

+

+// nanoid 생성기

+const generateId = customAlphabet("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", 6)

+

+// PQ 필터 스키마 정의

+const pqFilterSchema = z.object({

+  requesterName: z.string().optional(),

+  pqNumber: z.string().optional(),

+  vendorName: z.string().optional(),

+  status: z.string().optional(),

+  evaluationResult: z.string().optional(),

+  createdAtRange: z.object({

+    from: z.date().optional(),

+    to: z.date().optional(),

+  }).optional(),

+})

+

+// PQ 상태 옵션 정의

+const pqStatusOptions = [

+  { value: "REQUESTED", label: "요청됨" },

+  { value: "IN_PROGRESS", label: "진행 중" },

+  { value: "SUBMITTED", label: "제출됨" },

+  { value: "APPROVED", label: "승인됨" },

+  { value: "REJECTED", label: "거부됨" },

+]

+

+// 평가 결과 옵션 정의

+const evaluationResultOptions = [

+  { value: "APPROVED", label: "승인" },

+  { value: "SUPPLEMENT", label: "보완" },

+  { value: "REJECTED", label: "불가" },

+]

+

+type PQFilterFormValues = z.infer<typeof pqFilterSchema>

+

+interface PQFilterSheetProps {

+  isOpen: boolean;

+  onClose: () => void;

+  onSearch?: () => void;

+  isLoading?: boolean;

+}

+

+export function PQFilterSheet({

+  isOpen,

+  onClose,

+  onSearch,

+  isLoading = false

+}: PQFilterSheetProps) {

+  const router = useRouter()

+  const params = useParams();

+  const lng = params ? (params.lng as string) : 'ko';

+  const { t } = useTranslation(lng);

+

+  const [isPending, startTransition] = useTransition()

+

+  // 초기화 상태 추가 - 폼 초기화 중에는 상태 변경을 방지

+  const [isInitializing, setIsInitializing] = useState(false)

+  // 마지막으로 적용된 필터를 추적하기 위한 ref

+  const lastAppliedFilters = useRef<string>("")

+

+  // nuqs로 URL 상태 관리 - 파라미터명을 'pqBasicFilters'로 변경

+  const [filters, setFilters] = useQueryState(

+    "basicFilters",

+    getFiltersStateParser().withDefault([])

+  )

+

+  // joinOperator 설정

+  const [joinOperator, setJoinOperator] = useQueryState(

+    "basicJoinOperator",

+    parseAsStringEnum(["and", "or"]).withDefault("and")

+  )

+

+  // 현재 URL의 페이지 파라미터도 가져옴

+  const [page, setPage] = useQueryState("page", { defaultValue: "1" })

+

+  // 폼 상태 초기화

+  const form = useForm<PQFilterFormValues>({

+    resolver: zodResolver(pqFilterSchema),

+    defaultValues: {

+      requesterName: "",

+      pqNumber: "",

+      vendorName: "",

+      status: "",

+      evaluationResult: "",

+      createdAtRange: {

+        from: undefined,

+        to: undefined,

+      },

+    },

+  })

+

+  // 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 === "createdAt" && Array.isArray(filter.value) && filter.value.length > 0) {

+          formValues.createdAtRange = {

+            from: filter.value[0] ? new Date(filter.value[0]) : undefined,

+            to: filter.value[1] ? new Date(filter.value[1]) : undefined,

+          };

+          formUpdated = true;

+        } else if (filter.id in formValues) {

+          // @ts-ignore - 동적 필드 접근

+          formValues[filter.id] = filter.value;

+          formUpdated = true;

+        }

+      });

+

+      // 폼 값이 변경된 경우에만 reset으로 한 번에 업데이트

+      if (formUpdated) {

+        form.reset(formValues);

+        lastAppliedFilters.current = currentFiltersString;

+      }

+

+      setIsInitializing(false);

+    }

+  }, [filters, isOpen])

+

+  // 현재 적용된 필터 카운트

+  const getActiveFilterCount = () => {

+    return filters?.length || 0

+  }

+

+// 폼 제출 핸들러 - 수동 URL 업데이트 버전

+async function onSubmit(data: PQFilterFormValues) {

+  // 초기화 중이면 제출 방지

+  if (isInitializing) return;

+

+  startTransition(async () => {

+    try {

+      // 필터 배열 생성

+      const newFilters = []

+

+      if (data.requesterName?.trim()) {

+        newFilters.push({

+          id: "requesterName",

+          value: data.requesterName.trim(),

+          type: "text",

+          operator: "iLike",

+          rowId: generateId()

+        })

+      }

+

+      if (data.pqNumber?.trim()) {

+        newFilters.push({

+          id: "pqNumber",

+          value: data.pqNumber.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.status?.trim()) {

+        newFilters.push({

+          id: "status",

+          value: data.status.trim(),

+          type: "select",

+          operator: "eq",

+          rowId: generateId()

+        })

+      }

+

+      if (data.evaluationResult?.trim()) {

+        newFilters.push({

+          id: "evaluationResult",

+          value: data.evaluationResult.trim(),

+          type: "select",

+          operator: "eq",

+          rowId: generateId()

+        })

+      }

+

+      // 생성일 범위 추가

+      if (data.createdAtRange?.from) {

+        newFilters.push({

+          id: "createdAt",

+          value: [

+            data.createdAtRange.from.toISOString().split('T')[0],

+            data.createdAtRange.to ? data.createdAtRange.to.toISOString().split('T')[0] : undefined

+          ].filter(Boolean),

+          type: "date",

+          operator: "isBetween",

+          rowId: generateId()

+        })

+      }

+

+      // 수동으로 URL 업데이트 (nuqs 대신)

+      const currentUrl = new URL(window.location.href);

+      const params = new URLSearchParams(currentUrl.search);

+      

+      // 기존 필터 관련 파라미터 제거

+      params.delete('basicFilters');

+      params.delete('pqBasicFilters');

+      params.delete('basicJoinOperator');

+      params.delete('pqBasicJoinOperator');

+      params.delete('page');

+      

+      // 새로운 필터 추가

+      if (newFilters.length > 0) {

+        params.set('basicFilters', JSON.stringify(newFilters));

+        params.set('basicJoinOperator', joinOperator);

+      }

+      

+      // 페이지를 1로 설정

+      params.set('page', '1');

+      

+      const newUrl = `${currentUrl.pathname}?${params.toString()}`;

+      console.log("New URL:", newUrl);

+      

+      // 페이지 완전 새로고침으로 서버 렌더링 강제

+      window.location.href = newUrl;

+

+      // 마지막 적용된 필터 업데이트

+      lastAppliedFilters.current = JSON.stringify(newFilters);

+

+      // 필터 업데이트 후 조회 핸들러 호출 (제공된 경우)

+      if (onSearch) {

+        console.log("Calling onSearch...");

+        onSearch();

+      }

+

+      console.log("=== PQ Filter Submit Complete ===");

+    } catch (error) {

+      console.error("PQ 필터 적용 오류:", error);

+    }

+  })

+}

+

+  // 필터 초기화 핸들러

+  // 필터 초기화 핸들러

+  async function handleReset() {

+    try {

+      setIsInitializing(true);

+

+      form.reset({

+        requesterName: "",

+        pqNumber: "",

+        vendorName: "",

+        status: "",

+        evaluationResult: "",

+        createdAtRange: { from: undefined, to: undefined },

+      });

+

+      console.log("=== PQ Filter Reset Debug ===");

+      console.log("Current URL before reset:", window.location.href);

+

+      // 수동으로 URL 초기화

+      const currentUrl = new URL(window.location.href);

+      const params = new URLSearchParams(currentUrl.search);

+

+      // 필터 관련 파라미터 제거

+      params.delete('basicFilters');

+      params.delete('pqBasicFilters');

+      params.delete('basicJoinOperator');

+      params.delete('pqBasicJoinOperator');

+      params.set('page', '1');

+

+      const newUrl = `${currentUrl.pathname}?${params.toString()}`;

+      console.log("Reset URL:", newUrl);

+

+      // 페이지 완전 새로고침

+      window.location.href = newUrl;

+

+      // 마지막 적용된 필터 초기화

+      lastAppliedFilters.current = "";

+

+      console.log("PQ 필터 초기화 완료");

+      setIsInitializing(false);

+    } catch (error) {

+      console.error("PQ 필터 초기화 오류:", error);

+      setIsInitializing(false);

+    }

+  }

+

+  // Don't render if not open (for side panel use)

+  if (!isOpen) {

+    return null;

+  }

+

+  return (

+    <div className="flex flex-col h-full max-h-full bg-[#F5F7FB] px-6 sm:px-8"  style={{backgroundColor:"#F5F7FB", paddingLeft:"2rem", paddingRight:"2rem"}}>

+      {/* 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">PQ 검색 필터</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="requesterName"

+                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("requesterName", "");

+                            }}

+                            disabled={isInitializing}

+                          >

+                            <X className="size-3.5" />

+                            <span className="sr-only">Clear</span>

+                          </Button>

+                        )}

+                      </div>

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+

+              {/* PQ 번호 */}

+              <FormField

+                control={form.control}

+                name="pqNumber"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>PQ 번호</FormLabel>

+                    <FormControl>

+                      <div className="relative">

+                        <Input

+                          placeholder="PQ 번호 입력"

+                          {...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("pqNumber", "");

+                            }}

+                            disabled={isInitializing}

+                          >

+                            <X className="size-3.5" />

+                            <span className="sr-only">Clear</span>

+                          </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" />

+                            <span className="sr-only">Clear</span>

+                          </Button>

+                        )}

+                      </div>

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+

+              {/* PQ 상태 */}

+              <FormField

+                control={form.control}

+                name="status"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>PQ 상태</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="PQ 상태 선택" />

+                            {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" />

+                                <span className="sr-only">Clear</span>

+                              </Button>

+                            )}

+                          </div>

+                        </SelectTrigger>

+                      </FormControl>

+                      <SelectContent>

+                        {pqStatusOptions.map(option => (

+                          <SelectItem key={option.value} value={option.value}>

+                            {option.label}

+                          </SelectItem>

+                        ))}

+                      </SelectContent>

+                    </Select>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+

+              {/* 평가 결과 */}

+              <FormField

+                control={form.control}

+                name="evaluationResult"

+                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("evaluationResult", "");

+                                }}

+                                disabled={isInitializing}

+                              >

+                                <X className="size-3" />

+                                <span className="sr-only">Clear</span>

+                              </Button>

+                            )}

+                          </div>

+                        </SelectTrigger>

+                      </FormControl>

+                      <SelectContent>

+                        {evaluationResultOptions.map(option => (

+                          <SelectItem key={option.value} value={option.value}>

+                            {option.label}

+                          </SelectItem>

+                        ))}

+                      </SelectContent>

+                    </Select>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+

+              {/* PQ 생성일 */}

+              <FormField

+                control={form.control}

+                name="createdAtRange"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>PQ 생성일</FormLabel>

+                    <FormControl>

+                      <div className="relative">

+                        <DateRangePicker

+                          triggerSize="default"

+                          triggerClassName="w-full bg-white"

+                          align="start"

+                          showClearButton={true}

+                          placeholder="PQ 생성일 범위를 선택하세요"

+                          value={field.value || undefined}

+                          onChange={field.onChange}

+                          disabled={isInitializing}

+                        />

+                        {(field.value?.from || field.value?.to) && (

+                          <Button

+                            type="button"

+                            variant="ghost"

+                            size="icon"

+                            className="absolute right-10 top-0 h-full px-2"

+                            onClick={(e) => {

+                              e.stopPropagation();

+                              form.setValue("createdAtRange", { from: undefined, to: undefined });

+                            }}

+                            disabled={isInitializing}

+                          >

+                            <X className="size-3.5" />

+                            <span className="sr-only">Clear</span>

+                          </Button>

+                        )}

+                      </div>

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+            </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