397 lines
19 KiB
TypeScript
397 lines
19 KiB
TypeScript
import { useState } from 'react'
|
||
import { Mode, SurveyBasicInfo } from '@/types/Survey'
|
||
|
||
export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>; mode: Mode }) {
|
||
const { surveyInfo, mode } = props
|
||
const [isFlip, setIsFlip] = useState<boolean>(true)
|
||
return (
|
||
<div className={`sale-detail-toggle-bx ${isFlip ? 'act' : ''}`}>
|
||
<div className="sale-detail-toggle-head" onClick={() => setIsFlip(!isFlip)}>
|
||
<div className="sale-detail-toggle-name">電気 / 屋根情報</div>
|
||
<div className="sale-detail-toggle-btn-wrap">
|
||
<button className="sale-detail-toggle-btn"></button>
|
||
</div>
|
||
</div>
|
||
<div className="sale-detail-toggle-cont">
|
||
<div className="sale-frame">
|
||
{/* 전기 관계 */}
|
||
<div className="sale-roof-title">電気関係</div>
|
||
<div className="data-form-wrap">
|
||
<div className="data-input-form-bx">
|
||
{/* 전기 계약 용량 */}
|
||
<div className="data-input-form-tit">電気契約容量</div>
|
||
<div className="data-input mb5">
|
||
<input type="text" className="input-frame" defaultValue={'10'} readOnly={mode === 'READ'} />
|
||
</div>
|
||
{mode === 'READ' && <input type="text" className="input-frame" defaultValue={'10'} readOnly={mode === 'READ'} />}
|
||
{mode !== 'READ' && (
|
||
<div className="data-input">
|
||
<select className="select-form" name="" id="">
|
||
<option value="">kVA</option>
|
||
<option value="">kVA</option>
|
||
<option value="">kVA</option>
|
||
<option value="">kVA</option>
|
||
<option value="">kVA</option>
|
||
</select>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 전기 소매 회사사 */}
|
||
<div className="data-input-form-tit">電気小売会社</div>
|
||
<input type="text" className="input-frame" defaultValue={'HWJ Electric'} readOnly={mode === 'READ'} />
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 전기 부대 설비 */}
|
||
<div className="data-input-form-tit">
|
||
電気袋設備<span>※複数選択可能</span>
|
||
</div>
|
||
<div className="data-check-wrap">
|
||
<div className="check-form-box">
|
||
<input type="checkbox" id="ch01" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ch01">エコキュート</label>
|
||
</div>
|
||
<div className="check-form-box">
|
||
<input type="checkbox" id="ch02" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ch02">エネパーム</label>
|
||
</div>
|
||
<div className="check-form-box">
|
||
<input type="checkbox" id="ch03" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ch03">蓄電池システム</label>
|
||
</div>
|
||
<div className="check-form-box">
|
||
<input type="checkbox" id="ch04" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ch04">太陽光発電</label>
|
||
</div>
|
||
<div className="check-form-box">
|
||
<input type="checkbox" id="ch05" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ch05">その他 (直接入力)</label>
|
||
</div>
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" disabled defaultValue={''} />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 설치 희망 시스템 */}
|
||
<div className="data-input-form-tit red-f">設置希望システム</div>
|
||
{mode === 'READ' && (
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
</div>
|
||
)}
|
||
{mode !== 'READ' && (
|
||
<div className="data-input mb5">
|
||
<select className="select-form" name="" id="">
|
||
<option value="">太陽光発電</option>
|
||
<option value="">太陽光発電</option>
|
||
<option value="">太陽光発電</option>
|
||
<option value="">太陽光発電</option>
|
||
<option value="">太陽光発電</option>
|
||
</select>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="sale-frame">
|
||
{/* 지붕 관계 */}
|
||
<div className="sale-roof-title">屋根関係</div>
|
||
<div className="data-form-wrap">
|
||
<div className="data-input-form-bx">
|
||
{/* 건축 연수 */}
|
||
<div className="data-input-form-tit red-f">建築研修</div>
|
||
<div className="data-input mb5">
|
||
{mode === 'READ' && <input type="text" className="input-frame" defaultValue={''} disabled />}
|
||
{mode !== 'READ' && (
|
||
<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="data-input flex">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
<span>年</span>
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 지붕재 */}
|
||
<div className="data-input-form-tit">
|
||
屋根材<span>※最大2個まで選択可能</span>
|
||
</div>
|
||
<div className="data-check-wrap">
|
||
<div className="check-form-box">
|
||
<input type="checkbox" id="ch01" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ch01">スレート</label>
|
||
</div>
|
||
<div className="check-form-box">
|
||
<input type="checkbox" id="ch02" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ch02">アスファルトシングル</label>
|
||
</div>
|
||
<div className="check-form-box">
|
||
<input type="checkbox" id="ch03" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ch03">瓦</label>
|
||
</div>
|
||
<div className="check-form-box">
|
||
<input type="checkbox" id="ch04" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ch04">金属屋根</label>
|
||
</div>
|
||
<div className="check-form-box">
|
||
<input type="checkbox" id="ch05" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ch05">その他 (直接入力)</label>
|
||
</div>
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" disabled defaultValue={''} />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 지붕 모양 */}
|
||
<div className="data-input-form-tit">建築研修</div>
|
||
<div className="data-input mb5">
|
||
{mode === 'READ' && <input type="text" className="input-frame" defaultValue={''} disabled />}
|
||
{mode !== 'READ' && (
|
||
<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="data-input">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 지붕 경사도도 */}
|
||
<div className="data-input-form-tit">屋根の斜面</div>
|
||
<div className="data-input flex">
|
||
<input type="text" className="input-frame" defaultValue={'4'} readOnly={mode === 'READ'} />
|
||
<span>寸</span>
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 주택구조조 */}
|
||
<div className="data-input-form-tit">住宅構造</div>
|
||
<div className="radio-form-box mb10">
|
||
<input type="radio" name="radio01" id="ra01" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra01">木製</label>
|
||
</div>
|
||
<div className="radio-form-box mb10">
|
||
<input type="radio" name="radio01" id="ra02" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra02">その他 (直接入力)</label>
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" disabled defaultValue={''} />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 서까래 재질 */}
|
||
<div className="data-input-form-tit">垂木材質</div>
|
||
<div className="data-check-wrap">
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio02" id="ra03" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra03">木製</label>
|
||
</div>
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio02" id="ra04" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra04">強制</label>
|
||
</div>
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio02" id="ra05" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra05">その他 (直接入力)</label>
|
||
</div>
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" disabled defaultValue={''} />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 서까래 크기 */}
|
||
<div className="data-input-form-tit red-f">垂木サイズ</div>
|
||
<div className="data-input mb5">
|
||
{mode === 'READ' && <input type="text" className="input-frame" defaultValue={''} disabled />}
|
||
{mode !== 'READ' && (
|
||
<select className="select-form" name="" id="">
|
||
<option value="">幅35mm以上×高さ48mm以上</option>
|
||
<option value="">幅35mm以上×高さ48mm以上</option>
|
||
<option value="">幅35mm以上×高さ48mm以上</option>
|
||
<option value="">幅35mm以上×高さ48mm以上</option>
|
||
<option value="">幅35mm以上×高さ48mm以上</option>
|
||
</select>
|
||
)}
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 서까래 피치 */}
|
||
<div className="data-input-form-tit red-f">垂木サイズ</div>
|
||
<div className="data-input mb5">
|
||
{mode === 'READ' && <input type="text" className="input-frame" defaultValue={''} disabled />}
|
||
{mode !== 'READ' && (
|
||
<select className="select-form" name="" id="">
|
||
<option value="">455mm以下</option>
|
||
<option value="">455mm以下</option>
|
||
<option value="">455mm以下</option>
|
||
<option value="">455mm以下</option>
|
||
<option value="">455mm以下</option>
|
||
</select>
|
||
)}
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 서까래 방향 */}
|
||
<div className="data-input-form-tit red-f">垂木の方向</div>
|
||
<div className="data-check-wrap mb0">
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio03" id="ra06" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra06">垂直垂木</label>
|
||
</div>
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio03" id="ra07" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra07">水平垂木</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 노지판 종류류 */}
|
||
<div className="data-input-form-tit">路地板の種類</div>
|
||
<div className="data-input mb5">
|
||
{mode === 'READ' && <input type="text" className="input-frame" defaultValue={''} disabled />}
|
||
{mode !== 'READ' && (
|
||
<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="data-input">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit">
|
||
路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
|
||
</div>
|
||
<div className="data-input flex">
|
||
<input type="text" className="input-frame" defaultValue={'150'} readOnly={mode === 'READ'} />
|
||
<span>mm</span>
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 서까래 방향 */}
|
||
<div className="data-input-form-tit ">垂木の方向</div>
|
||
<div className="data-check-wrap mb0">
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio04" id="ra08" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra08">あり</label>
|
||
</div>
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio04" id="ra09" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra09">なし</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 주택 구조 */}
|
||
<div className="data-input-form-tit red-f">住宅構造</div>
|
||
<div className="radio-form-box mb10">
|
||
<input type="radio" name="radio05" id="ra10" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra10">アスファルト屋根940（22kg以上）</label>
|
||
</div>
|
||
<div className="radio-form-box mb10">
|
||
<input type="radio" name="radio05" id="ra11" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra11">その他 (直接入力)</label>
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" disabled defaultValue={''} />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 단열재 유무 */}
|
||
<div className="data-input-form-tit red-f">断熱材の有無</div>
|
||
<div className="radio-form-box mb10">
|
||
<input type="radio" name="radio06" id="ra12" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra12">あり</label>
|
||
</div>
|
||
<div className="data-input mb10">
|
||
<input type="text" className="input-frame" defaultValue={''} readOnly={mode === 'READ'} />
|
||
</div>
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio06" id="ra13" readOnly={mode === 'READ'} />
|
||
<label htmlFor="ra13">なし</label>
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 지붕 구조의 순서 */}
|
||
<div className="data-input-form-tit red-f">路地板の種類</div>
|
||
<div className="data-input mb5">
|
||
{mode === 'READ' && <input type="text" className="input-frame" defaultValue={''} disabled />}
|
||
{mode !== 'READ' && (
|
||
<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="data-input">
|
||
<input type="text" className="input-frame" defaultValue={''} readOnly={mode === 'READ'} />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 지붕 제품명 설치 가능 여부 확인 */}
|
||
<div className="data-input-form-tit">屋根製品名 設置可否確認</div>
|
||
<div className="data-input mb5">
|
||
{mode === 'READ' && <input type="text" className="input-frame" defaultValue={''} disabled />}
|
||
{mode !== 'READ' && (
|
||
<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="data-input">
|
||
<input type="text" className="input-frame" defaultValue={''} readOnly={mode === 'READ'} />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
{/* 메모 */}
|
||
<div className="data-input-form-tit">メモ</div>
|
||
<div className="data-input">
|
||
<textarea
|
||
className="textarea-form"
|
||
name=""
|
||
id=""
|
||
defaultValue={'漏れの兆候があるため、正確な点検が必要です.'}
|
||
placeholder="TextArea Filed"
|
||
readOnly={mode === 'READ'}
|
||
></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|