-
-
-
-
-
-
建物名
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/survey-sale/detail/ButtonForm.tsx b/src/components/survey-sale/detail/ButtonForm.tsx
new file mode 100644
index 0000000..84b4b4c
--- /dev/null
+++ b/src/components/survey-sale/detail/ButtonForm.tsx
@@ -0,0 +1,81 @@
+import { Mode } from '@/types/Survey'
+
+export default function ButtonForm(props: { mode: Mode; setMode: (mode: Mode) => void }) {
+ const { mode, setMode } = props
+ return (
+ <>
+ {mode === 'CREATE' && (
+
+
+
+ {/* 임시저장 */}
+
+
+
+ {/* 저장 */}
+
+
+
+ {/* 목록 */}
+
+
+
+
+ )}
+ {mode === 'TEMP' && (
+
+
+
+ {/* 수정 */}
+
+
+
+ {/* 삭제 */}
+
+
+
+
+ )}
+ {mode === 'EDIT' && (
+
+
+
+ {/* 목록 */}
+
+
+
+ {/* 제출 */}
+
+
+
+ {/* 수정 */}
+
+
+
+ {/* 삭제 */}
+
+
+
+
+ )}
+
+ )
+}
diff --git a/src/components/survey-sale/detail/DataTable.tsx b/src/components/survey-sale/detail/DataTable.tsx
index 414164c..b47c092 100644
--- a/src/components/survey-sale/detail/DataTable.tsx
+++ b/src/components/survey-sale/detail/DataTable.tsx
@@ -3,7 +3,7 @@
export default function DataTable() {
return (
<>
-
+
diff --git a/src/components/survey-sale/detail/DetailForm.tsx b/src/components/survey-sale/detail/DetailForm.tsx
index 9462e95..6e5fc24 100644
--- a/src/components/survey-sale/detail/DetailForm.tsx
+++ b/src/components/survey-sale/detail/DetailForm.tsx
@@ -1,62 +1,53 @@
'use client'
-export default function DetailForm() {
+import { Mode, SurveyBasicInfo } from '@/types/Survey'
+import { useEffect, useState } from 'react'
+import ButtonForm from './ButtonForm'
+import BasicForm from './BasicForm'
+import RoofForm from './RoofForm'
+
+export default function DetailForm(props: { surveyInfo?: SurveyBasicInfo; mode?: Mode }) {
+ const [surveyInfo, setSurveyInfo] = useState>(
+ 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(false)
+ const [mode, setMode] = useState(props.mode ?? 'CREATE')
+ const basicInfoProps = { surveyInfo, setSurveyInfo, mode }
+ const roofInfoProps = { surveyInfo, mode }
+ const buttonFormProps = { mode, setMode }
+
+ useEffect(() => {
+ // setMode(props.surveyInfo ? 'EDIT' : 'CREATE')
+ }, [props.surveyInfo])
+
+ useEffect(() => {
+ console.log(surveyInfo)
+ }, [surveyInfo])
+
return (
<>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {mode}
+ {/* 기본정보 */}
+
+ {/* 전기/지붕정보 */}
+
+
)
diff --git a/src/components/survey-sale/detail/RoofForm.tsx b/src/components/survey-sale/detail/RoofForm.tsx
new file mode 100644
index 0000000..878fbf2
--- /dev/null
+++ b/src/components/survey-sale/detail/RoofForm.tsx
@@ -0,0 +1,396 @@
+import { useState } from 'react'
+import { Mode, SurveyBasicInfo } from '@/types/Survey'
+
+export default function RoofForm(props: { surveyInfo: Partial
; mode: Mode }) {
+ const { surveyInfo, mode } = props
+ const [isFlip, setIsFlip] = useState(true)
+ return (
+
+
setIsFlip(!isFlip)}>
+
電気 / 屋根情報
+
+
+
+
+
+
+ {/* 전기 관계 */}
+
電気関係
+
+
+ {/* 전기 계약 용량 */}
+
電気契約容量
+
+
+
+ {mode === 'READ' &&
}
+ {mode !== 'READ' && (
+
+
+
+ )}
+
+
+ {/* 전기 소매 회사사 */}
+
電気小売会社
+
+
+
+ {/* 전기 부대 설비 */}
+
+ 電気袋設備※複数選択可能
+
+
+
+
+
+
+
+ {/* 설치 희망 시스템 */}
+
設置希望システム
+ {mode === 'READ' && (
+
+
+
+ )}
+ {mode !== 'READ' && (
+
+
+
+ )}
+
+
+
+
+ {/* 지붕 관계 */}
+
屋根関係
+
+
+ {/* 건축 연수 */}
+
建築研修
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+ 年
+
+
+
+ {/* 지붕재 */}
+
+ 屋根材※最大2個まで選択可能
+
+
+
+
+
+
+
+ {/* 지붕 모양 */}
+
建築研修
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+ {/* 지붕 경사도도 */}
+
屋根の斜面
+
+
+ 寸
+
+
+
+ {/* 주택구조조 */}
+
住宅構造
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 서까래 재질 */}
+
垂木材質
+
+
+
+
+
+
+ {/* 서까래 크기 */}
+
垂木サイズ
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+ {/* 서까래 피치 */}
+
垂木サイズ
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+ {/* 서까래 방향 */}
+
垂木の方向
+
+
+
+ {/* 노지판 종류류 */}
+
路地板の種類
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+
+ 路地板厚※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載
+
+
+
+ mm
+
+
+
+ {/* 서까래 방향 */}
+
垂木の方向
+
+
+
+ {/* 주택 구조 */}
+
住宅構造
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 단열재 유무 */}
+
断熱材の有無
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 지붕 구조의 순서 */}
+
路地板の種類
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+ {/* 지붕 제품명 설치 가능 여부 확인 */}
+
屋根製品名 設置可否確認
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+ {/* 메모 */}
+
メモ
+
+
+
+
+
+
+
+