refact: 위치 조회 api 훅 구현 및 프론트 로직 리팩토링

src/api/hook/LocationHook.ts

@@ -0,0 +1,18 @@
+import { useQuery } from 'react-query';
+import useGeoLocation from 'src/assets/hooks/useGeoLocation';
+
+import { LocationService } from '../service/LocationService';
+
+export const useFindAllLocations = () => {
+  const location = useGeoLocation();
+
+  const longitude = location?.coordinates?.lng;
+  const latitude = location?.coordinates?.lat;
+
+  return useQuery({
+    queryFn: () => LocationService.getAllLocations({ latitude, longitude }),
+    queryKey: ['locations'],
+    enabled: !!longitude && !!latitude,
+    onError: () => alert('위치 정보를 불러오는데 실패했습니다.'),
+  });
+};

src/api/service/LocationService.ts

@@ -0,0 +1,12 @@
+import apiV1Instance from 'src/api/api-instance';
+
+export class LocationService {
+  public static getAllLocations = async (options: {
+    latitude?: number;
+    longitude?: number;
+  }) => {
+    return apiV1Instance.get(
+      `/address?latitude=${options.latitude}&longitude=${options.longitude}`
+    );
+  };
+}

src/components/MainLayout/InfoBox.tsx

@@ -1,56 +1,18 @@
 import { Box } from '@mui/material';
-import axios from 'axios';
 import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { useFindAllWeathers } from 'src/api/hook/WeatherHook';
 
-import useGeoLocation from '../../assets/hooks/useGeoLocation';
-import { locationDataState, weatherDataState } from '../../utils/Recoil';
+import { weatherDataState } from '../../utils/Recoil';
 import PlaceBox from './InfoBox/PlaceBox';
 import WeatherBox from './InfoBox/WeatherBox';
 
 export default function InfoBox() {
   const setWeatherData = useSetRecoilState(weatherDataState);
-  const setLocationData = useSetRecoilState(locationDataState);
-
-  const location = useGeoLocation();
-
-  let latitude: number | undefined;
-  let longitude: number | undefined;
 
   const { data: windChillData } = useFindAllWeathers();
 
-  const locationAPI = async () => {
-    if (location !== undefined) {
-      try {
-        await axios
-          .get(`/api/v1/address?latitude=${latitude}&longitude=${longitude}`, {
-            headers: {
-              Accept: 'application/json',
-            },
-          })
-          .then((response) => {
-            console.log('response: ', response);
-            const data = response.data.data;
-            console.log('[WeatherTemp] locationAPI: ', data);
-            setLocationData(data);
-          });
-      } catch {
-        console.log('[WeatherTemp] locationAPI: api 불러오기 실패');
-      }
-    }
-  };
-
   useEffect(() => {
-    if (location?.coordinates) {
-      latitude = location.coordinates?.lat;
-      longitude = location.coordinates?.lng;
-      console.log('[GeoLocation] latitude: ', latitude);
-      console.log('[GeoLocation] longitude: ', longitude);
-
-      locationAPI();
-    }
-
     if (windChillData?.data) {
       setWeatherData(windChillData?.data?.data);
     }

src/components/MainLayout/InfoBox/PlaceBox.tsx

@@ -1,18 +1,22 @@
 import PlaceIcon from '@mui/icons-material/Place';
 import { Toolbar, Typography } from '@mui/material';
-import { useRecoilValue } from 'recoil';
-
-import { locationDataState } from '../../../utils/Recoil';
+import { useEffect, useState } from 'react';
+import { useFindAllLocations } from 'src/api/hook/LocationHook';
+import { LocationType } from 'src/utils/types';
 
 export default function PlaceBox() {
-  const locationData = useRecoilValue(locationDataState);
+  const [location, setLocation] = useState<LocationType>();
+  const { data: locationData } = useFindAllLocations();
+  useEffect(() => {
+    if (locationData?.data) {
+      setLocation(locationData?.data?.data);
+    }
+  }, [locationData]);
 
   return (
     <Toolbar sx={{ justifyContent: 'center', mt: 10 }}>
       <PlaceIcon sx={{ mr: 0.7 }} />
-      <Typography sx={{ fontSize: '16pt' }}>
-        {locationData?.fullAddress}
-      </Typography>
+      <Typography sx={{ fontSize: '16pt' }}>{location?.fullAddress}</Typography>
     </Toolbar>
   );
 }