121 lines
4.0 KiB
TypeScript
121 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import { useSurvey } from '@/hooks/useSurvey'
|
|
import { useAddressStore } from '@/store/addressStore'
|
|
import { usePopupController } from '@/store/popupController'
|
|
import { useState } from 'react'
|
|
|
|
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 { setAddressData } = useAddressStore()
|
|
const { getZipCode } = useSurvey()
|
|
const [addressInfo, setAddressInfo] = useState<Address[] | null>([])
|
|
|
|
const popupController = usePopupController()
|
|
|
|
const handleApply = (item: Address) => {
|
|
setAddressData({
|
|
post_code: item.zipcode || '',
|
|
address: item.address1 || '',
|
|
address_detail: item.address2 + ' ' + item.address3 || '',
|
|
})
|
|
popupController.setZipCodePopup(false)
|
|
}
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSearchValue(e.target.value)
|
|
}
|
|
|
|
const handleSearch = () => {
|
|
const addressData = getZipCode(searchValue)
|
|
addressData.then((address) => {
|
|
if (address) {
|
|
setAddressInfo(address)
|
|
} else {
|
|
setAddressInfo([])
|
|
}
|
|
})
|
|
}
|
|
return (
|
|
<>
|
|
<div className="modal-popup">
|
|
<div className="modal-dialog">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<div className="modal-header-inner">
|
|
<div className="modal-name-wrap">
|
|
<div className="modal-img">
|
|
<img src="/assets/images/layout/modal_header_icon02.svg" alt="" />
|
|
</div>
|
|
<div className="modal-name">住所検索</div>
|
|
</div>
|
|
<button className="modal-close" onClick={() => popupController.setZipCodePopup(false)}></button>
|
|
</div>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="zip-code-search-wrap">
|
|
<div className="zip-code-search-input">
|
|
<div className="search-input">
|
|
<input
|
|
type="text"
|
|
className="search-frame"
|
|
value={searchValue}
|
|
placeholder="Search"
|
|
onChange={handleChange}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
handleSearch()
|
|
}
|
|
}}
|
|
/>
|
|
{/*input에 데이터 있으면 삭제버튼 보임 */}
|
|
{searchValue && <button className="del-icon" onClick={() => setSearchValue('')}></button>}
|
|
<button className="search-icon" onClick={handleSearch}></button>
|
|
</div>
|
|
</div>
|
|
<div className="zip-code-table-wrap">
|
|
<div className="zip-code-table-tit">名前</div>
|
|
<table className="zip-code-table">
|
|
<thead>
|
|
<tr>
|
|
<th>都道府県</th>
|
|
<th>市区町村</th>
|
|
<th>市区町村以下</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{addressInfo?.map((item, index) => (
|
|
<tr
|
|
key={`${item.zipcode}-${index}`}
|
|
onClick={() => {
|
|
handleApply(item)
|
|
}}
|
|
>
|
|
<td>{item.address1}</td>
|
|
<td>{item.address2}</td>
|
|
<td>{item.address3}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|