프론트엔드 구현

frontend/hooks/useReportList.ts

@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback } from "react";
+import { ReportMaster, GetReportsParams } from "@/types/report";
+import { reportApi } from "@/lib/api/reportApi";
+import { useToast } from "@/hooks/use-toast";
+
+export function useReportList() {
+  const [reports, setReports] = useState<ReportMaster[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [limit] = useState(20);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const { toast } = useToast();
+
+  const fetchReports = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const params: GetReportsParams = {
+        page,
+        limit,
+        searchText,
+        useYn: "Y",
+        sortBy: "created_at",
+        sortOrder: "DESC",
+      };
+
+      const response = await reportApi.getReports(params);
+
+      if (response.success && response.data) {
+        setReports(response.data.items);
+        setTotal(response.data.total);
+      }
+    } catch (error: any) {
+      toast({
+        title: "오류",
+        description: error.message || "리포트 목록을 불러오는데 실패했습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [page, limit, searchText, toast]);
+
+  useEffect(() => {
+    fetchReports();
+  }, [fetchReports]);
+
+  const handleSearch = useCallback((text: string) => {
+    setSearchText(text);
+    setPage(1);
+  }, []);
+
+  return {
+    reports,
+    total,
+    page,
+    limit,
+    isLoading,
+    refetch: fetchReports,
+    setPage,
+    handleSearch,
+  };
+}