feat: 지붕재 적합성 전체선택/전체해제 기능 및 관련 기능 추가

- 지붕재 적합성 전체선택/전체해제 기능 추가
- 검색조건에 따른 데이터 조회 api 추가
- 선택된 데이터 조회 api 추가

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

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/libs/prisma'
+import { type Suitable } from '@/types/Suitable'
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const category = searchParams.get('category')
+    const keyword = searchParams.get('keyword')
+
+    let query = `
+    SELECT 
+      msm.id
+      , details.detail_id
+    FROM ms_suitable_main msm
+    LEFT JOIN (
+      SELECT
+        msd.main_id
+        , STRING_AGG(msd.id, ',') AS detail_id
+      FROM ms_suitable_detail msd
+      GROUP BY msd.main_id
+    ) AS details 
+      ON msm.id = details.main_id 
+    WHERE 1=1
+      --roofMtCd AND msm.roof_mt_cd = ':roofMtCd'
+      --productName AND msm.product_name LIKE '%:productName%'
+    ;
+    `
+
+    // 검색 조건 설정
+    if (category) {
+      query = query.replace('--roofMtCd ', '')
+      query = query.replace(':roofMtCd', category)
+    }
+    if (keyword) {
+      query = query.replace('--productName ', '')
+      query = query.replace(':productName', keyword)
+    }
+
+    const suitableIdSet = await prisma.$queryRawUnsafe(query)
+
+    return NextResponse.json(suitableIdSet)
+  } catch (error) {
+    console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
+    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
+  }
+}

src/app/api/suitable/route.ts

@@ -1,12 +1,63 @@
-import { NextResponse } from 'next/server'
+import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/libs/prisma'
+import { Suitable } from '@/types/Suitable'
 
-export async function POST(request: Request) {
+export async function GET(request: NextRequest) {
-  const body = await request.json()
+  try {
-  // @ts-ignore
+    const searchParams = request.nextUrl.searchParams
-  const suitables = await prisma.MS_SUITABLE.createMany({
-    data: body,
-  })
 
-  return NextResponse.json({ message: 'Suitable created successfully' })
+    const ids = searchParams.get('ids')
+    const detailIds = searchParams.get('subIds')
+
+    let query = `
+    SELECT 
+      msm.id
+      , msm.product_name
+      , msm.manu_ft_cd
+      , msm.roof_mt_cd
+      , msm.roof_sh_cd
+      , details.detail
+    FROM ms_suitable_main msm
+    LEFT JOIN (
+      SELECT
+        msd.main_id
+        , (
+          SELECT
+            msd_json.id
+            , msd_json.trestle_mfpc_cd
+            , msd_json.trestle_manufacturer_product_name
+            , msd_json.memo
+          FROM ms_suitable_detail msd_json
+            WHERE msd.main_id = msd_json.main_id
+          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)
+        --detailIds AND details.id IN (:detailIds)
+    WHERE 1=1
+      --ids AND msm.id IN (:mainIds)
+    ORDER BY msm.product_name;
+    `
+
+    // 검색 조건 설정
+    if (ids) {
+      query = query.replaceAll('--ids ', '')
+      query = query.replaceAll(':mainIds', ids)
+      if (detailIds) {
+        query = query.replaceAll('--detailIds ', '')
+        query = query.replaceAll(':detailIds', detailIds)
+      }
+    }
+
+    const suitable: Suitable[] = await prisma.$queryRawUnsafe(query)
+
+    return NextResponse.json(suitable)
+  } catch (error) {
+    console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
+    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
+  }
 }
+

src/components/popup/SuitableDetailPopup.tsx

@@ -1,10 +1,39 @@
 'use client'
 
 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'
 
 export default function SuitableDetailPopup() {
   const popupController = usePopupController()
+  const { getSuitableDetails, serializeSelectedItems } = useSuitable()
+  const { selectedItems } = useSuitableStore()
+
+  const [openItems, setOpenItems] = useState<Set<number>>(new Set())
+  const [suitableDetails, setSuitableDetails] = useState<Suitable[]>([])
+
+  // 아이템 열기/닫기
+  const toggleItemOpen = useCallback((itemId: number) => {
+    setOpenItems((prev) => {
+      const newOpenItems = new Set(prev)
+      newOpenItems.has(itemId) ? newOpenItems.delete(itemId) : newOpenItems.add(itemId)
+      return newOpenItems
+    })
+  }, [])
+
+  // 선택된 아이템 상세 데이터 가져오기
+  const getSelectedItemsData = async () => {
+    const serialized: Map<string, string> = serializeSelectedItems()
+    setSuitableDetails(await getSuitableDetails(serialized.get('ids') ?? '', serialized.get('detailIds') ?? ''))
+  }
+
+  useEffect(() => {
+    getSelectedItemsData()
+  }, [])
 
   return (
     <div className="modal-popup">
@@ -23,11 +52,11 @@ export default function SuitableDetailPopup() {
           </div>
           <div className="modal-body">
             <div className="compliance-check-pop-wrap">
-              <div className={`compliance-check-bx act`}>
+              <div className={`compliance-check-bx ${openItems.has(1) ? 'act' : ''}`}>
                 <div className="check-name-wrap">
                   <div className="check-name">アースティ４０</div>
                   <div className="check-name-btn">
-                    <button className="bx-btn"></button>
+                    <button className="bx-btn" onClick={() => toggleItemOpen(1)}></button>
                   </div>
                 </div>
                 <div className="compliance-check-pop-contents">
@@ -115,114 +144,8 @@ export default function SuitableDetailPopup() {
                   </div>
                 </div>
               </div>
-              <div className={`compliance-check-bx`}>
-                <div className="check-name-wrap">
-                  <div className="check-name">アースティ４０</div>
-                  <div className="check-name-btn">
-                    <button className="bx-btn"></button>
-                  </div>
-                </div>
-                <div className="compliance-check-pop-contents">
-                  <div className="check-pop-data-wrap">
-                    <div className="check-pop-data-tit">屋根技研 支持瓦</div>
-                    <div className="check-pop-data-txt">㈱ダイトー</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 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_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="pop-data-table-head">
-                        <div className="pop-data-table-head-name">屋根技研YGアンカー</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="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>
-                      </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>
-            <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">
-                  1：1お問い合わせ<i className="btn-arr"></i>
-                </button>
-              </div>
             </div>
+            <SuitableDetailPopupButton />
           </div>
         </div>
       </div>

src/components/popup/SuitableDetailPopupButton.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+export default function SuitableDetailPopupButton() {
+  return (
+    <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">
+          1：1お問い合わせ<i className="btn-arr"></i>
+        </button>
+      </div>
+    </div>
+  )
+}

src/components/suitable/SuitableButton.tsx

@@ -1,20 +1,42 @@
 'use client'
 
 import { usePopupController } from '@/store/popupController'
+import { useSuitable } from '@/hooks/useSuitable'
+import { useSuitableStore } from '@/store/useSuitableStore'
 
 export default function SuitableButton() {
   const popupController = usePopupController()
+  const { getSuitableIds } = useSuitable()
+  const { selectedItems, addAllSelectedItem, clearSelectedItems } = useSuitableStore()
+
+  const handleSelectAll = async () => {
+    addAllSelectedItem(await getSuitableIds())
+  }
+
+  const handleOpenPopup = () => {
+    if (selectedItems.size === 0) {
+      alert('屋根材を選択してください。')
+      return
+    }
+    popupController.setSuitableDetailPopup(true)
+  }
 
   return (
     <div className="float-btn-wrap">
       <div className="btn-flex-wrap com">
         <div className="btn-bx">
-          <button className="btn-frame n-blue icon">
+          {selectedItems.size === 0 ? (
-            全選択<i className="btn-arr"></i>
+            <button className="btn-frame n-blue icon" onClick={handleSelectAll}>
-          </button>
+              全選択<i className="btn-arr"></i>
+            </button>
+          ) : (
+            <button className="btn-frame n-blue icon" onClick={clearSelectedItems}>
+              全て解除<i className="btn-arr"></i>
+            </button>
+          )}
         </div>
         <div className="btn-bx">
-          <button className="btn-frame red icon" onClick={() => popupController.setSuitableDetailPopup(true)}>
+          <button className="btn-frame red icon" onClick={handleOpenPopup}>
             詳細を見る<i className="btn-arr"></i>
           </button>
         </div>

src/hooks/useSuitable.ts

@@ -3,21 +3,19 @@ import { transformObjectKeys } from '@/libs/axios'
 import { useSuitableStore } from '@/store/useSuitableStore'
 import { useAxios } from './useAxios'
 import { useCommCode } from './useCommCode'
-import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
+import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail, type SuitableIds } from '@/types/Suitable'
 
 export function useSuitable() {
   const { axiosInstance } = useAxios()
   const { getCommCode } = useCommCode()
-  const { itemPerPage, selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
+  const { itemPerPage, selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch, selectedItems } = useSuitableStore()
 
   const getSuitables = async ({
     pageNumber,
-    ids,
     category,
     keyword,
   }: {
     pageNumber?: number
-    ids?: string
     category?: string
     keyword?: string
   }): Promise<Suitable[]> => {
@@ -26,7 +24,6 @@ export function useSuitable() {
         pageNumber: pageNumber || 1,
         itemPerPage: itemPerPage,
       }
-      if (ids) params.ids = ids
       if (category) params.category = category
       if (keyword) params.keyword = keyword
 
@@ -38,6 +35,31 @@ export function useSuitable() {
     }
   }
 
+  const getSuitableIds = async (): Promise<SuitableIds[]> => {
+    try {
+      const params: Record<string, string> = {}
+      if (selectedCategory) params.category = selectedCategory
+      if (searchValue) params.keyword = searchValue
+      const response = await axiosInstance(null).get<SuitableIds[]>('/api/suitable/pick', { params })
+      return response.data
+    } catch (error) {
+      console.error('지붕재 아이디 로드 실패:', error)
+      return []
+    }
+  }
+
+  const getSuitableDetails = async (ids: string, detailIds?: string): Promise<Suitable[]> => {
+    try {
+      const params: Record<string, string> = { ids: ids }
+      if (detailIds) params.detailIds = detailIds
+      const response = await axiosInstance(null).get<Suitable[]>('/api/suitable', { params })
+      return response.data
+    } catch (error) {
+      console.error('지붕재 상세 데이터 로드 실패:', error)
+      return []
+    }
+  }
+
   const getSuitableCommCode = () => {
     const headCodes = Object.values(SUITABLE_HEAD_CODE) as SUITABLE_HEAD_CODE[]
     for (const code of headCodes) {
@@ -100,8 +122,23 @@ export function useSuitable() {
     gcTime: 1000 * 60 * 10,
   })
 
+  const serializeSelectedItems = (): Map<string, 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>([
+      ['ids', ids.join(',')],
+      ['detailIds', detailIds.join(',')],
+    ])
+  }
+
   return {
     getSuitables,
+    getSuitableIds,
+    getSuitableDetails,
     getSuitableCommCode,
     toCodeName,
     toSuitableDetail,
@@ -111,5 +148,6 @@ export function useSuitable() {
     hasNextPage,
     isFetchingNextPage,
     isLoading,
+    serializeSelectedItems,
   }
 }

src/store/useSuitableStore.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand'
 import type { CommCode } from '@/types/CommCode'
+import type { SuitableIds } from '@/types/Suitable'
 
 interface SuitableState {
   /* 초기 데이터 로드 개수*/
@@ -27,8 +28,10 @@ interface SuitableState {
 
   /* 선택된 아이템 리스트 */
   selectedItems: Map<number, Set<number>>
-  /* 선택된 아이템 추가 */
+  /* 선택 아이템 추가 */
   addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => void
+  /* 아이템 전체 추가 */
+  addAllSelectedItem: (suitableIds: SuitableIds[]) => void
   /* 선택된 아이템 제거 */
   removeSelectedItem: (mainId: number, detailId?: number) => void
   /* 선택된 아이템 모두 제거 */
@@ -77,6 +80,17 @@ export const useSuitableStore = create<SuitableState>((set) => ({
     }
   },
 
+  /* 아이템 전체 추가 */
+  addAllSelectedItem: (suitableIds: SuitableIds[]) => {
+    set(() => {
+      const newSelectedItems = new Map()
+      suitableIds.forEach((suitableId) => {
+        newSelectedItems.set(suitableId.id, new Set(suitableId.detailId.split(',').map(Number)))
+      })
+      return { selectedItems: newSelectedItems }
+    })
+  },
+
   /* 선택된 아이템 제거 */
   removeSelectedItem: (mainId: number, detailId?: number) => {
     set((state) => {

src/types/Suitable.ts

@@ -34,3 +34,8 @@ export type Suitable = {
   detailCnt: number
   detail: string
 }
+
+export type SuitableIds = {
+  id: number
+  detailId: string
+}