From 007b9541310d5a0c8feac11eb83934317cff3a83 Mon Sep 17 00:00:00 2001 From: Ajeong-Im Date: Wed, 4 Oct 2023 20:49:53 +0900 Subject: [PATCH 1/2] =?UTF-8?q?refact:=20=EC=9C=84=EC=B9=98=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20api=20=ED=94=84=EB=A1=A0=ED=8A=B8=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/hook/LocationHook.ts | 18 +++++++++ src/api/service/LocationService.ts | 12 ++++++ src/components/MainLayout/InfoBox.tsx | 40 +------------------ .../MainLayout/InfoBox/PlaceBox.tsx | 18 +++++---- 4 files changed, 42 insertions(+), 46 deletions(-) create mode 100644 src/api/hook/LocationHook.ts create mode 100644 src/api/service/LocationService.ts diff --git a/src/api/hook/LocationHook.ts b/src/api/hook/LocationHook.ts new file mode 100644 index 0000000..617b240 --- /dev/null +++ b/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('위치 정보를 불러오는데 실패했습니다.'), + }); +}; diff --git a/src/api/service/LocationService.ts b/src/api/service/LocationService.ts new file mode 100644 index 0000000..0296429 --- /dev/null +++ b/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}` + ); + }; +} diff --git a/src/components/MainLayout/InfoBox.tsx b/src/components/MainLayout/InfoBox.tsx index 7c52ea9..0da7576 100644 --- a/src/components/MainLayout/InfoBox.tsx +++ b/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); } diff --git a/src/components/MainLayout/InfoBox/PlaceBox.tsx b/src/components/MainLayout/InfoBox/PlaceBox.tsx index f488b0f..cf933af 100644 --- a/src/components/MainLayout/InfoBox/PlaceBox.tsx +++ b/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(); + const { data: locationData } = useFindAllLocations(); + useEffect(() => { + if (locationData?.data) { + setLocation(locationData?.data?.data); + } + }, [locationData]); return ( - - {locationData?.fullAddress} - + {location?.fullAddress} ); } From c245e3128142ff12709cc5ae55904335fad23599 Mon Sep 17 00:00:00 2001 From: HyunTaek Oh Date: Sat, 7 Oct 2023 23:52:01 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EB=B9=8C=EB=93=9C=20=EC=9D=B4?= =?UTF-8?q?=EC=8A=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MainLayout/InfoBox.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MainLayout/InfoBox.tsx b/src/components/MainLayout/InfoBox.tsx index d5095ac..f1dcf63 100644 --- a/src/components/MainLayout/InfoBox.tsx +++ b/src/components/MainLayout/InfoBox.tsx @@ -2,7 +2,6 @@ import { Box } from '@mui/material'; import { useEffect } from 'react'; import { useSetRecoilState } from 'recoil'; import { useFindAllWeathers } from 'src/api/hook/WeatherHook'; -import {token} from 'src/assets/data/token'; import { weatherDataState } from '../../utils/Recoil'; import PlaceBox from './InfoBox/PlaceBox';