feat: 선택데이터 상세팝업 및 pdf용 페이지 표출 연결

- Changed NEXT_PUBLIC_QSP_API_URL to point to a new server address for local development.
- Ensured consistency in API endpoint configuration for development purposes.

.env.development

@@ -5,12 +5,13 @@ 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
 
 #1:1문의 api
 NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com
 
+EMAIL_TITLE_PREFIX=(System Test)
 
 #QPARTNER 로그인 api
 DB_HOST=202.218.61.226

.env.localhost

@@ -11,6 +11,8 @@ NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
 #1:1문의 api
 NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com
 
+EMAIL_TITLE_PREFIX=
+
 #QPARTNER 로그인 api
 DB_HOST=202.218.61.226
 DB_USER=readonly

.env.production

@@ -9,6 +9,8 @@ NEXT_PUBLIC_QSP_API_URL=https://jp.qsalesplatform.com
 #1:1문의 api
 NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
 
+EMAIL_TITLE_PREFIX=
+
 #QPARTNER 로그인 api
 DB_HOST=202.218.61.226
 DB_USER=readonly

README.md

@@ -31,9 +31,6 @@ npm install
 # 환경 변수 설정
 cp .env.example .env.local
 
-# 데이터베이스 초기화 <- 절대 함부로 실행하지 마시오
-# npx prisma migrate dev
-# npx prisma generate
 ```
 
 ### 개발 서버 실행
@@ -126,7 +123,7 @@ session에 있는 role 키로 구분한다
   session.role === 'Builder'
 - teshg44 / 1234 -> 시공사\
   session.role === 'Builder'
-- partners -> Q.Partners 계정\
+- isogai@yanegiken.co.jp / password -> Q.Partners 계정\
   session.role === 'Partner'
 - 이외의 경우 -> 굳이 체크할 필요 없어보임\
   session.role === 'User'
@@ -155,17 +152,17 @@ const suitableCheckMemo = (value: string): string => {
 
 # 주의
 
-## Prisma ORM 사용 시 주의사항
+## <span style="color: red">Prisma ORM 사용 시 주의사항</span>
 
 현재 프로젝트는 Prisma ORM을 통해 데이터베이스의 일부 테이블만 관리하고 있습니다. 이로 인해 `prisma db pull` 또는 `prisma db push` 명령어 사용 시 주의가 필요합니다.
 
-### 잠재적 위험성
+### <span style="color: red">잠재적 위험성</span>
 
 - `schema.prisma` 파일에 정의된 모델이 의도치 않게 수정될 수 있습니다.
 - 기존에 정의된 모델의 속성이나 관계가 손상될 수 있습니다.
 - 데이터베이스 스키마와 Prisma 스키마 간의 불일치가 발생할 수 있습니다.
 
-### 권장 사항
+### <span style="color: red">권장 사항</span>
 
 - 데이터베이스 스키마 변경이 필요한 경우, 반드시 팀 내 논의 후 진행하시기 바랍니다.
 - `prisma db pull` 실행 전 현재 `schema.prisma` 파일의 백업을 권장합니다.

dev.ecosystem.comfig.js

@@ -0,0 +1,10 @@
+module.exports = {
+  apps: [
+    {
+      name: 'on-site-survey',
+      script: 'node_modules/next/dist/bin/next',
+      instances: 1,
+      exec_mode: 'fork',
+    },
+  ],
+}

diagram/layout.md

@@ -0,0 +1,71 @@
+# 루트 레이아웃 구조
+
+이 문서는 애플리케이션의 모든 페이지에서 공통으로 사용되는 루트 레이아웃(`src/app/layout.tsx`)의 구조를 설명합니다.
+
+## 컴포넌트 계층 구조
+
+```mermaid
+graph TD
+    A[RootLayout] --> B[ReactQueryProviders]
+    B --> C[EdgeProvider]
+    C --> D[HTML Structure]
+
+    D --> E[Header]
+    D --> F[Children/Main Content]
+    D --> G[Footer]
+    D --> H[Float Button]
+    D --> I[PopupController]
+
+    J[Session Management] --> |Session Data| C
+
+    subgraph Providers
+        B
+        C
+    end
+
+    subgraph Layout Components
+        E
+        F
+        G
+        H
+        I
+    end
+
+    subgraph Session
+        J
+    end
+```
+
+## 주요 컴포넌트
+
+### 프로바이더
+
+- **ReactQueryProviders**: React Query 상태 관리를 위한 최상위 프로바이더
+- **EdgeProvider**: 세션 데이터를 관리하고 애플리케이션에 제공
+
+### 레이아웃 컴포넌트
+
+- **Header**: 공통 헤더 컴포넌트
+- **Children**: 메인 콘텐츠 영역 (페이지별 콘텐츠)
+- **Footer**: 공통 푸터 컴포넌트
+- **Float Button**: 플로팅 액션 버튼
+- **PopupController**: 팝업/모달 상태 관리
+
+### 세션 관리
+
+- `iron-session`을 사용한 서버 사이드 세션 관리
+- 세션 데이터는 EdgeProvider를 통해 전역적으로 접근 가능
+
+## 데이터 흐름
+
+1. 세션 데이터는 서버 사이드에서 관리됨
+2. 세션 데이터는 EdgeProvider로 전달됨
+3. 모든 레이아웃 컴포넌트는 세션 컨텍스트에 접근 가능
+4. React Query는 데이터 페칭과 캐싱 기능을 제공
+
+## 구현 세부사항
+
+- 서버 컴포넌트로 구현
+- Next.js App Router 구조 사용
+- 서버 사이드 렌더링 지원
+- 하이드레이션 억제를 통한 성능 최적화

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",

prisma/schema.prisma

@@ -8,25 +8,27 @@ datasource db {
 }
 
 model SD_SURVEY_SALES_BASIC_INFO {
-  ID                   Int                          @id @default(autoincrement())
-  SRL_NO               String                       @db.NVarChar(20)
-  REPRESENTATIVE       String                       @db.NVarChar(200)
-  STORE                String?                      @db.NVarChar(200)
-  CONSTRUCTION_POINT   String?                      @db.NVarChar(200)
-  INVESTIGATION_DATE   String?                      @db.NVarChar(10)
-  BUILDING_NAME        String?                      @db.NVarChar(200)
-  CUSTOMER_NAME        String?                      @db.NVarChar(200)
-  POST_CODE            String?                      @db.NVarChar(10)
-  ADDRESS              String?                      @db.NVarChar(200)
-  ADDRESS_DETAIL       String?                      @db.NVarChar(300)
-  SUBMISSION_STATUS    Boolean                      @default(false)
-  SUBMISSION_DATE      DateTime?                    @db.Date
-  SUBMISSION_TARGET_ID String?                      @db.NVarChar(200)
-  REG_DT               DateTime                     @default(now())
-  UPT_DT               DateTime                     @updatedAt
-  REPRESENTATIVE_ID    String?                      @db.NVarChar(100)
-  STORE_ID             String?                      @db.NVarChar(100)
-  DETAIL_INFO          SD_SURVEY_SALES_DETAIL_INFO?
+  ID                    Int                          @id @default(autoincrement())
+  SRL_NO                String                       @db.NVarChar(20)
+  REPRESENTATIVE        String                       @db.NVarChar(200)
+  STORE                 String?                      @db.NVarChar(200)
+  CONSTRUCTION_POINT    String?                      @db.NVarChar(200)
+  CONSTRUCTION_POINT_ID String?                      @db.NVarChar(200)
+  INVESTIGATION_DATE    String?                      @db.NVarChar(10)
+  BUILDING_NAME         String?                      @db.NVarChar(200)
+  CUSTOMER_NAME         String?                      @db.NVarChar(200)
+  POST_CODE             String?                      @db.NVarChar(10)
+  ADDRESS               String?                      @db.NVarChar(200)
+  ADDRESS_DETAIL        String?                      @db.NVarChar(300)
+  SUBMISSION_STATUS     Boolean                      @default(false)
+  SUBMISSION_DATE       DateTime?                    @db.Date
+  SUBMISSION_TARGET_ID  String?                      @db.NVarChar(200)
+  SUBMISSION_TARGET_NM  String?                      @db.NVarChar(200)
+  REG_DT                DateTime                     @default(now())
+  UPT_DT                DateTime                     @updatedAt
+  REPRESENTATIVE_ID     String?                      @db.NVarChar(100)
+  STORE_ID              String?                      @db.NVarChar(100)
+  DETAIL_INFO           SD_SURVEY_SALES_DETAIL_INFO?
 }
 
 model SD_SURVEY_SALES_DETAIL_INFO {

src/app/api/auth/route.ts

@@ -57,6 +57,7 @@ export async function POST(request: Request) {
     session.storeLvl = result.data.data.storeLvl
     session.custCd = result.data.data.custCd
     session.builderNo = result.data.data.builderNo
+    session.builderNm = result.data.data.builderNm
     session.isLoggedIn = true
 
     if (result.data.data.userId === 'T01') {
@@ -104,6 +105,7 @@ export async function POST(request: Request) {
       STORE_LVL: result.data.data.storeLvl,
       CUST_CD: result.data.data.custCd,
       BUILDER_NO: result.data.data.builderNo,
+      BUILDER_NM: result.data.data.builderNm,
       IS_LOGGED_IN: true,
       ROLE: '',
     }

src/app/api/partner/route.ts

@@ -85,6 +85,7 @@ export async function POST(request: Request) {
     session.storeLvl = null
     session.custCd = null
     session.builderNo = data[0].user_seko_id
+    session.builderNm = data[0].supplier_name
     session.isLoggedIn = true
     session.role = 'Partner'
 
@@ -123,6 +124,7 @@ export async function POST(request: Request) {
     STORE_LVL: null,
     CUST_CD: null,
     BUILDER_NO: data[0].user_seko_id,
+    BUILDER_NM: data[0].supplier_name,
     IS_LOGGED_IN: true,
     ROLE: 'Partner',
   }

src/components/pdf/SuitableDownloadPdf.tsx

@@ -1,12 +1,21 @@
 'use client'
 
-import { useRef } from 'react'
-import generatePDF, { Margin, Resolution } from 'react-to-pdf'
+import { useEffect, useRef, useState } from 'react'
+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-date">2025年4月30日 10:40</div>
+            <div className="pdf-intro-tit mb20">{fileName.join(' ')}</div>
+            <div className="pdf-intro-date">{createTime}</div>
           </div>
           <div className="pdf-intro-cont-wrap">
             <p>本適合表は参考資料としてご使用下さい。</p>
@@ -49,636 +85,43 @@ export default function SuitableDownloadPdf() {
         </div>
         <div className="pdf-table-content">
           <div className="pdf-table-grid-wrap">
-            <div className="pdf-table-card">
-              <div className="pdf-table-tit-wrap">
-                <span>屋根材製品名</span>
-                <span>メーカー名</span>
-                <span>屋根材の種類</span>
+            {selectedSuitables?.map((item: Suitable) => (
+              <div className="pdf-table-card" key={item.id}>
+                <div className="pdf-table-tit-wrap">
+                  <span>{item.productName}</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>
       </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: 로딩 처리 필요
-    getSelectedItemsData().then((data) => setSuitableDetails(data))
+    setSelectedItemsSearching(true)
   }, [])
 
   return (
@@ -45,56 +45,60 @@ 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>
+              {isSelectedSuitablesLoading ? (
+                <div>Loading...</div>
+              ) : (
+                selectedSuitables?.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>
-                  </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-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={'/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 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>
-              ))}
+                ))
+              )}
             </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
-          className="btn-frame n-blue icon"
-          onClick={async () => {
-            await popupController.setSuitableDetailPopup(false)
-            router.push('/inquiry/regist')
-          }}
-        >
+        <button className="btn-frame n-blue icon" onClick={() => handleRedirectPage('/inquiry/regist')}>
           1：1お問い合わせ<i className="btn-arr"></i>
         </button>
       </div>

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/hooks/useAxios.ts

@@ -3,21 +3,19 @@ import Config from '@/config/config.export'
 import { useSpinnerStore } from '@/store/spinnerStore'
 
 export function useAxios() {
-  // const { setIsShow } = useSpinnerStore()
-
   const requestHandler = (config: InternalAxiosRequestConfig) => {
-    // setIsShow(true)
+    useSpinnerStore.getState().setIsShow(true)
     return config
   }
 
   const responseHandler = (response: AxiosResponse) => {
-    // setIsShow(false)
+    useSpinnerStore.getState().setIsShow(false)
     response.data = transferResponse(response)
     return response
   }
 
   const errorHandler = (error: any) => {
-    // setIsShow(false)
+    useSpinnerStore.getState().setIsShow(false)
     return Promise.reject(error)
   }
 

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 ({
@@ -119,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 }),
@@ -145,12 +147,33 @@ export function useSuitable() {
     return { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
   }
 
-  const getSelectedItemsData = async (): Promise<Suitable[]> => {
-    const { ids, detailIds } = serializeSelectedItems()
-    return await getSuitableDetails(ids, detailIds)
+  const getSelectedItemsHash = (): string => {
+    const entries = Array.from(selectedItems.entries())
+      .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()
@@ -188,8 +211,9 @@ export function useSuitable() {
     hasNextPage,
     isFetchingNextPage,
     isLoading,
-    getSelectedItemsData,
-    clearSuitableSearch,
+    selectedSuitables,
+    isSelectedSuitablesLoading,
+    clearSuitableStore,
     suitableCheckIcon,
     suitableCheckMemo,
   }

src/libs/session.ts

@@ -45,6 +45,7 @@ export const defaultSession: SessionData = {
   storeLvl: null,
   custCd: null,
   builderNo: null,
+  builderNm: null,
   isLoggedIn: false,
   role: null,
 }

src/providers/ReactQueryProvider.tsx

@@ -11,6 +11,7 @@ export default function ReactQueryProviders({ children }: React.PropsWithChildre
         defaultOptions: {
           queries: {
             staleTime: 60 * 1000,
+            retry: false,
           },
         },
       }),

src/store/session.ts

@@ -41,6 +41,7 @@ const initialState: InitialState = {
     storeLvl: null,
     custCd: null,
     builderNo: null,
+    builderNm: null,
     isLoggedIn: false,
     role: null,
   },

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[]) =>
@@ -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/types/Auth.ts

@@ -27,6 +27,7 @@ export interface SessionData {
   storeLvl: null
   custCd: null
   builderNo: null
+  builderNm: null | string
   isLoggedIn: boolean
   role: string | null
 }

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',
   /* 마운팅 브래킷 종류 */