모달 추가

src/components/common/draggable/withDraggable.jsx

@@ -6,7 +6,9 @@ import Draggable from 'react-draggable'
 export default function WithDraggable({ isShow, children, pos }) {
   const [position, setPosition] = useState({ x: 0, y: 0 })
 
-  const handleOnDrag = (data) => {
+  const handleOnDrag = (e, data) => {
+    e.stopPropagation()
+    console.log('pos', data)
     setPosition({ x: data.x, y: data.y })
   }
 
@@ -14,13 +16,5 @@ export default function WithDraggable({ isShow, children, pos }) {
     setPosition({ ...pos })
   }, [])
 
-  return (
+  return <>{isShow && <Draggable onDrag={(e, data) => handleOnDrag(e, data)}>{children}</Draggable>}</>
-    <>
-      {isShow && (
-        <Draggable position={{ x: position.x, y: position.y }} onDrag={(_, data) => handleOnDrag(data)}>
-          {children}
-        </Draggable>
-      )}
-    </>
-  )
 }

src/components/floor-plan/FloorPlan.jsx

@@ -10,7 +10,9 @@ import { useEffect, useState } from 'react'
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
   const [showOutlineModal, setShowOutlineModal] = useState(false)
-
+  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
+  const [showGridCopyModal, setShowGridCopyModal] = useState(false)
+  const [showGridMoveModal, setShowGridMoveModal] = useState(false)
   const canvasSettingProps = {
     setShowCanvasSettingModal,
   }
@@ -25,6 +27,11 @@ export default function FloorPlan() {
     setShowOutlineModal,
   }
 
+  const dotLineProps = {
+    showDotLineGridModal,
+    setShowDotLineGridModal,
+  }
+
   useEffect(() => {}, [showOutlineModal])
 
   return (
@@ -35,6 +42,7 @@ export default function FloorPlan() {
           <CanvasLayout />
           {showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
           {showOutlineModal && <OuterLineWall {...outlineProps} />}
+          {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
         </div>
       </div>
     </>

src/components/floor-plan/modal/grid/DotLineGrid.jsx

@@ -0,0 +1,85 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useState } from 'react'
+
+export default function DotLineGrid(props) {
+  // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
+  const [close, setClose] = useState(false)
+
+  const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }]
+
+  const HandleClickClose = () => {
+    setClose(true)
+    setTimeout(() => {
+      setModalOption({ ...modalOption, gridoption: false })
+      setClose(false)
+    }, 180)
+  }
+  return (
+    <WithDraggable isShow={true}>
+      <div className={`modal-pop-wrap ssm mount `}>
+        {/* <div className={`modal-pop-wrap ssm ${modalOption.gridoption ? 'mount' : ''} ${close ? 'unmount' : ''} `}> */}
+        <div className="modal-head">
+          <h1 className="title">ドット・ライングリッドの設定</h1>
+          <button className="modal-close" onClick={HandleClickClose}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-check-form">
+            <div className="d-check-box pop">
+              <input type="checkbox" id="ch01" />
+              <label htmlFor="ch01">点グリッド表示</label>
+            </div>
+            <div className="d-check-box pop">
+              <input type="checkbox" id="ch02" />
+              <label htmlFor="ch02">ライングリッドの表示</label>
+            </div>
+          </div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="d-check-radio pop no-text">
+                <input type="radio" name="radio01" id="ra01" />
+                <label htmlFor="ra01"></label>
+              </div>
+              <div className="grid-input-form">
+                <span className="mr10">横間隔</span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin" defaultValue={910} />
+                </div>
+                <span>mm</span>
+              </div>
+              <div className="grid-input-form">
+                <span className="mr10">横間隔</span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin" defaultValue={910} />
+                </div>
+                <span>mm</span>
+              </div>
+            </div>
+            <div className="grid-option-box">
+              <div className="d-check-radio pop no-text">
+                <input type="radio" name="radio01" id="ra02" />
+                <label htmlFor="ra02"></label>
+              </div>
+              <div className="grid-input-form">
+                <span className="mr10">横間隔</span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin" defaultValue={910} />
+                </div>
+                <span>mm</span>
+              </div>
+              <div className="grid-select">
+                <QSelectBox title={'原寸'} option={SelectOption} />
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5">初期化</button>
+            <button className="btn-frame modal act">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/grid/GridCopy.jsx

@@ -0,0 +1,2 @@
+export default function GridCopy(props) {
+}

src/components/floor-plan/modal/grid/GridMove.jsx

@@ -0,0 +1,2 @@
+export default function GridMove(props) {
+}

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

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { settingModalGridOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
+import { useScopedI18n } from '@/locales/client'
+import DotLineGrid from '../grid/DotLineGrid'
 
 export default function GridOption() {
   const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
@@ -10,6 +12,11 @@ export default function GridOption() {
   const onClickOption = (option) => {
     option.selected = !option.selected
     setGridOptions([...gridOptions])
+
+    if (option.id === 2) {
+      // 점.선 그리드
+      setShowDotLineGridModal(true)
+    }
   }
   return (
     <>

src/locales/ja.json

@@ -58,10 +58,10 @@
   "modal.canvas.setting.display": "ディスプレイ設定",
   "modal.canvas.setting.font.plan": " フォントと図面サイズの設定",
   "modal.canvas.setting.grid": "그리드(JA)",
-  "modal.canvas.setting.grid.option": "임의 그리드(JA)",
+  "modal.canvas.setting.grid.optional.line": "ランダムグリッド",
-  "modal.canvas.setting.grid.dot.line": "점·선 그리드(JA)",
+  "modal.canvas.setting.grid.dot.line": "ドット・ライングリッド",
-  "modal.canvas.setting.grid.absorption.add": "흡착점 추가(JA)",
+  "modal.canvas.setting.grid.absorption.add": "吸着点を追加",
-  "modal.canvas.setting.grid.color.setting": "그리드 색 설정(JA)",
+  "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/locales/ko.json

@@ -55,7 +55,7 @@
   "modal.canvas.setting.display": "디스플레이 설정",
   "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정",
   "modal.canvas.setting.grid": "그리드",
-  "modal.canvas.setting.grid.option": "임의 그리드",
+  "modal.canvas.setting.grid.optional.line": "임의 그리드",
   "modal.canvas.setting.grid.dot.line": "점·선 그리드",
   "modal.canvas.setting.grid.absorption.add": "흡착점 추가",
   "modal.canvas.setting.grid.color.setting": "그리드 색 설정",

src/store/settingAtom.js

@@ -52,10 +52,10 @@ export const settingModalSecondOptionsState = atom({
 export const settingModalGridOptionsState = atom({
   key: 'settingModalGridOptions',
   default: [
-    { id: 1, name: 'modal.canvas.setting.grid.dot.line', selected: false },
+    { id: 1, name: 'modal.canvas.setting.grid.optional.line', selected: false },
-    { id: 2, name: 'modal.canvas.setting.grid.absorption.add', selected: false },
+    { id: 2, name: 'modal.canvas.setting.grid.dot.line', selected: false },
-    { id: 3, name: 'modal.canvas.setting.grid.color.setting', selected: false },
+    { id: 3, name: 'modal.canvas.setting.grid.absorption.add', selected: false },
-    { id: 4, name: 'modal.canvas.setting.font.plan.edit', selected: false },
+    { id: 4, name: 'modal.canvas.setting.grid.color.setting', selected: false },
   ],
   dangerouslyAllowMutability: true,
 })