Merge branch 'dev' of https://git.hanasys.jp/qcast3/onsitesurvey into feature/inquiry

.env.production

@@ -1,6 +1,6 @@
 NEXT_PUBLIC_RUN_MODE=production
 #route handler
-NEXT_PUBLIC_API_URL=http://1.248.227.176:3000
+NEXT_PUBLIC_API_URL=http://localhost:3000
 
 #qsp 로그인 api
 # NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120

README.md

@@ -64,15 +64,21 @@ session에 있는 role 키로 구분한다
 # 지붕재 적합성 TODO
 
 ```
-const suitableCheck = (value: string) => {
+const suitableCheckIcon = (value: string): string => {
-    if (value === '×') {
+  const iconMap: Record<string, string> = {
-      return <i className="compliance-icon x" />
+    '×': '/assets/images/sub/compliance_x_icon.svg',
-    } else if (value === 'ー') {
+    'ー': '/assets/images/sub/compliance_quest_icon.svg',
-      return <i className="compliance-icon quest" />
+    default: '/assets/images/sub/compliance_check_icon.svg',
-    } else {
-      return <i className="compliance-icon check" />
-    }
   }
+  return iconMap[value] || iconMap.default
+}
+const suitableCheckMemo = (value: string): string => {
+  if (value === '○') return '設置可'
+  if (value === '×') return '設置不可'
+  if (value === 'ー') return 'お問い合わせください'
+  return `${value}で設置可`
+}
 ```
 
-- 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
+- src/hooks/useSuitable.ts > suitableCheckIcon(), suitableCheckMemo()
+  - 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요

diagram/Login.md

@@ -0,0 +1,88 @@
+# Login Component Structure
+
+## Component Diagram
+
+```mermaid
+graph TD
+    A[Login Component] --> B[State Management]
+    B --> B1[useState Hooks]
+    B1 --> B1a[pwShow: 비밀번호 표시 여부]
+    B1 --> B1b[idSave: ID 저장 여부]
+    B1 --> B1c[isPartners: Q.PARTNERS 여부]
+    B1 --> B1d[isLogin: 로그인 상태]
+
+    A --> C[Account Management]
+    C --> C1[useReducer]
+    C1 --> C1a[loginId]
+    C1 --> C1b[pwd]
+
+    A --> D[External Hooks]
+    D --> D1[useRouter]
+    D --> D2[useLocalStorage]
+    D --> D3[useSessionStore]
+    D --> D4[useAxios]
+    D --> D5[useQuery]
+
+    A --> E[Event Handlers]
+    E --> E1[handleLogin]
+    E --> E2[handleKeyDown]
+    E --> E3[validateLogin]
+
+    A --> F[Effects]
+    F --> F1[Login Success Effect]
+    F1 --> F1a[세션 저장]
+    F1 --> F1b[라우팅]
+    F --> F2[Email Validation Effect]
+    F2 --> F2a[Partners 모드 전환]
+
+    A --> G[UI Components]
+    G --> G1[Login Form]
+    G1 --> G1a[ID Input]
+    G1 --> G1b[Password Input]
+    G1 --> G1c[Checkboxes]
+    G1 --> G1d[Login Button]
+```
+
+## 주요 특징과 동작 방식
+
+### 1. 상태 관리
+
+- `useState`를 사용하여 UI 상태 관리 (비밀번호 표시, ID 저장, Partners 모드)
+- `useReducer`를 사용하여 계정 정보(loginId, pwd) 관리
+
+### 2. 외부 훅 통합
+
+- `useRouter`: 페이지 라우팅
+- `useLocalStorage`: 로컬 스토리지 데이터 관리
+- `useSessionStore`: 세션 상태 관리
+- `useAxios`: API 통신
+- `useQuery`: 로그인 API 호출 및 상태 관리
+
+### 3. 이벤트 처리
+
+- `handleLogin`: 로그인 시도
+- `handleKeyDown`: Enter 키 입력 처리
+- `validateLogin`: 입력값 유효성 검사
+
+### 4. 효과 처리
+
+- 로그인 성공 시 세션 저장 및 라우팅
+- 이메일 형식에 따른 Partners 모드 자동 전환
+
+### 5. UI 구성
+
+- ID/PW 입력 필드
+- 비밀번호 표시/숨김 토글
+- ID 저장 체크박스
+- Q.PARTNERS 토글
+- 로그인 버튼
+
+### 6. 보안 및 유효성 검사
+
+- 이메일 형식 검증
+- 필수 입력값 검증
+- API 응답 코드에 따른 처리 (200: 성공, 400: 실패)
+
+## 특징
+
+이 컴포넌트는 클라이언트 사이드에서 동작하며('use client'), 사용자 인증과 관련된 모든 로직을 포함하고 있습니다. 특히 Q.PARTNERS 모드와 일반 모드를 구분하여 다른 API 엔드포인트를 사용하는 특징이 있습니다.

diagram/mermaid.md

@@ -0,0 +1,98 @@
+# Project Structure Documentation
+
+## Component Relationship Diagram
+
+```mermaid
+graph TD
+    subgraph Root
+        A[RootLayout] --> B[ReactQueryProviders]
+        B --> C[EdgeProvider]
+        C --> D[HTML Structure]
+    end
+
+    subgraph Layout Components
+        D --> E[Header]
+        D --> F[Main Content]
+        D --> G[Footer]
+        D --> H[Float Button]
+        D --> I[PopupController]
+    end
+
+    subgraph Pages
+        F --> J[Login]
+        F --> K[Survey Sale]
+        F --> L[Suitable]
+        F --> M[Inquiry]
+        F --> N[Password Reset]
+        F --> O[PDF]
+    end
+
+    subgraph Providers
+        P1[ReactQueryProvider]
+        P2[EdgeProvider]
+    end
+
+    subgraph Components
+        C1[UI Components]
+        C2[Popup Components]
+        C3[PDF Components]
+        C4[Survey Components]
+        C5[Inquiry Components]
+    end
+
+    subgraph Utils
+        U1[Session Management]
+        U2[Mailer]
+        U3[API Routes]
+    end
+
+    %% Relationships
+    A --> P1
+    A --> P2
+    J --> U1
+    K --> C4
+    L --> C4
+    M --> C5
+    N --> U2
+    O --> C3
+```
+
+## Structure Explanation
+
+### 1. Root Layout
+
+- `RootLayout`이 전체 애플리케이션의 기본 구조를 정의
+- `ReactQueryProviders`와 `EdgeProvider`로 감싸져 있음
+
+### 2. Layout Components
+
+- Header, Footer, Float Button 등 공통 레이아웃 컴포넌트
+- `PopupController`로 팝업 관리
+
+### 3. Pages
+
+- Next.js App Router 기반의 페이지 구조
+- Login, Survey Sale, Suitable, Inquiry 등 주요 페이지들
+
+### 4. Providers
+
+- `ReactQueryProvider`: 데이터 페칭 관리
+- `EdgeProvider`: 세션 및 상태 관리
+
+### 5. Components
+
+- UI Components: 공통 UI 요소
+- Popup Components: 팝업 관련 컴포넌트
+- PDF Components: PDF 생성/관리 컴포넌트
+- Survey Components: 설문 관련 컴포넌트
+- Inquiry Components: 문의 관련 컴포넌트
+
+### 6. Utils
+
+- Session Management: 세션 관리
+- Mailer: 이메일 발송 기능
+- API Routes: 백엔드 API 엔드포인트
+
+## Architecture Overview
+
+이 구조는 Next.js의 App Router를 기반으로 하며, 컴포넌트 기반 아키텍처를 따르고 있습니다. 각 기능별로 모듈화가 잘 되어있고, 공통 컴포넌트와 유틸리티를 효율적으로 재사용할 수 있도록 구성되어 있습니다.

diagram/mermaid2.md

@@ -0,0 +1,125 @@
+# Login Process Documentation
+
+## Login Sequence Diagram
+
+```mermaid
+sequenceDiagram
+    actor User
+    participant Login as Login Component
+    participant API as Auth API
+    participant QSP as QSP API
+    participant Session as Session Store
+    participant Router as Next Router
+
+    User->>Login: Enter credentials
+    Login->>Login: Validate input
+    alt Invalid Input
+        Login->>User: Show error message
+    else Valid Input
+        Login->>API: POST /api/auth
+        API->>QSP: POST /api/user/login
+        QSP-->>API: Return user data
+
+        alt Login Success
+            API->>Session: Create session
+            Session->>Session: Set user data
+            Session->>Session: Set role
+            API-->>Login: Return success response
+            Login->>Router: Redirect to home
+            Router->>User: Show home page
+        else Login Failed
+            API-->>Login: Return error response
+            Login->>User: Show error message
+        end
+    end
+```
+
+## Login Process Flow
+
+1. **User Input**
+
+   - User enters login credentials (ID and password)
+   - Optional: User can toggle Q.PARTNERS mode
+   - Optional: User can save ID
+
+2. **Input Validation**
+
+   - Checks if ID and password are not empty
+   - Validates email format for Q.PARTNERS mode
+
+3. **Authentication Request**
+
+   - Sends credentials to Auth API
+   - Auth API forwards request to QSP API
+   - QSP API validates credentials
+
+4. **Session Management**
+
+   - On successful login:
+     - Creates new session
+     - Stores user data
+     - Sets user role based on permissions
+     - Saves session to cookies
+
+5. **Response Handling**
+   - Success: Redirects to home page
+   - Failure: Shows error message
+
+## Role Assignment Logic
+
+The system assigns roles based on the following rules:
+
+- `T01`: If userId is 'T01'
+- `Admin`: If groupId is '60000'
+- `Admin_Sub`: If groupId is '70000' and builderNo is null
+- `Builder`: If groupId is '70000' and builderNo is not null
+- `User`: Default role for all other cases
+
+```mermaid
+graph TD
+subgraph Root
+A[RootLayout] --> B[ReactQueryProviders]
+B --> C[EdgeProvider]
+C --> D[HTML Structure]
+end
+    subgraph Layout Components
+        D --> E[Header]
+        D --> F[Main Content]
+        D --> G[Footer]
+        D --> H[Float Button]
+        D --> I[PopupController]
+    end
+    subgraph Pages
+        F --> J[Login]
+        F --> K[Survey Sale]
+        F --> L[Suitable]
+        F --> M[Inquiry]
+        F --> N[Password Reset]
+        F --> O[PDF]
+    end
+    subgraph Providers
+        P1[ReactQueryProvider]
+        P2[EdgeProvider]
+    end
+    subgraph Components
+        C1[UI Components]
+        C2[Popup Components]
+        C3[PDF Components]
+        C4[Survey Components]
+        C5[Inquiry Components]
+    end
+    subgraph Utils
+        U1[Session Management]
+        U2[Mailer]
+        U3[API Routes]
+    end
+    %% Relationships
+    A --> P1
+    A --> P2
+    J --> U1
+    K --> C4
+    L --> C4
+    M --> C5
+    N --> U2
+    O --> C3
+```

diagram/mermaid3.md

@@ -0,0 +1,157 @@
+# Pages and Components Class Diagram
+
+## Class Diagram
+
+```mermaid
+classDiagram
+    class RootLayout {
+        +ReactNode children
+        +ReactNode header
+        +ReactNode footer
+        +ReactNode floatBtn
+        +ReactQueryProviders
+        +EdgeProvider
+        +PopupController
+    }
+
+    class Page {
+        <<interface>>
+        +ReactNode render()
+    }
+
+    class LoginPage {
+        +Login component
+        +handleLogin()
+        +validateInput()
+    }
+
+    class SurveySalePage {
+        +SurveySaleList
+        +SurveySaleDetail
+        +handleSurveySubmit()
+    }
+
+    class SuitablePage {
+        +SuitableList
+        +SuitableDetail
+        +handleSuitableSubmit()
+    }
+
+    class InquiryPage {
+        +InquiryList
+        +InquiryDetail
+        +handleInquirySubmit()
+    }
+
+    class PasswordResetPage {
+        +PasswordResetForm
+        +handlePasswordReset()
+    }
+
+    class PDFPage {
+        +PDFViewer
+        +PDFGenerator
+        +handlePDFGeneration()
+    }
+
+    class BaseComponent {
+        <<interface>>
+        +ReactNode render()
+    }
+
+    class UIComponent {
+        +Button
+        +Input
+        +Select
+        +Modal
+    }
+
+    class PopupComponent {
+        +PopupController
+        +PopupContent
+        +handlePopup()
+    }
+
+    class PDFComponent {
+        +PDFViewer
+        +PDFGenerator
+        +handlePDF()
+    }
+
+    class SurveyComponent {
+        +SurveyForm
+        +SurveyList
+        +handleSurvey()
+    }
+
+    class InquiryComponent {
+        +InquiryForm
+        +InquiryList
+        +handleInquiry()
+    }
+
+    %% Relationships
+    RootLayout --> Page
+    Page <|-- LoginPage
+    Page <|-- SurveySalePage
+    Page <|-- SuitablePage
+    Page <|-- InquiryPage
+    Page <|-- PasswordResetPage
+    Page <|-- PDFPage
+
+    BaseComponent <|-- UIComponent
+    BaseComponent <|-- PopupComponent
+    BaseComponent <|-- PDFComponent
+    BaseComponent <|-- SurveyComponent
+    BaseComponent <|-- InquiryComponent
+
+    LoginPage --> BaseComponent
+    SurveySalePage --> SurveyComponent
+    SuitablePage --> SurveyComponent
+    InquiryPage --> InquiryComponent
+    PasswordResetPage --> UIComponent
+    PDFPage --> PDFComponent
+
+    RootLayout --> PopupComponent
+```
+
+## Component Hierarchy
+
+1. **Root Layout**
+
+   - 최상위 레이아웃 컴포넌트
+   - ReactQuery와 Edge Provider를 포함
+   - 공통 레이아웃 요소 관리
+
+2. **Pages**
+
+   - LoginPage: 로그인 기능
+   - SurveySalePage: 설문 판매 관리
+   - SuitablePage: 적합성 관리
+   - InquiryPage: 문의 관리
+   - PasswordResetPage: 비밀번호 재설정
+   - PDFPage: PDF 생성 및 관리
+
+3. **Base Components**
+   - UIComponent: 기본 UI 요소
+   - PopupComponent: 팝업 관리
+   - PDFComponent: PDF 관련 기능
+   - SurveyComponent: 설문 관련 기능
+   - InquiryComponent: 문의 관련 기능
+
+## Component Relationships
+
+1. **Page-Component Relationship**
+
+   - 각 페이지는 필요한 컴포넌트들을 조합하여 구성
+   - 페이지별로 특화된 컴포넌트 사용
+
+2. **Component Inheritance**
+
+   - 모든 컴포넌트는 BaseComponent 인터페이스 구현
+   - 각 컴포넌트 타입별로 특화된 기능 제공
+
+3. **Layout Integration**
+   - RootLayout이 전체 페이지 구조 관리
+   - PopupComponent를 통한 모달 관리
+   - 공통 UI 요소의 일관성 유지

package-lock.json

@@ -11,6 +11,7 @@
         "@prisma/client": "^6.7.0",
         "@tanstack/react-query": "^5.71.0",
         "@tanstack/react-query-devtools": "^5.71.0",
+        "@types/nodemailer": "^6.4.17",
         "axios": "^1.8.4",
         "env-cmd": "^10.1.0",
         "iron-session": "^8.0.4",
@@ -1964,6 +1965,15 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/nodemailer": {
+      "version": "6.4.17",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-6.4.17.tgz",
+      "integrity": "sha512-I9CCaIp6DTldEg7vyUTZi8+9Vo0hi1/T8gv3C89yk1rSAAzoKQ8H8ki/jBYJSFoH/BisgLP8tkZMlQ91CIquww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/raf": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",

src/app/api/suitable/route.ts

@@ -2,12 +2,15 @@ import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/libs/prisma'
 import { Suitable } from '@/types/Suitable'
 
-export async function GET(request: NextRequest) {
+export async function POST(request: NextRequest) {
   try {
-    const searchParams = request.nextUrl.searchParams
+    const body: Record<string, string> = await request.json()
+    const ids = body.ids
+    const detailIds = body.detailIds
 
-    const ids = searchParams.get('ids')
+    if (ids === '' || detailIds === '') {
-    const detailIds = searchParams.get('subIds')
+      return NextResponse.json({ error: '필수 파라미터가 누락되었습니다' }, { status: 400 })
+    }
 
     let query = `
     SELECT 
@@ -29,28 +32,22 @@ export async function GET(request: NextRequest) {
             , msd_json.memo
           FROM ms_suitable_detail msd_json
             WHERE msd.main_id = msd_json.main_id
+              AND msd_json.id IN (:detailIds)
           FOR JSON PATH
         ) AS detail
       FROM ms_suitable_detail msd
       GROUP BY msd.main_id
     ) AS details 
       ON msm.id = details.main_id 
-        --ids AND details.main_id IN (:mainIds)
+        AND details.main_id IN (:mainIds)
-        --detailIds AND details.id IN (:detailIds)
+    WHERE
-    WHERE 1=1
+      msm.id IN (:mainIds)
-      --ids AND msm.id IN (:mainIds)
     ORDER BY msm.product_name;
     `
 
     // 검색 조건 설정
-    if (ids) {
+    query = query.replaceAll(':mainIds', ids)
-      query = query.replaceAll('--ids ', '')
+    query = query.replaceAll(':detailIds', detailIds)
-      query = query.replaceAll(':mainIds', ids)
-      if (detailIds) {
-        query = query.replaceAll('--detailIds ', '')
-        query = query.replaceAll(':detailIds', detailIds)
-      }
-    }
 
     const suitable: Suitable[] = await prisma.$queryRawUnsafe(query)
 
@@ -60,4 +57,3 @@ export async function GET(request: NextRequest) {
     return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
   }
 }
-

src/components/popup/SuitableDetailPopup.tsx

@@ -3,15 +3,13 @@
 import Image from 'next/image'
 import { useCallback, useEffect, useState } from 'react'
 import { usePopupController } from '@/store/popupController'
-import { useSuitableStore } from '@/store/useSuitableStore'
 import SuitableDetailPopupButton from './SuitableDetailPopupButton'
 import { useSuitable } from '@/hooks/useSuitable'
-import { Suitable } from '@/types/Suitable'
+import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
 
 export default function SuitableDetailPopup() {
   const popupController = usePopupController()
-  const { getSuitableDetails, serializeSelectedItems } = useSuitable()
+  const { getSelectedItemsData, toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo } = useSuitable()
-  const { selectedItems } = useSuitableStore()
 
   const [openItems, setOpenItems] = useState<Set<number>>(new Set())
   const [suitableDetails, setSuitableDetails] = useState<Suitable[]>([])
@@ -25,14 +23,9 @@ export default function SuitableDetailPopup() {
     })
   }, [])
 
-  // 선택된 아이템 상세 데이터 가져오기
-  const getSelectedItemsData = async () => {
-    const serialized: Map<string, string> = serializeSelectedItems()
-    setSuitableDetails(await getSuitableDetails(serialized.get('ids') ?? '', serialized.get('detailIds') ?? ''))
-  }
-
   useEffect(() => {
-    getSelectedItemsData()
+    // TODO: 로딩 처리 필요
+    getSelectedItemsData().then((data) => setSuitableDetails(data))
   }, [])
 
   return (
@@ -52,98 +45,56 @@ export default function SuitableDetailPopup() {
           </div>
           <div className="modal-body">
             <div className="compliance-check-pop-wrap">
-              <div className={`compliance-check-bx ${openItems.has(1) ? 'act' : ''}`}>
+              {suitableDetails.map((item: Suitable) => (
-                <div className="check-name-wrap">
+                <div className={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}>
-                  <div className="check-name">アースティ４０</div>
+                  <div className="check-name-wrap">
-                  <div className="check-name-btn">
+                    <div className="check-name">{item.productName}</div>
-                    <button className="bx-btn" onClick={() => toggleItemOpen(1)}></button>
+                    <div className="check-name-btn">
-                  </div>
+                      <button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button>
-                </div>
-                <div className="compliance-check-pop-contents">
-                  <div className="check-pop-data-wrap">
-                    <div className="check-pop-data-tit">屋根技研 支持瓦</div>
-                    <div className="check-pop-data-txt">㈱ダイトー</div>
-                  </div>
-                  <div className="check-pop-data-wrap">
-                    <div className="check-pop-data-tit">屋根材</div>
-                    <div className="check-pop-data-txt">瓦</div>
-                  </div>
-                  <div className="check-pop-data-wrap">
-                    <div className="check-pop-data-tit">金具タイプ</div>
-                    <div className="check-pop-data-txt">木ねじ打ち込み式</div>
-                  </div>
-                  <div className="check-pop-data-table-wrap">
-                    <div className="check-pop-data-table">
-                      <div className="pop-data-table-head">
-                        <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
-                        <div className="pop-data-table-head-icon">
-                          <div className="compliance-icon">
-                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
-                          </div>
-                          <div className="compliance-icon">
-                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="pop-data-table-body">Ｄで設置可</div>
-                      <div className="pop-data-table-footer">
-                        <div className="pop-data-table-footer-unit">備考</div>
-                        <div className="pop-data-table-footer-data">
-                          桟木なしの場合は支持金具平ー１で設置可能。その場合水返しが高い為、レベルプレート使用。桟木ありの場合は支持金具平ー２で設置可能
-                        </div>
-                      </div>
                     </div>
-                    <div className="check-pop-data-table">
+                  </div>
-                      <div className="pop-data-table-head">
+                  <div className="compliance-check-pop-contents">
-                        <div className="pop-data-table-head-name">屋根技研支持金具</div>
+                    <div className="check-pop-data-wrap">
-                        <div className="pop-data-table-head-icon">
+                      <div className="check-pop-data-tit">屋根技研 支持瓦</div>
-                          <div className="compliance-icon">
+                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</div>
-                            <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
-                          </div>
-                          <div className="compliance-icon">
-                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="pop-data-table-body">設置不可</div>
-                      <div className="pop-data-table-footer">
-                        <div className="pop-data-table-footer-unit">備考</div>
-                        <div className="pop-data-table-footer-data">入手困難</div>
-                      </div>
                     </div>
-                    <div className="check-pop-data-table">
+                    <div className="check-pop-data-wrap">
-                      <div className="pop-data-table-head">
+                      <div className="check-pop-data-tit">屋根材</div>
-                        <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
+                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</div>
-                        <div className="pop-data-table-head-icon">
-                          <div className="compliance-icon">
-                            <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="pop-data-table-body">お問い合わせください</div>
-                      <div className="pop-data-table-footer">
-                        <div className="pop-data-table-footer-unit">備考</div>
-                        <div className="pop-data-table-footer-data">入手困難</div>
-                      </div>
                     </div>
-                    <div className="check-pop-data-table">
+                    <div className="check-pop-data-wrap">
-                      <div className="pop-data-table-head">
+                      <div className="check-pop-data-tit">金具タイプ</div>
-                        <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
+                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</div>
-                        <div className="pop-data-table-head-icon">
+                    </div>
-                          <div className="compliance-icon">
+                    <div className="check-pop-data-table-wrap">
-                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                      {toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
+                        <div className="check-pop-data-table" key={subItem.id}>
+                          <div className="pop-data-table-head">
+                            <div className="pop-data-table-head-name">{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</div>
+                            <div className="pop-data-table-head-icon">
+                              <div className="compliance-icon">
+                                <Image src={suitableCheckIcon(subItem.trestleManufacturerProductName)} width={22} height={22} alt="" />
+                              </div>
+                              {subItem.memo && (
+                                <div className="compliance-icon">
+                                  <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                                </div>
+                              )}
+                            </div>
                           </div>
+                          <div className="pop-data-table-body">{suitableCheckMemo(subItem.trestleManufacturerProductName)}</div>
+                          {subItem.memo && (
+                            <div className="pop-data-table-footer">
+                              <div className="pop-data-table-footer-unit">備考</div>
+                              <div className="pop-data-table-footer-data">{subItem.memo}</div>
+                            </div>
+                          )}
                         </div>
-                      </div>
+                      ))}
-                      <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
-                      <div className="pop-data-table-footer">
-                        <div className="pop-data-table-footer-unit">備考</div>
-                        <div className="pop-data-table-footer-data">入手困難</div>
-                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
+              ))}
             </div>
             <SuitableDetailPopupButton />
           </div>

src/components/popup/SuitableDetailPopupButton.tsx

@@ -1,10 +1,16 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
+import { usePopupController } from '@/store/popupController'
+
 export default function SuitableDetailPopupButton() {
+  const popupController = usePopupController()
+  const router = useRouter()
+
   return (
     <div className="btn-flex-wrap com">
       <div className="btn-bx">
-        <button className="btn-frame n-blue icon">
+        <button className="btn-frame n-blue icon" onClick={() => popupController.setSuitableDetailPopup(false)}>
           閉じる<i className="btn-arr"></i>
         </button>
       </div>
@@ -14,7 +20,13 @@ export default function SuitableDetailPopupButton() {
         </button>
       </div>
       <div className="btn-bx">
-        <button className="btn-frame n-blue icon">
+        <button
+          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/suitable/SuitableList.tsx

@@ -9,7 +9,17 @@ import { useSuitableStore } from '@/store/useSuitableStore'
 import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
 
 export default function SuitableList() {
-  const { toCodeName, toSuitableDetail, toSuitableDetailIds, suitables, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useSuitable()
+  const {
+    toCodeName,
+    toSuitableDetail,
+    toSuitableDetailIds,
+    suitables,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    suitableCheckIcon,
+  } = useSuitable()
   const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
   const [openItems, setOpenItems] = useState<Set<number>>(new Set())
   const observerTarget = useRef<HTMLDivElement>(null)
@@ -52,20 +62,6 @@ export default function SuitableList() {
     })
   }, [])
 
-  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
-  const suitableCheck = useCallback((value: string) => {
-    const iconMap: Record<string, string> = {
-      '×': '/assets/images/sub/compliance_x_icon.svg',
-      ー: '/assets/images/sub/compliance_quest_icon.svg',
-      default: '/assets/images/sub/compliance_check_icon.svg',
-    }
-    return (
-      <div className="compliance-icon">
-        <Image src={iconMap[value] || iconMap.default} width={22} height={22} alt="" />
-      </div>
-    )
-  }, [])
-
   // 아이템 렌더링
   const renderItem = useCallback(
     (item: Suitable) => {
@@ -99,7 +95,9 @@ export default function SuitableList() {
                     <label htmlFor={`ch${subItem.id}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</label>
                   </div>
                   <div className="compliance-icon-wrap">
-                    {suitableCheck(subItem.trestleManufacturerProductName)}
+                    <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>
@@ -113,7 +111,7 @@ export default function SuitableList() {
         </div>
       )
     },
-    [isItemSelected, openItems, handleItemClick, toggleItemOpen, suitableCheck, toCodeName, toSuitableDetail],
+    [isItemSelected, openItems, handleItemClick, toggleItemOpen, toCodeName, toSuitableDetail],
   )
 
   // 아이템 리스트

src/hooks/useSuitable.ts

@@ -62,7 +62,7 @@ export function useSuitable() {
     try {
       const params: Record<string, string> = { ids: ids }
       if (detailIds) params.detailIds = detailIds
-      const response = await axiosInstance(null).get<Suitable[]>('/api/suitable', { params })
+      const response = await axiosInstance(null).post<Suitable[]>('/api/suitable', params)
       return response.data
     } catch (error) {
       console.error('지붕재 상세 데이터 로드 실패:', error)
@@ -134,17 +134,19 @@ export function useSuitable() {
     enabled: selectedCategory !== '' || searchKeyword !== '',
   })
 
-  const serializeSelectedItems = (): Map<string, string> => {
+  const serializeSelectedItems = (): { ids: string; detailIds: string } => {
     const ids: string[] = []
     const detailIds: string[] = []
     for (const [key, value] of selectedItems) {
       ids.push(String(key))
       for (const id of value) detailIds.push(String(id))
     }
-    return new Map<string, string>([
+    return { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
-      ['ids', ids.join(',')],
+  }
-      ['detailIds', detailIds.join(',')],
+
-    ])
+  const getSelectedItemsData = async (): Promise<Suitable[]> => {
+    const { ids, detailIds } = serializeSelectedItems()
+    return await getSuitableDetails(ids, detailIds)
   }
 
   const clearSuitableSearch = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
@@ -153,6 +155,24 @@ export function useSuitable() {
     if (keyword) clearSearchKeyword()
   }
 
+  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
+  const suitableCheckIcon = (value: string): string => {
+    const iconMap: Record<string, string> = {
+      '×': '/assets/images/sub/compliance_x_icon.svg',
+      'ー': '/assets/images/sub/compliance_quest_icon.svg',
+      default: '/assets/images/sub/compliance_check_icon.svg',
+    }
+    return iconMap[value] || iconMap.default
+  }
+
+  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ○, ×, ー 데이터 관리 필요
+  const suitableCheckMemo = (value: string): string => {
+    if (value === '○') return '設置可'
+    if (value === '×') return '設置不可'
+    if (value === 'ー') return 'お問い合わせください'
+    return `${value}で設置可`
+  }
+
   return {
     getSuitables,
     getSuitableIds,
@@ -166,7 +186,9 @@ export function useSuitable() {
     hasNextPage,
     isFetchingNextPage,
     isLoading,
-    serializeSelectedItems,
+    getSelectedItemsData,
     clearSuitableSearch,
+    suitableCheckIcon,
+    suitableCheckMemo,
   }
 }

src/styles/components/_pdfview.scss

@@ -1,5 +1,6 @@
 @use "../abstracts" as *;
 
+// 조사매물
 .pdf-contents{
   padding: 0 20px;
   border-top: 1px solid #ececec;
@@ -54,4 +55,84 @@
   @include defaultFont($font-s-11, $font-w-400, #FF5656);
   border: 1px solid $black-1010;
   min-height: 150px;
+}
+
+// 지붕재 적합성
+.pdf-intro-page{
+  height: 1080px;
+  padding: 80px 40px ;
+  background-color: #fff;
+}
+.pdf-intro-tit-wrap{
+  text-align: center;
+  .pdf-intro-tit{
+    @include defaultFont($font-s-24, $font-w-500, #101010);
+  }
+  .pdf-intro-date{
+    @include defaultFont($font-s-22, $font-w-400, #101010);
+  }
+}
+.pdf-intro-cont-wrap{
+  margin-top: 70px;
+  p{
+    @include defaultFont($font-s-18, $font-w-400, #101010);
+  }
+}
+
+.pdf-table-content{
+  padding: 20px;
+}
+.pdf-table-grid-wrap{
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px 20px;
+}
+.pdf-table-card{
+  .pdf-table-tit-wrap{
+    margin-bottom: 5px;
+    span{
+      position: relative;
+      @include defaultFont($font-s-13, $font-w-500, #101010);
+      padding: 0 10px;
+      &:first-child{
+        padding-left: 0;
+      }
+      &:last-child{
+        padding-right: 0;
+        &::before{
+          display: none;
+        }
+      }
+      &::before{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 14px;
+        background-color: #101010;
+      }
+    }
+  }
+}
+.pdf-roof-table{
+  table{
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    th{
+      padding: 0px 5px;
+      text-align: center;
+      @include defaultFont($font-s-11, $font-w-500, #fff);
+      background-color: #18B490;
+      border: 1px solid #18B490;
+    }
+    td{
+      padding: 0px 5px;
+      @include defaultFont($font-s-11, $font-w-300, #101010);
+      border: 1px solid #CBCBCB;
+      line-height: 1;
+    }
+  }
 }

src/styles/components/_pop-contents.scss

@@ -112,4 +112,13 @@
     padding: 10px;
     @include defaultFont($font-s-13, $font-w-400, $font-c);
   }
+}
+
+// 제출팝업
+.submit-content{
+  padding: 15px 10px;
+  border: 1px solid #D5DEE8;
+  border-radius: 4px;
+  background-color: #f5f6fa;
+  cursor: default;
 }