From 557479b88c09f455bde3b345a3dd95dae778133c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Mon, 23 Sep 2024 11:10:47 +0900
Subject: [PATCH] =?UTF-8?q?canvas=20option=20=EC=88=98=EC=A0=95=EB=B3=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/modal/settoing01/SecondOption.jsx  |  3 +++
 .../modal/settoing01/SettingModal01.jsx       | 10 +++++++-
 .../canvas/modal/settoing01/ThirdOption.jsx   | 25 +++++++++++++++++++
 src/styles/_modal.scss                        |  2 +-
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/components/canvas/modal/settoing01/ThirdOption.jsx

diff --git a/src/components/canvas/modal/settoing01/SecondOption.jsx b/src/components/canvas/modal/settoing01/SecondOption.jsx
index d88aeca..0340605 100644
--- a/src/components/canvas/modal/settoing01/SecondOption.jsx
+++ b/src/components/canvas/modal/settoing01/SecondOption.jsx
@@ -42,6 +42,9 @@ export default function SecondOption (props){
                     <button className="arr-btn">
                         <span>図面サイズの設定</span>
                     </button>
+                    <button className="arr-btn">
+                        <span>吸着点 ON</span>
+                    </button>
                 </div>
             </div>
         </>
diff --git a/src/components/canvas/modal/settoing01/SettingModal01.jsx b/src/components/canvas/modal/settoing01/SettingModal01.jsx
index ca26d2d..3e9150b 100644
--- a/src/components/canvas/modal/settoing01/SettingModal01.jsx
+++ b/src/components/canvas/modal/settoing01/SettingModal01.jsx
@@ -6,6 +6,7 @@ import SecondOption from "./SecondOption";
 import WithDraggable from "@/components/common/draggable/withDraggable";
 import { useRecoilState } from "recoil";
 import { modalState } from "@/store/modalAtom";
+import ThirdOption from "./ThirdOption";
 
 const HandleBtnClick = (e) => {
     const button = e.target.closest('button');
@@ -50,11 +51,18 @@ export default function SettingModal01 (){
                         className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} 
                         onClick={() => setButtonAct(2)}
                         >
-                            フォントと図面サイズの設定
+                            フォント/図面サイズ設定
+                        </button>
+                        <button 
+                        className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} 
+                        onClick={() => setButtonAct(3)}
+                        >
+                            グリッド
                         </button>
                     </div>
                     {buttonAct === 1 && <FirstOption {...propsClick}/>}
                     {buttonAct === 2 && <SecondOption {...propsClick}/>}
+                    {buttonAct === 3 && <ThirdOption {...propsClick}/>}
                 </div>
             </div>
         </WithDraggable>
diff --git a/src/components/canvas/modal/settoing01/ThirdOption.jsx b/src/components/canvas/modal/settoing01/ThirdOption.jsx
new file mode 100644
index 0000000..e52adf2
--- /dev/null
+++ b/src/components/canvas/modal/settoing01/ThirdOption.jsx
@@ -0,0 +1,25 @@
+const buttonList03 = [
+    {id: 1, name: '任意グリッド'},
+    {id: 2, name: '点·線グリッド'},
+    {id: 3, name: '吸着点追加'},
+    {id: 4, name: 'グリッドカラー設定'},
+]
+
+export default function ThirdOption(props){
+    const { onClick } = props
+    return(
+        <>
+            <div className="modal-check-btn-wrap">
+                <h3 className="check-wrap-title">吸着範囲の設定</h3>
+                <div className="flex-check-box for2">
+                    {buttonList03.map((item)=>(
+                        <button key={item.id} className="check-btn" onClick={(e) => onClick(e)}>
+                            <span className="check-area"></span>
+                            <span className="title-area">{item.name}</span>
+                        </button>
+                    ))}
+                </div>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 32411b9..d623e02 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -22,7 +22,7 @@
     background-color: #272727;
     z-index: 9999999;
     &.sm{
-        max-width: 450px;
+        max-width: 550px;
     }
     &.ssm{
         max-width: 380px;