feat: enhance survey sales API and component integration

- 조사매물 조회 시 권한 확인 로직 추가

.env.development

@@ -5,8 +5,8 @@ NEXT_PUBLIC_RUN_MODE=development
 NEXT_PUBLIC_API_URL=http://localhost:3000
 
 #qsp 로그인 api
-# NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
+NEXT_PUBLIC_QSP_API_URL=http://121.168.9.37:8080
-NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
+# NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
 
 #1:1문의 api
 NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com

.env.localhost

@@ -5,8 +5,8 @@ NEXT_PUBLIC_RUN_MODE=local
 NEXT_PUBLIC_API_URL=http://localhost:3000
 
 #qsp 로그인 api
-# NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
+NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
-NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
+# NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
 
 #1:1문의 api
 NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com

package-lock.json

@@ -13,6 +13,7 @@
         "@tanstack/react-query-devtools": "^5.71.0",
         "@types/nodemailer": "^6.4.17",
         "axios": "^1.8.4",
+        "crypto-js": "^4.2.0",
         "env-cmd": "^10.1.0",
         "iron-session": "^8.0.4",
         "lucide": "^0.503.0",
@@ -30,6 +31,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/crypto-js": "^4.2.2",
         "@types/mysql": "^2.15.27",
         "@types/node": "^20",
         "@types/react": "^19",
@@ -1946,6 +1948,13 @@
       "integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
       "license": "MIT"
     },
+    "node_modules/@types/crypto-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
+      "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mysql": {
       "version": "2.15.27",
       "resolved": "https://registry.npmjs.org/@types/mysql/-/mysql-2.15.27.tgz",
@@ -2396,6 +2405,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/css-line-break": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "@tanstack/react-query-devtools": "^5.71.0",
     "@types/nodemailer": "^6.4.17",
     "axios": "^1.8.4",
+    "crypto-js": "^4.2.0",
     "env-cmd": "^10.1.0",
     "iron-session": "^8.0.4",
     "lucide": "^0.503.0",
@@ -37,6 +38,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/crypto-js": "^4.2.2",
     "@types/mysql": "^2.15.27",
     "@types/node": "^20",
     "@types/react": "^19",

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

@@ -1,18 +1,60 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/libs/prisma'
 import { convertToSnakeCase } from '@/utils/common-utils'
+import { SessionData } from '@/types/Auth'
+
+type SessionParams = {
+  role: string | null
+  storeId: string | null
+  builderNo: string | null
+  isLoggedIn: string | null
+}
+
+const checkRole = (survey: any, sessionParams: SessionParams) => {
+  switch (sessionParams.role) {
+    case 'T01':
+      return true
+    case 'Admin':
+      if (survey.SUBMISSION_STATUS) {
+        return survey.SUBMISSION_TARGET_ID === sessionParams.storeId
+      }
+      return survey.STORE_ID === sessionParams.storeId
+    case 'Admin_Sub':
+      if (survey.SUBMISSION_STATUS) {
+        return survey.SUBMISSION_TARGET_ID === sessionParams.builderNo
+      }
+      return survey.STORE_ID === sessionParams.storeId && survey.CONSTRUCTION_POINT_ID === sessionParams.builderNo
+    case 'Partner':
+    case 'Builder':
+      return survey.CONSTRUCTION_POINT_ID === sessionParams.builderNo
+    default:
+      return false
+  }
+}
 
 export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   try {
     const { id } = await params
+    const { searchParams } = new URL(request.url)
+
+    const sessionParams: SessionParams = {
+      role: searchParams.get('role'),
+      storeId: searchParams.get('storeId'),
+      builderNo: searchParams.get('builderNo'),
+      isLoggedIn: searchParams.get('isLoggedIn'),
+    }
     // @ts-ignore
-    const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.findUnique({
+    const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.findFirst({
-      where: { ID: Number(id) },
+      where: {
+        ID: Number(id),
+      },
       include: {
         DETAIL_INFO: true,
       },
     })
-    return NextResponse.json(survey)
+    if (checkRole(survey, sessionParams)) {
+      return NextResponse.json(survey)
+    }
   } catch (error) {
     console.error('Error fetching survey:', error)
     return NextResponse.json({ error: 'Failed to fetch survey' }, { status: 500 })

src/app/api/survey-sales/route.ts

@@ -25,8 +25,10 @@ type WhereCondition = {
 const SEARCH_OPTIONS = [
   'BUILDING_NAME', // 건물명
   'REPRESENTATIVE', // 담당자
-  'STORE', // 판매점
+  'STORE', // 판매점명
-  'CONSTRUCTION_POINT', // 시공점
+  'STORE_ID', // 판매점ID
+  'CONSTRUCTION_POINT', // 시공점명
+  'CONSTRUCTION_POINT_ID', // 시공점ID
   'CUSTOMER_NAME', // 고객명
   'POST_CODE', // 우편번호
   'ADDRESS', // 주소

src/components/pdf/SuitableDownloadPdf.tsx

@@ -1,12 +1,21 @@
 'use client'
 
-import { useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
-import generatePDF, { Margin, Resolution } from 'react-to-pdf'
+import generatePDF, { Margin, Options, Resolution, usePDF } from 'react-to-pdf'
+import { useSuitable } from '@/hooks/useSuitable'
+import { useSuitableStore } from '@/store/useSuitableStore'
+import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
 
 export default function SuitableDownloadPdf() {
+  const [fileName, setFileName] = useState<string[]>([])
+  const [createTime, setCreateTime] = useState('')
   const targetRef = useRef<HTMLDivElement>(null)
+  const { toCodeName, toSuitableDetail, selectedSuitables, isSelectedSuitablesLoading } = useSuitable()
+  const { selectedCategory, suitableCommCode, selectedItemsSearching, setSelectedItemsSearching } = useSuitableStore()
+
   const handleDownPdf = () => {
-    const options = {
+    const options: Options = {
+      filename: `${fileName.join('_')}.pdf`,
       method: 'open' as const,
       resolution: Resolution.HIGH,
       page: {
@@ -31,14 +40,41 @@ export default function SuitableDownloadPdf() {
     generatePDF(targetRef, options)
     // generatePDF(targetRef, { filename: 'page.pdf' })
   }
+
+  const formatDateString = () => {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = now.getMonth() + 1
+    const day = now.getDate()
+    const hours = now.getHours()
+    const minutes = now.getMinutes()
+
+    return `${year}年${month}月${day}日 ${hours}:${minutes.toString().padStart(2, '0')}`
+  }
+
+  useEffect(() => {
+    setCreateTime(formatDateString())
+    setFileName([
+      `(${suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.find((category) => category.code === selectedCategory)?.codeJp})`,
+      '屋根材適合表',
+    ])
+    if (!selectedItemsSearching) {
+      setSelectedItemsSearching(true)
+    }
+  }, [])
+
+  if (!selectedCategory) return <div>잘못된 접근입니다.</div>
+  if (isSelectedSuitablesLoading) return <div>Loading...</div>
+
   return (
     <>
+      {/* <button onClick={() => handleDownPdf()}>PDFダウンロード</button> */}
       <div className="pdf-table-wrap" ref={targetRef}>
         <div className="pdf-intro-page">
           <div className="pdf-intro-tit-wrap">
             <div className="pdf-intro-tit mb20">ハンファジャパン株式会社</div>
-            <div className="pdf-intro-tit mb20">(瓦) 屋根材適合表</div>
+            <div className="pdf-intro-tit mb20">{fileName.join(' ')}</div>
-            <div className="pdf-intro-date">2025年4月30日 10:40</div>
+            <div className="pdf-intro-date">{createTime}</div>
           </div>
           <div className="pdf-intro-cont-wrap">
             <p>本適合表は参考資料としてご使用下さい。</p>
@@ -46,640 +82,49 @@ export default function SuitableDownloadPdf() {
             <p>又、現場環境（働き、勾配、瓦桟木条件等）により本適合表と異なる適合結果となる場合が御座います。予めご了承下さい。</p>
             <p>屋根材以外の設置条件（垂木、野地板等の設置基準）も必ずご確認下さい。</p>
           </div>
+          <div className="pdf-intro-foot-date">{createTime}</div>
         </div>
         <div className="pdf-table-content">
           <div className="pdf-table-grid-wrap">
-            <div className="pdf-table-card">
+            {selectedSuitables?.map((item: Suitable) => (
-              <div className="pdf-table-tit-wrap">
+              <div className="pdf-table-card" key={item.id}>
-                <span>屋根材製品名</span>
+                <div className="pdf-table-tit-wrap">
-                <span>メーカー名</span>
+                  <span>{item.productName}</span>
-                <span>屋根材の種類</span>
+                  <span>{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</span>
+                  <span>{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</span>
+                </div>
+                <div className="pdf-roof-table">
+                  <table>
+                    <colgroup>
+                      <col width={'18%'} />
+                      <col width={'23%'} />
+                      <col width={'18%'} />
+                      <col />
+                    </colgroup>
+                    <thead>
+                      <tr>
+                        <th>金具タイプ</th>
+                        <th>金具名</th>
+                        <th>設置可否</th>
+                        <th>備考</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
+                        <tr key={subItem.id}>
+                          <td>{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</td>
+                          <td>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</td>
+                          <td>{subItem.trestleManufacturerProductName}</td>
+                          <td>{subItem.memo}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
               </div>
-              <div className="pdf-roof-table">
+            ))}
-                <table>
-                  <colgroup>
-                    <col width={'18%'} />
-                    <col width={'23%'} />
-                    <col width={'18%'} />
-                    <col />
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th>金具タイプ</th>
-                      <th>金具名</th>
-                      <th>設置可否</th>
-                      <th>備考</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div className="pdf-table-card">
-              <div className="pdf-table-tit-wrap">
-                <span>屋根材製品名</span>
-                <span>メーカー名</span>
-                <span>屋根材の種類</span>
-              </div>
-              <div className="pdf-roof-table">
-                <table>
-                  <colgroup>
-                    <col width={'18%'} />
-                    <col width={'23%'} />
-                    <col width={'18%'} />
-                    <col />
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th>金具タイプ</th>
-                      <th>金具名</th>
-                      <th>設置可否</th>
-                      <th>備考</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div className="pdf-table-card">
-              <div className="pdf-table-tit-wrap">
-                <span>屋根材製品名</span>
-                <span>メーカー名</span>
-                <span>屋根材の種類</span>
-              </div>
-              <div className="pdf-roof-table">
-                <table>
-                  <colgroup>
-                    <col width={'18%'} />
-                    <col width={'23%'} />
-                    <col width={'18%'} />
-                    <col />
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th>金具タイプ</th>
-                      <th>金具名</th>
-                      <th>設置可否</th>
-                      <th>備考</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div className="pdf-table-card">
-              <div className="pdf-table-tit-wrap">
-                <span>屋根材製品名</span>
-                <span>メーカー名</span>
-                <span>屋根材の種類</span>
-              </div>
-              <div className="pdf-roof-table">
-                <table>
-                  <colgroup>
-                    <col width={'18%'} />
-                    <col width={'23%'} />
-                    <col width={'18%'} />
-                    <col />
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th>金具タイプ</th>
-                      <th>金具名</th>
-                      <th>設置可否</th>
-                      <th>備考</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div className="pdf-table-card">
-              <div className="pdf-table-tit-wrap">
-                <span>屋根材製品名</span>
-                <span>メーカー名</span>
-                <span>屋根材の種類</span>
-              </div>
-              <div className="pdf-roof-table">
-                <table>
-                  <colgroup>
-                    <col width={'18%'} />
-                    <col width={'23%'} />
-                    <col width={'18%'} />
-                    <col />
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th>金具タイプ</th>
-                      <th>金具名</th>
-                      <th>設置可否</th>
-                      <th>備考</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div className="pdf-table-card">
-              <div className="pdf-table-tit-wrap">
-                <span>屋根材製品名</span>
-                <span>メーカー名</span>
-                <span>屋根材の種類</span>
-              </div>
-              <div className="pdf-roof-table">
-                <table>
-                  <colgroup>
-                    <col width={'18%'} />
-                    <col width={'23%'} />
-                    <col width={'18%'} />
-                    <col />
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th>金具タイプ</th>
-                      <th>金具名</th>
-                      <th>設置可否</th>
-                      <th>備考</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div className="pdf-table-card">
-              <div className="pdf-table-tit-wrap">
-                <span>屋根材製品名</span>
-                <span>メーカー名</span>
-                <span>屋根材の種類</span>
-              </div>
-              <div className="pdf-roof-table">
-                <table>
-                  <colgroup>
-                    <col width={'18%'} />
-                    <col width={'23%'} />
-                    <col width={'18%'} />
-                    <col />
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th>金具タイプ</th>
-                      <th>金具名</th>
-                      <th>設置可否</th>
-                      <th>備考</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div className="pdf-table-card">
-              <div className="pdf-table-tit-wrap">
-                <span>屋根材製品名</span>
-                <span>メーカー名</span>
-                <span>屋根材の種類</span>
-              </div>
-              <div className="pdf-roof-table">
-                <table>
-                  <colgroup>
-                    <col width={'18%'} />
-                    <col width={'23%'} />
-                    <col width={'18%'} />
-                    <col />
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th>金具タイプ</th>
-                      <th>金具名</th>
-                      <th>設置可否</th>
-                      <th>備考</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div className="pdf-table-card">
-              <div className="pdf-table-tit-wrap">
-                <span>屋根材製品名</span>
-                <span>メーカー名</span>
-                <span>屋根材の種類</span>
-              </div>
-              <div className="pdf-roof-table">
-                <table>
-                  <colgroup>
-                    <col width={'18%'} />
-                    <col width={'23%'} />
-                    <col width={'18%'} />
-                    <col />
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th>金具タイプ</th>
-                      <th>金具名</th>
-                      <th>設置可否</th>
-                      <th>備考</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div className="pdf-table-card">
-              <div className="pdf-table-tit-wrap">
-                <span>屋根材製品名</span>
-                <span>メーカー名</span>
-                <span>屋根材の種類</span>
-              </div>
-              <div className="pdf-roof-table">
-                <table>
-                  <colgroup>
-                    <col width={'18%'} />
-                    <col width={'23%'} />
-                    <col width={'18%'} />
-                    <col />
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th>金具タイプ</th>
-                      <th>金具名</th>
-                      <th>設置可否</th>
-                      <th>備考</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                    <tr>
-                      <td>木ねじ打ち込み式</td>
-                      <td>屋根技研支持瓦</td>
-                      <td>Ｃ で設置可</td>
-                      <td>支持瓦はアンダーラップの先端を削って納める（Ｔｒｙ－Ｕ４０はこの瓦の前身）</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
           </div>
+          <div className="pdf-intro-foot-date">{createTime}</div>
         </div>
       </div>
     </>

src/components/popup/SuitableDetailPopup.tsx

@@ -2,17 +2,18 @@
 
 import Image from 'next/image'
 import { useCallback, useEffect, useState } from 'react'
-import { usePopupController } from '@/store/popupController'
 import SuitableDetailPopupButton from './SuitableDetailPopupButton'
 import { useSuitable } from '@/hooks/useSuitable'
+import { usePopupController } from '@/store/popupController'
+import { useSuitableStore } from '@/store/useSuitableStore'
 import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
 
 export default function SuitableDetailPopup() {
   const popupController = usePopupController()
-  const { getSelectedItemsData, toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo } = useSuitable()
+  const { toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo, selectedSuitables, isSelectedSuitablesLoading } = useSuitable()
+  const { setSelectedItemsSearching } = useSuitableStore()
 
   const [openItems, setOpenItems] = useState<Set<number>>(new Set())
-  const [suitableDetails, setSuitableDetails] = useState<Suitable[]>([])
 
   // 아이템 열기/닫기
   const toggleItemOpen = useCallback((itemId: number) => {
@@ -24,8 +25,7 @@ export default function SuitableDetailPopup() {
   }, [])
 
   useEffect(() => {
-    // TODO: 로딩 처리 필요
+    setSelectedItemsSearching(true)
-    getSelectedItemsData().then((data) => setSuitableDetails(data))
   }, [])
 
   return (
@@ -45,56 +45,60 @@ export default function SuitableDetailPopup() {
           </div>
           <div className="modal-body">
             <div className="compliance-check-pop-wrap">
-              {suitableDetails.map((item: Suitable) => (
+              {isSelectedSuitablesLoading ? (
-                <div className={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}>
+                <div>Loading...</div>
-                  <div className="check-name-wrap">
+              ) : (
-                    <div className="check-name">{item.productName}</div>
+                selectedSuitables?.map((item: Suitable) => (
-                    <div className="check-name-btn">
+                  <div className={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}>
-                      <button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button>
+                    <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>
-                  </div>
+                    <div className="compliance-check-pop-contents">
-                  <div className="compliance-check-pop-contents">
+                      <div className="check-pop-data-wrap">
-                    <div className="check-pop-data-wrap">
+                        <div className="check-pop-data-tit">屋根技研 支持瓦</div>
-                      <div className="check-pop-data-tit">屋根技研 支持瓦</div>
+                        <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</div>
-                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</div>
+                      </div>
-                    </div>
+                      <div className="check-pop-data-wrap">
-                    <div className="check-pop-data-wrap">
+                        <div className="check-pop-data-tit">屋根材</div>
-                      <div className="check-pop-data-tit">屋根材</div>
+                        <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</div>
-                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</div>
+                      </div>
-                    </div>
+                      <div className="check-pop-data-wrap">
-                    <div className="check-pop-data-wrap">
+                        <div className="check-pop-data-tit">金具タイプ</div>
-                      <div className="check-pop-data-tit">金具タイプ</div>
+                        <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</div>
-                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</div>
+                      </div>
-                    </div>
+                      <div className="check-pop-data-table-wrap">
-                    <div className="check-pop-data-table-wrap">
+                        {toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
-                      {toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
+                          <div className="check-pop-data-table" key={subItem.id}>
-                        <div className="check-pop-data-table" key={subItem.id}>
+                            <div className="pop-data-table-head">
-                          <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-name">{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</div>
+                              <div className="pop-data-table-head-icon">
-                            <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>
+                                  <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="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 className="pop-data-table-body">{suitableCheckMemo(subItem.trestleManufacturerProductName)}</div>
+                        ))}
-                          {subItem.memo && (
+                      </div>
-                            <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>
-                </div>
+                ))
-              ))}
+              )}
             </div>
             <SuitableDetailPopupButton />
           </div>

src/components/popup/SuitableDetailPopupButton.tsx

@@ -7,26 +7,29 @@ export default function SuitableDetailPopupButton() {
   const popupController = usePopupController()
   const router = useRouter()
 
+  const handleClosePopup = () => {
+    popupController.setSuitableDetailPopup(false)
+  }
+
+  const handleRedirectPage = (path: string) => {
+    handleClosePopup()
+    router.push(path)
+  }
+
   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" onClick={handleClosePopup}>
           閉じる<i className="btn-arr"></i>
         </button>
       </div>
       <div className="btn-bx">
-        <button className="btn-frame red icon">
+        <button className="btn-frame red icon" onClick={() => handleRedirectPage('/pdf/suitable')}>
           ウンロード<i className="btn-arr"></i>
         </button>
       </div>
       <div className="btn-bx">
-        <button
+        <button className="btn-frame n-blue icon" onClick={() => handleRedirectPage('/inquiry/regist')}>
-          className="btn-frame n-blue icon"
-          onClick={async () => {
-            await popupController.setSuitableDetailPopup(false)
-            router.push('/inquiry/regist')
-          }}
-        >
           1：1お問い合わせ<i className="btn-arr"></i>
         </button>
       </div>

src/components/popup/SurveySaleSubmitPopup.tsx

@@ -96,6 +96,7 @@ export default function SurveySaleSubmitPopup() {
     return true
   }
 
+  // TODO: Admin_Sub 계정 매핑된 submit target id 추가!!!! && 메일 테스트트
   const handleSubmit = () => {
     if (validateData(submitData)) {
       window.neoConfirm('送信しますか？ 送信後は変更・修正することはできません。', () => {

src/components/suitable/Suitable.tsx

@@ -1,23 +1,13 @@
 'use client'
 
 import Image from 'next/image'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import SuitableList from './SuitableList'
 import SuitableSearch from './SuitableSearch'
-import { useSuitable } from '@/hooks/useSuitable'
 
 export default function Suitable() {
   const [reference, setReference] = useState(true)
 
-  const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
-
-  useEffect(() => {
-    getSuitableCommCode()
-    return () => {
-      clearSuitableSearch({ items: true, category: true, keyword: true })
-    }
-  }, [])
-
   return (
     <div className="border-frame">
       <SuitableSearch />

src/components/suitable/SuitableButton.tsx

@@ -1,12 +1,14 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
 import { usePopupController } from '@/store/popupController'
 import { useSuitable } from '@/hooks/useSuitable'
 import { useSuitableStore } from '@/store/useSuitableStore'
 
 export default function SuitableButton() {
   const popupController = usePopupController()
-  const { getSuitableIds, clearSuitableSearch } = useSuitable()
+  const router = useRouter()
+  const { getSuitableIds, clearSuitableStore } = useSuitable()
   const { selectedItems, addAllSelectedItem } = useSuitableStore()
 
   const handleSelectAll = async () => {
@@ -21,6 +23,14 @@ export default function SuitableButton() {
     popupController.setSuitableDetailPopup(true)
   }
 
+  const handleRedirectPdfDownload = () => {
+    if (selectedItems.size === 0) {
+      alert('屋根材を選択してください。')
+      return
+    }
+    router.push('/pdf/suitable')
+  }
+
   return (
     <div className="float-btn-wrap">
       <div className="btn-flex-wrap com">
@@ -30,7 +40,7 @@ export default function SuitableButton() {
               全選択<i className="btn-arr"></i>
             </button>
           ) : (
-            <button className="btn-frame n-blue icon" onClick={() => clearSuitableSearch({ items: true })}>
+            <button className="btn-frame n-blue icon" onClick={() => clearSuitableStore({ items: true })}>
               全て解除<i className="btn-arr"></i>
             </button>
           )}
@@ -41,7 +51,7 @@ export default function SuitableButton() {
           </button>
         </div>
         <div className="btn-bx">
-          <button className="btn-frame n-blue icon">
+          <button className="btn-frame n-blue icon" onClick={handleRedirectPdfDownload}>
             選択ダウンロード<i className="btn-arr"></i>
           </button>
         </div>

src/components/suitable/SuitableList.tsx

@@ -20,7 +20,7 @@ export default function SuitableList() {
     isLoading,
     suitableCheckIcon,
   } = useSuitable()
-  const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
+  const { selectedItems, addSelectedItem, removeSelectedItem, setSelectedItemsSearching } = useSuitableStore()
   const [openItems, setOpenItems] = useState<Set<number>>(new Set())
   const observerTarget = useRef<HTMLDivElement>(null)
 
@@ -48,6 +48,7 @@ export default function SuitableList() {
   // 아이템 클릭
   const handleItemClick = useCallback(
     (mainId: number, detailId?: number, detailIds?: Set<number>): void => {
+      setSelectedItemsSearching(false)
       isItemSelected(mainId, detailId) ? removeSelectedItem(mainId, detailId) : addSelectedItem(mainId, detailId, detailIds)
     },
     [isItemSelected, addSelectedItem, removeSelectedItem],

src/components/suitable/SuitableSearch.tsx

@@ -9,7 +9,7 @@ import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
 export default function SuitableSearch() {
   const [searchValue, setSearchValue] = useState('')
 
-  const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
+  const { getSuitableCommCode, clearSuitableStore } = useSuitable()
   const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore()
 
   const handleInputChange = (value: string) => {
@@ -31,14 +31,12 @@ export default function SuitableSearch() {
 
   const handleInputClear = () => {
     setSearchValue('')
-    clearSuitableSearch({ items: true, keyword: true })
+    clearSuitableStore({ items: true, keyword: true })
   }
 
   useEffect(() => {
+    clearSuitableStore({ items: true, category: true, keyword: true })
     getSuitableCommCode()
-    return () => {
-      clearSuitableSearch({ items: true, category: true, keyword: true })
-    }
   }, [])
 
   return (
@@ -46,7 +44,7 @@ export default function SuitableSearch() {
       <div className="sale-form-bx">
         <select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
           <option value="">屋根材を選択してください.</option>
-          {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATERIAL_GROUP)?.map((category: CommCode, index: number) => (
+          {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.map((category: CommCode, index: number) => (
             <option key={index} value={category.code}>
               {category.codeJp}
             </option>

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

@@ -4,16 +4,20 @@ import { useEffect, useState } from 'react'
 import { useSurveySaleTabState } from '@/store/surveySaleTabState'
 import type { SurveyBasicRequest } from '@/types/Survey'
 import type { Mode } from 'fs'
-import { useSessionStore } from '@/store/session'
 import { usePopupController } from '@/store/popupController'
 import { useAddressStore } from '@/store/addressStore'
+import { SessionData } from '@/types/Auth'
 
-export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBasicInfo: (basicInfo: SurveyBasicRequest) => void; mode: Mode }) {
+export default function BasicForm(props: {
-  const { basicInfo, setBasicInfo, mode } = props
+  basicInfo: SurveyBasicRequest
+  setBasicInfo: (basicInfo: SurveyBasicRequest) => void
+  mode: Mode
+  session: SessionData
+}) {
+  const { basicInfo, setBasicInfo, mode, session } = props
   const { setBasicInfoSelected } = useSurveySaleTabState()
   const [isFlip, setIsFlip] = useState<boolean>(true)
 
-  const { session } = useSessionStore()
   const { addressData } = useAddressStore()
 
   useEffect(() => {

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

@@ -32,10 +32,12 @@ export default function ButtonForm(props: {
   // --------------------------------------------------------------
   // 권한
 
-  // 제출권한 ㅇ
+  // 제출권한 있는 회원
   const [isSubmiter, setIsSubmiter] = useState(false)
   // 작성자
   const [isWriter, setIsWriter] = useState(false)
+  // 제출받은 대상자
+  const [isReceiver, setIsReceiver] = useState(false)
   const isSubmit = props.data.basic.submissionStatus
 
   useEffect(() => {
@@ -44,11 +46,13 @@ export default function ButtonForm(props: {
         // T01 제출권한 없음
         case 'T01':
           setIsSubmiter(false)
+          setIsReceiver(!props.data.basic.submissionTargetId && !props.data.basic.submissionTargetNm)
           break
         // 1차 판매점(Order) + 2차 판매점(Musubi) => 같은 판매점 제출권한
         case 'Admin':
         case 'Admin_Sub':
           setIsSubmiter(session.storeNm === props.data.basic.store && session.builderNo === props.data.basic.constructionPointId)
+          setIsReceiver(session?.storeId === props.data.basic.submissionTargetId)
           break
         // 시공권한 User(Musubi) + Partner => 같은 시공ID 제출권한
         case 'Builder':
@@ -59,7 +63,6 @@ export default function ButtonForm(props: {
           setIsSubmiter(false)
           break
       }
-
       setIsWriter(session.userNm === props.data.basic.representative)
     }
     setSaveData({
@@ -175,20 +178,11 @@ export default function ButtonForm(props: {
 
   // ------------------------------------------------------------
 
-  if (mode === 'READ' && isSubmit && isSubmiter) {
+  if (!session?.isLoggedIn) {
-    return (
+    return <></>
-      <>
-        <div className="sale-form-btn-wrap">
-          <div className="btn-flex-wrap">
-            <ListButton />
-          </div>
-        </div>
-      </>
-    )
   }
 
-  //TODO: 추가확인 필요 (T01 계정이 어떤 조사매물을 수정/삭제 할 수 있는지)
+  if (mode === 'READ' && isSubmit && isSubmiter) {
-  if (mode === 'READ' && session?.role === 'T01' && (!isSubmit || props.data.basic.submissionTargetId !== session.storeId)) {
     return (
       <>
         <div className="sale-form-btn-wrap">
@@ -206,8 +200,8 @@ export default function ButtonForm(props: {
         <div className="sale-form-btn-wrap">
           <div className="btn-flex-wrap">
             <ListButton />
-            <EditButton setMode={setMode} id={id.toString()} mode={mode} />
+            {(isSubmiter || (isReceiver && isSubmit)) && <EditButton setMode={setMode} id={id.toString()} mode={mode} />}
-            {(isWriter || !isSubmiter) && <DeleteButton handleDelete={handleDelete} />}
+            {(isWriter || (isReceiver && isSubmit)) && <DeleteButton handleDelete={handleDelete} />}
             {!isSubmit && isSubmiter && <SubmitButton handleSubmit={handleSubmit} />}
           </div>
         </div>
@@ -219,7 +213,7 @@ export default function ButtonForm(props: {
             <ListButton />
             <TempButton setMode={setMode} handleSave={() => handleSave(true, false)} />
             <SaveButton handleSave={() => handleSave(false, false)} />
-            {session?.role === 'T01' || props.data.basic.submissionStatus ? <></> : <SubmitButton handleSubmit={handleSubmit} />}
+            {session?.role === 'T01' || isSubmit ? <></> : <SubmitButton handleSubmit={handleSubmit} />}
           </div>
         </div>
       )}

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

@@ -7,6 +7,7 @@ import BasicForm from './BasicForm'
 import RoofForm from './RoofForm'
 import { useParams, useSearchParams } from 'next/navigation'
 import { useSurvey } from '@/hooks/useSurvey'
+import { useSessionStore } from '@/store/session'
 
 const roofInfoForm: SurveyDetailRequest = {
   contractCapacity: null,
@@ -74,17 +75,17 @@ export default function DetailForm() {
   const id = Number(routeId) ? Number(routeId) : Number(idParam)
 
   const { surveyDetail, validateSurveyDetail } = useSurvey(Number(id))
+  const { session } = useSessionStore()
 
   const [mode, setMode] = useState<Mode>(modeset)
   const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(basicInfoForm)
   const [roofInfoData, setRoofInfoData] = useState<SurveyDetailRequest>(roofInfoForm)
 
   useEffect(() => {
-    if (Number(idParam) !== 0 && surveyDetail === null) {
+    if (Number(idParam) !== 0 || surveyDetail === null) {
-      alert('データが見つかりません。')
+      alert('権限がありません。')
       window.location.href = '/survey-sale'
     }
-
     if (surveyDetail && (mode === 'EDIT' || mode === 'READ')) {
       const { id, uptDt, regDt, detailInfo, ...rest } = surveyDetail
       setBasicInfoData(rest)
@@ -95,7 +96,7 @@ export default function DetailForm() {
         }
       }
     }
-  }, [surveyDetail, id])
+  }, [surveyDetail, id, mode, session])
 
   const data = {
     basic: basicInfoData,
@@ -108,7 +109,7 @@ export default function DetailForm() {
     <>
       <div className="sale-detail-toggle-wrap">
         {/* 기본정보 */}
-        <BasicForm basicInfo={basicInfoData} setBasicInfo={setBasicInfoData} mode={mode} />
+        <BasicForm basicInfo={basicInfoData} setBasicInfo={setBasicInfoData} mode={mode} session={session} />
         {/* 전기/지붕정보 */}
         <RoofForm roofInfo={roofInfoData} setRoofInfo={setRoofInfoData} mode={mode} />
         <ButtonForm {...buttonFormProps} />

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

@@ -537,6 +537,7 @@ const SelectedBox = ({
       </select>
       <div className={`data-input ${column === 'constructionYear' ? 'flex' : ''}`}>
         <input
+          id={`${column}Etc`}
           type={column === 'constructionYear' ? 'number' : 'text'}
           inputMode={column === 'constructionYear' ? 'numeric' : 'text'}
           className="input-frame"
@@ -642,6 +643,7 @@ const RadioSelected = ({
       {(showEtcOption || column === 'insulationPresence') && (
         <div className="data-input">
           <input
+            id={`${column}Etc`}
             type="text"
             className="input-frame"
             placeholder="-"

src/hooks/useSuitable.ts

@@ -1,4 +1,5 @@
-import { useInfiniteQuery } from '@tanstack/react-query'
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { SHA256 } from 'crypto-js'
 import { transformObjectKeys } from '@/libs/axios'
 import { useSuitableStore } from '@/store/useSuitableStore'
 import { useAxios } from './useAxios'
@@ -18,6 +19,7 @@ export function useSuitable() {
     clearSearchKeyword,
     selectedItems,
     clearSelectedItems,
+    selectedItemsSearching,
   } = useSuitableStore()
 
   const getSuitables = async ({
@@ -85,6 +87,7 @@ export function useSuitable() {
   }
 
   const toSuitableDetail = (suitableDetailString: string): SuitableDetail[] => {
+    if (!suitableDetailString) return []
     try {
       const suitableDetailArray = transformObjectKeys(JSON.parse(suitableDetailString)) as SuitableDetail[]
       if (!Array.isArray(suitableDetailArray)) {
@@ -118,7 +121,7 @@ export function useSuitable() {
     queryKey: ['suitables', 'list', selectedCategory, searchKeyword],
     queryFn: async (context) => {
       const pageParam = context.pageParam as number
-      if (pageParam === 1) clearSuitableSearch({ items: true })
+      if (pageParam === 1) clearSuitableStore({ items: true })
       return await getSuitables({
         pageNumber: pageParam,
         ...(selectedCategory && { category: selectedCategory }),
@@ -144,32 +147,54 @@ export function useSuitable() {
     return { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
   }
 
-  const getSelectedItemsData = async (): Promise<Suitable[]> => {
+  const getSelectedItemsHash = (): string => {
-    const { ids, detailIds } = serializeSelectedItems()
+    const entries = Array.from(selectedItems.entries())
-    return await getSuitableDetails(ids, detailIds)
+      .map(([key, value]) => `${key}:${Array.from(value).sort().join(',')}`)
+      .sort()
+      .join('|')
+    return SHA256(entries).toString()
   }
 
-  const clearSuitableSearch = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
+  const {
+    data: selectedSuitables,
+    isLoading: isSelectedSuitablesLoading,
+    refetch: refetchSelectedSuitables,
+  } = useQuery<Suitable[]>({
+    queryKey: ['suitables', 'selectedItems', getSelectedItemsHash(), selectedItemsSearching],
+    queryFn: async () => {
+      const { ids, detailIds } = serializeSelectedItems()
+      return await getSuitableDetails(ids, detailIds)
+    },
+    staleTime: Infinity,
+    gcTime: Infinity,
+    enabled: selectedItemsSearching,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
+
+  const clearSuitableStore = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
     if (items) clearSelectedItems()
     if (category) clearSelectedCategory()
     if (keyword) clearSearchKeyword()
   }
 
-  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
+  // 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',
       'ー': '/assets/images/sub/compliance_quest_icon.svg',
       default: '/assets/images/sub/compliance_check_icon.svg',
     }
     return iconMap[value] || iconMap.default
   }
 
-  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ○, ×, ー 데이터 관리 필요
+  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ○, ×, -, ー 데이터 관리 필요
   const suitableCheckMemo = (value: string): string => {
     if (value === '○') return '設置可'
     if (value === '×') return '設置不可'
-    if (value === 'ー') return 'お問い合わせください'
+    if (value === '-' || value === 'ー') return 'お問い合わせください'
     return `${value}で設置可`
   }
 
@@ -186,8 +211,9 @@ export function useSuitable() {
     hasNextPage,
     isFetchingNextPage,
     isLoading,
-    getSelectedItemsData,
+    selectedSuitables,
-    clearSuitableSearch,
+    isSelectedSuitablesLoading,
+    clearSuitableStore,
     suitableCheckIcon,
     suitableCheckMemo,
   }

src/hooks/useSurvey.ts

@@ -5,6 +5,7 @@ import { useSurveyFilterStore } from '@/store/surveyFilterStore'
 import { useSessionStore } from '@/store/session'
 import { useAxios } from './useAxios'
 import { queryStringFormatter } from '@/utils/common-utils'
+import { AxiosError } from 'axios'
 
 export const requiredFields = [
   {
@@ -111,8 +112,18 @@ export function useSurvey(id?: number): {
     queryFn: async () => {
       if (id === undefined) throw new Error('id is required')
       if (id === null || isNaN(id)) return null
-      const resp = await axiosInstance(null).get<SurveyBasicInfo>(`/api/survey-sales/${id}`)
+      if (session?.isLoggedIn) {
-      return resp.data
+        const resp = await axiosInstance(null).get<SurveyBasicInfo>(`/api/survey-sales/${id}`, {
+          params: {
+            role: session?.role,
+            storeId: session?.storeId,
+            builderNo: session?.builderNo,
+            isLoggedIn: session?.isLoggedIn,
+          },
+        })
+        return resp.data
+      }
+      return null
     },
     enabled: id !== undefined,
   })
@@ -178,34 +189,44 @@ export function useSurvey(id?: number): {
   })
 
   const validateSurveyDetail = (surveyDetail: SurveyDetailRequest) => {
-    const etcFields = [
+    // 상수 정의
-      'installationSystem',
+    const ETC_FIELDS = ['installationSystem', 'rafterSize', 'rafterPitch', 'waterproofMaterial', 'structureOrder'] as const
-      'constructionYear',
-      'rafterSize',
-      'rafterPitch',
-      'waterproofMaterial',
-      'structureOrder',
-      'insulationPresence',
-    ] as const
 
-    const emptyField = requiredFields.find((field) => {
+    const SPECIAL_CONDITIONS = ['constructionYear', 'insulationPresence'] as const
-      if (etcFields.includes(field.field as (typeof etcFields)[number])) {
-        return (
-          surveyDetail[field.field as keyof SurveyDetailRequest] === null &&
-          (surveyDetail[`${field.field}Etc` as keyof SurveyDetailRequest] === null ||
-            surveyDetail[`${field.field}Etc` as keyof SurveyDetailRequest]?.toString().trim() === '')
-        )
-      } else {
-        return surveyDetail[field.field as keyof SurveyDetailRequest] === null
-      }
-    })
 
-    const contractCapacity = surveyDetail.contractCapacity
+    // 유틸리티 함수들
-    if (contractCapacity && contractCapacity.trim() !== '' && contractCapacity.split(' ')?.length === 1) {
+    const isEmptyValue = (value: any): boolean => {
-      return 'contractCapacityUnit'
+      return value === null || value?.toString().trim() === ''
     }
 
-    return emptyField?.field || ''
+    const checkRequiredField = (field: string): string => {
+      if (ETC_FIELDS.includes(field as (typeof ETC_FIELDS)[number])) {
+        if (
+          isEmptyValue(surveyDetail[field as keyof SurveyDetailRequest]) &&
+          isEmptyValue(surveyDetail[`${field}Etc` as keyof SurveyDetailRequest])
+        ) {
+          return field
+        }
+      } else if (SPECIAL_CONDITIONS.includes(field as (typeof SPECIAL_CONDITIONS)[number])) {
+        if (surveyDetail[field as keyof SurveyDetailRequest] === '2' && isEmptyValue(surveyDetail[`${field}Etc` as keyof SurveyDetailRequest])) {
+          return `${field}Etc`
+        } else if (isEmptyValue(surveyDetail[field as keyof SurveyDetailRequest])) {
+          return field
+        }
+      }
+      return ''
+    }
+
+    // 필수 필드 체크
+    const emptyField = requiredFields.find((field) => checkRequiredField(field.field))
+    if (emptyField) return emptyField.field
+
+    // 계약 용량 단위 체크
+    const contractCapacity = surveyDetail.contractCapacity
+    if (contractCapacity?.trim() && contractCapacity.split(' ').length === 1) {
+      return 'contractCapacityUnit'
+    }
+    return ''
   }
 
   const getZipCode = async (zipCode: string): Promise<ZipCode[] | null> => {

src/store/surveyFilterStore.ts

@@ -21,18 +21,18 @@ export const SEARCH_OPTIONS = [
     id: 'store',
     label: '販売店名',
   },
-  //   {
+  {
-  //     id: 'store_id',
+    id: 'store_id',
-  //     label: '販売店ID',
+    label: '販売店ID',
-  //   },
+  },
   {
     id: 'construction_point',
     label: '施工店名',
   },
-  //   {
+  {
-  //     id: 'construction_id',
+    id: 'construction_point_id',
-  //     label: '施工店ID',
+    label: '施工店ID',
-  //   },
+  },
 ]
 
 export const SEARCH_OPTIONS_PARTNERS = [

src/store/useSuitableStore.ts

@@ -35,6 +35,10 @@ interface SuitableState {
   removeSelectedItem: (mainId: number, detailId?: number) => void
   /* 선택된 아이템 모두 제거 */
   clearSelectedItems: () => void
+  /* 선택된 아이템 검색 상태 */
+  selectedItemsSearching: boolean
+  /* 선택된 아이템 검색 상태 설정 */
+  setSelectedItemsSearching: (value: boolean) => void
 }
 
 export const useSuitableStore = create<SuitableState>((set) => ({
@@ -43,6 +47,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
   selectedCategory: '' as string,
   searchKeyword: '' as string,
   selectedItems: new Map() as Map<number, Set<number>>,
+  selectedItemsSearching: false as boolean,
 
   /* 공통코드 설정 */
   setSuitableCommCode: (headCode: string, commCode: CommCode[]) =>
@@ -84,7 +89,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
     set(() => {
       const newSelectedItems = new Map()
       suitableIds.forEach((suitableId) => {
-        newSelectedItems.set(suitableId.id, new Set(suitableId.detailId.split(',').map(Number)))
+        newSelectedItems.set(suitableId.id, new Set(suitableId.detailId?.split(',').map(Number)))
       })
       return { selectedItems: newSelectedItems }
     })
@@ -114,4 +119,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
 
   /* 선택된 아이템 모두 제거 */
   clearSelectedItems: () => set({ selectedItems: new Map() as Map<number, Set<number>> }),
+
+  /* 선택된 아이템 검색 상태 설정 */
+  setSelectedItemsSearching: (value: boolean) => set({ selectedItemsSearching: value }),
 }))

src/styles/components/_pdfview.scss

@@ -58,11 +58,22 @@
 }
 
 // 지붕재 적합성
+.pdf-table-wrap{
+  max-width: 1540px;
+  min-width: 1540px;
+  margin: 0 auto;
+}
 .pdf-intro-page{
-  height: 1080px;
+  display: flex;
+  flex-direction: column;
+  height: 1050px;
   padding: 80px 40px ;
   background-color: #fff;
 }
+.pdf-intro-foot-date{
+  margin-top: auto;
+  text-align: right;
+}
 .pdf-intro-tit-wrap{
   text-align: center;
   .pdf-intro-tit{
@@ -80,7 +91,11 @@
 }
 
 .pdf-table-content{
+  display: flex;
+  flex-direction: column;
+  height: 1050px;
   padding: 20px;
+  margin-bottom: 50px;
 }
 .pdf-table-grid-wrap{
   display: grid;

src/styles/components/_sub.scss

@@ -1,38 +1,38 @@
-@use '../abstracts' as *;
+@use "../abstracts" as *;
 
 // input form 공통
-.data-input-form-bx {
+.data-input-form-bx{
   margin-bottom: 18px;
-  &:last-child {
+  &:last-child{
     margin-bottom: 0;
   }
-  .data-input-form-tit {
+  .data-input-form-tit{
     @include defaultFont($font-s-13, $font-w-500, $font-c);
     margin-bottom: 10px;
-    .import {
+    .import{
-      color: #f00;
+      color: #F00;
     }
-    span {
+    span{
       display: block;
-      @include defaultFont($font-s-13, $font-w-400, #a8b6c7);
+      @include defaultFont($font-s-13, $font-w-400, #A8B6C7);
     }
   }
-  .data-input-guide {
+  .data-input-guide{
     margin-top: 8px;
-    @include defaultFont($font-s-13, $font-w-400, #a8b6c7);
+    @include defaultFont($font-s-13, $font-w-400, #A8B6C7);
   }
-}
+} 
 
-.btn-flex-wrap {
+.btn-flex-wrap{
   @include flex(5px);
   margin-top: 24px;
-  .btn-bx {
+  .btn-bx{
     flex: 1;
   }
-  &.com {
+  &.com{
-    .btn-bx {
+    .btn-bx{
       flex: 1 1 auto;
-      button {
+      button{
         font-size: 12px;
       }
     }
@@ -40,13 +40,13 @@
 }
 
 // 매물 common
-.top-btn {
+.top-btn{
   position: fixed;
   bottom: 96px;
   right: 15px;
   width: 38px;
   height: 38px;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.50);
   background-image: url(/assets/images/sub/top_btn_icon.svg);
   background-position: center;
   background-repeat: no-repeat;
@@ -55,68 +55,68 @@
   z-index: 90000;
 }
 
-.sale-contents {
+.sale-contents{
   width: 100%;
-  background-color: #f5f5f5;
+  background-color: #F5F5F5;
-  .sale-frame {
+  .sale-frame{
     padding: 0 20px;
-    border-top: 1px solid #ececec;
+    border-top: 1px solid #ECECEC;
-    border-bottom: 1px solid #ececec;
+    border-bottom: 1px solid #ECECEC;
     margin-bottom: 10px;
     padding-bottom: 24px;
     padding-top: 24px;
     background-color: $white-fff;
-    &:first-child {
+    &:first-child{
       padding-top: 0;
       border-top: none;
     }
-    &:last-child {
+    &:last-child{
       padding-bottom: 0;
       border-bottom: none;
       margin-bottom: 0;
     }
   }
 }
-.sale-form-btn-wrap {
+.sale-form-btn-wrap{
-  padding: 20px 20px 0;
+  padding: 20px 20px 0 ;
   background-color: #fff;
-  .btn-flex-wrap {
+  .btn-flex-wrap{
     margin-top: 0;
   }
 }
 
 // 매물 목록
-.sale-form-bx {
+.sale-form-bx{
   margin-bottom: 14px;
-  &:last-child {
+  &:last-child{
     margin-bottom: 0;
   }
-}
+} 
-.sale-list-wrap {
+.sale-list-wrap{
-  .sale-list-item {
+  .sale-list-item{
     padding-top: 14px;
     padding-bottom: 14px;
-    border-bottom: 1px solid #ececec;
+    border-bottom: 1px solid #ECECEC; 
     cursor: pointer;
-    &:first-child {
+    &:first-child{
       padding-top: 0;
     }
-    &:last-child {
+    &:last-child{
       border-bottom: none;
       padding-bottom: 0;
     }
   }
 }
-.sale-item-bx {
+.sale-item-bx{
-  .sale-item-date-bx {
+  .sale-item-date-bx{
     @include flex(0px);
     align-items: center;
     margin-bottom: 9px;
-    .sale-item-num {
+    .sale-item-num{
       position: relative;
       @include defaultFont($font-s-13, $font-w-400, $font-c);
       padding-right: 6px;
-      &::after {
+      &::after{
         content: '';
         position: absolute;
         top: 50%;
@@ -124,31 +124,31 @@
         transform: translateY(-50%);
         width: 1px;
         height: 10px;
-        background-color: #a2abb8;
+        background-color: #A2ABB8;
       }
     }
-    .sale-item-date {
+    .sale-item-date{
-      @include defaultFont($font-s-13, $font-w-400, #a2abb8);
+      @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
       padding-left: 6px;
     }
   }
-  .sale-item-tit {
+  .sale-item-tit{
     @include defaultFont($font-s-15, $font-w-500, $font-c);
     @include ellipsis(1);
     margin-bottom: 9px;
   }
-  .sale-item-customer {
+  .sale-item-customer{
     @include defaultFont($font-s-13, $font-w-400, $font-c);
     margin-bottom: 9px;
   }
-  .sale-item-update-bx {
+  .sale-item-update-bx{
     @include flex(0px);
     align-items: center;
-    .sale-item-name {
+    .sale-item-name{
       position: relative;
-      @include defaultFont($font-s-13, $font-w-400, #a2abb8);
+      @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
       padding-right: 6px;
-      &::after {
+      &::after{
         content: '';
         position: absolute;
         top: 50%;
@@ -156,177 +156,176 @@
         transform: translateY(-50%);
         width: 1px;
         height: 10px;
-        background-color: #a2abb8;
+        background-color: #A2ABB8;
       }
     }
-    .sale-item-update {
+    .sale-item-update{
-      @include defaultFont($font-s-13, $font-w-400, #a2abb8);
+      @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
       padding-left: 6px;
     }
   }
-  &.nodata {
+  &.nodata{
-    .sale-item-nodata {
+    .sale-item-nodata{
       padding: 5px 0;
       text-align: center;
       @include defaultFont($font-s-15, $font-w-500, $font-c);
     }
   }
 }
-.sale-edit-btn {
+.sale-edit-btn{
   margin-top: 24px;
 }
 
 // 매물 상세
-.sale-data-table-wrap {
+.sale-data-table-wrap{
   padding: 24px;
   background-color: #fff;
-  border-top: 1px solid #ececec;
+  border-top: 1px solid #ECECEC;
 }
-.sale-data-table {
+.sale-data-table{
   width: 100%;
   table-layout: fixed;
-  tbody {
+  tbody{
-    tr {
+    tr{
-      th {
+      th{
         @include defaultFont($font-s-13, $font-w-500, $font-c);
         vertical-align: top;
         padding: 5px 0;
       }
-      td {
+      td{
         @include defaultFont($font-s-13, $font-w-400, $font-c);
         padding: 5px 0 8px 14px;
-        .data-down {
+        .data-down{
           @include flex(8px);
           align-items: center;
-          color: #1259cb;
+          color: #1259CB;
-          i {
+          i{
             display: block;
             width: 8px;
             height: 12px;
-            background: url(/assets/images/sub/down_icon.svg) no-repeat center;
+            background: url(/assets/images/sub/down_icon.svg)no-repeat center;
             background-size: cover;
           }
         }
       }
-      &:first-child {
+      &:first-child{
-        th,
+        th,td{
-        td {
           padding-top: 0;
         }
       }
-      &:last-child {
+      &:last-child{
-        th,
+        th,td{
-        td {
           padding-bottom: 0;
         }
       }
     }
   }
-}
+}  
 
-.sale-detail-toggle-wrap {
+.sale-detail-toggle-wrap{
-  border-top: 1px solid #ececec;
+  border-top: 1px solid #ECECEC;
 }
-.sale-detail-toggle-bx {
+.sale-detail-toggle-bx{
-  border-bottom: 1px solid #ececec;
+  border-bottom: 1px solid #ECECEC;
 }
-.sale-detail-toggle-head {
+.sale-detail-toggle-head{
   @include flex(5px);
   padding: 14px 18px;
   background-color: $white-fff;
   cursor: pointer;
-  .sale-detail-toggle-name {
+  .sale-detail-toggle-name{
     @include defaultFont($font-s-13, $font-w-500, $font-c);
   }
-  .sale-detail-toggle-btn-wrap {
+  .sale-detail-toggle-btn-wrap{
     margin-left: auto;
-    .sale-detail-toggle-btn {
+    .sale-detail-toggle-btn{
       display: block;
       width: 22px;
       height: 22px;
-      background: url(/assets/images/sub/sale_toggle_btn.svg) no-repeat center;
+      background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center;
-      background-size: cover;
+      background-size: cover
     }
   }
 }
-.sale-detail-toggle-cont {
+.sale-detail-toggle-cont{
   display: none;
-  .sale-frame {
+  .sale-frame{
     padding: 24px 20px;
-    &:first-child {
+    &:first-child{
       padding-top: 24px;
     }
-    &:last-child {
+    &:last-child{
       padding-bottom: 24px;
     }
   }
 }
 
-.sale-detail-toggle-bx {
+.sale-detail-toggle-bx{
-  &.act {
+  &.act{
-    .sale-detail-toggle-head {
+    .sale-detail-toggle-head{
-      background-color: #5f738e;
+      background-color: #5F738E;
-      .sale-detail-toggle-name {
+      .sale-detail-toggle-name{
-        color: #fff;
+        color: #fff
       }
-      .sale-detail-toggle-btn-wrap {
+      .sale-detail-toggle-btn-wrap{
-        .sale-detail-toggle-btn {
+        .sale-detail-toggle-btn{
-          background: url(/assets/images/sub/sale_toggle_btn_white.svg) no-repeat center;
+          background: url(/assets/images/sub/sale_toggle_btn_white.svg)no-repeat center;
         }
       }
     }
-    .sale-detail-toggle-cont {
+    .sale-detail-toggle-cont{
       display: block;
     }
   }
 }
 
 // 매물 기본정보
-.form-flex {
+.form-flex{
   @include flex(5px);
-  .form-bx {
+  .form-bx{
     flex: 1;
   }
 }
-.form-btn {
+.form-btn{
   margin-top: 12px;
 }
 
 // 매물 전기 지붕정보
-.sale-roof-title {
+.sale-roof-title{
   @include defaultFont($font-s-15, $font-w-500, $font-c);
   padding-bottom: 10px;
   margin-bottom: 20px;
-  border-bottom: 1px solid #2e3a59;
+  border-bottom: 1px solid #2E3A59;
 }
-.data-check-wrap {
+.data-check-wrap{
   @include flex(10px);
   flex-wrap: wrap;
   margin-bottom: 12px;
   .radio-form-box,
-  .check-form-box {
+  .check-form-box{
     width: calc(50% - 5px);
   }
-  &.mb0 {
+  &.mb0{
     margin-bottom: 0;
   }
 }
-.data-input {
+.data-input{
-  &.flex {
+  &.flex{
     @include flex(8px);
     align-items: center;
-    span {
+    span{
       flex: none;
       @include defaultFont($font-s-13, $font-w-400, $font-c);
     }
   }
 }
 
+
 // 1:1 문의 common
-.inquiry-frame {
+.inquiry-frame{
   padding: 0 20px;
 }
-.badge {
+.badge{
   min-width: 60px;
   height: 30px;
   line-height: 30px;
@@ -335,64 +334,65 @@
   text-align: center;
   font-size: $font-s-12;
   font-weight: $font-w-500;
-  &.blue {
+  &.blue{
-    color: #5497e9;
+    color: #5497E9;
-    background-color: #ecf5ff;
+    background-color: #ECF5FF;
   }
-  &.orange {
+  &.orange{
-    color: #f86a56;
+    color: #F86A56;
-    background-color: #ffefed;
+    background-color: #FFEFED;
   }
-  &.block {
+  &.block{
     width: 100%;
+    
   }
 }
 // 1:1 문의 목록
-.inquiry-table-filter {
+.inquiry-table-filter{
   margin-bottom: 24px;
-  .filter-check {
+  .filter-check{
     margin-bottom: 12px;
   }
 }
-.inquiry-list-tit {
+.inquiry-list-tit{
   padding-bottom: 10px;
-  border-bottom: 1px solid #2e3a59;
+  border-bottom: 1px solid #2E3A59;
   @include defaultFont($font-s-13, $font-w-400, $font-c);
-  span {
+  span{
     font-weight: $font-w-500;
   }
 }
-.inquiry-list {
+.inquiry-list{
-  .inquiry-item {
+  .inquiry-item{
     padding: 10px 0;
     cursor: pointer;
-    border-bottom: 1px solid #ececec;
+    border-bottom: 1px solid #ECECEC;
-    &:last-child {
+    &:last-child{
       border-bottom: none;
       padding-bottom: 0;
     }
-    .inquiry-item-bx {
+    .inquiry-item-bx{
       position: relative;
       padding-right: 70px;
-      .inquiry-item-category {
+      .inquiry-item-category{
         display: flex;
         align-items: center;
         margin-bottom: 5px;
-        span {
+        span{
           position: relative;
           display: block;
           @include defaultFont($font-s-13, $font-w-400, $font-c);
           padding: 0 6px;
-          &:first-child {
+          &:first-child{
             padding-left: 0;
           }
-          &:last-child {
+          &:last-child{
             padding-right: 0;
-            &::before {
+            &::before{
               display: none;
             }
           }
-          &::before {
+          &::before{
             content: '';
             position: absolute;
             top: 50%;
@@ -400,31 +400,26 @@
             transform: translateY(-50%);
             width: 1px;
             height: 10px;
-            background-color: #a2abb8;
+            background-color: #A2ABB8;
           }
         }
       }
-      .inquiry-item-tit {
+      .inquiry-item-tit{
         @include defaultFont($font-s-15, $font-w-500, $font-c);
         @include ellipsis(1);
         margin-bottom: 5px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-        display: block;
       }
-      .inquiry-item-date {
+      .inquiry-item-date{
-        @include defaultFont($font-s-13, $font-w-400, #a2abb8);
+        @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
       }
-      .inquiry-badge {
+      .inquiry-badge{
         position: absolute;
         top: 0;
         right: 0;
       }
-      &.nodata {
+      &.nodata{
         padding-right: 0;
-        .inquiry-item-nodata {
+        .inquiry-item-nodata{
           padding: 10px 0;
           text-align: center;
           @include defaultFont($font-s-15, $font-w-500, $font-c);
@@ -435,45 +430,42 @@
 }
 
 // 1:1문의 작성
-.textarea-form {
+.inquiry-file-wrap{
-  white-space: pre-wrap;
-}
-.inquiry-file-wrap {
   margin-top: 20px;
-  .file-list-wrap {
+  .file-list-wrap{
     margin-top: 14px;
   }
 }
-.file-list-tit {
+.file-list-tit{
   @include defaultFont($font-s-13, $font-w-500, $font-c);
 }
-.file-list {
+.file-list{
   margin-top: 14px;
-  .file-item {
+  .file-item{
-    border-top: 1px solid #ededed;
+    border-top: 1px solid #EDEDED;
     cursor: default;
-    .file-item-bx {
+    .file-item-bx{
       width: 100%;
       padding: 14px 0;
       @include flex(0px);
       align-items: center;
-      .file-item-name {
+      .file-item-name{
         @include ellipsis(1);
         @include defaultFont($font-s-13, $font-w-400, $font-c);
         padding-right: 10px;
       }
-      .file-del {
+      .file-del{
         flex: none;
         display: block;
         margin-left: auto;
         width: 16px;
         height: 16px;
-        background: url(/assets/images/common/id_delete_icon.svg) no-repeat center;
+        background: url(/assets/images/common/id_delete_icon.svg)no-repeat center;
         background-size: cover;
       }
     }
-    &:last-child {
+    &:last-child{
-      .file-item-bx {
+      .file-item-bx{
         padding-bottom: 0;
       }
     }
@@ -481,33 +473,33 @@
 }
 
 // 1:1 문의 상세
-.inquiry-detail-data-table {
+.inquiry-detail-data-table{
   padding: 20px 0;
-  border-bottom: 1px solid #ececec;
+  border-bottom: 1px solid #ECECEC;
 }
-.inquiry-detail-data {
+.inquiry-detail-data{
   padding: 20px 0;
-  border-bottom: 1px solid #2e3a59;
+  border-bottom: 1px solid #2E3A59;
   margin-bottom: 24px;
-  .inquiry-detail-category {
+  .inquiry-detail-category{
     display: flex;
     align-items: center;
     margin-bottom: 3px;
-    span {
+    span{
       position: relative;
       display: block;
       @include defaultFont($font-s-13, $font-w-400, $font-c);
       padding: 0 6px;
-      &:first-child {
+      &:first-child{
         padding-left: 0;
       }
-      &:last-child {
+      &:last-child{
         padding-right: 0;
-        &::before {
+        &::before{
           display: none;
         }
       }
-      &::before {
+      &::before{
         content: '';
         position: absolute;
         top: 50%;
@@ -515,154 +507,152 @@
         transform: translateY(-50%);
         width: 1px;
         height: 10px;
-        background-color: #a2abb8;
+        background-color: #A2ABB8;
       }
     }
   }
-  .inquiry-detail-tit {
+  .inquiry-detail-tit{
     @include defaultFont($font-s-15, $font-w-500, $font-c);
     margin-bottom: 10px;
-    word-wrap: break-word;
-    white-space: normal;
-    overflow-wrap: break-word;
   }
-  .inquiry-detail-txt {
+  .inquiry-detail-txt{
     @include defaultFont($font-s-13, $font-w-400, $font-c);
     white-space: pre-line;
   }
 }
 
 // 1:1 문의 답변
-.inquiry-answer-wrap {
+.inquiry-answer-wrap{
   margin-top: 24px;
+  
 }
-.inquiry-answer-header {
+.inquiry-answer-header{
   padding: 20px 0;
-  border-top: 1px solid #f86a56;
+  border-top: 1px solid #F86A56;
-  border-bottom: 1px solid #ececec;
+  border-bottom: 1px solid #ECECEC;
-  .inquiry-answer-tit {
+  .inquiry-answer-tit{
-    @include defaultFont($font-s-14, $font-w-500, #f86a56);
+    @include defaultFont($font-s-14, $font-w-500, #F86A56);
     margin-bottom: 5px;
   }
-  .inquiry-answer-date {
+  .inquiry-answer-date{
-    @include defaultFont($font-s-13, $font-w-400, #f86a56);
+    @include defaultFont($font-s-13, $font-w-400, #F86A56);
   }
 }
-.inquiry-answer-tit {
+.inquiry-answer-tit{
   @include defaultFont($font-s-13, $font-w-400, $font-c);
   margin-bottom: 3px;
 }
 
 // 비밀번호 변경
-.border-frame {
+.border-frame{
   padding: 20px;
-  border-top: 1px solid #ececec;
+  border-top: 1px solid #ECECEC;
-  border-bottom: 1px solid #ececec;
+  border-bottom: 1px solid #ECECEC;
   background-color: #fff;
   margin-bottom: 10px;
-  &:last-child {
+  &:last-child{
     border-bottom: none;
     padding-bottom: 0;
     margin-bottom: 0;
   }
 }
-.pw-guide {
+.pw-guide{
-  .pw-guide-tit {
+  .pw-guide-tit{
-    @include defaultFont($font-s-16, $font-w-500, #1259cb);
+    @include defaultFont($font-s-16, $font-w-500, #1259CB);
   }
-  .pw-guide-txt {
+  .pw-guide-txt{
-    @include defaultFont($font-s-13, $font-w-400, #417ddc);
+    @include defaultFont($font-s-13, $font-w-400, #417DDC);
   }
 }
 
 // 지붕재 적합성
-.compliance-icon {
+.compliance-icon{
   display: flex;
 }
-.compliance-check-wrap {
+.compliance-check-wrap{
   padding-top: 10px;
 }
-.compliance-check-bx {
+.compliance-check-bx{
   position: relative;
   padding: 14px 18px;
-  border: 1px solid #efefef;
+  border: 1px solid #EFEFEF;
   border-radius: 4px;
   margin-bottom: 10px;
-  &:last-child {
+  &:last-child{
     margin-bottom: 0;
   }
-  &.act {
+  &.act{
-    .bx-btn {
+    .bx-btn{
       transform: rotate(0) !important;
     }
-    .reference-list {
+    .reference-list{
-      display: block;
+      display: block
     }
   }
 }
-.check-name-wrap {
+.check-name-wrap{
   @include flex(0px);
   align-items: center;
-  .check-name {
+  .check-name{
     @include defaultFont($font-s-13, $font-w-500, $font-c);
   }
-  .check-name-btn {
+  .check-name-btn{
     padding-left: 5px;
     margin-left: auto;
-    .bx-btn {
+    .bx-btn{
       display: block;
       width: 22px;
       height: 22px;
-      background: url(/assets/images/sub/compliance_bx_icon.svg) no-repeat center;
+      background: url(/assets/images/sub/compliance_bx_icon.svg)no-repeat center;
       transform: rotate(180deg);
     }
   }
 }
-.reference-list {
+.reference-list{
   display: none;
   margin-top: 10px;
   padding-top: 14px;
-  border-top: 1px solid #ececec;
+  border-top: 1px solid #ECECEC;
-  transition: all 0.15s ease-in-out;
+  transition: all .15s ease-in-out;
-  .reference-item {
+  .reference-item{
     margin-bottom: 8px;
     padding-left: 14px;
-    .reference-item-bx {
+    .reference-item-bx{
       @include flex(10px);
       @include defaultFont($font-s-13, $font-w-400, $font-c);
       align-items: center;
     }
-    &:last-child {
+    &:last-child{
       margin-bottom: 0;
     }
   }
-  &.check {
+  &.check{
-    .reference-item {
+    .reference-item{
       margin-bottom: 14px;
     }
   }
 }
 
-.compliace-nosearch {
+.compliace-nosearch{
   padding: 30px 0;
-  span {
+  span{
     display: block;
     @include defaultFont($font-s-13, $font-w-400, $font-c);
     text-align: center;
   }
 }
 
-.check-item-wrap {
+.check-item-wrap{
   @include flex(0px);
   align-items: center;
 }
-.compliance-icon-wrap {
+.compliance-icon-wrap{
   margin-left: auto;
   min-width: 44px;
   @include flex(0px);
   align-items: center;
 }
-.float-btn-wrap {
+.float-btn-wrap{
   position: sticky;
   bottom: 10px;
   left: 0;
@@ -670,14 +660,14 @@
   background-color: #fff;
   z-index: 9;
 }
-@media screen and (max-width: 360px) {
+@media screen and (max-width: 360px){
-  .btn-flex-wrap {
+  .btn-flex-wrap{
     flex-direction: column;
   }
-  .data-check-wrap {
+  .data-check-wrap{
     .radio-form-box,
-    .check-form-box {
+    .check-form-box{
       width: 100%;
     }
   }
-}
+}

src/types/Suitable.ts

@@ -2,7 +2,7 @@ export enum SUITABLE_HEAD_CODE {
   /* 지붕재 제조사명 */
   MANU_FT_CD = 'MANU_FT_CD',
   /* 지붕재 그룹 종류 */
-  ROOF_MATERIAL_GROUP = 'ROOF_MATL_GRP_CD',
+  ROOF_MATL_GRP_CD = 'ROOF_MATL_GRP_CD',
   /* 지붕재 종류 */
   ROOF_MT_CD = 'ROOF_MT_CD',
   /* 마운팅 브래킷 종류 */