feat: 지붕재 적합성 범례 default 열기, 지붕재 적합성 버튼 추가

src/components/suitable/Suitable.tsx

@@ -9,7 +9,7 @@ import type { CommCode } from '@/types/CommCode'
 import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
 
 export default function Suitable() {
-  const [reference, setReference] = useState(false)
+  const [reference, setReference] = useState(true)
 
   const { getSuitableCommCode, refetchBySearch } = useSuitable()
   const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()

src/components/suitable/SuitableButton.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+export default function SuitableButton() {
+  return (
+    <div className="float-btn-wrap">
+      <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>
+    </div>
+  )
+}

src/components/suitable/SuitableList.tsx

@@ -2,6 +2,7 @@
 
 import Image from 'next/image'
 import { useState } from 'react'
+import SuitableButton from './SuitableButton'
 import SuitableNoData from './SuitableNoData'
 import { useSuitable } from '@/hooks/useSuitable'
 import { useSuitableStore } from '@/store/useSuitableStore'
@@ -52,7 +53,8 @@ export default function SuitableList() {
       {isSearchLoading ? (
         <div>Loading...</div>
       ) : suitableSearchResults && suitableSearchResults.suitable.length > 0 ? (
-        suitableSearchResults.suitable.map((item: SuitableMain) => (
+        <>
+          {suitableSearchResults.suitable.map((item: SuitableMain) => (
             <div className={`compliance-check-bx ${openItems.has(item.ID) ? 'act' : ''}`} key={item.ID}>
               <div className="check-name-wrap">
                 <div className="check-form-box ">
@@ -84,7 +86,9 @@ export default function SuitableList() {
                 ))}
               </ul>
             </div>
-        ))
+          ))}
+          <SuitableButton />
+        </>
       ) : (
         <SuitableNoData />
       )}