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 = { AND: [] }
+  const where: WhereCondition = {}
 
   if (searchOption === 'all') {
     // 모든 필드 검색 시 OR 조건 사용
@@ -74,6 +74,7 @@ const createKeywordSearchCondition = (keyword: string, searchOption: string): Wh
       where.ID = { equals: null }
     }
   }
+
   return where
 }
 
@@ -104,18 +105,21 @@ 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
 
@@ -155,23 +159,20 @@ export async function GET(request: Request) {
     }
 
     // 검색 조건 구성
-    const where: WhereCondition = { AND: [] }
+    const where: WhereCondition = {}
 
     // 내가 작성한 매물 조건 적용
     if (params.isMySurvey) {
-      where.AND.push({ REPRESENTATIVE: params.isMySurvey })
+      where.REPRESENTATIVE = params.isMySurvey
     }
 
     // 키워드 검색 조건 적용
     if (params.keyword && params.searchOption) {
-      where.AND.push(createKeywordSearchCondition(params.keyword, params.searchOption))
+      Object.assign(where, createKeywordSearchCondition(params.keyword, params.searchOption))
     }
 
     // 회원 유형 조건 적용
-    const roleCondition = createMemberRoleCondition(params)
-    if (Object.keys(roleCondition).length > 0) {
-      where.AND.push(roleCondition)
-    }
+    Object.assign(where, createMemberRoleCondition(params))
 
     // 데이터 조회 또는 카운트
     if (params.offset) {

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

@@ -1,29 +1,10 @@
 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/my/basicForm'
+import BasicForm from '@/components/survey-sale/detail/form/BasicForm'
 
 export default function page() {
   return (

src/app/survey-sale/layout.tsx

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

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

@@ -1,10 +1,9 @@
-// import RegistForm from '@/components/survey-sale/temp/registForm'
-import RegistForm from '@/components/survey-sale/RegistForm'
+import RegistForm from '@/components/survey-sale/temp/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/my/roofInfoForm'
+import RoofInfoForm from '@/components/survey-sale/detail/form/RoofInfoForm'
 
 export default function page() {
   return (

src/components/survey-sale/RegistForm.tsx

@@ -1,29 +0,0 @@
-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

@@ -1,116 +0,0 @@
-'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

@@ -1,81 +0,0 @@
-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 { SurveyBasicInfo } from '@/types/Survey'
+import RoofDetailForm from './RoofDetailForm'
 
 export default function DataTable() {
   const params = useParams()
@@ -34,7 +34,7 @@ export default function DataTable() {
 
   return (
     <>
-      <div className="sale-data-table-wrap">
+      <div className="sale-frame">
         <table className="sale-data-table">
           <colgroup>
             <col style={{ width: '80px' }} />
@@ -84,7 +84,11 @@ export default function DataTable() {
           </tbody>
         </table>
       </div>
-      <DetailForm surveyInfo={surveyDetail as SurveyBasicInfo} mode="READ" />
+      {tab === 'roof-info' ? (
+        <RoofDetailForm surveyDetail={surveyDetail} isLoadingSurveyDetail={isLoadingSurveyDetail} />
+      ) : (
+        <DetailForm surveyDetail={surveyDetail} isLoadingSurveyDetail={isLoadingSurveyDetail} />
+      )}
     </>
   )
 }

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

@@ -1,102 +1,53 @@
 'use client'
 
-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,
-}
+import DetailButton from './DetailButton'
+import { SurveyBasicInfo } from '@/types/Survey'
 
-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,
+export default function DetailForm({
+  surveyDetail,
+  isLoadingSurveyDetail,
+}: {
+  surveyDetail: SurveyBasicInfo | null
+  isLoadingSurveyDetail: boolean
+}) {
+  if (isLoadingSurveyDetail) {
+    return <div>Loading...</div>
   }
-
-  const buttonFormProps = { mode, setMode, data }
-
   return (
     <>
-      <div className="sale-detail-toggle-wrap">
-        {/* {mode} */}
-        {/* 기본정보 */}
-        <BasicForm basicInfo={basicInfoData} setBasicInfo={setBasicInfoData} mode={mode} />
-        {/* 전기/지붕정보 */}
-        <RoofForm roofInfo={roofInfoData} setRoofInfo={setRoofInfoData} mode={mode} />
-        <ButtonForm {...buttonFormProps} />
+      <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>
     </>
   )

src/components/survey-sale/detail/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,7 +196,10 @@ export default function RoofDetailForm({
             </div>
           </div>
         </div>
-        <DetailButton surveyDetail={surveyDetail} />
+        <DetailButton
+          isTemporary={false}
+          surveyDetail={surveyDetail}
+        />
       </div>
     </>
   )

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

@@ -1,332 +0,0 @@
-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/form/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 '../form/etcProcess/MultiCheckEtc'
-import SelectBoxEtc from '../form/etcProcess/SelectBoxEtc'
-import RadioEtc from '../form/etcProcess/RadioEtc'
+import MultiCheckEtc from './etcProcess/MultiCheckEtc'
+import SelectBoxEtc from './etcProcess/SelectBoxEtc'
+import RadioEtc from './etcProcess/RadioEtc'
 
 const defaultDetailInfoForm: SurveyDetailRequest = {
   CONTRACT_CAPACITY: null,

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

@@ -19,26 +19,22 @@ export default function ListTable() {
   const { session } = useSessionStore()
 
   useEffect(() => {
-    if (surveyList) {
+    if (surveyList && surveyList.length > 0) {
       if (offset === 0) {
         setHeldSurveyList(surveyList)
       } else {
-        setHeldSurveyList(prev => [...prev, ...surveyList])
+        const remainingList = heldSurveyList.slice(offset, offset + 10)
+        if (JSON.stringify(remainingList) !== JSON.stringify(surveyList)) {
+          setHeldSurveyList((prev) => [...prev, ...surveyList])
+        }
       }
       setHasMore(surveyListCount > offset + 10)
-    } else {
-      setHeldSurveyList([])
-      setHasMore(false)
     }
-  }, [surveyList, surveyListCount, offset])
-
-  console.log('surveyList:: ', surveyList)
-  console.log('heldSurveyList:: ', heldSurveyList)
+  }, [surveyList, surveyListCount, offset, session?.role])
 
   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,5 +128,3 @@ export type SurveyRegistRequest = {
   SUBMISSION_DATE: string | null
   DETAIL_INFO: SurveyDetailRequest | null
 }
-
-export type Mode = 'CREATE' | 'EDIT' | 'READ' | 'TEMP' // 등록 | 수정 | 상세 | 임시저장