80 lines
3.0 KiB
TypeScript
80 lines
3.0 KiB
TypeScript
'use client'
|
|
import { useState } from "react"
|
|
|
|
export default function SaleZipCodePop() {
|
|
const [searchValue, setSearchValue] = useState(''); //search 데이터 유무
|
|
|
|
//search 데이터 value 추가
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSearchValue(e.target.value);
|
|
};
|
|
|
|
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"></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} onChange={handleChange} placeholder="Search"/>
|
|
{/*input에 데이터 있으면 삭제버튼 보임 */}
|
|
{searchValue && <button className="del-icon" onClick={() => setSearchValue('')}></button>}
|
|
<button className="search-icon"></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>
|
|
<tr>
|
|
<td>東京都</td>
|
|
<td>浜松</td>
|
|
<td>浜松町</td>
|
|
</tr>
|
|
<tr>
|
|
<td>東京都</td>
|
|
<td>浜松</td>
|
|
<td>浜松町</td>
|
|
</tr>
|
|
<tr>
|
|
<td>東京都</td>
|
|
<td>浜松</td>
|
|
<td>浜松町</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div className="btn-flex-wrap">
|
|
<div className="btn-bx">
|
|
<button className="btn-frame red icon">住所の適用<i className="btn-arr"></i></button>
|
|
</div>
|
|
<div className="btn-bx">
|
|
<button className="btn-frame n-blue icon">閉じる<i className="btn-arr"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |