Merge pull request #160 from Step3-kakao-tech-campus/feat/#138

refactor: useFetch 파일 생성

src/pages/profileList/api/PetApi.tsx → src/commons/apis/useFetch.tsx

@@ -1,5 +1,5 @@
-const getPetProfiles = async () => {
-  const response = await fetch(`${process.env.REACT_APP_URI}/pet/profiles`, {
+const useFetch = async (url: any) => {
+  const response = await fetch(`${process.env.REACT_APP_URI}/${url}`, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
@@ -14,4 +14,4 @@ const getPetProfiles = async () => {
   return json.response;
 };
 
-export default getPetProfiles;
+export default useFetch;

src/pages/profileList/ProfileListHome.tsx

@@ -1,16 +1,16 @@
 import { useEffect, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import useFetch from 'commons/apis/useFetch';
 import VProfileListHome, { ProfileListProps } from './VProfileListHome';
 import ProfileListHomeSkeleton from './ProfileListHomeSkeleton';
-import getPetProfiles from './api/PetApi';
 
 const ProfileListHome = () => {
   const [profileListProps, setProfileListProps] =
     useState<ProfileListProps | null>(null);
 
   const { data, isLoading, isError } = useQuery({
     queryKey: ['pet-list'],
-    queryFn: getPetProfiles,
+    queryFn: () => useFetch('/pet/profiles'),
   });
 
   useEffect(() => {

src/pages/profileList/newList/NewList.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import useFetch from 'commons/apis/useFetch';
 import VNewList, { Props } from './VNewList';
 import NewListSkeleton from './NewListSkeleton';
 
@@ -15,28 +16,9 @@ const NewList = () => {
 
   const [newList, setNewList] = useState<Props | null>(null);
 
-  const getProfiles = async () => {
-    const response = await fetch(
-      `${process.env.REACT_APP_URI}/pet/profiles/new?page=${currentPage}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-
-    const json = await response.json();
-    return json.response;
-  };
-
   const { data, isLoading, isError } = useQuery({
     queryKey: ['new-list', currentPage],
-    queryFn: getProfiles,
+    queryFn: () => useFetch(`/pet/profiles/new?page=${currentPage}`),
   });
 
   useEffect(() => {

src/pages/profileList/urgentList/UrgentList.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import useFetch from 'commons/apis/useFetch';
 import VUrgentList, { Props } from './VUrgentList';
 import UrgentListSkeleton from './UrgentListSkeleton';
 
@@ -15,28 +16,9 @@ const UrgentList = () => {
 
   const [urgentList, setUrgentList] = useState<Props | null>(null);
 
-  const getProfiles = async () => {
-    const response = await fetch(
-      `${process.env.REACT_APP_URI}/pet/profiles/sos?page=${currentPage}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-
-    const json = await response.json();
-    return json.response;
-  };
-
   const { data, isLoading, isError } = useQuery({
     queryKey: ['urgent-list', currentPage],
-    queryFn: getProfiles,
+    queryFn: () => useFetch(`/pet/profiles/sos?page=${currentPage}`),
   });
 
   useEffect(() => {

src/pages/shelterInfo/ShelterInfo.tsx

@@ -1,39 +1,21 @@
 import { useNavigate, useParams } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import useFetch from 'commons/apis/useFetch';
 import VShelterInfo, { Props } from './VShelterInfo';
 import ShelterInfoSkeleton from './ShelterInfoSkeleton';
 
 const ShelterInfo = () => {
-  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태
+  const [currentPage, setCurrentPage] = useState(1);
   const navigate = useNavigate();
   const params = useParams();
   const shelterId = params.id;
 
   const [profiles, setProfiles] = useState<Props | null>(null);
 
-  const getShelter = async () => {
-    const response = await fetch(
-      `${process.env.REACT_APP_URI}/shelter/${shelterId}?page=${currentPage}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-
-    const json = await response.json();
-    return json.response;
-  };
-
   const { data, isLoading, isError } = useQuery({
     queryKey: ['page', currentPage],
-    queryFn: getShelter,
+    queryFn: () => useFetch(`/shelter/${shelterId}?page=${currentPage}`),
   });
   console.log(data);
 

src/pages/shelterInfo/VShelterInfo.tsx

@@ -39,9 +39,6 @@ export interface Props {
 
 const VShelterInfo = (props: Props) => {
   const loginAccount = getCookie('accountInfo');
-  console.log(loginAccount);
-  console.log(loginAccount.role);
-  console.log(loginAccount.id);
 
   return (
     <div>

src/pages/update/UpdateTemplate.tsx

@@ -5,47 +5,23 @@ import { useParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import registerState from 'recoil/registerState';
 import DayModalInput from 'pages/register/DayModalInput';
+import useFetch from 'commons/apis/useFetch';
 import UpdateHeader from './UpdateHeader';
 import PatchStatusSelectGroup from './PatchStatusSelectGroup';
 import UpdateRegisterForm from './UpdateRegisterForm';
 
 const UpdateTemplate = () => {
   const params = useParams();
   const petId = params.id;
-  const cookie = getCookie('loginToken');
   const [updateState, setUpdateState] = useRecoilState(registerState);
   const [error, setError] = useState({
     isError: false,
     errorMessage: '',
   });
 
-  // petInfo return
-  const getPetInfo = async () => {
-    const res = await fetch(
-      `${process.env.REACT_APP_URI}/pet/register-info/${petId}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${cookie}`,
-        },
-      },
-    )
-      .then((response) => {
-        return response.json();
-      })
-      .then((apiData) => {
-        if (apiData.success === false) {
-          throw new Error(apiData.message);
-        }
-        return { ...apiData.response };
-      });
-    return res;
-  };
-
   const { data, isLoading, isError } = useQuery({
     queryKey: ['pet-update'],
-    queryFn: () => getPetInfo(),
+    queryFn: () => useFetch(`/pet/register-info/${petId}`),
     onSuccess: (fetchedData) => {
       const { profileImageUrl, profileShortFormUrl, ...rest } = fetchedData;
       setUpdateState({ ...rest, isComplete: true });