canvas option 수정본

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>
         </>

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>

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>
+        </>
+    )
+}

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;