feat: 지붕재 적합성 데이터 조회 기능 추가

src/app/api/comm-code/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/libs/prisma'
+import type { CommCode } from '@/types/CommCode'
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const headCode = searchParams.get('headCode')
+
+    // @ts-ignore
+    const headCd = await prisma.BC_COMM_H.findFirst({
+      where: {
+        HEAD_ID: headCode,
+      },
+      select: {
+        HEAD_CD: true,
+      },
+    })
+
+    if (!headCd) {
+      return NextResponse.json({ error: `${headCode}를 찾을 수 없습니다` }, { status: 404 })
+    }
+
+    // @ts-ignore
+    const roofMaterials: CommCode[] = await prisma.BC_COMM_L.findMany({
+      where: {
+        HEAD_CD: headCd.HEAD_CD,
+      },
+      select: {
+        HEAD_CD: true,
+        CODE: true,
+        CODE_JP: true,
+      },
+      orderBy: {
+        CODE: 'asc',
+      },
+    })
+
+    return NextResponse.json(roofMaterials)
+  } catch (error) {
+    console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
+    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
+  }
+}

src/app/api/suitable/category/route.ts

@@ -1,16 +0,0 @@
-import { NextResponse } from 'next/server'
-import { prisma } from '@/libs/prisma'
-
-export async function GET() {
-  // @ts-ignore
-  const roofMaterialCategory = await prisma.MS_SUITABLE.findMany({
-    select: {
-      roof_material: true,
-    },
-    distinct: ['roof_material'],
-    orderBy: {
-      roof_material: 'asc',
-    },
-  })
-  return NextResponse.json(roofMaterialCategory)
-}

src/app/api/suitable/detail/route.ts

@@ -1,17 +0,0 @@
-import { NextResponse } from 'next/server'
-import { prisma } from '@/libs/prisma'
-
-export async function GET(request: Request) {
-  const { searchParams } = new URL(request.url)
-  const roofMaterial = searchParams.get('roof-material')
-  console.log('🚀 ~ GET ~ roof-material:', roofMaterial)
-
-  // @ts-ignore
-  const suitables = await prisma.MS_SUITABLE.findMany({
-    where: {
-      roof_material: roofMaterial,
-    },
-  })
-
-  return NextResponse.json(suitables)
-}

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

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/libs/prisma'
+import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
 
 export async function GET(request: NextRequest) {
   try {
@@ -9,24 +10,59 @@ export async function GET(request: NextRequest) {
 
     let whereCondition: any = {}
     if (category) {
-      whereCondition['roof_material'] = category
+      whereCondition[SUITABLE_HEAD_CODE.ROOF_MT_CD] = category
     }
     if (keyword) {
-      whereCondition['product_name'] = {
+      whereCondition['PRODUCT_NAME'] = {
         contains: keyword,
       }
     }
-    console.log('🚀 ~ /api/suitable/list: ~ prisma where condition:', whereCondition)
 
+    // // 1 include 사용
+    // // @ts-ignore
+    // const suitable = await prisma.MS_SUITABLE_MAIN.findMany({
+    //   where: whereCondition,
+    //   include: {
+    //     MS_SUITABLE_DETAIL: true,
+    //   },
+    //   orderBy: {
+    //     PRODUCT_NAME: 'asc',
+    //   },
+    // })
+
+    // 2 include 안쓰고 따로 쿼리, 쓸거만 골라서 조회
     // @ts-ignore
-    const suitables = await prisma.MS_SUITABLE.findMany({
+    const suitable = await prisma.MS_SUITABLE_MAIN.findMany({
+      select: {
+        ID: true,
+        PRODUCT_NAME: true,
+        ROOF_MT_CD: true,
+      },
       where: whereCondition,
       orderBy: {
-        product_name: 'asc',
+        PRODUCT_NAME: 'asc',
       },
     })
+    // @ts-ignore
+    const suitableDetail = await prisma.MS_SUITABLE_DETAIL.findMany({
+      select: {
+        ID: true,
+        MAIN_ID: true,
+        TRESTLE_MFPC_CD: true,
+        TRESTLE_MANUFACTURER_PRODUCT_NAME: true,
+        MEMO: true,
+      },
+      where: whereCondition
+        ? {
+            MAIN_ID: {
+              in: suitable.map((suitable: { ID: number }) => suitable.ID),
+            },
+          }
+        : undefined,
+      orderBy: [{ MAIN_ID: 'asc' }, { TRESTLE_MANUFACTURER_PRODUCT_NAME: 'asc' }],
+    })
 
-    return NextResponse.json(suitables)
+    return NextResponse.json({ suitable, suitableDetail })
   } catch (error) {
     console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
     return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })

src/components/suitable/Suitable.tsx

@@ -1,27 +1,69 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
-import SuitableCheckData from './SuitableCheckData'
+import SuitableList from './SuitableList'
-import SuitableNoData from './SuitableNoData'
+import { useSuitable } from '@/hooks/useSuitable'
+import { useSuitableStore } from '@/store/useSuitableStore'
+import type { CommCode } from '@/types/CommCode'
+import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
 
 export default function Suitable() {
   const [reference, setReference] = useState(false)
 
+  const { getSuitableCommCode, refetchBySearch } = useSuitable()
+  const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()
+
+  const handleInputSearch = async () => {
+    if (!searchValue.trim()) {
+      alert('屋根材の製品名を入力してください。')
+      return
+    }
+    setIsSearch(true)
+    refetchBySearch()
+  }
+
+  const handleInputClear = () => {
+    setSearchValue('')
+    setIsSearch(false)
+    refetchBySearch()
+  }
+
+  useEffect(() => {
+    refetchBySearch()
+  }, [selectedCategory])
+
+  useEffect(() => {
+    getSuitableCommCode()
+    return () => {
+      setSelectedCategory('')
+      setSearchValue('')
+      clearSelectedItems()
+    }
+  }, [])
+
   return (
     <div className="border-frame">
       <div className="sale-form-bx">
-        <select className="select-form" name="" id="">
+        <select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
-          <option value="">屋根材を選択してください.</option>
-          <option value="">屋根材を選択してください.</option>
-          <option value="">屋根材を選択してください.</option>
-          <option value="">屋根材を選択してください.</option>
           <option value="">屋根材を選択してください.</option>
+          {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MT_CD)?.map((category: CommCode, index: number) => (
+            <option key={index} value={category.CODE}>
+              {category.CODE_JP}
+            </option>
+          ))}
         </select>
       </div>
       <div className="sale-form-bx">
         <div className="search-input">
-          <input type="text" className="search-frame" placeholder="屋根材 製品名を入力してください." />
+          <input
-          <button className="search-icon"></button>
+            type="text"
+            className="search-frame"
+            placeholder="屋根材 製品名を入力してください."
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+          />
+          {searchValue && <button className="del-icon" onClick={handleInputClear} />}
+          <button className="search-icon" onClick={handleInputSearch} />
         </div>
       </div>
       <div className="compliance-check-wrap">
@@ -55,33 +97,8 @@ export default function Suitable() {
             </li>
           </ul>
         </div>
-        {/* checkData */}
+        <SuitableList />
-        {/* 데이터 없을경우 버튼 영역 안보여야함 */}
-        <SuitableCheckData />
-        <SuitableCheckData />
-        <SuitableCheckData />
-        <SuitableCheckData />
       </div>
-      {/* 데이터 없을경우 버튼 영역 안보여야함 */}
-      <div className="btn-flex-wrap com">
-        <div className="btn-bx">
-          <button className="btn-frame n-blue icon">
-            全選択<i className="btn-arr"></i>
-          </button>
-        </div>
-        <div className="btn-bx">
-          <button className="btn-frame red icon">
-            詳細を見る<i className="btn-arr"></i>
-          </button>
-        </div>
-        <div className="btn-bx">
-          <button className="btn-frame n-blue icon">
-            選択ダウンロード<i className="btn-arr"></i>
-          </button>
-        </div>
-      </div>
-      {/* 검색기록 없을떄 위에 두 영역 안보이고 이 부분만 보여야 함*/}
-      {/* <SuitableNoData /> */}
     </div>
   )
 }

src/components/suitable/SuitableCheckData.tsx

@@ -1,68 +0,0 @@
-'use client'
-
-export default function SuitableCheckData() {
-  return (
-    <>
-      <div className={`compliance-check-bx act`}>
-        <div className="check-name-wrap">
-          <div className="check-form-box com-tit">
-            <input type="checkbox" id="ch01" />
-            <label htmlFor="ch01">アースティ４０</label>
-          </div>
-          <div className="check-name-btn">
-            <button className="bx-btn"></button>
-          </div>
-        </div>
-        <ul className="reference-list check">
-          <li className="reference-item">
-            <div className="check-item-wrap">
-              <div className="check-form-box com-txt">
-                <input type="checkbox" id="ch02" />
-                <label htmlFor="ch02">屋根技研 支持瓦</label>
-              </div>
-              <div className="compliance-icon-wrap">
-                <i className="compliance-icon check"></i>
-                <i className="compliance-icon x"></i>
-              </div>
-            </div>
-          </li>
-          <li className="reference-item">
-            <div className="check-item-wrap">
-              <div className="check-form-box com-txt">
-                <input type="checkbox" id="ch03" />
-                <label htmlFor="ch03">屋根技研 支持金具</label>
-              </div>
-              <div className="compliance-icon-wrap">
-                <i className="compliance-icon x"></i>
-                <i className="compliance-icon tip"></i>
-              </div>
-            </div>
-          </li>
-          <li className="reference-item">
-            <div className="check-item-wrap">
-              <div className="check-form-box com-txt">
-                <input type="checkbox" id="ch04" />
-                <label htmlFor="ch04">屋根技研YGアンカー</label>
-              </div>
-              <div className="compliance-icon-wrap">
-                <i className="compliance-icon tip"></i>
-                <i className="compliance-icon quest"></i>
-              </div>
-            </div>
-          </li>
-          <li className="reference-item">
-            <div className="check-item-wrap">
-              <div className="check-form-box com-txt">
-                <input type="checkbox" id="ch05" />
-                <label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label>
-              </div>
-              <div className="compliance-icon-wrap">
-                <i className="compliance-icon check"></i>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </>
-  )
-}

src/components/suitable/SuitableList.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import SuitableNoData from './SuitableNoData'
+import { useSuitable } from '@/hooks/useSuitable'
+import { useSuitableStore } from '@/store/useSuitableStore'
+import { SUITABLE_HEAD_CODE, type SuitableMain, type SuitableDetail } from '@/types/Suitable'
+
+export default function SuitableList() {
+  const { toCodeName, suitableSearchResults, isSearchLoading } = useSuitable()
+  const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
+
+  const handleItemClick = (itemId: number) => {
+    selectedItems.some((selected) => selected === itemId) ? removeSelectedItem(itemId) : addSelectedItem(itemId)
+  }
+
+  const suitableCheck = (value: string) => {
+    if (value === '×') {
+      return <i className="compliance-icon x" />
+    } else if (value === 'ー') {
+      return <i className="compliance-icon quest" />
+    } else {
+      return <i className="compliance-icon check" />
+    }
+  }
+
+  const filterSuitableDetail = (mainId: number): SuitableDetail[] | undefined => {
+    const result: SuitableDetail[] = []
+    for (const subItem of suitableSearchResults?.suitableDetail ?? []) {
+      if (subItem.MAIN_ID > mainId) break
+      if (subItem.MAIN_ID === mainId) {
+        result.push(subItem)
+      }
+    }
+    return result
+  }
+
+  return (
+    <>
+      {isSearchLoading ? (
+        <div>Loading...</div>
+      ) : suitableSearchResults && suitableSearchResults.suitable.length > 0 ? (
+        suitableSearchResults.suitable.map((item: SuitableMain) => (
+          <div className={`compliance-check-bx act`} key={item.ID}>
+            <div className="check-name-wrap">
+              <div className="check-form-box com-tit">
+                <input type="checkbox" id={`ch${item.ID}`} />
+                <label htmlFor={`ch${item.ID}`}>{item.PRODUCT_NAME}</label>
+              </div>
+              <div className="check-name-btn">
+                <button className="bx-btn" onClick={() => handleItemClick(item.ID)}></button>
+              </div>
+            </div>
+            <ul className="reference-list check">
+              <li className="reference-item">
+                {filterSuitableDetail(item.ID)?.map((subItem: SuitableDetail) => (
+                  <div className="check-item-wrap" key={subItem.ID}>
+                    <div className="check-form-box com-txt">
+                      <input type="checkbox" id={`ch${subItem.ID}`} />
+                      <label htmlFor={`ch${subItem.ID}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.TRESTLE_MFPC_CD)}</label>
+                    </div>
+                    <div className="compliance-icon-wrap">
+                      {suitableCheck(subItem.TRESTLE_MANUFACTURER_PRODUCT_NAME)}
+                      {subItem.MEMO && <i className="compliance-icon tip"></i>}
+                    </div>
+                  </div>
+                ))}
+              </li>
+            </ul>
+          </div>
+        ))
+      ) : (
+        <SuitableNoData />
+      )}
+    </>
+  )
+}

src/hooks/useCommCode.ts

@@ -0,0 +1,18 @@
+import { axiosInstance } from '@/libs/axios'
+import type { CommCode } from '@/types/CommCode'
+
+export function useCommCode() {
+  const getCommCode = async (headCode: string): Promise<CommCode[]> => {
+    try {
+      const response = await axiosInstance(null).get<CommCode[]>('/api/comm-code', { params: { headCode: headCode } })
+      return response.data
+    } catch (error) {
+      console.error(`common code (${headCode}) load failed:`, error)
+      return []
+    }
+  }
+
+  return {
+    getCommCode,
+  }
+}

src/hooks/useSuitable.ts

@@ -1,30 +1,95 @@
-import { suitableApi } from '@/api/suitable'
+import { useQuery } from '@tanstack/react-query'
+import { axiosInstance } from '@/libs/axios'
+import { useSuitableStore } from '@/store/useSuitableStore'
+import { useCommCode } from './useCommCode'
+import { SUITABLE_HEAD_CODE, type SuitableData, type SuitableMain, type SuitableDetail } from '@/types/Suitable'
 
 export function useSuitable() {
-  const getCategories = async () => {
+  const { getCommCode } = useCommCode()
-    try {
+  const { selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
-      return await suitableApi.getCategory()
-    } catch (error) {
-      console.error('카테고리 데이터 로드 실패:', error)
-      return []
-    }
-  }
 
-  const getSuitables = async () => {
+  const getSuitables = async (): Promise<SuitableData> => {
     try {
-      return await suitableApi.getList()
+      const response = await axiosInstance(null).get<SuitableData>('/api/suitable/list')
+      return response.data
     } catch (error) {
       console.error('지붕재 데이터 로드 실패:', error)
+      return {
+        suitable: [],
+        suitableDetail: [],
+      }
     }
   }
 
-  const updateSearchResults = async (selectedCategory: string | undefined, searchValue: string | undefined) => {
+  // const updateSearchResults = async (selectedCategory: string | undefined, searchValue: string | undefined): Promise<SuitableData[]> => {
-    try {
+  //   try {
-      return await suitableApi.getList(selectedCategory, searchValue)
+  //     const response = await axiosInstance(null).get<SuitableData[]>('/api/suitable/list', { params: { selectedCategory, searchValue } })
-    } catch (error) {
+  //     return response.data
-      console.error('지붕재 데이터 검색 실패:', error)
+  //   } catch (error) {
+  //     console.error('지붕재 데이터 검색 실패:', error)
+  //     return []
+  //   }
+  // }
+
+  const getSuitableCommCode = () => {
+    const headCodes = Object.values(SUITABLE_HEAD_CODE) as SUITABLE_HEAD_CODE[]
+    for (const code of headCodes) {
+      getCommCode(code).then((res) => {
+        setSuitableCommCode(code, res)
+      })
     }
   }
 
-  return { getCategories, getSuitables, updateSearchResults }
+  const toCodeName = (headCode: string, code: string): string => {
+    const commCode = suitableCommCode.get(headCode)
+    return commCode?.find((item) => item.CODE === code)?.CODE_JP || ''
+  }
+
+  const { data: suitableList, isLoading: isInitialLoading } = useQuery<SuitableData>({
+    queryKey: ['suitables', 'list'],
+    queryFn: async () => await getSuitables(),
+    staleTime: 1000 * 60 * 10, // 10분
+    gcTime: 1000 * 60 * 10, // 10분
+  })
+
+  const {
+    data: suitableSearchResults,
+    refetch: refetchBySearch,
+    isLoading: isSearchLoading,
+  } = useQuery<SuitableData>({
+    queryKey: ['suitables', 'search', selectedCategory, searchValue],
+    queryFn: async () => {
+      if (!isSearch && !selectedCategory) {
+        return suitableList ?? (await getSuitables()) // 검색 상태가 아니면 초기 데이터 반환 임시처리
+      } else {
+        const suitable = suitableList?.suitable.filter((item: SuitableMain) => {
+          const categoryMatch = !selectedCategory || item.ROOF_MT_CD === selectedCategory
+          const searchMatch = !searchValue || item.PRODUCT_NAME.includes(searchValue)
+          return categoryMatch && searchMatch
+        })
+        const mainIds = suitable?.map((item: SuitableMain) => item.ID)
+        const suitableDetail = suitableList?.suitableDetail.filter((item: SuitableDetail) => {
+          return mainIds?.includes(item.MAIN_ID)
+        })
+        return {
+          suitable: suitable ?? [],
+          suitableDetail: suitableDetail ?? [],
+        }
+      }
+    },
+    staleTime: 1000 * 60 * 10,
+    gcTime: 1000 * 60 * 10,
+    enabled: true,
+  })
+
+  return {
+    getSuitables,
+    getSuitableCommCode,
+    toCodeName,
+    suitableList,
+    isInitialLoading,
+    suitableSearchResults,
+    refetchBySearch,
+    isSearchLoading,
+  }
 }

src/store/useSuitableStore.ts

@@ -1,68 +1,71 @@
 import { create } from 'zustand'
-import { Suitable, suitableApi } from '@/api/suitable'
+import type { CommCode } from '@/types/CommCode'
 
 interface SuitableState {
-  // // 검색 결과 리스트
+  /* 공통코드 */
-  // searchResults: Suitable[]
+  suitableCommCode: Map<string, CommCode[]>
-  // // 초기 데이터 로드
+  /* 공통코드 설정 */
-  // fetchInitializeData: () => Promise<void>
+  setSuitableCommCode: (headCode: string, commCode: CommCode[]) => void
-  // // 검색 결과 설정
-  // setSearchResults: (results: Suitable[]) => void
-  // // 검색 결과 초기화
-  // resetSearchResults: () => void
 
-  // 선택된 아이템 리스트
+  /* 검색 상태 */
-  selectedItems: Suitable[]
+  isSearch: boolean
-  // 선택된 아이템 추가
+  /* 검색 상태 설정 */
-  addSelectedItem: (item: Suitable) => void
+  setIsSearch: (isSearch: boolean) => void
-  // 선택된 아이템 제거
+
+  /* 선택된 카테고리 */
+  selectedCategory: string
+  /* 선택된 카테고리 설정 */
+  setSelectedCategory: (category: string) => void
+
+  /* 검색 값 */
+  searchValue: string
+  /* 검색 값 설정 */
+  setSearchValue: (value: string) => void
+
+  /* 선택된 아이템 리스트 */
+  selectedItems: number[]
+  /* 선택된 아이템 추가 */
+  addSelectedItem: (itemId: number) => void
+  /* 선택된 아이템 제거 */
   removeSelectedItem: (itemId: number) => void
-  // 선택된 아이템 모두 제거
+  /* 선택된 아이템 모두 제거 */
   clearSelectedItems: () => void
 }
 
 export const useSuitableStore = create<SuitableState>((set) => ({
-  // // 초기 상태
+  suitableCommCode: new Map() as Map<string, CommCode[]>,
-  // searchResults: [],
+  isSearch: false as boolean,
+  selectedCategory: '' as string,
+  searchValue: '' as string,
+  selectedItems: [] as number[],
 
-  // // 초기 데이터 로드
+  /* 공통코드 설정 */
-  // fetchInitializeData: async () => {
+  setSuitableCommCode: (headCode: string, commCode: CommCode[]) =>
-  //   const suitables = await fetchInitialSuitablee()
-  //   set({ searchResults: suitables })
-  // },
-
-  // // 검색 결과 설정
-  // setSearchResults: (results) => set({ searchResults: results }),
-
-  // // 검색 결과 초기화
-  // resetSearchResults: () => set({ searchResults: [] }),
-
-  // 초기 상태
-  selectedItems: [],
-
-  // 선택된 아이템 추가 (중복 방지)
-  addSelectedItem: (item) =>
     set((state) => ({
-      selectedItems: state.selectedItems.some((i) => i.id === item.id) ? state.selectedItems : [...state.selectedItems, item],
+      suitableCommCode: new Map(state.suitableCommCode).set(headCode, commCode),
     })),
 
-  // 선택된 아이템 제거
+  /* 검색 상태 설정 */
-  removeSelectedItem: (itemId) =>
+  setIsSearch: (isSearch: boolean) => set({ isSearch }),
+
+  /* 선택된 카테고리 설정 */
+  setSelectedCategory: (category: string) => set({ selectedCategory: category }),
+
+  /* 검색 값 설정 */
+  setSearchValue: (value: string) => set({ searchValue: value }),
+
+  /* 선택된 아이템 추가 */
+  addSelectedItem: (itemId: number) =>
     set((state) => ({
-      selectedItems: state.selectedItems.filter((item) => item.id !== itemId),
+      selectedItems: state.selectedItems.some((i) => i === itemId) ? state.selectedItems : [...state.selectedItems, itemId],
     })),
 
-  // 선택된 아이템 모두 제거
+  /* 선택된 아이템 제거 */
+  removeSelectedItem: (itemId: number) =>
+    set((state) => ({
+      selectedItems: state.selectedItems.filter((i) => i !== itemId),
+    })),
+
+  /* 선택된 아이템 모두 제거 */
   clearSelectedItems: () => set({ selectedItems: [] }),
 }))
-
-// // 전체 데이터 초기화 함수
-// async function fetchInitialSuitablee() {
-//   try {
-//     const suitable = await suitableApi.getList()
-//     return suitable
-//   } catch (error) {
-//     console.error('초기 데이터 로드 실패:', error)
-//     return []
-//   }
-// }

src/types/CommCode.ts

@@ -0,0 +1,5 @@
+export type CommCode = {
+  HEAD_CD: string
+  CODE: string
+  CODE_JP: string
+}

src/types/Suitable.ts

@@ -0,0 +1,40 @@
+export enum SUITABLE_HEAD_CODE {
+  /* 지붕재 제조사명 */
+  MANU_FT_CD = 'MANU_FT_CD',
+  /* 지붕재 종류 */
+  ROOF_MT_CD = 'ROOF_MT_CD',
+  /* 마운팅 브래킷 종류 */
+  ROOF_SH_CD = 'ROOF_SH_CD',
+  /* 마운팅 브래킷 제조사명 및 제품코드드 */
+  TRESTLE_MFPC_CD = 'TRESTLE_MFPC_CD',
+}
+
+export type SuitableIncludeDetail = {
+  ID: number
+  PRODUCT_NAME: string
+  MANU_FT_CD: string
+  ROOF_MT_CD: string
+  ROOF_SH_CD: string
+  MS_SUITABLE_DETAIL: SuitableDetail[]
+}
+
+export type SuitableData = {
+  suitable: SuitableMain[]
+  suitableDetail: SuitableDetail[]
+}
+
+export type SuitableMain = {
+  ID: number
+  PRODUCT_NAME: string
+  MANU_FT_CD: string
+  ROOF_MT_CD: string
+  ROOF_SH_CD: string
+}
+
+export type SuitableDetail = {
+  ID: number
+  MAIN_ID: number
+  TRESTLE_MFPC_CD: string
+  TRESTLE_MANUFACTURER_PRODUCT_NAME: string
+  MEMO: string
+}