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

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

@@ -8,13 +8,13 @@ import { contextPopupPositionState } from '@/store/popupAtom'
 
 export default function ColorPickerModal(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState) // 현재 메뉴
-  const { isShow, setIsShow, pos = contextPopupPosition, color = '#ff0000', setColor, id, isConfig = false } = props
+  const { isShow, setIsShow, pos = contextPopupPosition, color, setColor, id, isConfig = false } = props //color = '#ff0000'
-  const { getMessage } = useMessage()
   const [originColor, setOriginColor] = useState(color)
+  const { getMessage } = useMessage()
   const { closePopup } = usePopup()
 
   useEffect(() => {
-    setOriginColor(color)
+    setOriginColor(originColor)
   }, [isShow])
 
   return (

src/components/estimate/Estimate.jsx

@@ -176,7 +176,6 @@ export default function Estimate({ params }) {
   useEffect(() => {
     //선택된 견적특이사항 setEstimateContextState
 
-    // console.log('specialNoteList::', specialNoteList)
     if (isNotEmptyArray(specialNoteList)) {
       const liveCheckedData = specialNoteList.filter((row) => row.check === true)
 
@@ -187,7 +186,6 @@ export default function Estimate({ params }) {
 
       const newData = data.join('、')
       //저장용 보내기
-      // console.log('유니크??', uniqueData)
       setEstimateContextState({ estimateOption: newData, specialNoteList: specialNoteList, uniqueData: uniqueData })
     }
   }, [specialNoteList])
@@ -204,13 +202,21 @@ export default function Estimate({ params }) {
       let fileList = []
       files.map((row) => {
         fileList.push(row.data)
-        setEstimateContextState({ fileList: row.data, tempFileList: fileList })
+        setEstimateContextState({ fileList: row.data, newFileList: fileList })
       })
     } else {
       setEstimateContextState({ fileList: [] })
     }
   }, [files])
 
+  useEffect(() => {
+    if (originFiles.length > 0) {
+      setEstimateContextState({
+        originFiles: originFiles,
+      })
+    }
+  }, [originFiles])
+
   //상세에서 내려온 첨부파일 set 만들기
   useEffect(() => {
     if (isNotEmptyArray(estimateContextState.fileList)) {
@@ -232,6 +238,8 @@ export default function Estimate({ params }) {
         setOriginFiles(originFiles.filter((file) => file.objectNo === objectNo && file.no !== no))
         setEstimateContextState({
           fileList: originFiles.filter((file) => file.objectNo === objectNo && file.no !== no),
+          originFiles: originFiles.filter((file) => file.objectNo === objectNo && file.no !== no),
+          newFileList: originFiles.filter((file) => file.objectNo === objectNo && file.no !== no),
         })
 
         alert(getMessage('plan.message.delete'))
@@ -333,7 +341,6 @@ export default function Estimate({ params }) {
       }
     })
 
-    // console.log('특이사항 유니크:::', pushData)
     setUniqueData(pushData)
     specialNoteList.map((item) => {
       if (item.pkgYn === '1') {
@@ -562,7 +569,7 @@ export default function Estimate({ params }) {
     let updateList = []
     let updates = {}
     get({ url: apiUrl }).then((res) => {
-      console.log('아이템디테일::::::::', res)
+      // console.log('아이템디테일::::::::', res)
       updates.objectNo = objectNo
       updates.planNo = planNo
       updates.itemId = res.itemId
@@ -637,6 +644,7 @@ export default function Estimate({ params }) {
           bomItem.delFlg = '0'
           bomItem.objectNo = objectNo
           bomItem.planNo = planNo
+          bomItem.addFlg = true //봄 추가시도 addFlg
         })
 
         setEstimateContextState({
@@ -696,98 +704,61 @@ export default function Estimate({ params }) {
 
   useEffect(() => {
     if (itemChangeYn) {
-      let totAmount = 0
+      let totals = {
-      let totVolKw = 0
+        totAmount: 0,
-      let supplyPrice = 0
+        totVolKw: 0,
-      let vatPrice = 0
+        supplyPrice: 0,
-      let totPrice = 0
+        vatPrice: 0,
-      let addSupplyPrice = 0
+        totPrice: 0,
-      let pkgTotPrice = 0
+        addSupplyPrice: 0,
-      if (estimateContextState.estimateType === 'YJOD') {
+        pkgTotPrice: 0,
-        estimateContextState.itemList.sort((a, b) => {
+      }
-          return a.dispOrder - b.dispOrder
-        })
-        // console.log('YJOD 토탈만들어주기::::::::::', estimateContextState.itemList)
 
-        //아이템에서 제품관련 특이사항 중복제거해서 만드는 함수
+      const calculateYJODTotals = (itemList) => {
-        makeUniqueSpecialNoteCd(estimateContextState.itemList)
+        itemList.sort((a, b) => a.dispOrder - b.dispOrder)
+        makeUniqueSpecialNoteCd(itemList)
 
-        estimateContextState.itemList.map((item) => {
+        itemList.forEach((item) => {
           delete item.showSalePrice
           delete item.showSaleTotPrice
           if (item.delFlg === '0') {
-            let amount = Number(item?.amount?.replace(/[^0-9]/g, '').replaceAll(',', ''))
+            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
-            if (isNaN(amount)) {
+            let price = Number(item.saleTotPrice?.replaceAll(',', '')) || 0
-              amount = '0'
+
-            }
-            let price = Number(item?.saleTotPrice?.replaceAll(',', ''))
-            if (isNaN(price)) {
-              price = 0
-            }
             if (item.moduleFlg === '1') {
-              //용량(Kw)은 모듈플래그 1만 합산
               const volKw = (item.pnowW * amount) / 1000
-              // const volKw = item.pnowW * amount
+              totals.totVolKw += volKw
-              totVolKw += volKw
             }
-            // const price
+            totals.totAmount += amount
-            totAmount += amount
+            totals.supplyPrice += price
-            supplyPrice += price
           }
         })
 
-        vatPrice = supplyPrice * 0.1
+        totals.vatPrice = totals.supplyPrice * 0.1
-        totPrice = supplyPrice + vatPrice
+        totals.totPrice = totals.supplyPrice + totals.vatPrice
+      }
 
-        setEstimateContextState({
+      const calculateYJSSTotals = (itemList) => {
-          totAmount: totAmount,
+        itemList.sort((a, b) => a.dispOrder - b.dispOrder)
-          totVolKw: totVolKw.toFixed(3),
+        makeUniqueSpecialNoteCd(itemList)
-          supplyPrice: supplyPrice.toFixed(3),
+
-          vatPrice: vatPrice.toFixed(3),
+        itemList.forEach((item) => {
-          totPrice: totPrice.toFixed(3),
-        })
-      } else {
-        //아이템에서 제품관련 특이사항 중복제거해서 만드는 함수
-        makeUniqueSpecialNoteCd(estimateContextState.itemList)
-        //YJSS
-        // console.log('YJSS 토탈만들어주기::::::::::', estimateContextState.itemList)
-        estimateContextState.itemList.sort((a, b) => {
-          return a.dispOrder - b.dispOrder
-        })
-        estimateContextState.itemList.map((item) => {
           if (item.delFlg === '0') {
-            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', ''))
+            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
-            let salePrice = Number(item.salePrice?.replaceAll(',', ''))
+            let salePrice = Number(item.salePrice?.replaceAll(',', '')) || 0
-            let saleTotPrice = Number(item.saleTotPrice?.replaceAll(',', ''))
 
-            if (isNaN(amount)) {
-              amount = '0'
-            }
-
-            if (isNaN(saleTotPrice)) {
-              saleTotPrice = 0
-            }
-
-            if (isNaN(salePrice)) {
-              salePrice = 0
-            }
             if (item.moduleFlg === '1') {
-              //용량(Kw)은 모듈플래그 1만 합산
               const volKw = (item.pnowW * amount) / 1000
-              totVolKw += volKw
+              totals.totVolKw += volKw
             }
 
-            // const saleTotPrice
+            totals.totAmount += amount
-            totAmount += amount
             if (item.pkgMaterialFlg === '1') {
               const saleTotPrice = amount * salePrice
-              //다시계산하기
+              totals.addSupplyPrice += saleTotPrice
-              //YJSS는 PKG제외상품들만(1) 모아서 수량 * 단가를 공급가액(supplyPrice)에 추가로 더해줌
-              addSupplyPrice += saleTotPrice
             }
 
             if (!item.paDispOrder) {
-              //paDispOrder
               if (item.pkgMaterialFlg === '0') {
                 item.showSalePrice = '0'
                 item.showSaleTotPrice = '0'
@@ -795,34 +766,40 @@ export default function Estimate({ params }) {
             }
           }
         })
-        pkgTotPrice = estimateContextState.pkgAsp.replaceAll(',', '') * totVolKw * 1000
-        setEstimateContextState({
-          pkgTotPrice: pkgTotPrice,
-        })
 
-        supplyPrice = addSupplyPrice + pkgTotPrice
+        totals.pkgTotPrice = Number(estimateContextState.pkgAsp.replaceAll(',', '')) * totals.totVolKw * 1000
-        vatPrice = supplyPrice * 0.1
+        totals.supplyPrice = totals.addSupplyPrice + totals.pkgTotPrice
-        totPrice = supplyPrice + vatPrice
+        totals.vatPrice = totals.supplyPrice * 0.1
+        totals.totPrice = totals.supplyPrice + totals.vatPrice
+      }
+
+      if (estimateContextState.estimateType === 'YJOD') {
+        calculateYJODTotals(estimateContextState.itemList)
         setEstimateContextState({
-          totAmount: totAmount,
+          totAmount: totals.totAmount,
-          totVolKw: totVolKw.toFixed(3),
+          totVolKw: totals.totVolKw.toFixed(3),
-          supplyPrice: supplyPrice.toFixed(3),
+          supplyPrice: totals.supplyPrice.toFixed(3),
-          vatPrice: vatPrice.toFixed(3),
+          vatPrice: totals.vatPrice.toFixed(3),
-          totPrice: totPrice.toFixed(3),
+          totPrice: totals.totPrice.toFixed(3),
+        })
+      } else if (estimateContextState.estimateType === 'YJSS') {
+        calculateYJSSTotals(estimateContextState.itemList)
+        setEstimateContextState({
+          pkgTotPrice: totals.pkgTotPrice,
+          totAmount: totals.totAmount,
+          totVolKw: totals.totVolKw.toFixed(3),
+          supplyPrice: totals.supplyPrice.toFixed(3),
+          vatPrice: totals.vatPrice.toFixed(3),
+          totPrice: totals.totPrice.toFixed(3),
         })
       }
 
       setItemChangeYn(false)
     } else {
-      estimateContextState.itemList.map((item) => {
+      estimateContextState.itemList.forEach((item) => {
-        if (estimateContextState.estimateType === 'YJSS') {
+        if (estimateContextState.estimateType === 'YJSS' && !item.paDispOrder && item.pkgMaterialFlg === '0') {
-          if (!item.paDispOrder) {
+          item.showSalePrice = '0'
-            //paDispOrder
+          item.showSaleTotPrice = '0'
-            if (item.pkgMaterialFlg === '0') {
-              item.showSalePrice = '0'
-              item.showSaleTotPrice = '0'
-            }
-          }
         }
       })
     }
@@ -1160,13 +1137,7 @@ export default function Estimate({ params }) {
                   {specialNoteList.length > 0 &&
                     specialNoteList.map((row) => {
                       return (
-                        <div
+                        <div key={uuidv4()} className="special-note-check-item">
-                          key={uuidv4()}
-                          className="special-note-check-item"
-                          onClick={(event) => {
-                            // settingShowContent(row.code, event)
-                          }}
-                        >
                           <div className="d-check-box light">
                             <input
                               type="checkbox"
@@ -1181,9 +1152,7 @@ export default function Estimate({ params }) {
                                 settingShowContent(row.code, event)
                               }}
                             />
-                            <label htmlFor={row.code}>
+                            <label htmlFor={row.code}>{row.codeNm}</label>
-                              {row.codeNm} / {row.code}
-                            </label>
                           </div>
                         </div>
                       )
@@ -1386,7 +1355,6 @@ export default function Estimate({ params }) {
                 <thead>
                   <tr>
                     <th>
-                      {/* <div className="d-check-box pop no-text" style={{ display: 'none' }}> */}
                       <div className="d-check-box pop no-text">
                         <input type="checkbox" id="ch97" checked={isSelectedAll()} onChange={onChangeSelectAll} />
                         <label htmlFor="ch97"></label>

src/components/estimate/popup/EstimateCopyPop.jsx

@@ -11,7 +11,7 @@ export default function EstimateCopyPop({ planNo, setEstimateCopyPopupOpen }) {
   const { getMessage } = useMessage()
   const { get } = useAxios()
 
-  const { handleEstimateCopy, state } = useEstimateController(planNo)
+  const { handleEstimateCopy, estimateContextState } = useEstimateController(planNo)
 
   const { session } = useContext(SessionContext)
 
@@ -105,10 +105,10 @@ export default function EstimateCopyPop({ planNo, setEstimateCopyPopupOpen }) {
   }, [planNo])
 
   useEffect(() => {
-    if (state?.charger) {
+    if (estimateContextState?.charger) {
-      setCopyReceiveUser(state.charger)
+      setCopyReceiveUser(estimateContextState.charger)
     }
-  }, [state.charger])
+  }, [estimateContextState?.charger])
 
   //T01 1차점 자동완성 인풋때 목록 변환
   const onInputChange = (key) => {
@@ -282,7 +282,7 @@ export default function EstimateCopyPop({ planNo, setEstimateCopyPopupOpen }) {
                       type="text"
                       className="input-light"
                       required
-                      defaultValue={state?.charger}
+                      defaultValue={estimateContextState?.charger}
                       onChange={(e) => {
                         setCopyReceiveUser(e.target.value)
                       }}

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

@@ -1,54 +1,44 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import { canvasState, dotLineGridSettingState, dotLineIntervalSelector } from '@/store/canvasAtom'
+import { canvasState } from '@/store/canvasAtom'
-import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { onlyNumberInputChange } from '@/util/input-utils'
-import { settingModalGridOptionsState } from '@/store/settingAtom'
-import { useAxios } from '@/hooks/useAxios'
-import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+import { useSwal } from '@/hooks/useSwal'
 
 const TYPE = {
   DOT: 'DOT',
   LINE: 'LINE',
 }
 
-const defaultDotLineGridSetting = {
-  INTERVAL: {
-    type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
-    ratioInterval: 910,
-    verticalInterval: 910,
-    horizontalInterval: 910,
-    dimension: 1, // 치수
-  },
-  DOT: false,
-  LINE: false,
-}
-
 export default function DotLineGrid(props) {
   // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
-  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+  //const interval = useRecoilValue(dotLineIntervalSelector)
-  const [close, setClose] = useState(false)
   const { id, setIsShow, pos = { x: 840, y: -815 }, isConfig = false } = props
-  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
-
   const canvas = useRecoilValue(canvasState)
 
-  const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
-  const [currentSetting, setCurrentSetting] = useState(
-    JSON.stringify(dotLineGridSetting) === JSON.stringify(defaultDotLineGridSetting) ? { ...defaultDotLineGridSetting } : { ...dotLineGridSetting },
-  )
-  const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
-  const interval = useRecoilValue(dotLineIntervalSelector)
-
   const { getMessage } = useMessage()
-  const { get, post } = useAxios()
-  const { swalFire } = useSwal()
   const { closePopup } = usePopup()
+  const { swalFire } = useSwal()
 
+  const {
+    selectOption,
+    setSelectOption,
+    SelectOptions,
+    currentSetting,
+    setCurrentSetting,
+    dotLineGridSettingState,
+    setSettingModalGridOptions,
+    setDotLineGridSettingState,
+  } = useCanvasSetting()
+
+  // 데이터를 최초 한 번만 조회
   useEffect(() => {
+    console.log('DotLineGrid useEffect 실행')
+
     return () => {
       setSettingModalGridOptions((prev) => {
         const newSettingOptions = [...prev]
@@ -58,20 +48,6 @@ export default function DotLineGrid(props) {
     }
   }, [])
 
-  const SelectOption = [
-    { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
-    { id: 2, name: '1/2', value: 1 / 2 },
-    { id: 3, name: '1/4', value: 1 / 4 },
-    { id: 4, name: '1/10', value: 1 / 10 },
-  ]
-  const [selectOption, setSelectOption] = useState(SelectOption[0])
-
-  // 데이터를 최초 한 번만 조회
-  useEffect(() => {
-    console.log('DotLineGrid useEffect 실행')
-    fetchGridSettings()
-  }, [objectNo])
-
   const HandleClickClose = () => {
     // setClose(true)
     // setTimeout(() => {
@@ -90,61 +66,31 @@ export default function DotLineGrid(props) {
     })
   }
 
-  // Canvas Grid Setting 조회 및 초기화
-  const fetchGridSettings = async () => {
-    try {
-      const res = await get({ url: `/api/canvas-management/canvas-grid-settings/by-object/${objectNo}` })
-
-      const patternData = {
-        INTERVAL: {
-          type: res.gridType,
-          horizontalInterval: res.gridHorizon * 10,
-          verticalInterval: res.gridVertical * 10,
-          ratioInterval: res.gridRatio * 10,
-        },
-        dimension: res.gridDimen,
-        DOT: res.dotGridDisplay,
-        LINE: res.lineGridDisplay,
-      }
-
-      const matchedOption = SelectOption.find((option) => option.value == res.gridDimen)
-
-      // dimension 값에 맞는 옵션을 선택
-      setSelectOption(matchedOption)
-
-      // 서버에서 받은 데이터로 상태 업데이트
-      setCurrentSetting(patternData)
-    } catch (error) {
-      console.error('Data fetching error:', error)
-    }
-  }
-
   const handleSave = async () => {
     if (!currentSetting.DOT && !currentSetting.LINE) {
       swalFire({ text: '배치할 그리드를 설정해주세요.' })
       return
     }
-    try {
-      const patternData = {
-        objectNo,
-        dotGridDisplay: currentSetting.DOT,
-        lineGridDisplay: currentSetting.LINE,
-        gridType: currentSetting.INTERVAL.type,
-        gridHorizon: currentSetting.INTERVAL.horizontalInterval / 10,
-        gridVertical: currentSetting.INTERVAL.verticalInterval / 10,
-        gridRatio: currentSetting.INTERVAL.ratioInterval / 10,
-        gridDimen: currentSetting.INTERVAL.dimension,
-      }
 
-      // HTTP POST 요청 보내기
+    setDotLineGridSettingState((prev) => {
-      await post({ url: `/api/canvas-management/canvas-grid-settings`, data: patternData }).then((res) => {
+      return {
-        swalFire({ text: getMessage(res.returnMessage) })
+        ...prev,
-        setDotLineGridSettingState({ ...currentSetting })
+        INTERVAL: {
-        closePopup(id, isConfig)
+          type: currentSetting.INTERVAL.type,
-      })
+          horizontalInterval: currentSetting.INTERVAL.horizontalInterval,
-    } catch (error) {
+          verticalInterval: currentSetting.INTERVAL.verticalInterval,
-      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+          ratioInterval: currentSetting.INTERVAL.ratioInterval,
-    }
+          dimension: currentSetting.INTERVAL.dimension,
+        },
+        DOT: currentSetting.DOT,
+        LINE: currentSetting.LINE,
+        flag: true,
+      }
+      //setDotLineGridSettingState({ ...currentSetting })
+    })
+
+    setIsShow(false)
+    closePopup(id, isConfig)
   }
 
   const handleRadioChange = (e) => {
@@ -198,8 +144,19 @@ export default function DotLineGrid(props) {
       .filter((obj) => obj.name === 'dotGrid')
       .forEach((obj) => canvas?.remove(obj))
 
-    resetDotLineGridSetting()
+    // resetDotLineGridSetting()
-    setSelectOption(SelectOption[0])
+    setCurrentSetting({
+      INTERVAL: {
+        type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
+        ratioInterval: 910,
+        verticalInterval: 910,
+        horizontalInterval: 910,
+        dimension: 1, // 치수
+      },
+      DOT: false,
+      LINE: false,
+    })
+    setSelectOption(SelectOptions[0])
   }
 
   return (
@@ -296,7 +253,7 @@ export default function DotLineGrid(props) {
                 <span>mm</span>
               </div>
               <div className="grid-select">
-                <QSelectBox options={SelectOption} onChange={changeDimension} value={selectOption} />
+                <QSelectBox options={SelectOptions} onChange={changeDimension} value={selectOption} />
               </div>
             </div>
           </div>

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

@@ -4,12 +4,11 @@ import { settingModalGridOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { adsorptionPointAddModeState } from '@/store/canvasAtom'
 import { useTempGrid } from '@/hooks/useTempGrid'
-import { gridColorState } from '@/store/gridAtom'
-import { useColor } from 'react-color-palette'
 import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
 import { usePopup } from '@/hooks/usePopup'
 import { v4 as uuidv4 } from 'uuid'
 import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 
 export default function GridOption() {
   const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
@@ -17,15 +16,16 @@ export default function GridOption() {
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
   const { getMessage } = useMessage()
   const { tempGridMode, setTempGridMode } = useTempGrid()
-  const [gridColor, setGridColor] = useRecoilState(gridColorState)
-  const [color, setColor] = useColor(gridColor)
   const [showColorPickerModal, setShowColorPickerModal] = useState(false)
   const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
   const { addPopup, closePopup, closePopups } = usePopup()
   const [colorId, setColorId] = useState(uuidv4())
   const [dotLineId, setDotLineId] = useState(uuidv4())
 
+  const { gridColor, setGridColor, color } = useCanvasSetting()
+
   useEffect(() => {
+    console.log(gridColor, color)
     setGridColor(color.hex)
   }, [color])
 

src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx

@@ -75,8 +75,6 @@ export default function PlanSizeSetting(props) {
                   className="input-origin block"
                   name={`originHorizon`}
                   value={planSizeSettingMode.originHorizon}
-                  //onChange={(e) => setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: Number(e.target.value), flag: false })}
-                  //onFocus={(e) => (originHorizon.current.value = '')}
                   onChange={(e) => onlyNumberInputChange(e, changeInput)}
                 />
               </div>
@@ -90,8 +88,6 @@ export default function PlanSizeSetting(props) {
                   className="input-origin block"
                   name={`originVertical`}
                   value={planSizeSettingMode.originVertical}
-                  //onChange={(e) => setPlanSizeSettingMode({ ...planSizeSettingMode, originVertical: Number(e.target.value), flag: false })}
-                  //onFocus={(e) => (originVertical.current.value = '')}
                   onChange={(e) => onlyNumberInputChange(e, changeInput)}
                 />
               </div>

src/hooks/common/useCommonCode.js

@@ -5,14 +5,28 @@ import { globalLocaleStore } from '@/store/localeAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import { useAxios } from '../useAxios'
 
+/**
+ * 공통코드 관리를 위한 커스텀 훅
+ *
+ * @description
+ * - 공통코드를 전역 상태로 관리하고 필요한 곳에서 사용할 수 있도록 함
+ * - 최초 1회만 API를 호출하여 공통코드를 가져옴
+ * - 언어 설정에 따라 한국어/일본어 코드명을 자동으로 변환
+ *
+ * @returns {Object}
+ * - commonCode: 전체 공통코드 객체(recoil state)
+ * - findCommonCode: 특정 공통코드 그룹을 조회하는 함수
+ *
+ * @example
+ * const { commonCode, findCommonCode } = useCommonCode();
+ * const honorificCodes = findCommonCode(200800);
+ */
 export const useCommonCode = () => {
   const [commonCode, setCommonCode] = useRecoilState(commonCodeState)
   const globalLocale = useRecoilValue(globalLocaleStore)
   const { promiseGet } = useAxios()
 
   const findCommonCode = (key) => {
-    // const arr = commonCode[key]
-    // return arr.sort((a, b) => a.clPriority - b.clPriority)
     const resultCodes = commonCode[key]?.map((code) => {
       const result = {
         clHeadCd: code.clHeadCd,

src/hooks/floorPlan/estimate/useEstimateController.js

@@ -3,7 +3,7 @@ import { useContext, useEffect, useReducer, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
-import { isObjectNotEmpty, isNotEmptyArray } from '@/util/common-utils'
+import { isObjectNotEmpty } from '@/util/common-utils'
 import { SessionContext } from '@/app/SessionProvider'
 import { useMessage } from '@/hooks/useMessage'
 import { useRouter } from 'next/navigation'
@@ -128,6 +128,7 @@ export const useEstimateController = (planNo) => {
   const handleEstimateSubmit = async () => {
     //0. 필수체크
     let flag = true
+    let originFileFlg = false
     let fileFlg = true
     let itemFlg = true
     if (estimateData.charger.trim().length === 0) {
@@ -147,21 +148,26 @@ export const useEstimateController = (planNo) => {
 
     //첨부파일을 첨부안했는데
     //아이템 fileUploadFlg가1(첨부파일 필수)이 1개라도 있는데 후일 자료 제출(fileFlg) 체크안했으면(0) alert 저장안돼
+    if (estimateData?.originFiles?.length > 0) {
+      originFileFlg = true
+    }
     if (flag) {
-      if (estimateData.fileList.length < 1) {
+      if (!originFileFlg) {
-        if (estimateData.itemList.length > 1) {
+        if (estimateData.newFileList.length < 1) {
-          estimateData.itemList.map((row) => {
+          if (estimateData.itemList.length > 1) {
-            if (row.delFlg === '0') {
+            estimateData.itemList.map((row) => {
-              if (row.fileUploadFlg === '1') {
+              if (row.delFlg === '0') {
-                if (fileFlg) {
+                if (row.fileUploadFlg === '1') {
-                  if (estimateData.fileFlg === '0') {
+                  if (fileFlg) {
-                    fileFlg = false
+                    if (estimateData.fileFlg === '0') {
-                    return alert(getMessage('estimate.detail.save.requiredFileUpload'))
+                      fileFlg = false
+                      return alert(getMessage('estimate.detail.save.requiredFileUpload'))
+                    }
                   }
                 }
               }
-            }
+            })
-          })
+          }
         }
       }
     }
@@ -206,8 +212,8 @@ export const useEstimateController = (planNo) => {
     if (flag && fileFlg && itemFlg) {
       //1. 첨부파일 저장시작
       const formData = new FormData()
-      if (isNotEmptyArray(estimateData.tempFileList) > 1) {
+      if (estimateData?.newFileList?.length > 0) {
-        estimateData.tempFileList.forEach((file) => {
+        estimateData.newFileList.forEach((file) => {
           formData.append('files', file)
         })
         formData.append('objectNo', estimateData.objectNo)
@@ -267,7 +273,8 @@ export const useEstimateController = (planNo) => {
         }
       })
       estimateData.estimateOption = estimateOptions
-      // console.log('최종첨부파일:::', estimateData.fileList)
+      // console.log('새로추가첨부파일:::', estimateData.newFileList)
+      // console.log('기존첨부파일:::', estimateData.originFiles)
       // console.log('최종아이템:::', estimateData.itemList)
       // console.log('최종저장::', estimateData)
       //2. 상세데이터 저장

src/hooks/module/useModuleBasicSetting.js

@@ -12,6 +12,7 @@ import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
 import * as turf from '@turf/turf'
 import { EventContext } from '@/app/floor-plan/EventProvider'
 import { v4 as uuidv4 } from 'uuid'
+import { useMainContentsController } from '../main/useMainContentsController'
 
 export function useModuleBasicSetting() {
   const canvas = useRecoilValue(canvasState)
@@ -400,7 +401,7 @@ export function useModuleBasicSetting() {
   const autoModuleSetup = (placementRef) => {
     const isChidori = placementRef.isChidori.current === 'true' ? true : false
     const setupLocation = placementRef.setupLocation.current
-    const isMaxSetup = placementRef.isMaxSetup.current
+    const isMaxSetup = placementRef.isMaxSetup.current === 'true' ? true : false
 
     const moduleSetupSurfaces = moduleSetupSurface //선택 설치면
 
@@ -539,29 +540,34 @@ export function useModuleBasicSetting() {
       let diffLeftEndPoint = Math.abs(totalLeftEndPoint / width)
       let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
       let startColPoint = Math.abs(width * Math.ceil(diffLeftEndPoint) - startPoint.x1)
+      let tempMaxWidth = isMaxSetup ? width / 2 : width //최대배치인지 확인하려고 넣음
+      if (isMaxSetup) totalWidth = totalWidth * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함
 
       for (let j = 0; j < diffTopEndPoint; j++) {
         bottomMargin = j === 0 ? 1 : 0
         for (let i = 0; i <= totalWidth; i++) {
-          leftMargin = i === 0 ? 1 : 0 //숫자가 0이면 0, 1이면 1로 바꾸기
+          leftMargin = i === 0 ? 1.1 : 0 //숫자가 0이면 0, 1이면 1로 바꾸기
           chidoriLength = 0
           if (isChidori) {
             chidoriLength = j % 2 === 0 ? 0 : width / 2
           }
 
+          let squarePolygon
+          let turfCoordnates
+          let points
+
           square = [
-            [startColPoint + width * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
+            [startColPoint + tempMaxWidth * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
-            [startColPoint + width * i + width - chidoriLength, startPoint.y1 - height * j - bottomMargin],
+            [startColPoint + tempMaxWidth * i + width - chidoriLength, startPoint.y1 - height * j - bottomMargin],
-            [startColPoint + width * i + width - chidoriLength, startPoint.y1 - height * j - height - bottomMargin],
+            [startColPoint + tempMaxWidth * i + width - chidoriLength, startPoint.y1 - height * j - height - bottomMargin],
-            [startColPoint + width * i - chidoriLength, startPoint.y1 - height * j - height - bottomMargin],
+            [startColPoint + tempMaxWidth * i - chidoriLength, startPoint.y1 - height * j - height - bottomMargin],
-            [startColPoint + width * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
+            [startColPoint + tempMaxWidth * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
           ]
 
-          let squarePolygon = turf.polygon([square])
+          squarePolygon = turf.polygon([square])
-          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
+          turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
-          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+          points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
-          // if (disjointFromTrestle && isDisjoint) {
           let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
           canvas?.add(tempModule)
           moduleSetupArray.push(tempModule)
@@ -581,25 +587,26 @@ export function useModuleBasicSetting() {
       let totalWidth = Math.abs(startPoint.x1 - maxRightEndPoint) / width
       let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint)
 
-      for (let j = 0; j < totalHeight; j++) {
+      let tempMaxHeight = isMaxSetup ? height / 2 : height //최대배치인지 확인하려고 넣음
-        bottomMargin = j === 0 ? 1 : 0
+      if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려서 반씩 검사
-        for (let i = 0; i <= totalWidth; i++) {
+
-          leftMargin = 1
+      for (let i = 0; i <= totalWidth; i++) {
+        bottomMargin = i === 0 ? 1 : 0.1
+        for (let j = 0; j < totalHeight; j++) {
+          leftMargin = i === 0 ? 0 : 0.5 * i
           chidoriLength = 0
           if (isChidori) {
-            chidoriLength = i % 2 === 0 ? 0 : height / 2
+            chidoriLength = j % 2 === 0 ? 0 : height / 2
           }
 
           square = [
-            [startPoint.x1 + width * i + leftMargin, startRowPoint + height * j + bottomMargin - chidoriLength],
+            [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
-            [startPoint.x1 + width * i + width + leftMargin, startRowPoint + height * j + bottomMargin - chidoriLength],
+            [startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
-            [startPoint.x1 + width * i + width + leftMargin, startRowPoint + height * j + height + bottomMargin - chidoriLength],
+            [startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin - chidoriLength],
-            [startPoint.x1 + width * i + leftMargin, startRowPoint + height * j + height + bottomMargin - chidoriLength],
+            [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin - chidoriLength],
-            [startPoint.x1 + width * i + leftMargin, startRowPoint + height * j + bottomMargin - chidoriLength],
+            [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
           ]
 
-          console.log('square', square)
-
           let squarePolygon = turf.polygon([square])
           let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
           let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
@@ -622,9 +629,11 @@ export function useModuleBasicSetting() {
       let totalRightEndPoint = maxLeftEndPoint - maxRightEndPoint
       let totalBottomEndPoint = maxBottomEndPoint - startPoint.y1
       let diffLeftEndPoint = Math.abs(totalLeftEndPoint / width)
-      let diffRightEndPoint = Math.abs(totalRightEndPoint / width)
+      let diffRightEndPoint = Math.ceil(Math.abs(totalRightEndPoint / width))
-      let diffBottomEndPoint = Math.abs(totalBottomEndPoint / height)
+      let diffBottomEndPoint = Math.ceil(Math.abs(totalBottomEndPoint / height))
       let startColPoint = Math.abs(width * Math.ceil(diffLeftEndPoint) - startPoint.x1)
+      let tempMaxWidth = isMaxSetup ? width / 2 : width //최대배치인지 확인하려고 넣음
+      if (isMaxSetup) diffRightEndPoint = diffRightEndPoint * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함
 
       for (let j = 0; j < diffBottomEndPoint; j++) {
         for (let i = 0; i < diffRightEndPoint; i++) {
@@ -633,11 +642,11 @@ export function useModuleBasicSetting() {
             chidoriLength = j % 2 === 0 ? 0 : width / 2
           }
           square = [
-            [startColPoint + width * i + chidoriLength, startPoint.y1 + height * j + 1],
+            [startColPoint + tempMaxWidth * i + chidoriLength, startPoint.y1 + height * j + 1],
-            [startColPoint + width * i + chidoriLength, startPoint.y1 + height * j + height + 1],
+            [startColPoint + tempMaxWidth * i + chidoriLength, startPoint.y1 + height * j + height + 1],
-            [startColPoint + width * i + width + chidoriLength, startPoint.y1 + height * j + height + 1],
+            [startColPoint + tempMaxWidth * i + width + chidoriLength, startPoint.y1 + height * j + height + 1],
-            [startColPoint + width * i + width + chidoriLength, startPoint.y1 + height * j + 1],
+            [startColPoint + tempMaxWidth * i + width + chidoriLength, startPoint.y1 + height * j + 1],
-            [startColPoint + width * i + chidoriLength, startPoint.y1 + height * j + 1],
+            [startColPoint + tempMaxWidth * i + chidoriLength, startPoint.y1 + height * j + 1],
           ]
 
           let squarePolygon = turf.polygon([square])
@@ -662,23 +671,26 @@ export function useModuleBasicSetting() {
       let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
       let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height)
       let totalWidth = Math.abs(startPoint.x1 - maxLeftEndPoint) / width
-      let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint)
+      let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint) - 3 // -3으로 위치살짝 보정
 
-      for (let j = 0; j < totalHeight; j++) {
+      let tempMaxHeight = isMaxSetup ? height / 2 : height //최대배치인지 확인하려고 넣음
-        bottomMargin = j === 0 ? 1 : 0
+      if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려서 반씩 검사
-        for (let i = 0; i <= totalWidth; i++) {
+
-          leftMargin = 1
+      for (let i = 0; i <= totalWidth; i++) {
+        for (let j = 0; j < totalHeight; j++) {
+          bottomMargin = j === 0 ? 0.5 : 0.5 * j
+          leftMargin = i === 0 ? 0 : 0.5 * i
           chidoriLength = 0
           if (isChidori) {
             chidoriLength = i % 2 === 0 ? 0 : height / 2
           }
 
           square = [
-            [startPoint.x1 - width * i - leftMargin, startRowPoint + height * j + bottomMargin + chidoriLength],
+            [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
-            [startPoint.x1 - width * i - width - leftMargin, startRowPoint + height * j + bottomMargin + chidoriLength],
+            [startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
-            [startPoint.x1 - width * i - width - leftMargin, startRowPoint + height * j + height + bottomMargin + chidoriLength],
+            [startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin + chidoriLength],
-            [startPoint.x1 - width * i - leftMargin, startRowPoint + height * j + height + bottomMargin + chidoriLength],
+            [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin + chidoriLength],
-            [startPoint.x1 - width * i - leftMargin, startRowPoint + height * j + bottomMargin + chidoriLength],
+            [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
           ]
 
           let squarePolygon = turf.polygon([square])
@@ -743,10 +755,9 @@ export function useModuleBasicSetting() {
         if (moduleSetupSurface.flowDirection === 'north') {
           downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
         }
-      } else {
       }
 
-      const setupedModules = moduleSetupArray.filter((module) => {
+      const setupedModules = moduleSetupArray.filter((module, index) => {
         let disjointFromTrestle = checkModuleDisjointSurface(module.turfPoints, turfModuleSetupSurface)
         let isDisjoint = checkModuleDisjointObjects(module.turfPoints, containsBatchObjects)
 
@@ -758,11 +769,29 @@ export function useModuleBasicSetting() {
           return module
         }
       })
+
+      console.log('setupedModules.length', setupedModules.length)
+      //나간애들 제외하고 설치된 애들로 겹친애들 삭제 하기
+      setupedModules.forEach((module, index) => {
+        if (isMaxSetup && index > 0) {
+          const isOverlap = turf.booleanOverlap(polygonToTurfPolygon(setupedModules[index - 1]), polygonToTurfPolygon(module))
+          console.log(isOverlap)
+          //겹치는지 확인
+          if (isOverlap) {
+            //겹쳐있으면 삭제
+            // canvas?.remove(module)
+            // module.set({ fill: 'rgba(72, 161, 250, 0.4)', stroke: 'black', strokeWidth: 0.1 })
+            canvas.renderAll()
+            setupedModules.splice(index, 1)
+
+            return false
+          }
+        }
+      })
+
       moduleSetupSurface.set({ modules: setupedModules })
       setModuleIsSetup(moduleSetupArray)
     })
-
-    // console.log(calculateForApi(moduleSetupArray))
   }
 
   const calculateForApi = (moduleSetupArray) => {
@@ -1185,7 +1214,7 @@ export function useModuleBasicSetting() {
           y2: standardLine.y1 + charlie,
         }
       } else {
-        rtnObj = { target: idx === 0 ? 'left' : 'right', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 }
+        rtnObj = { target: index === 0 ? 'left' : 'right', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 }
       }
       rtnObjArray.push(rtnObj)
     })

src/hooks/option/useCanvasSetting.js

@@ -1,16 +1,34 @@
 import { useCallback, useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
-import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState } from '@/store/canvasAtom'
+import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState, dotLineGridSettingState } from '@/store/canvasAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
-import { correntObjectNoState, corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import {
+  correntObjectNoState,
+  corridorDimensionSelector,
+  settingModalFirstOptionsState,
+  settingModalSecondOptionsState,
+  settingModalGridOptionsState,
+} from '@/store/settingAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { globalFontAtom } from '@/store/fontAtom'
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
+import { gridColorState } from '@/store/gridAtom'
+import { useColor } from 'react-color-palette'
 
-let objectNo
+const defaultDotLineGridSetting = {
+  INTERVAL: {
+    type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
+    ratioInterval: 910,
+    verticalInterval: 910,
+    horizontalInterval: 910,
+    dimension: 1, // 치수
+  },
+  DOT: false,
+  LINE: false,
+}
 
 export function useCanvasSetting() {
   const canvas = useRecoilValue(canvasState)
@@ -21,7 +39,7 @@ export function useCanvasSetting() {
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
-  const { option3, option4 } = settingModalSecondOptions
+  const { option4 } = settingModalSecondOptions
 
   const corridorDimension = useRecoilValue(corridorDimensionSelector)
 
@@ -42,6 +60,24 @@ export function useCanvasSetting() {
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
   const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
 
+  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
+  const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
+  const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
+  const [currentSetting, setCurrentSetting] = useState(
+    JSON.stringify(dotLineGridSetting) === JSON.stringify(defaultDotLineGridSetting) ? { ...defaultDotLineGridSetting } : { ...dotLineGridSetting },
+  )
+  const [gridColor, setGridColor] = useRecoilState(gridColorState)
+  const [color, setColor] = useColor(gridColor ?? '#FF0000')
+  const [colorTemp, setColorTemp] = useState()
+
+  const SelectOptions = [
+    { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
+    { id: 2, name: '1/2', value: 1 / 2 },
+    { id: 3, name: '1/4', value: 1 / 4 },
+    { id: 4, name: '1/10', value: 1 / 10 },
+  ]
+  const [selectOption, setSelectOption] = useState(SelectOptions[0])
+
   useEffect(() => {
     if (!canvas) {
       return
@@ -73,51 +109,58 @@ export function useCanvasSetting() {
   }, [corridorDimension])
 
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행1', correntObjectNo)
+    console.log('useCanvasSetting 실행1', correntObjectNo)
   }, [])
 
   //흡착점 ON/OFF 변경 시
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
+    //console.log('useCanvasSetting 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
-
     if (adsorptionPointMode.fontFlag) {
       onClickOption2()
-      frontSettings()
-      fetchSettings()
     }
   }, [adsorptionPointMode])
 
   // 1 과 2 변경 시
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
+    //console.log('useCanvasSetting 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
     if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
       onClickOption2()
-      frontSettings()
-      fetchSettings()
     }
   }, [settingModalFirstOptions, settingModalSecondOptions])
 
   // 글꼴 변경 시
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행4', globalFont.fontFlag, correntObjectNo)
+    //console.log('useCanvasSetting 실행4', globalFont.fontFlag, correntObjectNo)
     if (globalFont.fontFlag) {
       onClickOption2()
-      frontSettings()
-      fetchSettings()
     }
   }, [globalFont])
 
   // 도명크기 변경 시
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행5', planSizeSettingMode.flag, correntObjectNo)
+    //console.log('useCanvasSetting 실행5', planSizeSettingMode.flag, correntObjectNo)
-
     if (planSizeSettingMode.flag) {
       onClickOption2()
-      frontSettings()
-      fetchSettings()
     }
   }, [planSizeSettingMode])
 
+  // 점/선 그리드 변경 시
+  useEffect(() => {
+    //console.log('useCanvasSetting 실행6', dotLineGridSetting.flag)
+    if (dotLineGridSetting.flag) {
+      onClickOption2()
+    }
+  }, [dotLineGridSetting])
+
+  // 그리드 색 설정 변경 시
+  useEffect(() => {
+    console.log('useCanvasSetting 실행7', colorTemp, gridColor)
+    //colorTemp는 변경 전.. 값이 있고 변경된 컬러와 다를 때 실행
+    if (colorTemp !== undefined && colorTemp !== gridColor) {
+      onClickOption2()
+    }
+  }, [color])
+
   const getFonts = (itemValue) => {
     if (!itemValue) return { id: 1, name: 'MS PGothic', value: 'MS PGothic' }
     const data = [
@@ -269,10 +312,35 @@ export function useCanvasSetting() {
           //글꼴 설정 Flag
           fontFlag: false,
         }
-        console.log('fontPatternData', fontPatternData)
 
         //조회된 글꼴 데이터 set
         setGlobalFont(fontPatternData)
+
+        //점/선 그리드
+        const patternData = {
+          INTERVAL: {
+            type: res.gridType,
+            horizontalInterval: res.gridHorizon * 10,
+            verticalInterval: res.gridVertical * 10,
+            ratioInterval: res.gridRatio * 10,
+            dimension: res.gridDimen,
+          },
+          DOT: res.dotGridDisplay,
+          LINE: res.lineGridDisplay,
+          flag: false,
+        }
+
+        const matchedOption = SelectOptions.find((option) => option.value == res.gridDimen)
+
+        // dimension 값에 맞는 옵션을 선택
+        setSelectOption(matchedOption)
+
+        setDotLineGridSettingState(patternData)
+        //setCurrentSetting(patternData)
+
+        //그리드 색 설정
+        setGridColor(res.gridColor)
+        setColorTemp(res.gridColor)
       } else {
         //조회된 글꼴 데이터가 없는 경우
 
@@ -299,6 +367,14 @@ export function useCanvasSetting() {
         })
 
         setGlobalFont({ ...globalFont, fontFlag: false })
+
+        //점/선 그리드
+        setDotLineGridSettingState({ ...defaultDotLineGridSetting, flag: false })
+        //setCurrentSetting({ ...defaultDotLineGridSetting })
+
+        //그리드 색 설정
+        setGridColor('#FF0000')
+        setColorTemp('#FF0000')
       }
       frontSettings()
     } catch (error) {
@@ -394,13 +470,26 @@ export function useCanvasSetting() {
       originPixel: dimensionLineSettings.pixel,
       originColor: dimensionLineSettings.color,
 
-      //치수선 설정
+      //도면크기 설정
       originHorizon: planSizeSettingMode.originHorizon,
       originVertical: planSizeSettingMode.originVertical,
+
+      dotGridDisplay: dotLineGridSetting.DOT,
+      lineGridDisplay: dotLineGridSetting.LINE,
+      gridType: dotLineGridSetting.INTERVAL.type,
+      gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval / 10,
+      gridVertical: dotLineGridSetting.INTERVAL.verticalInterval / 10,
+      gridRatio: dotLineGridSetting.INTERVAL.ratioInterval / 10,
+      gridDimen: dotLineGridSetting.INTERVAL.dimension,
+
+      //gridColor: gridColor.gridColor,
+      gridColor: gridColor,
     }
 
     console.log('patternData ', patternData)
 
+    setColorTemp(gridColor)
+
     // HTTP POST 요청 보내기
     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
       .then((res) => {
@@ -408,13 +497,15 @@ export function useCanvasSetting() {
 
         // Canvas 디스플레이 설정 시 해당 옵션 적용
         frontSettings()
+        // 저장 후 재조회
+        fetchSettings()
       })
       .catch((error) => {
         swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
       })
 
     //setAdsorptionRange(item.range)
-  }, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode])
+  }, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode, dotLineGridSetting, color])
 
   // Canvas 디스플레이 설정 시 해당 옵션 적용
   const frontSettings = async () => {
@@ -491,6 +582,7 @@ export function useCanvasSetting() {
 
   return {
     canvas,
+    correntObjectNo,
     settingModalFirstOptions,
     setSettingModalFirstOptions,
     settingModalSecondOptions,
@@ -516,5 +608,18 @@ export function useCanvasSetting() {
     setDimensionLineSettings,
     planSizeSettingMode,
     setPlanSizeSettingMode,
+    selectOption,
+    setSelectOption,
+    SelectOptions,
+    currentSetting,
+    setCurrentSetting,
+    dotLineGridSettingState,
+    setSettingModalGridOptions,
+    setDotLineGridSettingState,
+    resetDotLineGridSetting,
+    gridColor,
+    setGridColor,
+    color,
+    setColor,
   }
 }

src/styles/_contents.scss

@@ -884,7 +884,7 @@
     border: 1px solid #ECF0F4;
     border-radius: 3px;
     padding: 24px;
-    max-height: 350px;
+    height: 350px;
     overflow-y: auto;
     margin-bottom: 30px;
     dl{

src/styles/spinner.scss

@@ -1,109 +1,45 @@
-.spinner-wrap {
+.spinner-wrap{
-  width: 100%;
+    width: 100%;
-  height: 100vh;
+    height: 100vh;
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
-  background-color: #fff;
+    background-color: #fff;
-  .loader {
+    .loader {
-    font-size: 10px;
+        font-size: 10px;
-    width: 1.2em;
+        width: 1.2em;
-    height: 1.2em;
+        height: 1.2em;
-    border-radius: 50%;
+        border-radius: 50%;
-    position: relative;
+        position: relative;
-    text-indent: -9999em;
+        text-indent: -9999em;
-    animation: mulShdSpin 1.1s infinite ease;
+        animation: mulShdSpin 1.1s infinite ease;
-    transform: translateZ(0);
+        transform: translateZ(0);
-  }
-  @keyframes mulShdSpin {
-    0%,
-    100% {
-      box-shadow:
-        0em -2.6em 0em 0em #101010,
-        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
-        2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
-        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
-        0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-        -2.6em 0em 0 0em rgba(16, 16, 16, 0.5),
-        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7);
     }
-    12.5% {
+        @keyframes mulShdSpin {
-      box-shadow:
+            0%,
-        0em -2.6em 0em 0em rgba(16, 16, 16, 0.7),
+            100% {
-        1.8em -1.8em 0 0em #101010,
+            box-shadow: 0em -2.6em 0em 0em #101010, 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2), 2.5em 0em 0 0em rgba(16, 16, 16, 0.2), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2), 0em 2.5em 0 0em rgba(16, 16, 16, 0.2), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2), -2.6em 0em 0 0em rgba(16, 16, 16, 0.5), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7);
-        2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
+            }
-        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
+            12.5% {
-        0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
+            box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.7), 1.8em -1.8em 0 0em #101010, 2.5em 0em 0 0em rgba(16, 16, 16, 0.2), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2), 0em 2.5em 0 0em rgba(16, 16, 16, 0.2), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2), -2.6em 0em 0 0em rgba(16, 16, 16, 0.2), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5);
-        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
+            }
-        -2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
+            25% {
-        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5);
+            box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.5), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7), 2.5em 0em 0 0em #101010, 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2), 0em 2.5em 0 0em rgba(16, 16, 16, 0.2), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2), -2.6em 0em 0 0em rgba(16, 16, 16, 0.2), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
-    }
+            }
-    25% {
+            37.5% {
-      box-shadow:
+            box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.2), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5), 2.5em 0em 0 0em rgba(16, 16, 16, 0.7), 1.75em 1.75em 0 0em #101010, 0em 2.5em 0 0em rgba(16, 16, 16, 0.2), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2), -2.6em 0em 0 0em rgba(16, 16, 16, 0.2), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
-        0em -2.6em 0em 0em rgba(16, 16, 16, 0.5),
+            }
-        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7),
+            50% {
-        2.5em 0em 0 0em #101010,
+            box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.2), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2), 2.5em 0em 0 0em rgba(16, 16, 16, 0.5), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.7), 0em 2.5em 0 0em #101010, -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2), -2.6em 0em 0 0em rgba(16, 16, 16, 0.2), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
-        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
+            }
-        0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
+            62.5% {
-        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
+            box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.2), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2), 2.5em 0em 0 0em rgba(16, 16, 16, 0.2), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.5), 0em 2.5em 0 0em rgba(16, 16, 16, 0.7), -1.8em 1.8em 0 0em #101010, -2.6em 0em 0 0em rgba(16, 16, 16, 0.2), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
-        -2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
+            }
-        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
+            75% {
-    }
+            box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.2), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2), 2.5em 0em 0 0em rgba(16, 16, 16, 0.2), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2), 0em 2.5em 0 0em rgba(16, 16, 16, 0.5), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.7), -2.6em 0em 0 0em #101010, -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
-    37.5% {
+            }
-      box-shadow:
+            87.5% {
-        0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
+            box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.2), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2), 2.5em 0em 0 0em rgba(16, 16, 16, 0.2), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2), 0em 2.5em 0 0em rgba(16, 16, 16, 0.2), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.5), -2.6em 0em 0 0em rgba(16, 16, 16, 0.7), -1.8em -1.8em 0 0em #101010;
-        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5),
+            }
-        2.5em 0em 0 0em rgba(16, 16, 16, 0.7),
+        }
-        1.75em 1.75em 0 0em #101010,
+}
-        0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-        -2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
-    }
-    50% {
-      box-shadow:
-        0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
-        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
-        2.5em 0em 0 0em rgba(16, 16, 16, 0.5),
-        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.7),
-        0em 2.5em 0 0em #101010,
-        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-        -2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
-    }
-    62.5% {
-      box-shadow:
-        0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
-        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
-        2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
-        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.5),
-        0em 2.5em 0 0em rgba(16, 16, 16, 0.7),
-        -1.8em 1.8em 0 0em #101010,
-        -2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
-    }
-    75% {
-      box-shadow:
-        0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
-        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
-        2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
-        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
-        0em 2.5em 0 0em rgba(16, 16, 16, 0.5),
-        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.7),
-        -2.6em 0em 0 0em #101010,
-        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
-    }
-    87.5% {
-      box-shadow:
-        0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
-        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
-        2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
-        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
-        0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.5),
-        -2.6em 0em 0 0em rgba(16, 16, 16, 0.7),
-        -1.8em -1.8em 0 0em #101010;
-    }
-  }
-}