diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 4993d5b..5c4c1d8 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -214,6 +214,6 @@ model MS_USR_TRK {
   OWNER  String   @db.VarChar(100)
   TYPE   String   @db.VarChar(50)
   URL    String?  @db.VarChar(200)
-  DATA   String?  @db.VarChar(200)
   REG_DT DateTime @default(now())
+  DATA   String?  @db.VarChar(200)
 }
diff --git a/src/app/api/survey-sales/route.ts b/src/app/api/survey-sales/route.ts
index 23f3d18..a2df29d 100644
--- a/src/app/api/survey-sales/route.ts
+++ b/src/app/api/survey-sales/route.ts
@@ -173,23 +173,18 @@ export async function GET(request: Request) {
       where.AND.push(roleCondition)
     }
 
-    // 데이터 조회 또는 카운트
-    if (params.offset) {
-      // 페이지네이션 데이터 조회
-      //@ts-ignore
-      const surveys = await prisma.SD_SURVEY_SALES_BASIC_INFO.findMany({
-        where,
-        orderBy: params.sort === 'created' ? { REG_DT: 'desc' } : { UPT_DT: 'desc' },
-        skip: Number(params.offset),
-        take: ITEMS_PER_PAGE,
-      })
-      return NextResponse.json(surveys)
-    } else {
-      // 전체 개수만 조회
-      //@ts-ignore
-      const count = await prisma.SD_SURVEY_SALES_BASIC_INFO.count({ where })
-      return NextResponse.json(count)
-    }
+    // 페이지네이션 데이터 조회
+    //@ts-ignore
+    const surveys = await prisma.SD_SURVEY_SALES_BASIC_INFO.findMany({
+      where,
+      orderBy: params.sort === 'created' ? { REG_DT: 'desc' } : { UPT_DT: 'desc' },
+      skip: Number(params.offset),
+      take: ITEMS_PER_PAGE,
+    })
+    // 전체 개수만 조회
+    //@ts-ignore
+    const count = await prisma.SD_SURVEY_SALES_BASIC_INFO.count({ where })
+    return NextResponse.json({ data: { data: surveys, count: count } })
   } catch (error) {
     console.error(error)
     return NextResponse.json({ error: 'Fail Read Survey' }, { status: 500 })
diff --git a/src/app/survey-sale/[id]/page.tsx b/src/app/survey-sale/[id]/page.tsx
index 482dab4..ac22151 100644
--- a/src/app/survey-sale/[id]/page.tsx
+++ b/src/app/survey-sale/[id]/page.tsx
@@ -1,25 +1,6 @@
 import DataTable from '@/components/survey-sale/detail/DataTable'
-import DetailForm from '@/components/survey-sale/detail/DetailForm'
-import { SurveyBasicInfo } from '@/types/Survey'
 
 export default function page() {
-  const surveyInfo: SurveyBasicInfo = {
-    ID: 1,
-    REPRESENTATIVE: 'HG',
-    STORE: 'HWJ(T01)',
-    CONSTRUCTION_POINT: '施工点名表示',
-    INVESTIGATION_DATE: '2021-01-01',
-    BUILDING_NAME: 'ビル名表示',
-    CUSTOMER_NAME: '顧客名表示',
-    POST_CODE: '1234567890',
-    ADDRESS: '東京都千代田区永田町1-7-1',
-    ADDRESS_DETAIL: '永田町ビル101号室',
-    SUBMISSION_STATUS: true,
-    SUBMISSION_DATE: '2021-01-01',
-    DETAIL_INFO: null,
-    REG_DT: new Date(),
-    UPT_DT: new Date(),
-  }
   return (
     <>
       <DataTable />
diff --git a/src/app/survey-sale/basic-info/page.tsx b/src/app/survey-sale/basic-info/page.tsx
deleted file mode 100644
index 7359926..0000000
--- a/src/app/survey-sale/basic-info/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import BasicForm from '@/components/survey-sale/detail/my/basicForm'
-
-export default function page() {
-  return (
-    <>
-      <BasicForm />
-    </>
-  )
-}
diff --git a/src/app/survey-sale/regist/page.tsx b/src/app/survey-sale/regist/page.tsx
index cf18ff2..0dec827 100644
--- a/src/app/survey-sale/regist/page.tsx
+++ b/src/app/survey-sale/regist/page.tsx
@@ -1,5 +1,4 @@
-// import RegistForm from '@/components/survey-sale/temp/registForm'
-import RegistForm from '@/components/survey-sale/RegistForm'
+import RegistForm from '@/components/survey-sale/detail/RegistForm'
 
 export default function RegistPage() {
   return (
diff --git a/src/app/survey-sale/roof-info/page.tsx b/src/app/survey-sale/roof-info/page.tsx
deleted file mode 100644
index 51797e6..0000000
--- a/src/app/survey-sale/roof-info/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import RoofInfoForm from '@/components/survey-sale/detail/my/roofInfoForm'
-
-export default function page() {
-  return (
-    <>
-      <RoofInfoForm />
-    </>
-  )
-}
\ No newline at end of file
diff --git a/src/components/survey-sale/detail/BasicForm.tsx b/src/components/survey-sale/detail/BasicForm.tsx
index bee4623..716930e 100644
--- a/src/components/survey-sale/detail/BasicForm.tsx
+++ b/src/components/survey-sale/detail/BasicForm.tsx
@@ -32,8 +32,8 @@ export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBas
                   type="text"
                   className="input-frame"
                   readOnly={mode === 'READ'}
-                  value={basicInfo?.REPRESENTATIVE ?? ''}
-                  onChange={(e) => setBasicInfo({ ...basicInfo, REPRESENTATIVE: e.target.value })}
+                  value={basicInfo?.representative ?? ''}
+                  onChange={(e) => setBasicInfo({ ...basicInfo, representative: e.target.value })}
                 />
               </div>
               <div className="data-input-form-bx">
@@ -42,8 +42,8 @@ export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBas
                   type="text"
                   className="input-frame"
                   readOnly={mode === 'READ'}
-                  value={basicInfo?.STORE ?? ''}
-                  onChange={(e) => setBasicInfo({ ...basicInfo, STORE: e.target.value })}
+                  value={basicInfo?.store ?? ''}
+                  onChange={(e) => setBasicInfo({ ...basicInfo, store: e.target.value })}
                 />
               </div>
               <div className="data-input-form-bx">
@@ -52,8 +52,8 @@ export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBas
                   type="text"
                   className="input-frame"
                   readOnly={mode === 'READ'}
-                  value={basicInfo?.CONSTRUCTION_POINT ?? ''}
-                  onChange={(e) => setBasicInfo({ ...basicInfo, CONSTRUCTION_POINT: e.target.value })}
+                  value={basicInfo?.constructionPoint ?? ''}
+                  onChange={(e) => setBasicInfo({ ...basicInfo, constructionPoint: e.target.value })}
                 />
               </div>
             </div>
@@ -67,32 +67,32 @@ export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBas
                     <button className="date-btn">
                       <i className="date-icon"></i>
                     </button>
-                    <input type="date" className="date-frame" readOnly defaultValue={basicInfo?.INVESTIGATION_DATE?.toString()} />
+                    <input type="date" className="date-frame" readOnly defaultValue={basicInfo?.investigationDate?.toString()} />
                   </div>
                 ) : (
-                  <input type="date" className="input-frame" disabled defaultValue={basicInfo?.INVESTIGATION_DATE?.toString()} />
+                  <input type="date" className="input-frame" disabled defaultValue={basicInfo?.investigationDate?.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={basicInfo?.BUILDING_NAME ?? ''} />
+                <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.buildingName ?? ''} />
               </div>
               <div className="data-input-form-bx">
                 {/* 고객명 */}
                 <div className="data-input-form-tit">建物名</div>
-                <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.CUSTOMER_NAME ?? ''} />
+                <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.customerName ?? ''} />
               </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={basicInfo?.POST_CODE ?? ''} disabled />
+                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.postCode ?? ''} disabled />
                   </div>
                   {/* 도도부현 */}
                   <div className="form-bx">
-                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.ADDRESS ?? ''} disabled />
+                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.address ?? ''} disabled />
                   </div>
                 </div>
                 {/* 주소 */}
diff --git a/src/components/survey-sale/detail/DataTable.tsx b/src/components/survey-sale/detail/DataTable.tsx
index be8da34..1d06e2e 100644
--- a/src/components/survey-sale/detail/DataTable.tsx
+++ b/src/components/survey-sale/detail/DataTable.tsx
@@ -11,7 +11,6 @@ export default function DataTable() {
   const id = params.id
 
   const searchParams = useSearchParams()
-  const tab = searchParams.get('tab')
   const isTemp = searchParams.get('isTemporary')
 
   const { surveyDetail, isLoadingSurveyDetail } = useServey(Number(id))
@@ -20,8 +19,8 @@ export default function DataTable() {
   const { validateSurveyDetail } = useServey(Number(id))
 
   useEffect(() => {
-    if (surveyDetail?.DETAIL_INFO) {
-      const validate = validateSurveyDetail(surveyDetail.DETAIL_INFO)
+    if (surveyDetail?.detailInfo) {
+      const validate = validateSurveyDetail(surveyDetail.detailInfo)
       if (validate.trim() !== '') {
         setIsTemporary(false)
       }
@@ -48,25 +47,25 @@ export default function DataTable() {
                   <span className="text-red-500">仮保存</span>
                 </td>
               ) : (
-                <td>{surveyDetail?.ID}</td>
+                <td>{surveyDetail?.id}</td>
               )}
             </tr>
             <tr>
               <th>登録日</th>
-              <td>{surveyDetail?.REG_DT ? new Date(surveyDetail?.REG_DT).toLocaleString() : ''}</td>
+              <td>{surveyDetail?.regDt ? new Date(surveyDetail.regDt).toLocaleString() : ''}</td>
             </tr>
             <tr>
               <th>更新日時</th>
-              <td>{surveyDetail?.UPT_DT ? new Date(surveyDetail?.UPT_DT).toLocaleString() : ''}</td>
+              <td>{surveyDetail?.uptDt ? new Date(surveyDetail.uptDt).toLocaleString() : ''}</td>
             </tr>
             <tr>
               <th>提出可否</th>
               <td>
-                {surveyDetail?.SUBMISSION_STATUS && surveyDetail?.SUBMISSION_DATE ? (
+                {surveyDetail?.submissionStatus && surveyDetail?.submissionDate ? (
                   <>
                     {/* TODO: 제출한 판매점 ID 추가 필요 */}
-                    <div>{new Date(surveyDetail.SUBMISSION_DATE).toLocaleString()}</div>
-                    <div>{surveyDetail.STORE}</div>
+                    <div>{new Date(surveyDetail.submissionDate).toLocaleString()}</div>
+                    <div>{surveyDetail.store}</div>
                   </>
                 ) : (
                   '-'
diff --git a/src/components/survey-sale/detail/DetailForm.tsx b/src/components/survey-sale/detail/DetailForm.tsx
index 92dbce4..387bb4f 100644
--- a/src/components/survey-sale/detail/DetailForm.tsx
+++ b/src/components/survey-sale/detail/DetailForm.tsx
@@ -6,55 +6,55 @@ 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,
+  contractCapacity: null,
+  retailCompany: null,
+  supplementaryFacilities: null,
+  supplementaryFacilitiesEtc: null,
+  installationSystem: null,
+  installationSystemEtc: null,
+  constructionYear: null,
+  constructionYearEtc: null,
+  roofMaterial: null,
+  roofMaterialEtc: null,
+  roofShape: null,
+  roofShapeEtc: null,
+  roofSlope: null,
+  houseStructure: '1',
+  houseStructureEtc: null,
+  rafterMaterial: '1',
+  rafterMaterialEtc: null,
+  rafterSize: null,
+  rafterSizeEtc: null,
+  rafterPitch: null,
+  rafterPitchEtc: null,
+  rafterDirection: '1',
+  openFieldPlateKind: null,
+  openFieldPlateKindEtc: null,
+  openFieldPlateThickness: null,
+  leakTrace: false,
+  waterproofMaterial: null,
+  waterproofMaterialEtc: null,
+  insulationPresence: '1',
+  insulationPresenceEtc: null,
+  structureOrder: null,
+  structureOrderEtc: null,
+  installationAvailability: null,
+  installationAvailabilityEtc: 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,
+  representative: '',
+  store: null,
+  constructionPoint: null,
+  investigationDate: new Date().toLocaleDateString('en-CA'),
+  buildingName: null,
+  customerName: null,
+  postCode: null,
+  address: null,
+  addressDetail: null,
+  submissionStatus: false,
+  submissionDate: null,
 }
 
 export default function DetailForm(props: { surveyInfo?: SurveyBasicInfo; mode?: Mode }) {
@@ -62,20 +62,12 @@ export default function DetailForm(props: { surveyInfo?: SurveyBasicInfo; mode?:
   const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(basicInfoForm)
   const [roofInfoData, setRoofInfoData] = useState<SurveyDetailRequest>(roofInfoForm)
 
-  // useEffect(() => {
-  //   // setMode(props.surveyInfo ? 'EDIT' : 'CREATE')
-  // }, [props.surveyInfo])
-
   useEffect(() => {
-    console.log(props.surveyInfo)
-  }, [props.surveyInfo])
-
-  useEffect(() => {
-    if (props.surveyInfo && mode === 'EDIT') {
-      const { ID, UPT_DT, REG_DT, DETAIL_INFO, ...rest } = props.surveyInfo
+    if (props.surveyInfo && (mode === 'EDIT' || mode === 'READ')) {
+      const { id, uptDt, regDt, detailInfo, ...rest } = props.surveyInfo
       setBasicInfoData(rest)
-      if (DETAIL_INFO) {
-        const { ID, UPT_DT, REG_DT, BASIC_INFO_ID, ...rest } = DETAIL_INFO
+      if (detailInfo) {
+        const { id, uptDt, regDt, basicInfoId, ...rest } = detailInfo
         setRoofInfoData(rest)
       }
     }
@@ -91,7 +83,6 @@ export default function DetailForm(props: { surveyInfo?: SurveyBasicInfo; mode?:
   return (
     <>
       <div className="sale-detail-toggle-wrap">
-        {/* {mode} */}
         {/* 기본정보 */}
         <BasicForm basicInfo={basicInfoData} setBasicInfo={setBasicInfoData} mode={mode} />
         {/* 전기/지붕정보 */}
diff --git a/src/components/survey-sale/RegistForm.tsx b/src/components/survey-sale/detail/RegistForm.tsx
similarity index 94%
rename from src/components/survey-sale/RegistForm.tsx
rename to src/components/survey-sale/detail/RegistForm.tsx
index b1cc240..4377713 100644
--- a/src/components/survey-sale/RegistForm.tsx
+++ b/src/components/survey-sale/detail/RegistForm.tsx
@@ -1,6 +1,6 @@
 import { Mode } from '@/types/Survey'
 import { useSearchParams } from 'next/navigation'
-import DetailForm from './detail/DetailForm'
+import DetailForm from './DetailForm'
 import { useServey } from '@/hooks/useSurvey'
 import { useEffect, useState } from 'react'
 import { SurveyBasicInfo } from '@/types/Survey'
diff --git a/src/components/survey-sale/detail/RoofForm.tsx b/src/components/survey-sale/detail/RoofForm.tsx
index 1e92ae9..794bf21 100644
--- a/src/components/survey-sale/detail/RoofForm.tsx
+++ b/src/components/survey-sale/detail/RoofForm.tsx
@@ -1,8 +1,204 @@
 import { useState } from 'react'
-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'
+import { Mode, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'
+
+type RadioEtcKeys = 'houseStructure' | 'rafterMaterial' | 'waterproofMaterial' | 'insulationPresence' | 'rafterDirection' | 'leakTrace'
+type SelectBoxKeys =
+  | 'installationSystem'
+  | 'constructionYear'
+  | 'roofShape'
+  | 'rafterPitch'
+  | 'rafterSize'
+  | 'openFieldPlateKind'
+  | 'structureOrder'
+  | 'installationAvailability'
+
+export const supplementary_facilities = [
+  { id: 1, name: 'エコキュート' }, //에코큐트
+  { id: 2, name: 'エネパーム' }, //에네팜
+  { id: 3, name: '蓄電池システム' }, //축전지시스템
+  { id: 4, name: '太陽光発電' }, //태양광발전
+]
+
+export const roof_material = [
+  { id: 1, name: 'スレート' }, //슬레이트
+  { id: 2, name: 'アスファルトシングル' }, //아스팔트 싱글
+  { id: 3, name: '瓦' }, //기와
+  { id: 4, name: '金属屋根' }, //금속지붕
+]
+
+export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string }[]> = {
+  installationSystem: [
+    {
+      id: 1,
+      name: '太陽光発電', //태양광발전
+    },
+    {
+      id: 2,
+      name: 'ハイブリッド蓄電システム', //하이브리드축전지시스템
+    },
+    {
+      id: 3,
+      name: '蓄電池システム', //축전지시스템
+    },
+  ],
+  constructionYear: [
+    {
+      id: 1,
+      name: '新築', //신축
+    },
+    {
+      id: 2,
+      name: '既築', //기존
+    },
+  ],
+  roofShape: [
+    {
+      id: 1,
+      name: '切妻', //박공지붕
+    },
+    {
+      id: 2,
+      name: '寄棟', //기동
+    },
+    {
+      id: 3,
+      name: '片流れ', //한쪽흐름
+    },
+  ],
+  rafterSize: [
+    {
+      id: 1,
+      name: '幅35mm以上×高さ48mm以上',
+    },
+    {
+      id: 2,
+      name: '幅36mm以上×高さ46mm以上',
+    },
+    {
+      id: 3,
+      name: '幅37mm以上×高さ43mm以上',
+    },
+    {
+      id: 4,
+      name: '幅38mm以上×高さ40mm以上',
+    },
+  ],
+  rafterPitch: [
+    {
+      id: 1,
+      name: '455mm以下',
+    },
+    {
+      id: 2,
+      name: '500mm以下',
+    },
+    {
+      id: 3,
+      name: '606mm以下',
+    },
+  ],
+  openFieldPlateKind: [
+    {
+      id: 1,
+      name: '構造用合板', //구조용합판
+    },
+    {
+      id: 2,
+      name: 'OSB', //OSB
+    },
+    {
+      id: 3,
+      name: 'パーティクルボード', //파티클보드
+    },
+    {
+      id: 4,
+      name: '小幅板', //소판
+    },
+  ],
+  structureOrder: [
+    {
+      id: 1,
+      name: '屋根材', //지붕재
+    },
+    {
+      id: 2,
+      name: '防水材', //방수재
+    },
+    {
+      id: 3,
+      name: '屋根の基礎', //지붕의기초
+    },
+    {
+      id: 4,
+      name: '垂木', //서까래
+    },
+  ],
+  installationAvailability: [
+    {
+      id: 1,
+      name: '確認済み', //확인완료
+    },
+    {
+      id: 2,
+      name: '未確認', //미확인
+    },
+  ],
+}
+
+export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
+  houseStructure: [
+    {
+      id: 1,
+      label: '木製',
+    },
+  ],
+  rafterMaterial: [
+    {
+      id: 1,
+      label: '木製',
+    },
+    {
+      id: 2,
+      label: '強制',
+    },
+  ],
+  waterproofMaterial: [
+    {
+      id: 1,
+      label: 'アスファルト屋根940（22kg以上）',
+    },
+  ],
+  insulationPresence: [
+    {
+      id: 1,
+      label: 'なし',
+    },
+    {
+      id: 2,
+      label: 'あり',
+    },
+  ],
+  rafterDirection: [
+    {
+      id: 1,
+      label: '垂直垂木',
+    },
+    {
+      id: 2,
+      label: '水平垂木',
+    },
+  ],
+  leakTrace: [
+    {
+      id: 1,
+      label: 'あり',
+    },
+    {
+      id: 2,
+      label: 'なし',
+    },
+  ],
+}
 
 export default function RoofForm(props: {
   roofInfo: SurveyDetailRequest | SurveyDetailInfo
@@ -34,7 +230,7 @@ export default function RoofForm(props: {
               {/* 전기 계약 용량 */}
               <div className="data-input-form-tit">電気契約容量</div>
               <div className="data-input mb5">
-                <input type="text" className="input-frame" value={roofInfo?.CONTRACT_CAPACITY ?? ''} readOnly={mode === 'READ'} />
+                <input type="text" className="input-frame" value={roofInfo?.contractCapacity ?? ''} readOnly={mode === 'READ'} />
               </div>
               {mode === 'READ' && <input type="text" className="input-frame" defaultValue={'10'} readOnly={mode === 'READ'} />}
               {mode !== 'READ' && (
@@ -52,7 +248,7 @@ export default function RoofForm(props: {
             <div className="data-input-form-bx">
               {/* 전기 소매 회사사 */}
               <div className="data-input-form-tit">電気小売会社</div>
-              <input type="text" className="input-frame" value={roofInfo?.RETAIL_COMPANY ?? ''} readOnly={mode === 'READ'} />
+              <input type="text" className="input-frame" value={roofInfo?.retailCompany ?? ''} readOnly={mode === 'READ'} />
             </div>
             <div className="data-input-form-bx">
               {/* 전기 부대 설비 */}
@@ -69,19 +265,19 @@ export default function RoofForm(props: {
                     <input
                       type="checkbox"
                       id={`${item.id}`}
-                      checked={makeNumArr(roofInfo?.SUPPLEMENTARY_FACILITIES ?? '').includes(String(item.id))}
+                      checked={makeNumArr(roofInfo?.supplementaryFacilities ?? '').includes(String(item.id))}
                       readOnly={mode === 'READ'}
                     />
                     <label htmlFor={`${item.id}`}>{item.name}</label>
                   </div>
                 ))}
                 <div className="check-form-box">
-                  <input type="checkbox" id={`supplementary_facilities_etc`} checked={roofInfo?.SUPPLEMENTARY_FACILITIES_ETC !== null} readOnly />
-                  <label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label>
+                  <input type="checkbox" id={`supplementaryFacilitiesEtc`} checked={roofInfo?.supplementaryFacilitiesEtc !== null} readOnly />
+                  <label htmlFor={`supplementaryFacilitiesEtc`}>その他 (直接入力)</label>
                 </div>
               </div>
               <div className="data-input">
-                <input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.SUPPLEMENTARY_FACILITIES_ETC ?? ''} />
+                <input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.supplementaryFacilitiesEtc ?? ''} />
               </div>
             </div>
             <div className="data-input-form-bx">
@@ -104,7 +300,7 @@ export default function RoofForm(props: {
                 </div>
               )} */}
               <div className="data-input-form-tit">設置希望システム</div>
-              <SelectedBox column="INSTALLATION_SYSTEM" detailInfoData={roofInfo as SurveyDetailInfo} />
+              <SelectedBox column="installationSystem" detailInfoData={roofInfo as SurveyDetailInfo} />
             </div>
           </div>
         </div>
@@ -126,7 +322,7 @@ export default function RoofForm(props: {
                     <option value="">新築</option>
                   </select>
                 )} */}
-                <SelectedBox column="CONSTRUCTION_YEAR" detailInfoData={roofInfo as SurveyDetailInfo} />
+                <SelectedBox column="constructionYear" detailInfoData={roofInfo as SurveyDetailInfo} />
               </div>
               {/* <div className="data-input flex">
                 <input type="text" className="input-frame" defaultValue={''} disabled />
@@ -141,17 +337,17 @@ export default function RoofForm(props: {
               <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 />
+                    <input type="checkbox" id={`${item.id}`} checked={makeNumArr(roofInfo?.roofMaterial ?? '').includes(String(item.id))} readOnly />
                     <label htmlFor={`${item.id}`}>{item.name}</label>
                   </div>
                 ))}
                 <div className="check-form-box">
-                  <input type="checkbox" id={`roof_material_etc`} checked={roofInfo?.ROOF_MATERIAL_ETC !== null} readOnly />
-                  <label htmlFor={`roof_material_etc`}>その他 (直接入力)</label>
+                  <input type="checkbox" id={`roofMaterialEtc`} checked={roofInfo?.roofMaterialEtc !== null} readOnly />
+                  <label htmlFor={`roofMaterialEtc`}>その他 (直接入力)</label>
                 </div>
               </div>
               <div className="data-input">
-                <input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.ROOF_MATERIAL_ETC ?? ''} />
+                <input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.roofMaterialEtc ?? ''} />
               </div>
             </div>
             <div className="data-input-form-bx">
@@ -168,7 +364,7 @@ export default function RoofForm(props: {
                     <option value="">太陽光発電</option>
                   </select>
                 )} */}
-                <SelectedBox column="ROOF_SHAPE" detailInfoData={roofInfo as SurveyDetailInfo} />
+                <SelectedBox column="roofShape" detailInfoData={roofInfo as SurveyDetailInfo} />
               </div>
               <div className="data-input">
                 <input type="text" className="input-frame" defaultValue={''} disabled />
@@ -178,46 +374,46 @@ export default function RoofForm(props: {
               {/* 지붕 경사도도 */}
               <div className="data-input-form-tit">屋根の斜面</div>
               <div className="data-input flex">
-                <input type="text" className="input-frame" value={roofInfo?.ROOF_SLOPE ?? ''} readOnly={mode === 'READ'} />
+                <input type="text" className="input-frame" value={roofInfo?.roofSlope ?? ''} readOnly={mode === 'READ'} />
                 <span>寸</span>
               </div>
             </div>
             <div className="data-input-form-bx">
               {/* 주택구조조 */}
               <div className="data-input-form-tit">住宅構造</div>
-              <RadioSelected column="HOUSE_STRUCTURE" detailInfoData={roofInfo as SurveyDetailInfo} />
+              <RadioSelected column="houseStructure" detailInfoData={roofInfo as SurveyDetailInfo} />
             </div>
             <div className="data-input-form-bx">
               {/* 서까래 재질 */}
               <div className="data-input-form-tit">垂木材質</div>
-              <RadioSelected column="RAFTER_MATERIAL" detailInfoData={roofInfo as SurveyDetailInfo} />
+              <RadioSelected column="rafterMaterial" 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">
-                <SelectedBox column="RAFTER_SIZE" detailInfoData={roofInfo as SurveyDetailInfo} />
+                <SelectedBox column="rafterSize" 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">
-                <SelectedBox column="RAFTER_PITCH" detailInfoData={roofInfo as SurveyDetailInfo} />
+                <SelectedBox column="rafterPitch" 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">
-                <RadioSelected column="RAFTER_DIRECTION" detailInfoData={roofInfo as SurveyDetailInfo} />
+                <RadioSelected column="rafterDirection" detailInfoData={roofInfo as SurveyDetailInfo} />
               </div>
             </div>
             <div className="data-input-form-bx">
               {/* 노지판 종류류 */}
               <div className="data-input-form-tit">路地板の種類</div>
               <div className="data-input mb5">
-                <SelectedBox column="OPEN_FIELD_PLATE_KIND" detailInfoData={roofInfo as SurveyDetailInfo} />
+                <SelectedBox column="openFieldPlateKind" detailInfoData={roofInfo as SurveyDetailInfo} />
               </div>
             </div>
             <div className="data-input-form-bx">
@@ -226,7 +422,7 @@ export default function RoofForm(props: {
                 路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
               </div>
               <div className="data-input flex">
-                <input type="text" className="input-frame" value={roofInfo?.OPEN_FIELD_PLATE_THICKNESS ?? ''} readOnly={mode === 'READ'} />
+                <input type="text" className="input-frame" value={roofInfo?.openFieldPlateThickness ?? ''} readOnly={mode === 'READ'} />
                 <span>mm</span>
               </div>
             </div>
@@ -234,28 +430,28 @@ export default function RoofForm(props: {
               {/* 누수 흔적 */}
               <div className="data-input-form-tit ">水漏れの痕跡</div>
               <div className="data-check-wrap mb0">
-                <RadioSelected column="LEAK_TRACE" detailInfoData={roofInfo as SurveyDetailInfo} />
+                <RadioSelected column="leakTrace" detailInfoData={roofInfo as SurveyDetailInfo} />
               </div>
             </div>
             <div className="data-input-form-bx">
               {/* 방수재 종류 */}
               <div className="data-input-form-tit red-f">防水材の種類</div>
-              <RadioSelected column="WATERPROOF_MATERIAL" detailInfoData={roofInfo as SurveyDetailInfo} />
+              <RadioSelected column="waterproofMaterial" detailInfoData={roofInfo as SurveyDetailInfo} />
             </div>
             <div className="data-input-form-bx">
               {/* 단열재 유무 */}
               <div className="data-input-form-tit red-f">断熱材の有無</div>
-              <RadioSelected column="INSULATION_PRESENCE" detailInfoData={roofInfo as SurveyDetailInfo} />
+              <RadioSelected column="insulationPresence" detailInfoData={roofInfo as SurveyDetailInfo} />
             </div>
             <div className="data-input-form-bx">
               {/* 지붕 구조의 순서 */}
               <div className="data-input-form-tit red-f">屋根構造の順序</div>
-              <SelectedBox column="STRUCTURE_ORDER" detailInfoData={roofInfo as SurveyDetailInfo} />
+              <SelectedBox column="structureOrder" detailInfoData={roofInfo as SurveyDetailInfo} />
             </div>
             <div className="data-input-form-bx">
               {/* 지붕 제품명 설치 가능 여부 확인 */}
               <div className="data-input-form-tit">屋根製品名 設置可否確認</div>
-              <SelectedBox column="INSTALLATION_AVAILABILITY" detailInfoData={roofInfo as SurveyDetailInfo} />
+              <SelectedBox column="installationAvailability" detailInfoData={roofInfo as SurveyDetailInfo} />
             </div>
             <div className="data-input-form-bx">
               {/* 메모 */}
@@ -266,7 +462,7 @@ export default function RoofForm(props: {
                   name=""
                   id=""
                   placeholder="TextArea Filed"
-                  value={roofInfo?.MEMO ?? ''}
+                  value={roofInfo?.memo ?? ''}
                   readOnly={mode === 'READ'}
                 ></textarea>
               </div>
@@ -280,7 +476,7 @@ export default function RoofForm(props: {
 
 const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo }) => {
   const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
-  const etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
+  const etcValue = detailInfoData?.[`${column}Etc` as keyof SurveyDetailInfo]
 
   return (
     <>
@@ -296,18 +492,18 @@ const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoDat
 
 const RadioSelected = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
   let selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
-  if (column === 'LEAK_TRACE') {
+  if (column === 'leakTrace') {
     selectedId = Number(selectedId)
     if (!selectedId) selectedId = 2
   }
 
   let etcValue = null
-  if (column !== 'RAFTER_DIRECTION') {
-    etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
+  if (column !== 'rafterDirection') {
+    etcValue = detailInfoData?.[`${column}Etc` as keyof SurveyDetailInfo]
   }
   const etcChecked = etcValue !== null && etcValue !== undefined && etcValue !== ''
 
-  console.log('column: selectedId', column, selectedId)
+  // console.log('column: selectedId', column, selectedId)
   return (
     <>
       {radioEtcData[column as keyof typeof radioEtcData].map((item) => (
@@ -316,10 +512,10 @@ const RadioSelected = ({ column, detailInfoData }: { column: string; detailInfoD
           <label htmlFor={`${item.id}`}>{item.label}</label>
         </div>
       ))}
-      {column !== 'RAFTER_DIRECTION' && column !== 'LEAK_TRACE' && column !== 'INSULATION_PRESENCE' && (
+      {column !== 'rafterDirection' && column !== 'leakTrace' && column !== 'insulationPresence' && (
         <div className="radio-form-box mb10">
-          <input type="radio" name={column} id={`${column}_ETC`} value="etc" disabled checked={etcChecked} />
-          <label htmlFor={`${column}_ETC`}>その他 (直接入力)</label>
+          <input type="radio" name={column} id={`${column}Etc`} value="etc" disabled checked={etcChecked} />
+          <label htmlFor={`${column}Etc`}>その他 (直接入力)</label>
         </div>
       )}
       {etcChecked && (
diff --git a/src/components/survey-sale/detail/form/etcProcess/MultiCheckEtc.tsx b/src/components/survey-sale/detail/form/etcProcess/MultiCheckEtc.tsx
deleted file mode 100644
index 30a1ca7..0000000
--- a/src/components/survey-sale/detail/form/etcProcess/MultiCheckEtc.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { SurveyDetailRequest } from '@/types/Survey'
-import { useEffect, useState } from 'react'
-
-export const supplementary_facilities = [
-  { id: 1, name: 'エコキュート' }, //에코큐트
-  { id: 2, name: 'エネパーム' }, //에네팜
-  { id: 3, name: '蓄電池システム' }, //축전지시스템
-  { id: 4, name: '太陽光発電' }, //태양광발전
-]
-
-export const roof_material = [
-  { id: 1, name: 'スレート' }, //슬레이트
-  { id: 2, name: 'アスファルトシングル' }, //아스팔트 싱글
-  { id: 3, name: '瓦' }, //기와
-  { id: 4, name: '金属屋根' }, //금속지붕
-]
-
-export default function MultiCheckbox({
-  column,
-  setDetailInfoData,
-  detailInfoData,
-}: {
-  column: string
-  setDetailInfoData: (data: any) => void
-  detailInfoData: SurveyDetailRequest
-}) {
-  const selectList = column === 'SUPPLEMENTARY_FACILITIES' ? supplementary_facilities : roof_material
-
-  const [isOtherChecked, setIsOtherChecked] = useState(false)
-  const [otherValue, setOtherValue] = useState('')
-
-  const makeNumArr = (value: string) => {
-    return value
-      .split(',')
-      .map((v) => v.trim())
-      .filter((v) => v.length > 0)
-  }
-
-  useEffect(() => {
-    if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
-      setIsOtherChecked(true)
-      setOtherValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string)
-    }
-  }, [detailInfoData])
-
-  const handleCheckbox = (dataIndex: number) => {
-    const value = makeNumArr(String(detailInfoData[column as keyof SurveyDetailRequest] ?? ''))
-
-    let newValue: string[]
-    if (value.includes(String(dataIndex))) {
-      // 체크 해제
-      newValue = value.filter((v) => v !== String(dataIndex))
-    } else {
-      // 체크
-      if (column === 'ROOF_MATERIAL') {
-        // 기타가 체크되어 있는지 확인
-        const isOtherSelected = isOtherChecked
-        // 현재 선택된 항목 수 + 기타 선택 여부
-        const totalSelected = value.length + (isOtherSelected ? 1 : 0)
-
-        if (totalSelected >= 2) {
-          alert('屋根材は最大2個まで選択可能です。')
-          return
-        }
-      }
-      newValue = [...value, String(dataIndex)]
-    }
-
-    setDetailInfoData({
-      ...detailInfoData,
-      [column]: newValue.join(', '),
-    })
-  }
-
-  const handleOtherCheckbox = () => {
-    if (column === 'ROOF_MATERIAL') {
-      const value = makeNumArr(String(detailInfoData[column as keyof SurveyDetailRequest] ?? ''))
-      const currentSelected = value.length
-      if (!isOtherChecked && currentSelected >= 2) {
-        alert('Up to two roofing materials can be selected.')
-        return
-      }
-    }
-
-    const newIsOtherChecked = !isOtherChecked
-    setIsOtherChecked(newIsOtherChecked)
-    setOtherValue('')
-
-    setDetailInfoData({
-      ...detailInfoData,
-      [`${column}_ETC`]: newIsOtherChecked ? '' : null,
-    })
-  }
-
-  const handleOtherInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    setOtherValue(value)
-    setDetailInfoData({
-      ...detailInfoData,
-      [`${column}_ETC`]: value,
-    })
-  }
-
-  return (
-    <>
-      {column === 'SUPPLEMENTARY_FACILITIES' ? (
-        <>
-          <div className="data-input-form-tit">
-            電気袋設備<span>※複数選択可能</span>
-          </div>
-        </>
-      ) : (
-        <>
-          <div className="data-input-form-tit">
-            屋根材<span>※最大2個まで選択可能</span>
-          </div>
-        </>
-      )}
-      <div className="data-check-wrap">
-        {selectList.map((item) => (
-          <div className="check-form-box" key={item.id}>
-            <input
-              type="checkbox"
-              id={`${column}_ch${item.id}`}
-              checked={makeNumArr(String(detailInfoData[column as keyof SurveyDetailRequest] ?? '')).includes(String(item.id))}
-              onChange={() => handleCheckbox(item.id)}
-            />
-            <label htmlFor={`${column}_ch${item.id}`}>{item.name}</label>
-          </div>
-        ))}
-        <div className="check-form-box">
-          <input type="checkbox" id={`${column}_ch05`} checked={isOtherChecked} onChange={handleOtherCheckbox} />
-          <label htmlFor={`${column}_ch05`}>その他 (直接入力)</label>
-        </div>
-      </div>
-      <div className="data-input">
-        <input type="text" className="input-frame" disabled={!isOtherChecked} value={otherValue} onChange={handleOtherInputChange} />
-      </div>
-    </>
-  )
-}
diff --git a/src/components/survey-sale/detail/form/etcProcess/RadioEtc.tsx b/src/components/survey-sale/detail/form/etcProcess/RadioEtc.tsx
deleted file mode 100644
index 29f3325..0000000
--- a/src/components/survey-sale/detail/form/etcProcess/RadioEtc.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client'
-import { useEffect, useState } from 'react'
-import { SurveyDetailRequest } from '@/types/Survey'
-
-type RadioEtcKeys = 'HOUSE_STRUCTURE' | 'RAFTER_MATERIAL' | 'WATERPROOF_MATERIAL' | 'INSULATION_PRESENCE' | 'RAFTER_DIRECTION' | 'LEAK_TRACE'
-
-const translateJapanese: Record<RadioEtcKeys, string> = {
-  HOUSE_STRUCTURE: '住宅構造',
-  RAFTER_MATERIAL: '垂木材質',
-  WATERPROOF_MATERIAL: '防水材の種類',
-  INSULATION_PRESENCE: '断熱材の有無',
-  RAFTER_DIRECTION: '垂木の方向',
-  LEAK_TRACE: '水漏れの痕跡',
-}
-
-export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
-  HOUSE_STRUCTURE: [
-    {
-      id: 1,
-      label: '木製',
-    },
-  ],
-  RAFTER_MATERIAL: [
-    {
-      id: 1,
-      label: '木製',
-    },
-    {
-      id: 2,
-      label: '強制',
-    },
-  ],
-  WATERPROOF_MATERIAL: [
-    {
-      id: 1,
-      label: 'アスファルト屋根940（22kg以上）',
-    },
-  ],
-  INSULATION_PRESENCE: [
-    {
-      id: 1,
-      label: 'なし',
-    },
-    {
-      id: 2,
-      label: 'あり',
-    },
-  ],
-  RAFTER_DIRECTION: [
-    {
-      id: 1,
-      label: '垂直垂木',
-    },
-    {
-      id: 2,
-      label: '水平垂木',
-    },
-  ],
-  LEAK_TRACE: [
-    {
-      id: 1,
-      label: 'あり',
-    },
-    {
-      id: 2,
-      label: 'なし',
-    },
-  ],
-}
-
-export default function RadioEtc({
-  column,
-  setDetailInfoData,
-  detailInfoData,
-}: {
-  column: RadioEtcKeys
-  setDetailInfoData: (data: any) => void
-  detailInfoData: SurveyDetailRequest
-}) {
-  const [isEtcSelected, setIsEtcSelected] = useState(false)
-  const [etcValue, setEtcValue] = useState('')
-
-  useEffect(() => {
-    if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
-      setIsEtcSelected(true)
-      setEtcValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string)
-    }
-  }, [detailInfoData])
-
-  const handleRadioChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // const value = e.target.value
-    // if (column === 'INSULATION_PRESENCE') {
-    //   setIsEtcSelected(value === '2')
-    //   setDetailInfoData({
-    //     ...detailInfoData,
-    //     [column]: value,
-    //   })
-    // } else if (value === 'etc') {
-    //   setIsEtcSelected(true)
-    //   setDetailInfoData({
-    //     ...detailInfoData,
-    //     [column]: null,
-    //   })
-    // } else {
-    //   setIsEtcSelected(false)
-    //   setEtcValue('')
-    //   setDetailInfoData({
-    //     ...detailInfoData,
-    //     [column]: value,
-    //     [`${column}_ETC`]: null,
-    //   })
-    // }
-    const value = e.target.value
-    const isSpecialCase = column === 'INSULATION_PRESENCE'
-    const isEtc = value === 'etc'
-    const isSpecialEtc = isSpecialCase && value === '2'
-
-    const updatedData: typeof detailInfoData = {
-      ...detailInfoData,
-      [column]: isEtc ? null : value,
-      [`${column}_ETC`]: isEtc ? '' : null,
-    }
-
-    if (isSpecialEtc) {
-      updatedData[column] = value
-    }
-
-    setIsEtcSelected(isEtc || isSpecialEtc)
-    if (!isEtc) setEtcValue('')
-    setDetailInfoData(updatedData)
-  }
-
-  const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    setEtcValue(value)
-    setDetailInfoData({
-      ...detailInfoData,
-      [`${column}_ETC`]: value,
-    })
-  }
-
-  return (
-    <div className="data-input-form-bx">
-      <div className="data-input-form-tit red-f">{translateJapanese[column]}</div>
-      {radioEtcData[column].map((item) => (
-        <div className="radio-form-box mb10" key={item.id}>
-          <input
-            type="radio"
-            name={column}
-            id={`${column}_${item.id}`}
-            value={item.id.toString()}
-            onChange={handleRadioChange}
-            checked={detailInfoData[column] === item.id.toString()}
-          />
-          <label htmlFor={`${column}_${item.id}`}>{item.label}</label>
-        </div>
-      ))}
-      {column !== 'INSULATION_PRESENCE' && (
-        <div className="radio-form-box mb10">
-          <input type="radio" name={column} id={`${column}_ETC`} value="etc" onChange={handleRadioChange} checked={isEtcSelected} />
-          <label htmlFor={`${column}_ETC`}>その他 (直接入力)</label>
-        </div>
-      )}
-      <div className="data-input">
-        <input
-          type="text"
-          className="input-frame"
-          disabled={column === 'INSULATION_PRESENCE' ? !isEtcSelected : !isEtcSelected}
-          value={etcValue}
-          onChange={handleEtcInputChange}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/survey-sale/detail/form/etcProcess/SelectBoxEtc.tsx b/src/components/survey-sale/detail/form/etcProcess/SelectBoxEtc.tsx
deleted file mode 100644
index f509972..0000000
--- a/src/components/survey-sale/detail/form/etcProcess/SelectBoxEtc.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import type { SurveyDetailRequest } from '@/types/Survey'
-import { useEffect, useState } from 'react'
-
-export type SelectBoxKeys =
-  | 'INSTALLATION_SYSTEM'
-  | 'CONSTRUCTION_YEAR'
-  | 'ROOF_SHAPE'
-  | 'RAFTER_PITCH'
-  | 'RAFTER_SIZE'
-  | 'OPEN_FIELD_PLATE_KIND'
-  | 'STRUCTURE_ORDER'
-  | 'INSTALLATION_AVAILABILITY'
-
-const font: Record<SelectBoxKeys, string> = {
-  INSTALLATION_SYSTEM: 'data-input-form-tit red-f',
-  CONSTRUCTION_YEAR: 'data-input-form-tit red-f',
-  ROOF_SHAPE: 'data-input-form-tit',
-  RAFTER_PITCH: 'data-input-form-tit red-f',
-  RAFTER_SIZE: 'data-input-form-tit red-f',
-  OPEN_FIELD_PLATE_KIND: 'data-input-form-tit',
-  STRUCTURE_ORDER: 'data-input-form-tit red-f',
-  INSTALLATION_AVAILABILITY: 'data-input-form-tit',
-}
-
-const translateJapanese: Record<SelectBoxKeys, string> = {
-  INSTALLATION_SYSTEM: '設置希望システム',
-  CONSTRUCTION_YEAR: '建築年数',
-  ROOF_SHAPE: '屋根の形状',
-  RAFTER_PITCH: '垂木傾斜',
-  RAFTER_SIZE: '垂木サイズ',
-  OPEN_FIELD_PLATE_KIND: '路地板の種類',
-  STRUCTURE_ORDER: '屋根構造の順序',
-  INSTALLATION_AVAILABILITY: '屋根製品名 設置可否確認',
-}
-
-export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string }[]> = {
-  INSTALLATION_SYSTEM: [
-    {
-      id: 1,
-      name: '太陽光発電', //태양광발전
-    },
-    {
-      id: 2,
-      name: 'ハイブリッド蓄電システム', //하이브리드축전지시스템
-    },
-    {
-      id: 3,
-      name: '蓄電池システム', //축전지시스템
-    },
-  ],
-  CONSTRUCTION_YEAR: [
-    {
-      id: 1,
-      name: '新築', //신축
-    },
-    {
-      id: 2,
-      name: '既築', //기존
-    },
-  ],
-  ROOF_SHAPE: [
-    {
-      id: 1,
-      name: '切妻', //박공지붕
-    },
-    {
-      id: 2,
-      name: '寄棟', //기동
-    },
-    {
-      id: 3,
-      name: '片流れ', //한쪽흐름
-    },
-  ],
-  RAFTER_SIZE: [
-    {
-      id: 1,
-      name: '幅35mm以上×高さ48mm以上',
-    },
-    {
-      id: 2,
-      name: '幅36mm以上×高さ46mm以上',
-    },
-    {
-      id: 3,
-      name: '幅37mm以上×高さ43mm以上',
-    },
-    {
-      id: 4,
-      name: '幅38mm以上×高さ40mm以上',
-    },
-  ],
-  RAFTER_PITCH: [
-    {
-      id: 1,
-      name: '455mm以下',
-    },
-    {
-      id: 2,
-      name: '500mm以下',
-    },
-    {
-      id: 3,
-      name: '606mm以下',
-    },
-  ],
-  OPEN_FIELD_PLATE_KIND: [
-    {
-      id: 1,
-      name: '構造用合板', //구조용합판
-    },
-    {
-      id: 2,
-      name: 'OSB', //OSB
-    },
-    {
-      id: 3,
-      name: 'パーティクルボード', //파티클보드
-    },
-    {
-      id: 4,
-      name: '小幅板', //소판
-    },
-  ],
-  STRUCTURE_ORDER: [
-    {
-      id: 1,
-      name: '屋根材', //지붕재
-    },
-    {
-      id: 2,
-      name: '防水材', //방수재
-    },
-    {
-      id: 3,
-      name: '屋根の基礎', //지붕의기초
-    },
-    {
-      id: 4,
-      name: '垂木', //서까래
-    },
-  ],
-  INSTALLATION_AVAILABILITY: [
-    {
-      id: 1,
-      name: '確認済み', //확인완료
-    },
-    {
-      id: 2,
-      name: '未確認', //미확인
-    },
-  ],
-}
-
-export default function SelectBoxForm({
-  column,
-  setDetailInfoData,
-  detailInfoData,
-}: {
-  column: SelectBoxKeys
-  setDetailInfoData: (data: any) => void
-  detailInfoData: SurveyDetailRequest
-}) {
-  const [isEtcSelected, setIsEtcSelected] = useState(false)
-  const [etcValue, setEtcValue] = useState('')
-
-  useEffect(() => {
-    if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
-      setIsEtcSelected(true)
-      setEtcValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string)
-    }
-  }, [detailInfoData])
-
-  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const value = e.target.value
-    const isSpecialCase = column === 'CONSTRUCTION_YEAR' || column === 'INSTALLATION_AVAILABILITY'
-    const isEtc = value === 'etc'
-    const isSpecialEtc = isSpecialCase && value === '2'
-
-    const updatedData: typeof detailInfoData = {
-      ...detailInfoData,
-      [column]: isEtc ? null : value,
-      [`${column}_ETC`]: isEtc ? '' : null,
-    }
-
-    // 건축연수 + 설치가능여부는 2번 선택 시 input 활성화
-    if (isSpecialEtc) {
-      updatedData[column] = value
-    }
-
-    setIsEtcSelected(isEtc || isSpecialEtc)
-    if (!isEtc) setEtcValue('')
-    setDetailInfoData(updatedData)
-  }
-
-  const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    setEtcValue(value)
-    setDetailInfoData({
-      ...detailInfoData,
-      [`${column}_ETC`]: value,
-    })
-  }
-
-  return (
-    <>
-      <div className="data-input-form-bx">
-        <div className={font[column as keyof typeof font]}>{translateJapanese[column as keyof typeof translateJapanese]}</div>
-        <div className="data-input mb5">
-          <select
-            className="select-form"
-            name={column}
-            id={column}
-            onChange={handleSelectChange}
-            value={detailInfoData[column] ? detailInfoData[column] : detailInfoData[`${column}_ETC`] ? 'etc' : isEtcSelected ? 'etc' : ''}
-          >
-            <option value="" hidden>
-              選択してください
-            </option>
-            {selectBoxOptions[column as keyof typeof selectBoxOptions].map((option) => (
-              <option key={option.id} value={option.id}>
-                {option.name}
-              </option>
-            ))}
-            {column !== 'INSTALLATION_AVAILABILITY' && column !== 'CONSTRUCTION_YEAR' && <option value="etc">その他 (直接入力)</option>}
-          </select>
-        </div>
-        <div className="data-input">
-          <input
-            type="text"
-            className="input-frame"
-            value={etcValue ?? ''}
-            onChange={handleEtcInputChange}
-            disabled={
-              column === 'INSTALLATION_AVAILABILITY'
-                ? !Boolean(detailInfoData[column])
-                : column === 'CONSTRUCTION_YEAR'
-                ? detailInfoData[column] !== '2' // 既築(2)가 아닐 때 비활성화
-                : !isEtcSelected
-            }
-          />
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/src/components/survey-sale/detail/my/basicForm.tsx b/src/components/survey-sale/detail/my/basicForm.tsx
deleted file mode 100644
index 1f55838..0000000
--- a/src/components/survey-sale/detail/my/basicForm.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-'use client'
-
-import { useServey } from '@/hooks/useSurvey'
-import { SurveyBasicRequest } from '@/types/Survey'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { useState, useEffect } from 'react'
-import { useSurveySaleTabState } from '@/store/surveySaleTabState'
-import { usePopupController } from '@/store/popupController'
-import { useAddressStore } from '@/store/addressStore'
-import { useSessionStore } from '@/store/session'
-// import { useUserType } from '@/hooks/useUserType'
-
-const defaultBasicInfoForm: 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,
-}
-
-const REQUIRED_FIELDS: (keyof SurveyBasicRequest)[] = ['REPRESENTATIVE', 'BUILDING_NAME', 'CUSTOMER_NAME']
-
-export default function BasicForm() {
-  const searchParams = useSearchParams()
-  const id = searchParams.get('id')
-  const router = useRouter()
-
-  const { setBasicInfoSelected } = useSurveySaleTabState()
-  const { surveyDetail, createSurvey, isCreatingSurvey, updateSurvey, isUpdatingSurvey } = useServey(Number(id))
-
-  const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm)
-
-  const { addressData } = useAddressStore()
-  const { session } = useSessionStore()
-
-  const popupController = usePopupController()
-
-  useEffect(() => {
-    if (surveyDetail) {
-      const { ID, UPT_DT, REG_DT, DETAIL_INFO, ...rest } = surveyDetail
-      setBasicInfoData(rest)
-    }
-    if (addressData) {
-      setBasicInfoData({
-        ...basicInfoData,
-        POST_CODE: addressData.post_code,
-        ADDRESS: addressData.address,
-        ADDRESS_DETAIL: addressData.address_detail,
-      })
-    }
-    if (session?.isLoggedIn) {
-      setBasicInfoData((prev) => ({
-        ...prev,
-        REPRESENTATIVE: session?.userId ?? '',
-        STORE: session?.storeNm ?? '',
-        CONSTRUCTION_POINT: session?.builderNo ?? '',
-      }))
-    }
-    setBasicInfoSelected()
-  }, [surveyDetail, addressData, session?.isLoggedIn, session?.userId, session?.storeNm, session?.builderNo])
-
-  const focusInput = (input: keyof SurveyBasicRequest) => {
-    const inputElement = document.getElementById(input)
-    if (inputElement) {
-      inputElement.focus()
-    }
-  }
-
-  const validateSurvey = (basicInfoData: SurveyBasicRequest) => {
-    const emptyField = REQUIRED_FIELDS.find((field) => !basicInfoData[field])
-    if (emptyField) {
-      focusInput(emptyField)
-      return false
-    }
-    return true
-  }
-
-  const handleChange = (key: keyof SurveyBasicRequest, value: string) => {
-    setBasicInfoData({ ...basicInfoData, [key]: value })
-  }
-
-  const handleSave = async (isTemporary: boolean) => {
-    if (id) {
-      // updateSurvey(basicInfoData)
-      alert('保存しました。')
-      // router.push(`/survey-sale/${id}?tab=basic-info`)
-    }
-    if (isTemporary) {
-      // const saveId = await createSurvey(basicInfoData)
-      alert('一時保存されました。')
-      // router.push(`/survey-sale/${saveId}?tab=basic-info`)
-    } else {
-      if (validateSurvey(basicInfoData)) {
-        // const saveId = await createSurvey(basicInfoData)
-        alert('保存しました。')
-        // router.push(`/survey-sale/${saveId}?tab=basic-info`)
-      }
-    }
-  }
-
-  if (isCreatingSurvey || isUpdatingSurvey) {
-    return <div>Loading...</div>
-  }
-
-  return (
-    <>
-      <div className="sale-frame">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">担当者名</div>
-            <input
-              type="text"
-              className="input-frame"
-              id="representative"
-              value={session?.userId ? session?.userId : basicInfoData.REPRESENTATIVE}
-              onChange={(e) => handleChange('REPRESENTATIVE', e.target.value)}
-            />
-          </div>
-          {(session?.role === 'Builder' || session?.role?.includes('Admin')) && (
-            <>
-              <div className="data-input-form-bx">
-                <div className="data-input-form-tit">販売店</div>
-                <input
-                  type="text"
-                  className="input-frame"
-                  id="store"
-                  value={session?.storeNm ? session?.storeNm : basicInfoData.STORE ?? ''}
-                  onChange={(e) => handleChange('STORE', e.target.value)}
-                />
-              </div>
-            </>
-          )}
-          {(session?.role === 'Partner' || session?.role === 'Builder') && (
-            <div className="data-input-form-bx">
-              <div className="data-input-form-tit">施工店</div>
-              <input
-                type="text"
-                className="input-frame"
-                id="construction_point"
-                value={session?.builderNo ? session?.builderNo : basicInfoData.CONSTRUCTION_POINT ?? ''}
-                onChange={(e) => handleChange('CONSTRUCTION_POINT', e.target.value)}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="sale-frame">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">現地調査日</div>
-            <div className="date-input">
-              <button className="date-btn">
-                <i className="date-icon"></i>
-              </button>
-              <input
-                type="date"
-                className="date-frame"
-                id="INVESTIGATION_DATE"
-                value={basicInfoData.INVESTIGATION_DATE ?? ''}
-                onChange={(e) => handleChange('INVESTIGATION_DATE', e.target.value)}
-              />
-            </div>
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建物名</div>
-            <input
-              type="text"
-              className="input-frame"
-              id="BUILDING_NAME"
-              value={basicInfoData.BUILDING_NAME ?? ''}
-              onChange={(e) => handleChange('BUILDING_NAME', e.target.value)}
-            />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">顧客名</div>
-            <input
-              type="text"
-              className="input-frame"
-              id="CUSTOMER_NAME"
-              value={basicInfoData.CUSTOMER_NAME ?? ''}
-              onChange={(e) => handleChange('CUSTOMER_NAME', e.target.value)}
-            />
-          </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" id="POST_CODE" value={basicInfoData.POST_CODE ?? ''} readOnly />
-              </div>
-              <div className="form-bx">
-              <input
-                type="text"
-                className="input-frame"
-                name="address"
-                id="ADDRESS"
-                value={basicInfoData.ADDRESS ?? ''}
-              />
-              </div>
-            </div>
-            <div className="form-btn">
-              <button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(true)}>
-                郵便番号<i className="btn-arr"></i>
-              </button>
-            </div>
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">市区町村名, 以後の住所</div>
-            <input
-              type="text"
-              className="input-frame"
-              id="ADDRESS_DETAIL"
-              value={basicInfoData.ADDRESS_DETAIL ?? ''}
-              onChange={(e) => handleChange('ADDRESS_DETAIL', e.target.value)}
-            />
-          </div>
-        </div>
-        <div className="btn-flex-wrap">
-          <div className="btn-bx">
-            <button className="btn-frame n-blue icon" onClick={() => handleSave(true)}>
-              一時保存<i className="btn-arr"></i>
-            </button>
-          </div>
-          <div className="btn-bx">
-            <button className="btn-frame red icon" onClick={() => handleSave(false)}>
-              保存<i className="btn-arr"></i>
-            </button>
-          </div>
-          <div className="btn-bx">
-            <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
-              リスト<i className="btn-arr"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/src/components/survey-sale/detail/my/detailButton.tsx b/src/components/survey-sale/detail/my/detailButton.tsx
deleted file mode 100644
index 3a871bf..0000000
--- a/src/components/survey-sale/detail/my/detailButton.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-'use client'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { useServey } from '@/hooks/useSurvey'
-import { useSessionStore } from '@/store/session'
-import { SurveyBasicInfo } from '@/types/Survey'
-import { useState } from 'react'
-
-export default function DetailButton({ surveyDetail }: { surveyDetail: SurveyBasicInfo | null }) {
-  const router = useRouter()
-  const { session } = useSessionStore()
-  const { submitSurvey, deleteSurvey } = useServey(surveyDetail?.ID ?? 0)
-
-  const searchParams = useSearchParams()
-  const isTemp = searchParams.get('isTemporary')
-  const [isTemporary, setIsTemporary] = useState(isTemp === 'true')
-
-  const checkRole = () => {
-    switch (session?.role) {
-      case 'T01':
-        return session?.userNm === surveyDetail?.REPRESENTATIVE ? true : false
-      case 'Admin':
-        return session?.storeNm === surveyDetail?.STORE ? true : false
-      case 'Admin_Sub':
-        return session?.storeNm === surveyDetail?.STORE ? true : false
-      case 'Builder':
-        return session?.builderNo === surveyDetail?.CONSTRUCTION_POINT ? true : false
-      case 'Partner':
-        return session?.builderNo === surveyDetail?.CONSTRUCTION_POINT ? true : false
-      default:
-        return ''
-    }
-  }
-
-  const handleSubmit = async () => {
-    const result = checkRole()
-    if (result) {
-      if (isTemporary) {
-        alert('一時保存されたデータは提出できません。')
-        return
-      }
-      window.neoConfirm(
-        '提出しますか？？',
-        async () => {
-          if (surveyDetail?.ID) {
-            // TODO: 제출 페이지 추가
-            alert('SUBMIT POPUP!!!!!!!!!!!')
-            await submitSurvey()
-          }
-        },
-        () => null,
-      )
-    }
-  }
-  const handleUpdate = () => {
-    const result = checkRole()
-    if (result) {
-      // router.push(`/survey-sale/basic-info?id=${surveyDetail?.ID}&isTemp=${isTemporary}`)
-      router.push(`/survey-sale/regist?id=${surveyDetail?.ID}`)
-    } else {
-      alert('担当者のみ修正可能です。')
-    }
-  }
-  const handleDelete = async () => {
-    window.neoConfirm(
-      '削除しますか？',
-      async () => {
-        if (surveyDetail?.ID) {
-          if (session.userNm === surveyDetail?.REPRESENTATIVE) {
-            await deleteSurvey()
-            alert('削除されました。')
-            router.push('/survey-sale')
-          } else {
-            alert('担当者のみ削除可能です。')
-          }
-        }
-      },
-      () => null,
-    )
-  }
-
-  const isSubmitter = session?.storeNm === surveyDetail?.STORE && session?.builderNo === surveyDetail?.CONSTRUCTION_POINT
-
-  return (
-    <div className="btn-flex-wrap">
-      <div className="btn-bx">
-        <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
-          リスト<i className="btn-arr"></i>
-        </button>
-      </div>
-      {isSubmitter && surveyDetail?.SUBMISSION_STATUS ? (
-        <></>
-      ) : (
-        <>
-          {isTemporary || surveyDetail?.SUBMISSION_STATUS ? (
-            <></>
-          ) : (
-            <>
-              <div className="btn-bx">
-                <button className="btn-frame red icon" onClick={handleSubmit}>
-                  提出<i className="btn-arr"></i>
-                </button>
-              </div>
-            </>
-          )}
-          <div className="btn-bx">
-            <button className="btn-frame n-blue icon" onClick={handleUpdate}>
-              修正<i className="btn-arr"></i>
-            </button>
-          </div>
-          <div className="btn-bx">
-            <button className="btn-frame n-blue icon" onClick={handleDelete}>
-              削除<i className="btn-arr"></i>
-            </button>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/survey-sale/detail/my/roofDetailForm.tsx b/src/components/survey-sale/detail/my/roofDetailForm.tsx
deleted file mode 100644
index 6b8bbb5..0000000
--- a/src/components/survey-sale/detail/my/roofDetailForm.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-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'
-
-export default function RoofDetailForm({
-  surveyDetail,
-  isLoadingSurveyDetail,
-}: {
-  surveyDetail: SurveyBasicInfo | null
-  isLoadingSurveyDetail: boolean
-}) {
-  console.log(surveyDetail)
-
-  const makeNumArr = (value: string) => {
-    return value
-      .split(',')
-      .map((v) => v.trim())
-      .filter((v) => v.length > 0)
-  }
-
-  if (isLoadingSurveyDetail) {
-    return <div>Loading...</div>
-  }
-  return (
-    <>
-      <div className="sale-frame">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            {/* 전기 계약 용량 */}
-            <div className="data-input-form-tit">電気契約容量</div>
-            <input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.CONTRACT_CAPACITY ?? ''} />
-          </div>
-          {/* 전기 소매 회사 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">電気小売会社</div>
-            <input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.RETAIL_COMPANY ?? ''} />
-          </div>
-          {/* 전기 부대 설비 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">電気附属設備</div>
-            <div className="data-check-wrap">
-              {supplementary_facilities.map((item) => (
-                <div className="check-form-box" key={item.id}>
-                  <input
-                    type="checkbox"
-                    id={`${item.id}`}
-                    checked={makeNumArr(surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES ?? '').includes(String(item.id))}
-                    readOnly
-                  />
-                  <label htmlFor={`${item.id}`}>{item.name}</label>
-                </div>
-              ))}
-              <div className="check-form-box">
-                <input
-                  type="checkbox"
-                  id={`supplementary_facilities_etc`}
-                  checked={surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES_ETC !== null}
-                  readOnly
-                />
-                <label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label>
-              </div>
-            </div>
-            <div className="data-input">
-              <input
-                type="text"
-                className="input-frame"
-                placeholder="-"
-                readOnly
-                value={surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES_ETC ?? ''}
-              />
-            </div>
-          </div>
-          {/* 설치 희망 시스템 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">設置希望システム</div>
-            <SelectedBox column="INSTALLATION_SYSTEM" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 건축 연수 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建築年数</div>
-            <SelectedBox column="CONSTRUCTION_YEAR" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 지붕재 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">屋根材</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(surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL ?? '').includes(String(item.id))}
-                    readOnly
-                  />
-                  <label htmlFor={`${item.id}`}>{item.name}</label>
-                </div>
-              ))}
-              <div className="check-form-box">
-                <input type="checkbox" id={`roof_material_etc`} checked={surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL_ETC !== null} readOnly />
-                <label htmlFor={`roof_material_etc`}>その他 (直接入力)</label>
-              </div>
-            </div>
-            <div className="data-input">
-              <input type="text" className="input-frame" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL_ETC ?? ''} />
-            </div>
-          </div>
-          {/* 지붕 모양 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">屋根の形状</div>
-            <SelectedBox column="ROOF_SHAPE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 지붕 경사도 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">屋根の斜面</div>
-            <div className="data-input flex">
-              <input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.ROOF_SLOPE ?? ''} />
-              <span>寸</span>
-            </div>
-          </div>
-          {/* 주택 구조 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">住宅構造</div>
-            <RadioSelected column="HOUSE_STRUCTURE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 서까래 재질 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">垂木の材質</div>
-            <RadioSelected column="RAFTER_MATERIAL" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 서까래 크기 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">垂木の大きさ</div>
-            <SelectedBox column="RAFTER_SIZE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 서까래 피치 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">垂木のピッチ</div>
-            <SelectedBox column="RAFTER_PITCH" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 서까래 방향 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">垂木の方向</div>
-            <RadioSelected column="RAFTER_DIRECTION" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 노지판 종류 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">路地板の種類</div>
-            <SelectedBox column="OPEN_FIELD_PLATE_KIND" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 노지판 두께 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">路地板厚</div>
-            <div className="data-input flex">
-              <input
-                className="input-frame"
-                type="text"
-                placeholder="-"
-                readOnly
-                value={surveyDetail?.DETAIL_INFO?.OPEN_FIELD_PLATE_THICKNESS ?? ''}
-              />
-              <span>mm</span>
-            </div>
-          </div>
-          {/* 누수 흔적 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">水漏れの痕跡</div>
-            <RadioSelected column="LEAK_TRACE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 방수재 종류 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">防水材の種類</div>
-            <RadioSelected column="WATERPROOF_MATERIAL" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 단열재 유무 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">断熱材の有無</div>
-            <RadioSelected column="INSULATION_PRESENCE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 구조 순서 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">屋根構造の順序</div>
-            <SelectedBox column="STRUCTURE_ORDER" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 설치 가능 여부 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">設置可能な場合</div>
-            <SelectedBox column="INSTALLATION_AVAILABILITY" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
-          </div>
-          {/* 메모 */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">メモ</div>
-            <div className="data-input">
-              <textarea className="textarea-form" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.MEMO ?? ''} />
-            </div>
-          </div>
-        </div>
-        <DetailButton surveyDetail={surveyDetail} />
-      </div>
-    </>
-  )
-}
-
-const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
-  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/my/roofInfoForm.tsx b/src/components/survey-sale/detail/my/roofInfoForm.tsx
deleted file mode 100644
index bd0a1f7..0000000
--- a/src/components/survey-sale/detail/my/roofInfoForm.tsx
+++ /dev/null
@@ -1,353 +0,0 @@
-'use client'
-
-import { useSurveySaleTabState } from '@/store/surveySaleTabState'
-
-import { useServey } from '@/hooks/useSurvey'
-import { SurveyDetailRequest } from '@/types/Survey'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { useEffect, useState } from 'react'
-import MultiCheckEtc from '../form/etcProcess/MultiCheckEtc'
-import SelectBoxEtc from '../form/etcProcess/SelectBoxEtc'
-import RadioEtc from '../form/etcProcess/RadioEtc'
-
-const defaultDetailInfoForm: 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,
-}
-
-export default function RoofInfoForm() {
-  const { setRoofInfoSelected } = useSurveySaleTabState()
-
-  useEffect(() => {
-    setRoofInfoSelected()
-  }, [])
-
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  const id = searchParams.get('id')
-
-  const { surveyDetail, createSurveyDetail, validateSurveyDetail } = useServey(Number(id))
-
-  const [detailInfoData, setDetailInfoData] = useState<SurveyDetailRequest>(defaultDetailInfoForm)
-
-  useEffect(() => {
-    if (surveyDetail?.DETAIL_INFO) {
-      const { ID, UPT_DT, REG_DT, BASIC_INFO_ID, ...rest } = surveyDetail.DETAIL_INFO
-      setDetailInfoData(rest)
-    }
-  }, [surveyDetail])
-
-  const handleNumberInput = (key: keyof SurveyDetailRequest, value: number | string) => {
-    if (key === 'ROOF_SLOPE' || key === 'OPEN_FIELD_PLATE_THICKNESS') {
-      const stringValue = value.toString()
-      if (stringValue.length > 5) {
-        alert('保存できるサイズを超えました。')
-        return
-      }
-      if (stringValue.includes('.')) {
-        const decimalPlaces = stringValue.split('.')[1].length
-        if (decimalPlaces > 1) {
-          alert('小数点以下1桁までしか許されません。')
-          return
-        }
-      }
-      setDetailInfoData({ ...detailInfoData, [key]: value.toString() })
-    } else {
-      setDetailInfoData({ ...detailInfoData, [key]: value.toString() })
-    }
-  }
-
-  const handleTextInput = (key: keyof SurveyDetailRequest, value: string) => {
-    setDetailInfoData({ ...detailInfoData, [key]: value || null })
-  }
-
-  const handleBooleanInput = (key: keyof SurveyDetailRequest, value: boolean) => {
-    setDetailInfoData({ ...detailInfoData, [key]: value })
-  }
-
-  const handleUnitInput = (value: string) => {
-    const numericValue = detailInfoData.CONTRACT_CAPACITY?.replace(/[^0-9.]/g, '') || ''
-    setDetailInfoData({
-      ...detailInfoData,
-      CONTRACT_CAPACITY: numericValue ? `${numericValue} ${value}` : value,
-    })
-  }
-
-  const handleSave = async () => {
-    console.log(detailInfoData)
-    if (id) {
-      const emptyField = validateSurveyDetail(detailInfoData)
-      if (emptyField.trim() === '') {
-        const updatedBasicInfoData = {
-          DETAIL_INFO: detailInfoData,
-        }
-        try {
-          createSurveyDetail({
-            surveyId: Number(id),
-            surveyDetail: updatedBasicInfoData,
-          })
-          alert('調査物件を保存しました。')
-        } catch (error) {
-          alert(error)
-          throw new Error('failed to create survey detail: ' + error)
-        }
-        router.push(`/survey-sale`)
-      } else {
-        alert(emptyField + ' は必須項目です。')
-        focusOnInput(emptyField)
-      }
-    } else {
-      alert('基本情報を作成した後、屋根情報を作成することができます。')
-    }
-  }
-  const focusOnInput = (field: string) => {
-    const input = document.getElementById(field)
-    if (input) {
-      input.focus()
-    }
-  }
-  return (
-    <>
-      <div className="sale-frame">
-        <div className="sale-roof-title">電気関係</div>
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            {/* 전기계약 용량 - contract_capacity */}
-            <div className="data-input-form-tit">電気契約容量</div>
-            <div className="data-input mb5">
-              <input
-                type="number"
-                inputMode="decimal"
-                className="input-frame"
-                value={detailInfoData.CONTRACT_CAPACITY?.split(' ')[0] ?? ''}
-                onChange={(e) => handleNumberInput('CONTRACT_CAPACITY', e.target.value)}
-              />
-            </div>
-            <div className="data-input">
-              <select
-                className="select-form"
-                name="CONTRACT_CAPACITY_UNIT"
-                id="CONTRACT_CAPACITY_UNIT"
-                onChange={(e) => handleUnitInput(e.target.value)}
-                value={detailInfoData.CONTRACT_CAPACITY?.split(' ')[1] ?? ''}
-              >
-                <option value="" hidden>
-                  選択してください
-                </option>
-                <option value="kVA">kVA</option>
-                <option value="A">A</option>
-              </select>
-            </div>
-          </div>
-          {/* 전기 소매 회사 - retail_company */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">電気小売会社</div>
-            <input
-              type="text"
-              className="input-frame"
-              value={detailInfoData.RETAIL_COMPANY ?? ''}
-              onChange={(e) => handleTextInput('RETAIL_COMPANY', e.target.value)}
-            />
-          </div>
-          {/* 전기 부대 설비 - supplementary_facilities */}
-          <div className="data-input-form-bx">
-            <MultiCheckEtc column={'SUPPLEMENTARY_FACILITIES'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          </div>
-          {/* 설치 희망 시스템 - installation_system */}
-          <SelectBoxEtc column={'INSTALLATION_SYSTEM'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-        </div>
-      </div>
-
-      <div className="sale-frame">
-        <div className="sale-roof-title">屋根関係</div>
-        <div className="data-form-wrap">
-          {/* 건축 연수 - construction_year */}
-          <SelectBoxEtc column={'CONSTRUCTION_YEAR'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          {/* 지붕재 - roof_material */}
-          <div className="data-input-form-bx">
-            <MultiCheckEtc column={'ROOF_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          </div>
-          {/* 지붕 모양 - roof_shape */}
-          <SelectBoxEtc column={'ROOF_SHAPE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          {/* 지붕 경사도 - roof_slope */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">屋根の斜面</div>
-            <div className="data-input flex">
-              <input
-                type="number"
-                step={0.1}
-                inputMode="decimal"
-                className="input-frame"
-                value={detailInfoData.ROOF_SLOPE ?? ''}
-                onChange={(e) => handleNumberInput('ROOF_SLOPE', e.target.value)}
-              />
-              <span>寸</span>
-            </div>
-          </div>
-          {/* 주택 구조 - house_structure */}
-          <RadioEtc column={'HOUSE_STRUCTURE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          {/* 서까래 재질 - rafter_material */}
-          <RadioEtc column={'RAFTER_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          {/* 서까래 크기 - rafter_size */}
-          <SelectBoxEtc column={'RAFTER_SIZE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          {/* 서까래 피치 - rafter_pitch */}
-          <SelectBoxEtc column={'RAFTER_PITCH'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          {/* 서까래 방향 - rafter_direction */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit red-f">垂木の方向</div>
-            <div className="data-check-wrap mb0" id="rafter_direction">
-              <div className="radio-form-box">
-                <input
-                  type="radio"
-                  name="RAFTER_DIRECTION"
-                  id="RAFTER_DIRECTION_1"
-                  value={1}
-                  onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
-                  checked={detailInfoData.RAFTER_DIRECTION === '1'}
-                />
-                <label htmlFor="RAFTER_DIRECTION_1">垂直垂木</label>
-              </div>
-              <div className="radio-form-box">
-                <input
-                  type="radio"
-                  name="RAFTER_DIRECTION"
-                  id="RAFTER_DIRECTION_2"
-                  value={2}
-                  onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
-                  checked={detailInfoData.RAFTER_DIRECTION === '2'}
-                />
-                <label htmlFor="RAFTER_DIRECTION_2">水平垂木</label>
-              </div>
-            </div>
-          </div>
-          {/* 노지판 종류 - open_field_plate_kind */}
-          <SelectBoxEtc column={'OPEN_FIELD_PLATE_KIND'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          {/* 노지판 두께 - open_field_plate_thickness */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">
-              路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
-            </div>
-            <div className="data-input flex">
-              <input
-                type="number"
-                step={0.1}
-                inputMode="decimal"
-                className="input-frame"
-                value={detailInfoData.OPEN_FIELD_PLATE_THICKNESS ?? ''}
-                onChange={(e) => handleNumberInput('OPEN_FIELD_PLATE_THICKNESS', e.target.value)}
-              />
-              <span>mm</span>
-            </div>
-          </div>
-          {/* 누수 흔적 - leak_trace */}
-          <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="LEAK_TRACE"
-                  id="LEAK_TRACE_1"
-                  checked={detailInfoData.LEAK_TRACE === true}
-                  onChange={(e) => handleBooleanInput('LEAK_TRACE', true)}
-                />
-                <label htmlFor="LEAK_TRACE_1">あり</label>
-              </div>
-              <div className="radio-form-box">
-                <input
-                  type="radio"
-                  name="LEAK_TRACE"
-                  id="LEAK_TRACE_2"
-                  checked={detailInfoData.LEAK_TRACE === false}
-                  onChange={(e) => handleBooleanInput('LEAK_TRACE', false)}
-                />
-                <label htmlFor="LEAK_TRACE_2">なし</label>
-              </div>
-            </div>
-          </div>
-          {/* 방수재 종류 - waterproof_material */}
-          <RadioEtc column={'WATERPROOF_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          {/* 단열재 유무 - insulation_presence */}
-          <RadioEtc column={'INSULATION_PRESENCE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          {/* 노지판 종류 - open_field_plate_kind */}
-          <SelectBoxEtc column={'STRUCTURE_ORDER'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          {/* 설치 가능 여부 - installation_availability */}
-          <SelectBoxEtc column={'INSTALLATION_AVAILABILITY'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
-          {/* 메모 - memo */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">メモ</div>
-            <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 className="data-input">
-              <textarea
-                className="textarea-form"
-                name="MEMO"
-                id="MEMO"
-                value={detailInfoData.MEMO ?? ''}
-                onChange={(e) => handleTextInput('MEMO', e.target.value)}
-                placeholder="例: 漏れの兆候があるため、正確な点検が必要です."
-              ></textarea>
-            </div>
-          </div>
-        </div>
-        <div className="btn-flex-wrap">
-          <div className="btn-bx">
-            <button className="btn-frame n-blue icon" onClick={handleSave}>
-              一時保存<i className="btn-arr"></i>
-            </button>
-          </div>
-          <div className="btn-bx">
-            <button className="btn-frame red icon" onClick={handleSave}>
-              保存<i className="btn-arr"></i>
-            </button>
-          </div>
-          <div className="btn-bx">
-            <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
-              リスト<i className="btn-arr"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/src/components/survey-sale/list/ListTable.tsx b/src/components/survey-sale/list/ListTable.tsx
index 468f01d..b1ac703 100644
--- a/src/components/survey-sale/list/ListTable.tsx
+++ b/src/components/survey-sale/list/ListTable.tsx
@@ -7,33 +7,32 @@ import { useRouter } from 'next/navigation'
 import SearchForm from './SearchForm'
 import { useSurveyFilterStore } from '@/store/surveyFilterStore'
 import { useSessionStore } from '@/store/session'
+import { SurveyBasicInfo } from '@/types/Survey'
 
 export default function ListTable() {
   const router = useRouter()
-  const { surveyList, isLoadingSurveyList, surveyListCount } = useServey()
+  const { surveyList, isLoadingSurveyList } = useServey()
   const { offset, setOffset } = useSurveyFilterStore()
 
-  const [heldSurveyList, setHeldSurveyList] = useState<typeof surveyList>([])
+  const [heldSurveyList, setHeldSurveyList] = useState<SurveyBasicInfo[]>([])
   const [hasMore, setHasMore] = useState(false)
 
   const { session } = useSessionStore()
 
   useEffect(() => {
-    if (surveyList) {
-      if (offset === 0) {
-        setHeldSurveyList(surveyList)
+    if (!session.isLoggedIn || !('data' in surveyList)) return
+    if ('count' in surveyList && surveyList.count > 0) {
+      if (offset > 0) {
+        setHeldSurveyList((prev) => [...prev, ...surveyList.data])
       } else {
-        setHeldSurveyList(prev => [...prev, ...surveyList])
+        setHeldSurveyList(surveyList.data)
       }
-      setHasMore(surveyListCount > offset + 10)
+      setHasMore(surveyList.count > offset + 10)
     } else {
       setHeldSurveyList([])
       setHasMore(false)
     }
-  }, [surveyList, surveyListCount, offset])
-
-  console.log('surveyList:: ', surveyList)
-  console.log('heldSurveyList:: ', heldSurveyList)
+  }, [surveyList, offset, session])
 
   const handleDetailClick = (id: number) => {
     router.push(`/survey-sale/${id}`)
@@ -48,22 +47,22 @@ export default function ListTable() {
 
   return (
     <>
-      <SearchForm onItemsInit={handleItemsInit} memberRole={session?.role ?? ''} userId={session?.userId ?? ''} />
+      <SearchForm memberRole={session?.role ?? ''} userId={session?.userId ?? ''} />
       {heldSurveyList.length > 0 ? (
         <div className="sale-frame">
           <ul className="sale-list-wrap">
             {heldSurveyList.map((survey) => (
-              <li className="sale-list-item cursor-pointer" key={survey.ID} onClick={() => handleDetailClick(survey.ID)}>
+              <li className="sale-list-item cursor-pointer" key={survey.id} onClick={() => handleDetailClick(survey.id)}>
                 <div className="sale-item-bx">
                   <div className="sale-item-date-bx">
-                    <div className="sale-item-num">{survey.ID}</div>
-                    <div className="sale-item-date">{survey.INVESTIGATION_DATE}</div>
+                    <div className="sale-item-num">{survey.id}</div>
+                    <div className="sale-item-date">{survey.investigationDate}</div>
                   </div>
-                  <div className="sale-item-tit">{survey.BUILDING_NAME}</div>
-                  <div className="sale-item-customer">{survey.CUSTOMER_NAME}</div>
+                  <div className="sale-item-tit">{survey.buildingName}</div>
+                  <div className="sale-item-customer">{survey.customerName}</div>
                   <div className="sale-item-update-bx">
-                    <div className="sale-item-name">{survey.REPRESENTATIVE}</div>
-                    <div className="sale-item-update">{new Date(survey.UPT_DT).toLocaleString()}</div>
+                    <div className="sale-item-name">{survey.representative}</div>
+                    <div className="sale-item-update">{new Date(survey.uptDt).toLocaleString()}</div>
                   </div>
                 </div>
               </li>
diff --git a/src/components/survey-sale/list/SearchForm.tsx b/src/components/survey-sale/list/SearchForm.tsx
index 16a259d..327a85c 100644
--- a/src/components/survey-sale/list/SearchForm.tsx
+++ b/src/components/survey-sale/list/SearchForm.tsx
@@ -4,7 +4,7 @@ import { SEARCH_OPTIONS, SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS, useSurvey
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 
-export default function SearchForm({ onItemsInit, memberRole, userId }: { onItemsInit: () => void; memberRole: string; userId: string }) {
+export default function SearchForm({ memberRole, userId }: { memberRole: string; userId: string }) {
   const router = useRouter()
   const { setSearchOption, setSort, setIsMySurvey, setKeyword, isMySurvey, keyword, searchOption, sort } = useSurveyFilterStore()
   const [searchKeyword, setSearchKeyword] = useState(keyword)
diff --git a/src/components/survey-sale/temp/basicRegist.tsx b/src/components/survey-sale/temp/basicRegist.tsx
deleted file mode 100644
index c5ddaf1..0000000
--- a/src/components/survey-sale/temp/basicRegist.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-'use client'
-
-import { SurveyBasicRequest, SurveyRegistRequest } from '@/types/Survey'
-import { useEffect } from 'react'
-import { usePopupController } from '@/store/popupController'
-import { useAddressStore } from '@/store/addressStore'
-import { useSessionStore } from '@/store/session'
-
-export default function BasicRegist({
-  basicInfoData,
-  setBasicInfoData,
-}: {
-  basicInfoData: SurveyBasicRequest
-  setBasicInfoData: (data: SurveyBasicRequest) => void
-}) {
-  const { addressData } = useAddressStore()
-  const { session } = useSessionStore()
-
-  const popupController = usePopupController()
-
-  useEffect(() => {
-    if (addressData) {
-      setBasicInfoData({
-        ...basicInfoData,
-        POST_CODE: addressData.post_code,
-        ADDRESS: addressData.address,
-        ADDRESS_DETAIL: addressData.address_detail,
-      })
-    }
-  }, [addressData])
-
-  const handleChange = (key: keyof SurveyRegistRequest, value: string) => {
-    setBasicInfoData({ ...basicInfoData, [key]: value })
-  }
-
-  return (
-    <>
-      <div className="sale-frame" id="basic-form-section">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">担当者名</div>
-            <input
-              type="text"
-              className="input-frame"
-              id="representative"
-              value={session?.userNm ? session?.userNm : basicInfoData.REPRESENTATIVE}
-              disabled
-            />
-          </div>
-          {(session?.role === 'Builder' || session?.role?.includes('Admin')) && (
-            <>
-              <div className="data-input-form-bx">
-                <div className="data-input-form-tit">販売店</div>
-                <input
-                  type="text"
-                  className="input-frame"
-                  id="store"
-                  value={session?.storeNm ? session?.storeNm : basicInfoData.STORE ?? ''}
-                  disabled
-                />
-              </div>
-            </>
-          )}
-          {(session?.role === 'Partner' || session?.role === 'Builder') && (
-            <div className="data-input-form-bx">
-              <div className="data-input-form-tit">施工店</div>
-              <input
-                type="text"
-                className="input-frame"
-                id="construction_point"
-                value={session?.builderNo ? session?.builderNo : basicInfoData.CONSTRUCTION_POINT ?? ''}
-                disabled
-              />
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="sale-frame">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">現地調査日</div>
-            <div className="date-input">
-              <button className="date-btn">
-                <i className="date-icon"></i>
-              </button>
-              <input
-                type="date"
-                className="date-frame"
-                id="INVESTIGATION_DATE"
-                value={basicInfoData.INVESTIGATION_DATE ?? ''}
-                onChange={(e) => handleChange('INVESTIGATION_DATE', e.target.value)}
-              />
-            </div>
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建物名</div>
-            <input
-              type="text"
-              className="input-frame"
-              id="BUILDING_NAME"
-              value={basicInfoData.BUILDING_NAME ?? ''}
-              onChange={(e) => handleChange('BUILDING_NAME', e.target.value)}
-            />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">顧客名</div>
-            <input
-              type="text"
-              className="input-frame"
-              id="CUSTOMER_NAME"
-              value={basicInfoData.CUSTOMER_NAME ?? ''}
-              onChange={(e) => handleChange('CUSTOMER_NAME', e.target.value)}
-            />
-          </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" id="POST_CODE" placeholder="郵便番号" value={basicInfoData.POST_CODE ?? ''} readOnly />
-              </div>
-              <div className="form-bx">
-                <input
-                  className="input-frame"
-                  name="address"
-                  id="ADDRESS"
-                  placeholder="都道府県"
-                  value={basicInfoData.ADDRESS ?? ''}
-                  onChange={(e) => handleChange('ADDRESS', e.target.value)}
-                />
-              </div>
-            </div>
-            <div className="form-btn">
-              <button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(true)}>
-                郵便番号<i className="btn-arr"></i>
-              </button>
-            </div>
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">市区町村名, 以後の住所</div>
-            <input
-              type="text"
-              className="input-frame"
-              id="ADDRESS_DETAIL"
-              value={basicInfoData.ADDRESS_DETAIL ?? ''}
-              onChange={(e) => handleChange('ADDRESS_DETAIL', e.target.value)}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/src/components/survey-sale/temp/formButton.tsx b/src/components/survey-sale/temp/formButton.tsx
deleted file mode 100644
index 7b41003..0000000
--- a/src/components/survey-sale/temp/formButton.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client'
-
-import { SurveyBasicRequest, SurveyRegistRequest } from '@/types/Survey'
-import { SurveyDetailRequest } from '@/types/Survey'
-import { useRouter } from 'next/navigation'
-import { useServey } from '@/hooks/useSurvey'
-
-export default function FormButton({
-  surveyData,
-  idParam,
-}: {
-  surveyData: { basic: SurveyBasicRequest; roof: SurveyDetailRequest }
-  idParam: string | null
-}) {
-  const router = useRouter()
-  const { validateSurveyDetail, createSurvey, updateSurvey } = useServey(Number(idParam))
-
-  const saveData = {
-    ...surveyData.basic,
-    DETAIL_INFO: surveyData.roof,
-  }
-
-  const focusInput = (input: keyof SurveyRegistRequest) => {
-    const inputElement = document.getElementById(input)
-    if (inputElement) {
-      inputElement.focus()
-    }
-  }
-
-  const handleSave = (isTemporary: boolean) => {
-    const emptyField = validateSurveyDetail(saveData.DETAIL_INFO)
-    if (!isTemporary) {
-      saveProcess(emptyField)
-    } else {
-      temporarySaveProcess()
-    }
-  }
-  const saveProcess = async (emptyField: string) => {
-    if (emptyField.trim() === '') {
-      if (idParam) {
-        // 매물 수정 (저장)
-        updateSurvey(saveData)
-        router.push(`/survey-sale/${idParam}`)
-      } else {
-        // 매물 생성 (저장)
-        const id = await createSurvey(saveData)
-        router.push(`/survey-sale/${id}`)
-      }
-      alert('保存されました。')
-    } else {
-      alert(emptyField + ' 項目が空です。')
-      focusInput(emptyField as keyof SurveyRegistRequest)
-    }
-  }
-
-  const temporarySaveProcess = async () => {
-    if (idParam) {
-      // 매물 수정 (임시저장)
-      updateSurvey(saveData)
-      router.push(`/survey-sale/${idParam}?isTemporary=true`)
-    } else {
-      // 매물 생성 (임시저장)
-      const id = await createSurvey(saveData)
-      router.push(`/survey-sale/${id}?isTemporary=true`)
-    }
-    alert('一時保存されました。')
-  }
-
-  return (
-    <>
-      <div className="sale-frame">
-        <div className="btn-flex-wrap">
-          <div className="btn-bx">
-            <button className="btn-frame n-blue icon" onClick={() => handleSave(true)}>
-              一時保存<i className="btn-arr"></i>
-            </button>
-          </div>
-          <div className="btn-bx">
-            <button className="btn-frame red icon" onClick={() => handleSave(false)}>
-              保存<i className="btn-arr"></i>
-            </button>
-          </div>
-          <div className="btn-bx">
-            <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
-              リスト<i className="btn-arr"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/src/components/survey-sale/temp/registForm.tsx b/src/components/survey-sale/temp/registForm.tsx
deleted file mode 100644
index 42e7267..0000000
--- a/src/components/survey-sale/temp/registForm.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-'use client'
-
-import { SurveyBasicRequest, SurveyDetailRequest, SurveyRegistRequest } from '@/types/Survey'
-import FormButton from './formButton'
-import { useEffect, useState } from 'react'
-import BasicRegist from './basicRegist'
-import RoofRegist from './roofRegist'
-import { useSessionStore } from '@/store/session'
-import { useSearchParams } from 'next/navigation'
-import { useServey } from '@/hooks/useSurvey'
-
-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 RegistForm() {
-  const searchParams = useSearchParams()
-  const id = searchParams.get('id')
-
-  const { session } = useSessionStore()
-  const { surveyDetail } = useServey(Number(id))
-
-  const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(basicInfoForm)
-  const [roofInfoData, setRoofInfoData] = useState<SurveyDetailRequest>(roofInfoForm)
-
-  useEffect(() => {
-    if (session) {
-      setBasicInfoData({
-        ...basicInfoForm,
-        REPRESENTATIVE: session.userNm ?? '',
-        STORE: session.role === 'T01' ? '' : session.storeNm ?? '',
-        CONSTRUCTION_POINT: session.builderNo ?? '',
-      })
-    }
-    if (id && surveyDetail) {
-      const { ID, UPT_DT, REG_DT, DETAIL_INFO, ...rest } = surveyDetail
-      setBasicInfoData(rest)
-      if (surveyDetail?.DETAIL_INFO) {
-        const { ID, UPT_DT, REG_DT, BASIC_INFO_ID, ...rest } = surveyDetail.DETAIL_INFO
-        setRoofInfoData(rest)
-      }
-    }
-  }, [session, surveyDetail])
-
-  const surveyData = {
-    basic: basicInfoData,
-    roof: roofInfoData,
-  }
-
-  return (
-    <>
-      <BasicRegist basicInfoData={basicInfoData} setBasicInfoData={setBasicInfoData} />
-      <RoofRegist roofInfoData={roofInfoData} setRoofInfoData={setRoofInfoData} />
-      <FormButton surveyData={surveyData} idParam={id} />
-    </>
-  )
-}
diff --git a/src/components/survey-sale/temp/roofRegist.tsx b/src/components/survey-sale/temp/roofRegist.tsx
deleted file mode 100644
index 6c5492a..0000000
--- a/src/components/survey-sale/temp/roofRegist.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-'use client'
-
-import { useSurveySaleTabState } from '@/store/surveySaleTabState'
-
-import { SurveyBasicInfo, SurveyDetailRequest } from '@/types/Survey'
-import { useEffect } from 'react'
-import MultiCheckEtc from '../detail/form/etcProcess/MultiCheckEtc'
-import SelectBoxEtc from '../detail/form/etcProcess/SelectBoxEtc'
-import RadioEtc from '../detail/form/etcProcess/RadioEtc'
-
-export default function RoofRegist({
-  roofInfoData,
-  setRoofInfoData,
-}: {
-  roofInfoData: SurveyDetailRequest
-  setRoofInfoData: (data: SurveyDetailRequest) => void
-}) {
-  const { setRoofInfoSelected } = useSurveySaleTabState()
-
-  useEffect(() => {
-    setRoofInfoSelected()
-  }, [])
-
-  const handleNumberInput = (key: keyof SurveyDetailRequest, value: number | string) => {
-    if (key === 'ROOF_SLOPE' || key === 'OPEN_FIELD_PLATE_THICKNESS') {
-      const stringValue = value.toString()
-      if (stringValue.length > 5) {
-        alert('保存できるサイズを超えました。')
-        return
-      }
-      if (stringValue.includes('.')) {
-        const decimalPlaces = stringValue.split('.')[1].length
-        if (decimalPlaces > 1) {
-          alert('小数点以下1桁までしか許されません。')
-          return
-        }
-      }
-    }
-    setRoofInfoData({ ...roofInfoData, [key]: value.toString() })
-  }
-
-  const handleTextInput = (key: keyof SurveyDetailRequest, value: string) => {
-    setRoofInfoData({ ...roofInfoData, [key]: value || null })
-  }
-
-  const handleBooleanInput = (key: keyof SurveyDetailRequest, value: boolean) => {
-    setRoofInfoData({ ...roofInfoData, [key]: value })
-  }
-
-  const handleUnitInput = (value: string) => {
-    const numericValue = roofInfoData.CONTRACT_CAPACITY?.replace(/[^0-9.]/g, '') || ''
-    setRoofInfoData({
-      ...roofInfoData,
-      CONTRACT_CAPACITY: numericValue ? `${numericValue} ${value}` : value,
-    })
-  }
-
-  //   const handleSave = async () => {
-  //     if (id) {
-  //       const emptyField = validateSurveyDetail(roofInfoData)
-  //       if (emptyField.trim() === '') {
-  //         const updatedBasicInfoData = {
-  //           DETAIL_INFO: roofInfoData,
-  //         }
-  //         try {
-  //           createSurveyDetail({
-  //             surveyId: Number(id),
-  //             surveyDetail: updatedBasicInfoData,
-  //           })
-  //           alert('調査物件を保存しました。')
-  //         } catch (error) {
-  //           alert(error)
-  //           throw new Error('failed to create survey detail: ' + error)
-  //         }
-  //         router.push(`/survey-sale`)
-  //       } else {
-  //         alert(emptyField + ' は必須項目です。')
-  //         focusOnInput(emptyField)
-  //       }
-  //     } else {
-  //       alert('基本情報を作成した後、屋根情報を作成することができます。')
-  //     }
-  //   }
-  //   const focusOnInput = (field: string) => {
-  //     const input = document.getElementById(field)
-  //     if (input) {
-  //       input.focus()
-  //     }
-  //   }
-  return (
-    <>
-      <div className="sale-frame" id="roof-form-section">
-        <div className="sale-roof-title">電気関係</div>
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            {/* 전기계약 용량 - contract_capacity */}
-            <div className="data-input-form-tit">電気契約容量</div>
-            <div className="data-input mb5">
-              <input
-                type="number"
-                inputMode="decimal"
-                className="input-frame"
-                value={roofInfoData.CONTRACT_CAPACITY?.split(' ')[0] ?? ''}
-                onChange={(e) => handleNumberInput('CONTRACT_CAPACITY', e.target.value)}
-              />
-            </div>
-            <div className="data-input">
-              <select
-                className="select-form"
-                name="CONTRACT_CAPACITY_UNIT"
-                id="CONTRACT_CAPACITY_UNIT"
-                onChange={(e) => handleUnitInput(e.target.value)}
-                value={roofInfoData.CONTRACT_CAPACITY?.split(' ')[1] ?? ''}
-              >
-                <option value="" hidden>
-                  選択してください
-                </option>
-                <option value="kVA">kVA</option>
-                <option value="A">A</option>
-              </select>
-            </div>
-          </div>
-          {/* 전기 소매 회사 - retail_company */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">電気小売会社</div>
-            <input
-              type="text"
-              className="input-frame"
-              value={roofInfoData.RETAIL_COMPANY ?? ''}
-              onChange={(e) => handleTextInput('RETAIL_COMPANY', e.target.value)}
-            />
-          </div>
-          {/* 전기 부대 설비 - supplementary_facilities */}
-          <div className="data-input-form-bx">
-            <MultiCheckEtc column={'SUPPLEMENTARY_FACILITIES'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          </div>
-          {/* 설치 희망 시스템 - installation_system */}
-          <SelectBoxEtc column={'INSTALLATION_SYSTEM'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-        </div>
-      </div>
-
-      <div className="sale-frame">
-        <div className="sale-roof-title">屋根関係</div>
-        <div className="data-form-wrap">
-          {/* 건축 연수 - construction_year */}
-          <SelectBoxEtc column={'CONSTRUCTION_YEAR'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          {/* 지붕재 - roof_material */}
-          <div className="data-input-form-bx">
-            <MultiCheckEtc column={'ROOF_MATERIAL'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          </div>
-          {/* 지붕 모양 - roof_shape */}
-          <SelectBoxEtc column={'ROOF_SHAPE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          {/* 지붕 경사도 - roof_slope */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">屋根の斜面</div>
-            <div className="data-input flex">
-              <input
-                type="number"
-                step={0.1}
-                inputMode="decimal"
-                className="input-frame"
-                value={roofInfoData.ROOF_SLOPE ?? ''}
-                onChange={(e) => handleNumberInput('ROOF_SLOPE', e.target.value)}
-              />
-              <span>寸</span>
-            </div>
-          </div>
-          {/* 주택 구조 - house_structure */}
-          <RadioEtc column={'HOUSE_STRUCTURE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          {/* 서까래 재질 - rafter_material */}
-          <RadioEtc column={'RAFTER_MATERIAL'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          {/* 서까래 크기 - rafter_size */}
-          <SelectBoxEtc column={'RAFTER_SIZE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          {/* 서까래 피치 - rafter_pitch */}
-          <SelectBoxEtc column={'RAFTER_PITCH'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          {/* 서까래 방향 - rafter_direction */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit red-f">垂木の方向</div>
-            <div className="data-check-wrap mb0" id="rafter_direction">
-              <div className="radio-form-box">
-                <input
-                  type="radio"
-                  name="RAFTER_DIRECTION"
-                  id="RAFTER_DIRECTION_1"
-                  value={1}
-                  onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
-                  checked={roofInfoData.RAFTER_DIRECTION === '1'}
-                />
-                <label htmlFor="RAFTER_DIRECTION_1">垂直垂木</label>
-              </div>
-              <div className="radio-form-box">
-                <input
-                  type="radio"
-                  name="RAFTER_DIRECTION"
-                  id="RAFTER_DIRECTION_2"
-                  value={2}
-                  onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
-                  checked={roofInfoData.RAFTER_DIRECTION === '2'}
-                />
-                <label htmlFor="RAFTER_DIRECTION_2">水平垂木</label>
-              </div>
-            </div>
-          </div>
-          {/* 노지판 종류 - open_field_plate_kind */}
-          <SelectBoxEtc column={'OPEN_FIELD_PLATE_KIND'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          {/* 노지판 두께 - open_field_plate_thickness */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">
-              路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
-            </div>
-            <div className="data-input flex">
-              <input
-                type="number"
-                step={0.1}
-                inputMode="decimal"
-                className="input-frame"
-                value={roofInfoData.OPEN_FIELD_PLATE_THICKNESS ?? ''}
-                onChange={(e) => handleNumberInput('OPEN_FIELD_PLATE_THICKNESS', e.target.value)}
-              />
-              <span>mm</span>
-            </div>
-          </div>
-          {/* 누수 흔적 - leak_trace */}
-          <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="LEAK_TRACE"
-                  id="LEAK_TRACE_1"
-                  checked={roofInfoData.LEAK_TRACE === true}
-                  onChange={(e) => handleBooleanInput('LEAK_TRACE', true)}
-                />
-                <label htmlFor="LEAK_TRACE_1">あり</label>
-              </div>
-              <div className="radio-form-box">
-                <input
-                  type="radio"
-                  name="LEAK_TRACE"
-                  id="LEAK_TRACE_2"
-                  checked={roofInfoData.LEAK_TRACE === false}
-                  onChange={(e) => handleBooleanInput('LEAK_TRACE', false)}
-                />
-                <label htmlFor="LEAK_TRACE_2">なし</label>
-              </div>
-            </div>
-          </div>
-          {/* 방수재 종류 - waterproof_material */}
-          <RadioEtc column={'WATERPROOF_MATERIAL'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          {/* 단열재 유무 - insulation_presence */}
-          <RadioEtc column={'INSULATION_PRESENCE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          {/* 노지판 종류 - open_field_plate_kind */}
-          <SelectBoxEtc column={'STRUCTURE_ORDER'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          {/* 설치 가능 여부 - installation_availability */}
-          <SelectBoxEtc column={'INSTALLATION_AVAILABILITY'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
-          {/* 메모 - memo */}
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">メモ</div>
-            <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 className="data-input">
-              <textarea
-                className="textarea-form"
-                name="MEMO"
-                id="MEMO"
-                value={roofInfoData.MEMO ?? ''}
-                onChange={(e) => handleTextInput('MEMO', e.target.value)}
-                placeholder="例: 漏れの兆候があるため、正確な点検が必要です."
-              ></textarea>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/src/hooks/useSurvey.ts b/src/hooks/useSurvey.ts
index a047706..d07cddf 100644
--- a/src/hooks/useSurvey.ts
+++ b/src/hooks/useSurvey.ts
@@ -1,43 +1,39 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import type {
-  SurveyBasicInfo,
-  SurveyDetailInfo,
-  SurveyDetailRequest,
-  SurveyDetailCoverRequest,
-  SurveyRegistRequest,
-} from '@/types/Survey'
+import type { SurveyBasicInfo, SurveyDetailInfo, SurveyDetailRequest, SurveyDetailCoverRequest, SurveyRegistRequest } from '@/types/Survey'
 import { axiosInstance } from '@/libs/axios'
 import { useSurveyFilterStore } from '@/store/surveyFilterStore'
 import { queryStringFormatter } from '@/utils/common-utils'
 import { useSessionStore } from '@/store/session'
+import { useMemo } from 'react'
+import { AxiosResponse } from 'axios'
 
 const requiredFields = [
   {
-    field: 'INSTALLATION_SYSTEM',
+    field: 'installationSystem',
     name: '設置希望システム',
   },
   {
-    field: 'CONSTRUCTION_YEAR',
+    field: 'constructionYear',
     name: '建築年数',
   },
   {
-    field: 'RAFTER_SIZE',
+    field: 'rafterSize',
     name: '垂木サイズ',
   },
   {
-    field: 'RAFTER_PITCH',
+    field: 'rafterPitch',
     name: '垂木傾斜',
   },
   {
-    field: 'WATERPROOF_MATERIAL',
+    field: 'waterproofMaterial',
     name: '防水材',
   },
   {
-    field: 'INSULATION_PRESENCE',
+    field: 'insulationPresence',
     name: '断熱材有無',
   },
   {
-    field: 'STRUCTURE_ORDER',
+    field: 'structureOrder',
     name: '屋根構造の順序',
   },
 ]
@@ -60,9 +56,8 @@ type ZipCode = {
 }
 
 export function useServey(id?: number): {
-  surveyList: SurveyBasicInfo[] | []
+  surveyList: { data: SurveyBasicInfo[]; count: number } | {}
   surveyDetail: SurveyBasicInfo | null
-  surveyListCount: number
   isLoadingSurveyList: boolean
   isLoadingSurveyDetail: boolean
   isCreatingSurvey: boolean
@@ -75,15 +70,20 @@ export function useServey(id?: number): {
   submitSurvey: () => void
   validateSurveyDetail: (surveyDetail: SurveyDetailRequest) => string
   getZipCode: (zipCode: string) => Promise<ZipCode[] | null>
+  refetchSurveyList: () => void
 } {
   const queryClient = useQueryClient()
   const { keyword, searchOption, isMySurvey, sort, offset } = useSurveyFilterStore()
   const { session } = useSessionStore()
 
-  const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({
+  const {
+    data,
+    isLoading: isLoadingSurveyList,
+    refetch: refetchSurveyList,
+  } = useQuery({
     queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort, offset, session?.storeNm, session?.builderNo, session?.role],
     queryFn: async () => {
-      const resp = await axiosInstance(null).get<SurveyBasicInfo[]>('/api/survey-sales', {
+      const resp = await axiosInstance(null).get<{ data: SurveyBasicInfo[]; count: number }>('/api/survey-sales', {
         params: {
           keyword,
           searchOption,
@@ -97,7 +97,15 @@ export function useServey(id?: number): {
       })
       return resp.data
     },
+    enabled: session?.isLoggedIn,
   })
+  const surveyData = useMemo(() => {
+    if (!data) return {}
+    return {
+      data: data.data,
+      count: data.count,
+    }
+  }, [data])
 
   const { data: surveyDetail, isLoading: isLoadingSurveyDetail } = useQuery({
     queryKey: ['survey', id],
@@ -110,28 +118,10 @@ export function useServey(id?: number): {
     enabled: id !== undefined,
   })
 
-  const { data: surveyListCount } = useQuery({
-    queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort, session?.builderNo, session?.storeNm, session?.role],
-    queryFn: async () => {
-      const resp = await axiosInstance(null).get<number>('/api/survey-sales', {
-        params: {
-          keyword,
-          searchOption,
-          isMySurvey,
-          sort,
-          builderNo: session?.builderNo,
-          store: session?.storeNm,
-          role: session?.role,
-        },
-      })
-      return resp.data
-    },
-  })
-
   const { mutateAsync: createSurvey, isPending: isCreatingSurvey } = useMutation({
     mutationFn: async (survey: SurveyRegistRequest) => {
       const resp = await axiosInstance(null).post<SurveyBasicInfo>('/api/survey-sales', survey)
-      return resp.data.ID ?? 0
+      return resp.data.id ?? 0
     },
     onSuccess: (data) => {
       queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
@@ -190,7 +180,7 @@ export function useServey(id?: number): {
   })
 
   const validateSurveyDetail = (surveyDetail: SurveyDetailRequest) => {
-    const etcFields = ['INSTALLATION_SYSTEM', 'CONSTRUCTION_YEAR', 'RAFTER_SIZE', 'RAFTER_PITCH', 'WATERPROOF_MATERIAL', 'STRUCTURE_ORDER'] as const
+    const etcFields = ['installationSystem', 'constructionYear', 'rafterSize', 'rafterPitch', 'waterproofMaterial', 'structureOrder'] as const
 
     const emptyField = requiredFields.find((field) => {
       if (etcFields.includes(field.field as (typeof etcFields)[number])) {
@@ -202,9 +192,9 @@ export function useServey(id?: number): {
       }
     })
 
-    const contractCapacity = surveyDetail.CONTRACT_CAPACITY
+    const contractCapacity = surveyDetail.contractCapacity
     if (contractCapacity && contractCapacity.trim() !== '' && contractCapacity.split(' ')?.length === 1) {
-      return 'CONTRACT_CAPACITY_UNIT'
+      return 'contractCapacityUnit'
     }
 
     return emptyField?.name || ''
@@ -223,9 +213,8 @@ export function useServey(id?: number): {
   }
 
   return {
-    surveyList: surveyList || [],
-    surveyDetail: surveyDetail || null,
-    surveyListCount: surveyListCount || 0,
+    surveyList: surveyData,
+    surveyDetail: surveyDetail as SurveyBasicInfo | null,
     isLoadingSurveyList,
     isLoadingSurveyDetail,
     isCreatingSurvey,
@@ -238,5 +227,6 @@ export function useServey(id?: number): {
     submitSurvey,
     validateSurveyDetail,
     getZipCode,
+    refetchSurveyList,
   }
 }
diff --git a/src/libs/axios.ts b/src/libs/axios.ts
index 8718318..d973f9d 100644
--- a/src/libs/axios.ts
+++ b/src/libs/axios.ts
@@ -21,7 +21,10 @@ export const axiosInstance = (url: string | null | undefined) => {
   )
 
   instance.interceptors.response.use(
-    (response) => transferResponse(response),
+    (response) => {
+      response.data = transferResponse(response)
+      return response
+    },
     (error) => {
       // 에러 처리 로직
       return Promise.reject(error)
@@ -52,7 +55,7 @@ export const axiosInstance = (url: string | null | undefined) => {
 // )
 
 // response데이터가  array, object에 따라 분기하여 키 변환
-const transferResponse = (response: any) => {
+export const transferResponse = (response: any) => {
   if (!response.data) return response.data
 
   // 배열인 경우 각 객체의 키를 변환
@@ -80,7 +83,11 @@ const transformObjectKeys = (obj: any): any => {
 
   return obj
 }
-// snake case to camel case
-const snakeToCamel = (str: string): string => {
-  return str.replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', ''))
+
+export const camelToSnake = (str: string): string => {
+  return str.replace(/([A-Z])/g, (group) => `_${group.toLowerCase()}`)
+}
+
+const snakeToCamel = (str: string): string => {
+  return str.toLowerCase().replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', ''))
 }
diff --git a/src/types/Survey.ts b/src/types/Survey.ts
index 9030f21..36e7aa5 100644
--- a/src/types/Survey.ts
+++ b/src/types/Survey.ts
@@ -1,132 +1,132 @@
 export type SurveyBasicInfo = {
-  ID: number
-  REPRESENTATIVE: string
-  STORE: string | null
-  CONSTRUCTION_POINT: string | null
-  INVESTIGATION_DATE: string | null
-  BUILDING_NAME: string | null
-  CUSTOMER_NAME: string | null
-  POST_CODE: string | null
-  ADDRESS: string | null
-  ADDRESS_DETAIL: string | null
-  SUBMISSION_STATUS: boolean
-  SUBMISSION_DATE: string | null
-  DETAIL_INFO: SurveyDetailInfo | null
-  REG_DT: Date
-  UPT_DT: Date
+  id: number
+  representative: string
+  store: string | null
+  constructionPoint: string | null
+  investigationDate: string | null
+  buildingName: string | null
+  customerName: string | null
+  postCode: string | null
+  address: string | null
+  addressDetail: string | null
+  submissionStatus: boolean
+  submissionDate: string | null
+  detailInfo: SurveyDetailInfo | null
+  regDt: Date
+  uptDt: Date
 }
 
 export type SurveyDetailInfo = {
-  ID: number
-  BASIC_INFO_ID: number
-  CONTRACT_CAPACITY: string | null
-  RETAIL_COMPANY: string | null
-  SUPPLEMENTARY_FACILITIES: string | null // number 배열
-  SUPPLEMENTARY_FACILITIES_ETC: string | null
-  INSTALLATION_SYSTEM: string | null
-  INSTALLATION_SYSTEM_ETC: string | null
-  CONSTRUCTION_YEAR: string | null
-  CONSTRUCTION_YEAR_ETC: string | null
-  ROOF_MATERIAL: string | null // number 배열
-  ROOF_MATERIAL_ETC: string | null
-  ROOF_SHAPE: string | null
-  ROOF_SHAPE_ETC: string | null
-  ROOF_SLOPE: string | null
-  HOUSE_STRUCTURE: string | null
-  HOUSE_STRUCTURE_ETC: string | null
-  RAFTER_MATERIAL: string | null
-  RAFTER_MATERIAL_ETC: string | null
-  RAFTER_SIZE: string | null
-  RAFTER_SIZE_ETC: string | null
-  RAFTER_PITCH: string | null
-  RAFTER_PITCH_ETC: string | null
-  RAFTER_DIRECTION: string | null
-  OPEN_FIELD_PLATE_KIND: string | null
-  OPEN_FIELD_PLATE_KIND_ETC: string | null
-  OPEN_FIELD_PLATE_THICKNESS: string | null
-  LEAK_TRACE: boolean | null
-  WATERPROOF_MATERIAL: string | null
-  WATERPROOF_MATERIAL_ETC: string | null
-  INSULATION_PRESENCE: string | null
-  INSULATION_PRESENCE_ETC: string | null
-  STRUCTURE_ORDER: string | null
-  STRUCTURE_ORDER_ETC: string | null
-  INSTALLATION_AVAILABILITY: string | null
-  INSTALLATION_AVAILABILITY_ETC: string | null
-  MEMO: string | null
-  REG_DT: Date
-  UPT_DT: Date
+  id: number
+  basicInfoId: number
+  contractCapacity: string | null
+  retailCompany: string | null
+  supplementaryFacilities: string | null // number 배열
+  supplementaryFacilitiesEtc: string | null
+  installationSystem: string | null
+  installationSystemEtc: string | null
+  constructionYear: string | null
+  constructionYearEtc: string | null
+  roofMaterial: string | null // number 배열
+  roofMaterialEtc: string | null
+  roofShape: string | null
+  roofShapeEtc: string | null
+  roofSlope: string | null
+  houseStructure: string | null
+  houseStructureEtc: string | null
+  rafterMaterial: string | null
+  rafterMaterialEtc: string | null
+  rafterSize: string | null
+  rafterSizeEtc: string | null
+  rafterPitch: string | null
+  rafterPitchEtc: string | null
+  rafterDirection: string | null
+  openFieldPlateKind: string | null
+  openFieldPlateKindEtc: string | null
+  openFieldPlateThickness: string | null
+  leakTrace: boolean | null
+  waterproofMaterial: string | null
+  waterproofMaterialEtc: string | null
+  insulationPresence: string | null
+  insulationPresenceEtc: string | null
+  structureOrder: string | null
+  structureOrderEtc: string | null
+  installationAvailability: string | null
+  installationAvailabilityEtc: string | null
+  memo: string | null
+  regDt: Date
+  uptDt: Date
 }
 
 export type SurveyBasicRequest = {
-  REPRESENTATIVE: string
-  STORE: string | null
-  CONSTRUCTION_POINT: string | null
-  INVESTIGATION_DATE: string | null
-  BUILDING_NAME: string | null
-  CUSTOMER_NAME: string | null
-  POST_CODE: string | null
-  ADDRESS: string | null
-  ADDRESS_DETAIL: string | null
-  SUBMISSION_STATUS: boolean
-  SUBMISSION_DATE: string | null
+  representative: string
+  store: string | null
+  constructionPoint: string | null
+  investigationDate: string | null
+  buildingName: string | null
+  customerName: string | null
+  postCode: string | null
+  address: string | null
+  addressDetail: string | null
+  submissionStatus: boolean
+  submissionDate: string | null
 }
 
 export type SurveyDetailRequest = {
-  CONTRACT_CAPACITY: string | null
-  RETAIL_COMPANY: string | null
-  SUPPLEMENTARY_FACILITIES: string | null // number 배열
-  SUPPLEMENTARY_FACILITIES_ETC: string | null
-  INSTALLATION_SYSTEM: string | null
-  INSTALLATION_SYSTEM_ETC: string | null
-  CONSTRUCTION_YEAR: string | null
-  CONSTRUCTION_YEAR_ETC: string | null
-  ROOF_MATERIAL: string | null // number 배열
-  ROOF_MATERIAL_ETC: string | null
-  ROOF_SHAPE: string | null
-  ROOF_SHAPE_ETC: string | null
-  ROOF_SLOPE: string | null
-  HOUSE_STRUCTURE: string | null
-  HOUSE_STRUCTURE_ETC: string | null
-  RAFTER_MATERIAL: string | null
-  RAFTER_MATERIAL_ETC: string | null
-  RAFTER_SIZE: string | null
-  RAFTER_SIZE_ETC: string | null
-  RAFTER_PITCH: string | null
-  RAFTER_PITCH_ETC: string | null
-  RAFTER_DIRECTION: string | null
-  OPEN_FIELD_PLATE_KIND: string | null
-  OPEN_FIELD_PLATE_KIND_ETC: string | null
-  OPEN_FIELD_PLATE_THICKNESS: string | null
-  LEAK_TRACE: boolean | null
-  WATERPROOF_MATERIAL: string | null
-  WATERPROOF_MATERIAL_ETC: string | null
-  INSULATION_PRESENCE: string | null
-  INSULATION_PRESENCE_ETC: string | null
-  STRUCTURE_ORDER: string | null
-  STRUCTURE_ORDER_ETC: string | null
-  INSTALLATION_AVAILABILITY: string | null
-  INSTALLATION_AVAILABILITY_ETC: string | null
-  MEMO: string | null
+  contractCapacity: string | null
+  retailCompany: string | null
+  supplementaryFacilities: string | null // number 배열
+  supplementaryFacilitiesEtc: string | null
+  installationSystem: string | null
+  installationSystemEtc: string | null
+  constructionYear: string | null
+  constructionYearEtc: string | null
+  roofMaterial: string | null // number 배열
+  roofMaterialEtc: string | null
+  roofShape: string | null
+  roofShapeEtc: string | null
+  roofSlope: string | null
+  houseStructure: string | null
+  houseStructureEtc: string | null
+  rafterMaterial: string | null
+  rafterMaterialEtc: string | null
+  rafterSize: string | null
+  rafterSizeEtc: string | null
+  rafterPitch: string | null
+  rafterPitchEtc: string | null
+  rafterDirection: string | null
+  openFieldPlateKind: string | null
+  openFieldPlateKindEtc: string | null
+  openFieldPlateThickness: string | null
+  leakTrace: boolean | null
+  waterproofMaterial: string | null
+  waterproofMaterialEtc: string | null
+  insulationPresence: string | null
+  insulationPresenceEtc: string | null
+  structureOrder: string | null
+  structureOrderEtc: string | null
+  installationAvailability: string | null
+  installationAvailabilityEtc: string | null
+  memo: string | null
 }
 
 export type SurveyDetailCoverRequest = {
-  DETAIL_INFO: SurveyDetailRequest
+  detailInfo: SurveyDetailRequest
 }
 
 export type SurveyRegistRequest = {
-  REPRESENTATIVE: string
-  STORE: string | null
-  CONSTRUCTION_POINT: string | null
-  INVESTIGATION_DATE: string | null
-  BUILDING_NAME: string | null
-  CUSTOMER_NAME: string | null
-  POST_CODE: string | null
-  ADDRESS: string | null
-  ADDRESS_DETAIL: string | null
-  SUBMISSION_STATUS: boolean
-  SUBMISSION_DATE: string | null
-  DETAIL_INFO: SurveyDetailRequest | null
+  representative: string
+  store: string | null
+  constructionPoint: string | null
+  investigationDate: string | null
+  buildingName: string | null
+  customerName: string | null
+  postCode: string | null
+  address: string | null
+  addressDetail: string | null
+  submissionStatus: boolean
+  submissionDate: string | null
+  detailInfo: SurveyDetailRequest | null
 }
 
 export type Mode = 'CREATE' | 'EDIT' | 'READ' | 'TEMP' // 등록 | 수정 | 상세 | 임시저장