From 519e2ec1953415132edb79be7f190e5f4594a035 Mon Sep 17 00:00:00 2001
From: Daseul Kim <seul@interplug.co.kr>
Date: Thu, 15 May 2025 17:56:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=80=EB=B6=95=EC=9E=AC=20=EC=A0=81?=
 =?UTF-8?q?=ED=95=A9=EC=84=B1=20=EB=B2=94=EB=A1=80=20default=20=EC=97=B4?=
 =?UTF-8?q?=EA=B8=B0,=20=EC=A7=80=EB=B6=95=EC=9E=AC=20=EC=A0=81=ED=95=A9?=
 =?UTF-8?q?=EC=84=B1=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/suitable/Suitable.tsx       |  2 +-
 src/components/suitable/SuitableButton.tsx | 25 ++++++++
 src/components/suitable/SuitableList.tsx   | 66 ++++++++++++----------
 3 files changed, 61 insertions(+), 32 deletions(-)
 create mode 100644 src/components/suitable/SuitableButton.tsx

diff --git a/src/components/suitable/Suitable.tsx b/src/components/suitable/Suitable.tsx
index 8a2989c..fe2793d 100644
--- a/src/components/suitable/Suitable.tsx
+++ b/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()
diff --git a/src/components/suitable/SuitableButton.tsx b/src/components/suitable/SuitableButton.tsx
new file mode 100644
index 0000000..f412c89
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/suitable/SuitableList.tsx b/src/components/suitable/SuitableList.tsx
index 9a3ec85..d436bc9 100644
--- a/src/components/suitable/SuitableList.tsx
+++ b/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,39 +53,42 @@ export default function SuitableList() {
       {isSearchLoading ? (
         <div>Loading...</div>
       ) : suitableSearchResults && suitableSearchResults.suitable.length > 0 ? (
-        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 ">
-                <input type="checkbox" id={`ch${item.ID}`} onClick={() => handleItemClick(item.ID)} />
-                <label htmlFor={`ch${item.ID}`}>{item.PRODUCT_NAME}</label>
-              </div>
-              <div className="check-name-btn">
-                <button className="bx-btn" onClick={() => toggleItemOpen(item.ID)}></button>
+        <>
+          {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 ">
+                  <input type="checkbox" id={`ch${item.ID}`} onClick={() => handleItemClick(item.ID)} />
+                  <label htmlFor={`ch${item.ID}`}>{item.PRODUCT_NAME}</label>
+                </div>
+                <div className="check-name-btn">
+                  <button className="bx-btn" onClick={() => toggleItemOpen(item.ID)}></button>
+                </div>
               </div>
+              <ul className="reference-list check">
+                {filterSuitableDetail(item.ID)?.map((subItem: SuitableDetail) => (
+                  <li className="reference-item" key={subItem.ID}>
+                    <div className="check-item-wrap">
+                      <div className="check-form-box light">
+                        <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 && (
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
             </div>
-            <ul className="reference-list check">
-              {filterSuitableDetail(item.ID)?.map((subItem: SuitableDetail) => (
-                <li className="reference-item" key={subItem.ID}>
-                  <div className="check-item-wrap">
-                    <div className="check-form-box light">
-                      <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 && (
-                        <div className="compliance-icon">
-                          <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))
+          ))}
+          <SuitableButton />
+        </>
       ) : (
         <SuitableNoData />
       )}