Merge branch 'dev' of https://git.hanasys.jp/qcast3/onsitesurvey into feature/survey

Reviewed-on: #22

README.md

@@ -37,3 +37,7 @@ const popupController = usePopupController()
 onClick={() => popupController.setMemberInformationPopup(false)}
 onClick={() => popupController.setZipCodePopup(false)}
 ```
+
+# useEffect 정리
+
+- client url pathname 변경시 -> @/components/ui/Header.tsx

src/app/api/survey-sales/[id]/route.ts

@@ -31,17 +31,19 @@ export async function GET(request: Request, context: { params: { id: string } })
 export async function PUT(request: Request, context: { params: { id: string } }) {
   const { id } = await context.params
   const body = await request.json()
-  // @ts-ignore
-  const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
-    where: { id: Number(id) },
-    data: {
-      ...body,
-      detail_info: {
-        update: body.detail_info,
+  try {
+    // @ts-ignore
+    const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
+      where: { id: Number(id) },
+      data: {
+        ...body,
       },
-    },
-  })
-  return NextResponse.json(survey)
+    })
+    return NextResponse.json(survey)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
 }
 
 export async function DELETE(request: Request, context: { params: { id: string } }) {
@@ -72,7 +74,7 @@ export async function DELETE(request: Request, context: { params: { id: string }
     return NextResponse.json({ message: 'Survey deleted successfully' })
   } catch (error) {
     console.error(error)
-    return NextResponse.json({ message: 'Survey deletion failed' }, { status: 500 })
+    throw error
   }
 }
 

src/app/inquiry/[id]/page.tsx

@@ -1,9 +1,5 @@
-import InquiryDetail from '@/components/inquiry/InquiryDetail'
+import Detail from '@/components/inquiry/Detail'
 
-export default function InquiryDetails() {
-  return (
-    <div>
-      <InquiryDetail />
-    </div>
-  )
+export default function page() {
+  return <Detail />
 }

src/app/inquiry/layout.tsx

@@ -0,0 +1,3 @@
+export default function layout({ children }: { children: React.ReactNode }) {
+  return <div className="container">{children}</div>
+}

src/app/inquiry/list/page.tsx

@@ -0,0 +1,13 @@
+import ListForm from '@/components/inquiry/ListForm'
+import ListTable from '@/components/inquiry/ListTable'
+
+export default function page() {
+  return (
+    <>
+      <div className="sale-contents">
+        <ListForm />
+        <ListTable />
+      </div>
+    </>
+  )
+}

src/app/inquiry/page.tsx

@@ -1,9 +0,0 @@
-import InquiryList from '@/components/inquiry/InquiryList'
-
-export default function Inquiry() {
-  return (
-    <div>
-      <InquiryList />
-    </div>
-  )
-}

src/app/inquiry/regist/page.tsx

@@ -0,0 +1,9 @@
+import RegistForm from '@/components/inquiry/RegistForm'
+
+export default function page() {
+  return (
+    <>
+      <RegistForm />
+    </>
+  )
+}

src/components/inquiry/Answer.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+export default function Answer() {
+  return (
+    <>
+      <div className="inquiry-answer-wrap">
+        <div className="inquiry-answer-header">
+          <div className="inquiry-answer-tit">Hanwha Japan 回答</div>
+          <div className="inquiry-answer-date">
+            <span>佐藤一貴</span>/ <span>2025.04.02 16:54:00</span>
+          </div>
+        </div>
+        <div className="inquiry-detail-data">
+          <div className="inquiry-detail-category">回答</div>
+          <div className="inquiry-detail-txt">
+            一次側接続は, 自動切替開閉器と住宅分電盤昼間遮断器との間に蓄電システム遮断器を配線する方法です. 二次側接続は,
+            住宅分電盤週間ブレーカの二次側に蓄電システムブレーカを接続する
+          </div>
+        </div>
+        <div className="file-list-wrap">
+          <div className="file-list-tit">ファイル添付</div>
+          <ul className="file-list">
+            <li className="file-item">
+              <button className="file-item-bx">
+                <div className="file-item-name">添付ファイル名.jpg </div>
+              </button>
+            </li>
+            <li className="file-item">
+              <button className="file-item-bx">
+                <div className="file-item-name">添付ファイル名.jpg </div>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/inquiry/Detail.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { useState } from 'react'
+import Answer from './Answer'
+
+export default function Detail() {
+  //todo: 답변 완료 표시를 위해 임시로 추가 해 놓은 state
+  // 추후에 api 작업 완료후 삭제
+  // 답변 완료 클래스 & 하단 답변내용 출력도
+  const [inquiry, setInquiry] = useState<Boolean>(false)
+
+  return (
+    <>
+      <div className="inquiry-frame">
+        <div className="inquiry-detail-wrap">
+          <div className="inquiry-detail-badge">
+            <div className={`badge ${inquiry ? 'orange' : 'blue'} block`}>回答完了</div>
+          </div>
+          <div className="inquiry-detail-data-table">
+            <table className="sale-data-table">
+              <colgroup>
+                <col style={{ width: '80px' }} />
+                <col />
+              </colgroup>
+              <tbody>
+                <tr>
+                  <th>登録日</th>
+                  <td>2025.04.10</td>
+                </tr>
+                <tr>
+                  <th>作者</th>
+                  <td>Hong gi</td>
+                </tr>
+                <tr>
+                  <th>販売店</th>
+                  <td>interplug</td>
+                </tr>
+                <tr>
+                  <th>施工店</th>
+                  <td>interplugs</td>
+                </tr>
+                <tr>
+                  <th>E-mail</th>
+                  <td>Hong@interplug.co.kr</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div className="inquiry-detail-data">
+            <div className="inquiry-detail-category">屋根適合</div>
+            <div className="inquiry-detail-tit">屋根材適合性確認依頼</div>
+            <div className="inquiry-detail-txt">
+              入力した内容が表示されます.
+              <br />
+              インストール可能であることを確認してください.
+              <br />
+              屋根の写真を添付しました.
+            </div>
+          </div>
+          <div className="file-list-wrap">
+            <div className="file-list-tit">ファイル添付</div>
+            <ul className="file-list">
+              <li className="file-item">
+                <button className="file-item-bx">
+                  <div className="file-item-name">添付ファイル名.jpg </div>
+                </button>
+              </li>
+              <li className="file-item">
+                <button className="file-item-bx">
+                  <div className="file-item-name">添付ファイル名.jpg </div>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {inquiry && <Answer />}
+
+        <div className="sale-edit-btn">
+          <button className="btn-frame n-blue icon">
+            リスト<i className="btn-arr"></i>
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/inquiry/ListForm.tsx

@@ -0,0 +1,20 @@
+'use client'
+export default function ListForm() {
+  return (
+    <>
+      <div className="sale-frame">
+        <div className="sale-form-bx">
+          <button className="btn-frame n-blue icon">
+            お問い合わせ<i className="btn-arr"></i>
+          </button>
+        </div>
+        <div className="sale-form-bx">
+          <div className="search-input">
+            <input type="text" className="search-frame" placeholder="タイトルを入力してください. (2文字以上)" />
+            <button className="search-icon"></button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/inquiry/ListTable.tsx

@@ -0,0 +1,70 @@
+'use client'
+export default function ListTable() {
+  return (
+    <>
+      <div className="sale-frame">
+        <div className="inquiry-table-filter">
+          <div className="filter-check">
+            <div className="check-form-box">
+              <input type="checkbox" id="ch01" />
+              <label htmlFor="ch01">私が書いたお問い合わせ</label>
+            </div>
+          </div>
+          <div className="filter-select">
+            <select className="select-form" name="" id="">
+              <option value="">全体</option>
+              <option value="">全体</option>
+              <option value="">全体</option>
+              <option value="">全体</option>
+              <option value="">全体</option>
+            </select>
+          </div>
+        </div>
+        <div className="inquiry-list-wrap">
+          <div className="inquiry-list-tit">
+            合計 <span>98</span>個
+          </div>
+          <ul className="inquiry-list">
+            <li className="inquiry-item">
+              <div className="inquiry-item-bx">
+                <div className="inquiry-item-category">屋根</div>
+                <div className="inquiry-item-tit">屋根材適合性確認依頼</div>
+                <div className="inquiry-item-date">2025.04.02</div>
+                <div className="inquiry-badge badge blue">回答待ち</div>
+              </div>
+            </li>
+            <li className="inquiry-item">
+              <div className="inquiry-item-bx">
+                <div className="inquiry-item-category">設計</div>
+                <div className="inquiry-item-tit">設置可能ですか？</div>
+                <div className="inquiry-item-date">2025.04.02</div>
+                <div className="inquiry-badge badge orange">回答完了</div>
+              </div>
+            </li>
+            <li className="inquiry-item">
+              <div className="inquiry-item-bx">
+                <div className="inquiry-item-category">屋根</div>
+                <div className="inquiry-item-tit">屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼</div>
+                <div className="inquiry-item-date">2025.04.02</div>
+                <div className="inquiry-badge badge blue">回答待ち</div>
+              </div>
+            </li>
+            <li className="inquiry-item">
+              <div className="inquiry-item-bx">
+                <div className="inquiry-item-category">設計</div>
+                <div className="inquiry-item-tit">設置可能ですか？</div>
+                <div className="inquiry-item-date">2025.04.02</div>
+                <div className="inquiry-badge badge orange">回答完了</div>
+              </div>
+            </li>
+          </ul>
+          <div className="sale-edit-btn">
+            <button className="btn-frame n-blue icon">
+              もっと見る<i className="btn-edit"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/inquiry/RegistForm.tsx

@@ -0,0 +1,79 @@
+'use client'
+export default function RegistForm() {
+  return (
+    <>
+      <div className="inquiry-frame">
+        <div className="data-form-wrap">
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">
+              お問い合わせタイプ <i className="import">*</i>
+            </div>
+            <div className="data-input">
+              <select className="select-form" name="" id="">
+                <option value="">屋根適合</option>
+                <option value="">屋根適合</option>
+                <option value="">屋根適合</option>
+                <option value="">屋根適合</option>
+                <option value="">屋根適合</option>
+              </select>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">
+              お問い合わせタイトル <i className="import">*</i>
+            </div>
+            <div className="data-input">
+              <select className="select-form" name="" id="">
+                <option value="">モジュールの取り付けを確認するかどうか</option>
+                <option value="">モジュールの取り付けを確認するかどうか</option>
+                <option value="">モジュールの取り付けを確認するかどうか</option>
+                <option value="">モジュールの取り付けを確認するかどうか</option>
+                <option value="">モジュールの取り付けを確認するかどうか</option>
+              </select>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">
+              お問い合わせタイプ <i className="import">*</i>
+            </div>
+            <div className="data-input">
+              <textarea className="textarea-form" rows={6} name="" id="" placeholder="TextArea Filed"></textarea>
+            </div>
+          </div>
+        </div>
+        <div className="inquiry-file-wrap">
+          <div className="filebox">
+            <label className="btn-frame l-blue icon" htmlFor="file">
+              <i className="btn-clip"></i>Attach ファイル
+            </label>
+            <input type="file" id="file" />
+          </div>
+          <div className="file-list-wrap">
+            <div className="file-list-tit">
+              添付ファイル<span>2</span>個
+            </div>
+            <ul className="file-list">
+              <li className="file-item">
+                <div className="file-item-bx">
+                  <div className="file-item-name">添付ファイル名.jpg </div>
+                  <button className="file-del"></button>
+                </div>
+              </li>
+              <li className="file-item">
+                <div className="file-item-bx">
+                  <div className="file-item-name">添付ファイル名.jpg </div>
+                  <button className="file-del"></button>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div className="sale-edit-btn">
+            <button className="btn-frame n-blue icon">
+              登録<i className="btn-arr"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/survey-sale/common/NavTab.tsx

@@ -1,21 +1,45 @@
 'use client'
 
-import { usePathname } from 'next/navigation'
+import { useSurveySaleTabState } from '@/store/surveySaleTabState'
+import { usePathname, useRouter } from 'next/navigation'
+import { useEffect } from 'react'
 
 export default function NavTab() {
+  const router = useRouter()
   const pathname = usePathname()
+  const router = useRouter()
 
   if (pathname === '/survey-sale') {
     return null
   }
 
+  const { basicInfoSelected, roofInfoSelected, reset } = useSurveySaleTabState()
+
+  useEffect(() => {
+    return () => {
+      reset()
+    }
+  }, [])
+
+  const handleBasicInfoClick = () => {
+    router.push('/survey-sale/basic-info')
+  }
+
+  const handleRoofInfoClick = () => {
+    router.push('/survey-sale/roof-info')
+  }
+
   return (
     <>
       <div className="sale-detail-tab-relative">
         <div className="sale-detail-tab-wrap">
           <div className="sale-detail-tab-inner">
-            <button className="sale-detail-tab">基本情報</button>
-            <button className="sale-detail-tab">電気 / 屋根情報</button>
+            <button className={`sale-detail-tab ${basicInfoSelected ? 'act' : ''}`} onClick={handleBasicInfoClick}>
+              基本情報
+            </button>
+            <button className={`sale-detail-tab ${roofInfoSelected ? 'act' : ''}`} onClick={handleRoofInfoClick}>
+              電気 / 屋根情報
+            </button>
           </div>
         </div>
       </div>

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

@@ -1,8 +1,10 @@
 'use client'
 
+import { useServey } from '@/hooks/useSurvey'
 import { SurveyBasicRequest } from '@/types/Survey'
-import { useRouter } from 'next/navigation'
-import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useState, useEffect } from 'react'
+import { useSurveySaleTabState } from '@/store/surveySaleTabState'
 
 const defaultBasicInfoForm: SurveyBasicRequest = {
   representative: '',
@@ -19,34 +21,78 @@ const defaultBasicInfoForm: SurveyBasicRequest = {
 }
 
 export default function BasicForm() {
+  const searchParams = useSearchParams()
+  const id = searchParams.get('id')
+
+  const { surveyDetail, createSurvey, isCreatingSurvey, updateSurvey, isUpdatingSurvey } = useServey(Number(id))
+
   const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm)
 
+  useEffect(() => {
+    if (surveyDetail) {
+      const { id, updated_at, created_at, detail_info, ...rest } = surveyDetail
+      setBasicInfoData(rest)
+    }
+  }, [surveyDetail])
+
   const handleChange = (key: keyof SurveyBasicRequest, value: string) => {
     setBasicInfoData({ ...basicInfoData, [key]: value })
   }
 
   const router = useRouter()
   const handleSave = () => {
-    console.log('save')
+    if (id) {
+      console.log('basicInfoData:: ', basicInfoData)
+      updateSurvey(basicInfoData)
+    } else {
+      createSurvey(basicInfoData)
+    }
+    router.push('/survey-sale')
   }
-  const handleDelete = () => {
-    console.log('delete')
+
+  if (isCreatingSurvey || isUpdatingSurvey) {
+    return <div>Loading...</div>
   }
+
+  const { setBasicInfoSelected } = useSurveySaleTabState()
+
+  useEffect(() => {
+    setBasicInfoSelected()
+  }, [])
+
   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={basicInfoData.representative} onChange={(e) => handleChange('representative', e.target.value)} />
+            <input
+              type="text"
+              className="input-frame"
+              id="representative"
+              value={basicInfoData.representative}
+              onChange={(e) => handleChange('representative', e.target.value)}
+            />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">販売店</div>
-            <input type="text" className="input-frame" id='store' value={basicInfoData.store ?? ''} onChange={(e) => handleChange('store', e.target.value)} />
+            <input
+              type="text"
+              className="input-frame"
+              id="store"
+              value={basicInfoData.store ?? ''}
+              onChange={(e) => handleChange('store', e.target.value)}
+            />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">施工店</div>
-            <input type="text" className="input-frame" id='construction_point' value={basicInfoData.construction_point ?? ''} onChange={(e) => handleChange('construction_point', e.target.value)} />
+            <input
+              type="text"
+              className="input-frame"
+              id="construction_point"
+              value={basicInfoData.construction_point ?? ''}
+              onChange={(e) => handleChange('construction_point', e.target.value)}
+            />
           </div>
         </div>
       </div>
@@ -55,29 +101,60 @@ export default function BasicForm() {
         <div className="data-form-wrap">
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">現地調査日</div>
+            {/* TODO: 달력 라이브러리 추가 ?? */}
             <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)} />
+              <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)} />
+            <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)} />
+            <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" defaultValue={'1050013'} disabled />
+                <input
+                  type="text"
+                  className="input-frame"
+                  id="post_code"
+                  value={basicInfoData.post_code ?? ''}
+                  onChange={(e) => handleChange('post_code', e.target.value)}
+                />
               </div>
               <div className="form-bx">
-                <select className="select-form" name="" id="">
+                <select
+                  className="select-form"
+                  name="address"
+                  id="address"
+                  value={basicInfoData.address ?? ''}
+                  onChange={(e) => handleChange('address', e.target.value)}
+                >
                   <option value="">東京都</option>
                   <option value="">東京都</option>
                   <option value="">東京都</option>
@@ -94,7 +171,13 @@ export default function BasicForm() {
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">市区町村名, 以後の住所</div>
-            <input type="text" className="input-frame" defaultValue={'浜松 浜松町'} />
+            <input
+              type="text"
+              className="input-frame"
+              id="address_detail"
+              value={basicInfoData.address_detail ?? ''}
+              onChange={(e) => handleChange('address_detail', e.target.value)}
+            />
           </div>
         </div>
         <div className="btn-flex-wrap">
@@ -104,7 +187,7 @@ export default function BasicForm() {
             </button>
           </div>
           <div className="btn-bx">
-            <button className="btn-frame red icon" onClick={handleDelete}>
+            <button className="btn-frame red icon">
               保存<i className="btn-arr"></i>
             </button>
           </div>

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

@@ -1,6 +1,100 @@
 'use client'
 
+import { useEffect } from 'react'
+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 MultiCheckbox from './form/MultiCheckbox'
+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: null,
+  house_structure_etc: null,
+  rafter_material: null,
+  rafter_material_etc: null,
+  rafter_size: null,
+  rafter_size_etc: null,
+  rafter_pitch: null,
+  rafter_pitch_etc: null,
+  rafter_direction: null,
+  open_field_plate_kind: null,
+  open_field_plate_kind_etc: null,
+  open_field_plate_thickness: null,
+  leak_trace: null,
+  waterproof_material: null,
+  waterproof_material_etc: null,
+  insulation_presence: null,
+  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 { updateSurvey, isUpdatingSurvey, surveyDetail, createSurveyDetail } = useServey(Number(id))
+
+  const [detailInfoData, setDetailInfoData] = useState<SurveyDetailRequest>(defaultDetailInfoForm)
+
+  useEffect(() => {
+    if (surveyDetail?.detail_info) {
+      const { id, updated_at, created_at, ...rest } = surveyDetail.detail_info
+      setDetailInfoData(rest)
+    }
+  }, [surveyDetail])
+
+  const handleNumberInput = (key: keyof SurveyDetailRequest, value: number | string) => {
+    if (typeof value === 'string') {
+      const numberValue = value === '' ? null : Number(value)
+      setDetailInfoData({ ...detailInfoData, [key]: numberValue })
+    } else {
+      setDetailInfoData({ ...detailInfoData, [key]: value })
+    }
+  }
+
+  const handleTextInput = (key: keyof SurveyDetailRequest, value: string) => {
+    setDetailInfoData({ ...detailInfoData, [key]: value || null })
+  }
+
+  const handleBooleanInput = (key: keyof SurveyDetailRequest, checked: boolean) => {
+    setDetailInfoData({ ...detailInfoData, [key]: checked })
+  }
+
+  const handleUnitInput = (value: string) => {
+    const capacity = detailInfoData.contract_capacity
+    setDetailInfoData({ ...detailInfoData, contract_capacity: `${capacity} ${value}` })
+  }
+
+  const handleSave = () => {
+    if (id) {
+      console.log('detailInfoData:: ', detailInfoData)
+    }
+  }
   return (
     <>
       <div className="sale-frame">
@@ -9,11 +103,21 @@ export default function RoofInfoForm() {
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">電気契約容量</div>
             <div className="data-input mb5">
-              <input type="text" className="input-frame" defaultValue={'10'} />
+              <input
+                type="text"
+                className="input-frame"
+                value={detailInfoData.contract_capacity ?? ''}
+                onChange={(e) => handleTextInput('contract_capacity', e.target.value)}
+              />
             </div>
             <div className="data-input">
-              <select className="select-form" name="" id="">
-                <option value="">kVA</option>
+              <select
+                className="select-form"
+                name="contract_capacity_unit"
+                id="contract_capacity_unit"
+                onChange={(e) => handleUnitInput(e.target.value)}
+              >
+                <option value="kVA">kVA</option>
                 <option value="">kVA</option>
                 <option value="">kVA</option>
                 <option value="">kVA</option>
@@ -23,37 +127,15 @@ export default function RoofInfoForm() {
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">電気小売会社</div>
-            <input type="text" className="input-frame" defaultValue={'HWJ Electric'} />
+            <input
+              type="text"
+              className="input-frame"
+              value={detailInfoData.retail_company ?? ''}
+              onChange={(e) => handleTextInput('retail_company', e.target.value)}
+            />
           </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" />
-                <label htmlFor="ch01">エコキュート</label>
-              </div>
-              <div className="check-form-box">
-                <input type="checkbox" id="ch02" />
-                <label htmlFor="ch02">エネパーム</label>
-              </div>
-              <div className="check-form-box">
-                <input type="checkbox" id="ch03" />
-                <label htmlFor="ch03">蓄電池システム</label>
-              </div>
-              <div className="check-form-box">
-                <input type="checkbox" id="ch04" />
-                <label htmlFor="ch04">太陽光発電</label>
-              </div>
-              <div className="check-form-box">
-                <input type="checkbox" id="ch05" />
-                <label htmlFor="ch05">その他 (直接入力)</label>
-              </div>
-            </div>
-            <div className="data-input">
-              <input type="text" className="input-frame" disabled defaultValue={''} />
-            </div>
+            <MultiCheckbox column={'supplementary_facilities'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData}/>
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit red-f">設置希望システム</div>
@@ -93,34 +175,7 @@ export default function RoofInfoForm() {
             </div>
           </div>
           <div className="data-input-form-bx">
-            <div className="data-input-form-tit">
-              屋根材<span>※最大2個まで選択可能</span>
-            </div>
-            <div className="data-check-wrap">
-              <div className="check-form-box">
-                <input type="checkbox" id="ch01" />
-                <label htmlFor="ch01">スレート</label>
-              </div>
-              <div className="check-form-box">
-                <input type="checkbox" id="ch02" />
-                <label htmlFor="ch02">アスファルトシングル</label>
-              </div>
-              <div className="check-form-box">
-                <input type="checkbox" id="ch03" />
-                <label htmlFor="ch03">瓦</label>
-              </div>
-              <div className="check-form-box">
-                <input type="checkbox" id="ch04" />
-                <label htmlFor="ch04">金属屋根</label>
-              </div>
-              <div className="check-form-box">
-                <input type="checkbox" id="ch05" />
-                <label htmlFor="ch05">その他 (直接入力)</label>
-              </div>
-            </div>
-            <div className="data-input">
-              <input type="text" className="input-frame" disabled defaultValue={''} />
-            </div>
+            <MultiCheckbox column={'roof_material'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">建築研修</div>
@@ -340,17 +395,17 @@ export default function RoofInfoForm() {
         </div>
         <div className="btn-flex-wrap">
           <div className="btn-bx">
-            <button className="btn-frame n-blue icon">
+            <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">
+            <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">
+            <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
               リスト<i className="btn-arr"></i>
             </button>
           </div>

src/components/survey-sale/detail/form/MultiCheckbox.tsx

@@ -0,0 +1,81 @@
+import { SurveyDetailRequest } from '@/types/Survey'
+import { useState } from 'react'
+
+const supplementary_facilities = [
+  { id: 1, name: 'エコキュート' },
+  { id: 2, name: 'エネパーム' },
+  { id: 3, name: '蓄電池システム' },
+  { id: 4, name: '太陽光発電' },
+]
+
+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 handleCheckbox = (dataName: string) => {
+    const value = column === 'supplementary_facilities' ? detailInfoData.supplementary_facilities : detailInfoData.roof_material
+    setDetailInfoData({
+      ...detailInfoData,
+      [column]: `${value}, ${dataName}`,
+    })
+  }
+
+  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={`ch${item.id}`}
+              checked={
+                String(detailInfoData[column as keyof SurveyDetailRequest] ?? '')
+                  .split(',')
+                  .map((v) => v.trim())
+                  .includes(item.name)
+              }
+              onChange={() => handleCheckbox(item.name)}
+            />
+            <label htmlFor={`ch${item.id}`}>{item.name}</label>
+          </div>
+        ))}
+        <div className="check-form-box">
+          <input type="checkbox" id="ch05" checked={isOtherChecked} />
+          <label htmlFor="ch05">その他 (直接入力)</label>
+        </div>
+      </div>
+      <div className="data-input">
+        <input type="text" className="input-frame" disabled defaultValue={''} />
+      </div>
+    </>
+  )
+}

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

@@ -8,6 +8,7 @@ import { useRouter } from 'next/navigation'
 export default function ListTable() {
   const router = useRouter()
   const { surveyList, isLoadingSurveyList } = useServey()
+
   const [hasMore, setHasMore] = useState(surveyList.length > 5)
   const [visibleItems, setVisibleItems] = useState(5)
 
@@ -24,6 +25,9 @@ export default function ListTable() {
   const handleDetail = (id: number) => {
     router.push(`/survey-sale/${id}`)
   }
+  if (isLoadingSurveyList) {
+    return <div>Loading...</div>
+  }
 
   return (
     <>

src/components/ui/Main.tsx

@@ -1,10 +1,13 @@
 'use client'
 
 import { useHeaderStore } from '@/store/header'
+import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 
 export default function Main() {
+  const router = useRouter()
   const { setBackBtn } = useHeaderStore()
+
   useEffect(() => {
     setBackBtn(false)
   }, [])
@@ -27,7 +30,7 @@ export default function Main() {
               <div className="main-bx-icon">
                 <img src="/assets/images/main/main_icon01.svg" alt="" />
               </div>
-              <button className="main-bx-arr"></button>
+              <button className="main-bx-arr" onClick={() => router.push('/survey-sale')}></button>
             </div>
             <div className="grid-bx-body">
               <div className="grid-bx-body-tit">調査物件一覧</div>
@@ -39,7 +42,7 @@ export default function Main() {
               <div className="main-bx-icon">
                 <img src="/assets/images/main/main_icon02.svg" alt="" />
               </div>
-              <button className="main-bx-arr"></button>
+              <button className="main-bx-arr" onClick={() => router.push('/survey-sale/basic-info')}></button>
             </div>
             <div className="grid-bx-body">
               <div className="grid-bx-body-tit">調査物件登録</div>
@@ -51,7 +54,7 @@ export default function Main() {
               <div className="main-bx-icon">
                 <img src="/assets/images/main/main_icon03.svg" alt="" />
               </div>
-              <button className="main-bx-arr"></button>
+              <button className="main-bx-arr" onClick={() => router.push('/inquiry/list')}></button>
             </div>
             <div className="grid-bx-body">
               <div className="grid-bx-body-tit">1:1お問い合わせ リスト</div>
@@ -63,7 +66,7 @@ export default function Main() {
               <div className="main-bx-icon">
                 <img src="/assets/images/main/main_icon04.svg" alt="" />
               </div>
-              <button className="main-bx-arr"></button>
+              <button className="main-bx-arr" onClick={() => router.push('/inquiry/regist')}></button>
             </div>
             <div className="grid-bx-body">
               <div className="grid-bx-body-tit">1:1問い合わせ登録</div>

src/components/ui/common/Header.tsx

@@ -3,13 +3,14 @@
 import { useEffect, useState } from 'react'
 
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 
 import { Swiper, SwiperSlide } from 'swiper/react'
 
 import type { HeaderProps } from '@/types/Header'
 
 import 'swiper/css'
+import { useSideNavState } from '@/store/sideNavState'
 
 // type HeaderProps = {
 //   name: string //header 이름
@@ -17,8 +18,9 @@ import 'swiper/css'
 // }
 
 export default function Header({ name }: HeaderProps) {
+  const router = useRouter()
   const pathname = usePathname()
-  const [headerAct, setHeaderAct] = useState<boolean>(false)
+  const { sideNavIsOpen, setSideNavIsOpen, reset } = useSideNavState()
   const [isShowBackBtn, setIsShowBackBtn] = useState<boolean>(false)
 
   if (pathname === '/login') {
@@ -29,6 +31,8 @@ export default function Header({ name }: HeaderProps) {
     if (pathname !== '/') {
       setIsShowBackBtn(true)
     }
+    //사이드바 초기화
+    reset()
   }, [pathname])
 
   return (
@@ -38,17 +42,17 @@ export default function Header({ name }: HeaderProps) {
           <div className="header-inner">
             {isShowBackBtn && (
               <div className="back-button-wrap">
-                <button className="back-button"></button>
+                <button className="back-button" onClick={() => router.back()}></button>
               </div>
             )}
             <h2 className="logo">
-              <Link href={'#'}>{name}</Link>
+              <Link href={'/'}>{name}</Link>
             </h2>
             <div className="side-button-wrap">
-              <button className="side-button" onClick={() => setHeaderAct(true)}></button>
+              <button className="side-button" onClick={() => setSideNavIsOpen(true)}></button>
             </div>
           </div>
-          <div className={`side-nav ${headerAct ? 'active' : ''}`}>
+          <div className={`side-nav ${sideNavIsOpen ? 'active' : ''}`}>
             <div className="side-nav-inner">
               <div className="side-nav-header">
                 <div className="side-header-profile">
@@ -61,7 +65,7 @@ export default function Header({ name }: HeaderProps) {
                   </div>
                 </div>
                 <div className="side-close-wrap">
-                  <button className="side-close-btn" onClick={() => setHeaderAct(false)}></button>
+                  <button className="side-close-btn" onClick={() => setSideNavIsOpen(false)}></button>
                 </div>
               </div>
               <div className="side-swiper-wrap">
@@ -89,16 +93,16 @@ export default function Header({ name }: HeaderProps) {
               <nav className="side-nav-wrap">
                 <ul className="side-nav-list">
                   <li className="side-nav-item">
-                    <button>調査物件一覧</button>
+                    <button onClick={() => router.push('/survey-sale')}>調査物件一覧</button>
                   </li>
                   <li className="side-nav-item">
-                    <button>調査物件登録</button>
+                    <button onClick={() => router.push('/survey-sale/basic-info')}>調査物件登録</button>
                   </li>
                   <li className="side-nav-item">
-                    <button>1:1お問い合わせ</button>
+                    <button onClick={() => router.push('/inquiry/list')}>1:1お問い合わせ</button>
                   </li>
                   <li className="side-nav-item">
-                    <button>1:1お問い合わせ登録</button>
+                    <button onClick={() => router.push('/inquiry/regist')}>1:1お問い合わせ登録</button>
                   </li>
                   <li className="side-nav-item">
                     <button>パスワードリセット</button>
@@ -114,7 +118,7 @@ export default function Header({ name }: HeaderProps) {
                     <button>Jynoadmin</button>
                   </li>
                   <li className="side-footer-item">
-                    <button>HOME</button>
+                    <button onClick={() => router.push('/')}>HOME</button>
                   </li>
                 </ul>
               </div>

src/hooks/useSurvey.ts

@@ -44,12 +44,14 @@ export function useServey(id?: number): {
     },
     onSuccess: (data) => {
       queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
+      queryClient.invalidateQueries({ queryKey: ['survey', id] })
       return data
     },
   })
 
   const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({
     mutationFn: async (survey: SurveyBasicRequest) => {
+      console.log('updateSurvey:: ', survey)
       if (id === undefined) throw new Error('id is required')
       const resp = await axiosInstance.put<SurveyBasicInfo>(`/api/survey-sales/${id}`, survey)
       return resp.data

src/store/sideNavState.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand'
+
+type SideNavState = {
+  sideNavIsOpen: boolean
+  setSideNavIsOpen: (value: boolean) => void
+  reset: () => void
+}
+
+type InitialState = {
+  sideNavIsOpen: boolean
+}
+
+const initialState: InitialState = {
+  sideNavIsOpen: false,
+}
+
+export const useSideNavState = create<SideNavState>((set) => ({
+  ...initialState,
+  setSideNavIsOpen: (value: boolean) => set((state) => ({ ...state, sideNavIsOpen: value })),
+  reset: () => set(initialState),
+}))

src/store/surveySaleTabState.ts

@@ -0,0 +1,26 @@
+import { create } from 'zustand'
+
+type SurveySaleTabState = {
+  basicInfoSelected: boolean
+  roofInfoSelected: boolean
+  setBasicInfoSelected: () => void
+  setRoofInfoSelected: () => void
+  reset: () => void
+}
+
+type InitialState = {
+  basicInfoSelected: boolean
+  roofInfoSelected: boolean
+}
+
+const initialState: InitialState = {
+  basicInfoSelected: true,
+  roofInfoSelected: false,
+}
+
+export const useSurveySaleTabState = create<SurveySaleTabState>((set) => ({
+  ...initialState,
+  setBasicInfoSelected: () => set((state) => ({ ...state, basicInfoSelected: true, roofInfoSelected: false })),
+  setRoofInfoSelected: () => set((state) => ({ ...state, basicInfoSelected: false, roofInfoSelected: true })),
+  reset: () => set(initialState),
+}))

src/types/Survey.ts

@@ -107,5 +107,4 @@ export type SurveyDetailRequest = {
   installation_availability: number | null
   installation_availability_etc: string | null
   memo: string | null
-  basic_info_id: number
 }