diff --git a/src/app/survey-sale/[id]/page.tsx b/src/app/survey-sale/[id]/page.tsx
index bc48257..482dab4 100644
--- a/src/app/survey-sale/[id]/page.tsx
+++ b/src/app/survey-sale/[id]/page.tsx
@@ -23,7 +23,7 @@ export default function page() {
   return (
     <>
       <DataTable />
-      <DetailForm surveyInfo={surveyInfo} mode="READ" />
+      {/* <DetailForm surveyInfo={surveyInfo} mode="READ" /> */}
     </>
   )
 }
diff --git a/src/app/survey-sale/basic-info/page.tsx b/src/app/survey-sale/basic-info/page.tsx
index 2c75137..7359926 100644
--- a/src/app/survey-sale/basic-info/page.tsx
+++ b/src/app/survey-sale/basic-info/page.tsx
@@ -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 (
diff --git a/src/app/survey-sale/regist/page.tsx b/src/app/survey-sale/regist/page.tsx
index 5090aaa..cf18ff2 100644
--- a/src/app/survey-sale/regist/page.tsx
+++ b/src/app/survey-sale/regist/page.tsx
@@ -1,9 +1,10 @@
-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 (
     <>
-      <RegistForm />
+      <RegistForm/>
     </>
   )
 }
diff --git a/src/app/survey-sale/roof-info/page.tsx b/src/app/survey-sale/roof-info/page.tsx
index 1c5358b..51797e6 100644
--- a/src/app/survey-sale/roof-info/page.tsx
+++ b/src/app/survey-sale/roof-info/page.tsx
@@ -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 (
diff --git a/src/components/survey-sale/RegistForm.tsx b/src/components/survey-sale/RegistForm.tsx
new file mode 100644
index 0000000..b1cc240
--- /dev/null
+++ b/src/components/survey-sale/RegistForm.tsx
@@ -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} />
+    </>
+  )
+}
diff --git a/src/components/survey-sale/detail/BasicForm.tsx b/src/components/survey-sale/detail/BasicForm.tsx
index 5b7fb31..bee4623 100644
--- a/src/components/survey-sale/detail/BasicForm.tsx
+++ b/src/components/survey-sale/detail/BasicForm.tsx
@@ -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>
diff --git a/src/components/survey-sale/detail/ButtonForm.tsx b/src/components/survey-sale/detail/ButtonForm.tsx
index 84b4b4c..4b2b9fa 100644
--- a/src/components/survey-sale/detail/ButtonForm.tsx
+++ b/src/components/survey-sale/detail/ButtonForm.tsx
@@ -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 (
     <>
diff --git a/src/components/survey-sale/detail/DataTable.tsx b/src/components/survey-sale/detail/DataTable.tsx
index d049c33..be8da34 100644
--- a/src/components/survey-sale/detail/DataTable.tsx
+++ b/src/components/survey-sale/detail/DataTable.tsx
@@ -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" />
     </>
   )
 }
diff --git a/src/components/survey-sale/detail/DetailForm.tsx b/src/components/survey-sale/detail/DetailForm.tsx
index 6e5fc24..92dbce4 100644
--- a/src/components/survey-sale/detail/DetailForm.tsx
+++ b/src/components/survey-sale/detail/DetailForm.tsx
@@ -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>
     </>
diff --git a/src/components/survey-sale/detail/RoofForm.tsx b/src/components/survey-sale/detail/RoofForm.tsx
index 878fbf2..1e92ae9 100644
--- a/src/components/survey-sale/detail/RoofForm.tsx
+++ b/src/components/survey-sale/detail/RoofForm.tsx
@@ -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>
+                </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">
+                {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="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>
+                  <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>
+      )}
+    </>
+  )
+}
diff --git a/src/components/survey-sale/detail/form/BasicForm.tsx b/src/components/survey-sale/detail/my/basicForm.tsx
similarity index 100%
rename from src/components/survey-sale/detail/form/BasicForm.tsx
rename to src/components/survey-sale/detail/my/basicForm.tsx
diff --git a/src/components/survey-sale/detail/DetailButton.tsx b/src/components/survey-sale/detail/my/detailButton.tsx
similarity index 100%
rename from src/components/survey-sale/detail/DetailButton.tsx
rename to src/components/survey-sale/detail/my/detailButton.tsx
diff --git a/src/components/survey-sale/detail/RoofDetailForm.tsx b/src/components/survey-sale/detail/my/roofDetailForm.tsx
similarity index 96%
rename from src/components/survey-sale/detail/RoofDetailForm.tsx
rename to src/components/survey-sale/detail/my/roofDetailForm.tsx
index a9a4031..6b8bbb5 100644
--- a/src/components/survey-sale/detail/RoofDetailForm.tsx
+++ b/src/components/survey-sale/detail/my/roofDetailForm.tsx
@@ -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>
     </>
   )
diff --git a/src/components/survey-sale/detail/form/RoofInfoForm.tsx b/src/components/survey-sale/detail/my/roofInfoForm.tsx
similarity index 98%
rename from src/components/survey-sale/detail/form/RoofInfoForm.tsx
rename to src/components/survey-sale/detail/my/roofInfoForm.tsx
index 2a465d4..bd0a1f7 100644
--- a/src/components/survey-sale/detail/form/RoofInfoForm.tsx
+++ b/src/components/survey-sale/detail/my/roofInfoForm.tsx
@@ -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,