fix: delete submit, exit button at ZipCodePopup page

This commit is contained in:
Dayoung 2025-05-27 11:22:58 +09:00
parent c8692577fb
commit 25935a96be
3 changed files with 47 additions and 39 deletions

View File

@ -18,20 +18,17 @@ type Address = {
export default function ZipCodePopup() {
const [searchValue, setSearchValue] = useState('') //search 데이터 유무
const [selected, setSelected] = useState('')
const { setAddressData } = useAddressStore()
const { getZipCode } = useServey()
const [addressInfo, setAddressInfo] = useState<Address[] | null>([])
//search 데이터 value 추가
const popupController = usePopupController()
const handleApply = () => {
const handleApply = (item: Address) => {
setAddressData({
post_code: addressInfo?.[0]?.zipcode || '',
address: addressInfo?.[0]?.address1 || '',
address_detail: addressInfo?.[0]?.address2 + ' ' + addressInfo?.[0]?.address3 || '',
post_code: item.zipcode || '',
address: item.address1 || '',
address_detail: item.address2 + ' ' + item.address3 || '',
})
popupController.setZipCodePopup(false)
}
@ -70,7 +67,18 @@ export default function ZipCodePopup() {
<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} />
<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>
@ -88,7 +96,12 @@ export default function ZipCodePopup() {
</thead>
<tbody>
{addressInfo?.map((item, index) => (
<tr key={`${item.zipcode}-${index}`} onClick={() => setSelected(item.zipcode)}>
<tr
key={`${item.zipcode}-${index}`}
onClick={() => {
handleApply(item)
}}
>
<td>{item.address1}</td>
<td>{item.address2}</td>
<td>{item.address3}</td>
@ -96,18 +109,6 @@ export default function ZipCodePopup() {
))}
</tbody>
</table>
<div className="btn-flex-wrap">
<div className="btn-bx">
<button className="btn-frame red icon" onClick={handleApply}>
<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(false)}>
<i className="btn-arr"></i>
</button>
</div>
</div>
</div>
</div>
</div>

View File

@ -397,24 +397,26 @@ export default function RoofForm(props: {
<SelectedBox mode={mode} column="openFieldPlateKind" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
</div>
<div className="data-input-form-bx">
{/* 노지판 두께 */}
<div className="data-input-form-tit">
<span>, . </span>
{roofInfo.openFieldPlateKind === '4' && (
<div className="data-input-form-bx">
{/* 노지판 두께 */}
<div className="data-input-form-tit">
<span>, . </span>
</div>
<div className="data-input flex">
<input
type="number"
inputMode="numeric"
id="openFieldPlateThickness"
className="input-frame"
value={roofInfo?.openFieldPlateThickness ?? ''}
disabled={mode === 'READ'}
onChange={(e) => handleNumberInput('openFieldPlateThickness', e.target.value)}
/>
<span>mm</span>
</div>
</div>
<div className="data-input flex">
<input
type="number"
inputMode="numeric"
id="openFieldPlateThickness"
className="input-frame"
value={roofInfo?.openFieldPlateThickness ?? ''}
disabled={mode === 'READ'}
onChange={(e) => handleNumberInput('openFieldPlateThickness', e.target.value)}
/>
<span>mm</span>
</div>
</div>
)}
<div className="data-input-form-bx">
{/* 누수 흔적 */}
<div className="data-input-form-tit "></div>

View File

@ -6,7 +6,7 @@ import { useState } from 'react'
export default function SearchForm({ memberRole, userId }: { memberRole: string; userId: string }) {
const router = useRouter()
const { setSearchOption, setSort, setIsMySurvey, setKeyword, reset, isMySurvey, keyword, searchOption, sort } = useSurveyFilterStore()
const { setSearchOption, setSort, setIsMySurvey, setKeyword, reset, isMySurvey, keyword, searchOption, sort, setOffset } = useSurveyFilterStore()
const [searchKeyword, setSearchKeyword] = useState(keyword)
const [option, setOption] = useState(searchOption)
@ -60,6 +60,10 @@ export default function SearchForm({ memberRole, userId }: { memberRole: string;
value={searchKeyword}
placeholder="タイトルを入力してください. (2文字以上)"
onChange={(e) => {
if (e.target.value.length > 30) {
alert('30文字以内で入力してください')
return
}
setSearchKeyword(e.target.value)
}}
onKeyDown={(e) => {
@ -78,6 +82,7 @@ export default function SearchForm({ memberRole, userId }: { memberRole: string;
id="ch01"
checked={isMySurvey === userId}
onChange={() => {
setOffset(0)
setIsMySurvey(isMySurvey === userId ? null : userId)
}}
/>