101 lines
4.2 KiB
TypeScript
101 lines
4.2 KiB
TypeScript
'use client'
|
|
import { useState } from "react"
|
|
import RoofComplianceNoSearch from "./nosearch/RoofComplianceNoSearch";
|
|
import RoofComplianceCheckData from "./RoofComplianceCheckData";
|
|
import Image from "next/image";
|
|
|
|
export default function RoofCompliance(){
|
|
const [reference, setReference] = useState(false);
|
|
const [searchValue, setSearchValue] = useState(''); //search 데이터 유무
|
|
|
|
//search 데이터 value 추가
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSearchValue(e.target.value);
|
|
};
|
|
|
|
return(
|
|
<div className="border-frame">
|
|
<div className="sale-form-bx">
|
|
<select className="select-form" name="" id="">
|
|
<option value="">屋根材を選択してください.</option>
|
|
<option value="">屋根材を選択してください.</option>
|
|
<option value="">屋根材を選択してください.</option>
|
|
<option value="">屋根材を選択してください.</option>
|
|
<option value="">屋根材を選択してください.</option>
|
|
</select>
|
|
</div>
|
|
<div className="sale-form-bx">
|
|
<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="compliance-check-wrap">
|
|
<div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
|
|
<div className="check-name-wrap">
|
|
<div className="check-name">凡例</div>
|
|
<div className="check-name-btn">
|
|
<button className="bx-btn" onClick={() => setReference(!reference)}></button>
|
|
</div>
|
|
</div>
|
|
<ul className= "reference-list">
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>設置可能</span>
|
|
</div>
|
|
</li>
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>設置不可</span>
|
|
</div>
|
|
</li>
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>お問い合わせ</span>
|
|
</div>
|
|
</li>
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>備考</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{/* checkData */}
|
|
<RoofComplianceCheckData/>
|
|
<RoofComplianceCheckData/>
|
|
<RoofComplianceCheckData/>
|
|
<RoofComplianceCheckData/>
|
|
<div className="float-btn-wrap">
|
|
<div className="btn-flex-wrap com">
|
|
<div className="btn-bx">
|
|
<button className="btn-frame n-blue icon">全選択<i className="btn-arr"></i></button>
|
|
</div>
|
|
<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>
|
|
{/* 검색기록 없을떄 */}
|
|
{/* <RoofComplianceNoSearch/> */}
|
|
</div>
|
|
)
|
|
} |