qcast3/onsitesurvey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Survey new Design Component

Browse Source
This commit is contained in:
Dayoung 2025-05-16 18:28:36 +09:00
parent 398fffb6db
commit 9c0440b233
14 changed files with 269 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/survey-sale/[id]/page.tsx
View File

@ -23,7 +23,7 @@ export default function page() {
return (
<>
<DataTable />
<DetailForm surveyInfo={surveyInfo} mode="READ" />
{/* <DetailForm surveyInfo={surveyInfo} mode="READ" /> */}
</>
)
}

2
src/app/survey-sale/basic-info/page.tsx
View File

@ -1,4 +1,4 @@
import BasicForm from '@/components/survey-sale/detail/form/BasicForm'
import BasicForm from '@/components/survey-sale/detail/my/basicForm'
export default function page() {
return (

3
src/app/survey-sale/regist/page.tsx
View File

@ -1,4 +1,5 @@
import RegistForm from '@/components/survey-sale/temp/registForm'
// import RegistForm from '@/components/survey-sale/temp/registForm'
import RegistForm from '@/components/survey-sale/RegistForm'
export default function RegistPage() {
return (

2
src/app/survey-sale/roof-info/page.tsx
View File

@ -1,4 +1,4 @@
import RoofInfoForm from '@/components/survey-sale/detail/form/RoofInfoForm'
import RoofInfoForm from '@/components/survey-sale/detail/my/roofInfoForm'
export default function page() {
return (

29
src/components/survey-sale/RegistForm.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Mode } from '@/types/Survey'
import { useSearchParams } from 'next/navigation'
import DetailForm from './detail/DetailForm'
import { useServey } from '@/hooks/useSurvey'
import { useEffect, useState } from 'react'
import { SurveyBasicInfo } from '@/types/Survey'
import { useSessionStore } from '@/store/session'
export default function RegistForm() {
const searchParams = useSearchParams()
const id = searchParams.get('id')
const { surveyDetail } = useServey(Number(id))
const { session } = useSessionStore()
const [mode, setMode] = useState<Mode>('CREATE')
useEffect(() => {
if (id) {
setMode('EDIT')
}
}, [id])
return (
<>
<DetailForm mode={mode} surveyInfo={surveyDetail as SurveyBasicInfo} />
</>
)
}

39
src/components/survey-sale/detail/BasicForm.tsx
View File

@ -2,15 +2,11 @@
import { useEffect, useState } from 'react'
import { useSurveySaleTabState } from '@/store/surveySaleTabState'
import { SurveyBasicInfo } from '@/types/Survey'
import { SurveyBasicRequest } from '@/types/Survey'
import { Mode } from 'fs'
export default function BasicForm(props: {
surveyInfo: Partial<SurveyBasicInfo>
setSurveyInfo: (surveyInfo: Partial<SurveyBasicInfo>) => void
mode: Mode
}) {
const { surveyInfo, setSurveyInfo, mode } = props
export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBasicInfo: (basicInfo: SurveyBasicRequest) => void; mode: Mode }) {
const { basicInfo, setBasicInfo, mode } = props
const { setBasicInfoSelected } = useSurveySaleTabState()
const [isFlip, setIsFlip] = useState<boolean>(true)
@ -36,8 +32,8 @@ export default function BasicForm(props: {
type="text"
className="input-frame"
readOnly={mode === 'READ'}
value={surveyInfo?.REPRESENTATIVE}
onChange={(e) => setSurveyInfo({ ...surveyInfo, REPRESENTATIVE: e.target.value })}
value={basicInfo?.REPRESENTATIVE ?? ''}
onChange={(e) => setBasicInfo({ ...basicInfo, REPRESENTATIVE: e.target.value })}
/>
</div>
<div className="data-input-form-bx">
@ -46,8 +42,8 @@ export default function BasicForm(props: {
type="text"
className="input-frame"
readOnly={mode === 'READ'}
value={surveyInfo?.BUILDING_NAME ?? ''}
onChange={(e) => setSurveyInfo({ ...surveyInfo, BUILDING_NAME: e.target.value })}
value={basicInfo?.STORE ?? ''}
onChange={(e) => setBasicInfo({ ...basicInfo, STORE: e.target.value })}
/>
</div>
<div className="data-input-form-bx">
@ -56,8 +52,8 @@ export default function BasicForm(props: {
type="text"
className="input-frame"
readOnly={mode === 'READ'}
value={surveyInfo?.CONSTRUCTION_POINT ?? ''}
onChange={(e) => setSurveyInfo({ ...surveyInfo, CONSTRUCTION_POINT: e.target.value })}
value={basicInfo?.CONSTRUCTION_POINT ?? ''}
onChange={(e) => setBasicInfo({ ...basicInfo, CONSTRUCTION_POINT: e.target.value })}
/>
</div>
</div>
@ -71,38 +67,35 @@ export default function BasicForm(props: {
<button className="date-btn">
<i className="date-icon"></i>
</button>
<input type="text" className="date-frame" readOnly defaultValue={surveyInfo?.INVESTIGATION_DATE?.toString()} />
<input type="date" className="date-frame" readOnly defaultValue={basicInfo?.INVESTIGATION_DATE?.toString()} />
</div>
) : (
<input type="text" className="input-frame" disabled defaultValue={surveyInfo?.INVESTIGATION_DATE?.toString()} />
<input type="date" className="input-frame" disabled defaultValue={basicInfo?.INVESTIGATION_DATE?.toString()} />
)}
</div>
<div className="data-input-form-bx">
{/* 건물명 */}
<div className="data-input-form-tit">建物名</div>
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.BUILDING_NAME ?? ''} />
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.BUILDING_NAME ?? ''} />
</div>
<div className="data-input-form-bx">
{/* 고객명 */}
<div className="data-input-form-tit">建物名</div>
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.CUSTOMER_NAME ?? ''} />
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.CUSTOMER_NAME ?? ''} />
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">郵便番号/都道府県</div>
<div className="form-flex">
{/* 우편번호 */}
<div className="form-bx">
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.POST_CODE ?? ''} disabled />
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.POST_CODE ?? ''} disabled />
</div>
{/* 도도부현 */}
<div className="form-bx">
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.ADDRESS ?? ''} disabled />
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.ADDRESS ?? ''} disabled />
</div>
</div>
{/* 주소 */}
<div className="data-input mt5">
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={'浜松浜松町'} disabled />
</div>
<div className="form-btn">
<button className="btn-frame n-blue icon">
郵便番号<i className="btn-arr"></i>
@ -112,7 +105,7 @@ export default function BasicForm(props: {
<div className="data-input-form-bx">
<div className="data-input-form-tit">市区町村名, 以後の住所</div>
<input type="text" className="input-frame" defaultValue={'浜松 浜松町'} />
<input type="text" className="input-frame" defaultValue={'浜松 浜松町'} readOnly={mode === 'READ'} />
</div>
</div>
</div>

4
src/components/survey-sale/detail/ButtonForm.tsx
View File

@ -1,6 +1,6 @@
import { Mode } from '@/types/Survey'
import { Mode, SurveyBasicRequest, SurveyDetailRequest } from '@/types/Survey'
export default function ButtonForm(props: { mode: Mode; setMode: (mode: Mode) => void }) {
export default function ButtonForm(props: { mode: Mode; setMode: (mode: Mode) => void; data: { basic: SurveyBasicRequest; roof: SurveyDetailRequest } }) {
const { mode, setMode } = props
return (
<>

8
src/components/survey-sale/detail/DataTable.tsx
View File

@ -4,7 +4,7 @@ import { useServey } from '@/hooks/useSurvey'
import { useParams, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react'
import DetailForm from './DetailForm'
import RoofDetailForm from './RoofDetailForm'
import { SurveyBasicInfo } from '@/types/Survey'
export default function DataTable() {
const params = useParams()
@ -84,11 +84,7 @@ export default function DataTable() {
</tbody>
</table>
</div>
{/* {tab === 'roof-info' ? (
<RoofDetailForm surveyDetail={surveyDetail} isLoadingSurveyDetail={isLoadingSurveyDetail} />
) : (
<DetailForm surveyDetail={surveyDetail} isLoadingSurveyDetail={isLoadingSurveyDetail} />
)} */}
<DetailForm surveyInfo={surveyDetail as SurveyBasicInfo} mode="READ" />
</>
)
}

107
src/components/survey-sale/detail/DetailForm.tsx
View File

@ -1,52 +1,101 @@
'use client'
import { Mode, SurveyBasicInfo } from '@/types/Survey'
import { Mode, SurveyBasicInfo, SurveyBasicRequest, SurveyDetailRequest } from '@/types/Survey'
import { useEffect, useState } from 'react'
import ButtonForm from './ButtonForm'
import BasicForm from './BasicForm'
import RoofForm from './RoofForm'
const roofInfoForm: SurveyDetailRequest = {
CONTRACT_CAPACITY: null,
RETAIL_COMPANY: null,
SUPPLEMENTARY_FACILITIES: null,
SUPPLEMENTARY_FACILITIES_ETC: null,
INSTALLATION_SYSTEM: null,
INSTALLATION_SYSTEM_ETC: null,
CONSTRUCTION_YEAR: null,
CONSTRUCTION_YEAR_ETC: null,
ROOF_MATERIAL: null,
ROOF_MATERIAL_ETC: null,
ROOF_SHAPE: null,
ROOF_SHAPE_ETC: null,
ROOF_SLOPE: null,
HOUSE_STRUCTURE: '1',
HOUSE_STRUCTURE_ETC: null,
RAFTER_MATERIAL: '1',
RAFTER_MATERIAL_ETC: null,
RAFTER_SIZE: null,
RAFTER_SIZE_ETC: null,
RAFTER_PITCH: null,
RAFTER_PITCH_ETC: null,
RAFTER_DIRECTION: '1',
OPEN_FIELD_PLATE_KIND: null,
OPEN_FIELD_PLATE_KIND_ETC: null,
OPEN_FIELD_PLATE_THICKNESS: null,
LEAK_TRACE: false,
WATERPROOF_MATERIAL: null,
WATERPROOF_MATERIAL_ETC: null,
INSULATION_PRESENCE: '1',
INSULATION_PRESENCE_ETC: null,
STRUCTURE_ORDER: null,
STRUCTURE_ORDER_ETC: null,
INSTALLATION_AVAILABILITY: null,
INSTALLATION_AVAILABILITY_ETC: null,
MEMO: null,
}
const basicInfoForm: SurveyBasicRequest = {
REPRESENTATIVE: '',
STORE: null,
CONSTRUCTION_POINT: null,
INVESTIGATION_DATE: new Date().toLocaleDateString('en-CA'),
BUILDING_NAME: null,
CUSTOMER_NAME: null,
POST_CODE: null,
ADDRESS: null,
ADDRESS_DETAIL: null,
SUBMISSION_STATUS: false,
SUBMISSION_DATE: null,
}
export default function DetailForm(props: { surveyInfo?: SurveyBasicInfo; mode?: Mode }) {
const [surveyInfo, setSurveyInfo] = useState<Partial<SurveyBasicInfo>>(
props.surveyInfo ?? {
REPRESENTATIVE: '',
CONSTRUCTION_POINT: '',
STORE: '',
INVESTIGATION_DATE: '',
BUILDING_NAME: '',
CUSTOMER_NAME: '',
POST_CODE: '',
ADDRESS: '',
ADDRESS_DETAIL: '',
SUBMISSION_STATUS: true,
SUBMISSION_DATE: '2021-01-01',
DETAIL_INFO: null,
REG_DT: new Date(),
UPT_DT: new Date(),
},
)
const [roofValue, setRoofValue] = useState<Boolean>(false)
const [mode, setMode] = useState<Mode>(props.mode ?? 'CREATE')
const basicInfoProps = { surveyInfo, setSurveyInfo, mode }
const roofInfoProps = { surveyInfo, mode }
const buttonFormProps = { mode, setMode }
const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(basicInfoForm)
const [roofInfoData, setRoofInfoData] = useState<SurveyDetailRequest>(roofInfoForm)
// useEffect(() => {
// // setMode(props.surveyInfo ? 'EDIT' : 'CREATE')
// }, [props.surveyInfo])
useEffect(() => {
// setMode(props.surveyInfo ? 'EDIT' : 'CREATE')
console.log(props.surveyInfo)
}, [props.surveyInfo])
useEffect(() => {
console.log(surveyInfo)
}, [surveyInfo])
if (props.surveyInfo && mode === 'EDIT') {
const { ID, UPT_DT, REG_DT, DETAIL_INFO, ...rest } = props.surveyInfo
setBasicInfoData(rest)
if (DETAIL_INFO) {
const { ID, UPT_DT, REG_DT, BASIC_INFO_ID, ...rest } = DETAIL_INFO
setRoofInfoData(rest)
}
}
}, [props.surveyInfo, mode])
const data = {
basic: basicInfoData,
roof: roofInfoData,
}
const buttonFormProps = { mode, setMode, data }
return (
<>
<div className="sale-detail-toggle-wrap">
{mode}
{/* {mode} */}
{/* 기본정보 */}
<BasicForm {...basicInfoProps} />
<BasicForm basicInfo={basicInfoData} setBasicInfo={setBasicInfoData} mode={mode} />
{/* 전기/지붕정보 */}
<RoofForm {...roofInfoProps} />
<RoofForm roofInfo={roofInfoData} setRoofInfo={setRoofInfoData} mode={mode} />
<ButtonForm {...buttonFormProps} />
</div>
</>

316
src/components/survey-sale/detail/RoofForm.tsx
View File

@ -1,8 +1,21 @@
import { useState } from 'react'
import { Mode, SurveyBasicInfo } from '@/types/Survey'
import { Mode, SurveyBasicInfo, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'
import { roof_material, supplementary_facilities } from './form/etcProcess/MultiCheckEtc'
import { selectBoxOptions } from './form/etcProcess/SelectBoxEtc'
import { radioEtcData } from './form/etcProcess/RadioEtc'
export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>; mode: Mode }) {
const { surveyInfo, mode } = props
export default function RoofForm(props: {
roofInfo: SurveyDetailRequest | SurveyDetailInfo
setRoofInfo: (roofInfo: SurveyDetailRequest) => void
mode: Mode
}) {
const makeNumArr = (value: string) => {
return value
.split(',')
.map((v) => v.trim())
.filter((v) => v.length > 0)
}
const { roofInfo, setRoofInfo, mode } = props
const [isFlip, setIsFlip] = useState<boolean>(true)
return (
<div className={`sale-detail-toggle-bx ${isFlip ? 'act' : ''}`}>
@ -21,7 +34,7 @@ export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>;
{/* 전기 계약 용량 */}
<div className="data-input-form-tit">電気契約容量</div>
<div className="data-input mb5">
<input type="text" className="input-frame" defaultValue={'10'} readOnly={mode === 'READ'} />
<input type="text" className="input-frame" value={roofInfo?.CONTRACT_CAPACITY ?? ''} readOnly={mode === 'READ'} />
</div>
{mode === 'READ' && <input type="text" className="input-frame" defaultValue={'10'} readOnly={mode === 'READ'} />}
{mode !== 'READ' && (
@ -39,7 +52,7 @@ export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>;
<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'} />
<input type="text" className="input-frame" value={roofInfo?.RETAIL_COMPANY ?? ''} readOnly={mode === 'READ'} />
</div>
<div className="data-input-form-bx">
{/* 전기 부대 설비 */}
@ -47,34 +60,33 @@ export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>;
電気袋設備<span>※複数選択可能</span>
</div>
<div className="data-check-wrap">
<div className="check-form-box">
{/* <div className="check-form-box">
<input type="checkbox" id="ch01" readOnly={mode === 'READ'} />
<label htmlFor="ch01">エコキュート</label>
</div> */}
{supplementary_facilities.map((item) => (
<div className="check-form-box" key={item.id}>
<input
type="checkbox"
id={`${item.id}`}
checked={makeNumArr(roofInfo?.SUPPLEMENTARY_FACILITIES ?? '').includes(String(item.id))}
readOnly={mode === 'READ'}
/>
<label htmlFor={`${item.id}`}>{item.name}</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>
<input type="checkbox" id={`supplementary_facilities_etc`} checked={roofInfo?.SUPPLEMENTARY_FACILITIES_ETC !== null} readOnly />
<label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label>
</div>
</div>
<div className="data-input">
<input type="text" className="input-frame" disabled defaultValue={''} />
<input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.SUPPLEMENTARY_FACILITIES_ETC ?? ''} />
</div>
</div>
<div className="data-input-form-bx">
{/* 설치 희망 시스템 */}
<div className="data-input-form-tit red-f">設置希望システム</div>
{/* <div className="data-input-form-tit red-f">設置希望システム</div>
{mode === 'READ' && (
<div className="data-input">
<input type="text" className="input-frame" defaultValue={''} disabled />
@ -90,7 +102,9 @@ export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>;
<option value="">太陽光発電</option>
</select>
</div>
)}
)} */}
<div className="data-input-form-tit">設置希望システム</div>
<SelectedBox column="INSTALLATION_SYSTEM" detailInfoData={roofInfo as SurveyDetailInfo} />
</div>
</div>
</div>
@ -102,7 +116,7 @@ export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>;
{/* 건축 연수 */}
<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' && <input type="text" className="input-frame" defaultValue={''} disabled />}
{mode !== 'READ' && (
<select className="select-form" name="" id="">
<option value="">新築</option>
@ -111,12 +125,13 @@ export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>;
<option value="">新築</option>
<option value="">新築</option>
</select>
)}
)} */}
<SelectedBox column="CONSTRUCTION_YEAR" detailInfoData={roofInfo as SurveyDetailInfo} />
</div>
<div className="data-input flex">
{/* <div className="data-input flex">
<input type="text" className="input-frame" defaultValue={''} disabled />
<span>年</span>
</div>
</div> */}
</div>
<div className="data-input-form-bx">
{/* 지붕재 */}
@ -124,36 +139,26 @@ export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>;
屋根材<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>
{roof_material.map((item) => (
<div className="check-form-box" key={item.id}>
<input type="checkbox" id={`${item.id}`} checked={makeNumArr(roofInfo?.ROOF_MATERIAL ?? '').includes(String(item.id))} readOnly />
<label htmlFor={`${item.id}`}>{item.name}</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>
<input type="checkbox" id={`roof_material_etc`} checked={roofInfo?.ROOF_MATERIAL_ETC !== null} readOnly />
<label htmlFor={`roof_material_etc`}>その他 (直接入力)</label>
</div>
</div>
<div className="data-input">
<input type="text" className="input-frame" disabled defaultValue={''} />
<input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.ROOF_MATERIAL_ETC ?? ''} />
</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' && <input type="text" className="input-frame" defaultValue={''} disabled />}
{mode !== 'READ' && (
<select className="select-form" name="" id="">
<option value="">太陽光発電</option>
@ -162,7 +167,8 @@ export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>;
<option value="">太陽光発電</option>
<option value="">太陽光発電</option>
</select>
)}
)} */}
<SelectedBox column="ROOF_SHAPE" detailInfoData={roofInfo as SurveyDetailInfo} />
</div>
<div className="data-input">
<input type="text" className="input-frame" defaultValue={''} disabled />
@ -172,207 +178,84 @@ export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>;
{/* 지붕 경사도도 */}
<div className="data-input-form-tit">屋根の斜面</div>
<div className="data-input flex">
<input type="text" className="input-frame" defaultValue={'4'} readOnly={mode === 'READ'} />
<input type="text" className="input-frame" value={roofInfo?.ROOF_SLOPE ?? ''} 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>
<RadioSelected column="HOUSE_STRUCTURE" detailInfoData={roofInfo as SurveyDetailInfo} />
</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>
<RadioSelected column="RAFTER_MATERIAL" detailInfoData={roofInfo as SurveyDetailInfo} />
</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 />
<SelectedBox column="RAFTER_SIZE" detailInfoData={roofInfo as SurveyDetailInfo} />
</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 />
<SelectedBox column="RAFTER_PITCH" detailInfoData={roofInfo as SurveyDetailInfo} />
</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>
<RadioSelected column="RAFTER_DIRECTION" detailInfoData={roofInfo as SurveyDetailInfo} />
</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 />
<SelectedBox column="OPEN_FIELD_PLATE_KIND" detailInfoData={roofInfo as SurveyDetailInfo} />
</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'} />
<input type="text" className="input-frame" value={roofInfo?.OPEN_FIELD_PLATE_THICKNESS ?? ''} readOnly={mode === 'READ'} />
<span>mm</span>
</div>
</div>
<div className="data-input-form-bx">
{/* 서까래 방향 */}
<div className="data-input-form-tit ">垂木の方向</div>
{/* 누수 흔적 */}
<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>
<RadioSelected column="LEAK_TRACE" detailInfoData={roofInfo as SurveyDetailInfo} />
</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 className="data-input-form-tit red-f">防水材の種類</div>
<RadioSelected column="WATERPROOF_MATERIAL" detailInfoData={roofInfo as SurveyDetailInfo} />
</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>
<RadioSelected column="INSULATION_PRESENCE" detailInfoData={roofInfo as SurveyDetailInfo} />
</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 className="data-input-form-tit red-f">屋根構造の順序</div>
<SelectedBox column="STRUCTURE_ORDER" detailInfoData={roofInfo as SurveyDetailInfo} />
</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>
<SelectedBox column="INSTALLATION_AVAILABILITY" detailInfoData={roofInfo as SurveyDetailInfo} />
</div>
<div className="data-input-form-bx">
{/* 메모 */}
@ -382,8 +265,8 @@ export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>;
className="textarea-form"
name=""
id=""
defaultValue={'漏れの兆候があるため、正確な点検が必要です.'}
placeholder="TextArea Filed"
value={roofInfo?.MEMO ?? ''}
readOnly={mode === 'READ'}
></textarea>
</div>
@ -394,3 +277,56 @@ export default function RoofForm(props: { surveyInfo: Partial<SurveyBasicInfo>;
</div>
)
}
const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo }) => {
const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
const etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
return (
<>
<select className="select-form mb10" name={column} id={column} disabled value={selectedId ? 'selected' : etcValue ? 'etc' : ''}>
<option value="">-</option>
<option value="etc">その他 (直接入力)</option>
<option value="selected">{selectBoxOptions[column as keyof typeof selectBoxOptions][Number(selectedId)]?.name}</option>
</select>
{etcValue && <input type="text" className="input-frame" readOnly value={etcValue.toString()} />}
</>
)
}
const RadioSelected = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
let selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
if (column === 'LEAK_TRACE') {
selectedId = Number(selectedId)
if (!selectedId) selectedId = 2
}
let etcValue = null
if (column !== 'RAFTER_DIRECTION') {
etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
}
const etcChecked = etcValue !== null && etcValue !== undefined && etcValue !== ''
console.log('column: selectedId', column, selectedId)
return (
<>
{radioEtcData[column as keyof typeof radioEtcData].map((item) => (
<div className="radio-form-box mb10" key={item.id}>
<input type="radio" name={column} id={`${item.id}`} disabled checked={Number(selectedId) === item.id} />
<label htmlFor={`${item.id}`}>{item.label}</label>
</div>
))}
{column !== 'RAFTER_DIRECTION' && column !== 'LEAK_TRACE' && column !== 'INSULATION_PRESENCE' && (
<div className="radio-form-box mb10">
<input type="radio" name={column} id={`${column}_ETC`} value="etc" disabled checked={etcChecked} />
<label htmlFor={`${column}_ETC`}>その他 (直接入力)</label>
</div>
)}
{etcChecked && (
<div className="data-input">
<input type="text" className="input-frame" placeholder="-" readOnly value={etcValue?.toString() ?? ''} />
</div>
)}
</>
)
}

0
src/components/survey-sale/detail/form/BasicForm.tsx → src/components/survey-sale/detail/my/basicForm.tsx
View File

0
src/components/survey-sale/detail/DetailButton.tsx → src/components/survey-sale/detail/my/detailButton.tsx
View File

13
src/components/survey-sale/detail/RoofDetailForm.tsx → src/components/survey-sale/detail/my/roofDetailForm.tsx
View File

@ -1,8 +1,8 @@
import { SurveyBasicInfo, SurveyDetailInfo } from '@/types/Survey'
import DetailButton from './DetailButton'
import { roof_material, supplementary_facilities } from './form/etcProcess/MultiCheckEtc'
import { selectBoxOptions } from './form/etcProcess/SelectBoxEtc'
import { radioEtcData } from './form/etcProcess/RadioEtc'
import DetailButton from './detailButton'
import { roof_material, supplementary_facilities } from '../form/etcProcess/MultiCheckEtc'
import { selectBoxOptions } from '../form/etcProcess/SelectBoxEtc'
import { radioEtcData } from '../form/etcProcess/RadioEtc'
export default function RoofDetailForm({
surveyDetail,
@ -196,10 +196,7 @@ export default function RoofDetailForm({
</div>
</div>
</div>
<DetailButton
isTemporary={false}
surveyDetail={surveyDetail}
/>
<DetailButton surveyDetail={surveyDetail} />
</div>
</>
)

6
src/components/survey-sale/detail/form/RoofInfoForm.tsx → src/components/survey-sale/detail/my/roofInfoForm.tsx
View File

@ -6,9 +6,9 @@ import { useServey } from '@/hooks/useSurvey'
import { SurveyDetailRequest } from '@/types/Survey'
import { useRouter, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react'
import MultiCheckEtc from './etcProcess/MultiCheckEtc'
import SelectBoxEtc from './etcProcess/SelectBoxEtc'
import RadioEtc from './etcProcess/RadioEtc'
import MultiCheckEtc from '../form/etcProcess/MultiCheckEtc'
import SelectBoxEtc from '../form/etcProcess/SelectBoxEtc'
import RadioEtc from '../form/etcProcess/RadioEtc'
const defaultDetailInfoForm: SurveyDetailRequest = {
CONTRACT_CAPACITY: null,