2025-05-28 17:09:14 +09:00
15 changed files with 265 additions and 106 deletions
--- a/.env.development
+++ b/.env.development
@ -2,7 +2,7 @@ NEXT_PUBLIC_RUN_MODE=development
 # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
 # 다시 로컬에서 개발할때는 localhost로 변경
 #route handler
-NEXT_PUBLIC_API_URL=http://172.30.1.65:3000
+NEXT_PUBLIC_API_URL=http://172.30.1.23:3000

 #qsp 로그인 api
 NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
@ -20,7 +20,7 @@ DB_PORT=3306

 SMTP_HOST=autodiscover.qcells.com
 SMTP_PORT=25
-SMTP_SECURE=true
+SMTP_SECURE=false
 SMTP_USER=hss404.u021@cleverse.dev
 SMTP_PASSWORD=0000
 SMTP_FROM=qsalesplatform@qcells.com
--- a/.env.localhost
+++ b/.env.localhost
@ -2,7 +2,7 @@ NEXT_PUBLIC_RUN_MODE=local
 # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
 # 다시 로컬에서 개발할때는 localhost로 변경
 #route handler
-NEXT_PUBLIC_API_URL=http://172.30.1.65:3000
+NEXT_PUBLIC_API_URL=http://172.30.1.23:3000

 #qsp 로그인 api
 NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
@ -20,7 +20,7 @@ DB_PORT=3306

 SMTP_HOST=autodiscover.qcells.com
 SMTP_PORT=25
-SMTP_SECURE=true
+SMTP_SECURE=false
 SMTP_USER=hss404.u021@cleverse.dev
 SMTP_PASSWORD=0000
 SMTP_FROM=qsalesplatform@qcells.com
--- a/src/app/api/comm-code/route.ts
+++ b/src/app/api/comm-code/route.ts
@ -20,7 +20,6 @@ export async function GET(request: NextRequest) {
    if (!headCd) {
      return NextResponse.json({ error: `${headCode}를 찾을 수 없습니다` }, { status: 404 })
    }
-
    // @ts-ignore
    const roofMaterials: CommCode[] = await prisma.BC_COMM_L.findMany({
      where: {
@ -35,10 +34,29 @@ export async function GET(request: NextRequest) {
        CODE: 'asc',
      },
    })
-
+    if (headCode === 'SALES_OFFICE_CD') {
+      return getSaleOffice(headCd.HEAD_CD)
+    }
    return NextResponse.json(roofMaterials)
  } catch (error) {
    console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
  }
 }
+
+const getSaleOffice = async (headCode: string) => {
+  // @ts-ignore
+  const commCodeSaleOffice: CommCode[] = await prisma.BC_COMM_L.findMany({
+    where: {
+      HEAD_CD: headCode,
+      REF_NUM1: 1,
+    },
+    select: {
+      CODE: true,
+      CODE_JP: true,
+      REF_CHR1: true,
+      REF_NUM1: true,
+    },
+  })
+  return NextResponse.json(commCodeSaleOffice)
+}
--- a/src/app/pdf/survey-sale/[id]/page.tsx
+++ b/src/app/pdf/survey-sale/[id]/page.tsx
--- a/src/components/pdf/SurveySaleDownloadPdf.tsx
+++ b/src/components/pdf/SurveySaleDownloadPdf.tsx
@ -1,10 +1,30 @@
 'use client'

-import { useRef } 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 { setIsShow } = useSpinnerStore()
+
  const targetRef = useRef<HTMLDivElement>(null)
+  const isGeneratedRef = useRef(false)
+
+  useEffect(() => {
+    setIsShow(true)
+    if (isLoadingSurveyDetail || !surveyDetail || isGeneratedRef.current) return
+    isGeneratedRef.current = true
+    handleDownPdf()
+  }, [surveyDetail?.id, isLoadingSurveyDetail])
+
  const handleDownPdf = () => {
    const options = {
      method: 'open' as const,
@ -28,14 +48,31 @@ export default function SurveySaleDownloadPdf() {
      },
    }

-    generatePDF(targetRef, options)
-    // generatePDF(targetRef, { filename: 'page.pdf' })
+    generatePDF(targetRef, options).then(() => {
+      setIsShow(false)
+      router.push(`/survey-sale/${id}`)
+    })
  }
+  const supplementList = supplementaryFacilities
+    .filter((facility) => surveyDetail?.detailInfo?.supplementaryFacilities?.includes(facility.id.toString()))
+    .map((facility) => facility.name)
+
  return (
    <>
-      <button onClick={handleDownPdf}>down</button>
-      <div ref={targetRef} style={{ boxSizing: 'border-box' }}>
-        <div style={{ margin: '0 auto', padding: 0, maxWidth: '800px', minWidth: '800px' }}>
+      <div
+        ref={targetRef}
+        style={{
+          width: '794px', // A4 너비
+          minHeight: '1123px', // A4 높이
+          transform: 'scale(1.0)',
+          transformOrigin: 'top left',
+          padding: '20px',
+          boxSizing: 'border-box',
+          backgroundColor: '#fff',
+          fontSize: '12px',
+        }}
+      >
+        <div>
          <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
@ -46,12 +83,14 @@ export default function SurveySaleDownloadPdf() {
                  現地明登施工店名
                </p>
                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>
-                  Sheet2 No.4Sheet2
+                  {surveyDetail?.store ?? '-'}
                </p>
              </div>
              <div style={{ float: 'right' }}>
                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#101010', fontWeight: 500, fontFamily: 'M-Gothic' }}>現地阴買日</p>
-                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>2025.05.09</p>
+                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>
+                  {surveyDetail?.investigationDate ?? '-'}
+                </p>
              </div>
            </div>
          </div>
@ -86,7 +125,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    Sheet2No.1
+                    {surveyDetail?.customerName ?? '-'}
                  </td>
                </tr>
                <tr>
@ -115,7 +154,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    Sheet2No.2
+                    {surveyDetail?.postCode ? `(${surveyDetail?.postCode}) ${surveyDetail?.address} ${surveyDetail?.addressDetail}` : '-'}
                  </td>
                </tr>
              </tbody>
@ -153,7 +192,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    Sheet2No.1
+                    {surveyDetail?.detailInfo?.contractCapacity ?? '-'}
                  </td>
                  <th
                    style={{
@ -180,7 +219,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    Sheet2No.1
+                    {surveyDetail?.detailInfo?.retailCompany ?? '-'}
                  </td>
                </tr>
                <tr>
@ -210,7 +249,11 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    Sheet2No.7 選式回答表示/自由入力回答表示
+                    {supplementList === null && surveyDetail?.detailInfo?.supplementaryFacilitiesEtc === null
+                      ? '-'
+                      : surveyDetail?.detailInfo?.supplementaryFacilitiesEtc
+                      ? `${supplementList.join(', ')}, ${surveyDetail?.detailInfo?.supplementaryFacilitiesEtc}`
+                      : supplementList.join(', ')}
                  </td>
                </tr>
                <tr>
@ -240,7 +283,16 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    Sheet2No.8 選択式回表示/自由入力回表
+                    {/* {selectBoxOptions.installationSystem.find ((system) => system.id.toString() === surveyDetail?.detailInfo?.installationSystem)
+                      ?.name ?? surveyDetail?.detailInfo?.installationSystemEtc !== null
+                      ? `${surveyDetail?.detailInfo?.installationSystemEtc}`
+                      : '-'} */}
+                    {surveyDetail?.detailInfo?.installationSystem === null && surveyDetail?.detailInfo?.installationSystemEtc === null
+                      ? '-'
+                      : surveyDetail?.detailInfo?.installationSystemEtc
+                      ? `${surveyDetail?.detailInfo?.installationSystemEtc}`
+                      : selectBoxOptions.installationSystem.find((system) => system.id.toString() === surveyDetail?.detailInfo?.installationSystem)
+                          ?.name}
                  </td>
                </tr>
              </tbody>
@ -278,7 +330,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.9
+                    {surveyDetail?.detailInfo?.constructionYear === '1' ? '新築' : `既築 (${surveyDetail?.detailInfo?.constructionYear}年)`}
                  </td>
                  <th
                    style={{
@ -305,7 +357,13 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.10
+                    {surveyDetail?.detailInfo?.roofMaterial === null && surveyDetail?.detailInfo?.roofMaterialEtc === null
+                      ? '-'
+                      : roofMaterial
+                          .filter((material) => surveyDetail?.detailInfo?.roofMaterial?.includes(material.id.toString()))
+                          .map((material) => material.name)
+                          .join(', ')}
+                    {surveyDetail?.detailInfo?.roofMaterialEtc ? `, ${surveyDetail?.detailInfo?.roofMaterialEtc}` : ''}
                  </td>
                  <th
                    style={{
@ -332,7 +390,8 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.11
+                    {selectBoxOptions.roofShape.find((shape) => shape.id.toString() === surveyDetail?.detailInfo?.roofShape)?.name ??
+                      (surveyDetail?.detailInfo?.roofShapeEtc ? ` ${surveyDetail?.detailInfo?.roofShapeEtc}` : '-')}
                  </td>
                </tr>
                <tr>
@ -361,7 +420,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.12
+                    {surveyDetail?.detailInfo?.roofSlope ? `${surveyDetail?.detailInfo?.roofSlope} 寸` : '-'}
                  </td>
                  <th
                    style={{
@ -389,7 +448,8 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.13
+                    {radioEtcData.houseStructure.find((structure) => structure.id.toString() === surveyDetail?.detailInfo?.houseStructure)?.label ??
+                      (surveyDetail?.detailInfo?.houseStructureEtc ? ` ${surveyDetail?.detailInfo?.houseStructureEtc}` : '-')}
                  </td>
                </tr>
                <tr>
@ -418,7 +478,12 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.14
+                    {/* {surveyDetail?.detailInfo?.rafterMaterial === null && surveyDetail?.detailInfo?.rafterMaterialEtc === null
+                      ? '-'
+                      : radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
+                        surveyDetail?.detailInfo?.rafterMaterialEtc} */}
+                    {radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
+                      (surveyDetail?.detailInfo?.rafterMaterialEtc ? ` ${surveyDetail?.detailInfo?.rafterMaterialEtc}` : '-')}
                  </td>
                  <th
                    style={{
@ -446,7 +511,8 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.15
+                    {selectBoxOptions.rafterSize.find((size) => size.id.toString() === surveyDetail?.detailInfo?.rafterSize)?.name ??
+                      (surveyDetail?.detailInfo?.rafterSizeEtc ? ` ${surveyDetail?.detailInfo?.rafterSizeEtc}` : '-')}
                  </td>
                </tr>
                <tr>
@ -463,7 +529,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    垂木ビッチ
+                    垂木ピッチ
                  </th>
                  <td
                    style={{
@ -475,7 +541,8 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.16
+                    {selectBoxOptions.rafterPitch.find((pitch) => pitch.id.toString() === surveyDetail?.detailInfo?.rafterPitch)?.name ??
+                      (surveyDetail?.detailInfo?.rafterPitchEtc ? ` ${surveyDetail?.detailInfo?.rafterPitchEtc}` : '-')}
                  </td>
                  <th
                    style={{
@ -503,7 +570,8 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.17
+                    {radioEtcData.rafterDirection.find((direction) => direction.id.toString() === surveyDetail?.detailInfo?.rafterDirection)?.label ??
+                      '-'}
                  </td>
                </tr>
                <tr>
@ -532,7 +600,8 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.18
+                    {selectBoxOptions.openFieldPlateKind.find((kind) => kind.id.toString() === surveyDetail?.detailInfo?.openFieldPlateKind)?.name ??
+                      (surveyDetail?.detailInfo?.openFieldPlateKindEtc ? `${surveyDetail?.detailInfo?.openFieldPlateKindEtc}` : '-')}
                  </td>
                  <th
                    style={{
@ -560,7 +629,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.19
+                    {surveyDetail?.detailInfo?.openFieldPlateThickness ? `${surveyDetail?.detailInfo?.openFieldPlateThickness}mm` : '-'}
                  </td>
                </tr>
                <tr>
@ -590,7 +659,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.20
+                    {surveyDetail?.detailInfo?.leakTrace ? 'あり' : 'なし'}
                  </td>
                </tr>
                <tr>
@ -620,7 +689,8 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.21
+                    {radioEtcData.waterproofMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.waterproofMaterial)
+                      ?.label ?? (surveyDetail?.detailInfo?.waterproofMaterialEtc ? ` ${surveyDetail?.detailInfo?.waterproofMaterialEtc}` : '-')}
                  </td>
                </tr>
                <tr>
@ -650,7 +720,11 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.22
+                    {
+                      radioEtcData.insulationPresence.find((presence) => presence.id.toString() === surveyDetail?.detailInfo?.insulationPresence)
+                        ?.label
+                    }
+                    {surveyDetail?.detailInfo?.insulationPresenceEtc ? `, ${surveyDetail?.detailInfo?.insulationPresenceEtc}` : ''}
                  </td>
                </tr>
                <tr>
@ -680,7 +754,8 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.23
+                    {radioEtcData.structureOrder.find((order) => order.id.toString() === surveyDetail?.detailInfo?.structureOrder)?.label ??
+                      (surveyDetail?.detailInfo?.structureOrderEtc ? `${surveyDetail?.detailInfo?.structureOrderEtc}` : '-')}
                  </td>
                </tr>
              </tbody>
@ -718,7 +793,12 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    No.23
+                    {surveyDetail?.detailInfo?.installationAvailability === null && surveyDetail.detailInfo?.installationAvailabilityEtc === null
+                      ? '-'
+                      : selectBoxOptions.installationAvailability.find(
+                          (availability) => availability.id.toString() === surveyDetail?.detailInfo?.installationAvailability,
+                        )?.name}
+                    {surveyDetail?.detailInfo?.installationAvailabilityEtc ? `, ${surveyDetail?.detailInfo?.installationAvailabilityEtc}` : ''}
                  </td>
                </tr>
              </tbody>
@ -738,7 +818,7 @@ export default function SurveySaleDownloadPdf() {
                height: '150px',
              }}
            >
-              No.25
+              {surveyDetail?.detailInfo?.memo ?? '-'}
            </div>
          </div>
        </div>
--- a/src/components/popup/SurveySaleSubmitPopup.tsx
+++ b/src/components/popup/SurveySaleSubmitPopup.tsx
@ -1,15 +1,20 @@
 import Image from 'next/image'
 import { usePopupController } from '@/store/popupController'
 import { useParams } from 'next/navigation'
-import { useServey } from '@/hooks/useSurvey'
-import { useState } from 'react'
+import { useSurvey } from '@/hooks/useSurvey'
+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
-  reference: string
+  receiver: string[] | string
+  reference: string | null
  title: string
  contents: string
 }
@ -20,31 +25,46 @@ interface FormField {
  required: boolean
 }

-const FORM_FIELDS: FormField[] = [
-  { id: 'store', name: '提出販売店', required: true },
-  { id: 'sender', name: '発送者', required: true },
-  { id: 'receiver', name: '受信者', required: true },
-  { id: 'reference', name: '参考', required: false },
-  { id: 'title', name: 'タイトル', required: true },
-  { id: 'contents', name: '内容', required: true },
-]
-
 export default function SurveySaleSubmitPopup() {
  const popupController = usePopupController()
  const { session } = useSessionStore()
  const params = useParams()
  const routeId = params.id

+  const { setIsShow } = useSpinnerStore()
+  const [commCodeList, setCommCodeList] = useState<CommCode[]>([])
+
+  const { getCommCode } = useCommCode()
+
+  useEffect(() => {
+    if (session?.isLoggedIn && session?.role === 'Admin') {
+      getCommCode('SALES_OFFICE_CD').then((codes) => {
+        setCommCodeList(codes)
+      })
+    }
+  }, [session])
+
+  const FORM_FIELDS: FormField[] = [
+    { id: 'saleBase', name: '提出地点選択', required: session?.role === 'Admin' },
+    { id: 'store', name: '提出販売店', required: true },
+    { id: 'sender', name: '発送者', required: true },
+    { id: 'receiver', name: '受信者', required: true },
+    { id: 'reference', name: '参考', required: false },
+    { id: 'title', name: 'タイトル', required: true },
+    { id: 'contents', name: '内容', required: true },
+  ]
+
  const [submitData, setSubmitData] = useState<SubmitFormData>({
+    saleBase: null,
    store: '',
    sender: session?.email ?? '',
-    receiver: '',
-    reference: '',
+    receiver: [],
+    reference: null,
    title: '[HANASYS現地調査] 調査物件が提出.',
    contents: '',
  })

-  const { submitSurvey, isSubmittingSurvey } = useServey(Number(routeId))
+  const { submitSurvey, isSubmittingSurvey } = useSurvey(Number(routeId))

  const handleInputChange = (field: keyof SubmitFormData, value: string) => {
    setSubmitData((prev) => ({ ...prev, [field]: value }))
@ -54,26 +74,40 @@ export default function SurveySaleSubmitPopup() {
    const requiredFields = FORM_FIELDS.filter((field) => field.required)

    for (const field of requiredFields) {
-      if (!data[field.id].trim()) {
+      if (data[field.id]?.length === 0) {
+        alert(`${field.name}は必須入力項目です。`)
        const element = document.getElementById(field.id)
        if (element) {
          element.focus()
        }
-        alert(`${field.name}は必須入力項目です。`)
        return false
      }
    }
-
    return true
  }

  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('メール送信に失敗しました。')
+          })
+          .finally(() => {
+            setIsShow(false)
+          })
      })
    }
  }
@ -83,9 +117,12 @@ export default function SurveySaleSubmitPopup() {
  }

  const renderFormField = (field: FormField) => {
-    // const isReadOnly = (field.id === 'store' && session?.role !== 'Partner') || (field.id === 'receiver' && session?.role !== 'Partner')
    const isReadOnly = false

+    if (field.id === 'saleBase' && session?.role !== 'Admin') {
+      return null
+    }
+
    return (
      <div className="data-input-form-bx" key={field.id}>
        <div className="data-input-form-tit">
@ -96,18 +133,43 @@ export default function SurveySaleSubmitPopup() {
            <textarea
              className="textarea-form"
              id={field.id}
-              value={submitData[field.id]}
+              value={submitData[field.id] ?? ''}
              onChange={(e) => handleInputChange(field.id, e.target.value)}
            />
          ) : (
-            <input
-              className="input-frame"
-              type="text"
-              id={field.id}
-              value={submitData[field.id]}
-              onChange={(e) => handleInputChange(field.id, e.target.value)}
-              readOnly={isReadOnly}
-            />
+            <>
+              {field.id === 'saleBase' && session?.role === 'Admin' ? (
+                <select
+                  className="select-form"
+                  id={field.id}
+                  value={submitData[field.id] ?? ''}
+                  onChange={(e) => {
+                    const selectedOffice = commCodeList.find((item) => item.code === e.target.value)
+                    if (selectedOffice) {
+                      //@ts-ignore
+                      const receiver = selectedOffice.REF_CHR1.split(';')
+                      setSubmitData((prev) => ({ ...prev, receiver: receiver, saleBase: e.target.value }))
+                    }
+                  }}
+                >
+                  <option value="">選択してください</option>
+                  {commCodeList.map((item) => (
+                    <option key={item.code} value={item.code}>
+                      {item.codeJp}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  className="input-frame"
+                  type="text"
+                  id={field.id}
+                  value={submitData[field.id] ?? ''}
+                  onChange={(e) => handleInputChange(field.id, e.target.value)}
+                  readOnly={isReadOnly}
+                />
+              )}
+            </>
          )}
        </div>
      </div>
--- a/src/components/popup/ZipCodePopup.tsx
+++ b/src/components/popup/ZipCodePopup.tsx
@ -1,6 +1,6 @@
 'use client'

-import { useServey } from '@/hooks/useSurvey'
+import { useSurvey } from '@/hooks/useSurvey'
 import { useAddressStore } from '@/store/addressStore'
 import { usePopupController } from '@/store/popupController'
 import { useState } from 'react'
@ -19,7 +19,7 @@ type Address = {
 export default function ZipCodePopup() {
  const [searchValue, setSearchValue] = useState('') //search 데이터 유무
  const { setAddressData } = useAddressStore()
-  const { getZipCode } = useServey()
+  const { getZipCode } = useSurvey()
  const [addressInfo, setAddressInfo] = useState<Address[] | null>([])

  const popupController = usePopupController()
--- a/src/components/survey-sale/detail/ButtonForm.tsx
+++ b/src/components/survey-sale/detail/ButtonForm.tsx
@ -4,7 +4,7 @@ import type { Mode, SurveyBasicRequest, SurveyDetailInfo, SurveyDetailRequest }
 import { useSessionStore } from '@/store/session'
 import { useEffect, useState } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
-import { requiredFields, useServey } from '@/hooks/useSurvey'
+import { requiredFields, useSurvey } from '@/hooks/useSurvey'
 import { usePopupController } from '@/store/popupController'

 export default function ButtonForm(props: {
@ -72,8 +72,8 @@ export default function ButtonForm(props: {
  // 저장/임시저장/수정
  const id = Number(routeId) ? Number(routeId) : Number(idParam)

-  const { deleteSurvey, updateSurvey, isDeletingSurvey, isUpdatingSurvey } = useServey(Number(id))
-  const { validateSurveyDetail, createSurvey, isCreatingSurvey } = useServey()
+  const { deleteSurvey, updateSurvey, isDeletingSurvey, isUpdatingSurvey } = useSurvey(Number(id))
+  const { validateSurveyDetail, createSurvey, isCreatingSurvey } = useSurvey()

  const handleSave = (isTemporary: boolean, isSubmitProcess = false) => {
    const emptyField = validateSurveyDetail(props.data.roof)
--- a/src/components/survey-sale/detail/DataTable.tsx
+++ b/src/components/survey-sale/detail/DataTable.tsx
@ -1,13 +1,14 @@
 'use client'

-import { useServey } from '@/hooks/useSurvey'
-import { useParams } from 'next/navigation'
+import { useSurvey } from '@/hooks/useSurvey'
+import { useParams, useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 import DetailForm from './DetailForm'

 export default function DataTable() {
  const params = useParams()
  const id = params.id
+  const router = useRouter()

  useEffect(() => {
    if (Number.isNaN(Number(id))) {
@ -16,7 +17,7 @@ export default function DataTable() {
    }
  }, [id])

-  const { surveyDetail, isLoadingSurveyDetail } = useServey(Number(id))
+  const { surveyDetail, isLoadingSurveyDetail } = useSurvey(Number(id))

  if (isLoadingSurveyDetail) {
    return <div>Loading...</div>
@ -67,7 +68,7 @@ export default function DataTable() {
            <tr>
              <th>ダウンロード</th>
              <td>
-                <button className="data-down">
+                <button className="data-down" onClick={() => router.push(`/pdf/survey-sale/${id}`)}>
                  HWJ現地調査票確認<i className="down-icon"></i>
                </button>
              </td>
--- a/src/components/survey-sale/detail/DetailForm.tsx
+++ b/src/components/survey-sale/detail/DetailForm.tsx
@ -6,7 +6,7 @@ import ButtonForm from './ButtonForm'
 import BasicForm from './BasicForm'
 import RoofForm from './RoofForm'
 import { useParams, useSearchParams } from 'next/navigation'
-import { useServey } from '@/hooks/useSurvey'
+import { useSurvey } from '@/hooks/useSurvey'

 const roofInfoForm: SurveyDetailRequest = {
  contractCapacity: null,
@ -71,7 +71,7 @@ export default function DetailForm() {
  const modeset = Number(routeId) ? 'READ' : idParam ? 'EDIT' : 'CREATE'
  const id = Number(routeId) ? Number(routeId) : Number(idParam)

-  const { surveyDetail, validateSurveyDetail } = useServey(Number(id))
+  const { surveyDetail, validateSurveyDetail } = useSurvey(Number(id))

  const [mode, setMode] = useState<Mode>(modeset)
  const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(basicInfoForm)
--- a/src/components/survey-sale/detail/RoofForm.tsx
+++ b/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,
@ -312,6 +306,7 @@ export default function RoofForm(props: {
              </div>
              <MultiCheck mode={mode} column="supplementaryFacilities" roofInfo={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
            </div>
+            {/* 설치 희망 시스템 */}
            <div className="data-input-form-bx">
              <div className="data-input-form-tit red-f">設置希望システム</div>
              <SelectedBox mode={mode} column="installationSystem" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
@ -437,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">
              {/* 지붕 제품명 설치 가능 여부 확인 */}
--- a/src/components/survey-sale/list/ListTable.tsx
+++ b/src/components/survey-sale/list/ListTable.tsx
@ -1,7 +1,7 @@
 'use client'

 import LoadMoreButton from '@/components/LoadMoreButton'
-import { useServey } from '@/hooks/useSurvey'
+import { useSurvey } from '@/hooks/useSurvey'
 import { useEffect, useState } from 'react'
 import { useRouter, usePathname } from 'next/navigation'
 import SearchForm from './SearchForm'
@ -13,7 +13,7 @@ export default function ListTable() {
  const router = useRouter()
  const pathname = usePathname()

-  const { surveyList, isLoadingSurveyList } = useServey()
+  const { surveyList, isLoadingSurveyList } = useSurvey()
  const { offset, setOffset } = useSurveyFilterStore()

  const { session } = useSessionStore()
@ -54,12 +54,12 @@ export default function ListTable() {
            {heldSurveyList.map((survey) => (
              <li className="sale-list-item cursor-pointer" key={survey.id} onClick={() => handleDetailClick(survey.id)}>
                <div className="sale-item-bx">
-                  <div className="sale-item-date-bx">
+                  <div className="sale-item-date-bx"> 
                    <div className="sale-item-num">{survey.srlNo}</div>
                    <div className="sale-item-date">{survey.investigationDate}</div>
                  </div>
-                  <div className="sale-item-tit">{survey.buildingName}</div>
-                  <div className="sale-item-customer">{survey.customerName}</div>
+                  <div className="sale-item-tit">{survey.buildingName === null ? '-' : survey.buildingName}</div>
+                  <div className="sale-item-customer">{survey.customerName === null ? '-' : survey.customerName}</div>
                  <div className="sale-item-update-bx">
                    <div className="sale-item-name">{survey.representative}</div>
                    <div className="sale-item-update">{new Date(survey.uptDt).toLocaleString()}</div>
--- a/src/config/config.local.ts
+++ b/src/config/config.local.ts
@ -1,7 +1,7 @@
 import getConfigs from '@/config/config.common'

 // 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 local 환경에 맞는 값을 지정합니다.)
-const baseUrl = 'http://localhost:3000'
+const baseUrl = 'http://172.30.1.23:3000'
 const mode = 'local'

 // 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.
--- a/src/hooks/useSurvey.ts
+++ b/src/hooks/useSurvey.ts
@ -54,7 +54,7 @@ type ZipCode = {
  kana3: string
 }

-export function useServey(id?: number): {
+export function useSurvey(id?: number): {
  surveyList: { data: SurveyBasicInfo[]; count: number } | {}
  surveyDetail: SurveyBasicInfo | null
  isLoadingSurveyList: boolean
--- a/src/libs/mailer.ts
+++ b/src/libs/mailer.ts
@ -1,3 +1,5 @@
+'use server'
+
 import nodemailer from 'nodemailer'

 interface EmailParams {
@ -13,6 +15,7 @@ export async function sendEmail({ to, cc, subject, content }: EmailParams): Prom
    host: process.env.SMTP_HOST,
    port: Number(process.env.SMTP_PORT),
    secure: process.env.SMTP_SECURE === 'true',
+    requireTLS: true,
    auth: {
      user: process.env.SMTP_USER,
      pass: process.env.SMTP_PASSWORD,