From ed9155813f85680332b274bb8ac7b2990d583653 Mon Sep 17 00:00:00 2001 From: kikiyeom Date: Wed, 6 Mar 2024 11:48:00 +0900 Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=A3=BC=EC=86=8C=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B4=80=EB=A0=A8=20=EA=B8=B0=EB=8A=A5=EC=9D=84=20?= =?UTF-8?q?=EC=A0=95=EB=8F=88=ED=95=98=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 1 - .../ScheduleTemplate.component.tsx | 41 ++++++++++++------- 2 files changed, 26 insertions(+), 16 deletions(-) diff --git a/public/index.html b/public/index.html index 5b9493d7..25433363 100644 --- a/public/index.html +++ b/public/index.html @@ -40,7 +40,6 @@ /> -
diff --git a/src/components/Schedule/ScheduleTemplate/ScheduleTemplate.component.tsx b/src/components/Schedule/ScheduleTemplate/ScheduleTemplate.component.tsx index e61862c2..d021232f 100644 --- a/src/components/Schedule/ScheduleTemplate/ScheduleTemplate.component.tsx +++ b/src/components/Schedule/ScheduleTemplate/ScheduleTemplate.component.tsx @@ -10,6 +10,7 @@ import { SessionTemplate } from '../SessionTemplate'; import Plus from '@/assets/svg/plus-20.svg'; import { EventCreateRequest } from '@/types'; import { LocationType, ScheduleFormValues } from '@/utils'; +import { useScript } from '@/hooks'; const DEFAULT_SESSION: EventCreateRequest = { startedAt: '', @@ -18,6 +19,9 @@ const DEFAULT_SESSION: EventCreateRequest = { contentsCreateRequests: [], }; +const DAUM_POSTCODE_SCRIPT = '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'; +const DAUM_POSTCODE_API_URL = 'https://dapi.kakao.com/v2/local/search/address'; + const ScheduleTemplate = () => { const { register, control, formState, getValues, watch, setValue } = useFormContext(); @@ -30,6 +34,8 @@ const ScheduleTemplate = () => { control, }); + useScript(DAUM_POSTCODE_SCRIPT); + const generationOptions = useMemo(() => { return generations.map(({ generationNumber }) => ({ label: `${generationNumber}κΈ°`, @@ -43,25 +49,30 @@ const ScheduleTemplate = () => { const handleClickAddressSearch = () => { new window.daum.Postcode({ async oncomplete(data: { address: string }) { - const res = await fetch( - `https://dapi.kakao.com/v2/local/search/address?query=${data.address}`, - { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - Authorization: 'KakaoAK cc4af66dc10aa1a20830f3cc62c40a87', - }, + const res = await fetch(`${DAUM_POSTCODE_API_URL}?query=${data.address}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: 'KakaoAK cc4af66dc10aa1a20830f3cc62c40a87', }, - ); + }); const json = await res.json(); - const roadAddress = json.documents[0].road_address; + + const { + address_name: address, + x: longitude, + y: latitude, + building_name: buildingName, + } = json.documents[0].road_address; + const placeName = buildingName || address; + setValue('locationInfo', { - address: roadAddress.address_name, - latitude: roadAddress.y, - longitude: roadAddress.x, - placeName: roadAddress.building_name ?? roadAddress.address_name, + address, + latitude, + longitude, + placeName, }); - setValue('placeName', roadAddress.building_name); + setValue('placeName', placeName); }, }).open(); };