Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

# Conflicts:
#	src/components/common/font/FontSetting.jsx

docs/dictionary.txt

@@ -24,4 +24,4 @@ Allpainted : allPainted
 개구: openSpace
 도머: dormer
 그림자: shadow
-
+치수선: dimensionLine

src/components/Playground.jsx

@@ -138,7 +138,7 @@ export default function Playground() {
     pageNo: 1,
     pageSize: 10,
     pagePerBlock: 10,
-    totalCount: 501,
+    totalCount: 26,
     handleChangePage: (page) => {
       console.log('page', page)
     },

src/components/common/color-picker/ColorPickerModal.jsx

@@ -3,9 +3,12 @@ import ColorPicker from '@/components/common/color-picker/ColorPicker'
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
 import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
 export default function ColorPickerModal(props) {
-  const { isShow, setIsShow, pos = { x: 770, y: -815 }, color = '#ff0000', setColor, id } = props
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState) // 현재 메뉴
+  const { isShow, setIsShow, pos = contextPopupPosition, color = '#ff0000', setColor, id } = props
   const { getMessage } = useMessage()
   const [originColor, setOriginColor] = useState(color)
   const { closePopup } = usePopup()
@@ -15,14 +18,17 @@ export default function ColorPickerModal(props) {
   }, [isShow])
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos ?? ''}>
       <div className={`modal-pop-wrap lr mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.color.picker.title')}</h1>
           <button
             className="modal-close"
             onClick={() => {
+              if (setIsShow) {
                 setIsShow(false)
+              }
+              console.log(id)
               closePopup(id)
             }}
           >
@@ -40,8 +46,9 @@ export default function ColorPickerModal(props) {
             <button
               className="btn-frame modal act"
               onClick={() => {
-                setColor(originColor)
+                if (setColor) setColor(originColor)
-                setIsShow(false)
+                if (setIsShow) setIsShow(false)
+
                 closePopup(id)
               }}
             >

src/components/common/font/FontSetting.jsx

@@ -5,6 +5,7 @@ import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { fontSelector, globalFontAtom } from '@/store/fontAtom'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
 const fonts = [
   { name: 'MS PGothic', value: 'MS PGothic' },
@@ -45,7 +46,8 @@ const fontColors = [
   { name: '남색', value: 'darkblue' },
 ]
 export default function FontSetting(props) {
-  const { id, setIsShow, pos = { x: 455, y: 180 }, type } = props
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, setIsShow, pos = contextPopupPosition, type } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
@@ -68,7 +70,7 @@ export default function FontSetting(props) {
         },
       }
     })
-    setIsShow(false)
+    if (setIsShow) setIsShow(false)
     closePopup(id)
   }
 
@@ -80,7 +82,7 @@ export default function FontSetting(props) {
           <button
             className="modal-close"
             onClick={() => {
-              setIsShow(false)
+              if (setIsShow) setIsShow(false)
               closePopup(id)
             }}
           >

src/components/common/pagination/QPagination.jsx

@@ -31,7 +31,7 @@ export default function QPagination(props) {
         <button
           onClick={() => {
             if (currentPage === totalPages) return
-            handlePage(Math.max(1, pageGroup * pagePerBlock + 1))
+            if (pageGroup * pagePerBlock + 1 <= totalPages) handlePage(Math.max(1, pageGroup * pagePerBlock + 1))
           }}
         ></button>
       </li>

src/components/common/select/QSelectBox.jsx

@@ -20,7 +20,7 @@ export default function QSelectBox({ title = '', options, onChange, value }) {
       <ul className="select-item-wrap">
         {options?.map((option) => (
           <li key={option.id} className="select-item" onClick={() => handleClickSelectOption(option)}>
-            <button>{option.name}</button>
+            <button key={option.id + 'btn'}>{option.name}</button>
           </li>
         ))}
       </ul>

src/components/floor-plan/CanvasFrame.jsx

@@ -16,7 +16,7 @@ export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
   const { handleZoomClear } = useCanvasEvent()
-  const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu({
+  const { contextMenu, currentContextMenu, setCurrentContextMenu, handleClick } = useContextMenu({
     externalFn: {
       handleZoomClear,
     },
@@ -59,7 +59,7 @@ export default function CanvasFrame({ plan }) {
                   if (menu.fn) {
                     menu.fn()
                   }
-                  setCurrentContextMenu(menu)
+                  handleClick(e, menu)
                 }}
               >
                 {menu.name}
@@ -68,7 +68,6 @@ export default function CanvasFrame({ plan }) {
           </ul>
         ))}
       </QContextMenu>
-      {currentContextMenu?.component}
     </div>
   )
 }

src/components/floor-plan/FloorPlan.jsx

@@ -5,14 +5,13 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
-import '@/styles/contents.scss'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
+import '@/styles/contents.scss'
 
 export default function FloorPlan() {
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
-
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
@@ -23,7 +22,6 @@ export default function FloorPlan() {
     menuNumber,
     setMenuNumber,
   }
-
   useEffect(() => {
     console.log('FloorPlan useEffect 실행')
     fetchSettings()

src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx

@@ -0,0 +1,55 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+
+export default function AuxiliaryCopy(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm`}>
+        <div className="modal-head">
+          <h1 className="title">補助線のコピー </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit">コピーする方向を入力してください</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="move-form">
+                <p className="mb5">長さ</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">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx

@@ -1,14 +1,20 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function AuxiliaryMove({ setCurrentContextMenu }) {
+export default function AuxiliaryMove(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   return (
-    <WithDraggable isShow={true} pos={{ x: 0, y: 150 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
           <h1 className="title">補助線の移動 </h1>
-          <button className="modal-close" onClick={() => setCurrentContextMenu(null)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx

@@ -1,14 +1,20 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
-export default function AuxiliarySize({ setCurrentContextMenu }) {
+export default function AuxiliarySize(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   return (
-    <WithDraggable isShow={true} pos={{ x: 0, y: 150 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
           <h1 className="title">補助線サイズ変更 </h1>
-          <button className="modal-close" onClick={() => setCurrentContextMenu(null)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/basic/step/Orientation.jsx

@@ -6,6 +6,19 @@ export default function Orientation({ setTabNum }) {
   const [compasDeg, setCompasDeg] = useState(0)
   const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
 
+  const getDegree = (degree) => {
+    if (degree % 15 === 0) return degree
+
+    let value = Math.floor(degree / 15)
+    const remain = ((degree / 15) % 1).toFixed(5)
+
+    if (remain > 0.4) {
+      value++
+    }
+
+    return value * 15
+  }
+
   return (
     <>
       <div className="properties-setting-wrap">
@@ -18,7 +31,7 @@ export default function Orientation({ setTabNum }) {
                 {Array.from({ length: 180 / 15 }).map((dot, index) => (
                   <div
                     key={index}
-                    className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
+                    className={`circle ${getDegree(compasDeg) === 15 * (12 + index) ? 'act' : ''}`}
                     onClick={() => setCompasDeg(15 * (12 + index))}
                   >
                     {index === 0 && <i>180°</i>}
@@ -26,13 +39,13 @@ export default function Orientation({ setTabNum }) {
                   </div>
                 ))}
                 {Array.from({ length: 180 / 15 }).map((dot, index) => (
-                  <div key={index} className={`circle ${compasDeg === 15 * index ? 'act' : ''}`} onClick={() => setCompasDeg(15 * index)}>
+                  <div key={index} className={`circle ${getDegree(compasDeg) === 15 * index ? 'act' : ''}`} onClick={() => setCompasDeg(15 * index)}>
                     {index === 0 && <i>0°</i>}
                     {index === 6 && <i>90°</i>}
                   </div>
                 ))}
                 <div className="compas">
-                  <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
+                  <div className="compas-arr" style={{ transform: `rotate(${getDegree(compasDeg)}deg)` }}></div>
                 </div>
               </div>
             </div>

src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx

@@ -0,0 +1,74 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+export default function DimensionLineSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, setIsShow, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm`}>
+        <div className="modal-head">
+          <h1 className="title">表示の変更 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="guide">寸法線に表示する数値を入力してください</div>
+          <div className="mb-box">
+            <div className="slope-wrap">
+              <div className="outline-form mb15">
+                <span className="mr10">既存の長さ</span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin block" defaultValue={5933} readOnly />
+                </div>
+              </div>
+              <div className="mb-box">
+                <div className="outline-form">
+                  <span className="mr10">変更の長さ</span>
+                  <div className="input-grid mr5">
+                    <input type="text" className="input-origin block" defaultValue={0} />
+                  </div>
+                </div>
+              </div>
+              <div className="d-check-box pop">
+                <input type="checkbox" id="ch99" />
+                <label htmlFor="ch99">コーナー・ゴールの場合</label>
+              </div>
+            </div>
+          </div>
+          <div className="slope-wrap">
+            <div className="warning">傾斜を着せてください。</div>
+            <div className="display-change-wrap">
+              <div className="outline-form mb15">
+                <span className="mr10">傾斜</span>
+                <div className="grid-select mr10">
+                  <QSelectBox title={'0'} option={SelectOption01} />
+                </div>
+                <span className="thin">寸法</span>
+              </div>
+              <div className="outline-form">
+                <span className="mr10">傾斜</span>
+                <div className="grid-select mr10">
+                  <QSelectBox title={'0'} option={SelectOption01} />
+                </div>
+                <span className="thin">寸法</span>
+              </div>
+            </div>
+            <div className="warning">傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。</div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/distance/Distance.jsx

@@ -0,0 +1,67 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+
+export default function Distance(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, distance } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xxxm`}>
+        <div className="modal-head">
+          <h1 className="title">距離測定 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="slope-wrap">
+            <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">2点間距離</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '98px' }}>
+                      <input type="text" className="input-origin block" defaultValue={0} value={distance.diagonal} readOnly />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">水平距離</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '98px' }}>
+                      <input type="text" className="input-origin block" defaultValue={0} value={distance.horizon} readOnly />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">垂直距離</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '98px' }}>
+                      <input type="text" className="input-origin block" defaultValue={0} value={distance.vertical} readOnly />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">確認</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx

@@ -0,0 +1,150 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useState } from 'react'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+
+const SelectOption01 = [{ name: 'M' }, { name: 'M' }, { name: 'M' }, { name: 'M' }]
+
+export default function FlowDirectionSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  const [compasDeg, setCompasDeg] = useState(0)
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap lx`}>
+        <div className="modal-head">
+          <h1 className="title">面フローの設定 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="drawing-flow-wrap">
+            <div className="discrimination-box">
+              <div className="discrimination-tit mb15">流れ方向の設定</div>
+              <div className="guide">流れ方向を選択してください。</div>
+              <div className="object-direction-wrap">
+                <div className="plane-direction">
+                  <span className="top">北</span>
+                  <span className="right">ドン</span>
+                  <span className="bottom">南</span>
+                  <span className="left">立つ</span>
+                  <button className="plane-btn up"></button>
+                  <button className="plane-btn right"></button>
+                  <button className="plane-btn down act"></button>
+                  <button className="plane-btn left"></button>
+                </div>
+              </div>
+            </div>
+            <div className="discrimination-box">
+              <div className="discrimination-tit mb15">方位設定</div>
+              <div className="guide">シミュレーション計算の方向を指定します。面が向いている方位を選択してください。</div>
+              <div className="mb-box">
+                <div className="d-check-radio pop mb15">
+                  <input type="radio" name="radio01" id="ra01" />
+                  <label htmlFor="ra01">8方位に選ぶ</label>
+                </div>
+                <div className="grid-select ">
+                  <QSelectBox title={'M'} options={SelectOption01} />
+                </div>
+              </div>
+              <div className="mb-box">
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio02" id="ra02" />
+                  <label htmlFor="ra02">24方位から選択する (表記は8方位です。)</label>
+                </div>
+              </div>
+              <div className="compas-box">
+                <div className="compas-box-inner">
+                  <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}>
+                    <i>13</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}>
+                    <i>12</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}>
+                    <i>11</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}>
+                    <i>10</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}>
+                    <i>9</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}>
+                    <i>8</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}>
+                    <i>7</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}>
+                    <i>6</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}>
+                    <i>5</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}>
+                    <i>4</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}>
+                    <i>3</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}>
+                    <i>2</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}>
+                    <i>1</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}>
+                    <i>24</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}>
+                    <i>23</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}>
+                    <i>22</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}>
+                    <i>21</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}>
+                    <i>20</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}>
+                    <i>19</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}>
+                    <i>18</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}>
+                    <i>17</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}>
+                    <i>16</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}>
+                    <i>15</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}>
+                    <i>14</i>
+                  </div>
+                  <div className="compas">
+                    <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

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

@@ -1,16 +1,21 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
 export default function GridCopy(props) {
-  const { setShowGridMoveModal, setShowGridCopyModal } = props
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 380 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <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 className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

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

@@ -1,16 +1,21 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
 export default function GridMove(props) {
-  const { setShowGridMoveModal, setShowGridCopyModal } = props
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <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 className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx

@@ -0,0 +1,104 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+
+export default function LinePropertySetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">各辺属性の変更 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="guide">
+            <span className="mb10">属性を変更する辺を選択してください。</span>
+            <span>選択した値 [龍丸]</span>
+          </div>
+          <div className="properties-setting-wrap outer">
+            <div className="setting-tit">設定</div>
+            <div className="outline-wrap">
+              <div className="radio-grid-wrap">
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra01" />
+                  <label htmlFor="ra01">軒先</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra02" />
+                  <label htmlFor="ra02">ケラバ</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra03" />
+                  <label htmlFor="ra03">龍丸</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra04" />
+                  <label htmlFor="ra04">ケラバ左</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra05" />
+                  <label htmlFor="ra05">ヨセムネ</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra06" />
+                  <label htmlFor="ra06">ケラバ右</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra07" />
+                  <label htmlFor="ra07">片側の流れ</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra08" />
+                  <label htmlFor="ra08">谷</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra09" />
+                  <label htmlFor="ra09">壁取り</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra10" />
+                  <label htmlFor="ra10">Lの捨て渓谷</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra11" />
+                  <label htmlFor="ra11">壁取り(型)</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra12" />
+                  <label htmlFor="ra12">マンサード</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra13" />
+                  <label htmlFor="ra13">壁取合(流れ)</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra14" />
+                  <label htmlFor="ra14">設定なし</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra15" />
+                  <label htmlFor="ra15">壁取合(流れ左)</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra16" />
+                  <label htmlFor="ra16">壁取り(流れ右)</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/object/DormerOffset.jsx

@@ -0,0 +1,55 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+
+export default function DormerOffset(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm`}>
+        <div className="modal-head">
+          <h1 className="title">도머 오프셋 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit">移動する方向を入力してください</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="move-form">
+                <p className="mb5">長さ</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">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/object/RoofMaterialSetting.jsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useRecoilValue } from 'recoil'
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+export default function RoofMaterialSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  const roofMaterials = [
+    { name: '기와1', value: 'material1' },
+    { name: '기와2', value: 'material2' },
+    { name: '기와3', value: 'material3' },
+    { name: '기와4', value: 'material4' },
+    { name: '기와5', value: 'material5' },
+  ]
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xxxm`}>
+        <div className="modal-head">
+          <h1 className="title">変更 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="slope-wrap">
+            <div className="grid-select">
+              <QSelectBox title={'지붕재 선택'} options={roofMaterials} />
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">ストレージ</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/object/SizeSetting.jsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { useRecoilValue } from 'recoil'
+import { useMessage } from '@/hooks/useMessage'
+import { canvasState } from '@/store/canvasAtom'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { useState } from 'react'
+
+export default function SizeSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const [settingTarget, setSettingTarget] = useState(1)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const canvas = useRecoilValue(canvasState)
+  const { closePopup } = usePopup()
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap ssm`}>
+        <div className="modal-head">
+          <h1 className="title">サイズ変更 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="slope-wrap">
+            <div className="size-option-top">
+              <div className="size-option-wrap">
+                <div className="size-option mb5">
+                  <input type="text" className="input-origin mr5" defaultValue={1000} readOnly />
+                  <span className="normal-font">mm</span>
+                </div>
+                <div className="size-option">
+                  <input type="text" className="input-origin mr5" defaultValue={1000} />
+                  <span className="normal-font">mm</span>
+                </div>
+              </div>
+            </div>
+            <div className="size-inner-warp">
+              <div className="size-option-side">
+                <div className="size-option-wrap">
+                  <div className="size-option mb5">
+                    <input type="text" className="input-origin mr5" defaultValue={1000} readOnly />
+                    <span className="normal-font">mm</span>
+                  </div>
+                  <div className="size-option">
+                    <input type="text" className="input-origin mr5" defaultValue={1000} />
+                    <span className="normal-font">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="size-check-wrap">
+                <button className={`size-btn ${settingTarget === 1 ? 'act' : ''}`} onClick={() => setSettingTarget(1)}></button>
+                <button className={`size-btn ${settingTarget === 2 ? 'act' : ''}`} onClick={() => setSettingTarget(2)}></button>
+                <button className={`size-btn ${settingTarget === 3 ? 'act' : ''}`} onClick={() => setSettingTarget(3)}></button>
+                <button className={`size-btn ${settingTarget === 4 ? 'act' : ''}`} onClick={() => setSettingTarget(4)}></button>
+                <div className="size-box"></div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">作成</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -3,8 +3,12 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
 import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
-export default function RoofAllocationSetting({ id, pos = { x: 50, y: 230 } }) {
+export default function RoofAllocationSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { handleSave, onAddRoofMaterial, onDeleteRoofMaterial, values, roofMaterials, selectedRoofMaterial, setSelectedRoofMaterial } =

src/components/management/Stuff.jsx

@@ -25,7 +25,7 @@ export default function Stuff() {
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
   const { getMessage } = useMessage()
   const [pageNo, setPageNo] = useState(1) //현재 페이지 번호
-  const [pageSize, setPageSize] = useState(100) //페이지 당 게시물 수
+  const [pageSize, setPageSize] = useState(5) //페이지 당 게시물 수
   const [totalCount, setTotalCount] = useState(0) //총 갯수
   const [defaultSortType, setDefaultSortType] = useState('R')
 
@@ -172,55 +172,54 @@ export default function Stuff() {
   }
 
   //물건삭제
-  const fnDeleteRowData = (data) => {
+  // const fnDeleteRowData = (data) => {
-    console.log('물건삭제:::::::::::')
+  //   if (data.length === 0) {
-    if (data.length === 0) {
+  //     return alert('삭제할 데이터를 선택하세요')
-      return alert('삭제할 데이터를 선택하세요')
+  //   }
-    }
+  //   let errCount = 0
-    let errCount = 0
+  //   data.forEach((cell) => {
-    data.forEach((cell) => {
+  //     if (!cell.objectNo) {
-      if (!cell.objectNo) {
+  //       if (errCount === 0) {
-        if (errCount === 0) {
+  //         alert('물건정보가 있는 행만 삭제 됩니다')
-          alert('물건정보가 있는 행만 삭제 됩니다')
+  //       }
-        }
+  //       errCount++
-        errCount++
+  //     }
-      }
+  //   })
-    })
+  // }
-  }
 
   //행추가
-  let newCount = 0
+  // let newCount = 0
-  const addRowItems = () => {
+  // const addRowItems = () => {
-    // console.log('girdRef::::::', gridRef.current.api)
+  //   // console.log('girdRef::::::', gridRef.current.api)
-    const newItems = [
+  //   const newItems = [
-      {
+  //     {
-        mission: newCount + 1,
+  //       mission: newCount + 1,
-        successful: true,
+  //       successful: true,
-      },
+  //     },
-    ]
+  //   ]
-    gridRef.current.api.applyTransaction({
+  //   gridRef.current.api.applyTransaction({
-      add: newItems,
+  //     add: newItems,
-      addIndex: newCount,
+  //     addIndex: newCount,
-    })
+  //   })
-    newCount++
+  //   newCount++
-  }
+  // }
 
   //행삭제
-  const removeRowItems = () => {
+  // const removeRowItems = () => {
-    // console.log('selectedRowData::', selectedRowData)
+  //   // console.log('selectedRowData::', selectedRowData)
-    let errCount = 0
+  //   let errCount = 0
-    selectedRowData.forEach((cell) => {
+  //   selectedRowData.forEach((cell) => {
-      if (!cell.company) {
+  //     if (!cell.company) {
-        let newSelectedRowData = selectedRowData.filter((item) => item.company == null)
+  //       let newSelectedRowData = selectedRowData.filter((item) => item.company == null)
-        gridRef.current.api.applyTransaction({ remove: newSelectedRowData })
+  //       gridRef.current.api.applyTransaction({ remove: newSelectedRowData })
-      } else {
+  //     } else {
-        if (errCount === 0) {
+  //       if (errCount === 0) {
-          alert('행추가로 추가 한 행만 삭제됩니다.')
+  //         alert('행추가로 추가 한 행만 삭제됩니다.')
-        }
+  //       }
-        errCount++
+  //       errCount++
-      }
+  //     }
-    })
+  //   })
-  }
+  // }
 
   // 진입시 그리드 데이터 조회
   useEffect(() => {
@@ -381,6 +380,7 @@ export default function Stuff() {
 
   // 페이징 현재페이지 변경
   const handleChangePage = (page) => {
+    console.log('page:::', page)
     stuffSearchParams.code = 'S'
 
     setStuffSearch({
@@ -390,9 +390,13 @@ export default function Stuff() {
       endRow: page * pageSize,
     })
 
+    // console.log('여기::::::::::::', page)
     setPageNo(page)
   }
 
+  // console.log('pageNo:::', pageNo)
+  // console.log('pageSize:::', pageSize)
+  // console.log('totalCount:::', totalCount)
   return (
     <>
       {/* 퍼블시작 */}
@@ -420,7 +424,7 @@ export default function Stuff() {
             </div>
             <div className="select-box" style={{ width: '80px' }}>
               <select className="select-light black" name="" id="" onChange={onChangePerPage}>
-                <option value="100">100</option>
+                <option value="5">5</option>
                 <option value="200">200</option>
                 <option value="300">300</option>
               </select>

src/components/management/StuffDetail.jsx

@@ -261,24 +261,21 @@ export default function StuffDetail() {
   })
 
   useEffect(() => {
-    // console.log('objectNo::', objectNo)
-
     if (objectNo) {
       setEditMode('EDIT')
-
+      if (objectNo.substring(0, 1) !== 'T') {
-      if (objectNo.substring(0, 1) === 'R') {
         //벨리데이션 체크용..
         setIsFormValid(true)
       }
       promiseGet({ url: `/api/object/${objectNo}/detail` }).then((res) => {
         if (res.status === 200) {
+          console.log('플랜데이타:::', res.data.planList)
           if (res.data != null) {
             setDetailData(res.data)
           } else {
             setDetailData({})
           }
           if (isNotEmptyArray(res.data.planList)) {
-            // console.log('플랜RES::::::::', res.data.planList)
             setPlanGridProps({ ...planGridProps, planGridData: res.data.planList })
           } else {
             setPlanGridProps({ ...planGridProps, planGridData: [] })
@@ -300,16 +297,23 @@ export default function StuffDetail() {
       //1차점 : X167 T01
       //2차점 : 10X22, 201X112
       get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
-        // get({ url: `/api/object/saleStore/T01/list` }).then((res) => {
         if (!isEmptyArray(res)) {
           const firstList = res.filter((row) => row.saleStoreLevel === '1')
           const otherList = res.filter((row) => row.saleStoreLevel !== '1')
 
           //1차점 셀렉트박스
           setSaleStoreList(firstList)
+
+          let filterOtherList
+          if (sessionState?.storeId === 'T01') {
+            filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
+            setOriginOtherSaleStoreList(filterOtherList)
+            setOtherSaleStoreList(filterOtherList)
+          } else {
             //1차점 아닌 판매점 셀렉트박스
             setOriginOtherSaleStoreList(otherList)
             setOtherSaleStoreList(otherList)
+          }
 
           if (sessionState?.storeLvl === '1') {
             setSelOptions(sessionState?.storeId)
@@ -332,21 +336,19 @@ export default function StuffDetail() {
     const code2 = findCommonCode(201700) //신축/기축
     const code3 = findCommonCode(202000) //기준풍속 202000
     if (code1 != null) {
-      // console.log('경칭공코::::::', code1)
       setHonorificCodeList(code1)
     }
     if (code2 != null) {
-      // console.log('신축/기축공코::::', code2)
       setObjectStatusList(code2)
     }
     if (code3 != null) {
-      // console.log('기준풍속::::', code3)
       setWindSpeedList(code3)
     }
   }, [commonCode])
 
   useEffect(() => {
     if (isObjectNotEmpty(detailData)) {
+      // console.log('상세데이타세팅:::::', detailData)
       // 도도부현API
       get({ url: '/api/object/prefecture/list' }).then((res) => {
         if (!isEmptyArray(res)) {
@@ -357,19 +359,40 @@ export default function StuffDetail() {
       //1차점 : X167 T01
       //2차점 : 10X22, 201X112
       get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
-        // get({ url: `/api/object/saleStore/T01/list` }).then((res) => {
         if (!isEmptyArray(res)) {
           const firstList = res.filter((row) => row.saleStoreLevel === '1')
           const otherList = res.filter((row) => row.saleStoreLevel !== '1')
+
           //1차점 셀렉트박스
           setSaleStoreList(firstList)
+
+          let filterOtherList
+          if (sessionState?.storeId === 'T01') {
+            filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
+            setOriginOtherSaleStoreList(filterOtherList)
+            setOtherSaleStoreList(filterOtherList)
+          } else {
             //1차점 아닌 판매점 셀렉트박스
             setOriginOtherSaleStoreList(otherList)
             setOtherSaleStoreList(otherList)
-
-          // console.log('1차점리스트::', firstList)
-          // console.log('2차점리스트::', otherList)
           }
+        }
+
+        //상세데이터가 1차점이면 1차점에 세팅
+        //상세데이터가 2차점이면 2차점에 세팅하고 세션으로 1차점 세팅
+        if (detailData.saleStoreLevel === '1') {
+          setSelOptions(detailData.saleStoreId)
+          form.setValue('saleStoreId', detailData.saleStoreId)
+          form.setValue('saleStoreLevel', detailData.saleStoreLevel)
+        } else {
+          setSelOptions(sessionState?.storeId)
+          form.setValue('saleStoreId', sessionState?.storeId)
+          form.setValue('saleStoreLevel', sessionState?.storeLvl)
+          setOtherSelOptions(detailData.saleStoreId)
+          form.setValue('otherSaleStoreId', detailData.saleStoreId)
+          form.setValue('otherSaleStoreLevel', detailData.saleStoreLevel)
+        }
+
         //설계의뢰No.
         form.setValue('planReqNo', detailData.planReqNo)
         //담당자
@@ -389,21 +412,6 @@ export default function StuffDetail() {
         //물건명 후리가나
         form.setValue('objectNameKana', detailData.objectNameKana)
 
-        console.log('상세데이타::세팅:::::', detailData)
-        //상세데이터에는 2차점까지 골랐으면 2차점 정보만 내려옴
-        //로그인세션이 1차점이면 1차점은 본인으로 디폴트 셋팅하고 2차점에 상세데이터 넣어줌
-        //1차점
-        // setSelOptions(detailData.saleStoreId)
-        // form.setValue('saleStoreId', detailData.saleStoreId)
-        // form.setValue('saleStoreLevel', sessionState?.storeLvl)
-
-        //2차점까지 고른경우 확인필요
-        // console.log('2차점까지 고른경우 확인필요')
-        // setOtherSelOptions(sessionState?.storeId)
-        //     form.setValue('saleStoreId', firstList[0].saleStoreId)
-        //     form.setValue('otherSaleStoreId', sessionState?.storeId)
-        //     form.setValue('otherSaleStoreLevel', sessionState?.storeLvl)
-
         //우편번호
         form.setValue('zipNo', detailData.zipNo)
 
@@ -412,7 +420,11 @@ export default function StuffDetail() {
         form.setValue('prefId', detailData.prefId)
         //prefName ???
         form.setValue('address', detailData.address)
+        //발전시뮬
+        form.setValue('areaId', detailData.areaId)
 
+        //기준풍속
+        form.setValue('standardWindSpeedId', detailData.standardWindSpeedId)
         //수직적설량
         form.setValue('verticalSnowCover', detailData.verticalSnowCover)
         //한랭지대책시행 coldRegionFlg 1이면 true
@@ -460,6 +472,10 @@ export default function StuffDetail() {
   }
   //1차점 변경 이벤트
   const onSelectionChange = (key) => {
+    if (key.saleStoreId === selOptions) {
+      return
+    }
+
     const planReqNo = form.watch('planReqNo')
     let delFlg = false
 
@@ -486,7 +502,7 @@ export default function StuffDetail() {
     if (objectNo) {
       tempObjectNo = objectNo.substring(0, 1)
     }
-    if (tempObjectNo !== 'R') {
+    if (tempObjectNo === 'T') {
       if (planReqNo) {
         if (delFlg) {
           form.setValue('planReqNo', '')
@@ -568,6 +584,10 @@ export default function StuffDetail() {
 
   //2차점 변경 이벤트
   const onSelectionChange2 = (key) => {
+    if (key.saleStoreId === otherSelOptions) {
+      return
+    }
+
     const planReqNo = form.watch('planReqNo')
     let delFlg = false
     if (editMode === 'NEW') {
@@ -593,7 +613,7 @@ export default function StuffDetail() {
     if (objectNo) {
       tempObjectNo = objectNo.substring(0, 1)
     }
-    if (tempObjectNo !== 'R') {
+    if (tempObjectNo === 'T') {
       if (planReqNo) {
         if (delFlg) {
           form.setValue('planReqNo', '')
@@ -646,7 +666,6 @@ export default function StuffDetail() {
 
   //팝업에서 넘어온 우편정보
   const setZipInfo = (info) => {
-    // console.log('팝업에서 넘어온 우편 데이타::::::::', info)
     setPrefValue(info.prefId)
     form.setValue('prefId', info.prefId)
     form.setValue('prefName', info.address1)
@@ -761,7 +780,7 @@ export default function StuffDetail() {
 
       setIsFormValid(Object.keys(errors).length === 0 ? true : false)
     } else {
-      console.log('상세일때 폼체크')
+      //상세일떄 폼체크
       const formData = form.getValues()
       let errors = {}
       if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
@@ -781,7 +800,7 @@ export default function StuffDetail() {
         errors.zipNo = true
       }
 
-      if (!formData.prefId) {
+      if (!formData.prefId || formData.prefId === '0') {
         errors.prefId = true
       }
 
@@ -801,7 +820,7 @@ export default function StuffDetail() {
         errors.installHeight = true
       }
 
-      console.log('상세 저장용 에러결과?????::', errors)
+      // console.log('상세에러필드:::::', errors)
       setIsFormValid(Object.keys(errors).length === 0 ? true : false)
     }
   }, [
@@ -839,7 +858,7 @@ export default function StuffDetail() {
   }
 
   useEffect(() => {
-    if (prefValue !== '') {
+    if (prefValue) {
       // 발전량시뮬레이션 지역 목록
       get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
         if (!isEmptyArray(res)) {
@@ -855,11 +874,66 @@ export default function StuffDetail() {
     form.setValue('areaName', e.prefName)
   }
 
-  //필수값 다 입력했을때
   const onValid = async () => {
     const formData = form.getValues()
+
+    let errors = {}
+    let fieldNm
+    if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
+      fieldNm = getMessage('stuff.detail.receiveUser')
+      errors = fieldNm
+    }
+    if (!formData.objectName || formData.objectName.trim().length === 0) {
+      fieldNm = getMessage('stuff.detail.objectStatusId')
+      errors = fieldNm
+    }
+    if (!formData.objectNameOmit) {
+      fieldNm = getMessage('stuff.detail.objectNameOmit')
+      errors = fieldNm
+    }
+    if (!formData.saleStoreId) {
+      fieldNm = getMessage('stuff.detail.saleStoreId')
+      errors = fieldNm
+    }
+
+    if (!formData.zipNo) {
+      fieldNm = getMessage('stuff.detail.zipNo')
+      errors = fieldNm
+    }
+
+    if (!formData.prefId || formData.prefId === '0') {
+      fieldNm = getMessage('stuff.detail.prefId')
+      errors = fieldNm
+    }
+
+    if (!formData.areaId) {
+      fieldNm = getMessage('stuff.detail.areaId')
+      errors = fieldNm
+    }
+
+    if (!formData.standardWindSpeedId) {
+      fieldNm = getMessage('stuff.detail.standardWindSpeedId')
+      errors = fieldNm
+    }
+
+    if (!formData.verticalSnowCover) {
+      fieldNm = getMessage('stuff.detail.verticalSnowCover')
+      errors = fieldNm
+    }
+
+    if (!formData.installHeight) {
+      fieldNm = getMessage('stuff.detail.installHeight')
+      errors = fieldNm
+    }
+
+    if (Object.keys(errors).length > 0) {
+      return alert(getMessage('stuff.detail.save.valierror3', [errors]))
+    }
+
     const apiUrl = '/api/object/save-object'
+
     const params = {
+      objectNo: objectNo,
       planReqNo: formData.planReqNo,
       saleStoreId: formData.otherSaleStoreId ? formData.otherSaleStoreId : formData.saleStoreId,
       saleStoreName: formData.otherSaleStoreName ? formData.otherSaleStoreName : formData.saleStoreName,
@@ -886,7 +960,6 @@ export default function StuffDetail() {
       workNo: null,
       workName: null,
     }
-    console.log('REAL저장::', params)
 
     //수직적설량, 설치높이 0인지 체크
     let snow = params.verticalSnowCover
@@ -899,20 +972,76 @@ export default function StuffDetail() {
       return alert(getMessage('stuff.detail.save.valierror2'))
     }
 
-    alert('작업중')
+    let detail_sort = Object.keys(detailData)
-    return
+      .sort()
+      .reduce((obj, key) => ((obj[key] = detailData[key]), obj), {})
+    let params_sort = Object.keys(params)
+      .sort()
+      .reduce((obj, key) => ((obj[key] = params[key]), obj), {})
+
+    delete detail_sort.areaName
+    delete detail_sort.contentsPath
+    delete detail_sort.createDatetime
+    delete detail_sort.createUserName
+    delete detail_sort.dispCompanyName
+    delete detail_sort.firstAgentId
+    delete detail_sort.lastEditDatetime
+    delete detail_sort.lastEditUserName
+    delete detail_sort.planList
+    delete detail_sort.planNo
+    delete detail_sort.planTotCnt
+    delete detail_sort.receiveCompanyName
+    delete detail_sort.saleStoreName
+    delete detail_sort.rowNumber
+    delete detail_sort.prefName
+    delete detail_sort.sameObjectInfo
+    delete detail_sort.specificationConfirmDate
+    delete detail_sort.totCnt
+    delete detail_sort.workNo
+    delete detail_sort.workName
+
+    delete params_sort.areaName
+    delete params_sort.contentsPath
+    delete params_sort.createDatetime
+    delete params_sort.createUserName
+    delete params_sort.dispCompanyName
+    delete params_sort.firstAgentId
+    delete params_sort.lastEditDatetime
+    delete params_sort.lastEditUserName
+    delete params_sort.planList
+    delete params_sort.planNo
+    delete params_sort.planTotCnt
+    delete params_sort.receiveCompanyName
+    delete params_sort.saleStoreName
+    delete params_sort.rowNumber
+    delete params_sort.prefName
+    delete params_sort.sameObjectInfo
+    delete params_sort.specificationConfirmDate
+    delete params_sort.totCnt
+    delete params_sort.workNo
+    delete params_sort.workName
+
+    // console.log(JSON.stringify(detail_sort) === JSON.stringify(params_sort))
+    // console.log(Object.entries(detail_sort).toString() === Object.entries(params_sort).toString())
+    if (Object.entries(detail_sort).toString() === Object.entries(params_sort).toString()) {
+      return alert(getMessage('stuff.detail.noChgData'))
+    }
+
     if (editMode === 'NEW') {
       await promisePost({ url: apiUrl, data: params }).then((res) => {
-        console.log('진짜저장결과::::', pathname, res)
-
         //상세화면으로 전환
-        //router.push(`${pathname}?objectNo=${res.data.objectNo.toString()}`)
+        if (res.status === 201) {
+          alert(getMessage('stuff.detail.save'))
+          router.push(`/management/stuff/detail?objectNo=${res.data.objectNo.toString()}`)
+        }
       })
     } else {
       // 수정모드일때는 PUT
       await promisePut({ url: apiUrl, data: params }).then((res) => {
-        console.log('진짜데이터 수정 결과::::::::::', pathname, res)
+        if (res.status === 201) {
-        //새로고침???
+          alert(getMessage('stuff.detail.save'))
+          router.refresh()
+        }
       })
     }
   }
@@ -963,12 +1092,9 @@ export default function StuffDetail() {
     if (height === '0') {
       return alert(getMessage('stuff.detail.save.valierror2'))
     }
-
-    alert('작업중')
-    return
     await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
       if (res.status === 201) {
-        getMessage('stuff.detail.tempSave.message1')
+        alert(getMessage('stuff.detail.tempSave.message1'))
         router.push(`${pathname}?objectNo=${res.data.objectNo.toString()}`)
       }
     })
@@ -976,15 +1102,12 @@ export default function StuffDetail() {
 
   // 물건삭제
   const onDelete = () => {
-    // console.log('물건번호::::::::', objectNo)
-    // console.log('detailData:::::::::', detailData)
     const specificationConfirmDate = detailData.specificationConfirmDate
     if (specificationConfirmDate != null) {
       alert(getMessage('stuff.detail.delete.message1'))
     } else {
       if (confirm(getMessage('common.message.data.delete'))) {
         del({ url: `/api/object/${objectNo}` }).then((res) => {
-          // console.log('삭제결과:::::::', res)
           router.push('/management/stuff')
         })
       }
@@ -1038,7 +1161,7 @@ export default function StuffDetail() {
                   </tr>
                   <tr>
                     <th>
-                      {getMessage('stuff.detail.dispCompanyName')} <span className="important">*</span>
+                      {getMessage('stuff.detail.receiveUser')} <span className="important">*</span>
                     </th>
                     <td>
                       <div className="input-wrap" style={{ width: '500px' }}>
@@ -1129,7 +1252,7 @@ export default function StuffDetail() {
                             getOptionLabel={(x) => x.saleStoreName}
                             getOptionValue={(x) => x.saleStoreId}
                             isClearable={sessionState?.storeLvl === '1' ? true : false}
-                            isDisabled={sessionState?.storeLel !== '1' ? true : false}
+                            isDisabled={sessionState?.storeLvl !== '1' ? true : false}
                             value={saleStoreList.filter(function (option) {
                               return option.saleStoreId === selOptions
                             })}
@@ -1264,7 +1387,7 @@ export default function StuffDetail() {
                   </tr>
                   <tr>
                     <th>
-                      {getMessage('stuff.detail.windSpeed')} <span className="important">*</span>
+                      {getMessage('stuff.detail.standardWindSpeedId')} <span className="important">*</span>
                     </th>
                     <td>
                       <div className="flx-box">
@@ -1287,7 +1410,7 @@ export default function StuffDetail() {
                             })}
                           ></Select>
                         </div>
-                        <span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
+                        <span className="mr10">{getMessage('stuff.detail.standardWindSpeedIdSpan')}</span>
                         <Button type="button" className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
                           {getMessage('stuff.detail.btn.windSpeedPop')}
                         </Button>
@@ -1389,16 +1512,16 @@ export default function StuffDetail() {
             <div className="sub-right-footer">
               {!isFormValid ? (
                 <Button className="btn-origin grey mr5" onClick={onTempSave}>
-                  New화면 {getMessage('stuff.detail.btn.tempSave')}
+                  {getMessage('stuff.detail.btn.tempSave')}
                 </Button>
               ) : (
                 <Button type="submit" className="btn-origin navy mr5">
-                  NEW화면 {getMessage('stuff.detail.btn.save')}
+                  {getMessage('stuff.detail.btn.save')}
                 </Button>
               )}
               <Link href="/management/stuff" scroll={false}>
                 <button type="button" className="btn-origin grey">
-                  NEW화면 {getMessage('stuff.detail.btn.moveList')}
+                  {getMessage('stuff.detail.btn.moveList')}
                 </button>
               </Link>
             </div>
@@ -1425,6 +1548,7 @@ export default function StuffDetail() {
                           <div className="flx-box">
                             <div className="product-input-wrap mr5">
                               <input type="text" className="product-input" readOnly value={form.watch('planReqNo') || ''} />
+                              {/* {detailData?.tempFlg === '1' && form.watch('planReqNo') ? ( */}
                               {objectNo.substring(0, 1) === 'T' && form.watch('planReqNo') ? (
                                 <button
                                   type="button"
@@ -1435,6 +1559,7 @@ export default function StuffDetail() {
                                 ></button>
                               ) : null}
                             </div>
+                            {/* {detailData?.tempFlg === '1' ? ( */}
                             {objectNo.substring(0, 1) === 'T' ? (
                               <>
                                 <Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
@@ -1447,7 +1572,7 @@ export default function StuffDetail() {
                       </tr>
                       <tr>
                         <th>
-                          {getMessage('stuff.detail.dispCompanyName')} <span className="important">*</span>
+                          {getMessage('stuff.detail.receiveUser')} <span className="important">*</span>
                         </th>
                         <td>
                           <div className="input-wrap" style={{ width: '500px' }}>
@@ -1457,7 +1582,7 @@ export default function StuffDetail() {
                       </tr>
                       <tr>
                         <th>
-                          {getMessage('stuff.detail.objectStatusId')} <span className="importatn">*</span>
+                          {getMessage('stuff.detail.objectStatusId')} <span className="important">*</span>
                         </th>
                         <td>
                           <div className="flx-box">
@@ -1538,7 +1663,7 @@ export default function StuffDetail() {
                                 getOptionLabel={(x) => x.saleStoreName}
                                 getOptionValue={(x) => x.saleStoreId}
                                 isClearable={sessionState?.storeLvl === '1' ? true : false}
-                                isDisabled={sessionState?.storeLel !== '1' ? true : false}
+                                isDisabled={sessionState?.storeLvl !== '1' ? true : false}
                                 value={saleStoreList.filter(function (option) {
                                   return option.saleStoreId === selOptions
                                 })}
@@ -1678,7 +1803,7 @@ export default function StuffDetail() {
                       {/* 기준풍속시작 */}
                       <tr>
                         <th>
-                          {getMessage('stuff.detail.windSpeed')} <span className="important">*</span>
+                          {getMessage('stuff.detail.standardWindSpeedId')} <span className="important">*</span>
                         </th>
                         <td>
                           <div className="flx-box">
@@ -1701,7 +1826,7 @@ export default function StuffDetail() {
                                 })}
                               ></Select>
                             </div>
-                            <span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
+                            <span className="mr10">{getMessage('stuff.detail.standardWindSpeedIdSpan')}</span>
                             <Button type="button" className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
                               {getMessage('stuff.detail.btn.windSpeedPop')}
                             </Button>
@@ -1812,7 +1937,8 @@ export default function StuffDetail() {
                   </table>
                 </div>
               </div>
-              {objectNo.substring(0, 1) === 'R' ? (
+              {/* {detailData?.tempFlg === '0' ? ( */}
+              {objectNo.substring(0, 1) !== 'T' ? (
                 <>
                   {/* 진짜R 플랜시작 */}
                   <div className="table-box-title-wrap">
@@ -1840,7 +1966,6 @@ export default function StuffDetail() {
                   <div className="information-grid">
                     <div className="q-grid no-cols">
                       <StuffPlanQGrid {...planGridProps} />
-                      {/* <div className="pagination-wrap">페이징영역</div> */}
                     </div>
                   </div>
                   {/* 진짜R 플랜끝 */}
@@ -1862,7 +1987,7 @@ export default function StuffDetail() {
                 <>
                   <div className="sub-right-footer">
                     {!isFormValid ? (
-                      <Button type="submit" className="btn-origin grey mr5" onClick={onTempSave}>
+                      <Button className="btn-origin grey mr5" onClick={onTempSave}>
                         TEMP상세:{getMessage('stuff.detail.btn.tempSave')}
                       </Button>
                     ) : (

src/components/management/StuffPlanQGrid.jsx

@@ -45,6 +45,7 @@ export default function StuffPlanQGrid(props) {
         rowSelection={'singleRow'}
         pagination={isPageable}
         domLayout="autoHeight"
+        suppressCellFocus={true}
       />
     </div>
   )

src/hooks/common/useCommonUtils.js

@@ -2,10 +2,13 @@ import { useEffect } from 'react'
 import { useRecoilValue } from 'recoil'
 import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
-import { checkLineOrientation, getDistance, setSurfaceShapePattern } from '@/util/canvas-util'
+import { checkLineOrientation, getDistance } from '@/util/canvas-util'
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { fontSelector } from '@/store/fontAtom'
 import { canvasState } from '@/store/canvasAtom'
+import { v4 as uuidv4 } from 'uuid'
+import { usePopup } from '@/hooks/usePopup'
+import Distance from '@/components/floor-plan/modal/distance/Distance'
 
 export function useCommonUtils({ commonFunctionState, setCommonFunctionState }) {
   const canvas = useRecoilValue(canvasState)
@@ -14,6 +17,7 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
   const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
+  const { addPopup } = usePopup()
 
   useEffect(() => {
     initEvent()
@@ -106,7 +110,8 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
       const lineOptions = {
         stroke: dimensionSettings.color,
         strokeWidth: dimensionSettings.pixel,
-        selectable: false,
+        name: 'dimensionLine',
+        selectable: true,
       }
 
       // 캔버스에 클릭 이벤트 추가
@@ -371,6 +376,19 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
               ...textOptions,
             })
             canvas.add(distanceText)
+            const id = uuidv4()
+            addPopup(
+              id,
+              1,
+              <Distance
+                id={id}
+                distance={{
+                  horizon: distance3 * 10,
+                  vertical: distance2 * 10,
+                  diagonal: distance1 * 10,
+                }}
+              />,
+            )
           }
 
           // 거리 계산 후, 다음 측정을 위해 초기화

src/hooks/option/useCanvasSettingController.js

@@ -0,0 +1,126 @@
+import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import { useEffect, useState } from 'react'
+import { useRecoilState } from 'recoil'
+
+export const useCanvasSettingController = () => {
+  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+  const { get } = useAxios()
+
+  useEffect(() => {
+    fetchSettings()
+  }, [objectNo])
+
+  useEffect(() => {
+    fetchSettings()
+  }, [])
+
+  useEffect(() => {
+    onClickOnlyOne()
+    fetchSettings()
+  }, [settingModalFirstOptions, settingModalSecondOptions])
+
+  const fetchSettings = async () => {
+    try {
+      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
+      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,
+        option4: optionData4,
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
+
+  const onClickOption = async (option) => {
+    option.selected = !option.selected
+
+    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+    setSettingModalSecondOptions({ option3, option4 })
+
+    try {
+      // 서버에 전송할 데이터
+      const dataToSend = {
+        firstOption1: option1.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption2: option2.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption3: dimensionDisplay.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        // secondOption1: secondOptions[0].option1.map((item) => ({
+        //   name: item.id,
+        //   name: item.name,
+        //   // 필요한 경우 데이터 항목 추가
+        // })),
+        secondOption2: option4.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+      }
+
+      const patternData = {
+        objectNo,
+        //디스플레이 설정(다중)
+        allocDisplay: dataToSend.firstOption1[0].selected,
+        outlineDisplay: dataToSend.firstOption1[1].selected,
+        gridDisplay: dataToSend.firstOption1[2].selected,
+        lineDisplay: dataToSend.firstOption1[3].selected,
+        wordDisplay: dataToSend.firstOption1[4].selected,
+        circuitNumDisplay: dataToSend.firstOption1[5].selected,
+        flowDisplay: dataToSend.firstOption1[6].selected,
+        trestleDisplay: dataToSend.firstOption1[7].selected,
+        totalDisplay: dataToSend.firstOption1[8].selected,
+        //차수 표시(다건)
+        corridorDimension: dataToSend.firstOption3[0].selected,
+        realDimension: dataToSend.firstOption3[1].selected,
+        noneDimension: dataToSend.firstOption3[2].selected,
+        //화면 표시(다중)
+        onlyBorder: dataToSend.firstOption2[0].selected,
+        lineHatch: dataToSend.firstOption2[1].selected,
+        allPainted: dataToSend.firstOption2[2].selected,
+        //흡착범위 설정(단건)
+        adsorpRangeSmall: dataToSend.secondOption2[0].selected,
+        adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
+        adsorpRangeMedium: dataToSend.secondOption2[2].selected,
+        adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+      }
+
+      // HTTP POST 요청 보내기
+      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+      })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
+  }
+
+  return {
+    fetchSettings,
+    settingModalFirstOptions,
+    setSettingModalFirstOptions,
+    settingModalSecondOptions,
+    setSettingModalSecondOptions,
+    onClickOption,
+    ß,
+  }
+}

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -86,6 +86,12 @@ export function useRoofAllocationSetting(id) {
       swalFire({ text: '할당할 지붕이 없습니다.' })
       closePopup(id)
     }
+    // if (type === 'roofBase') {
+    //   // 지붕면 할당
+    //
+    // } else if ('roof') {
+    //   // 지붕재 변경
+    // }
   }, [])
 
   const onAddRoofMaterial = () => {

src/hooks/useContextMenu.js

@@ -1,18 +1,36 @@
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import { MENU } from '@/common/common'
 import AuxiliaryMove from '@/components/floor-plan/modal/auxiliary/AuxiliaryMove'
 import AuxiliarySize from '@/components/floor-plan/modal/auxiliary/AuxiliarySize'
+import { usePopup } from '@/hooks/usePopup'
+import { v4 as uuidv4 } from 'uuid'
+import GridMove from '@/components/floor-plan/modal/grid/GridMove'
+import GridCopy from '@/components/floor-plan/modal/grid/GridCopy'
+import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
+import { gridColorState } from '@/store/gridAtom'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import AuxiliaryCopy from '@/components/floor-plan/modal/auxiliary/AuxiliaryCopy'
+import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
+import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting'
+import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset'
+import FontSetting from '@/components/common/font/FontSetting'
+import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
+import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
+import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting'
+import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
 
 export function useContextMenu({ externalFn }) {
-  const currentMenu = useRecoilValue(currentMenuState)
+  const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
-  const [contextMenu, setContextMenu] = useState([[]])
+  const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
-  const [currentContextMenu, setCurrentContextMenu] = useState(null)
+  const [contextMenu, setContextMenu] = useState([[]]) // 메뉴.object 별 context menu
+  const [currentContextMenu, setCurrentContextMenu] = useState(null) // 선택한 contextMenu
   const currentObject = useRecoilValue(currentObjectState)
-
+  const { addPopup } = usePopup()
-  const currentMenuSetting = () => {
+  const [popupId, setPopupId] = useState(uuidv4())
-    console.log(currentMenu)
+  const [gridColor, setGridColor] = useRecoilState(gridColorState)
+  const currentMenuSetting = (position) => {
     switch (currentMenu) {
       case MENU.PLAN_DRAWING:
         setContextMenu([
@@ -20,14 +38,17 @@ export function useContextMenu({ externalFn }) {
             {
               id: 'gridMove',
               name: '그리드 이동',
+              component: <GridMove id={popupId} />,
             },
             {
               id: 'gridCopy',
               name: '그리드 복사',
+              component: <GridCopy id={popupId} />,
             },
             {
               id: 'gridColorEdit',
               name: '그리드 색 변경',
+              component: <ColorPickerModal id={popupId} color={gridColor} setColor={setGridColor} />,
             },
             {
               id: 'remove',
@@ -84,16 +105,17 @@ export function useContextMenu({ externalFn }) {
             {
               id: 'sizeEdit',
               name: '사이즈 변경',
-              component: <AuxiliarySize setCurrentContextMenu={setCurrentContextMenu} />,
+              component: <AuxiliarySize id={popupId} />,
             },
             {
               id: 'auxiliaryMove',
               name: '보조선 이동(M)',
-              component: <AuxiliaryMove setCurrentContextMenu={setCurrentContextMenu} />,
+              component: <AuxiliaryMove id={popupId} />,
             },
             {
               id: 'auxiliaryCopy',
               name: '보조선 복사(C)',
+              component: <AuxiliaryCopy id={popupId} />,
             },
             {
               id: 'auxiliaryRemove',
@@ -160,19 +182,35 @@ export function useContextMenu({ externalFn }) {
         break
     }
   }
-  useEffect(() => {
+
-    currentMenuSetting()
+  const handleClick = (e, menu) => {
-  }, [currentMenu])
+    setContextPopupPosition({
+      x: e.clientX,
+      y: e.clientY,
+    })
+    setCurrentContextMenu(menu)
+  }
 
   useEffect(() => {
+    currentMenuSetting()
+  }, [gridColor, currentMenu])
+
+  useEffect(() => {
+    if (currentContextMenu?.component) addPopup(popupId, 1, currentContextMenu?.component)
+  }, [currentContextMenu])
+
+  useEffect(() => {
+    console.log('object name', currentObject?.name)
     if (currentObject?.name) {
       switch (currentObject.name) {
         case 'triangleDormer':
+        case 'pentagonDormer':
           setContextMenu([
             [
               {
                 id: 'sizeEdit',
                 name: '사이즈 변경',
+                component: <SizeSetting id={popupId} />,
               },
               {
                 id: 'dormerRemove',
@@ -189,10 +227,12 @@ export function useContextMenu({ externalFn }) {
               {
                 id: 'roofMaterialEdit',
                 name: '지붕재 변경',
+                component: <RoofMaterialSetting id={popupId} />,
               },
               {
                 id: 'dormerOffset',
                 name: '도머 오프셋',
+                component: <DormerOffset id={popupId} />,
               },
             ],
           ])
@@ -203,6 +243,7 @@ export function useContextMenu({ externalFn }) {
               {
                 id: 'sizeEdit',
                 name: '사이즈 변경',
+                component: <SizeSetting id={popupId} />,
               },
               {
                 id: 'roofMaterialRemove',
@@ -221,14 +262,17 @@ export function useContextMenu({ externalFn }) {
               {
                 id: 'roofMaterialEdit',
                 name: '지붕재 변경',
+                component: <RoofAllocationSetting id={popupId} />,
               },
               {
                 id: 'linePropertyEdit',
                 name: '각 변 속성 변경',
+                component: <LinePropertySetting id={popupId} />,
               },
               {
                 id: 'flowDirectionEdit',
                 name: '흐름 뱡향 변경',
+                component: <FlowDirectionSetting id={popupId} />,
               },
             ],
           ])
@@ -259,6 +303,127 @@ export function useContextMenu({ externalFn }) {
             ],
           ])
           break
+        case 'lengthText':
+          setContextMenu([
+            [
+              {
+                id: 'lengthTextRemove',
+                name: '삭제',
+              },
+              {
+                id: 'lengthTextMove',
+                name: '이동',
+              },
+              {
+                id: 'lengthTextAuxiliaryLineEdit',
+                name: '치수 보조선 변경',
+              },
+              {
+                id: 'displayEdit',
+                name: '표시 변경',
+              },
+            ],
+          ])
+          break
+        case 'commonText':
+          setContextMenu([
+            [
+              {
+                id: 'commonTextRemove',
+                name: '삭제',
+              },
+              {
+                id: 'commonTextMove',
+                name: '이동',
+              },
+              {
+                id: 'commonTextCopy',
+                name: '복사',
+              },
+              {
+                id: 'commonTextFontSetting',
+                name: '폰트 설정',
+                component: <FontSetting id={popupId} type={'commonText'} />,
+              },
+              {
+                id: 'commonTextEdit',
+                name: '편집',
+              },
+            ],
+          ])
+          break
+        case 'lineGrid':
+          setContextMenu([
+            [
+              {
+                id: 'gridMove',
+                name: '그리드 이동',
+              },
+              {
+                id: 'gridCopy',
+                name: '그리드 복사',
+              },
+              {
+                id: 'gridColorEdit',
+                name: '그리드 색 변경',
+              },
+              {
+                id: 'remove',
+                name: '삭제',
+              },
+              {
+                id: 'removeAll',
+                name: '전체 삭제',
+              },
+            ],
+          ])
+          break
+        case 'dimensionLine':
+          setContextMenu([
+            [
+              {
+                id: 'dimensionLineRemove',
+                name: '삭제',
+              },
+              {
+                id: 'dimensionLineMove',
+                name: '이동',
+              },
+              {
+                id: 'dimensionAuxiliaryLineEdit',
+                name: '치수 보조선 변경',
+              },
+              {
+                id: 'dimensionLineDisplayEdit',
+                name: '표시 변경',
+                component: <DimensionLineSetting id={popupId} />,
+              },
+            ],
+          ])
+          break
+        case 'shadow':
+          setContextMenu([
+            [
+              {
+                id: 'sizeEdit',
+                name: '사이즈 변경',
+                component: <SizeSetting id={popupId} />,
+              },
+              {
+                id: 'remove',
+                name: '삭제(D)',
+              },
+              {
+                id: 'move',
+                name: '이동(M)',
+              },
+              {
+                id: 'copy',
+                name: '복사(C)',
+              },
+            ],
+          ])
+          break
         default:
           currentMenuSetting()
       }
@@ -267,13 +432,10 @@ export function useContextMenu({ externalFn }) {
     }
   }, [currentObject])
 
-  useEffect(() => {
-    console.log(currentContextMenu)
-  }, [currentContextMenu])
-
   return {
     contextMenu,
     currentContextMenu,
     setCurrentContextMenu,
+    handleClick,
   }
 }

src/hooks/usePagination.js

@@ -28,6 +28,15 @@ const usePagination = ({ pageNo = 1, pageSize = 10, pagePerBlock = 10, totalCoun
     return i + startPage
   })
 
+  // console.log('pageRange', pageRange)
+  // console.log('startPage', startPage)
+  // console.log('endPage', endPage)
+  // console.log('totalPages', totalPages)
+  // console.log('pageGroup', pageGroup)
+  // console.log('pagePerBlock', pagePerBlock)
+  // console.log('currentPage', currentPage)
+  // console.log('pageNo', pageNo)
+
   return { currentPage, changePage, pageGroup, totalPages, pages, startPage, endPage, pageRange }
 }
 

src/hooks/usePopup.js

@@ -1,20 +1,14 @@
 import { useRecoilState } from 'recoil'
 import { popupState } from '@/store/popupAtom'
-import { useEffect } from 'react'
 
 export function usePopup() {
   const [popup, setPopup] = useRecoilState(popupState)
 
-  useEffect(() => {
-    console.log(popup)
-  }, [popup])
-
   const addPopup = (id, depth, component) => {
     setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
   }
 
   const closePopup = (id) => {
-    console.log(id)
     setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
   }
 

src/locales/ja.json

@@ -477,10 +477,11 @@
   "stuff.detail.header.createDatetime": "登録日",
   "stuff.detail.required": "必須入力項目",
   "stuff.detail.planReqNo": "設計依頼No.",
-  "stuff.detail.dispCompanyName": "担当者",
+  "stuff.detail.receiveUser": "担当者",
   "stuff.detail.objectStatusId": "物品区分/物件名",
   "stuff.detail.objectStatus0": "新築",
   "stuff.detail.objectStatus1": "基軸",
+  "stuff.detail.objectNameOmit": "敬称",
   "stuff.detail.objectNameKana": "商品名 ふりがな",
   "stuff.detail.saleStoreId": "一次販売店名/ID",
   "stuff.detail.otherSaleStoreId": "二次販売店名/ID",
@@ -489,8 +490,8 @@
   "stuff.detail.btn.addressPop.guide": "※ 郵便番号7桁を入力した後、アドレス検索ボタンをクリックしてください",
   "stuff.detail.prefId": "都道府県 / 住所 ",
   "stuff.detail.areaId": "発電量シミュレーション地域 ",
-  "stuff.detail.windSpeed": "基準風速",
+  "stuff.detail.standardWindSpeedId": "基準風速",
-  "stuff.detail.windSpeedSpan": "m/s以下",
+  "stuff.detail.standardWindSpeedIdSpan": "m/s以下",
   "stuff.detail.btn.windSpeedPop": "風速選択",
   "stuff.detail.verticalSnowCover": "垂直説説",
   "stuff.detail.coldRegionFlg": "寒冷地対策施行",
@@ -516,8 +517,11 @@
   "stuff.detail.btn.moveList": "商品リスト",
   "stuff.detail.btn.save": "保存",
   "stuff.detail.btn.tempSave": "一時保存",
+  "stuff.detail.save": "保存しました",
+  "stuff.detail.noChgData": "変更内容はありません",
   "stuff.detail.save.valierror1": "垂直説説は0より大きい値を入力してください",
   "stuff.detail.save.valierror2": "設置高さ0より大きい値を入力してください",
+  "stuff.detail.save.valierror3": "{0} 必須入力項目です.",
   "stuff.planReqPopup.popTitle": "設計依頼検索",
   "stuff.planReqPopup.btn1": "検索",
   "stuff.planReqPopup.btn2": "初期化",

src/locales/ko.json

@@ -482,10 +482,11 @@
   "stuff.detail.header.createDatetime": "등록일",
   "stuff.detail.required": "필수 입력항목",
   "stuff.detail.planReqNo": "설계의뢰No.",
-  "stuff.detail.dispCompanyName": "담당자",
+  "stuff.detail.receiveUser": "담당자",
   "stuff.detail.objectStatusId": "물건구분/물건명",
   "stuff.detail.objectStatus0": "신축",
   "stuff.detail.objectStatus1": "기축",
+  "stuff.detail.objectNameOmit": "경칭",
   "stuff.detail.objectNameKana": "물건명 후리가나",
   "stuff.detail.saleStoreId": "1차 판매점명 / ID",
   "stuff.detail.otherSaleStoreId": "2차 판매점명 / ID",
@@ -494,8 +495,8 @@
   "stuff.detail.btn.addressPop.guide": "※ 주소검색 버튼을 클릭한 후, 도도부현 정보를 선택해주십시오.",
   "stuff.detail.prefId": "도도부현 / 주소",
   "stuff.detail.areaId": "발전량시뮬레이션지역",
-  "stuff.detail.windSpeed": "기준풍속",
+  "stuff.detail.standardWindSpeedId": "기준풍속",
-  "stuff.detail.windSpeedSpan": "m/s이하",
+  "stuff.detail.standardWindSpeedIdSpan": "m/s이하",
   "stuff.detail.btn.windSpeedPop": "풍속선택",
   "stuff.detail.verticalSnowCover": "수직적설량",
   "stuff.detail.coldRegionFlg": "한랭지대책시행",
@@ -521,8 +522,11 @@
   "stuff.detail.btn.moveList": "물건목록",
   "stuff.detail.btn.save": "저장",
   "stuff.detail.btn.tempSave": "임시저장",
+  "stuff.detail.save": "저장되었습니다",
+  "stuff.detail.noChgData": "변경된 내용이 없습니다",
   "stuff.detail.save.valierror1": "수직적설량은 0보다 큰 값을 입력하세요",
   "stuff.detail.save.valierror2": "설치높이는 0보다 큰 값을 입력하세요",
+  "stuff.detail.save.valierror3": "{0} 필수 입력 항목입니다.",
   "stuff.planReqPopup.popTitle": "설계 요청 검색",
   "stuff.planReqPopup.btn1": "검색",
   "stuff.planReqPopup.btn2": "초기화",

src/store/popupAtom.js

@@ -11,3 +11,12 @@ export const popupState = atom({
   },
   dangerouslyAllowMutability: true,
 })
+
+export const contextPopupPositionState = atom({
+  key: 'contextPopupPositionState',
+  default: {
+    x: 50,
+    y: 180,
+  },
+  dangerouslyAllowMutability: true,
+})

src/styles/_contents.scss

@@ -309,12 +309,12 @@
     padding-top: 46.8px;
     transition: all .17s ease-in-out;
     .canvas-frame{
-        height: 86.3vh;
+        height: calc(100vh - 129.3px);
     }
     &.active{
         padding-top: calc(46.8px + 50px);
         .canvas-frame{
-            height: 81vh;
+            height: calc(100vh - 179.4px);
         }
     }
 }
@@ -1024,6 +1024,7 @@
     display: flex;
     padding: 20px;
     .simulation-tit-wrap{
+        flex: none;
         padding-right: 40px;
         border-right: 1px solid #EEEEEE;
         span{
@@ -1047,6 +1048,7 @@
         }
     }
     .simulation-guide-box{
+        flex: 1;
         padding-left: 40px;
         dl{
             margin-bottom: 25px;
@@ -1066,6 +1068,9 @@
                 margin-bottom: 0;
             }
         }
+        ul, ol{
+            list-style: unset;
+        }
     }
 }
 

src/styles/_main.scss

@@ -405,10 +405,15 @@
                     display: flex;
                     align-items: center;
                     border: 1px solid #E5E9EF;
+                    border-radius: 4px;
                     height: 45px;
                     padding-left: 40px;
                     padding-right: 15px;
                     margin-bottom: 15px;
+                    transition: border .15s ease-in-out;
+                    &.focus{
+                        border-color: #A8B6C7;
+                    }
                     .login-input{
                         flex: 1;
                         height: 100%;