feat: implement SurveyDetail page for roof-information

- 조사매물 지붕정보 상세페이지 구현

prisma/schema.prisma

@@ -79,13 +79,13 @@ model SD_SERVEY_SALES_DETAIL_INFO {
   id                            Int                        @id @default(autoincrement())
   contract_capacity             String?                    @db.VarChar(20)
   retail_company                String?                    @db.VarChar(100)
-  supplementary_facilities      Int?
+  supplementary_facilities      String?                    @db.VarChar(20)
   supplementary_facilities_etc  String?                    @db.VarChar(200)
   installation_system           Int?
   installation_system_etc       String?                    @db.VarChar(200)
   construction_year             Int?
   construction_year_etc         String?                    @db.VarChar(200)
-  roof_material                 Int?
+  roof_material                 String?                    @db.VarChar(20)
   roof_material_etc             String?                    @db.VarChar(200)
   roof_shape                    Int?
   roof_shape_etc                String?                    @db.VarChar(200)

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

@@ -5,7 +5,6 @@ export default function page() {
   return (
     <>
       <DataTable />
-      {/* <DetailForm /> */}
     </>
   )
 }

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

@@ -1,5 +1,8 @@
-import { SurveyBasicInfo } from '@/types/Survey'
+import { SurveyBasicInfo, SurveyDetailInfo } from '@/types/Survey'
 import DetailButton from './DetailButton'
+import { roof_material, supplementary_facilities } from './form/MultiCheckEtc'
+import { selectBoxOptions } from './form/SelectBoxEtc'
+import { radioEtcData } from './form/RadioEtc'
 
 export default function RoofDetailForm({
   surveyDetail,
@@ -8,6 +11,15 @@ export default function RoofDetailForm({
   surveyDetail: SurveyBasicInfo | null
   isLoadingSurveyDetail: boolean
 }) {
+  console.log(surveyDetail)
+
+  const makeNumArr = (value: string) => {
+    return value
+      .split(',')
+      .map((v) => v.trim())
+      .filter((v) => v.length > 0)
+  }
+
   if (isLoadingSurveyDetail) {
     return <div>Loading...</div>
   }
@@ -15,8 +27,173 @@ export default function RoofDetailForm({
     <>
       <div className="sale-frame">
         <div className="data-form-wrap">
+          <div className="data-input-form-bx">
+            {/* 전기 계약 용량 */}
+            <div className="data-input-form-tit">電気契約容量</div>
+            <input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.detail_info?.contract_capacity ?? ''} />
+          </div>
+          {/* 전기 소매 회사 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">電気小売会社</div>
+            <input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.detail_info?.retail_company ?? ''} />
+          </div>
+          {/* 전기 부대 설비 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">電気附属設備</div>
+            <div className="data-check-wrap">
+              {supplementary_facilities.map((item) => (
+                <div className="check-form-box" key={item.id}>
+                  <input
+                    type="checkbox"
+                    id={`${item.id}`}
+                    checked={makeNumArr(surveyDetail?.detail_info?.supplementary_facilities ?? '').includes(String(item.id))}
+                    readOnly
+                  />
+                  <label htmlFor={`${item.id}`}>{item.name}</label>
+                </div>
+              ))}
+              <div className="check-form-box">
+                <input
+                  type="checkbox"
+                  id={`supplementary_facilities_etc`}
+                  checked={surveyDetail?.detail_info?.supplementary_facilities_etc !== null}
+                  readOnly
+                />
+                <label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label>
+              </div>
+            </div>
+            <div className="data-input">
+              <input
+                type="text"
+                className="input-frame"
+                placeholder="-"
+                readOnly
+                value={surveyDetail?.detail_info?.supplementary_facilities_etc ?? ''}
+              />
+            </div>
+          </div>
+          {/* 설치 희망 시스템 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">設置希望システム</div>
+            <SelectedBox column="installation_system" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 건축 연수 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">建築年数</div>
+            <SelectedBox column="construction_year" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 지붕재 */}
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">屋根材</div>
+            <div className="data-check-wrap">
+              {roof_material.map((item) => (
+                <div className="check-form-box" key={item.id}>
+                  <input
+                    type="checkbox"
+                    id={`${item.id}`}
+                    checked={makeNumArr(surveyDetail?.detail_info?.roof_material ?? '').includes(String(item.id))}
+                    readOnly
+                  />
+                  <label htmlFor={`${item.id}`}>{item.name}</label>
+                </div>
+              ))}
+              <div className="check-form-box">
+                <input type="checkbox" id={`roof_material_etc`} checked={surveyDetail?.detail_info?.roof_material_etc !== null} readOnly />
+                <label htmlFor={`roof_material_etc`}>その他 (直接入力)</label>
+              </div>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" placeholder="-" readOnly value={surveyDetail?.detail_info?.roof_material_etc ?? ''} />
+            </div>
+          </div>
+          {/* 지붕 모양 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">屋根の形状</div>
+            <SelectedBox column="roof_shape" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 지붕 경사도 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">屋根の斜面</div>
+            <div className="data-input flex">
+              <input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.detail_info?.roof_slope ?? ''} />
+              <span>寸</span>
+            </div>
+          </div>
+          {/* 주택 구조 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">住宅構造</div>
+            <RadioSelected column="house_structure" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 서까래 재질 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">垂木の材質</div>
+            <RadioSelected column="rafter_material" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 서까래 크기 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">垂木の大きさ</div>
+            <SelectedBox column="rafter_size" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 서까래 피치 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">垂木のピッチ</div>
+            <SelectedBox column="rafter_pitch" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 서까래 방향 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">垂木の方向</div>
+            <RadioSelected column="rafter_direction" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 노지판 종류 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">路地板の種類</div>
+            <SelectedBox column="open_field_plate_kind" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 노지판 두께 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">路地板厚</div>
+            <div className="data-input flex">
+              <input
+                className="input-frame"
+                type="text"
+                placeholder="-"
+                readOnly
+                value={surveyDetail?.detail_info?.open_field_plate_thickness ?? ''}
+              />
+              <span>mm</span>
+            </div>
+          </div>
+          {/* 누수 흔적 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">水漏れの痕跡</div>
+            <RadioSelected column="leak_trace" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 방수재 종류 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">防水材の種類</div>
+            <RadioSelected column="waterproof_material" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 단열재 유무 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">断熱材の有無</div>
+            <RadioSelected column="insulation_presence" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 구조 순서 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">屋根構造の順序</div>
+            <SelectedBox column="structure_order" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 설치 가능 여부 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">設置可能な場合</div>
+            <SelectedBox column="installation_availability" detailInfoData={surveyDetail?.detail_info ?? null} />
+          </div>
+          {/* 메모 */}
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">メモ</div>
+            <div className="data-input">
+              <textarea className="textarea-form" placeholder="-" readOnly value={surveyDetail?.detail_info?.memo ?? ''} />
+            </div>
           </div>
         </div>
         <DetailButton isTemporary={false} surveyId={Number(surveyDetail?.id)} />
@@ -24,3 +201,56 @@ export default function RoofDetailForm({
     </>
   )
 }
+
+const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
+  const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
+  const etcValue = detailInfoData?.[`${column}_etc` as keyof SurveyDetailInfo]
+
+  return (
+    <>
+      <select className="select-form mb10" name={column} id={column} disabled value={selectedId ? 'selected' : etcValue ? 'etc' : ''}>
+        <option value="">-</option>
+        <option value="etc">その他 (直接入力)</option>
+        <option value="selected">
+          {typeof selectedId === 'number' ? selectBoxOptions[column as keyof typeof selectBoxOptions][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)
+  }
+  
+  let etcValue = null
+  if (column !== 'rafter_direction') {
+    etcValue = detailInfoData?.[`${column}_etc` as keyof SurveyDetailInfo]
+  }
+  const etcChecked = etcValue !== null && etcValue !== undefined && etcValue !== ''
+
+  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={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/MultiCheckEtc.tsx

@@ -1,14 +1,14 @@
 import { SurveyDetailRequest } from '@/types/Survey'
 import { useEffect, useState } from 'react'
 
-const supplementary_facilities = [
+export const supplementary_facilities = [
   { id: 1, name: 'エコキュート' }, //에코큐트
   { id: 2, name: 'エネパーム' }, //에네팜
   { id: 3, name: '蓄電池システム' }, //축전지시스템
   { id: 4, name: '太陽光発電' }, //태양광발전
 ]
 
-const roof_material = [
+export const roof_material = [
   { id: 1, name: 'スレート' }, //슬레이트
   { id: 2, name: 'アスファルトシングル' }, //아스팔트 싱글
   { id: 3, name: '瓦' }, //기와

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

@@ -2,16 +2,18 @@
 import { useEffect, useState } from 'react'
 import { SurveyDetailRequest } from '@/types/Survey'
 
-type RadioEtcKeys = 'house_structure' | 'rafter_material' | 'waterproof_material' | 'insulation_presence'
+type RadioEtcKeys = 'house_structure' | 'rafter_material' | 'waterproof_material' | 'insulation_presence' | 'rafter_direction' | 'leak_trace'
 
 const translateJapanese: Record<RadioEtcKeys, string> = {
   house_structure: '住宅構造',
   rafter_material: '垂木材質',
   waterproof_material: '防水材の種類',
   insulation_presence: '断熱材の有無',
+  rafter_direction: '垂木の方向',
+  leak_trace: '水漏れの痕跡',
 }
 
-const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
+export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
   house_structure: [
     {
       id: 1,
@@ -44,6 +46,26 @@ const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
       label: 'あり',
     },
   ],
+  rafter_direction: [
+    {
+      id: 1,
+      label: '垂直垂木',
+    },
+    {
+      id: 2,
+      label: '水平垂木',
+    },
+  ],
+  leak_trace: [
+    {
+      id: 1,
+      label: 'あり',
+    },
+    {
+      id: 2,
+      label: 'なし',
+    },
+  ],
 }
 
 export default function RadioEtc({

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

@@ -1,7 +1,7 @@
 import type { SurveyDetailRequest } from '@/types/Survey'
 import { useEffect, useState } from 'react'
 
-type SelectBoxKeys =
+export type SelectBoxKeys =
   | 'installation_system'
   | 'construction_year'
   | 'roof_shape'
@@ -33,7 +33,7 @@ const translateJapanese: Record<SelectBoxKeys, string> = {
   installation_availability: '屋根製品名 設置可否確認',
 }
 
-const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string }[]> = {
+export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string }[]> = {
   installation_system: [
     {
       id: 1,