- Canvas 설정 Grid 추가

src/components/floor-plan/MenuDepth01.jsx

@@ -2,7 +2,7 @@
 
 import { ToggleonMouse } from '@/components/header/Header'
 import { useMessage } from '@/hooks/useMessage'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 export default function MenuDepth01(props) {
   const { setShowOutlineModal, type } = props
@@ -10,19 +10,11 @@ export default function MenuDepth01(props) {
   const [activeMenu, setActiveMenu] = useState()
   const onClickMenu = (menuNum) => {
     setActiveMenu(menuNum)
-    setShowOutlineModal(menuNum === 0)
+    if (type === 'outline' && menuNum === 0) {
+      setShowOutlineModal(true)
+    }
   }
-
-  const menus = [
-    { id: 0, name: '外壁線を描' },
-    { id: 1, name: '補助線を描' },
-    { id: 2, name: '屋根形状設定' },
-    { id: 3, name: '軒下変更' },
-    { id: 4, name: '外壁線の上げ下げ' },
-    { id: 5, name: '銅線移動' },
-    { id: 6, name: '特殊コーナー形状' },
-  ]
-
+  
   const menuInfo = {
     outline: [
       // 지붕덮개
@@ -43,12 +35,6 @@ export default function MenuDepth01(props) {
       { id: 1, name: 'plan.menu.module.circuit.setting.circuit.trestle.setting' },
     ],
   }
-
-  useEffect(() => {
-    menus.forEach((menu) => {
-      menu.isActive = menu.id === activeMenu
-    })
-  }, [menus, activeMenu])
   return (
     <div className="canvas-depth2-inner">
       <ul className="canvas-depth2-list">

src/components/floor-plan/modal/setting01/GridOption.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useRecoilState } from 'recoil'
+import { settingModalGridOptionsState } from '@/store/settingAtom'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function GridOption() {
+  const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
+  const { getMessage } = useMessage()
+
+  const onClickOption = (option) => {
+    option.selected = !option.selected
+    setGridOptions([...gridOptions])
+  }
+  return (
+    <>
+      <div className="modal-check-btn-wrap">
+        <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.grid')}</h3>
+        <div className="flex-check-box for2">
+          {gridOptions?.map((option) => (
+            <button key={option.id} className={`check-btn ${option.selected ? 'act' : ''}`} onClick={(e) => onClickOption(option)}>
+              <span className="check-area"></span>
+              <span className="title-area">{getMessage(option.name)}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -5,6 +5,7 @@ import FirstOption from './FirstOption'
 import WithDraggable from '@/components/common/draggable/withDraggable'
 import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
 import { useMessage } from '@/hooks/useMessage'
+import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
 
 export default function SettingModal01(props) {
   const { setShowCanvasSettingModal } = props
@@ -29,9 +30,13 @@ export default function SettingModal01(props) {
             <button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => setButtonAct(2)}>
               {getMessage('modal.canvas.setting.font.plan')}
             </button>
+            <button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => setButtonAct(3)}>
+              {getMessage('modal.canvas.setting.grid')}
+            </button>
           </div>
           {buttonAct === 1 && <FirstOption />}
           {buttonAct === 2 && <SecondOption />}
+          {buttonAct === 3 && <GridOption />}
         </div>
       </div>
     </WithDraggable>

src/locales/ja.json

@@ -56,6 +56,11 @@
   "modal.canvas.setting": "Canvas設定",
   "modal.canvas.setting.display": "ディスプレイ設定",
   "modal.canvas.setting.font.plan": " フォントと図面サイズの設定",
+  "modal.canvas.setting.grid": "그리드(JA)",
+  "modal.canvas.setting.grid.option": "임의 그리드(JA)",
+  "modal.canvas.setting.grid.dot.line": "점·선 그리드(JA)",
+  "modal.canvas.setting.grid.absorption.add": "흡착점 추가(JA)",
+  "modal.canvas.setting.grid.color.setting": "그리드 색 설정(JA)",
   "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
   "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
   "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更",

src/locales/ko.json

@@ -53,6 +53,11 @@
   "modal.canvas.setting": "Canvas 설정",
   "modal.canvas.setting.display": "디스플레이 설정",
   "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정",
+  "modal.canvas.setting.grid": "그리드",
+  "modal.canvas.setting.grid.option": "임의 그리드",
+  "modal.canvas.setting.grid.dot.line": "점·선 그리드",
+  "modal.canvas.setting.grid.absorption.add": "흡착점 추가",
+  "modal.canvas.setting.grid.color.setting": "그리드 색 설정",
   "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",
   "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경",
   "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경",

src/store/settingAtom.js

@@ -14,7 +14,12 @@ export const settingModalFirstOptionsState = atom({
       { id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
       { id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
       { id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
-      { id: 11, column: 'drawConverDisplay', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
+      {
+        id: 11,
+        column: 'drawConverDisplay',
+        name: 'modal.canvas.setting.first.option.corridor.dimension',
+        selected: false,
+      },
     ],
     option2: [
       { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false },
@@ -43,3 +48,14 @@ export const settingModalSecondOptionsState = atom({
   },
   dangerouslyAllowMutability: true,
 })
+
+export const settingModalGridOptionsState = atom({
+  key: 'settingModalGridOptions',
+  default: [
+    { id: 1, name: 'modal.canvas.setting.grid.dot.line', selected: false },
+    { id: 2, name: 'modal.canvas.setting.grid.absorption.add', selected: false },
+    { id: 3, name: 'modal.canvas.setting.grid.color.setting', selected: false },
+    { id: 4, name: 'modal.canvas.setting.font.plan.edit', selected: false },
+  ],
+  dangerouslyAllowMutability: true,
+})