✨ feat: useFetchData 커스텀 훅

src/hooks/useFetchData.ts

@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store/store";
+
+const useFetchData = <T>(url: string) => {
+  const [data, setData] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const accessToken = useSelector((state: RootState) => state.user.accessToken);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const headers: HeadersInit = {};
+
+        if (accessToken) {
+          headers["Authorization"] = `Bearer ${accessToken}`; // 로그인 상태인 경우, 전역상태의 accessToken을 가져와 인증 요청을 할 수 있음
+        }
+
+        const response = await fetch(url, { headers });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const result: T = await response.json();
+        setData(result);
+      } catch (error) {
+        if (error instanceof Error) {
+          setError(error.message);
+        } else {
+          setError("An unknown error occurred");
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [url, accessToken]);
+
+  return { data, isLoading, error };
+};
+
+export default useFetchData;