diff --git a/src/hooks/useFetchData.ts b/src/hooks/useFetchData.ts index e69de29b..e747624d 100644 --- a/src/hooks/useFetchData.ts +++ b/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 = (url: string) => { + const [data, setData] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(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;