feat: implement spinning when generate survey-sale pdf

- 조사매물 pdf 다운로드 기능 완성
- 지붕 정보 주택 구조 순서 radiobox로 변경경

src/components/pdf/SurveySaleDownloadPdf.tsx

@@ -1,27 +1,29 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef } from 'react'
 import generatePDF, { Margin, Resolution } from 'react-to-pdf'
 import { useParams, useRouter } from 'next/navigation'
 import { useSurvey } from '@/hooks/useSurvey'
 import { radioEtcData, roofMaterial, selectBoxOptions, supplementaryFacilities } from '../survey-sale/detail/RoofForm'
+import { useSpinnerStore } from '@/store/spinnerStore'
 
 export default function SurveySaleDownloadPdf() {
   const params = useParams()
   const id = params.id
+  const router = useRouter()
 
   const { surveyDetail, isLoadingSurveyDetail } = useSurvey(Number(id))
-  const [isLoading, setIsLoading] = useState(false)
+  const { setIsShow } = useSpinnerStore()
-  const router = useRouter()
 
   const targetRef = useRef<HTMLDivElement>(null)
   const isGeneratedRef = useRef(false)
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   if (isLoadingSurveyDetail || !surveyDetail || isGeneratedRef.current) return
+    setIsShow(true)
-  //   isGeneratedRef.current = true
+    if (isLoadingSurveyDetail || !surveyDetail || isGeneratedRef.current) return
-  //   handleDownPdf()
+    isGeneratedRef.current = true
-  // }, [surveyDetail?.id, isLoadingSurveyDetail])
+    handleDownPdf()
+  }, [surveyDetail?.id, isLoadingSurveyDetail])
 
   const handleDownPdf = () => {
     const options = {
@@ -47,6 +49,7 @@ export default function SurveySaleDownloadPdf() {
     }
 
     generatePDF(targetRef, options).then(() => {
+      setIsShow(false)
       router.push(`/survey-sale/${id}`)
     })
   }
@@ -56,11 +59,9 @@ export default function SurveySaleDownloadPdf() {
 
   return (
     <>
-      {/* <button onClick={handleDownPdf}>down</button> */}
       <div
         ref={targetRef}
         style={{
-          //  boxSizing: 'border-box'
           width: '794px', // A4 너비
           minHeight: '1123px', // A4 높이
           transform: 'scale(1.0)',
@@ -71,9 +72,7 @@ export default function SurveySaleDownloadPdf() {
           fontSize: '12px',
         }}
       >
-        <div
+        <div>
-        // style={{ margin: '0 auto', padding: 0, maxWidth: '800px', minWidth: '800px' }}
-        >
           <div style={{ padding: '20px 20px 50px', borderBottom: '2px solid #2E3A59' }}>
             <div style={{ float: 'left', verticalAlign: 'middle', fontSize: '18px', color: '#101010', fontWeight: 600, fontFamily: 'M-Gothic' }}>
               HWJ 現地調査シート1/2
@@ -449,8 +448,8 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {surveyDetail?.detailInfo?.houseStructure ? '木製' : ''}
+                    {radioEtcData.houseStructure.find((structure) => structure.id.toString() === surveyDetail?.detailInfo?.houseStructure)?.label ??
-                    {surveyDetail?.detailInfo?.houseStructureEtc ? ` ${surveyDetail?.detailInfo?.houseStructureEtc}` : '-'}
+                      (surveyDetail?.detailInfo?.houseStructureEtc ? ` ${surveyDetail?.detailInfo?.houseStructureEtc}` : '-')}
                   </td>
                 </tr>
                 <tr>
@@ -479,10 +478,12 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {surveyDetail?.detailInfo?.rafterMaterial === null && surveyDetail?.detailInfo?.rafterMaterialEtc === null
+                    {/* {surveyDetail?.detailInfo?.rafterMaterial === null && surveyDetail?.detailInfo?.rafterMaterialEtc === null
                       ? '-'
                       : radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
-                        surveyDetail?.detailInfo?.rafterMaterialEtc}
+                        surveyDetail?.detailInfo?.rafterMaterialEtc} */}
+                    {radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
+                      (surveyDetail?.detailInfo?.rafterMaterialEtc ? ` ${surveyDetail?.detailInfo?.rafterMaterialEtc}` : '-')}
                   </td>
                   <th
                     style={{
@@ -723,7 +724,7 @@ export default function SurveySaleDownloadPdf() {
                       radioEtcData.insulationPresence.find((presence) => presence.id.toString() === surveyDetail?.detailInfo?.insulationPresence)
                         ?.label
                     }
-                    {surveyDetail?.detailInfo?.insulationPresenceEtc ? ` ${surveyDetail?.detailInfo?.insulationPresenceEtc}` : '-'}
+                    {surveyDetail?.detailInfo?.insulationPresenceEtc ? `, ${surveyDetail?.detailInfo?.insulationPresenceEtc}` : ''}
                   </td>
                 </tr>
                 <tr>
@@ -753,7 +754,7 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {selectBoxOptions.structureOrder.find((order) => order.id.toString() === surveyDetail?.detailInfo?.structureOrder)?.name ??
+                    {radioEtcData.structureOrder.find((order) => order.id.toString() === surveyDetail?.detailInfo?.structureOrder)?.label ??
                       (surveyDetail?.detailInfo?.structureOrderEtc ? `${surveyDetail?.detailInfo?.structureOrderEtc}` : '-')}
                   </td>
                 </tr>
@@ -792,12 +793,12 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {
+                    {surveyDetail?.detailInfo?.installationAvailability === null && surveyDetail.detailInfo?.installationAvailabilityEtc === null
-                      selectBoxOptions.installationAvailability.find(
+                      ? '-'
+                      : selectBoxOptions.installationAvailability.find(
                           (availability) => availability.id.toString() === surveyDetail?.detailInfo?.installationAvailability,
-                      )?.name
+                        )?.name}
-                    }
+                    {surveyDetail?.detailInfo?.installationAvailabilityEtc ? `, ${surveyDetail?.detailInfo?.installationAvailabilityEtc}` : ''}
-                    {surveyDetail?.detailInfo?.installationAvailabilityEtc ? ` ${surveyDetail?.detailInfo?.installationAvailabilityEtc}` : '-'}
                   </td>
                 </tr>
               </tbody>

src/components/popup/SurveySaleSubmitPopup.tsx

@@ -6,12 +6,14 @@ import { useEffect, useState } from 'react'
 import { useSessionStore } from '@/store/session'
 import { useCommCode } from '@/hooks/useCommCode'
 import { CommCode } from '@/types/CommCode'
+// import { sendEmail } from '@/libs/mailer'
+import { useSpinnerStore } from '@/store/spinnerStore'
 
 interface SubmitFormData {
   saleBase: string | null
   store: string
   sender: string
-  receiver: string[]
+  receiver: string[] | string
   reference: string | null
   title: string
   contents: string
@@ -29,6 +31,7 @@ export default function SurveySaleSubmitPopup() {
   const params = useParams()
   const routeId = params.id
 
+  const { setIsShow } = useSpinnerStore()
   const [commCodeList, setCommCodeList] = useState<CommCode[]>([])
 
   const { getCommCode } = useCommCode()
@@ -86,10 +89,22 @@ export default function SurveySaleSubmitPopup() {
   const handleSubmit = () => {
     if (validateData(submitData)) {
       window.neoConfirm('送信しますか？ 送信後は変更・修正することはできません。', () => {
+        setIsShow(true)
         submitSurvey({ targetId: submitData.store })
+        // sendEmail({
+        //   to: submitData.receiver,
+        //   subject: submitData.title,
+        //   content: submitData.contents,
+        // })
+        //   .then(() => {
         if (!isSubmittingSurvey) {
           popupController.setSurveySaleSubmitPopup(false)
         }
+        // })
+        // .catch((error) => {
+        //   console.error('Error sending email:', error)
+        //   alert('メール送信に失敗しました。')
+        // })
       })
     }
   }

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

@@ -1,7 +1,14 @@
 import { useState } from 'react'
 import type { Mode, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'
 
-type RadioEtcKeys = 'houseStructure' | 'rafterMaterial' | 'waterproofMaterial' | 'insulationPresence' | 'rafterDirection' | 'leakTrace'
+type RadioEtcKeys =
+  | 'structureOrder'
+  | 'houseStructure'
+  | 'rafterMaterial'
+  | 'waterproofMaterial'
+  | 'insulationPresence'
+  | 'rafterDirection'
+  | 'leakTrace'
 type SelectBoxKeys =
   | 'installationSystem'
   | 'constructionYear'
@@ -9,7 +16,6 @@ type SelectBoxKeys =
   | 'rafterPitch'
   | 'rafterSize'
   | 'openFieldPlateKind'
-  | 'structureOrder'
   | 'installationAvailability'
 
 export const supplementaryFacilities = [
@@ -115,24 +121,6 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
       name: '小幅板', //소판
     },
   ],
-  structureOrder: [
-    {
-      id: 1,
-      name: '屋根材', //지붕재
-    },
-    {
-      id: 2,
-      name: '防水材', //방수재
-    },
-    {
-      id: 3,
-      name: '屋根の基礎', //지붕의기초
-    },
-    {
-      id: 4,
-      name: '垂木', //서까래
-    },
-  ],
   installationAvailability: [
     {
       id: 1,
@@ -146,6 +134,12 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
 }
 
 export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
+  structureOrder: [
+    {
+      id: 1,
+      label: '屋根材 - 防水材 - 屋根の基礎 - 垂木', //지붕재 방수재 지붕의기초 서까래
+    },
+  ],
   houseStructure: [
     {
       id: 1,
@@ -438,7 +432,7 @@ export default function RoofForm(props: {
             <div className="data-input-form-bx">
               {/* 지붕 구조의 순서 */}
               <div className="data-input-form-tit red-f">屋根構造の順序</div>
-              <SelectedBox mode={mode} column="structureOrder" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
+              <RadioSelected mode={mode} column="structureOrder" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
             </div>
             <div className="data-input-form-bx">
               {/* 지붕 제품명 설치 가능 여부 확인 */}