Merge branch 'dev' into dev-yj

# Conflicts:
#	src/hooks/common/useCommonUtils.js
#	src/hooks/object/useObjectBatch.js
#	src/hooks/useContextMenu.js

src/app/floor-plan/page.jsx

@@ -1,5 +1,4 @@
 import CanvasFrame from '@/components/floor-plan/CanvasFrame'
-import FloorPlan from '@/components/floor-plan/FloorPlan'
 
 export default function FloorPlanPage() {
   return (

src/components/common/context-menu/QContextMenu.jsx

@@ -2,12 +2,14 @@
 import { useEffect } from 'react'
 import '@/styles/contents.scss'
 import { useRecoilState } from 'recoil'
-import { contextMenuState } from '@/store/contextMenu'
+import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
 
 export default function QContextMenu(props) {
   const { contextRef, canvasProps, handleKeyup } = props
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
+  const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
   const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
+
   let contextType = ''
 
   if (activeObject) {
@@ -19,12 +21,22 @@ export default function QContextMenu(props) {
     }
   }
 
+  const getYPosition = (e) => {
+    const contextLength = contextMenuList.reduce((acc, cur, index) => {
+      return acc + cur.length
+    }, 0)
+    return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
+  }
   useEffect(() => {
     if (!contextRef.current) return
 
     const handleContextMenu = (e) => {
       // e.preventDefault() //기존 contextmenu 막고
-      setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
+      const position = {
+        x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
+        y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
+      }
+      setContextMenu({ visible: true, ...position })
       document.addEventListener('keyup', (e) => handleKeyup(e))
       canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }

src/components/estimate/Estimate.jsx

@@ -1,20 +1,31 @@
 'use client'
+
 import { useEffect, useState, useRef } from 'react'
-import { useMessage } from '@/hooks/useMessage'
-import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 import { useRecoilValue } from 'recoil'
 import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
-import { Button } from '@nextui-org/react'
 import { sessionStore } from '@/store/commonAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+import SingleDatePicker from '../common/datepicker/SingleDatePicker'
+import EstimateFileUploader from './EstimateFileUploader'
 
 export default function Estimate({ params }) {
-  const sessionState = useRecoilValue(sessionStore)
-  const { getMessage } = useMessage()
-  const objectRecoil = useRecoilValue(floorPlanObjectState)
   const [objectNo, setObjectNo] = useState('')
-  const fileInputRef = useRef(null)
   const [files, setFiles] = useState([]) //첨부파일
-  const fileId = useRef(0)
+
+  const sessionState = useRecoilValue(sessionStore)
+  const objectRecoil = useRecoilValue(floorPlanObjectState)
+  const { getMessage } = useMessage()
+
+  const { setMenuNumber } = useCanvasMenu()
+
+  const fileUploadProps = {
+    // objectNo: '',
+    // planNo: params.pid,
+    // category: '10',
+    uploadFiles: files,
+    setUploadFiles: setFiles,
+  }
 
   useEffect(() => {
     setObjectNo(objectRecoil.floorPlanObjectNo)
@@ -28,31 +39,9 @@ export default function Estimate({ params }) {
     }
   }, [objectNo])
 
-  const handleButtonClick = () => {
+  useEffect(() => {
-    fileInputRef.current.click()
+    setMenuNumber(5)
-  }
+  }, [])
-
-  const onChangeFiles = (e) => {
-    // e.preventDefault()
-    // e.persist()
-    // console.log('파일::', e.target.files[0])
-    // console.log('파일::', e.target.files)
-    // let selectFiles = []
-    // let tempFiles = files
-    // selectFiles = e.target.files
-    // for (const file of selectFiles) {
-    //   tempFiles = [
-    //     ...tempFiles,
-    //     {
-    //       id: fileId.current++,
-    //       object: file,
-    //     },
-    //   ]
-    // }
-    // setFiles(tempFiles)
-    // const formData = new FormData()
-    // formData.append('file', e.target.files[0])
-  }
 
   return (
     <div className="sub-content estimate">
@@ -210,7 +199,8 @@ export default function Estimate({ params }) {
                   <tr>
                     <th>{getMessage('estimate.detail.header.fileList1')}</th>
                     <td>
-                      <div className="drag-file-box">
+                      <EstimateFileUploader {...fileUploadProps} />
+                      {/* <div className="drag-file-box">
                         <div className="btn-area">
                           <Button type="button" className="btn-origin grey" onClick={handleButtonClick}>
                             {getMessage('estimate.detail.fileList.btn')}
@@ -228,7 +218,7 @@ export default function Estimate({ params }) {
                           <p>Drag file here</p>
                           <ul className="file-list"></ul>
                         </div>
-                      </div>
+                      </div> */}
                     </td>
                   </tr>
                 </tbody>

src/components/estimate/EstimateFileUploader.jsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useContext, useRef } from 'react'
+import { v4 as uuidv4 } from 'uuid'
+import { useMessage } from '@/hooks/useMessage'
+import { SessionContext } from '@/app/SessionProvider'
+
+export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
+  const fileInputRef = useRef(null)
+  const { getMessage } = useMessage()
+  const { session } = useContext(SessionContext)
+
+  const handleButtonClick = (e) => {
+    e.preventDefault()
+    fileInputRef.current.click()
+  }
+
+  const onChangeFiles = async (e) => {
+    // const formData = new FormData()
+    // formData.append('file', e.target.files[0])
+    // formData.append('objectNo', objectNo) // 받아와야 하는 값
+    // formData.append('planNo', planNo) // 받아와야 하는 값
+    // formData.append('category', category) // 받아와야 하는 값
+    // formData.append('userId', session.userId)
+
+    // await promisePost({ url: '/api/file/fileUpload', data: formData }).then((res) => {
+    //   if (res.data > 0) setUploadFiles([...files, { name: e.target.files[0].name, id: uuidv4() }])
+    // })
+    setUploadFiles([...uploadFiles, { data: e.target.files[0], id: uuidv4() }])
+  }
+
+  const deleteFile = (id) => {
+    setUploadFiles(uploadFiles.filter((file) => file.id !== id))
+  }
+
+  const handleDrop = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const fileList = []
+    Array.from(e.dataTransfer.files).forEach((file) => {
+      fileList.push({ data: file, id: uuidv4() })
+    })
+    setUploadFiles([...uploadFiles, ...fileList])
+  }
+
+  const handleDragOver = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDragEnd = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDragLeave = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  return (
+    <div className="drag-file-box">
+      <div className="btn-area">
+        <label className="file-upload" htmlFor="img" onClick={handleButtonClick}>
+          {getMessage('estimate.detail.fileList.btn')}
+        </label>
+        <input type="file" name="file" id="img" ref={fileInputRef} style={{ display: 'none' }} onChange={(e) => onChangeFiles(e)} />
+      </div>
+      <div
+        className="drag-file-area"
+        draggable
+        onDrop={(e) => handleDrop(e)}
+        onDragOver={(e) => handleDragOver(e)}
+        onDragEnd={(e) => handleDragEnd(e)}
+        onDragLeave={(e) => handleDragLeave(e)}
+      >
+        <p>Drag file here</p>
+        <ul className="file-list">
+          {uploadFiles.length > 0 &&
+            uploadFiles.map((file) => (
+              <li className="file-item" key={file.id}>
+                <span>
+                  {file.data.name} <button className="delete" onClick={() => deleteFile(file.id)}></button>
+                </span>
+              </li>
+            ))}
+        </ul>
+      </div>
+    </div>
+  )
+}

src/components/floor-plan/CanvasFrame.jsx

@@ -8,8 +8,7 @@ import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
 import { usePlan } from '@/hooks/usePlan'
 import { useContextMenu } from '@/hooks/useContextMenu'
-import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
+import { currentMenuState } from '@/store/canvasAtom'
-import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
 import { MENU } from '@/common/common'
@@ -59,7 +58,7 @@ export default function CanvasFrame() {
       <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
 
       <QContextMenu contextRef={canvasRef} canvasProps={canvas} handleKeyup={handleKeyup}>
-        {contextMenu.map((menus, index) => (
+        {contextMenu?.map((menus, index) => (
           <ul key={index}>
             {menus.map((menu) => (
               <li key={menu.id} onClick={(e) => handleClick(e, menu)}>

src/components/floor-plan/FloorPlan.jsx

@@ -26,10 +26,6 @@ export default function FloorPlan({ children }) {
     fetchSettings()
   }, [objectNo])
 
-  useEffect(() => {
-    setMenuNumber(1)
-  }, [])
-
   return (
     <>
       <div className="canvas-wrap">

src/components/floor-plan/MenuDepth01.jsx

@@ -15,8 +15,12 @@ export default function MenuDepth01() {
   const subMenus = useRecoilValue(subMenusState)
 
   const onClickMenu = ({ id, menu }) => {
+    if (menu === currentMenu) {
+      handleMenu(type)
+    } else {
       setCurrentMenu(menu)
     }
+  }
 
   useEffect(() => {
     handleMenu(type)

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

@@ -3,50 +3,79 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
+import { useState } from 'react'
 
 export default function AuxiliaryCopy(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const [arrow1, setArrow1] = useState(null)
+  const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
-          <h1 className="title">補助線のコピー </h1>
+          <h1 className="title">{getMessage('modal.auxiliary.copy')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
         <div className="modal-body">
-          <div className="grid-option-tit">コピーする方向を入力してください</div>
+          <div className="grid-option-tit">{getMessage('modal.auxiliary.copy.info')}</div>
           <div className="grid-option-wrap">
             <div className="grid-option-box">
               <div className="move-form">
-                <p className="mb5">長さ</p>
+                <p className="mb5">{getMessage('length')}</p>
                 <div className="input-move-wrap mb5">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↑')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↓')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                      }}
+                    ></button>
+                  </div>
                 </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
-                <button className="direction down act"></button>
+                      className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
-                <button className="direction left"></button>
+                      onClick={() => {
-                <button className="direction right"></button>
+                        setArrow2('←')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('→')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                      }}
+                    ></button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">保存</button>
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
       </div>

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

@@ -13,9 +13,10 @@ export default function AuxiliaryMove(props) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [arrow1, setArrow1] = useState(null)
+  const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.auxiliary.move')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -33,14 +34,6 @@ export default function AuxiliaryMove(props) {
                     <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 ${arrow1 === '↑' ? 'act' : ''}`}
@@ -56,23 +49,33 @@ export default function AuxiliaryMove(props) {
                         document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
                       }}
                     ></button>
+                  </div>
+                </div>
+                <div className="input-move-wrap">
+                  <div className="input-move">
+                    <input type="text" className="input-origin" defaultValue={910} />
+                  </div>
+                  <span>mm</span>
+                  <div className="direction-move-wrap">
                     <button
-                  className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
+                      className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
                       onClick={() => {
-                    setArrow1('←')
+                        setArrow2('←')
                         document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
                       }}
                     ></button>
                     <button
-                  className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
+                      className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
                       onClick={() => {
-                    setArrow1('→')
+                        setArrow2('→')
                         document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
                       }}
                     ></button>
                   </div>
                 </div>
               </div>
+            </div>
+          </div>
           <div className="grid-btn-wrap">
             <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>

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

@@ -11,9 +11,9 @@ export default function AuxiliarySize(props) {
   const { closePopup } = usePopup()
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
-          <h1 className="title">補助線サイズ変更 </h1>
+          <h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
@@ -22,7 +22,7 @@ export default function AuxiliarySize(props) {
           <div className="discrimination-box mb10">
             <div className="d-check-radio pop mb10">
               <input type="radio" name="radio01" id="ra01" />
-              <label htmlFor="ra01">1支店</label>
+              <label htmlFor="ra01">1{getMessage('modal.auxiliary.size.edit.point')}</label>
             </div>
             <div className="outline-form mb15">
               <div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
@@ -31,7 +31,7 @@ export default function AuxiliarySize(props) {
               <span className="thin">mm</span>
             </div>
             <div className="outline-form">
-              <span style={{ width: 'auto' }}>長さ</span>
+              <span style={{ width: 'auto' }}>{getMessage('length')}</span>
               <div className="input-grid mr5">
                 <input type="text" className="input-origin block" defaultValue={100} />
               </div>
@@ -41,7 +41,7 @@ export default function AuxiliarySize(props) {
           <div className="discrimination-box ">
             <div className="d-check-radio pop mb10">
               <input type="radio" name="radio01" id="ra02" />
-              <label htmlFor="ra02">2支店</label>
+              <label htmlFor="ra02">2{getMessage('modal.auxiliary.size.edit.point')}</label>
             </div>
             <div className="outline-form mb15">
               <div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
@@ -50,7 +50,7 @@ export default function AuxiliarySize(props) {
               <span className="thin">mm</span>
             </div>
             <div className="outline-form">
-              <span style={{ width: 'auto' }}>長さ</span>
+              <span style={{ width: 'auto' }}>{getMessage('length')}</span>
               <div className="input-grid mr5">
                 <input type="text" className="input-origin block" defaultValue={100} />
               </div>
@@ -58,7 +58,7 @@ export default function AuxiliarySize(props) {
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">保存</button>
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
       </div>

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

@@ -1,17 +1,16 @@
-import { useState, useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import QSelectBox from '@/components/common/select/QSelectBox'
-import { pitchTextSelector } from '@/store/canvasAtom'
+import { canvasState, pitchTextSelector } from '@/store/canvasAtom'
 import { defaultSlope } from '@/store/commonAtom'
-import { canvasState } from '@/store/canvasAtom'
 
 export default function DimensionLineSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
-  const { id, setIsShow, pos = contextPopupPosition } = props
+  let { id, setIsShow, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const canvas = useRecoilValue(canvasState)
@@ -79,7 +78,7 @@ export default function DimensionLineSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -131,7 +130,9 @@ export default function DimensionLineSetting(props) {
             <div className="warning">{getMessage('modal.display.edit.input.slope.info')}</div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleChangeLength}>{getMessage('modal.common.save')}</button>
+            <button className="btn-frame modal act" onClick={handleChangeLength}>
+              {getMessage('modal.common.save')}
+            </button>
           </div>
         </div>
       </div>

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

@@ -60,7 +60,7 @@ export default function FlowDirectionSetting(props) {
   }, [compasDeg])
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lx`}>
+      <div className={`modal-pop-wrap lx mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>

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

@@ -34,22 +34,24 @@ export default function GridMove(props) {
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button className="direction up"></button>
+                    <button className="direction down act"></button>
+                  </div>
                 </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>
+          </div>
           <div className="grid-btn-wrap">
             <button className="btn-frame modal act">{getMessage('modal.grid.move.save')}</button>
           </div>

src/components/floor-plan/modal/image/ImageSizeSetting.jsx

@@ -14,7 +14,7 @@ export default function ImageSizeSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xxxm`}>
+      <div className={`modal-pop-wrap xxxm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.image.size.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>

src/components/floor-plan/modal/module/CircuitNumberEdit.jsx

@@ -15,7 +15,7 @@ export default function CircuitNumberEdit(props) {
   }
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>

src/components/floor-plan/modal/module/column/ColumnInsert.jsx

@@ -23,7 +23,7 @@ export default function ColumnInsert(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap r`}>
+      <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>

src/components/floor-plan/modal/module/column/ColumnRemove.jsx

@@ -25,7 +25,7 @@ export default function ColumnRemove(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap r`}>
+      <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>

src/components/floor-plan/modal/module/row/RowInsert.jsx

@@ -23,7 +23,7 @@ export default function RowInsert(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap r`}>
+      <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.row.insert')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>

src/components/floor-plan/modal/module/row/RowRemove.jsx

@@ -25,7 +25,7 @@ export default function RowRemove(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap r`}>
+      <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.row.remove')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>

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

@@ -3,15 +3,18 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'
 
 export default function DormerOffset(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const [arrow1, setArrow1] = useState(null)
+  const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm`}>
+      <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('contextmenu.dormer.offset')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -29,19 +32,45 @@ export default function DormerOffset(props) {
                     <input type="text" className="input-origin" defaultValue={0} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↑')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↓')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
                 <div className="input-move-wrap">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={0} />
                   </div>
                   <span>mm</span>
-                </div>
-              </div>
                   <div className="direction-move-wrap">
-                <button className="direction up"></button>
+                    <button
-                <button className="direction down act"></button>
+                      className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
-                <button className="direction left"></button>
+                      onClick={() => {
-                <button className="direction right"></button>
+                        setArrow2('←')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('→')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                      }}
+                    ></button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>

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

@@ -19,7 +19,8 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
   const canvas = useRecoilValue(canvasState)
   const [buttonAct, setButtonAct] = useState(1)
   const { swalFire } = useSwal()
-  const { applyOpeningAndShadow, applyDormers } = useObjectBatch()
+  const [isHidden, setIsHidden] = useState(false)
+  const { applyOpeningAndShadow, applyDormers } = useObjectBatch({ isHidden, setIsHidden })
   const { closePopup } = usePopup()
 
   const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
@@ -63,6 +64,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
     } else {
       applyDormers(dormerPlacement, buttonAct, surfaceShapePolygons)
     }
+    setIsHidden(true)
   }
 
   const buttonMenu = [
@@ -71,9 +73,10 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
     { id: 3, name: getMessage('modal.object.setting.type.triangle.dormer') },
     { id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
   ]
+
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lrr`}>
+      <div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>

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

@@ -22,9 +22,9 @@ export default function RoofMaterialSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xxxm`}>
+      <div className={`modal-pop-wrap xxxm mount`}>
         <div className="modal-head">
-          <h1 className="title">変更 </h1>
+          <h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
@@ -36,7 +36,7 @@ export default function RoofMaterialSetting(props) {
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">ストレージ</button>
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
       </div>

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

@@ -16,7 +16,7 @@ export default function RoofAllocationSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap ml`}>
+      <div className={`modal-pop-wrap ml mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>

src/components/main/MainContents.jsx

@@ -15,7 +15,7 @@ export default function MainContents() {
   const { getMessage } = useMessage()
   const router = useRouter()
   const globalLocaleState = useRecoilValue(globalLocaleStore)
-  const { promiseGet, get } = useAxios(globalLocaleState)
+  const { promiseGet } = useAxios(globalLocaleState)
 
   const sessionState = useRecoilValue(sessionStore)
 
@@ -118,7 +118,7 @@ export default function MainContents() {
                     key={row.objectNo}
                     className="recently-item"
                     onClick={() => {
-                      if (row.objectNo.substring(0, 1) === 'R') {
+                      if (row.tempFlg === '0') {
                         router.push(`/management/stuff/detail?objectNo=${row.objectNo.toString()}`)
                       } else {
                         router.push(`/management/stuff/tempdetail?objectNo=${row.objectNo.toString()}`)

src/components/management/Stuff.jsx

@@ -1,12 +1,11 @@
 'use client'
 
-import React, { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useContext } from 'react'
 import { useRouter, usePathname } from 'next/navigation'
-import { Button } from '@nextui-org/react'
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import StuffQGrid from './StuffQGrid'
-import { useRecoilValue, useRecoilState } from 'recoil'
+import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'
 import { stuffSearchState } from '@/store/stuffAtom'
 import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
 import dayjs from 'dayjs'
@@ -17,10 +16,12 @@ import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
 import QPagination from '../common/pagination/QPagination'
 import { sessionStore } from '@/store/commonAtom'
+import { SessionContext } from '@/app/SessionProvider'
 
 export default function Stuff() {
   const sessionState = useRecoilValue(sessionStore)
-  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
+  const { session } = useContext(SessionContext)
+  const setAppMessageState = useSetRecoilState(appMessageStore)
   const stuffSearchParams = useRecoilValue(stuffSearchState)
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
   const { getMessage } = useMessage()
@@ -224,11 +225,10 @@ export default function Stuff() {
 
   // 진입시 그리드 데이터 조회
   useEffect(() => {
-    if (isObjectNotEmpty(sessionState)) {
+    if (isObjectNotEmpty(session)) {
-      //물건 메뉴 눌러서 최초 진입 sessionState
       if (stuffSearchParams?.code === 'S') {
         const params = {
-          saleStoreId: sessionState?.storeId,
+          saleStoreId: stuffSearchParams.schSelSaleStoreId,
           schObjectNo: stuffSearchParams?.schObjectNo,
           schAddress: stuffSearchParams?.schAddress,
           schObjectName: stuffSearchParams?.schObjectName,
@@ -257,13 +257,15 @@ export default function Stuff() {
             }
           })
         }
+        if (stuffSearchParams?.schSelSaleStoreId !== '') {
           fetchData()
+        }
       } else if (stuffSearchParams?.code === 'M') {
         //메인화면에서 진입
         const params = {
-          saleStoreId: sessionState?.storeId,
+          saleStoreId: session?.storeId,
           schObjectNo: stuffSearchParams.schObjectNo,
-          schAddress: 'dfdfdfdfdf',
+          schAddress: '',
           schObjectName: '',
           schSaleStoreName: '',
           schReceiveUser: '',
@@ -281,23 +283,9 @@ export default function Stuff() {
         setStuffSearch({
           ...params,
         })
-
-        // async function fetchData() {
-        //   const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
-        //   await get({
-        //     url: apiUrl,
-        //   }).then((res) => {
-        //     if (!isEmptyArray(res)) {
-        //       setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-        //       setTotalCount(res[0].totCnt)
-        //     }
-        //   })
-        // }
-        // fetchData()
       }
     }
-    // }, [pageNo, sessionState, stuffSearchParams])
+  }, [pageNo, session, stuffSearchParams])
-  }, [pageNo, stuffSearchParams])
 
   useEffect(() => {
     if (stuffSearchParams?.code === 'E') {
@@ -309,7 +297,10 @@ export default function Stuff() {
 
       //조회를 눌렀을때
       async function fetchData() {
-        const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+        let saleStoreId
+        saleStoreId = stuffSearchParams?.schSelSaleStoreId ? stuffSearchParams.schSelSaleStoreId : session?.storeId
+        // const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+        const apiUrl = `/api/object/list?saleStoreId=${saleStoreId}&${queryStringFormatter(stuffSearchParams)}`
         await get({ url: apiUrl }).then((res) => {
           if (!isEmptyArray(res)) {
             setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@@ -335,13 +326,15 @@ export default function Stuff() {
     setPageSize(e.target.value)
     setStuffSearch({
       ...stuffSearchParams,
-      // code: 'P',
       startRow: startRow,
       endRow: 1 * e.target.value,
     })
 
     setPageNo(1)
-    const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+    let saleStoreId
+    saleStoreId = stuffSearchParams?.schSelSaleStoreId ? stuffSearchParams.schSelSaleStoreId : session?.storeId
+    // const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=${saleStoreId}&${queryStringFormatter(stuffSearchParams)}`
     get({ url: apiUrl }).then((res) => {
       if (!isEmptyArray(res)) {
         setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@@ -373,7 +366,10 @@ export default function Stuff() {
     })
 
     setPageNo(1)
-    const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+    let saleStoreId
+    saleStoreId = stuffSearchParams?.schSelSaleStoreId ? stuffSearchParams.schSelSaleStoreId : session?.storeId
+    // const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=${saleStoreId}&${queryStringFormatter(stuffSearchParams)}`
     get({ url: apiUrl }).then((res) => {
       if (!isEmptyArray(res)) {
         setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })

src/components/management/StuffDetail.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useContext } from 'react'
 import { useRouter, useSearchParams, usePathname } from 'next/navigation'
 import { Button } from '@nextui-org/react'
 import Select, { components } from 'react-select'
@@ -12,6 +12,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { useForm } from 'react-hook-form'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { sessionStore } from '@/store/commonAtom'
+import { SessionContext } from '@/app/SessionProvider'
 import FindAddressPop from './popup/FindAddressPop'
 import PlanRequestPop from './popup/PlanRequestPop'
 import WindSelectPop from './popup/WindSelectPop'
@@ -22,19 +23,13 @@ import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
 export default function StuffDetail() {
   const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState) //견적서 화면용 물건번호리코일
 
-  // const inputReceiveUserEl = useRef(null) //담당자ref
-  // const inputObjectNameEl = useRef(null) //물건명ref
-  // const inputZipNoEl = useRef(null) //우편번호ref
-  // const inputAddressEl = useRef(null) //주소ref
-  // const inputVerticalSnowCoverEl = useRef(null) //수직적설량ref
-  // const inputInstallHeightEl = useRef(null) //설치높이ref
-
   //공통코드
   const { commonCode, findCommonCode } = useCommonCode()
   const [selOptions, setSelOptions] = useState('') //선택한 1차점
   const [otherSelOptions, setOtherSelOptions] = useState('') //선택한 1차점외
 
   const sessionState = useRecoilValue(sessionStore)
+  const { session } = useContext(SessionContext)
 
   const router = useRouter()
   const pathname = usePathname()
@@ -322,55 +317,91 @@ export default function StuffDetail() {
       //1차점 : X167 T01
       //2차점 : 10X22, 201X112
       let url
-      if (sessionState?.storeId === 'T01') {
+      let firstList
-        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
+      let otherList
-        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+      let favList
+      // if (sessionState?.storeId === 'T01') {
+      if (session?.storeId === 'T01') {
+        url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
       } else {
-        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+        if (session.storeLvl === '1') {
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+        } else {
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
+        }
       }
 
       get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
-          const firstList = res.filter((row) => row.saleStoreLevel === '1')
+          res.map((row) => {
-          let favList
+            row.value = row.saleStoreId
-          if (sessionState?.storeId === 'T01') {
+            row.label = row.saleStoreName
+          })
+          if (session?.storeId === 'T01') {
+            firstList = res
             firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
             favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
+
             setSaleStoreList(firstList)
             setFavoriteStoreList(favList)
             setShowSaleStoreList(favList)
-          } else {
+            setSelOptions(session?.storeId)
-            //1차점 셀렉트박스
+            form.setValue('saleStoreId', session?.storeId)
-            setSaleStoreList(firstList)
+            form.setValue('saleStoreLevel', session?.storeLvl)
-          }
+            //T01일떄는 1차점을 고른다음 2차점 목록 조회하기
-          const otherList = res.filter((row) => row.saleStoreLevel !== '1')
+            //디폴트 값(T01)으로 2차점목록 조회하기
-          let filterOtherList
+            url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=0&userId=${session?.userId}`
-          if (sessionState?.storeId === 'T01') {
+            get({ url: url }).then((res) => {
-            filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
+              if (!isEmptyArray(res)) {
+                res.map((row) => {
+                  row.value = row.saleStoreId
+                  row.label = row.saleStoreName
+                })
 
-            setOriginOtherSaleStoreList(filterOtherList)
+                otherList = res
-            setOtherSaleStoreList(filterOtherList)
-          } else {
-            //T01 아니고 2차점 판매점 셀렉트박스
-            setOriginOtherSaleStoreList(otherList)
                 setOtherSaleStoreList(otherList)
-          }
-
-          if (sessionState?.storeLvl === '1') {
-            setSelOptions(sessionState?.storeId)
-            form.setValue('saleStoreId', sessionState?.storeId)
-            form.setValue('saleStoreLevel', sessionState?.storeLvl)
               } else {
+                setOtherSaleStoreList([])
+              }
+            })
+          } else {
+            if (session?.storeLvl === '1') {
+              firstList = res
+              favList = res.filter((row) => row.priority !== 'B')
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
+
+              setSaleStoreList(firstList)
+              setFavoriteStoreList(firstList)
+              setShowSaleStoreList(firstList)
               setSelOptions(firstList[0].saleStoreId)
-            setOtherSelOptions(sessionState?.storeId)
+              form.setValue('saleStoreId', session?.storeId)
+              form.setValue('saleStoreLevel', session?.storeLvl)
+
+              setOtherSaleStoreList(otherList)
+            } else {
+              //10X22, 201X112,202X217
+              firstList = res.filter((row) => row.firstAgentYn === 'Y')
+              setSaleStoreList(firstList)
+              setFavoriteStoreList(firstList)
+              setShowSaleStoreList(firstList)
+              setSelOptions(firstList[0].saleStoreId)
+
               form.setValue('saleStoreId', firstList[0].saleStoreId)
-            form.setValue('otherSaleStoreId', sessionState?.storeId)
+              form.setValue('saleStoreLevel', firstList[0].saleStoreLevel)
-            form.setValue('otherSaleStoreLevel', sessionState?.storeLvl)
+
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
+              setOtherSaleStoreList(otherList)
+              //2차 판매점명/ID는  본인을 셀렉트
+              setOtherSelOptions(session?.storeId)
+              form.setValue('otherSaleStoreId', session?.storeId)
+              form.setValue('otherSaleStoreLevel', session?.storeLvl)
+            }
           }
         }
       })
     }
-  }, [objectNo, sessionState])
+    // }, [objectNo, sessionState])
+  }, [objectNo, session])
 
   useEffect(() => {
     const code1 = findCommonCode(200800) //경칭
@@ -400,39 +431,79 @@ export default function StuffDetail() {
       //1차점 : X167 T01
       //2차점 : 10X22, 201X112
       let url
-      if (sessionState?.storeId === 'T01') {
+      let firstList
-        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
+      let otherList
-        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+      let favList
+      // if (sessionState?.storeId === 'T01') {
+      if (session?.storeId === 'T01') {
+        // url = `/api/object/saleStore/${sessionState?.storeId}/firstList?userId=${sessionState?.userId}`
+        url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
       } else {
-        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+        // if (sessionState.storeLvl === '1') {
+        if (session.storeLvl === '1') {
+          // url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
+        } else {
+          // url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
+        }
       }
       get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
-          const firstList = res.filter((row) => row.saleStoreLevel === '1')
+          // if (sessionState?.storeId === 'T01') {
-          const otherList = res.filter((row) => row.saleStoreLevel !== '1')
+          if (session?.storeId === 'T01') {
-          let favList
+            firstList = res.filter((row) => row.saleStoreLevel === '1')
-
-          if (sessionState?.storeId === 'T01') {
             firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
             favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
             setSaleStoreList(firstList)
             setFavoriteStoreList(favList)
             setShowSaleStoreList(favList)
-          } else {
-            //1차점 셀렉트박스
-            setSaleStoreList(firstList)
-          }
 
-          let filterOtherList
+            form.setValue('saleStoreId', firstList[0].saleStoreId)
-          if (sessionState?.storeId === 'T01') {
+            form.setValue('saleStoreName', firstList[0].saleStoreName)
-            filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
+            form.setValue('saleStoreLevel', firstList[0].saleStoreLevel)
-            setOriginOtherSaleStoreList(filterOtherList)
+            setSelOptions(firstList[0].saleStoreId)
-            setOtherSaleStoreList(filterOtherList)
+
-          } else {
+            //상세데이터의 1차점 아이디로 2차점 목록 조회하기
-            //1차점 아닌 판매점 셀렉트박스
+            // url = `/api/object/saleStore/${detailData?.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
+            url = `/api/object/saleStore/${detailData?.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
+
+            get({ url: url }).then((res) => {
+              if (!isEmptyArray(res)) {
+                res.map((row) => {
+                  row.value = row.saleStoreId
+                  row.label = row.saleStoreName
+                })
+
+                otherList = res
                 setOriginOtherSaleStoreList(otherList)
                 setOtherSaleStoreList(otherList)
               }
+            })
+          } else {
+            //1차점 셀렉트박스
+            // if (sessionState?.storeLvl === '1') {
+            if (session?.storeLvl === '1') {
+              firstList = res
+              favList = res.filter((row) => row.priority !== 'B')
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
+
+              setSaleStoreList(firstList)
+              setFavoriteStoreList(firstList)
+              setShowSaleStoreList(firstList)
+
+              setOtherSaleStoreList(otherList)
+            } else {
+              setSelOptions(res[0].saleStoreId)
+              form.setValue('saleStoreId', res[0].saleStoreId)
+              form.setValue('saleStoreLevel', res[0].storeLvl)
+              setSaleStoreList(res)
+              setFavoriteStoreList(res)
+              setShowSaleStoreList(res)
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
+              setOtherSaleStoreList(otherList)
+            }
+          }
         }
 
         //상세데이터가 1차점이면 1차점에 세팅
@@ -442,9 +513,6 @@ export default function StuffDetail() {
           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)
@@ -504,7 +572,8 @@ export default function StuffDetail() {
         form.setValue('remarks', detailData.remarks)
       })
     }
-  }, [detailData, sessionState])
+    // }, [detailData, sessionState])
+  }, [detailData, session])
 
   //경칭선택 변경 이벤트
   const onChangeHonorificCode = (key) => {
@@ -574,6 +643,7 @@ export default function StuffDetail() {
     if (objectNo) {
       tempObjectNo = objectNo.substring(0, 1)
     }
+
     if (tempObjectNo === 'T') {
       if (planReqNo) {
         if (delFlg) {
@@ -584,10 +654,65 @@ export default function StuffDetail() {
             form.setValue('saleStoreName', key.saleStoreName)
             form.setValue('saleStoreLevel', key.saleStoreLevel)
             setSelOptions(key.saleStoreId)
-            //선택한 1차점 정보로 2차점 list 추리기
+            let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
-            //長府工産株式会社　大阪支社
+            let otherList
-            let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
+            get({ url: url }).then((res) => {
-            setOtherSaleStoreList(newOtherSaleStoreList)
+              if (!isEmptyArray(res)) {
+                res.map((row) => {
+                  row.value = row.saleStoreId
+                  row.label = row.saleStoreName
+                })
+
+                otherList = res
+                setOtherSaleStoreList(otherList)
+              } else {
+                setOtherSaleStoreList([])
+              }
+            })
+          } else {
+            //X누름
+            setSelOptions('')
+            form.setValue('saleStoreId', '')
+            form.setValue('saleStoreName', '')
+            form.setValue('saleStoreLevel', '')
+            form.setValue('otherSaleStoreId', '')
+            form.setValue('otherSaleStoreName', '')
+            form.setValue('otherSaleStoreLevel', '')
+            //1차점 지웠을때 2차점 자동완성 초기화
+            setOtherSaleStoreList(originOtherSaleStoreList)
+            handleClear()
+          }
+        }
+      } else {
+        if (isObjectNotEmpty(key)) {
+          setSelOptions(key.saleStoreId)
+          form.setValue('saleStoreId', key.saleStoreId)
+          form.setValue('saleStoreName', key.saleStoreName)
+          form.setValue('saleStoreLevel', key.saleStoreLevel)
+          //선택한 1차점 정보로 2차점 조회하기
+          let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
+          let otherList
+          get({ url: url }).then((res) => {
+            if (!isEmptyArray(res)) {
+              res.map((row) => {
+                row.value = row.saleStoreId
+                row.label = row.saleStoreName
+              })
+
+              otherList = res
+              setOtherSaleStoreList(otherList)
+              setOtherSelOptions('')
+              form.setValue('otherSaleStoreId', '')
+              form.setValue('otherSaleStoreName', '')
+              form.setValue('otherSaleStoreLevel', '')
+            } else {
+              setOtherSelOptions('')
+              form.setValue('otherSaleStoreId', '')
+              form.setValue('otherSaleStoreName', '')
+              form.setValue('otherSaleStoreLevel', '')
+              setOtherSaleStoreList([])
+            }
+          })
         } else {
           //X누름
           setSelOptions('')
@@ -609,35 +734,21 @@ export default function StuffDetail() {
         form.setValue('saleStoreName', key.saleStoreName)
         form.setValue('saleStoreLevel', key.saleStoreLevel)
         setSelOptions(key.saleStoreId)
-          //선택한 1차점 정보로 2차점 list 추리기
+        let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
-          //長府工産株式会社　大阪支社
+        let otherList
-          let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
+        get({ url: url }).then((res) => {
-          setOtherSaleStoreList(newOtherSaleStoreList)
+          if (!isEmptyArray(res)) {
+            res.map((row) => {
+              row.value = row.saleStoreId
+              row.label = row.saleStoreName
+            })
+
+            otherList = res
+            setOtherSaleStoreList(otherList)
           } else {
-          //X누름
+            setOtherSaleStoreList([])
-          setSelOptions('')
-          form.setValue('saleStoreId', '')
-          form.setValue('saleStoreName', '')
-          form.setValue('saleStoreLevel', '')
-          form.setValue('otherSaleStoreId', '')
-          form.setValue('otherSaleStoreName', '')
-          form.setValue('otherSaleStoreLevel', '')
-          //1차점 지웠을때 2차점 자동완성 초기화
-          setOtherSaleStoreList(originOtherSaleStoreList)
-          handleClear()
           }
-      }
+        })
-    } else {
-      if (isObjectNotEmpty(key)) {
-        setOtherSaleStoreList(otherSaleStoreList)
-        form.setValue('saleStoreId', key.saleStoreId)
-        form.setValue('saleStoreName', key.saleStoreName)
-        form.setValue('saleStoreLevel', key.saleStoreLevel)
-        setSelOptions(key.saleStoreId)
-        //선택한 1차점 정보로 2차점 list 추리기
-        //長府工産株式会社　大阪支社
-        let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
-        setOtherSaleStoreList(newOtherSaleStoreList)
       } else {
         //X누름
         setSelOptions('')
@@ -687,6 +798,7 @@ export default function StuffDetail() {
     if (objectNo) {
       tempObjectNo = objectNo.substring(0, 1)
     }
+
     if (tempObjectNo === 'T') {
       if (planReqNo) {
         if (delFlg) {
@@ -1170,19 +1282,12 @@ export default function StuffDetail() {
 
     //1차점 or 2차점 안고르고 임시저장하면
     if (params.saleStoreId == '') {
-      params.saleStoreId = sessionState.storeId
+      // params.saleStoreId = sessionState.storeId
-      params.saleStoreLevel = sessionState.storeLvl
+      params.saleStoreId = session.storeId
+      // params.saleStoreLevel = sessionState.storeLvl
+      params.saleStoreLevel = session.storeLvl
     }
-    //수직적설량, 설치높이 0인지 체크
-    // let snow = params.verticalSnowCover
-    // let height = params.installHeight
 
-    // if (snow === '0') {
-    //   return alert(getMessage('stuff.detail.save.valierror1'))
-    // }
-    // if (height === '0') {
-    //   return alert(getMessage('stuff.detail.save.valierror2'))
-    // }
     await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
       if (res.status === 201) {
         alert(getMessage('stuff.detail.tempSave.message1'))
@@ -1256,7 +1361,7 @@ export default function StuffDetail() {
                           )) ||
                             null}
                         </div>
-                        <Button className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
+                        <Button type="button" className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
                           {getMessage('stuff.planReqPopup.title')}
                         </Button>
                       </div>
@@ -1343,7 +1448,8 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        {(sessionState?.storeId === 'T01' && (
+                        {/* {sessionState?.storeId === 'T01' && ( */}
+                        {session?.storeId === 'T01' && (
                           <>
                             <div className="select-wrap mr5" style={{ width: '567px' }}>
                               <Select
@@ -1357,8 +1463,41 @@ export default function StuffDetail() {
                                 onChange={onSelectionChange}
                                 getOptionLabel={(x) => x.saleStoreName}
                                 getOptionValue={(x) => x.saleStoreId}
-                                isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                isClearable={true}
-                                isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                isDisabled={session?.storeLvl !== '1' ? true : false}
+                                value={saleStoreList.filter(function (option) {
+                                  return option.saleStoreId === selOptions
+                                })}
+                              ></Select>
+                            </div>
+                            <div className="input-wrap" style={{ width: '216px' }}>
+                              <input
+                                type="text"
+                                className="input-light"
+                                value={form.watch('saleStoreId') || ''}
+                                {...form.register('saleStoreId')}
+                                readOnly
+                              />
+                            </div>
+                          </>
+                        )}
+
+                        {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && ( */}
+                        {session?.storeId !== 'T01' && session?.storeLvl === '1' && (
+                          <>
+                            <div className="select-wrap mr5" style={{ width: '567px' }}>
+                              <Select
+                                id="long-value-select1"
+                                instanceId="long-value-select1"
+                                className="react-select-custom"
+                                classNamePrefix="custom"
+                                placeholder="Select"
+                                options={showSaleStoreList[0]}
+                                onChange={onSelectionChange}
+                                getOptionLabel={(x) => x.saleStoreName}
+                                getOptionValue={(x) => x.saleStoreId}
+                                isClearable={false}
+                                isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
                                 value={showSaleStoreList.filter(function (option) {
                                   return option.saleStoreId === selOptions
                                 })}
@@ -1374,7 +1513,9 @@ export default function StuffDetail() {
                               />
                             </div>
                           </>
-                        )) || (
+                        )}
+                        {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && ( */}
+                        {session?.storeId !== 'T01' && session?.storeLvl !== '1' && (
                           <>
                             <div className="select-wrap mr5" style={{ width: '567px' }}>
                               <Select
@@ -1383,13 +1524,13 @@ export default function StuffDetail() {
                                 className="react-select-custom"
                                 classNamePrefix="custom"
                                 placeholder="Select"
-                                options={saleStoreList}
+                                options={showSaleStoreList}
                                 onChange={onSelectionChange}
                                 getOptionLabel={(x) => x.saleStoreName}
                                 getOptionValue={(x) => x.saleStoreId}
-                                isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                isClearable={false}
-                                isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                isDisabled={true}
-                                value={saleStoreList.filter(function (option) {
+                                value={showSaleStoreList.filter(function (option) {
                                   return option.saleStoreId === selOptions
                                 })}
                               ></Select>
@@ -1432,8 +1573,8 @@ export default function StuffDetail() {
                             onChange={onSelectionChange2}
                             getOptionLabel={(x) => x.saleStoreName}
                             getOptionValue={(x) => x.saleStoreId}
-                            isDisabled={sessionState?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
+                            isDisabled={otherSaleStoreList.length > 1 ? false : true}
-                            isClearable={sessionState?.storeLvl === '1' ? true : false}
+                            isClearable={true}
                             value={otherSaleStoreList.filter(function (option) {
                               return option.saleStoreId === otherSelOptions
                             })}
@@ -1688,7 +1829,7 @@ export default function StuffDetail() {
                             <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') ? (
+                              {detailData?.tempFlg === '1' && form.watch('planReqNo') ? (
                                 <button
                                   type="button"
                                   className="product-delete"
@@ -1699,7 +1840,7 @@ export default function StuffDetail() {
                               ) : null}
                             </div>
                             {/* {detailData?.tempFlg === '1' ? ( */}
-                            {objectNo.substring(0, 1) === 'T' ? (
+                            {detailData?.tempFlg === '1' ? (
                               <>
                                 <Button className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
                                   {getMessage('stuff.planReqPopup.title')}
@@ -1790,10 +1931,12 @@ export default function StuffDetail() {
                         </th>
                         <td>
                           <div className="flx-box">
-                            {(sessionState?.storeId === 'T01' && (
+                            {/* {sessionState?.storeId === 'T01' && ( */}
+                            {session?.storeId === 'T01' && (
                               <>
                                 <div className="select-wrap mr5" style={{ width: '567px' }}>
                                   <Select
+                                    menuPlacement={'auto'}
                                     id="long-value-select1"
                                     instanceId="long-value-select1"
                                     className="react-select-custom"
@@ -1804,8 +1947,10 @@ export default function StuffDetail() {
                                     onChange={onSelectionChange}
                                     getOptionLabel={(x) => x.saleStoreName}
                                     getOptionValue={(x) => x.saleStoreId}
-                                    isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                    // isClearable={sessionState?.storeLvl === '1' ? true : false}
-                                    isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                    isClearable={session?.storeLvl === '1' ? true : false}
+                                    // isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                    isDisabled={session?.storeLvl !== '1' ? true : false}
                                     value={saleStoreList.filter(function (option) {
                                       return option.saleStoreId === selOptions
                                     })}
@@ -1821,22 +1966,26 @@ export default function StuffDetail() {
                                   />
                                 </div>
                               </>
-                            )) || (
+                            )}
+                            {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && ( */}
+                            {session?.storeId !== 'T01' && session?.storeLvl === '1' && (
                               <>
                                 <div className="select-wrap mr5" style={{ width: '567px' }}>
                                   <Select
+                                    menuPlacement={'auto'}
                                     id="long-value-select1"
                                     instanceId="long-value-select1"
                                     className="react-select-custom"
                                     classNamePrefix="custom"
                                     placeholder="Select"
-                                    options={saleStoreList}
+                                    options={showSaleStoreList[0]}
                                     onChange={onSelectionChange}
                                     getOptionLabel={(x) => x.saleStoreName}
                                     getOptionValue={(x) => x.saleStoreId}
-                                    isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                    isClearable={false}
-                                    isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                    // isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
-                                    value={saleStoreList.filter(function (option) {
+                                    isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
+                                    value={showSaleStoreList.filter(function (option) {
                                       return option.saleStoreId === selOptions
                                     })}
                                   />
@@ -1852,6 +2001,41 @@ export default function StuffDetail() {
                                 </div>
                               </>
                             )}
+                            {/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && ( */}
+                            {session?.storeId !== 'T01' && session?.storeLvl !== '1' && (
+                              <>
+                                <div className="select-wrap mr5" style={{ width: '567px' }}>
+                                  <Select
+                                    menuPlacement={'auto'}
+                                    id="long-value-select1"
+                                    instanceId="long-value-select1"
+                                    className="react-select-custom"
+                                    classNamePrefix="custom"
+                                    placeholder="Select"
+                                    options={showSaleStoreList[0]}
+                                    onChange={onSelectionChange}
+                                    getOptionLabel={(x) => x.saleStoreName}
+                                    getOptionValue={(x) => x.saleStoreId}
+                                    isClearable={false}
+                                    isDisabled={true}
+                                    value={showSaleStoreList.filter(function (option) {
+                                      if (option.firstAgentYn === 'Y') {
+                                        return option.saleStoreId
+                                      }
+                                    })}
+                                  />
+                                </div>
+                                <div className="input-wrap" style={{ width: '216px' }}>
+                                  <input
+                                    type="text"
+                                    className="input-light"
+                                    value={form.watch('saleStoreId') || ''}
+                                    {...form.register('saleStoreId')}
+                                    readOnly
+                                  />
+                                </div>
+                              </>
+                            )}
                           </div>
                         </td>
                       </tr>
@@ -1878,8 +2062,10 @@ export default function StuffDetail() {
                                 onChange={onSelectionChange2}
                                 getOptionLabel={(x) => x.saleStoreName}
                                 getOptionValue={(x) => x.saleStoreId}
-                                isDisabled={sessionState?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
+                                // isDisabled={sessionState?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
-                                isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                isDisabled={session?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
+                                // isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                isClearable={session?.storeLvl === '1' ? true : false}
                                 value={otherSaleStoreList.filter(function (option) {
                                   return option.saleStoreId === otherSelOptions
                                 })}
@@ -2112,7 +2298,7 @@ export default function StuffDetail() {
                 </div>
               </div>
               {/* {detailData?.tempFlg === '0' ? ( */}
-              {objectNo.substring(0, 1) !== 'T' ? (
+              {detailData?.tempFlg === '0' ? (
                 <>
                   {/* 진짜R 플랜시작 */}
                   <div className="table-box-title-wrap">

src/components/management/StuffSearchCondition.jsx

@@ -1,8 +1,8 @@
 'use client'
 
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useContext } from 'react'
 import { useAxios } from '@/hooks/useAxios'
-import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
 import Select from 'react-select'
 import KO from '@/locales/ko.json'
@@ -15,10 +15,13 @@ import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 import { sessionStore } from '@/store/commonAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { isObjectNotEmpty } from '@/util/common-utils'
-import { searchState } from '@/store/boardAtom'
+
+import { SessionContext } from '@/app/SessionProvider'
+
 export default function StuffSearchCondition() {
+  const { session } = useContext(SessionContext)
   const sessionState = useRecoilValue(sessionStore)
-  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
+  const setAppMessageState = useSetRecoilState(appMessageStore)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { getMessage } = useMessage()
   const ref = useRef()
@@ -74,14 +77,14 @@ export default function StuffSearchCondition() {
 
     if (stuffSearch.code === 'S') {
       setStuffSearch({
-        schObjectNo: objectNo ? objectNo : stuffSearch?.schObjectNo,
+        schObjectNo: objectNo ? objectNo : stuffSearch.schObjectNo,
-        schSaleStoreName: stuffSearch?.schSaleStoreName ? stuffSearch?.schSaleStoreName : saleStoreName,
+        schSaleStoreName: saleStoreName ? saleStoreName : '',
-        schAddress: address ? address : stuffSearch?.schAddress,
+        schAddress: address ? address : '',
-        schObjectName: objectName ? objectName : stuffSearch?.schObjectName,
+        schObjectName: objectName ? objectName : '',
-        schDispCompanyName: dispCompanyName ? dispCompanyName : stuffSearch?.schDispCompanyName,
+        schDispCompanyName: dispCompanyName ? dispCompanyName : '',
         schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : stuffSearch.schSelSaleStoreId,
-        schReceiveUser: receiveUser ? receiveUser : stuffSearch?.schReceiveUser,
+        schReceiveUser: receiveUser ? receiveUser : '',
-        schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
+        schDateType: dateType,
         schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
         schToDt: dayjs(endDate).format('YYYY-MM-DD'),
         code: 'E',
@@ -128,7 +131,8 @@ export default function StuffSearchCondition() {
     setDateType('U')
     setStartDate(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
     setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
-    if (sessionState?.storeId === 'T01') {
+    // if (sessionState?.storeId === 'T01') {
+    if (session?.storeId === 'T01') {
       setSchSelSaleStoreId('')
       handleClear1() //판매대리점선택 자동완성 클리어
       resetStuffRecoil()
@@ -152,18 +156,24 @@ export default function StuffSearchCondition() {
   }
 
   useEffect(() => {
-    if (isObjectNotEmpty(sessionState)) {
+    // if (isObjectNotEmpty(sessionState)) {
+    if (isObjectNotEmpty(session)) {
       // storeId가 T01 이거나 storeLvl이 1차점일때만 판매대리점 선택 활성화
       let url
-      if (sessionState?.storeId === 'T01') {
+      // if (sessionState?.storeId === 'T01') {
+      if (session?.storeId === 'T01') {
         //T01일떄
-        url = `/api/object/saleStore/${sessionState?.storeId}/firstList?userId=${sessionState?.userId}`
+        // url = `/api/object/saleStore/${sessionState?.storeId}/firstList?userId=${sessionState?.userId}`
+        url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
       } else {
-        if (sessionState.storeLvl === '1') {
+        // if (sessionState.storeLvl === '1') {
+        if (session.storeLvl === '1') {
           //T01아닌 1차점일때
-          url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          // url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
         } else {
-          url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          // url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+          url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
         }
       }
 
@@ -177,22 +187,26 @@ export default function StuffSearchCondition() {
           let allList
           let favList
           let otherList
-          if (sessionState?.storeId === 'T01') {
+          // if (sessionState?.storeId === 'T01') {
+          if (session?.storeId === 'T01') {
             allList = res
             allList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
             favList = res.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
             setSchSelSaleStoreList(allList)
             setFavoriteStoreList(favList)
             setShowSaleStoreList(favList)
-            setSchSelSaleStoreId(sessionState?.storeId)
+            // setSchSelSaleStoreId(sessionState?.storeId)
+            setSchSelSaleStoreId(session?.storeId)
             setStuffSearch({
               ...stuffSearch,
               code: 'S',
-              schSelSaleStoreId: sessionState?.storeId,
+              // schSelSaleStoreId: sessionState?.storeId,
+              schSelSaleStoreId: session?.storeId,
             })
 
-            //T01일때 2차 판매점 호출하기
+            //T01일때 2차 판매점 호출하기 디폴트로 1차점을 본인으로 셋팅해서 세션storeId사용
-            url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=0&userId=${sessionState?.userId}`
+            // url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=0&userId=${sessionState?.userId}`
+            url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=0&userId=${session?.userId}`
 
             get({ url: url }).then((res) => {
               if (!isEmptyArray(res)) {
@@ -208,7 +222,8 @@ export default function StuffSearchCondition() {
               }
             })
           } else {
-            if (sessionState?.storeLvl === '1') {
+            // if (sessionState?.storeLvl === '1') {
+            if (session?.storeLvl === '1') {
               allList = res
               favList = res.filter((row) => row.priority !== 'B')
               otherList = res.filter((row) => row.firstAgentYn === 'N')
@@ -225,7 +240,7 @@ export default function StuffSearchCondition() {
                 schSelSaleStoreId: allList[0].saleStoreId,
               })
             } else {
-              //201X112 그냥2차점
+              //10X22, 201X112 그냥2차점
               //2차점인데 34들고있는애 202X217
               setSchSelSaleStoreList(res)
               setFavoriteStoreList(res)
@@ -235,7 +250,8 @@ export default function StuffSearchCondition() {
               setOtherSaleStoreList(otherList)
 
               //선택한 2차점 세션으로 자동셋팅
-              setOtherSaleStoreId(sessionState?.storeId)
+              // setOtherSaleStoreId(sessionState?.storeId)
+              setOtherSaleStoreId(session?.storeId)
               setStuffSearch({
                 ...stuffSearch,
                 code: 'S',
@@ -246,7 +262,8 @@ export default function StuffSearchCondition() {
         }
       })
     }
-  }, [sessionState])
+    // }, [sessionState])
+  }, [session])
 
   //초기화 눌렀을 때 1차판매점 자동완성도..
   const handleClear1 = () => {
@@ -279,7 +296,8 @@ export default function StuffSearchCondition() {
       stuffSearch.schSelSaleStoreId = key.saleStoreId
       //T01아닌 1차점은 본인으로 디폴트셋팅이고 수정할수없어서 여기안옴
       //고른 1차점의 saleStoreId로 2차점 API호출하기
-      let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
+      // let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
+      let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
       let otherList
       get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
@@ -334,6 +352,7 @@ export default function StuffSearchCondition() {
   // 엔터 이벤트
   const handleByOnKeyUp = (e) => {
     if (e.key === 'Enter') {
+      stuffSearch.code = 'E'
       onSubmit()
     }
   }
@@ -381,7 +400,7 @@ export default function StuffSearchCondition() {
                       type="text"
                       ref={objectNoRef}
                       className="input-light"
-                      defaultValue={stuffSearch.code === 'E' || stuffSearch.code === 'M' ? stuffSearch?.schObjectNo : objectNo}
+                      defaultValue={stuffSearch?.schObjectNo ? stuffSearch.schObjectNo : objectNo}
                       onChange={(e) => {
                         setObjectNo(objectNoRef.current.value)
                       }}
@@ -396,7 +415,7 @@ export default function StuffSearchCondition() {
                       type="text"
                       ref={saleStoreNameRef}
                       className="input-light"
-                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schSaleStoreName : saleStoreName}
+                      defaultValue={stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName}
                       onChange={(e) => {
                         setSaleStoreName(saleStoreNameRef.current.value)
                       }}
@@ -411,7 +430,7 @@ export default function StuffSearchCondition() {
                       type="text"
                       ref={addressRef}
                       className="input-light"
-                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schAddress : address}
+                      defaultValue={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
                       onChange={(e) => {
                         setAddress(addressRef.current.value)
                       }}
@@ -426,7 +445,7 @@ export default function StuffSearchCondition() {
                       type="text"
                       ref={dispCompanyNameRef}
                       className="input-light"
-                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schDispCompanyName : dispCompanyName}
+                      defaultValue={stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName}
                       onChange={(e) => {
                         setDispCompanyName(dispCompanyNameRef.current.value)
                       }}
@@ -443,7 +462,7 @@ export default function StuffSearchCondition() {
                       type="text"
                       ref={objectNameRef}
                       className="input-light"
-                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schObjectName : objectName}
+                      defaultValue={stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName}
                       onChange={(e) => {
                         setobjectName(objectNameRef.current.value)
                       }}
@@ -458,7 +477,7 @@ export default function StuffSearchCondition() {
                       type="text"
                       className="input-light"
                       ref={receiveUserRef}
-                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schReceiveUser : receiveUser}
+                      defaultValue={stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser}
                       onChange={(e) => {
                         setReceiveUser(receiveUserRef.current.value)
                       }}
@@ -470,7 +489,7 @@ export default function StuffSearchCondition() {
                 <td colSpan={3}>
                   <div className="form-flex-wrap">
                     <div className="select-wrap mr5" style={{ flex: 1 }}>
-                      {sessionState?.storeId === 'T01' && (
+                      {session?.storeId === 'T01' && (
                         <Select
                           id="long-value-select1"
                           instanceId="long-value-select1"
@@ -483,7 +502,7 @@ export default function StuffSearchCondition() {
                           onChange={onSelectionChange}
                           getOptionLabel={(x) => x.saleStoreName}
                           getOptionValue={(x) => x.saleStoreId}
-                          value={showSaleStoreList.filter(function (option) {
+                          value={schSelSaleStoreList.filter(function (option) {
                             if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
                               return false
                             } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
@@ -498,11 +517,11 @@ export default function StuffSearchCondition() {
                               }
                             }
                           })}
-                          isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
+                          isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
                           isClearable={true}
                         />
                       )}
-                      {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && (
+                      {session?.storeId !== 'T01' && session?.storeLvl === '1' && (
                         <Select
                           id="long-value-select1"
                           instanceId="long-value-select1"
@@ -529,11 +548,11 @@ export default function StuffSearchCondition() {
                               }
                             }
                           })}
-                          isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
+                          isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
                           isClearable={false}
                         />
                       )}
-                      {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && (
+                      {session?.storeId !== 'T01' && session?.storeLvl !== '1' && (
                         <Select
                           id="long-value-select1"
                           instanceId="long-value-select1"
@@ -597,11 +616,11 @@ export default function StuffSearchCondition() {
                           type="radio"
                           name="radio_ptype"
                           id="radio_u"
-                          checked={stuffSearch?.schDateType === 'U' ? true : false}
+                          checked={dateType === 'U' ? true : false}
                           value={'U'}
                           onChange={(e) => {
                             setDateType(e.target.value)
-                            setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
+                            //setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
                           }}
                         />
                         <label htmlFor="radio_u">{getMessage('stuff.search.schDateTypeU')}</label>
@@ -611,11 +630,11 @@ export default function StuffSearchCondition() {
                           type="radio"
                           name="radio_ptype"
                           id="radio_r"
-                          checked={stuffSearch?.schDateType === 'R' ? true : false}
+                          checked={dateType === 'R' ? true : false}
                           value={'R'}
                           onChange={(e) => {
                             setDateType(e.target.value)
-                            setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
+                            //setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
                           }}
                         />
                         <label htmlFor="radio_r">{getMessage('stuff.search.schDateTypeR')}</label>

src/components/management/StuffSubHeader.jsx

@@ -88,7 +88,7 @@ export default function StuffSubHeader({ type }) {
                 <li className="title-item">
                   <a className="sub-header-title" onClick={moveFloorPlan}>
                     <span className="icon drawing"></span>
-                    {getMessage('plan.menu.plan.drawing')}
+                    {getMessage('stuff.temp.subTitle2')}
                   </a>
                 </li>
               </ul>

src/hooks/common/useCommonUtils.js

@@ -786,6 +786,15 @@ export function useCommonUtils() {
       canvas?.renderAll()
     }
   }
+
+  const deleteOuterLineObject = () => {
+    const selectedOuterLine = canvas.getActiveObject()
+    if (selectedOuterLine && selectedOuterLine.name === 'outerLine') {
+      canvas.remove(selectedOuterLine)
+      canvas.renderAll()
+    }
+  }
+
   return {
     commonFunctions,
     dimensionSettings,
@@ -796,5 +805,6 @@ export function useCommonUtils() {
     copyObject,
     editText,
     changeDimensionExtendLine,
+    deleteOuterLineObject,
   }
 }

src/hooks/object/useObjectBatch.js

@@ -5,7 +5,7 @@ import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
-import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, triangleToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
+import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, setSurfaceShapePattern, triangleToPolygon } from '@/util/canvas-util'
 import { useSwal } from '@/hooks/useSwal'
 import * as turf from '@turf/turf'
 import { usePolygon } from '@/hooks/usePolygon'
@@ -13,7 +13,7 @@ import { QPolygon } from '@/components/fabric/QPolygon'
 import { v4 as uuidv4 } from 'uuid'
 import { fontSelector } from '@/store/fontAtom'
 
-export function useObjectBatch() {
+export function useObjectBatch({ isHidden, setIsHidden }) {
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
   const { addCanvasMouseEventListener, initEvent } = useEvent()
@@ -64,12 +64,12 @@ export function useObjectBatch() {
     const selectedType = objectPlacement.typeRef.current.find((radio) => radio.checked).value
     const isCrossChecked = buttonAct === 1 ? objectPlacement.isCrossRef.current.checked : false
     const objName = buttonAct === 1 ? BATCH_TYPE.OPENING : BATCH_TYPE.SHADOW
-    const objTempName = buttonAct === 1 ? BATCH_TYPE.OPENING_TEMP : BATCH_TYPE.SHADOW_TEMP
 
+    const objTempName = buttonAct === 1 ? BATCH_TYPE.OPENING_TEMP : BATCH_TYPE.SHADOW_TEMP
     let rect, isDown, origX, origY
     let selectedSurface
-
     //프리입력
+    console.log('useObjectBatch', isHidden)
     if (selectedType === INPUT_TYPE.FREE) {
       addCanvasMouseEventListener('mouse:down', (e) => {
         isDown = true
@@ -84,6 +84,7 @@ export function useObjectBatch() {
         if (!selectedSurface) {
           swalFire({ text: '지붕안에 그려야해요', icon: 'error' })
           initEvent() //이벤트 초기화
+          if (setIsHidden) setIsHidden(false)
           return
         }
 
@@ -160,6 +161,8 @@ export function useObjectBatch() {
           rect.set({ name: objName })
           rect.setCoords()
           initEvent()
+
+          if (setIsHidden) setIsHidden(false)
         }
       })
     } else if (selectedType === INPUT_TYPE.DIMENSION) {
@@ -239,6 +242,7 @@ export function useObjectBatch() {
           rect.set({ name: objName })
           rect.setCoords()
           initEvent()
+          if (setIsHidden) setIsHidden(false)
         }
       })
     }
@@ -456,6 +460,7 @@ export function useObjectBatch() {
           isDown = false
           initEvent()
           dbClickEvent()
+          if (setIsHidden) setIsHidden(false)
         }
       })
     } else if (buttonAct === 4) {
@@ -631,7 +636,9 @@ export function useObjectBatch() {
 
           isDown = false
           initEvent()
+
           dbClickEvent()
+          if (setIsHidden) setIsHidden(false)
         }
       })
     }
@@ -649,6 +656,7 @@ export function useObjectBatch() {
       )
     canvas?.remove(...deleteTarget)
     initEvent() //이벤트 초기화
+    if (setIsHidden) setIsHidden(false)
   }
 
   const splitDormerTriangle = (triangle, direction) => {
@@ -747,28 +755,40 @@ export function useObjectBatch() {
       leftPoints = [
         { x: points[0].x, y: points[0].y },
         { x: points[0].x - (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
-        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
+        {
+          x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y),
+          y: points[0].y - (points[0].x - points[1].x),
+        },
         { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
       ]
 
       rightPoints = [
         { x: points[0].x, y: points[0].y },
         { x: points[0].x - (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
-        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
+        {
+          x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y),
+          y: points[0].y + (points[0].x - points[1].x),
+        },
         { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
       ]
     } else if (direction === 'right') {
       leftPoints = [
         { x: points[0].x, y: points[0].y },
         { x: points[0].x + (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
-        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
+        {
+          x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y),
+          y: points[0].y + (points[0].x - points[1].x),
+        },
         { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
       ]
 
       rightPoints = [
         { x: points[0].x, y: points[0].y },
         { x: points[0].x + (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
-        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
+        {
+          x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y),
+          y: points[0].y - (points[0].x - points[1].x),
+        },
         { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
       ]
     }

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -22,6 +22,7 @@ import { useSwal } from '@/hooks/useSwal'
 import { booleanPointInPolygon } from '@turf/turf'
 import { usePopup } from '@/hooks/usePopup'
 import { calculateAngle } from '@/util/qpolygon-utils'
+import { QPolygon } from '@/components/fabric/QPolygon'
 
 // 보조선 작성
 export function useAuxiliaryDrawing(id) {
@@ -561,16 +562,107 @@ export function useAuxiliaryDrawing(id) {
     }
 
     const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
-
+    /*const allLines = [...auxiliaryLines]
-    const allLines = [...auxiliaryLines]
 
     roofBases.forEach((roofBase) => {
-      roofBase.lines.forEach((line) => {
+      allLines.push(...roofBase.lines)
-        allLines.push(line)
+    })*/
-      })
+
+    const innerLines = [...auxiliaryLines]
+    const roofLines = []
+
+    roofBases.forEach((roofBase) => {
+      innerLines.push(...roofBase.innerLines)
+      roofLines.push(...roofBase.lines)
     })
 
     auxiliaryLines.forEach((line1) => {
+      let interSectionPointsWithRoofLines = []
+
+      //지붕선과 만나는 점을 찾는다.
+      roofLines.forEach((line2) => {
+        const intersectionPoint = calculateIntersection(line1, line2)
+        if (!intersectionPoint) {
+          return
+        }
+        // 기존 점과 겹치는지 확인
+        if (interSectionPointsWithRoofLines.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
+          return
+        }
+
+        interSectionPointsWithRoofLines.push(intersectionPoint)
+      })
+
+      //지붕선과 만나는 점이 두개일 경우 넘친 보조선을 잘라준다 (케라바로 만든 마루)
+      if (interSectionPointsWithRoofLines.length === 2) {
+        const newLine = addLine(
+          [
+            interSectionPointsWithRoofLines[0].x,
+            interSectionPointsWithRoofLines[0].y,
+            interSectionPointsWithRoofLines[1].x,
+            interSectionPointsWithRoofLines[1].y,
+          ],
+          {
+            stroke: 'black',
+            strokeWidth: 1,
+            selectable: false,
+            name: 'auxiliaryLine',
+            isFixed: true,
+          },
+        )
+        lineHistory.current.push(newLine)
+        removeLine(line1)
+        intersectionPoints.current.push(...interSectionPointsWithRoofLines)
+        return
+      }
+
+      //보조선과 만나는 점을 찾는다.
+      innerLines.forEach((line2) => {
+        if (line1 === line2) {
+          return
+        }
+        const intersectionPoint = calculateIntersection(line1, line2)
+        if (!intersectionPoint) {
+          return
+        }
+        roofAdsorptionPoints.current.push(intersectionPoint)
+        intersectionPoints.current.push(intersectionPoint)
+
+        const distance1 = distanceBetweenPoints({ x: line1.x1, y: line1.y1 }, intersectionPoint)
+        const distance2 = distanceBetweenPoints({ x: line1.x2, y: line1.y2 }, intersectionPoint)
+
+        if (distance1 === 0 || distance2 === 0) {
+          return
+        }
+        //historyLine에서 기존 line을 제거한다.
+        lineHistory.current = lineHistory.current.filter((history) => history !== line1)
+
+        let newLine
+
+        if (distance1 >= distance2) {
+          newLine = addLine([line1.x1, line1.y1, intersectionPoint.x, intersectionPoint.y], {
+            stroke: 'black',
+            strokeWidth: 1,
+            selectable: false,
+            name: 'auxiliaryLine',
+            isFixed: true,
+            intersectionPoint,
+          })
+        } else {
+          newLine = addLine([line1.x2, line1.y2, intersectionPoint.x, intersectionPoint.y], {
+            stroke: 'black',
+            strokeWidth: 1,
+            selectable: false,
+            name: 'auxiliaryLine',
+            isFixed: true,
+            intersectionPoint,
+          })
+        }
+        lineHistory.current.push(newLine)
+        removeLine(line1)
+      })
+
+      /*auxiliaryLines.forEach((line1) => {
         allLines.forEach((line2) => {
           if (line1 === line2) {
             return
@@ -615,6 +707,7 @@ export function useAuxiliaryDrawing(id) {
           lineHistory.current.push(newLine)
           removeLine(line1)
         })
+      })*/
     })
     addCanvasMouseEventListener('mouse:move', mouseMove)
   }
@@ -650,15 +743,38 @@ export function useAuxiliaryDrawing(id) {
     }
 
     const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
-    const innerLines = [...lineHistory.current]
+
+    //lineHistory.current에 있는 선들 중 startPoint와 endPoint가 겹치는 line은 제거
+    // 겹치는 선 하나는 canvas에서 제거한다.
+
+    const tempLines = [...lineHistory.current]
+    lineHistory.current = []
+    tempLines.forEach((line) => {
+      if (
+        lineHistory.current.some(
+          (history) =>
+            JSON.stringify(history.startPoint) === JSON.stringify(line.startPoint) &&
+            JSON.stringify(history.endPoint) === JSON.stringify(line.endPoint),
+        )
+      ) {
+        canvas.remove(line)
+        return
+      }
+
+      lineHistory.current.push(line)
+    })
+
+    const innerLines = lineHistory.current
 
     roofBases.forEach((roofBase) => {
+      const tempPolygonPoints = [...roofBase.points].map((obj) => {
+        return { x: Math.round(obj.x), y: Math.round(obj.y) }
+      })
       const roofInnerLines = innerLines.filter((line) => {
-        const turfPolygon = polygonToTurfPolygon(roofBase)
+        const inPolygon1 =
-
+          tempPolygonPoints.some((point) => point.x === line.x1 && point.y === line.y1) || roofBase.inPolygon({ x: line.x1, y: line.y1 })
-        // innerLines의 두 점이 모두 polygon 안에 있는지 확인
+        const inPolygon2 =
-        const inPolygon1 = booleanPointInPolygon([line.x1, line.y1], turfPolygon)
+          tempPolygonPoints.some((point) => point.x === line.x2 && point.y === line.y2) || roofBase.inPolygon({ x: line.x2, y: line.y2 })
-        const inPolygon2 = booleanPointInPolygon([line.x2, line.y2], turfPolygon)
 
         if (inPolygon1 && inPolygon2) {
           line.attributes = { ...line.attributes, roofId: roofBase.id }
@@ -667,6 +783,8 @@ export function useAuxiliaryDrawing(id) {
       })
 
       roofBase.innerLines = [...roofInnerLines]
+
+      canvas.renderAll()
     })
 
     closePopup(id)

src/hooks/roofcover/useMovementSetting.js

@@ -70,9 +70,7 @@ export function useMovementSetting(id) {
       updownEvent(e)
     }
   }
-  const flowLineEvent = (e) => {
+  const flowLineEvent = (e) => {}
-    console.log('flow')
-  }
 
   const updownEvent = (e) => {
     const target = canvas.getActiveObject()
@@ -113,18 +111,24 @@ export function useMovementSetting(id) {
     canvas?.renderAll()
   }
 
-  const getOnlyDecimal = function (_number, _length) {
-    let result
-
-    result = _number % 1
-
-    result = Number(result.toFixed(_length))
-
-    return result * 10
-  }
-
   const handleSave = () => {
-    closePopup(id)
+    if (type === TYPE.FLOW_LINE) {
+      // 동선이동
+      if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked) {
+        // 높이 변경: 아래, 왼쪽 체크
+      } else {
+        // 높이 변경: 위, 오른쪽 체크
+      }
+    } else {
+      // 형 올림내림
+      if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
+        // 자릿수를 올리다 체크
+        const length = Number(UP_DOWN_REF.UP_INPUT_REF.current.value)
+      } else {
+        // 자릿수를 내리다 체크
+        const length = Number(UP_DOWN_REF.DOWN_INPUT_REF.current.value)
+      }
+    }
   }
 
   return {

src/hooks/useContextMenu.js

@@ -10,7 +10,7 @@ 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 { contextPopupPositionState, contextPopupState } 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'
@@ -24,7 +24,7 @@ import { useCommonUtils } from './common/useCommonUtils'
 import { useObjectBatch } from './object/useObjectBatch'
 import { useMessage } from '@/hooks/useMessage'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
-import { contextMenuState } from '@/store/contextMenu'
+import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
 import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
 import PanelEdit from '@/components/floor-plan/modal/module/PanelEdit'
 import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
@@ -37,21 +37,19 @@ import CircuitNumberEdit from '@/components/floor-plan/modal/module/CircuitNumbe
 export function useContextMenu() {
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
   const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
-  const [contextMenu, setContextMenu] = useState([[]]) // 메뉴.object 별 context menu
+  const [contextMenu, setContextMenu] = useRecoilState(contextMenuListState) // 메뉴.object 별 context menu
-  const [currentContextMenu, setCurrentContextMenu] = useState(null) // 선택한 contextMenu
+  const [currentContextMenu, setCurrentContextMenu] = useRecoilState(contextPopupState) // 선택한 contextMenu
   const currentObject = useRecoilValue(currentObjectState)
   const { getMessage } = useMessage()
   const { addPopup } = usePopup()
   const [popupId, setPopupId] = useState(uuidv4())
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
+  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine, deleteOuterLineObject } = useCommonUtils()
   const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
   const [cell, setCell] = useState(null)
   const [column, setColumn] = useState(null)
   const { handleZoomClear } = useCanvasEvent()
 
-  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils()
-  const { deleteObjectBatch } = useObjectBatch()
-
   const currentMenuSetting = () => {
     switch (currentMenu) {
       case MENU.PLAN_DRAWING:
@@ -119,6 +117,7 @@ export function useContextMenu() {
             {
               id: 'wallLineRemove',
               name: getMessage('contextmenu.wallline.remove'),
+              fn: () => deleteOuterLineObject(),
             },
             {
               id: 'imageSizeEdit',
@@ -224,9 +223,10 @@ export function useContextMenu() {
     if (menu?.fn) {
       menu.fn()
     }
+
     setContextPopupPosition({
-      x: e?.clientX,
+      x: window.innerWidth / 2,
-      y: e?.clientY,
+      y: 180,
     })
     setCurrentContextMenu(menu)
     setQContextMenu({ ...qContextMenu, visible: false })

src/hooks/usePopup.js

@@ -1,14 +1,15 @@
 import { useRecoilState } from 'recoil'
-import { popupState } from '@/store/popupAtom'
+import { contextPopupState, popupState } from '@/store/popupAtom'
 
 export function usePopup() {
   const [popup, setPopup] = useRecoilState(popupState)
-
+  const [contextMenuPopup, setContextMenuPopup] = useRecoilState(contextPopupState)
   const addPopup = (id, depth, component) => {
     setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
   }
 
   const closePopup = (id) => {
+    if (contextMenuPopup) setContextMenuPopup(null)
     setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
   }
 

src/locales/ja.json

@@ -13,7 +13,7 @@
   "header.go": "移動",
   "header.online.warranty.system": "オンライン保証シ",
   "header.stem": "ステム",
-  "plan.menu.plan.drawing": "도면작성",
+  "plan.menu.plan.drawing": "물건정보(JA)",
   "plan.menu.placement.surface.initial.setting": "配置面 初期設定",
   "modal.placement.initial.setting.plan.drawing.size.stuff": "寸法入力による物品作成",
   "modal.placement.initial.setting.plan.": "図面の作成方法",
@@ -293,10 +293,14 @@
   "contextmenu.select.move": "선택・이동(JA)",
   "contextmenu.wallline.remove": "외벽선 삭제(JA)",
   "contextmenu.size.edit": "サイズ変更",
+  "modal.auxiliary.size.edit": "補助線サイズ変更",
+  "modal.auxiliary.size.edit.point": "支店",
   "contextmenu.auxiliary.move": "補助線の移動",
   "modal.auxiliary.move": "補助線の移動",
   "modal.auxiliary.move.info": "移動する方向を入力してください",
-  "contextmenu.auxiliary.copy": "보조선 복사(JA)",
+  "contextmenu.auxiliary.copy": "補助線のコピー",
+  "modal.auxiliary.copy": "補助線のコピー",
+  "modal.auxiliary.copy.info": "コピーする方向を入力してください",
   "contextmenu.auxiliary.remove": "보조선 삭제(JA)",
   "contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선(JA)",
   "contextmenu.auxiliary.cut": "보조선 절삭(JA)",
@@ -582,6 +586,7 @@
   "stuff.addressPopup.btn2": "住所適用",
   "stuff.planReqPopup.title": "設計依頼のインポート",
   "stuff.temp.subTitle": "商品情報",
+  "stuff.temp.subTitle2": "作図",
   "stuff.detail.header.message1": "存在しないものです。",
   "stuff.detail.header.message2": "商品番号がコピーされました。",
   "stuff.detail.header.message3": "存在しないものです。",

src/locales/ko.json

@@ -13,7 +13,7 @@
   "header.go": "이동",
   "header.online.warranty.system": "온라인 보증 시스템",
   "header.stem": "Stem",
-  "plan.menu.plan.drawing": "도면작성",
+  "plan.menu.plan.drawing": "물건정보",
   "plan.menu.placement.surface.initial.setting": "배치면 초기 설정",
   "modal.placement.initial.setting.plan.drawing": "도면 작성방법",
   "modal.placement.initial.setting.plan.drawing.size.stuff": "치수 입력에 의한 물건 작성",
@@ -292,16 +292,21 @@
   "margin": "간격",
   "contextmenu.roof.material.placement": "지붕재 배치",
   "contextmenu.roof.material.edit": "지붕재 변경",
+  "modal.roof.material.edit": "지붕재 변경",
   "contextmenu.roof.material.remove": "지붕재 삭제",
   "contextmenu.roof.material.remove.all": "지붕재 전체 삭제",
   "contextmenu.dormer.offset": "도머 오프셋",
   "contextmenu.select.move": "선택・이동",
   "contextmenu.wallline.remove": "외벽선 삭제",
   "contextmenu.size.edit": "사이즈 변경",
+  "modal.auxiliary.size.edit": "보조선 사이즈 변경",
+  "modal.auxiliary.size.edit.point": "지점",
   "contextmenu.auxiliary.move": "보조선 이동",
   "modal.auxiliary.move": "보조선 이동",
   "modal.auxiliary.move.info": "이동할 방향을 입력해주세요.",
   "contextmenu.auxiliary.copy": "보조선 복사",
+  "modal.auxiliary.copy": "보조선 복사",
+  "modal.auxiliary.copy.info": "복사할 방향을 입력해주세요.",
   "contextmenu.auxiliary.remove": "보조선 삭제",
   "contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선",
   "contextmenu.auxiliary.cut": "보조선 절삭",
@@ -587,6 +592,7 @@
   "stuff.addressPopup.btn2": "주소적용",
   "stuff.planReqPopup.title": "설계의뢰 불러오기",
   "stuff.temp.subTitle": "물건정보",
+  "stuff.temp.subTitle2": "도면작성",
   "stuff.detail.header.message1": "존재하지 않는 물건입니다.",
   "stuff.detail.header.message2": "물건번호가 복사되었습니다.",
   "stuff.detail.header.message3": "물건번호 복사에 실패했습니다.",

src/store/contextMenu.js

@@ -9,3 +9,9 @@ export const contextMenuState = atom({
   },
   dangerouslyAllowMutability: true,
 })
+
+export const contextMenuListState = atom({
+  key: 'contextMenuListState',
+  default: [[]],
+  dangerouslyAllowMutability: true,
+})

src/store/popupAtom.js

@@ -12,6 +12,12 @@ export const popupState = atom({
   dangerouslyAllowMutability: true,
 })
 
+export const contextPopupState = atom({
+  key: 'contextPopupState',
+  default: null,
+  dangerouslyAllowMutability: true,
+})
+
 export const contextPopupPositionState = atom({
   key: 'contextPopupPositionState',
   default: {

src/styles/_contents.scss

@@ -26,14 +26,14 @@
     min-width: 1280px;
     padding-bottom: 0;
     background-color: #383838;
-  transition: padding 0.17s ease-in-out;
+    transition: padding .17s ease-in-out;
     z-index: 999;
     .canvas-menu-inner{
         position: relative;
         display: flex;
         align-items: center;
         padding: 0 40px 0 20px;
-    background-color: #2c2c2c;
+        background-color: #2C2C2C;
         height: 46.8px;
         z-index: 999;
         .canvas-menu-list{
@@ -53,7 +53,7 @@
                     font-weight: 600;
                     padding: 15px 20px;
                     opacity: 0.55;
-          transition: all 0.17s ease-in-out;
+                    transition: all .17s ease-in-out;
                     .menu-icon{
                         display: block;
                         width: 14px;
@@ -62,27 +62,13 @@
                         background-position: center;
                         background-size: contain;
                         margin-right: 10px;
-            &.con00 {
+                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
-              background-image: url(/static/images/canvas/menu_icon00.svg);
+                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
-            }
+                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
-            &.con01 {
+                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
-              background-image: url(/static/images/canvas/menu_icon01.svg);
+                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
-            }
+                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
-            &.con02 {
+                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
-              background-image: url(/static/images/canvas/menu_icon02.svg);
-            }
-            &.con03 {
-              background-image: url(/static/images/canvas/menu_icon03.svg);
-            }
-            &.con04 {
-              background-image: url(/static/images/canvas/menu_icon04.svg);
-            }
-            &.con05 {
-              background-image: url(/static/images/canvas/menu_icon05.svg);
-            }
-            &.con06 {
-              background-image: url(/static/images/canvas/menu_icon06.svg);
-            }
                     }
                 }
                 &.active{
@@ -99,7 +85,7 @@
             margin-left: auto;
             .select-box{
                 width: 124px;
-        margin-right: 5px;
+                margin: 0 5px;
                 height: 30px;
                 > div{
                     width: 100%;
@@ -114,43 +100,25 @@
                     width: 30px;
                     height: 30px;
                     border-radius: 2px;
-          background-color: #3d3d3d;
+                    background-color: #3D3D3D;
                     background-position: center;
                     background-repeat: no-repeat;
                     background-size: 15px 15px;
-          transition: all 0.17s ease-in-out;
+                    transition: all .17s ease-in-out;
-          &.btn01 {
+                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
-            background-image: url(../../public/static/images/canvas/side_icon03.svg);
+                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
-          }
+                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
-          &.btn02 {
+                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
-            background-image: url(../../public/static/images/canvas/side_icon02.svg);
+                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
-          }
+                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
-          &.btn03 {
+                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
-            background-image: url(../../public/static/images/canvas/side_icon01.svg);
+                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
-          }
+                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
-          &.btn04 {
-            background-image: url(../../public/static/images/canvas/side_icon04.svg);
-          }
-          &.btn05 {
-            background-image: url(../../public/static/images/canvas/side_icon05.svg);
-          }
-          &.btn06 {
-            background-image: url(../../public/static/images/canvas/side_icon06.svg);
-          }
-          &.btn07 {
-            background-image: url(../../public/static/images/canvas/side_icon07.svg);
-          }
-          &.btn08 {
-            background-image: url(../../public/static/images/canvas/side_icon08.svg);
-          }
-          &.btn09 {
-            background-image: url(../../public/static/images/canvas/side_icon09.svg);
-          }
                     &:hover{
-            background-color: #1083e3;
+                        background-color: #1083E3;
                     }
                     &.active{
-            background-color: #1083e3;
+                        background-color: #1083E3;
                     }
                 }
             }
@@ -166,18 +134,10 @@
                         background-repeat: no-repeat;
                         background-position: center;
                         background-size: contain;
-            &.ico01 {
+                        &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
-              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
+                        &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
-            }
+                        &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
-            &.ico02 {
+                        &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
-              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
-            }
-            &.ico03 {
-              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
-            }
-            &.ico04 {
-              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
-            }
                     }
                     .name{
                         font-size: 12px;
@@ -194,7 +154,7 @@
                 display: flex;
                 min-width: 170px;
                 height: 28px;
-        margin: 0 5px;
+                margin-right: 5px;
                 border-radius: 2px;
                 background: #373737;
                 line-height: 28px;
@@ -207,16 +167,16 @@
                 button{
                     margin-left: auto;
                     height: 100%;
-          background-color: #4b4b4b;
+                    background-color: #4B4B4B;
                     font-size: 13px;
                     font-weight: 400;
                     color: #fff;
                     padding: 0 7.5px;
-          transition: all 0.17s ease-in-out;
+                    transition: all .17s ease-in-out;
                 }
                 &.on{
                     button{
-            background-color: #1083e3;
+                        background-color: #1083E3;
                     }
                 }
             }
@@ -225,7 +185,7 @@
                 align-items: center;
                 justify-content: center;
                 gap: 10px;
-        background-color: #3d3d3d;
+                background-color: #3D3D3D;
                 border-radius: 2px;
                 width: 100px;
                 height: 30px;
@@ -258,7 +218,7 @@
         background-color: #383838;
         width: 100%;
         height: 50px;
-    transition: all 0.17s ease-in-out;
+        transition: all .17s ease-in-out;
         .canvas-depth2-inner{
             display: flex;
             align-items: center;
@@ -310,7 +270,7 @@
                     align-items: center;
                     margin-right: 34px;
                     height: 100%;
-          transition: all 0.17s ease-in-out;
+                    transition: all .17s ease-in-out;
                     button{
                         position: relative;
                         font-size: 12px;
@@ -350,7 +310,7 @@
 // canvas-layout
 .canvas-content{
     padding-top: 46.8px;
-  transition: all 0.17s ease-in-out;
+    transition: all .17s ease-in-out;
     .canvas-frame{
         height: calc(100vh - 129.3px);
     }
@@ -368,11 +328,11 @@
         top: 92.8px;
         left: 0;
         display: flex;
-    background-color: #1c1c1c;
+        background-color: #1C1C1C;
         border-top: 1px solid #000;
         width: 100%;
         min-width: 1280px;
-    transition: all 0.17s ease-in-out;
+        transition: all .17s ease-in-out;
         z-index: 99;
         &.active{
             top: calc(92.8px + 50px);
@@ -388,14 +348,14 @@
                 padding: 9.6px 20px;
                 border-right:1px solid #000;
                 min-width: 0;
-        transition: all 0.17s ease-in-out;
+                transition: all .17s ease-in-out;
                 span{
                     display: flex;
                     align-items: center;
                     width: 100%;
                     font-size: 12px;
                     font-family: 'Pretendard', sans-serif;
-          color: #aaa;
+                    color: #AAA;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     overflow: hidden;
@@ -433,9 +393,9 @@
             justify-content: center;
             width: 45px;
             padding: 13.5px 0;
-      background-color: #1c1c1c;
+            background-color: #1C1C1C;
             border-right: 1px solid #000;
-      transition: all 0.17s ease-in-out;
+            transition: all .17s ease-in-out;
             span{
                 display: block;
                 width: 9px;
@@ -453,9 +413,9 @@
 .canvas-frame{
     position: relative;
     // height: calc(100% - 36.5px);
-  background-color: #f4f4f7;
+    background-color: #F4F4F7;
     overflow: auto;
-  transition: all 0.17s ease-in-out;
+    transition: all .17s ease-in-out;
     // &::-webkit-scrollbar {
     //     width: 10px;
     //     height: 10px;
@@ -490,7 +450,7 @@
     min-width: 1280px;
     height: 46px;
     border-bottom: 1px solid #000;
-  background: #2c2c2c;
+    background: #2C2C2C;
     z-index: 999;
     .sub-header-inner{
         display: flex;
@@ -513,9 +473,7 @@
                         background-repeat: no-repeat;
                         background-position: center;
                         background-size: cover;
-            &.drawing {
+                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
-              background-image: url(../../public/static/images/main/drawing_icon.svg);
-            }
                     }
                 }
                 &:after{
@@ -526,7 +484,7 @@
                     transform: translateY(-50%);
                     width: 1px;
                     height: 16px;
-          background-color: #d9d9d9;
+                    background-color: #D9D9D9;
                 }
                 &:first-child{
                     padding-left: 0;
@@ -556,7 +514,7 @@
                 span{
                     display: flex;
                     font-size: 12px;
-          color: #aaa;
+                    color: #AAA;
                     font-weight: normal;
                     cursor: default;
                 }
@@ -614,8 +572,8 @@
 .sub-table-box{
     padding: 20px;
     border-radius: 6px; 
-  border: 1px solid #e9eaed;
+    border: 1px solid #E9EAED;
-  background: #fff;
+    background: #FFF;
     box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
     .table-box-title-wrap{
         display: flex;
@@ -638,7 +596,7 @@
                 position: relative;
                 font-size: 15px;
                 font-weight: 600;
-        color: #1083e3;
+                color: #1083E3;
                 padding-left: 10px;
                 &::before{
                     content: '';
@@ -648,7 +606,7 @@
                     transform: translateY(-50%);
                     width: 1px;
                     height: 11px;
-          background-color: #d9d9d9;
+                    background-color: #D9D9D9;
                 }
             }
             .option{
@@ -669,7 +627,7 @@
                     span{
                         font-weight: 600;
                         &.red{
-              color: #e23d70;
+                            color: #E23D70;
                         }
                     }
                     &:after{
@@ -680,17 +638,10 @@
                         transform: translateY(-50%);
                         width: 1px;
                         height: 11px;
-            background-color: #d9d9d9;
+                        background-color: #D9D9D9;
-          }
-          &:first-child {
-            padding-left: 0;
-          }
-          &:last-child {
-            padding-right: 0;
-            &::after {
-              display: none;
-            }
                     }
+                    &:first-child{padding-left: 0;}
+                    &:last-child{padding-right: 0;&::after{display: none;}}
                 }
             }
         }
@@ -783,7 +734,7 @@
             width: 105px;
             height: 30px;
             line-height: 30px;
-      background-color: #f4f4f7;
+            background-color: #F4F4F7;
             border-radius: 100px;
             text-align: center;
             font-size: 13px;
@@ -798,12 +749,12 @@
             &.blue{
                 font-size: 16px;
                 font-weight: 700;
-        color: #1083e3;
+                color: #1083E3;
             }
             &.red{
                 font-size: 16px;
                 font-weight: 700;
-        color: #d72a2a;
+                color: #D72A2A;
             }
         }
     }
@@ -817,11 +768,11 @@
     padding: 10px;
     .btn-area{
         padding-bottom: 15px;
-    border-bottom: 1px solid #ecf0f4;
+        border-bottom: 1px solid #ECF0F4;
         .file-upload{
             display: inline-block;
             height: 30px;
-      background-color: #94a0ad;
+            background-color: #94A0AD;
             padding: 0 10px;
             border-radius: 2px;
             font-size: 13px;
@@ -829,9 +780,9 @@
             color: #fff;
             font-weight: 500;
             cursor: pointer;
-      transition: background 0.15s ease-in-out;
+            transition: background .15s ease-in-out;
             &:hover{
-        background-color: #607f9a;
+                background-color: #607F9A;
             }
         }
     }
@@ -855,7 +806,7 @@
             span{
                 position: relative;
                 font-size: 13px;
-        color: #45576f;
+                color: #45576F;
                 font-weight: 400;
                 white-space: nowrap;
                 padding-right: 55px;
@@ -880,13 +831,13 @@
 .special-note-check-wrap{
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-  border: 1px solid #ecf0f4;
+    border: 1px solid #ECF0F4;
     border-radius: 3px;
     margin-bottom: 30px;
     .special-note-check-item{
         padding: 14px 10px;
-    border-right: 1px solid #ecf0f4;
+        border-right: 1px solid #ECF0F4;
-    border-top: 1px solid #ecf0f4;
+        border-top: 1px solid #ECF0F4;
         &:nth-child(5n){
             border-right: none;
         }
@@ -894,13 +845,13 @@
             border-top: none;
         }
         &.act{
-      background-color: #f7f9fa;
+            background-color: #F7F9FA;
         }
     }
 }
 
 .calculation-estimate{
-  border: 1px solid #ecf0f4;
+    border: 1px solid #ECF0F4;
     border-radius: 3px;
     padding: 24px;
     max-height: 350px;
@@ -914,13 +865,13 @@
         dt{
             font-size: 13px;
             font-weight: 600;
-      color: #1083e3;
+            color: #1083E3;
             margin-bottom: 15px;
         }
         dd{
             font-size: 12px;
             font-weight: 400;
-      color: #45576f;
+            color: #45576F;
             margin-bottom: 8px;
             &:last-child{
                 margin-bottom: 0;
@@ -952,7 +903,7 @@
         .product-price-tit{
             font-size: 13px;
             font-weight: 400;
-      color: #45576f;
+            color: #45576F;
             margin-right: 10px;
         }
         .select-wrap{
@@ -990,7 +941,7 @@
                     transform: translateY(-50%);
                     width: 1px;
                     height: 12px;
-          background-color: #d9d9d9;
+                    background-color: #D9D9D9;
                 }
                 &:first-child{
                     padding-left: 0;
@@ -1002,7 +953,7 @@
                     padding-right: 0;
                 }
                 &.item01{
-          color: #3bbb48;
+                    color: #3BBB48;
                     span{
                         background-image: url(../../public/static/images/sub/open_ico.svg);
                     }
@@ -1014,13 +965,13 @@
                     }
                 }
                 &.item03{
-          color: #0191c9;
+                    color: #0191C9;
                     span{
                         background-image: url(../../public/static/images/sub/attachment_ico.svg);
                     }
                 }
                 &.item04{
-          color: #f16a6a;
+                    color: #F16A6A;
                     span{
                         background-image: url(../../public/static/images/sub/click_check_ico.svg);
                     }
@@ -1082,23 +1033,23 @@
     table{
         table-layout: fixed;
         border-collapse:collapse;
-    border: 1px solid #ecf0f4;
+        border: 1px solid #ECF0F4;
         border-radius: 4px;
         thead{
             th{
                 padding: 4.5px 0;
-        border-bottom: 1px solid #ecf0f4;
+                border-bottom: 1px solid #ECF0F4;
                 text-align: center;
                 font-size: 13px;
-        color: #45576f;
+                color: #45576F;
                 font-weight: 500;
-        background-color: #f8f9fa;
+                background-color: #F8F9FA;
             }
         }
         tbody{
             td{
                 font-size: 13px;
-        color: #45576f;
+                color: #45576F;
                 text-align: center;
                 padding: 4.5px 0;
             }
@@ -1112,13 +1063,13 @@
     .simulation-tit-wrap{
         flex: none;
         padding-right: 40px;
-    border-right: 1px solid #eeeeee;
+        border-right: 1px solid #EEEEEE;
         span{
             display: block;
             position: relative;
             padding-left: 60px;
             font-size: 15px;
-      color: #14324f;
+            color: #14324F;
             font-weight: 600;
             &::before{
                 content: '';
@@ -1146,7 +1097,7 @@
             }
             dd{
                 font-size: 12px;
-        color: #45576f;
+                color: #45576F;
                 font-weight: 400;
                 line-height: 24px;
             }
@@ -1154,8 +1105,7 @@
                 margin-bottom: 0;
             }
         }
-    ul,
+        ul, ol{
-    ol {
             list-style: unset;
         }
     }
@@ -1164,10 +1114,10 @@
 .module-total{
     display: flex;
     align-items: center;
-  background-color: #f8f9fa;
+    background-color: #F8F9FA;
     padding: 9px 0;
     margin-right: 4px;
-  border: 1px solid #ecf0f4;
+    border: 1px solid #ECF0F4;
     border-top: none;
     .total-title{
         flex: 1;
@@ -1190,7 +1140,7 @@
 .information-help-wrap{
     display: flex;
     padding: 24px;
-  background-color: #f4f4f4;
+    background-color: #F4F4F4;
     border-radius: 4px;
     margin-bottom: 15px;
     .information-help-tit-wrap{
@@ -1198,7 +1148,7 @@
         display: flex;
         align-items: center;
         padding-right: 40px;
-    border-right: 1px solid #e0e0e3;
+        border-right: 1px solid #E0E0E3;
         .help-tit-icon{
             width: 40px;
             height: 40px;
@@ -1210,7 +1160,7 @@
         .help-tit{
             font-size: 13px;
             font-weight: 600;
-      color: #45576f;
+            color: #45576F;
         }
     }
     .information-help-guide{
@@ -1219,7 +1169,7 @@
             display: block;
             font-size: 12px;
             font-weight: 400;
-      color: #45576f;
+            color: #45576F;
             margin-bottom: 7px;
             &:last-child{
                 margin-bottom: 0;
@@ -1233,7 +1183,7 @@
     flex-direction: column;
     align-items: center;
     padding: 10px 0 30px 0;
-  border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid #E5E5E5;
     margin-bottom: 24px;
     .community-search-box{
         position: relative;
@@ -1252,7 +1202,7 @@
             font-weight: 400;
             color: #101010;
             &::placeholder{
-        color: #c8c8c8;
+                color: #C8C8C8;
             }
         }
         .community-search-ico{
@@ -1271,10 +1221,10 @@
     .community-search-keyword{
         font-size: 13px;
         font-weight: 400;
-    color: #45576f;
+        color: #45576F;
         span{
             font-weight: 600;
-      color: #f16a6a;
+            color: #F16A6A;
         }
     }
 }
@@ -1289,15 +1239,15 @@
         align-items: center;
         padding: 24px;
         border-radius: 4px;
-    border: 1px solid #e5e5e5;
+        border: 1px solid #E5E5E5;
-    background: #fff;
+        background: #FFF; 
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         .file-item-info{
             .item-num{
                 display: inline-block;
                 padding: 6px 17.5px;
                 border-radius: 60px;
-        background-color: #f4f4f7;
+                background-color: #F4F4F7;
                 font-size: 13px;
                 font-weight: 600;
                 color: #101010;
@@ -1329,7 +1279,7 @@
             }
         }
         &:hover{
-      background-color: #f4f4f7;
+            background-color: #F4F4F7;
         }
     }
 }
@@ -1342,7 +1292,7 @@
     height: 148px;
     padding: 24px;
     border-radius: 4px;
-  border: 1px solid #e5e5e5;
+    border: 1px solid #E5E5E5;
     font-size: 16px;
     font-weight: 500;
     color: #344356;
@@ -1354,8 +1304,8 @@
     align-items: center;
     width: 200px;
     height: 30px;
-  background-color: #fafafa;
+    background-color: #FAFAFA;
-  border: 1px solid #eee;
+    border: 1px solid #EEE;
     padding: 0 10px;
     input{
         font-size: 13px;
@@ -1447,12 +1397,12 @@
                     gap: 3px;
                 }
                 .vertical-horizontal{
-          margin: 0 3px;
+                    margin-right: 3px;
                     min-width: 150px;
                 }
                 .select-box{
                     width: 100px;
-          margin-right: 3px;
+                    margin: 0 3px;
                 }
                 .size-control{
                     width: 90px;
@@ -1478,4 +1428,5 @@
             } 
         } 
     } 
+    
 }

src/styles/_grid-detail.scss

@@ -39,7 +39,7 @@
                 background-color: #F7F9FA;
             }
             &.important_row{
-                background-color: #e7e7e7;
+                background-color: #f5fcff;
             }
         }
         .ag-cell{

src/styles/_modal.scss

@@ -355,6 +355,7 @@ $alert-color: #101010;
 
 // grid-move
 .move-form{
+    width: 100%;
     p{
         font-size: $pop-normal-size;
         color: $pop-color;
@@ -380,7 +381,8 @@ $alert-color: #101010;
     flex: none;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 10px;
+    gap: 5px;
+    margin-left: auto;
 }
 
 // 배치면 초기 설정

src/styles/_reset.scss

@@ -9,8 +9,6 @@
     box-sizing: border-box;
 }
 html, body{
-    width: 100%;
-    height: 100%;
     font-size: 16px;
 }
 html, body, div, span, applet, object, iframe,

src/util/qpolygon-utils.js

@@ -1034,9 +1034,10 @@ export const splitPolygonWithLines = (polygon) => {
     const routes = []
 
     // 시작점은 시작 hip라인의 출발점
-    const startPoint = point
+    const startPoint = { x: Math.round(point.x), y: Math.round(point.y) }
     // 도착점은 마지막 hip라인의 끝나는 점
-    const endPoint = polygon.points[(index + 1) % polygon.points.length]
+    let endPoint = polygon.points[(index + 1) % polygon.points.length]
+    endPoint = { x: Math.round(endPoint.x), y: Math.round(endPoint.y) }
 
     const startLine = allLines.find((line) => line.startPoint.x === startPoint.x && line.startPoint.y === startPoint.y)
     const endLine = allLines.find((line) => line.startPoint.x === endPoint.x && line.startPoint.y === endPoint.y)
@@ -1166,7 +1167,7 @@ export const splitPolygonWithLines = (polygon) => {
 }
 
 const isSamePoint = (a, b) => {
-  return a.x === b.x && a.y === b.y
+  return Math.abs(Math.round(a.x) - Math.round(b.x)) <= 1 && Math.abs(Math.round(a.y) - Math.round(b.y)) <= 1
 }
 
 /**