116 lines
3.7 KiB
JavaScript
116 lines
3.7 KiB
JavaScript
import React, { useEffect, useState, useRef } from 'react'
|
|
import { useForm } from 'react-hook-form'
|
|
import { queryStringFormatter } from '@/util/common-utils'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { globalLocaleStore } from '@/store/localeAtom'
|
|
import { useRecoilValue } from 'recoil'
|
|
import FindAddressPopQGrid from './FindAddressPopQGrid'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
|
|
export default function FindAddressPop(props) {
|
|
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
|
|
|
const { get } = useAxios(globalLocaleState)
|
|
|
|
const { getMessage } = useMessage()
|
|
|
|
const [prefId, setPrefId] = useState('')
|
|
const [address1, setAddress1] = useState('')
|
|
const [address2, setAddress2] = useState('')
|
|
const [address3, setAddress3] = useState('')
|
|
const gridRef = useRef()
|
|
|
|
const [gridProps, setGridProps] = useState({
|
|
gridData: [],
|
|
isPageable: false,
|
|
gridColumns: [],
|
|
})
|
|
const formInitValue = {
|
|
zipNo: '',
|
|
}
|
|
const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
|
|
defaultValues: formInitValue,
|
|
})
|
|
|
|
const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
|
|
//우편번호 검색
|
|
const searchPostNum = () => {
|
|
// //7830060
|
|
// //9302226
|
|
// //0790177 3개짜리
|
|
console.log(watch('zipNo'))
|
|
const params = {
|
|
zipcode: watch('zipNo'),
|
|
}
|
|
|
|
get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
|
|
console.log('우편조회 API결과:::::', res)
|
|
if (res.status === 200) {
|
|
} else {
|
|
alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
|
|
}
|
|
})
|
|
}
|
|
// 주소적용 클릭
|
|
const zipInfo = () => {
|
|
console.log('주소적용 클릭:::::::::')
|
|
// setAddress3('3333')
|
|
// setAddress3('4444')
|
|
// setAddress3('5555')
|
|
props.zipInfo({
|
|
zipNo: '3434343',
|
|
address1: '3333',
|
|
address2: '4444',
|
|
address3: '5555',
|
|
})
|
|
|
|
props.setShowButtonValid(false)
|
|
}
|
|
|
|
//숫자만
|
|
const handleKeyUp = (e) => {
|
|
let input = e.target
|
|
input.value = input.value.replace(/[^0-9]/g, '')
|
|
}
|
|
return (
|
|
<div className="modal-popup">
|
|
<div className="modal-dialog middle">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<h1 className="title">{getMessage('stuff.addressPopup.title')}</h1>
|
|
<button className="modal-close" onClick={() => props.setShowButtonValid(false)}>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="modal-body-inner">
|
|
<div className="address-input-wrap">
|
|
<input
|
|
type="text"
|
|
className="address-input"
|
|
maxLength={7}
|
|
onKeyUp={handleKeyUp}
|
|
{...form.register('zipNo')}
|
|
placeholder={getMessage('stuff.addressPopup.placeholder')}
|
|
/>
|
|
<button className="search-btn" onClick={searchPostNum}></button>
|
|
</div>
|
|
<div className="address-grid">
|
|
<FindAddressPopQGrid {...gridProps} gridRef={gridRef} />
|
|
</div>
|
|
</div>
|
|
<div className="footer-btn-wrap">
|
|
<button className="btn-origin grey mr5" onClick={() => props.setShowButtonValid(false)}>
|
|
{getMessage('stuff.addressPopup.btn1')}
|
|
</button>
|
|
<button className="btn-origin navy " onClick={zipInfo}>
|
|
{getMessage('stuff.addressPopup.btn2')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|