Merge remote-tracking branch 'origin/qcast-pub' into dev

# Conflicts:
#	src/store/settingAtom.js

src/common/common.js

@@ -1,4 +1,5 @@
 export const MENU = {
+  PLAN_DRAWING: 'planDrawing',
   INITIAL_CANVAS_SETTING: 'initialCanvasSetting', // 배치면 초기설정
   ROOF_COVERING: {
     EXTERIOR_WALL_LINE: 'exteriorWallLine', // 외벽선 그리기

src/components/floor-plan/CanvasMenu.jsx

@@ -18,13 +18,13 @@ import JA from '@/locales/ja.json'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
 
 const canvasMenus = [
-  { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00' },
+  { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
-  { index: 1, name: 'plan.menu.placement.surface.initial.setting', icon: 'con01' },
+  { index: 1, name: 'plan.menu.placement.surface.initial.setting', icon: 'con01', title: MENU.INITIAL_CANVAS_SETTING },
-  { index: 2, name: 'plan.menu.roof.cover', icon: 'con02' },
+  { index: 2, name: 'plan.menu.roof.cover', icon: 'con02', title: MENU.ROOF_COVERING.DEFAULT },
-  { index: 3, name: 'plan.menu.placement.surface', icon: 'con03' },
+  { index: 3, name: 'plan.menu.placement.surface', icon: 'con03', title: MENU.BATCH_CANVAS.DEFAULT },
-  { index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04' },
+  { index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04', title: MENU.MODULE_CIRCUIT_SETTING.DEFAULT },
-  { index: 5, name: 'plan.menu.estimate', icon: 'con06' },
+  { index: 5, name: 'plan.menu.estimate', icon: 'con06', title: MENU.ESTIMATE.DEFAULT },
-  { index: 6, name: 'plan.menu.simulation', icon: 'con05' },
+  { index: 6, name: 'plan.menu.simulation', icon: 'con05', title: MENU.POWER_GENERATION_SIMULATION.DEFAULT },
 ]
 
 export default function CanvasMenu(props) {
@@ -45,11 +45,21 @@ export default function CanvasMenu(props) {
   const { getMessage } = useMessage()
 
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
-  const onClickNav = (number) => {
+  const onClickNav = (menu) => {
-    setMenuNumber(number)
+    setMenuNumber(menu.index)
-    if (number === 2) setType('outline')
+    setCurrentMenu(menu.title)
-    if (number === 3) setType('surface')
+
-    if (number === 4) setType('module')
+    switch (menu.index) {
+      case 2:
+        setType('outline')
+        break
+      case 3:
+        setType('surface')
+        break
+      case 4:
+        setType('module')
+        break
+    }
   }
   const menuProps = {
     setShowOutlineModal,
@@ -89,88 +99,16 @@ export default function CanvasMenu(props) {
     <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
       <div className="canvas-menu-inner">
         <ul className="canvas-menu-list">
-          <li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
+          {canvasMenus.map((menu) => {
+            return (
+              <li key={menu.index} className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`} onClick={() => onClickNav(menu)}>
                 <button>
-              <span className="menu-icon con00"></span>
+                  <span className={`menu-icon ${menu.icon}`}></span>
-              {getMessage('plan.menu.plan.drawing')}
+                  {getMessage(menu.name)}
                 </button>
               </li>
-          <li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
+            )
-            <button>
+          })}
-              <span className="menu-icon con01"></span>
-              {getMessage('plan.menu.placement.surface.initial.setting')}
-            </button>
-          </li>
-          <li
-            className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`}
-            onClick={() => {
-              onClickNav(2)
-              setCurrentMenu(MENU.ROOF_COVERING.DEFAULT)
-            }}
-          >
-            <button>
-              <span className="menu-icon con02"></span>
-              {getMessage('plan.menu.roof.cover')}
-            </button>
-          </li>
-          <li
-            className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`}
-            onClick={() => {
-              onClickNav(3)
-              setCurrentMenu(MENU.BATCH_CANVAS.DEFAULT)
-            }}
-          >
-            <button>
-              <span className="menu-icon con03"></span>
-              {getMessage('plan.menu.placement.surface')}
-            </button>
-          </li>
-          <li
-            className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`}
-            onClick={() => {
-              onClickNav(4)
-              setCurrentMenu(MENU.MODULE_CIRCUIT_SETTING.DEFAULT)
-            }}
-          >
-            <button>
-              <span className="menu-icon con04"></span>
-              {getMessage('plan.menu.module.circuit.setting')}
-            </button>
-          </li>
-          <li
-            className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`}
-            onClick={() => {
-              onClickNav(5)
-              setCurrentMenu(MENU.ESTIMATE.DEFAULT)
-            }}
-          >
-            <button>
-              <span className="menu-icon con06"></span>
-              {getMessage('plan.menu.estimate')}
-            </button>
-          </li>
-          <li
-            className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`}
-            onClick={() => {
-              onClickNav(6)
-              setCurrentMenu(MENU.POWER_GENERATION_SIMULATION.DEFAULT)
-            }}
-          >
-            <button>
-              <span className="menu-icon con05"></span>
-              {getMessage('plan.menu.simulation')}
-            </button>
-          </li>
-          {/*{canvasMenus.map((menu) => {*/}
-          {/*  return (*/}
-          {/*    <li key={menu.index} className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`} onClick={() => onClickNav(menu.index)}>*/}
-          {/*      <button>*/}
-          {/*        <span className={`menu-icon ${menu.icon}`}></span>*/}
-          {/*        {getMessage(menu.name)}*/}
-          {/*      </button>*/}
-          {/*    </li>*/}
-          {/*  )*/}
-          {/*})}*/}
         </ul>
         <div className="canvas-side-btn-wrap">
           {menuNumber !== 6 && menuNumber !== 5 && (

src/components/floor-plan/FloorPlan.jsx

@@ -53,11 +53,14 @@ export default function FloorPlan() {
       const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
       const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
       const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
+        ...item,
+      }))
       // 데이터 설정
       setSettingModalFirstOptions({
         option1: optionData1,
         option2: optionData2,
+        dimensionDisplay: optionData5,
       })
       setSettingModalSecondOptions({
         option3: optionData3,

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

@@ -17,18 +17,9 @@ export default function DotLineGrid(props) {
     },
     { id: 4, name: '1/10' },
   ]
-
-  const HandleClickClose = () => {
-    // setClose(true)
-    // setTimeout(() => {
-    //   setModalOption({ ...modalOption, gridoption: false })
-    //   setClose(false)
-    // }, 180)
-  }
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
+    <WithDraggable isShow={true} pos={{ x: -150, y: 300 }}>
-      <div className={`modal-pop-wrap ssm `}>
+      <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">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
           <button className="modal-close" onClick={() => setShowDotLineGridModal(false)}>

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

@@ -1,2 +1,43 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useMessage } from '@/hooks/useMessage'
+
 export default function GridCopy(props) {
+  const { setShowGridMoveModal, setShowGridCopyModal } = props
+  const { getMessage } = useMessage()
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: 380 }}>
+      <div className={`modal-pop-wrap xm mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.grid.copy')} </h1>
+          <button className="modal-close" onClick={() => setShowGridCopyModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit">{getMessage('modal.grid.copy.info')}</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="grid-input-form">
+                <span className="mr10">{getMessage('modal.grid.copy.length')}</span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin" defaultValue={910} />
+                </div>
+                <span>mm</span>
+              </div>
+              <div className="grid-direction">
+                <button className="direction up"></button>
+                <button className="direction down act"></button>
+                <button className="direction left"></button>
+                <button className="direction right"></button>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">{getMessage('modal.grid.copy.save')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
 }

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

@@ -1,2 +1,55 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useMessage } from '@/hooks/useMessage'
+
 export default function GridMove(props) {
+  const { setShowGridMoveModal, setShowGridCopyModal } = props
+  const { getMessage } = useMessage()
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
+      <div className={`modal-pop-wrap xm mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.grid.move')} </h1>
+          <button className="modal-close" onClick={() => setShowGridMoveModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit">{getMessage('modal.grid.move.info')}</div>
+          <div className="grid-option-wrap">
+            <div className="d-check-box pop mb10">
+              <input type="checkbox" id="ch99" />
+              <label htmlFor="ch99">{getMessage('modal.grid.move.all')}</label>
+            </div>
+            <div className="grid-option-box">
+              <div className="move-form">
+                <p className="mb5">{getMessage('modal.grid.move.length')}</p>
+                <div className="input-move-wrap mb5">
+                  <div className="input-move">
+                    <input type="text" className="input-origin" defaultValue={910} />
+                  </div>
+                  <span>mm</span>
+                </div>
+                <div className="input-move-wrap">
+                  <div className="input-move">
+                    <input type="text" className="input-origin" defaultValue={910} />
+                  </div>
+                  <span>mm</span>
+                </div>
+              </div>
+              <div className="direction-move-wrap">
+                <button className="direction up"></button>
+                <button className="direction down act"></button>
+                <button className="direction left"></button>
+                <button className="direction right"></button>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">{getMessage('modal.grid.move.save')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
 }

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

@@ -10,7 +10,7 @@ export default function FirstOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
-  const { option1, option2 } = settingModalFirstOptions
+  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { option3, option4 } = settingModalSecondOptions
   const { getMessage } = useMessage()
   const { get, post } = useAxios()
@@ -29,12 +29,17 @@ export default function FirstOption() {
       const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
       const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
       const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
+        ...item,
+      }))
 
       // 데이터 설정
       setSettingModalFirstOptions({
         option1: optionData1,
         option2: optionData2,
+        dimensionDisplay: optionData5,
       })
+      console.log('optionData5', optionData5)
       setSettingModalSecondOptions({
         option3: optionData3,
         option4: optionData4,
@@ -47,7 +52,7 @@ export default function FirstOption() {
   const onClickOption = async (option) => {
     option.selected = !option.selected
 
-    setSettingModalFirstOptions({ option1, option2 })
+    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
     setSettingModalSecondOptions({ option3, option4 })
 
     try {
@@ -107,13 +112,21 @@ export default function FirstOption() {
     }
   }
 
+  const onClickDimension = (item) => {
+    const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+      option.selected = option.id === item.id
+      return option
+    })
+
+    setSettingModalFirstOptions({ option1, option2, dimensionDisplay: options })
+  }
+
   return (
     <>
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
         <div className="flex-check-box for2">
-          {settingModalFirstOptions &&
+          {settingModalFirstOptions?.option1.map((item) => (
-            settingModalFirstOptions.option1.map((item) => (
             <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
               <span className="check-area"></span>
               <span className="title-area">{getMessage(item.name)}</span>
@@ -121,11 +134,21 @@ export default function FirstOption() {
           ))}
         </div>
       </div>
+      <div className="modal-check-btn-wrap">
+        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.dimension')}</h3>
+        <div className="flex-check-box for-line">
+          {settingModalFirstOptions?.dimensionDisplay?.map((item) => (
+            <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickDimension(item)}>
+              <span className="check-area"></span>
+              <span className="title-area">{getMessage(item.name)}</span>
+            </button>
+          ))}
+        </div>
+      </div>
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
         <div className="flex-check-box for-line">
-          {settingModalFirstOptions &&
+          {settingModalFirstOptions?.option2.map((item) => (
-            settingModalFirstOptions.option2.map((item) => (
             <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
               <span className="check-area"></span>
               <span className="title-area">{getMessage(item.name)}</span>

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

@@ -32,11 +32,14 @@ export default function SecondOption() {
       const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
       const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
       const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
+        ...item,
+      }))
       // 데이터 설정
       setSettingModalFirstOptions({
         option1: optionData1,
         option2: optionData2,
+        dimensionDisplay: optionData5,
       })
       setSettingModalSecondOptions({
         option3: optionData3,

src/locales/ja.json

@@ -71,6 +71,15 @@
   "modal.canvas.setting.grid.dot.line.setting.save": "保存",
   "modal.canvas.setting.grid.absorption.add": "吸着点を追加",
   "modal.canvas.setting.grid.color.setting": "グリッド色の設定",
+  "modal.grid.move": "グリッド移動",
+  "modal.grid.move.info": "移動する方向を入力してください",
+  "modal.grid.move.all": "グリッド全体移動",
+  "modal.grid.move.length": "長さ",
+  "modal.grid.move.save": "保存",
+  "modal.grid.copy": "グリッドのコピー",
+  "modal.grid.copy.info": "間隔を設定し、コピー方向を選択します",
+  "modal.grid.copy.length": "長さ",
+  "modal.grid.copy.save": "保存",
   "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
   "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
   "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更",
@@ -95,7 +104,10 @@
   "modal.canvas.setting.first.option.trestle": "가대 표시",
   "modal.canvas.setting.first.option.flow": "흐름방향 표시",
   "modal.canvas.setting.first.option.total": "집계표 표시",
-  "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
+  "modal.canvas.setting.first.option.dimension": "치수 표시(JA)",
+  "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시(JA)",
+  "modal.canvas.setting.first.option.real.dimension": "실제치수 표시(JA)",
+  "modal.canvas.setting.first.option.none.dimension": "치수표시없음(JA)",
   "modal.canvas.setting.first.option.display": "画面表示",
   "modal.canvas.setting.first.option.border": "ボーダーのみ",
   "modal.canvas.setting.first.option.line": "ラインハッチ",

src/locales/ko.json

@@ -68,6 +68,15 @@
   "modal.canvas.setting.grid.dot.line.setting.save": "저장",
   "modal.canvas.setting.grid.absorption.add": "흡착점 추가",
   "modal.canvas.setting.grid.color.setting": "그리드 색 설정",
+  "modal.grid.move": "그리드 이동",
+  "modal.grid.move.info": "이동할 방향을 입력해주세요",
+  "modal.grid.move.all": "그리드 전체 이동",
+  "modal.grid.move.length": "길이",
+  "modal.grid.move.save": "저장",
+  "modal.grid.copy": "그리드 복사",
+  "modal.grid.copy.info": "간격을 설정하고 복사 방향을 선택하십시오",
+  "modal.grid.copy.length": "길이",
+  "modal.grid.copy.save": "저장",
   "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",
   "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경",
   "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경",
@@ -92,7 +101,10 @@
   "modal.canvas.setting.first.option.trestle": "가대 표시",
   "modal.canvas.setting.first.option.flow": "흐름방향 표시",
   "modal.canvas.setting.first.option.total": "집계표 표시",
+  "modal.canvas.setting.first.option.dimension": "치수 표시",
   "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
+  "modal.canvas.setting.first.option.real.dimension": "실제치수 표시",
+  "modal.canvas.setting.first.option.none.dimension": "치수표시없음",
   "modal.canvas.setting.first.option.display": "화면 표시",
   "modal.canvas.setting.first.option.border": "테두리만",
   "modal.canvas.setting.first.option.line": "라인해치",

src/store/settingAtom.js

@@ -6,21 +6,30 @@ export const settingModalFirstOptionsState = atom({
     option1: [
       { id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
       { id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false },
-      { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: false },
+      { id: 3, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
-      { id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
+      { id: 4, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
-      { id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
+      { id: 5, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
-      { id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
+      { id: 6, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
-      { id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
+      { id: 7, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
-      { id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
+      { id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
-      { id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
+      { id: 9, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
-      { id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
       {
-        id: 11,
+        id: 10,
         column: 'drawConverDisplay',
         name: 'modal.canvas.setting.first.option.corridor.dimension',
         selected: false,
       },
     ],
+    dimensionDisplay: [
+      {
+        id: 1,
+        column: 'corridorDimension',
+        name: 'modal.canvas.setting.first.option.corridor.dimension',
+        selected: false,
+      },
+      { id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
+      { id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
+    ],
     option2: [
       { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false },
       { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false },