🐛 fix : 누락된 지역구 단위 선택 기능 및 훅 분리 적용 #127

src/components/WriteDocuments/LaborContractWriteForm.tsx

@@ -5,15 +5,14 @@ import {
   LaborContractEmployeeInfo,
 } from '@/types/api/document';
 import { formatPhoneNumber, parsePhoneNumber } from '@/utils/information';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Input from '@/components/Common/Input';
 import { InputType } from '@/types/common/input';
 import Dropdown, { DropdownModal } from '@/components/Common/Dropdown';
 import { phone } from '@/constants/information';
 import { Map, MapMarker } from 'react-kakao-maps-sdk';
-import { useGetGeoInfo, useSearchAddress } from '@/hooks/api/useKaKaoMap';
-import { AddressType, Document } from '@/types/api/map';
-import { pick } from '@/utils/map';
+import { useGetGeoInfo } from '@/hooks/api/useKaKaoMap';
+import { AddressType } from '@/types/api/map';
 import { isNotEmpty } from '@/utils/document';
 import BottomButtonPanel from '@/components/Common/BottomButtonPanel';
 import Button from '@/components/Common/Button';
@@ -25,6 +24,7 @@ import {
 } from '@/hooks/api/useDocument';
 import { useCurrentPostIdEmployeeStore } from '@/store/url';
 import LoadingItem from '../Common/LoadingItem';
+import { useAddressSearch } from '@/hooks/api/useAddressSearch';
 
 type LaborContractFormProps = {
   document?: LaborContractDataResponse;
@@ -45,23 +45,16 @@ const LaborContractWriteForm = ({
     middle: '',
     end: '',
   });
-  // 주소 검색용 input 저장하는 state
-  const [addressInput, setAddressInput] = useState('');
-  // 주소 검색 결과를 저장하는 array
-  const [addressSearchResult, setAddressSearchResult] = useState<Document[]>(
-    [],
-  );
-  // 지도에 표시할 핀에 사용되는 위/경도 좌표
-  const [currentGeoInfo, setCurrentGeoInfo] = useState({
-    lat: 0,
-    lon: 0,
-  });
+  const {
+    addressInput, // 주소 검색용 input 저장하는 state
+    addressSearchResult, // 주소 검색 결과를 저장하는 array
+    currentGeoInfo, // 지도에 표시할 핀에 사용되는 위/경도 좌표
+    setCurrentGeoInfo,
+    handleAddressSearch, // 검색할 주소 입력 시 실시간 검색
+    handleAddressSelect, // 검색 결과 중 원하는 주소를 선택할 시 state에 입력
+    setAddressInput,
+  } = useAddressSearch();
   const { data, isSuccess } = useGetGeoInfo(setCurrentGeoInfo); // 현재 좌표 기준 주소 획득
-  // 키워드로 주소 검색
-  const { searchAddress } = useSearchAddress({
-    onSuccess: (data) => setAddressSearchResult(data),
-  });
-
   const { mutate: postDocument } = usePostStandardLaborContracts(
     Number(currentPostId),
     {
@@ -114,68 +107,19 @@ const LaborContractWriteForm = ({
     });
   }, [isSuccess]);
 
-  // 검색할 주소 입력 시 실시간 검색
-  const handleAddressSearch = useCallback(
-    (address: string) => {
-      setAddressInput(address);
-      if (address !== '') {
-        searchAddress(address);
-      } else {
-        setAddressSearchResult([]);
-      }
-    },
-    [searchAddress],
-  );
-
-  // 검색 결과 중 원하는 주소를 선택할 시 state에 입력
-  const handleAddressSelect = (selectedAddressName: string) => {
-    // 사용자가 선택한 주소와 일치하는 결과를 검색 결과를 저장하는 array에서 탐색
-    const selectedAddress = addressSearchResult.find(
-      (address) => address.address_name === selectedAddressName,
-    ) as Document | undefined;
+  // 검색된 주소 선택 시 state에 반영
+  const handleAddressSelection = (selectedAddressName: string) => {
+    const result = handleAddressSelect(selectedAddressName);
+    if (!result) return;
 
-    if (!selectedAddress) return;
-
-    // 구 주소와 도로명 주소를 구분하기 위한 플래그(카카오에서 반환하는 속성 명이 달라짐)
-    const isRegionAddr =
-      selectedAddress.address_type === AddressType.REGION_ADDR;
-    const addressData = isRegionAddr
-      ? selectedAddress.address
-      : selectedAddress.road_address;
-
-    // 카카오에서 반환하는 데이터 중 필요한 속성들만 선택
-    const selectedProperties = pick(addressData, [
-      'address_name',
-      'region_1depth_name',
-      'region_2depth_name',
-      'region_3depth_name',
-    ]);
-
-    let region4DepthName = ''; // optional property인 region4DeptName
-    if (isRegionAddr) {
-      region4DepthName = selectedAddress.address.region_3depth_h_name || '';
-    } else {
-      region4DepthName = selectedAddress.road_address.road_name || '';
-    }
-
-    // 선택한 데이터들을 state에 update
     setNewDocumentData({
       ...newDocumentData,
       address: {
         ...newDocumentData.address,
-        ...selectedProperties,
-        region_4depth_name: region4DepthName,
-        longitude: Number(addressData.x),
-        latitude: Number(addressData.y),
+        ...result.addressData,
       },
     });
-    setAddressInput(selectedAddress.address_name);
-    setCurrentGeoInfo({
-      lon: Number(selectedAddress.x),
-      lat: Number(selectedAddress.y),
-    });
-    // 검색 결과 초기화
-    setAddressSearchResult([]);
+    setAddressInput(result.selectedAddressName);
   };
 
   // 문서 작성 완료 핸들러 함수
@@ -280,7 +224,7 @@ const LaborContractWriteForm = ({
                     ),
                     (address) => address.address_name,
                   )}
-                  onSelect={handleAddressSelect}
+                  onSelect={handleAddressSelection}
                 />
               )}
             </div>