diff --git a/src/components/Information/AddressStep.tsx b/src/components/Information/AddressStep.tsx index 57ae386..0ee998c 100644 --- a/src/components/Information/AddressStep.tsx +++ b/src/components/Information/AddressStep.tsx @@ -47,8 +47,7 @@ const AddressStep = ({ userInfo, onNext }: AddressStepProps) => { const handleAddressSelection = (selectedAddressName: string) => { const result = handleAddressSelect(selectedAddressName); if (!result) return; - - setNewAddress({...newAddress, ...result}); + setNewAddress({...newAddress, ...result.addressData}); setAddressInput(result.selectedAddressName); }; diff --git a/src/components/WriteDocuments/LaborContractWriteForm.tsx b/src/components/WriteDocuments/LaborContractWriteForm.tsx index c119ff1..5fa1095 100644 --- a/src/components/WriteDocuments/LaborContractWriteForm.tsx +++ b/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( - [], - ); - // 지도에 표시할 핀에 사용되는 위/경도 좌표 - 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} /> )}