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

.env.development

@@ -9,7 +9,8 @@ NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
 # NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
 
 #1:1문의 api
-NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
+NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com
+
 
 #QPARTNER 로그인 api
 DB_HOST=202.218.61.226

.env.localhost

@@ -9,7 +9,7 @@ NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
 # NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
 
 #1:1문의 api
-NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
+NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com
 
 #QPARTNER 로그인 api
 DB_HOST=202.218.61.226

.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/qna/detail/route.ts

@@ -0,0 +1,24 @@
+import { queryStringFormatter } from '@/utils/common-utils'
+import axios from 'axios'
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const params = {
+    compCd: searchParams.get('compCd'),
+    qnaNo: searchParams.get('qnoNo'),
+    langCd: searchParams.get('langCd'),
+    loginId: searchParams.get('loginId'),
+  }
+
+  try {
+    const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/qna/detail?${queryStringFormatter(params)}`)
+    if (response.status === 200) {
+      return NextResponse.json(response.data)
+    }
+    return NextResponse.json({ error: response.data.result }, { status: response.status })
+  } catch (error: any) {
+    console.error(error.response)
+    return NextResponse.json({ error: 'route error' }, { status: 500 })
+  }
+}

src/app/api/qna/file/route.ts

@@ -0,0 +1,33 @@
+import axios from 'axios'
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const encodeFileNo = searchParams.get('encodeFileNo')
+
+  const srcFileNm = searchParams.get('srcFileNm')
+
+  if (!encodeFileNo) {
+    return NextResponse.json({ error: 'encodeFileNo is required' }, { status: 400 })
+  }
+  try {
+    const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/file/downloadFile2`, {
+      responseType: 'arraybuffer',
+      params: {
+        encodeFileNo,
+      },
+    })
+    if (response.headers['content-type'] === 'text/html;charset=utf-8') {
+      return NextResponse.json({ error: 'file not found' }, { status: 404 })
+    }
+    return new NextResponse(response.data, {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/octet-stream;charset=UTF-8',
+        'Content-Disposition': `attachment; filename="${srcFileNm}"`,
+      },
+    })
+  } catch (error: any) {
+    return NextResponse.json({ error: error.response.data }, { status: 500 })
+  }
+}

src/app/api/qna/list/route.ts

@@ -0,0 +1,28 @@
+import axios from 'axios'
+import { NextResponse } from 'next/server'
+import { queryStringFormatter } from '@/utils/common-utils'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+
+  const params: Record<string, string> = {}
+  searchParams.forEach((value, key) => {
+    const match = key.match(/inquiryListRequest\[(.*)\]/)
+    if (match) {
+      params[match[1]] = value
+    } else {
+      params[key] = value
+    }
+  })
+
+  try {
+    const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/qna/list?${queryStringFormatter(params)}`)
+    if (response.status === 200) {
+      return NextResponse.json(response.data)
+    }
+    return NextResponse.json({ error: 'Failed to fetch qna list' }, { status: response.status })
+  } catch (error: any) {
+    console.error('Error fetching qna list:', error.response.data)
+    return NextResponse.json({ error: 'route error' }, { status: 500 })
+  }
+}

src/app/api/qna/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server'
+import axios from 'axios'
+import { CommonCode } from '@/types/Inquiry'
+
+export async function GET() {
+  const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/system/commonCodeListData`)
+  const codeList: CommonCode[] = []
+  response.data.data.apiCommCdList.forEach((item: any) => {
+    if (item.headCd === '204200' || item.headCd === '204300' || item.headCd === '204400') {
+      codeList.push({
+        headCd: item.headCd,
+        code: item.code,
+        name: item.codeJp,
+        refChar1: item.refChr1,
+      })
+    }
+  })
+  return NextResponse.json({ data: codeList })
+}

src/app/api/qna/save/route.ts

@@ -0,0 +1,21 @@
+import axios from 'axios'
+import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+  const formData = await request.formData()
+  console.log(formData)
+  try {
+    const response = await axios.post(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/qna/save`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+    if (response.status === 200) {
+      return NextResponse.json(response.data)
+    }
+    return NextResponse.json({ error: response.data }, { status: response.status })
+  } catch (error: any) {
+    console.error('error:: ', error.response)
+    return NextResponse.json({ error: 'Failed to save qna' }, { status: 500 })
+  }
+}

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/app/inquiry/list/page.tsx

@@ -1,11 +1,9 @@
-import ListForm from '@/components/inquiry/ListForm'
+import ListTable from '@/components/inquiry/list/ListTable'
-import ListTable from '@/components/inquiry/ListTable'
 
 export default function page() {
   return (
     <>
       <div className="sale-contents">
-        <ListForm />
         <ListTable />
       </div>
     </>

src/components/inquiry/Answer.tsx

@@ -1,35 +1,37 @@
 'use client'
 
-export default function Answer() {
+import { Inquiry } from '@/types/Inquiry'
+
+export default function Answer({
+  inquiryDetail,
+  downloadFile,
+}: {
+  inquiryDetail: Inquiry
+  downloadFile: (encodeFileNo: number, srcFileNm: string) => Promise<Blob | null>
+}) {
   return (
     <>
       <div className="inquiry-answer-wrap">
         <div className="inquiry-answer-header">
           <div className="inquiry-answer-tit">Hanwha Japan 回答</div>
           <div className="inquiry-answer-date">
-            <span>佐藤一貴</span>/ <span>2025.04.02 16:54:00</span>
+            <span>{inquiryDetail?.ansRegNm}</span>/ <span>{inquiryDetail?.ansRegDt}</span>
           </div>
         </div>
         <div className="inquiry-detail-data">
           <div className="inquiry-answer-tit">回答</div>
-          <div className="inquiry-detail-txt">
+          <div className="inquiry-detail-txt">{inquiryDetail?.ansContents}</div>
-            一次側接続は, 自動切替開閉器と住宅分電盤昼間遮断器との間に蓄電システム遮断器を配線する方法です. 二次側接続は,
-            住宅分電盤週間ブレーカの二次側に蓄電システムブレーカを接続する
-          </div>
         </div>
         <div className="file-list-wrap">
           <div className="file-list-tit">ファイル添付</div>
           <ul className="file-list">
-            <li className="file-item">
+            {inquiryDetail?.ansListFile?.map((file) => (
-              <button className="file-item-bx">
+              <li className="file-item" key={file.fileNo}>
-                <div className="file-item-name">添付ファイル名.jpg </div>
+                <button className="file-item-bx" onClick={() => downloadFile(Number(file.encodeFileNo), file.srcFileNm)}>
-              </button>
+                  <div className="file-item-name">{file.srcFileNm} </div>
-            </li>
+                </button>
-            <li className="file-item">
+              </li>
-              <button className="file-item-bx">
+            ))}
-                <div className="file-item-name">添付ファイル名.jpg </div>
-              </button>
-            </li>
           </ul>
         </div>
       </div>

src/components/inquiry/Detail.tsx

@@ -1,20 +1,28 @@
 'use client'
 
-import { useState } from 'react'
 import Answer from './Answer'
+import { useInquiry } from '@/hooks/useInquiry'
+import { useParams, useRouter } from 'next/navigation'
+import { useSessionStore } from '@/store/session'
 
 export default function Detail() {
-  //todo: 답변 완료 표시를 위해 임시로 추가 해 놓은 state
+  const params = useParams()
-  // 추후에 api 작업 완료후 삭제
+  const id = params.id
-  // 답변 완료 클래스 & 하단 답변내용 출력도
+
-  const [inquiry, setInquiry] = useState<Boolean>(true)
+  const { inquiryDetail, downloadFile } = useInquiry(Number(id), '5200')
+  const { commonCodeList } = useInquiry()
+  const router = useRouter()
+
+  const { session } = useSessionStore()
 
   return (
     <>
       <div className="inquiry-frame">
         <div className="inquiry-detail-wrap">
           <div className="inquiry-detail-badge">
-            <div className={`badge ${inquiry ? 'orange' : 'blue'} block`}>回答完了</div>
+            <div className={`badge ${inquiryDetail?.answerYn === 'Y' ? 'orange' : 'blue'} block`}>
+              {inquiryDetail?.answerYn === 'Y' ? '回答完了' : '回答待ち'}
+            </div>
           </div>
           <div className="inquiry-detail-data-table">
             <table className="sale-data-table">
@@ -25,71 +33,65 @@ export default function Detail() {
               <tbody>
                 <tr>
                   <th>登録日</th>
-                  <td>2025.04.10</td>
+                  <td>{inquiryDetail?.regDt.split(' ')[0]}</td>
                 </tr>
                 <tr>
-                  <th>作者</th>
+                  <th>顧客名</th>
-                  <td>Hong gi</td>
+                  <td>
-                </tr>
+                    {session?.userNm} {session?.builderNo ? `[${session?.builderNo}]` : ''}
-                <tr>
+                  </td>
-                  <th>名前</th>
-                  <td>Kim</td>
-                </tr>
-                <tr>
-                  <th>番号</th>
-                  <td>070-1234-5678</td>
                 </tr>
                 <tr>
                   <th>販売店</th>
-                  <td>interplug</td>
+                  <td>{inquiryDetail?.storeNm}</td>
-                </tr>
-                <tr>
-                  <th>施工店</th>
-                  <td>interplugs</td>
                 </tr>
                 <tr>
                   <th>E-mail</th>
-                  <td>Hong@interplug.co.kr</td>
+                  <td>{inquiryDetail?.regEmail}</td>
+                </tr>
+                <tr>
+                  <th>名前</th>
+                  <td>{inquiryDetail?.regUserNm}</td>
+                </tr>
+                <tr>
+                  <th>お問い合わせ</th>
+                  <td>{inquiryDetail?.regUserTelNo}</td>
                 </tr>
               </tbody>
             </table>
           </div>
           <div className="inquiry-detail-data">
             <div className="inquiry-detail-category">
-              <span>屋根</span>
+              <span>{commonCodeList.find((code) => code.code === inquiryDetail?.qnaClsLrgCd)?.name}</span>
-              <span>適合性</span>
+              <span>{commonCodeList.find((code) => code.code === inquiryDetail?.qnaClsMidCd)?.name}</span>
-              <span>屋根材</span>
+              <span>{commonCodeList.find((code) => code.code === inquiryDetail?.qnaClsSmlCd)?.name}</span>
-            </div>
-            <div className="inquiry-detail-tit">屋根材適合性確認依頼</div>
-            <div className="inquiry-detail-txt">
-              入力した内容が表示されます.
-              <br />
-              インストール可能であることを確認してください.
-              <br />
-              屋根の写真を添付しました.
             </div>
+            <div className="inquiry-detail-tit">{inquiryDetail?.qstTitle}</div>
+            <div className="inquiry-detail-txt">{inquiryDetail?.qstContents}</div>
           </div>
           <div className="file-list-wrap">
             <div className="file-list-tit">ファイル添付</div>
             <ul className="file-list">
-              <li className="file-item">
+              {inquiryDetail?.listFile?.map((file) => (
-                <button className="file-item-bx">
+                <li className="file-item" key={file.fileNo}>
-                  <div className="file-item-name">添付ファイル名.jpg </div>
+                  <button
-                </button>
+                    className="file-item-bx"
-              </li>
+                    onClick={() => {
-              <li className="file-item">
+                      downloadFile(Number(file.encodeFileNo), file.srcFileNm)
-                <button className="file-item-bx">
+                    }}
-                  <div className="file-item-name">添付ファイル名.jpg </div>
+                  >
-                </button>
+                    <div className="file-item-name">{file.srcFileNm} </div>
-              </li>
+                  </button>
+                </li>
+              ))}
             </ul>
           </div>
         </div>
 
-        {inquiry && <Answer />}
+        {inquiryDetail?.answerYn === 'Y' && inquiryDetail && <Answer inquiryDetail={inquiryDetail} downloadFile={downloadFile} />}
 
         <div className="sale-edit-btn">
-          <button className="btn-frame n-blue icon">
+          <button className="btn-frame n-blue icon" onClick={() => router.push('/inquiry/list')}>
             リスト<i className="btn-arr"></i>
           </button>
         </div>

src/components/inquiry/ListForm.tsx

@@ -1,23 +0,0 @@
-'use client'
-import { useRouter } from 'next/navigation'
-
-export default function ListForm() {
-  const router = useRouter()
-  return (
-    <>
-      <div className="sale-frame">
-        <div className="sale-form-bx">
-          <button className="btn-frame n-blue icon" onClick={() => router.push('/inquiry/regist')}>
-            お問い合わせ<i className="btn-arr"></i>
-          </button>
-        </div>
-        <div className="sale-form-bx">
-          <div className="search-input">
-            <input type="text" className="search-frame" placeholder="タイトルを入力してください. (2文字以上)" />
-            <button className="search-icon"></button>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

src/components/inquiry/ListTable.tsx

@@ -1,134 +0,0 @@
-'use client'
-
-import { use, useEffect, useState } from 'react'
-import LoadMoreButton from '../LoadMoreButton'
-
-const inquiryDummy = [
-  { id: 1, category: '屋根', title: '屋根材適合性確認依頼', date: '2025.04.02', status: 'completed' },
-  { id: 2, category: '外壁', title: '外壁仕上げ材確認', date: '2025.04.03', status: 'completed' },
-  { id: 3, category: '設備', title: '換気システム図面確認', date: '2025.04.04', status: 'completed' },
-  { id: 4, category: '基礎', title: '基礎配筋検査依頼', date: '2025.04.05', status: 'completed' },
-  { id: 5, category: '内装', title: 'クロス仕様確認', date: '2025.04.06', status: 'waiting' },
-  { id: 6, category: '構造', title: '耐震壁位置変更申請', date: '2025.04.07', status: 'completed' },
-  { id: 7, category: '屋根', title: '雨樋取付方法確認', date: '2025.04.08', status: 'completed' },
-  { id: 8, category: '外構', title: 'フェンス高さ変更相談', date: '2025.04.09', status: 'completed' },
-  { id: 9, category: '設備', title: '給湯器設置位置確認', date: '2025.04.10', status: 'completed' },
-  { id: 10, category: '外壁', title: 'タイル割付案確認依頼', date: '2025.04.11', status: 'waiting' },
-  { id: 11, category: '内装', title: '照明配置図面確認', date: '2025.04.12', status: 'completed' },
-  { id: 12, category: '構造', title: '梁補強案確認', date: '2025.04.13', status: 'completed' },
-  { id: 13, category: '基礎', title: '杭長設計確認依頼', date: '2025.04.14', status: 'completed' },
-  { id: 14, category: '屋根', title: '断熱材施工方法確認', date: '2025.04.15', status: 'completed' },
-  { id: 15, category: '外構', title: '駐車場勾配図確認', date: '2025.04.16', status: 'completed' },
-]
-
-const badgeStyle = [
-  {
-    id: 'completed',
-    label: '回答完了',
-    color: 'blue',
-  },
-  {
-    id: 'waiting',
-    label: '回答待ち',
-    color: 'orange',
-  },
-]
-export default function ListTable() {
-  const [offset, setOffset] = useState(0)
-  const [hasMore, setHasMore] = useState(true)
-
-  const inquiryList = inquiryDummy.slice(0, offset + 10)
-
-  useEffect(() => {
-    if (inquiryDummy.length > offset + 10) {
-      setHasMore(true)
-    } else {
-      setHasMore(false)
-    }
-  }, [inquiryList])
-
-  return (
-    <>
-      <div className="sale-frame">
-        <div className="inquiry-table-filter">
-          <div className="filter-check">
-            <div className="check-form-box">
-              <input type="checkbox" id="ch01" />
-              <label htmlFor="ch01">私が書いたお問い合わせ</label>
-            </div>
-          </div>
-          <div className="filter-select">
-            <select className="select-form" name="" id="">
-              <option value="">全体</option>
-              <option value="">回答待ち</option>
-              <option value="">回答完了</option>
-            </select>
-          </div>
-        </div>
-        <div className="inquiry-list-wrap">
-          <div className="inquiry-list-tit">
-            合計 <span>98</span>個
-          </div>
-          <ul className="inquiry-list">
-            <li className="inquiry-item">
-              <div className="inquiry-item-bx">
-                <div className="inquiry-item-category">
-                  <span>屋根</span>
-                  <span>適合性</span>
-                  <span>屋根材</span>
-                </div>
-                <div className="inquiry-item-tit">屋根材適合性確認依頼</div>
-                <div className="inquiry-item-date">2025.04.02</div>
-                <div className="inquiry-badge badge blue">回答待ち</div>
-              </div>
-            </li>
-            <li className="inquiry-item">
-              <div className="inquiry-item-bx">
-                <div className="inquiry-item-category">
-                  <span>屋根</span>
-                  <span>適合性</span>
-                  <span>屋根材</span>
-                </div>
-                <div className="inquiry-item-tit">設置可能ですか？</div>
-                <div className="inquiry-item-date">2025.04.02</div>
-                <div className="inquiry-badge badge orange">回答完了</div>
-              </div>
-            </li>
-            <li className="inquiry-item">
-              <div className="inquiry-item-bx">
-                <div className="inquiry-item-category">
-                  <span>屋根</span>
-                  <span>適合性</span>
-                  <span>屋根材</span>
-                </div>
-                <div className="inquiry-item-tit">屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼</div>
-                <div className="inquiry-item-date">2025.04.02</div>
-                <div className="inquiry-badge badge blue">回答待ち</div>
-              </div>
-            </li>
-            <li className="inquiry-item">
-              <div className="inquiry-item-bx">
-                <div className="inquiry-item-category">
-                  <span>屋根</span>
-                  <span>適合性</span>
-                  <span>屋根材</span>
-                </div>
-                <div className="inquiry-item-tit">設置可能ですか？</div>
-                <div className="inquiry-item-date">2025.04.02</div>
-                <div className="inquiry-badge badge orange">回答完了</div>
-              </div>
-            </li>
-            <li className="inquiry-item">
-              <div className="inquiry-item-bx nodata">
-                <div className="inquiry-item-nodata">조회된 데이터가 없습니다</div>
-              </div>
-            </li>
-          </ul>
-          <div className="sale-edit-btn">
-            <LoadMoreButton hasMore={hasMore} onLoadMore={() => setOffset(offset + 10)} />
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

src/components/inquiry/RegistForm.tsx

@@ -1,5 +1,129 @@
 'use client'
+
+import { useInquiry } from '@/hooks/useInquiry'
+import { useSessionStore } from '@/store/session'
+import { InquiryRequest } from '@/types/Inquiry'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
 export default function RegistForm() {
+  const { saveInquiry, isSavingInquiry } = useInquiry()
+  const { session } = useSessionStore()
+  const router = useRouter()
+
+  const [inquiryRequest, setInquiryRequest] = useState<InquiryRequest>({
+    compCd: '5200',
+    siteTpCd: 'QC',
+    qnaClsLrgCd: '',
+    qnaClsMidCd: '',
+    qnaClsSmlCd: null,
+    title: '',
+    contents: '',
+    regId: '',
+    regUserNm: '',
+    regUserTelNo: null,
+    storeId: '',
+    qstMail: '',
+  })
+  const requiredFieldNames = [
+    { id: 'qnaClsLrgCd', name: 'お問い合わせタイプ' },
+    { id: 'qnaClsMidCd', name: 'お問い合わせタイプ' },
+    { id: 'regUserNm', name: '名前' },
+    { id: 'qstMail', name: 'E-mail' },
+    { id: 'title', name: 'お問い合わせタイトル' },
+    { id: 'contents', name: 'お問い合わせ内容' },
+  ]
+
+  useEffect(() => {
+    if (session?.isLoggedIn) {
+      setInquiryRequest({
+        ...inquiryRequest,
+        regId: session?.userId ?? '',
+        regUserNm: session?.userNm ?? '',
+        storeId: session?.storeId ?? '',
+        qstMail: session?.email ?? '',
+      })
+    }
+  }, [session])
+
+  const { commonCodeList } = useInquiry()
+
+  const [attachedFiles, setAttachedFiles] = useState<File[]>([])
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (files && files.length > 0) {
+      setAttachedFiles(attachedFiles.concat(Array.from(files)))
+    }
+    e.target.value = ''
+  }
+
+  const handleRemoveFile = (index: number) => {
+    setAttachedFiles(attachedFiles.filter((_, i) => i !== index))
+  }
+
+  const focusOnRequiredField = (fieldId: string) => {
+    const element = document.getElementById(fieldId)
+    if (element) element.focus()
+  }
+
+  const handleSubmit = async () => {
+    const emptyField = requiredFieldNames.find((field) => inquiryRequest[field.id as keyof InquiryRequest] === '')
+    if (emptyField) {
+      alert(`${emptyField?.name}を入力してください。`)
+      focusOnRequiredField(emptyField?.id ?? '')
+      return
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    if (!emailRegex.test(inquiryRequest.qstMail)) {
+      alert('有効なメールアドレスを入力してください。')
+      focusOnRequiredField('qstMail')
+      return
+    }
+    if (inquiryRequest.title.length > 100) {
+      alert('お問い合わせタイトルは100文字以内で入力してください。')
+      focusOnRequiredField('title')
+      return
+    }
+    if (inquiryRequest.contents.length > 2000) {
+      alert('お問い合わせ内容は2,000文字以内で入力してください。')
+      focusOnRequiredField('contents')
+      return
+    }
+
+    const formData = new FormData()
+    attachedFiles.forEach((file) => {
+      formData.append('files', file)
+    })
+    Object.entries(inquiryRequest).forEach(([key, value]) => {
+      formData.append(key, value ?? '')
+    })
+    window.neoConfirm(
+      'お問い合わせを登録しますか？ Hanwha Japanの担当者にお問い合わせメールが送信されます。',
+      async () => {
+        const res = await saveInquiry(formData)
+        alert('保存されました。')
+        router.push(`/inquiry/${res.qnaNo}`)
+      },
+      () => null,
+    )
+  }
+
+  const handlePhoneNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.replace(/[^\d]/g, '')
+
+    let formattedNumber = ''
+    if (value.length <= 3) {
+      formattedNumber = value
+    } else if (value.length <= 7) {
+      formattedNumber = `${value.slice(0, 3)}-${value.slice(3)}`
+    } else {
+      formattedNumber = `${value.slice(0, 3)}-${value.slice(3, 7)}-${value.slice(7, 11)}`
+    }
+
+    setInquiryRequest({ ...inquiryRequest, regUserTelNo: formattedNumber })
+  }
+
   return (
     <>
       <div className="inquiry-frame">
@@ -9,45 +133,113 @@ export default function RegistForm() {
               お問い合わせタイプ <i className="import">*</i>
             </div>
             <div className="data-input">
-              <select className="select-form" name="" id="">
+              <select
-                <option value="">屋根適合</option>
+                className="select-form"
-                <option value="">屋根適合</option>
+                name="qnaClsLrgCd"
-                <option value="">屋根適合</option>
+                id="qnaClsLrgCd"
-                <option value="">屋根適合</option>
+                value={inquiryRequest.qnaClsLrgCd}
-                <option value="">屋根適合</option>
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsLrgCd: e.target.value })}
-              </select>
+              >
-            </div>
+                <option value="" hidden>
-            <div className="data-input mt5">
+                  選択してください
-              <select className="select-form" name="" id="">
+                </option>
-                <option value="">屋根適合</option>
+                {commonCodeList
-                <option value="">屋根適合</option>
+                  .filter((code) => code.headCd === '204200')
-                <option value="">屋根適合</option>
+                  .map((code) => (
-                <option value="">屋根適合</option>
+                    <option key={code.code} value={code.code}>
-                <option value="">屋根適合</option>
+                      {code.name}
-              </select>
+                    </option>
-            </div>
+                  ))}
-            <div className="data-input mt5">
-              <select className="select-form" name="" id="">
-                <option value="">屋根適合</option>
-                <option value="">屋根適合</option>
-                <option value="">屋根適合</option>
-                <option value="">屋根適合</option>
-                <option value="">屋根適合</option>
               </select>
             </div>
+            {commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd).length > 0 && (
+              <div className="data-input mt5">
+                <select
+                  className="select-form"
+                  name="qnaClsMidCd"
+                  id="qnaClsMidCd"
+                  value={inquiryRequest.qnaClsMidCd}
+                  onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsMidCd: e.target.value })}
+                >
+                  <option value="" hidden>
+                    選択してください
+                  </option>
+                  {commonCodeList
+                    .filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd)
+                    .map((code) => (
+                      <option key={code.code} value={code.code}>
+                        {code.name}
+                      </option>
+                    ))}
+                </select>
+              </div>
+            )}
+            {commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd).length > 0 && (
+              <div className="data-input mt5">
+                <select
+                  className="select-form"
+                  name="qnaClsSmlCd"
+                  id="qnaClsSmlCd"
+                  value={inquiryRequest.qnaClsSmlCd ?? ''}
+                  onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsSmlCd: e.target.value })}
+                >
+                  <option value="" hidden>
+                    選択してください
+                  </option>
+                  {commonCodeList
+                    .filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd)
+                    .map((code) => (
+                      <option key={code.code} value={code.code}>
+                        {code.name}
+                      </option>
+                    ))}
+                </select>
+              </div>
+            )}
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">
               名前 <i className="import">*</i>
             </div>
             <div className="data-input">
-              <input className="input-frame" type="text" placeholder="名前を書いてください" />
+              <input
+                className="input-frame"
+                type="text"
+                placeholder="名前を書いてください"
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, regUserNm: e.target.value })}
+                value={inquiryRequest.regUserNm}
+                id="regUserNm"
+              />
             </div>
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">電話番号</div>
             <div className="data-input">
-              <input className="input-frame" type="text" placeholder="電話番号を書き留めてください" />
+              <input
+                className="input-frame"
+                type="tel"
+                inputMode="tel"
+                placeholder="電話番号を書き留めてください"
+                onChange={handlePhoneNumberChange}
+                value={inquiryRequest.regUserTelNo ?? ''}
+                id="regUserTelNo"
+                maxLength={13}
+              />
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">
+              E-mail <i className="import">*</i>
+            </div>
+            <div className="data-input">
+              <input
+                className="input-frame"
+                type="text"
+                placeholder="E-mailを書いてください"
+                value={inquiryRequest.qstMail}
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, qstMail: e.target.value })}
+                id="qstMail"
+              />
             </div>
           </div>
           <div className="data-input-form-bx">
@@ -55,15 +247,30 @@ export default function RegistForm() {
               お問い合わせタイトル <i className="import">*</i>
             </div>
             <div className="data-input">
-              <input className="input-frame" type="text" placeholder="お問い合わせタイトルを記入してください" />
+              <input
+                className="input-frame"
+                type="text"
+                placeholder="お問い合わせタイトルを記入してください"
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, title: e.target.value })}
+                maxLength={100}
+                id="title"
+              />
             </div>
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">
-              お問い合わせタイプ <i className="import">*</i>
+              お問い合わせ内容 <i className="import">*</i>
             </div>
             <div className="data-input">
-              <textarea className="textarea-form" rows={6} name="" id="" placeholder="TextArea Filed"></textarea>
+              <textarea
+                className="textarea-form"
+                rows={6}
+                id="contents"
+                placeholder="お問い合わせ内容を入力してください"
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, contents: e.target.value })}
+                value={inquiryRequest.contents}
+                maxLength={2000}
+              ></textarea>
             </div>
           </div>
         </div>
@@ -72,29 +279,28 @@ export default function RegistForm() {
             <label className="btn-frame l-blue icon" htmlFor="file">
               <i className="btn-clip"></i>Attach ファイル
             </label>
-            <input type="file" id="file" />
+            <input type="file" id="file" onChange={handleFileChange} multiple style={{ display: 'none' }} />
           </div>
           <div className="file-list-wrap">
             <div className="file-list-tit">
-              添付ファイル<span>2</span>個
+              添付ファイル<span>{attachedFiles.length}</span>個
             </div>
             <ul className="file-list">
-              <li className="file-item">
+              {attachedFiles.map((file, index) => (
-                <div className="file-item-bx">
+                <li className="file-item" key={`${file.name}-${index}`}>
-                  <div className="file-item-name">添付ファイル名.jpg </div>
+                  <div className="file-item-bx">
-                  <button className="file-del"></button>
+                    <div className="file-item-name">{file.name}</div>
-                </div>
+                    <button className="file-del" onClick={() => handleRemoveFile(index)} aria-label="Remove file" />
-              </li>
+                  </div>
-              <li className="file-item">
+                </li>
-                <div className="file-item-bx">
+              ))}
-                  <div className="file-item-name">添付ファイル名.jpg </div>
-                  <button className="file-del"></button>
-                </div>
-              </li>
             </ul>
           </div>
-          <div className="sale-edit-btn">
+          <div className="btn-flex-wrap">
-            <button className="btn-frame n-blue icon">
+            <button className="btn-frame n-blue icon" onClick={() => router.push('/inquiry/list')}>
+              リスト<i className="btn-arr"></i>
+            </button>
+            <button className="btn-frame n-blue icon" onClick={handleSubmit} disabled={isSavingInquiry}>
               登録<i className="btn-arr"></i>
             </button>
           </div>

src/components/inquiry/list/ListForm.tsx

@@ -0,0 +1,49 @@
+'use client'
+import { useInquiryFilterStore } from '@/store/inquiryFilterStore'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+export default function ListForm() {
+  const router = useRouter()
+  const { inquiryListRequest, setInquiryListRequest, reset } = useInquiryFilterStore()
+  const [searchKeyword, setSearchKeyword] = useState(inquiryListRequest.schTitle ?? '')
+
+  const handleSearch = () => {
+    if (searchKeyword.length >= 2) {
+      reset()
+      setInquiryListRequest({ ...inquiryListRequest, schTitle: searchKeyword })
+    } else {
+      alert('2文字以上入力してください')
+    }
+  }
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSearch()
+    }
+  }
+
+  return (
+    <>
+      <div className="sale-frame">
+        <div className="sale-form-bx">
+          <button className="btn-frame n-blue icon" onClick={() => router.push('/inquiry/regist')}>
+            お問い合わせ<i className="btn-arr"></i>
+          </button>
+        </div>
+        <div className="sale-form-bx">
+          <div className="search-input">
+            <input
+              type="text"
+              className="search-frame"
+              placeholder="タイトルを入力してください. (2文字以上)"
+              value={searchKeyword}
+              onChange={(e) => setSearchKeyword(e.target.value)}
+              onKeyDown={handleKeyDown}
+            />
+            <button className="search-icon" onClick={handleSearch}></button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/inquiry/list/ListTable.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import LoadMoreButton from '../../LoadMoreButton'
+import { useInquiry } from '@/hooks/useInquiry'
+import { InquiryList } from '@/types/Inquiry'
+import { usePathname, useRouter } from 'next/navigation'
+import { useInquiryFilterStore } from '@/store/inquiryFilterStore'
+import { useSessionStore } from '@/store/session'
+import ListForm from './ListForm'
+
+const badgeStyle = [
+  {
+    id: 'Y',
+    label: '回答完了',
+    color: 'orange',
+  },
+  {
+    id: 'N',
+    label: '回答待ち',
+    color: 'blue',
+  },
+]
+export default function ListTable() {
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const { inquiryList, isLoadingInquiryList } = useInquiry()
+  const { inquiryListRequest, setInquiryListRequest, reset, offset, setOffset } = useInquiryFilterStore()
+
+  const [hasMore, setHasMore] = useState(false)
+
+  const [heldInquiryList, setHeldInquiryList] = useState<InquiryList[]>([])
+
+  const { session } = useSessionStore()
+
+  useEffect(() => {
+    setOffset(1)
+    setHeldInquiryList([])
+  }, [pathname])
+
+  useEffect(() => {
+    if (!session.isLoggedIn || isLoadingInquiryList) return
+    if (session.isLoggedIn) {
+      setInquiryListRequest({ ...inquiryListRequest, storeId: session.storeId ?? '', loginId: session.userId ?? '' })
+    }
+    if (inquiryList.length > 0 && inquiryList[0].totCnt > 0) {
+      if (offset > 1) {
+        setHeldInquiryList([...heldInquiryList, ...inquiryList])
+      } else {
+        setHeldInquiryList(inquiryList)
+      }
+      setHasMore(inquiryList[0].totCnt > offset + 9)
+    } else {
+      setHeldInquiryList([])
+      setHasMore(false)
+    }
+  }, [session, inquiryList])
+
+  const handleMyInquiry = () => {
+    setOffset(1)
+    setInquiryListRequest({
+      ...inquiryListRequest,
+      schRegId: inquiryListRequest.schRegId ? null : session.userId,
+    })
+  }
+
+  const handleFilter = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    switch (e.target.value) {
+      case 'N':
+        setInquiryListRequest({ ...inquiryListRequest, schAnswerYn: 'N' })
+        break
+      case 'Y':
+        setInquiryListRequest({ ...inquiryListRequest, schAnswerYn: 'Y' })
+        break
+      default:
+        reset()
+        break
+    }
+  }
+
+  return (
+    <>
+      <ListForm />
+      <div className="sale-frame">
+        <div className="inquiry-table-filter">
+          <div className="filter-check">
+            <div className="check-form-box">
+              <input type="checkbox" id="ch01" onChange={handleMyInquiry} />
+              <label htmlFor="ch01">私が書いたお問い合わせ</label>
+            </div>
+          </div>
+          <div className="filter-select">
+            <select className="select-form" name="" id="" onChange={(e) => handleFilter(e)}>
+              <option value="">全体</option>
+              <option value="N">回答待ち</option>
+              <option value="Y">回答完了</option>
+            </select>
+          </div>
+        </div>
+        <div className="inquiry-list-wrap">
+          <div className="inquiry-list-tit">
+            合計 <span>{heldInquiryList.length > 0 ? heldInquiryList[0].totCnt : 0}</span>個
+          </div>
+          <ul className="inquiry-list">
+            {heldInquiryList.length === 0 || (heldInquiryList.length > 0 && heldInquiryList[0].totCnt === 0) ? (
+              <li className="inquiry-item">
+                <div className="inquiry-item-bx nodata">
+                  <div className="inquiry-item-nodata">照会されたデータがありません。</div>
+                </div>
+              </li>
+            ) : (
+              heldInquiryList.map((inquiry: InquiryList) => (
+                <li className="inquiry-item" key={inquiry.qnaNo} onClick={() => router.push(`/inquiry/${inquiry.qnaNo}`)}>
+                  <div className="inquiry-item-bx">
+                    <div className="inquiry-item-category">
+                      <span>{inquiry.qnaClsLrgCd}</span>
+                      <span>{inquiry.qnaClsMidCd}</span>
+                      <span>{inquiry.qnaClsSmlCd}</span>
+                    </div>
+                    <div className="inquiry-item-tit">{inquiry.qstTitle}</div>
+                    <div className="inquiry-item-date">{inquiry.regDt}</div>
+                    <div className={`inquiry-badge badge ${badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.color}`}>
+                      {badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.label}
+                    </div>
+                  </div>
+                </li>
+              ))
+            )}
+          </ul>
+        </div>
+        <div className="sale-edit-btn">
+          <LoadMoreButton
+            hasMore={hasMore}
+            onLoadMore={() => {
+              setOffset(offset + 10)
+            }}
+          />
+        </div>
+      </div>
+    </>
+  )
+}

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/useInquiry.ts

@@ -0,0 +1,116 @@
+import { InquiryList, Inquiry, InquirySaveResponse, CommonCode } from '@/types/Inquiry'
+import { useAxios } from '@/hooks/useAxios'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useInquiryFilterStore } from '@/store/inquiryFilterStore'
+import { useMemo } from 'react'
+import { useSessionStore } from '@/store/session'
+
+export function useInquiry(
+  qnoNo?: number,
+  compCd?: string,
+): {
+  inquiryList: InquiryList[]
+  isLoadingInquiryList: boolean
+  inquiryDetail: Inquiry | null
+  isLoadingInquiryDetail: boolean
+  isSavingInquiry: boolean
+  saveInquiry: (formData: FormData) => Promise<InquirySaveResponse>
+  downloadFile: (encodeFileNo: number, srcFileNm: string) => Promise<Blob | null>
+  commonCodeList: CommonCode[]
+} {
+  const queryClient = useQueryClient()
+  const { inquiryListRequest, offset } = useInquiryFilterStore()
+  const { session } = useSessionStore()
+  const { axiosInstance } = useAxios()
+
+  const { data: inquiryList, isLoading: isLoadingInquiryList } = useQuery({
+    queryKey: ['inquiryList', inquiryListRequest, offset],
+    queryFn: async () => {
+      try {
+        const resp = await axiosInstance(null).get<{ data: InquiryList[] }>(`/api/qna/list`, {
+          params: { inquiryListRequest, startRow: offset, endRow: offset + 9 },
+        })
+        return resp.data.data
+      } catch (error: any) {
+        console.error(error.response.data)
+        return []
+      }
+    },
+    enabled: !!inquiryListRequest,
+  })
+
+  const inquriyListData = useMemo(() => {
+    if (isLoadingInquiryList) {
+      return { inquiryList: [] }
+    }
+    return {
+      inquiryList: inquiryList ?? [],
+    }
+  }, [inquiryList, isLoadingInquiryList])
+
+  const { data: inquiryDetail, isLoading: isLoadingInquiryDetail } = useQuery({
+    queryKey: ['inquiryDetail', qnoNo, compCd, session?.userId],
+    queryFn: async () => {
+      try {
+        const resp = await axiosInstance(null).get<{ data: Inquiry }>(`/api/qna/detail`, {
+          params: { qnoNo, compCd, langCd: 'JA', loginId: session?.userId ?? '' },
+        })
+        return resp.data.data
+      } catch (error: any) {
+        console.error(error.response)
+        return null
+      }
+    },
+    enabled: qnoNo !== undefined && compCd !== undefined,
+  })
+
+  const { mutateAsync: saveInquiry, isPending: isSavingInquiry } = useMutation({
+    mutationFn: async (formData: FormData) => {
+      const resp = await axiosInstance(null).post<{ data: InquirySaveResponse }>('/api/qna/save', formData)
+      return resp.data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['inquiryList'] })
+    },
+  })
+
+  const downloadFile = async (encodeFileNo: number, srcFileNm: string) => {
+    try {
+      const resp = await axiosInstance(null).get<Blob>(`/api/qna/file`, { params: { encodeFileNo, srcFileNm } })
+      const blob = new Blob([resp.data], { type: 'application/octet-stream;charset=UTF-8' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `${srcFileNm}`
+      a.click()
+      URL.revokeObjectURL(url)
+      return blob
+    } catch (error: any) {
+      if (error.response.status === 404) {
+        alert('ファイルが見つかりません')
+      }
+      return null
+    }
+  }
+
+  const { data: commonCodeList, isLoading: isLoadingCommonCodeList } = useQuery({
+    queryKey: ['commonCodeList'],
+    queryFn: async () => {
+      const resp = await axiosInstance(null).get<{ data: CommonCode[] }>(`/api/qna`)
+      return resp.data
+    },
+    staleTime: Infinity,
+    gcTime: Infinity,
+  })
+
+  return {
+    inquiryList: inquriyListData.inquiryList,
+    inquiryDetail: inquiryDetail ?? null,
+    isLoadingInquiryList,
+    isLoadingInquiryDetail,
+    isSavingInquiry,
+    saveInquiry,
+    downloadFile,
+    commonCodeList: commonCodeList?.data ?? [],
+  }
+}

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/store/inquiryFilterStore.ts

@@ -1,41 +1,44 @@
+import { InquiryListRequest } from '@/types/Inquiry'
 import { create } from 'zustand'
 
-export const FILTER_OPTIONS = [
-  {
-    id: 'all',
-    label: '全体',
-  },
-  {
-    id: 'completed',
-    label: '回答完了',
-  },
-  {
-    id: 'waiting',
-    label: '回答待ち',
-  },
-]
-export type FILTER_OPTIONS_ENUM = (typeof FILTER_OPTIONS)[number]['id']
-
 type InquiryFilterState = {
-  keyword: string
+  inquiryListRequest: InquiryListRequest
-  filter: FILTER_OPTIONS_ENUM
+  setInquiryListRequest: (inquiryListRequest: InquiryListRequest) => void
-  isMySurvey: string | null
-  offset: number
-  setKeyword: (keyword: string) => void
-  setFilter: (filter: FILTER_OPTIONS_ENUM) => void
-  setIsMySurvey: (isMySurvey: string | null) => void
-  setOffset: (offset: number) => void
   reset: () => void
+  offset: number
+  setOffset: (offset: number) => void
 }
 
 export const useInquiryFilterStore = create<InquiryFilterState>((set) => ({
-  keyword: '',
+  inquiryListRequest: {
-  filter: 'all',
+    compCd: '5200',
-  isMySurvey: null,
+    langCd: 'JA',
-  offset: 0,
+    storeId: '',
-  setKeyword: (keyword) => set({ keyword }),
+    siteTpCd: 'QC',
-  setFilter: (filter) => set({ filter }),
+    schTitle: null,
-  setIsMySurvey: (isMySurvey) => set({ isMySurvey }),
+    schRegId: null,
+    schFromDt: null,
+    schToDt: null,
+    schAnswerYn: null,
+    loginId: '',
+  },
+  setInquiryListRequest: (inquiryListRequest) => set({ inquiryListRequest }),
+  reset: () =>
+    set({
+      inquiryListRequest: {
+        compCd: '5200',
+        langCd: 'JA',
+        storeId: '',
+        siteTpCd: 'QC',
+        schTitle: '',
+        schRegId: '',
+        schFromDt: '',
+        schToDt: '',
+        schAnswerYn: null,
+        loginId: '',
+      },
+      offset: 1,
+    }),
+  offset: 1,
   setOffset: (offset) => set({ offset }),
-  reset: () => set({ keyword: '', filter: 'all', isMySurvey: null, offset: 0 }),
 }))

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/_sub.scss

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

src/types/Inquiry.ts

@@ -0,0 +1,97 @@
+export type InquiryListRequest = {
+  compCd: string //company code
+  langCd: string //language code
+  storeId: string //store id
+  siteTpCd: string //site type code (QC: QCast, QR: QRead)
+  schTitle: string | null //search title
+  schRegId: string | null //search regId
+  schFromDt: string | null //search start date
+  schToDt: string | null //search end date
+  schAnswerYn: string | null //search answer yn
+  loginId: string //login id
+}
+
+export type InquiryList = {
+  totCnt: number //total count
+  rowNumber: number //row number
+  compCd: string //company code
+  qnaNo: number //qna number
+  qstTitle: string //title
+  regDt: string //registration date
+  regId: string //registration Userid
+  regNm: string //registration User name
+  answerYn: string //answer yn - Y / N
+  attachYn: string | null //attach yn - Y / N
+  qnaClsLrgCd: string //qna CLS large Code
+  qnaClsMidCd: string //qna CLS Mid Code
+  qnaClsSmlCd: string | null //qna CLS Small Code
+  regUserNm: string //registration User name
+}
+
+export type InquiryDetailRequest = {
+  compCd: string //company code
+  langCd: string //language code
+  qnaNo: number //qna number
+  loginId: string //login id
+}
+
+export type Inquiry = {
+  compCd: string //company code
+  qnaNo: number //qna number
+  qstTitle: string //title
+  qstContents: string //content
+  regDt: string //registration date
+  regId: string //registration Userid
+  regNm: string //registration User name
+  regEmail: string //registration User email
+  answerYn: string //answer yn - Y / N
+  ansContents: string | null //answer content
+  ansRegDt: string | null //answer registration date
+  ansRegNm: string | null //answer registration User name
+  storeId: string | null //store id
+  storeNm: string | null //store name
+  regUserNm: string //registration User name
+  regUserTelNo: string | null //registration User tel number
+  qnaClsLrgCd: string //qna CLS large Code
+  qnaClsMidCd: string //qna CLS Mid Code
+  qnaClsSmlCd: string | null //qna CLS Small Code
+  listFile: listFile[] | null //Question list file
+  ansListFile: listFile[] | null //Answer list file
+}
+
+export type listFile = {
+  fileNo: number //file number
+  encodeFileNo: string //encode file number
+  srcFileNm: string //source file name
+  fileCours: string //file course
+  fileSize: number //file size(Byte)
+  regDt: string //registration date
+}
+
+export type InquiryRequest = {
+  compCd: string //company code
+  siteTpCd: string //site type code(QC: QCast, QR: QRead)
+  qnaClsLrgCd: string //qna CLS large Code
+  qnaClsMidCd: string //qna CLS Mid Code
+  qnaClsSmlCd: string | null //qna CLS Small Code
+  title: string //title
+  contents: string //contents
+  regId: string //registration Userid
+  storeId: string //store id
+  regUserNm: string //registration User name
+  regUserTelNo: string | null //registration User tel number
+  qstMail: string //mail
+}
+
+export type InquirySaveResponse = {
+  cnt: number | null //count
+  qnaNo: number //qna number
+  mailYn: string //mail yn - Y / N
+}
+
+export type CommonCode = {
+  headCd: string
+  code: string
+  name: string
+  refChar1: string
+}