feat: add Survey new Design Component

Reviewed-on: #36

src/app/api/survey-sales/route.ts

@@ -16,7 +16,7 @@ type SearchParams = {
 }
 
 type WhereCondition = {
-  AND?: any[]
+  AND: any[]
   OR?: any[]
   [key: string]: any
 }
@@ -43,7 +43,7 @@ const ITEMS_PER_PAGE = 10
  * @returns 검색 조건 객체
  */
 const createKeywordSearchCondition = (keyword: string, searchOption: string): WhereCondition => {
-  const where: WhereCondition = {}
+  const where: WhereCondition = { AND: [] }
 
   if (searchOption === 'all') {
     // 모든 필드 검색 시 OR 조건 사용
@@ -74,7 +74,6 @@ const createKeywordSearchCondition = (keyword: string, searchOption: string): Wh
       where.ID = { equals: null }
     }
   }
-
   return where
 }
 
@@ -105,21 +104,18 @@ const createMemberRoleCondition = (params: SearchParams): WhereCondition => {
           AND: [
             { STORE: { equals: params.store } },
             {
-              OR: [
-                { CONSTRUCTION_POINT: { equals: null } },
-                { CONSTRUCTION_POINT: { equals: '' } }
-              ]
-            }
-          ]
+              OR: [{ CONSTRUCTION_POINT: { equals: null } }, { CONSTRUCTION_POINT: { equals: '' } }],
+            },
+          ],
         },
         {
           AND: [
             { STORE: { equals: params.store } },
             { CONSTRUCTION_POINT: { not: null } },
             { CONSTRUCTION_POINT: { not: '' } },
-            { SUBMISSION_STATUS: { equals: true } }
-          ]
-        }
+            { SUBMISSION_STATUS: { equals: true } },
+          ],
+        },
       ]
       break
 
@@ -159,20 +155,23 @@ export async function GET(request: Request) {
     }
 
     // 검색 조건 구성
-    const where: WhereCondition = {}
+    const where: WhereCondition = { AND: [] }
 
     // 내가 작성한 매물 조건 적용
     if (params.isMySurvey) {
-      where.REPRESENTATIVE = params.isMySurvey
+      where.AND.push({ REPRESENTATIVE: params.isMySurvey })
     }
 
     // 키워드 검색 조건 적용
     if (params.keyword && params.searchOption) {
-      Object.assign(where, createKeywordSearchCondition(params.keyword, params.searchOption))
+      where.AND.push(createKeywordSearchCondition(params.keyword, params.searchOption))
     }
 
     // 회원 유형 조건 적용
-    Object.assign(where, createMemberRoleCondition(params))
+    const roleCondition = createMemberRoleCondition(params)
+    if (Object.keys(roleCondition).length > 0) {
+      where.AND.push(roleCondition)
+    }
 
     // 데이터 조회 또는 카운트
     if (params.offset) {

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

@@ -1,10 +1,29 @@
 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 />
+      {/* <DetailForm surveyInfo={surveyInfo} mode="READ" /> */}
     </>
   )
 }

src/app/survey-sale/basic-info/page.tsx

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

src/app/survey-sale/layout.tsx

@@ -9,10 +9,7 @@ export default function layout({ children, navTab }: SurveySaleLayoutProps) {
   return (
     <>
       <div className="container">
-        <div className="sale-contents">
-          {navTab}
-          {children}
-        </div>
+        <div className="sale-contents">{children}</div>
       </div>
     </>
   )

src/app/survey-sale/regist/page.tsx

@@ -1,9 +1,10 @@
-import RegistForm from '@/components/survey-sale/temp/registForm'
+// import RegistForm from '@/components/survey-sale/temp/registForm'
+import RegistForm from '@/components/survey-sale/RegistForm'
 
 export default function RegistPage() {
   return (
     <>
-      <RegistForm />
+      <RegistForm/>
     </>
   )
 }

src/app/survey-sale/roof-info/page.tsx

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

src/components/survey-sale/RegistForm.tsx

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

src/components/survey-sale/detail/BasicForm.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useSurveySaleTabState } from '@/store/surveySaleTabState'
+import { SurveyBasicRequest } from '@/types/Survey'
+import { Mode } from 'fs'
+
+export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBasicInfo: (basicInfo: SurveyBasicRequest) => void; mode: Mode }) {
+  const { basicInfo, setBasicInfo, mode } = props
+  const { setBasicInfoSelected } = useSurveySaleTabState()
+  const [isFlip, setIsFlip] = useState<boolean>(true)
+
+  useEffect(() => {
+    setBasicInfoSelected()
+  }, [])
+
+  return (
+    <>
+      <div className={`sale-detail-toggle-bx ${isFlip ? 'act' : ''}`}>
+        <div className="sale-detail-toggle-head" onClick={() => setIsFlip(!isFlip)}>
+          <div className="sale-detail-toggle-name">基本情報</div>
+          <div className="sale-detail-toggle-btn-wrap">
+            <button className="sale-detail-toggle-btn"></button>
+          </div>
+        </div>
+        <div className="sale-detail-toggle-cont">
+          <div className="sale-frame">
+            <div className="data-form-wrap">
+              <div className="data-input-form-bx">
+                <div className="data-input-form-tit">担当者名</div>
+                <input
+                  type="text"
+                  className="input-frame"
+                  readOnly={mode === 'READ'}
+                  value={basicInfo?.REPRESENTATIVE ?? ''}
+                  onChange={(e) => setBasicInfo({ ...basicInfo, REPRESENTATIVE: e.target.value })}
+                />
+              </div>
+              <div className="data-input-form-bx">
+                <div className="data-input-form-tit">販売店</div>
+                <input
+                  type="text"
+                  className="input-frame"
+                  readOnly={mode === 'READ'}
+                  value={basicInfo?.STORE ?? ''}
+                  onChange={(e) => setBasicInfo({ ...basicInfo, STORE: e.target.value })}
+                />
+              </div>
+              <div className="data-input-form-bx">
+                <div className="data-input-form-tit">施工店</div>
+                <input
+                  type="text"
+                  className="input-frame"
+                  readOnly={mode === 'READ'}
+                  value={basicInfo?.CONSTRUCTION_POINT ?? ''}
+                  onChange={(e) => setBasicInfo({ ...basicInfo, 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>
+                {['CREATE', 'EDIT'].includes(mode as 'CREATE' | 'EDIT') ? (
+                  <div className="date-input">
+                    <button className="date-btn">
+                      <i className="date-icon"></i>
+                    </button>
+                    <input type="date" className="date-frame" readOnly defaultValue={basicInfo?.INVESTIGATION_DATE?.toString()} />
+                  </div>
+                ) : (
+                  <input type="date" className="input-frame" disabled defaultValue={basicInfo?.INVESTIGATION_DATE?.toString()} />
+                )}
+              </div>
+              <div className="data-input-form-bx">
+                {/* 건물명 */}
+                <div className="data-input-form-tit">建物名</div>
+                <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.BUILDING_NAME ?? ''} />
+              </div>
+              <div className="data-input-form-bx">
+                {/* 고객명 */}
+                <div className="data-input-form-tit">建物名</div>
+                <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.CUSTOMER_NAME ?? ''} />
+              </div>
+              <div className="data-input-form-bx">
+                <div className="data-input-form-tit">郵便番号/都道府県</div>
+                <div className="form-flex">
+                  {/* 우편번호 */}
+                  <div className="form-bx">
+                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.POST_CODE ?? ''} disabled />
+                  </div>
+                  {/* 도도부현 */}
+                  <div className="form-bx">
+                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.ADDRESS ?? ''} disabled />
+                  </div>
+                </div>
+                {/* 주소 */}
+                <div className="form-btn">
+                  <button className="btn-frame n-blue icon">
+                    郵便番号<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" defaultValue={'浜松 浜松町'} readOnly={mode === 'READ'} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/survey-sale/detail/ButtonForm.tsx

@@ -0,0 +1,81 @@
+import { Mode, SurveyBasicRequest, SurveyDetailRequest } from '@/types/Survey'
+
+export default function ButtonForm(props: { mode: Mode; setMode: (mode: Mode) => void; data: { basic: SurveyBasicRequest; roof: SurveyDetailRequest } }) {
+  const { mode, setMode } = props
+  return (
+    <>
+      {mode === 'CREATE' && (
+        <div className="sale-form-btn-wrap">
+          <div className="btn-flex-wrap">
+            <div className="btn-bx">
+              {/* 임시저장 */}
+              <button className="btn-frame n-blue icon" onClick={() => setMode('TEMP')}>
+                一時保存<i className="btn-arr"></i>
+              </button>
+            </div>
+            <div className="btn-bx">
+              {/* 저장 */}
+              <button className="btn-frame red icon">
+                保存<i className="btn-arr"></i>
+              </button>
+            </div>
+            <div className="btn-bx">
+              {/* 목록 */}
+              <button className="btn-frame n-blue icon">
+                リスト<i className="btn-arr"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+      {mode === 'TEMP' && (
+        <div className="sale-form-btn-wrap">
+          <div className="btn-flex-wrap">
+            <div className="btn-bx">
+              {/* 수정 */}
+              <button className="btn-frame n-blue icon" onClick={() => setMode('EDIT')}>
+                修正<i className="btn-arr"></i>
+              </button>
+            </div>
+            <div className="btn-bx">
+              {/* 삭제 */}
+              <button className="btn-frame n-blue icon">
+                削除<i className="btn-arr"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+      {mode === 'EDIT' && (
+        <div className="sale-form-btn-wrap">
+          <div className="btn-flex-wrap">
+            <div className="btn-bx">
+              {/* 목록 */}
+              <button className="btn-frame n-blue icon">
+                リスト<i className="btn-arr"></i>
+              </button>
+            </div>
+            <div className="btn-bx">
+              {/* 제출 */}
+              <button className="btn-frame red icon">
+                提出<i className="btn-arr"></i>
+              </button>
+            </div>
+            <div className="btn-bx">
+              {/* 수정 */}
+              <button className="btn-frame n-blue icon" onClick={() => setMode('EDIT')}>
+                修正<i className="btn-arr"></i>
+              </button>
+            </div>
+            <div className="btn-bx">
+              {/* 삭제 */}
+              <button className="btn-frame n-blue icon">
+                削除<i className="btn-arr"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

src/components/survey-sale/detail/DataTable.tsx

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

src/components/survey-sale/detail/DetailForm.tsx

@@ -1,53 +1,102 @@
 'use client'
 
-import DetailButton from './DetailButton'
-import { SurveyBasicInfo } from '@/types/Survey'
+import { Mode, SurveyBasicInfo, SurveyBasicRequest, SurveyDetailRequest } from '@/types/Survey'
+import { useEffect, useState } from 'react'
+import ButtonForm from './ButtonForm'
+import BasicForm from './BasicForm'
+import RoofForm from './RoofForm'
+const roofInfoForm: SurveyDetailRequest = {
+  CONTRACT_CAPACITY: null,
+  RETAIL_COMPANY: null,
+  SUPPLEMENTARY_FACILITIES: null,
+  SUPPLEMENTARY_FACILITIES_ETC: null,
+  INSTALLATION_SYSTEM: null,
+  INSTALLATION_SYSTEM_ETC: null,
+  CONSTRUCTION_YEAR: null,
+  CONSTRUCTION_YEAR_ETC: null,
+  ROOF_MATERIAL: null,
+  ROOF_MATERIAL_ETC: null,
+  ROOF_SHAPE: null,
+  ROOF_SHAPE_ETC: null,
+  ROOF_SLOPE: null,
+  HOUSE_STRUCTURE: '1',
+  HOUSE_STRUCTURE_ETC: null,
+  RAFTER_MATERIAL: '1',
+  RAFTER_MATERIAL_ETC: null,
+  RAFTER_SIZE: null,
+  RAFTER_SIZE_ETC: null,
+  RAFTER_PITCH: null,
+  RAFTER_PITCH_ETC: null,
+  RAFTER_DIRECTION: '1',
+  OPEN_FIELD_PLATE_KIND: null,
+  OPEN_FIELD_PLATE_KIND_ETC: null,
+  OPEN_FIELD_PLATE_THICKNESS: null,
+  LEAK_TRACE: false,
+  WATERPROOF_MATERIAL: null,
+  WATERPROOF_MATERIAL_ETC: null,
+  INSULATION_PRESENCE: '1',
+  INSULATION_PRESENCE_ETC: null,
+  STRUCTURE_ORDER: null,
+  STRUCTURE_ORDER_ETC: null,
+  INSTALLATION_AVAILABILITY: null,
+  INSTALLATION_AVAILABILITY_ETC: null,
+  MEMO: null,
+}
 
-export default function DetailForm({
-  surveyDetail,
-  isLoadingSurveyDetail,
-}: {
-  surveyDetail: SurveyBasicInfo | null
-  isLoadingSurveyDetail: boolean
-}) {
-  if (isLoadingSurveyDetail) {
-    return <div>Loading...</div>
+const basicInfoForm: SurveyBasicRequest = {
+  REPRESENTATIVE: '',
+  STORE: null,
+  CONSTRUCTION_POINT: null,
+  INVESTIGATION_DATE: new Date().toLocaleDateString('en-CA'),
+  BUILDING_NAME: null,
+  CUSTOMER_NAME: null,
+  POST_CODE: null,
+  ADDRESS: null,
+  ADDRESS_DETAIL: null,
+  SUBMISSION_STATUS: false,
+  SUBMISSION_DATE: null,
+}
+
+export default function DetailForm(props: { surveyInfo?: SurveyBasicInfo; mode?: Mode }) {
+  const [mode, setMode] = useState<Mode>(props.mode ?? 'CREATE')
+  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
+      setBasicInfoData(rest)
+      if (DETAIL_INFO) {
+        const { ID, UPT_DT, REG_DT, BASIC_INFO_ID, ...rest } = DETAIL_INFO
+        setRoofInfoData(rest)
+      }
+    }
+  }, [props.surveyInfo, mode])
+
+  const data = {
+    basic: basicInfoData,
+    roof: roofInfoData,
   }
+
+  const buttonFormProps = { mode, setMode, data }
+
   return (
     <>
-      <div className="sale-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" disabled defaultValue={surveyDetail?.REPRESENTATIVE} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">販売店</div>
-            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.STORE ?? ''} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">施工店</div>
-            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.CONSTRUCTION_POINT ?? ''} />
-          </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>
-            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.INVESTIGATION_DATE ?? ''} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建物名</div>
-            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.BUILDING_NAME ?? ''} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">顧客名</div>
-            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.CUSTOMER_NAME ?? ''} />
-          </div>
-        </div>
-        <DetailButton surveyDetail={surveyDetail ?? null} />
+      <div className="sale-detail-toggle-wrap">
+        {/* {mode} */}
+        {/* 기본정보 */}
+        <BasicForm basicInfo={basicInfoData} setBasicInfo={setBasicInfoData} mode={mode} />
+        {/* 전기/지붕정보 */}
+        <RoofForm roofInfo={roofInfoData} setRoofInfo={setRoofInfoData} mode={mode} />
+        <ButtonForm {...buttonFormProps} />
       </div>
     </>
   )

src/components/survey-sale/detail/RoofForm.tsx

@@ -0,0 +1,332 @@
+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'
+
+export default function RoofForm(props: {
+  roofInfo: SurveyDetailRequest | SurveyDetailInfo
+  setRoofInfo: (roofInfo: SurveyDetailRequest) => void
+  mode: Mode
+}) {
+  const makeNumArr = (value: string) => {
+    return value
+      .split(',')
+      .map((v) => v.trim())
+      .filter((v) => v.length > 0)
+  }
+  const { roofInfo, setRoofInfo, mode } = props
+  const [isFlip, setIsFlip] = useState<boolean>(true)
+  return (
+    <div className={`sale-detail-toggle-bx ${isFlip ? 'act' : ''}`}>
+      <div className="sale-detail-toggle-head" onClick={() => setIsFlip(!isFlip)}>
+        <div className="sale-detail-toggle-name">電気 / 屋根情報</div>
+        <div className="sale-detail-toggle-btn-wrap">
+          <button className="sale-detail-toggle-btn"></button>
+        </div>
+      </div>
+      <div className="sale-detail-toggle-cont">
+        <div className="sale-frame">
+          {/* 전기 관계 */}
+          <div className="sale-roof-title">電気関係</div>
+          <div className="data-form-wrap">
+            <div className="data-input-form-bx">
+              {/* 전기 계약 용량 */}
+              <div className="data-input-form-tit">電気契約容量</div>
+              <div className="data-input mb5">
+                <input type="text" className="input-frame" value={roofInfo?.CONTRACT_CAPACITY ?? ''} readOnly={mode === 'READ'} />
+              </div>
+              {mode === 'READ' && <input type="text" className="input-frame" defaultValue={'10'} readOnly={mode === 'READ'} />}
+              {mode !== 'READ' && (
+                <div className="data-input">
+                  <select className="select-form" name="" id="">
+                    <option value="">kVA</option>
+                    <option value="">kVA</option>
+                    <option value="">kVA</option>
+                    <option value="">kVA</option>
+                    <option value="">kVA</option>
+                  </select>
+                </div>
+              )}
+            </div>
+            <div className="data-input-form-bx">
+              {/* 전기 소매 회사사 */}
+              <div className="data-input-form-tit">電気小売会社</div>
+              <input type="text" className="input-frame" value={roofInfo?.RETAIL_COMPANY ?? ''} readOnly={mode === 'READ'} />
+            </div>
+            <div className="data-input-form-bx">
+              {/* 전기 부대 설비 */}
+              <div className="data-input-form-tit">
+                電気袋設備<span>※複数選択可能</span>
+              </div>
+              <div className="data-check-wrap">
+                {/* <div className="check-form-box">
+                  <input type="checkbox" id="ch01" readOnly={mode === 'READ'} />
+                  <label htmlFor="ch01">エコキュート</label>
+                </div> */}
+                {supplementary_facilities.map((item) => (
+                  <div className="check-form-box" key={item.id}>
+                    <input
+                      type="checkbox"
+                      id={`${item.id}`}
+                      checked={makeNumArr(roofInfo?.SUPPLEMENTARY_FACILITIES ?? '').includes(String(item.id))}
+                      readOnly={mode === 'READ'}
+                    />
+                    <label htmlFor={`${item.id}`}>{item.name}</label>
+                  </div>
+                ))}
+                <div className="check-form-box">
+                  <input type="checkbox" id={`supplementary_facilities_etc`} checked={roofInfo?.SUPPLEMENTARY_FACILITIES_ETC !== null} readOnly />
+                  <label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label>
+                </div>
+              </div>
+              <div className="data-input">
+                <input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.SUPPLEMENTARY_FACILITIES_ETC ?? ''} />
+              </div>
+            </div>
+            <div className="data-input-form-bx">
+              {/* 설치 희망 시스템 */}
+              {/* <div className="data-input-form-tit red-f">設置希望システム</div>
+              {mode === 'READ' && (
+                <div className="data-input">
+                  <input type="text" className="input-frame" defaultValue={''} disabled />
+                </div>
+              )}
+              {mode !== 'READ' && (
+                <div className="data-input mb5">
+                  <select className="select-form" name="" id="">
+                    <option value="">太陽光発電</option>
+                    <option value="">太陽光発電</option>
+                    <option value="">太陽光発電</option>
+                    <option value="">太陽光発電</option>
+                    <option value="">太陽光発電</option>
+                  </select>
+                </div>
+              )} */}
+              <div className="data-input-form-tit">設置希望システム</div>
+              <SelectedBox column="INSTALLATION_SYSTEM" detailInfoData={roofInfo as SurveyDetailInfo} />
+            </div>
+          </div>
+        </div>
+        <div className="sale-frame">
+          {/* 지붕 관계 */}
+          <div className="sale-roof-title">屋根関係</div>
+          <div className="data-form-wrap">
+            <div className="data-input-form-bx">
+              {/* 건축 연수 */}
+              <div className="data-input-form-tit red-f">建築研修</div>
+              <div className="data-input mb5">
+                {/* {mode === 'READ' && <input type="text" className="input-frame" defaultValue={''} disabled />}
+                {mode !== 'READ' && (
+                  <select className="select-form" name="" id="">
+                    <option value="">新築</option>
+                    <option value="">新築</option>
+                    <option value="">新築</option>
+                    <option value="">新築</option>
+                    <option value="">新築</option>
+                  </select>
+                )} */}
+                <SelectedBox column="CONSTRUCTION_YEAR" detailInfoData={roofInfo as SurveyDetailInfo} />
+              </div>
+              {/* <div className="data-input flex">
+                <input type="text" className="input-frame" defaultValue={''} disabled />
+                <span>年</span>
+              </div> */}
+            </div>
+            <div className="data-input-form-bx">
+              {/* 지붕재 */}
+              <div className="data-input-form-tit">
+                屋根材<span>※最大2個まで選択可能</span>
+              </div>
+              <div className="data-check-wrap">
+                {roof_material.map((item) => (
+                  <div className="check-form-box" key={item.id}>
+                    <input type="checkbox" id={`${item.id}`} checked={makeNumArr(roofInfo?.ROOF_MATERIAL ?? '').includes(String(item.id))} readOnly />
+                    <label htmlFor={`${item.id}`}>{item.name}</label>
+                  </div>
+                ))}
+                <div className="check-form-box">
+                  <input type="checkbox" id={`roof_material_etc`} checked={roofInfo?.ROOF_MATERIAL_ETC !== null} readOnly />
+                  <label htmlFor={`roof_material_etc`}>その他 (直接入力)</label>
+                </div>
+              </div>
+              <div className="data-input">
+                <input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.ROOF_MATERIAL_ETC ?? ''} />
+              </div>
+            </div>
+            <div className="data-input-form-bx">
+              {/* 지붕 모양 */}
+              <div className="data-input-form-tit">建築研修</div>
+              <div className="data-input mb5">
+                {/* {mode === 'READ' && <input type="text" className="input-frame" defaultValue={''} disabled />}
+                {mode !== 'READ' && (
+                  <select className="select-form" name="" id="">
+                    <option value="">太陽光発電</option>
+                    <option value="">太陽光発電</option>
+                    <option value="">太陽光発電</option>
+                    <option value="">太陽光発電</option>
+                    <option value="">太陽光発電</option>
+                  </select>
+                )} */}
+                <SelectedBox column="ROOF_SHAPE" detailInfoData={roofInfo as SurveyDetailInfo} />
+              </div>
+              <div className="data-input">
+                <input type="text" className="input-frame" defaultValue={''} disabled />
+              </div>
+            </div>
+            <div className="data-input-form-bx">
+              {/* 지붕 경사도도 */}
+              <div className="data-input-form-tit">屋根の斜面</div>
+              <div className="data-input flex">
+                <input type="text" className="input-frame" value={roofInfo?.ROOF_SLOPE ?? ''} 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} />
+            </div>
+            <div className="data-input-form-bx">
+              {/* 서까래 재질 */}
+              <div className="data-input-form-tit">垂木材質</div>
+              <RadioSelected column="RAFTER_MATERIAL" detailInfoData={roofInfo as SurveyDetailInfo} />
+            </div>
+            <div className="data-input-form-bx">
+              {/* 서까래 크기 */}
+              <div className="data-input-form-tit red-f">垂木サイズ</div>
+              <div className="data-input mb5">
+                <SelectedBox column="RAFTER_SIZE" detailInfoData={roofInfo as SurveyDetailInfo} />
+              </div>
+            </div>
+            <div className="data-input-form-bx">
+              {/* 서까래 피치 */}
+              <div className="data-input-form-tit red-f">垂木サイズ</div>
+              <div className="data-input mb5">
+                <SelectedBox column="RAFTER_PITCH" detailInfoData={roofInfo as SurveyDetailInfo} />
+              </div>
+            </div>
+            <div className="data-input-form-bx">
+              {/* 서까래 방향 */}
+              <div className="data-input-form-tit red-f">垂木の方向</div>
+              <div className="data-check-wrap mb0">
+                <RadioSelected column="RAFTER_DIRECTION" detailInfoData={roofInfo as SurveyDetailInfo} />
+              </div>
+            </div>
+            <div className="data-input-form-bx">
+              {/* 노지판 종류류 */}
+              <div className="data-input-form-tit">路地板の種類</div>
+              <div className="data-input mb5">
+                <SelectedBox column="OPEN_FIELD_PLATE_KIND" detailInfoData={roofInfo as SurveyDetailInfo} />
+              </div>
+            </div>
+            <div className="data-input-form-bx">
+              {/* 노지판 두께 */}
+              <div className="data-input-form-tit">
+                路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
+              </div>
+              <div className="data-input flex">
+                <input type="text" className="input-frame" value={roofInfo?.OPEN_FIELD_PLATE_THICKNESS ?? ''} readOnly={mode === 'READ'} />
+                <span>mm</span>
+              </div>
+            </div>
+            <div className="data-input-form-bx">
+              {/* 누수 흔적 */}
+              <div className="data-input-form-tit ">水漏れの痕跡</div>
+              <div className="data-check-wrap mb0">
+                <RadioSelected column="LEAK_TRACE" detailInfoData={roofInfo as SurveyDetailInfo} />
+              </div>
+            </div>
+            <div className="data-input-form-bx">
+              {/* 방수재 종류 */}
+              <div className="data-input-form-tit red-f">防水材の種類</div>
+              <RadioSelected column="WATERPROOF_MATERIAL" 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} />
+            </div>
+            <div className="data-input-form-bx">
+              {/* 지붕 구조의 순서 */}
+              <div className="data-input-form-tit red-f">屋根構造の順序</div>
+              <SelectedBox column="STRUCTURE_ORDER" detailInfoData={roofInfo as SurveyDetailInfo} />
+            </div>
+            <div className="data-input-form-bx">
+              {/* 지붕 제품명 설치 가능 여부 확인 */}
+              <div className="data-input-form-tit">屋根製品名 設置可否確認</div>
+              <SelectedBox column="INSTALLATION_AVAILABILITY" detailInfoData={roofInfo as SurveyDetailInfo} />
+            </div>
+            <div className="data-input-form-bx">
+              {/* 메모 */}
+              <div className="data-input-form-tit">メモ</div>
+              <div className="data-input">
+                <textarea
+                  className="textarea-form"
+                  name=""
+                  id=""
+                  placeholder="TextArea Filed"
+                  value={roofInfo?.MEMO ?? ''}
+                  readOnly={mode === 'READ'}
+                ></textarea>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo }) => {
+  const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
+  const etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
+
+  return (
+    <>
+      <select className="select-form mb10" name={column} id={column} disabled value={selectedId ? 'selected' : etcValue ? 'etc' : ''}>
+        <option value="">-</option>
+        <option value="etc">その他 (直接入力)</option>
+        <option value="selected">{selectBoxOptions[column as keyof typeof selectBoxOptions][Number(selectedId)]?.name}</option>
+      </select>
+      {etcValue && <input type="text" className="input-frame" readOnly value={etcValue.toString()} />}
+    </>
+  )
+}
+
+const RadioSelected = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
+  let selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
+  if (column === 'LEAK_TRACE') {
+    selectedId = Number(selectedId)
+    if (!selectedId) selectedId = 2
+  }
+
+  let etcValue = null
+  if (column !== 'RAFTER_DIRECTION') {
+    etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
+  }
+  const etcChecked = etcValue !== null && etcValue !== undefined && etcValue !== ''
+
+  console.log('column: selectedId', column, selectedId)
+  return (
+    <>
+      {radioEtcData[column as keyof typeof radioEtcData].map((item) => (
+        <div className="radio-form-box mb10" key={item.id}>
+          <input type="radio" name={column} id={`${item.id}`} disabled checked={Number(selectedId) === item.id} />
+          <label htmlFor={`${item.id}`}>{item.label}</label>
+        </div>
+      ))}
+      {column !== 'RAFTER_DIRECTION' && column !== 'LEAK_TRACE' && column !== 'INSULATION_PRESENCE' && (
+        <div className="radio-form-box mb10">
+          <input type="radio" name={column} id={`${column}_ETC`} value="etc" disabled checked={etcChecked} />
+          <label htmlFor={`${column}_ETC`}>その他 (直接入力)</label>
+        </div>
+      )}
+      {etcChecked && (
+        <div className="data-input">
+          <input type="text" className="input-frame" placeholder="-" readOnly value={etcValue?.toString() ?? ''} />
+        </div>
+      )}
+    </>
+  )
+}

src/components/survey-sale/detail/my/roofDetailForm.tsx

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

src/components/survey-sale/detail/my/roofInfoForm.tsx

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

src/components/survey-sale/list/ListTable.tsx

@@ -19,22 +19,26 @@ export default function ListTable() {
   const { session } = useSessionStore()
 
   useEffect(() => {
-    if (surveyList && surveyList.length > 0) {
+    if (surveyList) {
       if (offset === 0) {
         setHeldSurveyList(surveyList)
       } else {
-        const remainingList = heldSurveyList.slice(offset, offset + 10)
-        if (JSON.stringify(remainingList) !== JSON.stringify(surveyList)) {
-          setHeldSurveyList((prev) => [...prev, ...surveyList])
-        }
+        setHeldSurveyList(prev => [...prev, ...surveyList])
       }
       setHasMore(surveyListCount > offset + 10)
+    } else {
+      setHeldSurveyList([])
+      setHasMore(false)
     }
-  }, [surveyList, surveyListCount, offset, session?.role])
+  }, [surveyList, surveyListCount, offset])
+
+  console.log('surveyList:: ', surveyList)
+  console.log('heldSurveyList:: ', heldSurveyList)
 
   const handleDetailClick = (id: number) => {
     router.push(`/survey-sale/${id}`)
   }
+
   const handleItemsInit = () => {
     setHeldSurveyList([])
     setOffset(0)

src/components/survey-sale/list/SearchForm.tsx

@@ -17,7 +17,7 @@ export default function SearchForm({ onItemsInit, memberRole, userId }: { onItem
     }
     setKeyword(searchKeyword)
     setSearchOption(option)
-    onItemsInit()
+    // onItemsInit()
   }
   const searchOptions = memberRole === 'Partner' ? SEARCH_OPTIONS_PARTNERS : SEARCH_OPTIONS
 
@@ -38,7 +38,7 @@ export default function SearchForm({ onItemsInit, memberRole, userId }: { onItem
             if (e.target.value === 'all') {
               setKeyword('')
               setSearchKeyword('')
-              onItemsInit()
+              // onItemsInit()
               setSearchOption('all')
               setOption('all')
             } else {
@@ -80,7 +80,7 @@ export default function SearchForm({ onItemsInit, memberRole, userId }: { onItem
             checked={isMySurvey === userId}
             onChange={() => {
               setIsMySurvey(isMySurvey === userId ? null : userId)
-              onItemsInit()
+              // onItemsInit()
             }}
           />
           <label htmlFor="ch01">私が書いた物件</label>
@@ -94,7 +94,7 @@ export default function SearchForm({ onItemsInit, memberRole, userId }: { onItem
           value={sort}
           onChange={(e) => {
             setSort(e.target.value as 'created' | 'updated')
-            onItemsInit()
+            // onItemsInit()
           }}
         >
           <option value="created">最近の登録日</option>

src/types/Survey.ts

@@ -128,3 +128,5 @@ export type SurveyRegistRequest = {
   SUBMISSION_DATE: string | null
   DETAIL_INFO: SurveyDetailRequest | null
 }
+
+export type Mode = 'CREATE' | 'EDIT' | 'READ' | 'TEMP' // 등록 | 수정 | 상세 | 임시저장