diff --git a/src/components/popup/ZipCodePopup.tsx b/src/components/popup/ZipCodePopup.tsx index bc7265f..2fec15c 100644 --- a/src/components/popup/ZipCodePopup.tsx +++ b/src/components/popup/ZipCodePopup.tsx @@ -1,51 +1,55 @@ 'use client' +import { useServey } from '@/hooks/useSurvey' import { useAddressStore } from '@/store/addressStore' import { usePopupController } from '@/store/popupController' import { useState } from 'react' -const dummyData = [ - { - post_code: '123-567', - pref: '東京都', - city: '千代田区', - detail: '永田町ハイツ101号室', - }, - { - post_code: '987-654', - pref: '大阪府', - city: '北区', - detail: '梅田スカイビル23階', - }, - { - post_code: '456-789', - pref: '福岡県', - city: '博多区', - detail: '中洲マンション305号', - }, -] +type Address = { + address1: string + address2: string + address3: string + kana1: string + kana2: string + kana3: string + prefcode: string + zipcode: string +} export default function ZipCodePopup() { const [searchValue, setSearchValue] = useState('') //search 데이터 유무 const [selected, setSelected] = useState('') - const { setAddressData } = useAddressStore() + const { getZipCode } = useServey() + const [addressInfo, setAddressInfo] = useState([]) //search 데이터 value 추가 - const handleChange = (e: React.ChangeEvent) => { - setSearchValue(e.target.value) - } + const popupController = usePopupController() const handleApply = () => { - const addressData = dummyData.find((item) => item.post_code === selected) setAddressData({ - post_code: addressData?.post_code || '', - address: addressData?.pref || '', - address_detail: addressData?.city + ' ' + addressData?.detail || '', + post_code: addressInfo?.[0]?.zipcode || '', + address: addressInfo?.[0]?.prefcode || '', + address_detail: addressInfo?.[0]?.address1 + ' ' + addressInfo?.[0]?.address2 + ' ' + addressInfo?.[0]?.address3 || '', }) popupController.setZipCodePopup(false) } + + const handleChange = (e: React.ChangeEvent) => { + setSearchValue(e.target.value) + } + + const handleSearch = () => { + const addressData = getZipCode(searchValue) + addressData.then((address) => { + if (address) { + setAddressInfo(address) + } else { + setAddressInfo([]) + } + }) + } return ( <>
@@ -66,10 +70,10 @@ export default function ZipCodePopup() {
- + {/*input에 데이터 있으면 삭제버튼 보임 */} {searchValue && } - +
@@ -83,11 +87,11 @@ export default function ZipCodePopup() { - {dummyData.map((item, index) => ( - setSelected(item.post_code)}> - {item.pref} - {item.city} - {item.detail} + {addressInfo?.map((item, index) => ( + setSelected(item.zipcode)}> + {item.address1} + {item.address2} + {item.address3} ))} diff --git a/src/components/survey-sale/detail/form/BasicForm.tsx b/src/components/survey-sale/detail/form/BasicForm.tsx index 18bb089..d463a90 100644 --- a/src/components/survey-sale/detail/form/BasicForm.tsx +++ b/src/components/survey-sale/detail/form/BasicForm.tsx @@ -191,13 +191,7 @@ export default function BasicForm() {
建物の住所
- handleChange('post_code', e.target.value)} - /> +