29 changed files with 268 additions and 1973 deletions
--- a/.env.development
+++ b/.env.development
@ -2,11 +2,10 @@ NEXT_PUBLIC_RUN_MODE=development
 # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
 # 다시 로컬에서 개발할때는 localhost로 변경
 #route handler
-NEXT_PUBLIC_API_URL=http://172.30.1.23:3000
+NEXT_PUBLIC_API_URL=http://172.30.1.65:3000

 #qsp 로그인 api
 NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
-# NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com

 #1:1문의 api
 NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
@ -16,11 +15,4 @@ DB_HOST=202.218.61.226
 DB_USER=readonly
 DB_PASSWORD=aAjmFW12iHKW84l1
 DB_DATABASE=qpartners
-DB_PORT=3306
-
-SMTP_HOST=autodiscover.qcells.com
-SMTP_PORT=25
-SMTP_SECURE=false
-SMTP_USER=hss404.u021@cleverse.dev
-SMTP_PASSWORD=0000
-SMTP_FROM=qsalesplatform@qcells.com
+DB_PORT=3306
--- a/.env.localhost
+++ b/.env.localhost
@ -2,11 +2,10 @@ NEXT_PUBLIC_RUN_MODE=local
 # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
 # 다시 로컬에서 개발할때는 localhost로 변경
 #route handler
-NEXT_PUBLIC_API_URL=http://172.30.1.23:3000
+NEXT_PUBLIC_API_URL=http://172.30.1.65:3000

 #qsp 로그인 api
 NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
-# NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com

 #1:1문의 api
 NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
@ -16,11 +15,4 @@ DB_HOST=202.218.61.226
 DB_USER=readonly
 DB_PASSWORD=aAjmFW12iHKW84l1
 DB_DATABASE=qpartners
-DB_PORT=3306
-
-SMTP_HOST=autodiscover.qcells.com
-SMTP_PORT=25
-SMTP_SECURE=false
-SMTP_USER=hss404.u021@cleverse.dev
-SMTP_PASSWORD=0000
-SMTP_FROM=qsalesplatform@qcells.com
+DB_PORT=3306
--- a/.env.production
+++ b/.env.production
@ -3,8 +3,7 @@ NEXT_PUBLIC_RUN_MODE=production
 NEXT_PUBLIC_API_URL=http://1.248.227.176:3000

 #qsp 로그인 api
-# NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
-NEXT_PUBLIC_QSP_API_URL=https://jp.qsalesplatform.com
+NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120

 #1:1문의 api
 NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
@ -14,11 +13,4 @@ DB_HOST=202.218.61.226
 DB_USER=readonly
 DB_PASSWORD=aAjmFW12iHKW84l1
 DB_DATABASE=qpartners
-DB_PORT=3306
-
-SMTP_HOST=autodiscover.qcells.com
-SMTP_PORT=25
-SMTP_SECURE=true
-SMTP_USER=hss404.u021@cleverse.dev
-SMTP_PASSWORD=0000
-SMTP_FROM=qsalesplatform@qcells.com
+DB_PORT=3306
--- a/README.md
+++ b/README.md
@ -64,21 +64,15 @@ session에 있는 role 키로 구분한다
 # 지붕재 적합성 TODO

 ```
-const suitableCheckIcon = (value: string): string => {
-  const iconMap: Record<string, string> = {
-    '×': '/assets/images/sub/compliance_x_icon.svg',
-    'ー': '/assets/images/sub/compliance_quest_icon.svg',
-    default: '/assets/images/sub/compliance_check_icon.svg',
+const suitableCheck = (value: string) => {
+    if (value === '×') {
+      return <i className="compliance-icon x" />
+    } else if (value === 'ー') {
+      return <i className="compliance-icon quest" />
+    } else {
+      return <i className="compliance-icon check" />
+    }
  }
-  return iconMap[value] || iconMap.default
-}
-const suitableCheckMemo = (value: string): string => {
-  if (value === '○') return '設置可'
-  if (value === '×') return '設置不可'
-  if (value === 'ー') return 'お問い合わせください'
-  return `${value}で設置可`
-}
 ```

- src/hooks/useSuitable.ts > suitableCheckIcon(), suitableCheckMemo()
-  - 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
+- 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
--- a/package-lock.json
+++ b/package-lock.json
@ -18,7 +18,6 @@
        "mssql": "^11.0.1",
        "mysql2": "^3.14.1",
        "next": "15.2.4",
-        "nodemailer": "^7.0.3",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-to-pdf": "^2.0.0",
@ -3701,15 +3700,6 @@
      "license": "MIT",
      "optional": true
    },
-    "node_modules/nodemailer": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.3.tgz",
-      "integrity": "sha512-Ajq6Sz1x7cIK3pN6KesGTah+1gnwMnx5gKl3piQlQQE/PwyJ4Mbc8is2psWYxK3RJTVeqsDaCv8ZzXLCDHMTZw==",
-      "license": "MIT-0",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
    "node_modules/open": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/open/-/open-10.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -18,7 +18,6 @@
    "@prisma/client": "^6.7.0",
    "@tanstack/react-query": "^5.71.0",
    "@tanstack/react-query-devtools": "^5.71.0",
-    "@types/nodemailer": "^6.4.17",
    "axios": "^1.8.4",
    "env-cmd": "^10.1.0",
    "iron-session": "^8.0.4",
@ -26,7 +25,6 @@
    "mssql": "^11.0.1",
    "mysql2": "^3.14.1",
    "next": "15.2.4",
-    "nodemailer": "^7.0.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-to-pdf": "^2.0.0",
--- a/src/app/api/comm-code/route.ts
+++ b/src/app/api/comm-code/route.ts
@ -20,6 +20,7 @@ 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: {
@ -34,29 +35,10 @@ 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/api/suitable/route.ts
+++ b/src/app/api/suitable/route.ts
@ -2,15 +2,12 @@ import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/libs/prisma'
 import { Suitable } from '@/types/Suitable'

-export async function POST(request: NextRequest) {
+export async function GET(request: NextRequest) {
  try {
-    const body: Record<string, string> = await request.json()
-    const ids = body.ids
-    const detailIds = body.detailIds
+    const searchParams = request.nextUrl.searchParams

-    if (ids === '' || detailIds === '') {
-      return NextResponse.json({ error: '필수 파라미터가 누락되었습니다' }, { status: 400 })
-    }
+    const ids = searchParams.get('ids')
+    const detailIds = searchParams.get('subIds')

    let query = `
    SELECT 
@ -32,22 +29,28 @@ export async function POST(request: NextRequest) {
            , msd_json.memo
          FROM ms_suitable_detail msd_json
            WHERE msd.main_id = msd_json.main_id
-              AND msd_json.id IN (:detailIds)
          FOR JSON PATH
        ) AS detail
      FROM ms_suitable_detail msd
      GROUP BY msd.main_id
    ) AS details 
      ON msm.id = details.main_id 
-        AND details.main_id IN (:mainIds)
-    WHERE
-      msm.id IN (:mainIds)
+        --ids AND details.main_id IN (:mainIds)
+        --detailIds AND details.id IN (:detailIds)
+    WHERE 1=1
+      --ids AND msm.id IN (:mainIds)
    ORDER BY msm.product_name;
    `

    // 검색 조건 설정
-    query = query.replaceAll(':mainIds', ids)
-    query = query.replaceAll(':detailIds', detailIds)
+    if (ids) {
+      query = query.replaceAll('--ids ', '')
+      query = query.replaceAll(':mainIds', ids)
+      if (detailIds) {
+        query = query.replaceAll('--detailIds ', '')
+        query = query.replaceAll(':detailIds', detailIds)
+      }
+    }

    const suitable: Suitable[] = await prisma.$queryRawUnsafe(query)

@ -57,3 +60,4 @@ export async function POST(request: NextRequest) {
    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
  }
 }
+
--- a/src/app/pdf/page.tsx
+++ b/src/app/pdf/page.tsx
@ -0,0 +1,9 @@
+import DownloadPdf from '@/components/DownloadPDF'
+
+export default function page() {
+  return (
+    <>
+      <DownloadPdf />
+    </>
+  )
+}
--- a/src/app/pdf/suitable/page.tsx
+++ b/src/app/pdf/suitable/page.tsx
@ -1,9 +0,0 @@
-import SuitableDownloadPdf from '@/components/pdf/SuitableDownloadPdf'
-
-export default function page() {
-  return (
-    <>
-      <SuitableDownloadPdf />
-    </>
-  )
-}
--- a/src/app/pdf/survey-sale/[id]/page.tsx
+++ b/src/app/pdf/survey-sale/[id]/page.tsx
@ -1,9 +0,0 @@
-import SurveySaleDownloadPdf from '@/components/pdf/SurveySaleDownloadPdf'
-
-export default function page() {
-  return (
-    <>
-      <SurveySaleDownloadPdf />
-    </>
-  )
-}
--- a/src/components/pdf/SurveySaleDownloadPdf.tsx
+++ b/src/components/pdf/SurveySaleDownloadPdf.tsx
@ -1,30 +1,10 @@
 'use client'

-import { useEffect, useRef } from 'react'
+import { 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()

+export default function DownloadPdf() {
  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,
@ -48,31 +28,14 @@ export default function SurveySaleDownloadPdf() {
      },
    }

-    generatePDF(targetRef, options).then(() => {
-      setIsShow(false)
-      router.push(`/survey-sale/${id}`)
-    })
+    generatePDF(targetRef, options)
+    // generatePDF(targetRef, { filename: 'page.pdf' })
  }
-  const supplementList = supplementaryFacilities
-    .filter((facility) => surveyDetail?.detailInfo?.supplementaryFacilities?.includes(facility.id.toString()))
-    .map((facility) => facility.name)
-
  return (
    <>
-      <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>
+      <button onClick={handleDownPdf}>down</button>
+      <div ref={targetRef} style={{ boxSizing: 'border-box' }}>
+        <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
@ -83,14 +46,12 @@ export default function SurveySaleDownloadPdf() {
                  現地明登施工店名
                </p>
                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>
-                  {surveyDetail?.store ?? '-'}
+                  Sheet2 No.4Sheet2
                </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' }}>
-                  {surveyDetail?.investigationDate ?? '-'}
-                </p>
+                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>2025.05.09</p>
              </div>
            </div>
          </div>
@ -125,7 +86,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {surveyDetail?.customerName ?? '-'}
+                    Sheet2No.1
                  </td>
                </tr>
                <tr>
@ -154,7 +115,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {surveyDetail?.postCode ? `(${surveyDetail?.postCode}) ${surveyDetail?.address} ${surveyDetail?.addressDetail}` : '-'}
+                    Sheet2No.2
                  </td>
                </tr>
              </tbody>
@ -192,7 +153,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {surveyDetail?.detailInfo?.contractCapacity ?? '-'}
+                    Sheet2No.1
                  </td>
                  <th
                    style={{
@ -219,7 +180,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {surveyDetail?.detailInfo?.retailCompany ?? '-'}
+                    Sheet2No.1
                  </td>
                </tr>
                <tr>
@ -249,11 +210,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {supplementList === null && surveyDetail?.detailInfo?.supplementaryFacilitiesEtc === null
-                      ? '-'
-                      : surveyDetail?.detailInfo?.supplementaryFacilitiesEtc
-                      ? `${supplementList.join(', ')}, ${surveyDetail?.detailInfo?.supplementaryFacilitiesEtc}`
-                      : supplementList.join(', ')}
+                    Sheet2No.7 選式回答表示/自由入力回答表示
                  </td>
                </tr>
                <tr>
@ -283,16 +240,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {/* {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}
+                    Sheet2No.8 選択式回表示/自由入力回表
                  </td>
                </tr>
              </tbody>
@ -330,7 +278,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {surveyDetail?.detailInfo?.constructionYear === '1' ? '新築' : `既築 (${surveyDetail?.detailInfo?.constructionYear}年)`}
+                    No.9
                  </td>
                  <th
                    style={{
@ -357,13 +305,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {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}` : ''}
+                    No.10
                  </td>
                  <th
                    style={{
@ -390,8 +332,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {selectBoxOptions.roofShape.find((shape) => shape.id.toString() === surveyDetail?.detailInfo?.roofShape)?.name ??
-                      (surveyDetail?.detailInfo?.roofShapeEtc ? ` ${surveyDetail?.detailInfo?.roofShapeEtc}` : '-')}
+                    No.11
                  </td>
                </tr>
                <tr>
@ -420,7 +361,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {surveyDetail?.detailInfo?.roofSlope ? `${surveyDetail?.detailInfo?.roofSlope} 寸` : '-'}
+                    No.12
                  </td>
                  <th
                    style={{
@ -448,8 +389,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {radioEtcData.houseStructure.find((structure) => structure.id.toString() === surveyDetail?.detailInfo?.houseStructure)?.label ??
-                      (surveyDetail?.detailInfo?.houseStructureEtc ? ` ${surveyDetail?.detailInfo?.houseStructureEtc}` : '-')}
+                    No.13
                  </td>
                </tr>
                <tr>
@ -478,12 +418,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {/* {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}` : '-')}
+                    No.14
                  </td>
                  <th
                    style={{
@ -511,8 +446,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {selectBoxOptions.rafterSize.find((size) => size.id.toString() === surveyDetail?.detailInfo?.rafterSize)?.name ??
-                      (surveyDetail?.detailInfo?.rafterSizeEtc ? ` ${surveyDetail?.detailInfo?.rafterSizeEtc}` : '-')}
+                    No.15
                  </td>
                </tr>
                <tr>
@ -529,7 +463,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    垂木ピッチ
+                    垂木ビッチ
                  </th>
                  <td
                    style={{
@ -541,8 +475,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {selectBoxOptions.rafterPitch.find((pitch) => pitch.id.toString() === surveyDetail?.detailInfo?.rafterPitch)?.name ??
-                      (surveyDetail?.detailInfo?.rafterPitchEtc ? ` ${surveyDetail?.detailInfo?.rafterPitchEtc}` : '-')}
+                    No.16
                  </td>
                  <th
                    style={{
@ -570,8 +503,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {radioEtcData.rafterDirection.find((direction) => direction.id.toString() === surveyDetail?.detailInfo?.rafterDirection)?.label ??
-                      '-'}
+                    No.17
                  </td>
                </tr>
                <tr>
@ -600,8 +532,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {selectBoxOptions.openFieldPlateKind.find((kind) => kind.id.toString() === surveyDetail?.detailInfo?.openFieldPlateKind)?.name ??
-                      (surveyDetail?.detailInfo?.openFieldPlateKindEtc ? `${surveyDetail?.detailInfo?.openFieldPlateKindEtc}` : '-')}
+                    No.18
                  </td>
                  <th
                    style={{
@ -629,7 +560,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {surveyDetail?.detailInfo?.openFieldPlateThickness ? `${surveyDetail?.detailInfo?.openFieldPlateThickness}mm` : '-'}
+                    No.19
                  </td>
                </tr>
                <tr>
@ -659,7 +590,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {surveyDetail?.detailInfo?.leakTrace ? 'あり' : 'なし'}
+                    No.20
                  </td>
                </tr>
                <tr>
@ -689,8 +620,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {radioEtcData.waterproofMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.waterproofMaterial)
-                      ?.label ?? (surveyDetail?.detailInfo?.waterproofMaterialEtc ? ` ${surveyDetail?.detailInfo?.waterproofMaterialEtc}` : '-')}
+                    No.21
                  </td>
                </tr>
                <tr>
@ -720,11 +650,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {
-                      radioEtcData.insulationPresence.find((presence) => presence.id.toString() === surveyDetail?.detailInfo?.insulationPresence)
-                        ?.label
-                    }
-                    {surveyDetail?.detailInfo?.insulationPresenceEtc ? `, ${surveyDetail?.detailInfo?.insulationPresenceEtc}` : ''}
+                    No.22
                  </td>
                </tr>
                <tr>
@ -754,8 +680,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {radioEtcData.structureOrder.find((order) => order.id.toString() === surveyDetail?.detailInfo?.structureOrder)?.label ??
-                      (surveyDetail?.detailInfo?.structureOrderEtc ? `${surveyDetail?.detailInfo?.structureOrderEtc}` : '-')}
+                    No.23
                  </td>
                </tr>
              </tbody>
@ -793,12 +718,7 @@ export default function SurveySaleDownloadPdf() {
                      boxSizing: 'border-box',
                    }}
                  >
-                    {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}` : ''}
+                    No.23
                  </td>
                </tr>
              </tbody>
@ -818,7 +738,7 @@ export default function SurveySaleDownloadPdf() {
                height: '150px',
              }}
            >
-              {surveyDetail?.detailInfo?.memo ?? '-'}
+              No.25
            </div>
          </div>
        </div>
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@ -83,10 +83,6 @@ export default function Login() {
        loginId: account.loginId,
        pwd: account.pwd,
      })
-      // const { data } = await axiosInstance(`${process.env.NEXT_PUBLIC_QSP_API_URL}`).post(`/api/user/login`, {
-      //   loginId: account.loginId,
-      //   pwd: account.pwd,
-      // })

      return data
    },
--- a/src/components/pdf/SuitableDownloadPdf.tsx
+++ b/src/components/pdf/SuitableDownloadPdf.tsx
--- a/src/components/popup/SuitableDetailPopup.tsx
+++ b/src/components/popup/SuitableDetailPopup.tsx
@ -3,13 +3,15 @@
 import Image from 'next/image'
 import { useCallback, useEffect, useState } from 'react'
 import { usePopupController } from '@/store/popupController'
+import { useSuitableStore } from '@/store/useSuitableStore'
 import SuitableDetailPopupButton from './SuitableDetailPopupButton'
 import { useSuitable } from '@/hooks/useSuitable'
-import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
+import { Suitable } from '@/types/Suitable'

 export default function SuitableDetailPopup() {
  const popupController = usePopupController()
-  const { getSelectedItemsData, toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo } = useSuitable()
+  const { getSuitableDetails, serializeSelectedItems } = useSuitable()
+  const { selectedItems } = useSuitableStore()

  const [openItems, setOpenItems] = useState<Set<number>>(new Set())
  const [suitableDetails, setSuitableDetails] = useState<Suitable[]>([])
@ -23,9 +25,14 @@ export default function SuitableDetailPopup() {
    })
  }, [])

+  // 선택된 아이템 상세 데이터 가져오기
+  const getSelectedItemsData = async () => {
+    const serialized: Map<string, string> = serializeSelectedItems()
+    setSuitableDetails(await getSuitableDetails(serialized.get('ids') ?? '', serialized.get('detailIds') ?? ''))
+  }
+
  useEffect(() => {
-    // TODO: 로딩 처리 필요
-    getSelectedItemsData().then((data) => setSuitableDetails(data))
+    getSelectedItemsData()
  }, [])

  return (
@ -45,56 +52,98 @@ export default function SuitableDetailPopup() {
          </div>
          <div className="modal-body">
            <div className="compliance-check-pop-wrap">
-              {suitableDetails.map((item: Suitable) => (
-                <div className={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}>
-                  <div className="check-name-wrap">
-                    <div className="check-name">{item.productName}</div>
-                    <div className="check-name-btn">
-                      <button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button>
-                    </div>
+              <div className={`compliance-check-bx ${openItems.has(1) ? 'act' : ''}`}>
+                <div className="check-name-wrap">
+                  <div className="check-name">アースティ４０</div>
+                  <div className="check-name-btn">
+                    <button className="bx-btn" onClick={() => toggleItemOpen(1)}></button>
                  </div>
-                  <div className="compliance-check-pop-contents">
-                    <div className="check-pop-data-wrap">
-                      <div className="check-pop-data-tit">屋根技研 支持瓦</div>
-                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</div>
-                    </div>
-                    <div className="check-pop-data-wrap">
-                      <div className="check-pop-data-tit">屋根材</div>
-                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</div>
-                    </div>
-                    <div className="check-pop-data-wrap">
-                      <div className="check-pop-data-tit">金具タイプ</div>
-                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</div>
-                    </div>
-                    <div className="check-pop-data-table-wrap">
-                      {toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
-                        <div className="check-pop-data-table" key={subItem.id}>
-                          <div className="pop-data-table-head">
-                            <div className="pop-data-table-head-name">{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</div>
-                            <div className="pop-data-table-head-icon">
-                              <div className="compliance-icon">
-                                <Image src={suitableCheckIcon(subItem.trestleManufacturerProductName)} width={22} height={22} alt="" />
-                              </div>
-                              {subItem.memo && (
-                                <div className="compliance-icon">
-                                  <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
-                                </div>
-                              )}
-                            </div>
+                </div>
+                <div className="compliance-check-pop-contents">
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根技研 支持瓦</div>
+                    <div className="check-pop-data-txt">㈱ダイトー</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根材</div>
+                    <div className="check-pop-data-txt">瓦</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">金具タイプ</div>
+                    <div className="check-pop-data-txt">木ねじ打ち込み式</div>
+                  </div>
+                  <div className="check-pop-data-table-wrap">
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
                          </div>
-                          <div className="pop-data-table-body">{suitableCheckMemo(subItem.trestleManufacturerProductName)}</div>
-                          {subItem.memo && (
-                            <div className="pop-data-table-footer">
-                              <div className="pop-data-table-footer-unit">備考</div>
-                              <div className="pop-data-table-footer-data">{subItem.memo}</div>
-                            </div>
-                          )}
                        </div>
-                      ))}
+                      </div>
+                      <div className="pop-data-table-body">Ｄで設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">
+                          桟木なしの場合は支持金具平ー１で設置可能。その場合水返しが高い為、レベルプレート使用。桟木ありの場合は支持金具平ー２で設置可能
+                        </div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研支持金具</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">設置不可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">お問い合わせください</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
                    </div>
                  </div>
                </div>
-              ))}
+              </div>
            </div>
            <SuitableDetailPopupButton />
          </div>
--- a/src/components/popup/SuitableDetailPopupButton.tsx
+++ b/src/components/popup/SuitableDetailPopupButton.tsx
@ -1,16 +1,10 @@
 'use client'

-import { useRouter } from 'next/navigation'
-import { usePopupController } from '@/store/popupController'
-
 export default function SuitableDetailPopupButton() {
-  const popupController = usePopupController()
-  const router = useRouter()
-
  return (
    <div className="btn-flex-wrap com">
      <div className="btn-bx">
-        <button className="btn-frame n-blue icon" onClick={() => popupController.setSuitableDetailPopup(false)}>
+        <button className="btn-frame n-blue icon">
          閉じる<i className="btn-arr"></i>
        </button>
      </div>
@ -20,13 +14,7 @@ export default function SuitableDetailPopupButton() {
        </button>
      </div>
      <div className="btn-bx">
-        <button
-          className="btn-frame n-blue icon"
-          onClick={async () => {
-            await popupController.setSuitableDetailPopup(false)
-            router.push('/inquiry/regist')
-          }}
-        >
+        <button className="btn-frame n-blue icon">
          1：1お問い合わせ<i className="btn-arr"></i>
        </button>
      </div>
--- a/src/components/popup/SurveySaleSubmitPopup.tsx
+++ b/src/components/popup/SurveySaleSubmitPopup.tsx
@ -1,20 +1,15 @@
 import Image from 'next/image'
 import { usePopupController } from '@/store/popupController'
 import { useParams } from 'next/navigation'
-import { useSurvey } from '@/hooks/useSurvey'
-import { useEffect, useState } from 'react'
+import { useServey } from '@/hooks/useSurvey'
+import { 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[] | string
-  reference: string | null
+  receiver: string
+  reference: string
  title: string
  contents: string
 }
@ -25,46 +20,31 @@ 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: null,
+    receiver: '',
+    reference: '',
    title: '[HANASYS現地調査] 調査物件が提出.',
    contents: '',
  })

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

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

    for (const field of requiredFields) {
-      if (data[field.id]?.length === 0) {
-        alert(`${field.name}は必須入力項目です。`)
+      if (!data[field.id].trim()) {
        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)
-          })
      })
    }
  }
@ -117,12 +83,9 @@ 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">
@ -133,43 +96,18 @@ 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)}
            />
          ) : (
-            <>
-              {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}
-                />
-              )}
-            </>
+            <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 { useSurvey } from '@/hooks/useSurvey'
+import { useServey } 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 } = useSurvey()
+  const { getZipCode } = useServey()
  const [addressInfo, setAddressInfo] = useState<Address[] | null>([])

  const popupController = usePopupController()
--- a/src/components/suitable/SuitableList.tsx
+++ b/src/components/suitable/SuitableList.tsx
@ -9,17 +9,7 @@ import { useSuitableStore } from '@/store/useSuitableStore'
 import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'

 export default function SuitableList() {
-  const {
-    toCodeName,
-    toSuitableDetail,
-    toSuitableDetailIds,
-    suitables,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    isLoading,
-    suitableCheckIcon,
-  } = useSuitable()
+  const { toCodeName, toSuitableDetail, toSuitableDetailIds, suitables, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useSuitable()
  const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
  const [openItems, setOpenItems] = useState<Set<number>>(new Set())
  const observerTarget = useRef<HTMLDivElement>(null)
@ -62,6 +52,20 @@ export default function SuitableList() {
    })
  }, [])

+  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
+  const suitableCheck = useCallback((value: string) => {
+    const iconMap: Record<string, string> = {
+      '×': '/assets/images/sub/compliance_x_icon.svg',
+      ー: '/assets/images/sub/compliance_quest_icon.svg',
+      default: '/assets/images/sub/compliance_check_icon.svg',
+    }
+    return (
+      <div className="compliance-icon">
+        <Image src={iconMap[value] || iconMap.default} width={22} height={22} alt="" />
+      </div>
+    )
+  }, [])
+
  // 아이템 렌더링
  const renderItem = useCallback(
    (item: Suitable) => {
@ -95,9 +99,7 @@ export default function SuitableList() {
                    <label htmlFor={`ch${subItem.id}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</label>
                  </div>
                  <div className="compliance-icon-wrap">
-                    <div className="compliance-icon">
-                      <Image src={suitableCheckIcon(subItem.trestleManufacturerProductName)} width={22} height={22} alt="" />
-                    </div>
+                    {suitableCheck(subItem.trestleManufacturerProductName)}
                    {subItem.memo && (
                      <div className="compliance-icon">
                        <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
@ -111,7 +113,7 @@ export default function SuitableList() {
        </div>
      )
    },
-    [isItemSelected, openItems, handleItemClick, toggleItemOpen, toCodeName, toSuitableDetail],
+    [isItemSelected, openItems, handleItemClick, toggleItemOpen, suitableCheck, toCodeName, toSuitableDetail],
  )

  // 아이템 리스트
--- 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, useSurvey } from '@/hooks/useSurvey'
+import { requiredFields, useServey } 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 } = useSurvey(Number(id))
-  const { validateSurveyDetail, createSurvey, isCreatingSurvey } = useSurvey()
+  const { deleteSurvey, updateSurvey, isDeletingSurvey, isUpdatingSurvey } = useServey(Number(id))
+  const { validateSurveyDetail, createSurvey, isCreatingSurvey } = useServey()

  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,14 +1,13 @@
 'use client'

-import { useSurvey } from '@/hooks/useSurvey'
-import { useParams, useRouter } from 'next/navigation'
+import { useServey } from '@/hooks/useSurvey'
+import { useParams } 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))) {
@ -17,7 +16,7 @@ export default function DataTable() {
    }
  }, [id])

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

  if (isLoadingSurveyDetail) {
    return <div>Loading...</div>
@ -68,7 +67,7 @@ export default function DataTable() {
            <tr>
              <th>ダウンロード</th>
              <td>
-                <button className="data-down" onClick={() => router.push(`/pdf/survey-sale/${id}`)}>
+                <button className="data-down">
                  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 { useSurvey } from '@/hooks/useSurvey'
+import { useServey } 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 } = useSurvey(Number(id))
+  const { surveyDetail, validateSurveyDetail } = useServey(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,14 +1,7 @@
 import { useState } from 'react'
 import type { Mode, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'

-type RadioEtcKeys =
-  | 'structureOrder'
-  | 'houseStructure'
-  | 'rafterMaterial'
-  | 'waterproofMaterial'
-  | 'insulationPresence'
-  | 'rafterDirection'
-  | 'leakTrace'
+type RadioEtcKeys = 'houseStructure' | 'rafterMaterial' | 'waterproofMaterial' | 'insulationPresence' | 'rafterDirection' | 'leakTrace'
 type SelectBoxKeys =
  | 'installationSystem'
  | 'constructionYear'
@ -16,6 +9,7 @@ type SelectBoxKeys =
  | 'rafterPitch'
  | 'rafterSize'
  | 'openFieldPlateKind'
+  | 'structureOrder'
  | 'installationAvailability'

 export const supplementaryFacilities = [
@ -121,6 +115,24 @@ 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,
@ -134,12 +146,6 @@ 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,
@ -306,7 +312,6 @@ 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} />
@ -432,7 +437,7 @@ export default function RoofForm(props: {
            <div className="data-input-form-bx">
              {/* 지붕 구조의 순서 */}
              <div className="data-input-form-tit red-f">屋根構造の順序</div>
-              <RadioSelected mode={mode} column="structureOrder" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
+              <SelectedBox 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 { useSurvey } from '@/hooks/useSurvey'
+import { useServey } 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 } = useSurvey()
+  const { surveyList, isLoadingSurveyList } = useServey()
  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 === null ? '-' : survey.buildingName}</div>
-                  <div className="sale-item-customer">{survey.customerName === null ? '-' : survey.customerName}</div>
+                  <div className="sale-item-tit">{survey.buildingName}</div>
+                  <div className="sale-item-customer">{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/components/ui/common/Footer.tsx
+++ b/src/components/ui/common/Footer.tsx
@ -10,7 +10,7 @@ export default function Footer() {
        <div className="footer-inner">
          COPYRIGHT©2025 Hanwha Japan All Rights Reserved{' '}
          <span>
-            <Link href="/pdf/suitable">PDF</Link>
+            <Link href="/pdf">PDF</Link>
          </span>
          <span>{Config().mode}</span>
          <span>{Config().baseUrl}</span>
--- 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://172.30.1.23:3000'
+const baseUrl = 'http://localhost:3000'
 const mode = 'local'

 // 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.
--- a/src/hooks/useSuitable.ts
+++ b/src/hooks/useSuitable.ts
@ -62,7 +62,7 @@ export function useSuitable() {
    try {
      const params: Record<string, string> = { ids: ids }
      if (detailIds) params.detailIds = detailIds
-      const response = await axiosInstance(null).post<Suitable[]>('/api/suitable', params)
+      const response = await axiosInstance(null).get<Suitable[]>('/api/suitable', { params })
      return response.data
    } catch (error) {
      console.error('지붕재 상세 데이터 로드 실패:', error)
@ -134,19 +134,17 @@ export function useSuitable() {
    enabled: selectedCategory !== '' || searchKeyword !== '',
  })

-  const serializeSelectedItems = (): { ids: string; detailIds: string } => {
+  const serializeSelectedItems = (): Map<string, string> => {
    const ids: string[] = []
    const detailIds: string[] = []
    for (const [key, value] of selectedItems) {
      ids.push(String(key))
      for (const id of value) detailIds.push(String(id))
    }
-    return { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
-  }
-
-  const getSelectedItemsData = async (): Promise<Suitable[]> => {
-    const { ids, detailIds } = serializeSelectedItems()
-    return await getSuitableDetails(ids, detailIds)
+    return new Map<string, string>([
+      ['ids', ids.join(',')],
+      ['detailIds', detailIds.join(',')],
+    ])
  }

  const clearSuitableSearch = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
@ -155,24 +153,6 @@ export function useSuitable() {
    if (keyword) clearSearchKeyword()
  }

-  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
-  const suitableCheckIcon = (value: string): string => {
-    const iconMap: Record<string, string> = {
-      '×': '/assets/images/sub/compliance_x_icon.svg',
-      'ー': '/assets/images/sub/compliance_quest_icon.svg',
-      default: '/assets/images/sub/compliance_check_icon.svg',
-    }
-    return iconMap[value] || iconMap.default
-  }
-
-  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ○, ×, ー 데이터 관리 필요
-  const suitableCheckMemo = (value: string): string => {
-    if (value === '○') return '設置可'
-    if (value === '×') return '設置不可'
-    if (value === 'ー') return 'お問い合わせください'
-    return `${value}で設置可`
-  }
-
  return {
    getSuitables,
    getSuitableIds,
@ -186,9 +166,7 @@ export function useSuitable() {
    hasNextPage,
    isFetchingNextPage,
    isLoading,
-    getSelectedItemsData,
+    serializeSelectedItems,
    clearSuitableSearch,
-    suitableCheckIcon,
-    suitableCheckMemo,
  }
 }
--- a/src/hooks/useSurvey.ts
+++ b/src/hooks/useSurvey.ts
@ -54,7 +54,7 @@ type ZipCode = {
  kana3: string
 }

-export function useSurvey(id?: number): {
+export function useServey(id?: number): {
  surveyList: { data: SurveyBasicInfo[]; count: number } | {}
  surveyDetail: SurveyBasicInfo | null
  isLoadingSurveyList: boolean
--- a/src/libs/mailer.ts
+++ b/src/libs/mailer.ts
@ -1,50 +0,0 @@
-'use server'
-
-import nodemailer from 'nodemailer'
-
-interface EmailParams {
-  to: string | string[]
-  cc?: string | string[]
-  subject: string
-  content: string
-}
-
-export async function sendEmail({ to, cc, subject, content }: EmailParams): Promise<void> {
-  // Create a transporter using SMTP
-  const transporter = nodemailer.createTransport({
-    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,
-    },
-  })
-
-  // Email options
-  const mailOptions = {
-    from: process.env.SMTP_USER,
-    to: Array.isArray(to) ? to.join(', ') : to,
-    cc: cc ? (Array.isArray(cc) ? cc.join(', ') : cc) : undefined,
-    subject,
-    html: content,
-  }
-
-  try {
-    // Send email
-    await transporter.sendMail(mailOptions)
-  } catch (error) {
-    console.error('Error sending email:', error)
-    throw new Error('Failed to send email')
-  }
-}
-
-async function sendEmailTest() {
-  await sendEmail({
-    to: 'test@test.com',
-    cc: 'test2@test.com',
-    subject: 'Test Email',
-    content: '<h1>Hello</h1><p>This is a test email.</p>',
-  })
-}