Refactor: 주소 검색 관련 기능을 정돈하다

mash-up-kr · Mar 6, 2024 · ed91558 · ed91558
1 parent d89c644
commit ed91558
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/public/index.html b/public/index.html
@@ -40,7 +40,6 @@
     />
     <meta property="og:image" content="/assets/og-image.png" />
     <link rel="icon" href="/assets/favicon.svg" />
-    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git 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<ScheduleFormValues>();
@@ -30,6 +34,8 @@ const ScheduleTemplate = () => {
     control,
   });
 
+  useScript(DAUM_POSTCODE_SCRIPT);
+
   const generationOptions = useMemo<SelectOption[]>(() => {
     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();
   };