배치면 초기설정 수정

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -1,113 +1,26 @@
 import { useEffect, useState } from 'react'
-import { useRecoilState } from 'recoil'
-
-import { canvasSettingState } from '@/store/canvasAtom'
-import { basicSettingState } from '@/store/settingAtom'
 
 import { useMessage } from '@/hooks/useMessage'
-import { useAxios } from '@/hooks/useAxios'
-import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
 
 import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
 import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+
 export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
-  const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
   const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
   const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
-  const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(1)
-  const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
   const { closePopup } = usePopup()
-  const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
-
   const { getMessage } = useMessage()
-  const { get, post } = useAxios()
+
-  const { swalFire } = useSwal()
+  const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting()
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
-    console.log('PlacementShapeSetting useEffect 실행')
+    fetchBasicSettings()
-
+  }, [])
-    fetchSettings()
-  }, [objectNo])
-
-  // PlacementShapeSetting 조회 및 초기화
-  const fetchSettings = async () => {
-    try {
-      await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
-        if (res.length == 0) return
-
-        // 'roofs' 배열을 생성하여 각 항목을 추가
-        const roofsRow = res.map((item) => {
-          return {
-            roofSizeSet: item.roofSizeSet,
-            roofAngleSet: item.roofAngleSet,
-          }
-        })
-
-        const roofsArray = res.some((item) => !item.roofSeq)
-          ? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
-            res.map(() => ({
-              roofApply: true,
-              roofSeq: 1,
-              roofType: 1,
-              roofWidth: 200,
-              roofHeight: 200,
-              roofHajebichi: 200,
-              roofGap: 0,
-              roofLayout: 'parallel',
-            }))
-          : res.map((item) => ({
-              roofApply: item.roofApply === '' || item.roofApply === false ? false : true,
-              roofSeq: item.roofSeq,
-              roofType: item.roofType,
-              roofWidth: item.roofWidth,
-              roofHeight: item.roofHeight,
-              roofHajebichi: item.roofHajebichi,
-              roofGap: item.roofGap,
-              roofLayout: item.roofLayout,
-            }))
-        console.log('roofsArray ', roofsArray)
-        // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
-        const patternData = {
-          roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
-          roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
-          roofs: roofsArray, // 만들어진 roofs 배열
-        }
-
-        // 데이터 설정
-        setBasicSettings({ ...patternData })
-      })
-    } catch (error) {
-      console.error('Data fetching error:', error)
-    }
-
-    if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
-      setBasicSettings({ ...canvasSetting })
-    }
-  }
-
-  const submitCanvasConfig = async () => {
-    try {
-      const patternData = {
-        objectNo,
-        roofSizeSet: basicSetting.roofSizeSet,
-        roofAngleSet: basicSetting.roofAngleSet,
-        roofMaterialsAddList: basicSetting.roofs,
-      }
-
-      await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
-        swalFire({ text: getMessage(res.returnMessage) })
-      })
-
-      //Recoil 설정
-      setCanvasSetting({ ...basicSetting })
-    } catch (error) {
-      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-    }
-  }
 
   // Function to update the roofType and corresponding values
   const handleRoofTypeChange = (index, value) => {
@@ -122,7 +35,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
         roofWidth: 265,
         roofHeight: 235,
         roofGap: 455,
-        hajebichi: 0,
+        roofHajebichi: 0,
       }
     } else if (roofType === 2) {
       updatedRoofs[index] = {
@@ -490,7 +403,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
             </table>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={() => submitCanvasConfig()}>
+            <button className="btn-frame modal act" onClick={() => basicSettingSave()}>
               {getMessage('modal.common.save')}
             </button>
           </div>

src/components/floor-plan/modal/placementShape/SizeGuide.jsx

@@ -14,7 +14,7 @@ export default function SizeGuide({ setShowSizeGuidModal }) {
         <div className="placement-table light">
           <table>
             <colgroup>
-              <col style={{ width: '60px' }} />
+              <col style={{ width: '65px' }} />
               <col />
             </colgroup>
             <tbody>

src/hooks/option/useCanvasSetting.js

@@ -1,6 +1,13 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
-import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState, dotLineGridSettingState } from '@/store/canvasAtom'
+import {
+  adsorptionPointModeState,
+  adsorptionRangeState,
+  canvasState,
+  planSizeSettingState,
+  dotLineGridSettingState,
+  canvasSettingState,
+} from '@/store/canvasAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
@@ -11,6 +18,7 @@ import {
   settingModalFirstOptionsState,
   settingModalSecondOptionsState,
   settingModalGridOptionsState,
+  basicSettingState,
 } from '@/store/settingAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { globalFontAtom } from '@/store/fontAtom'
@@ -70,6 +78,9 @@ export function useCanvasSetting() {
   const [color, setColor] = useColor(gridColor ?? '#FF0000')
   const [colorTemp, setColorTemp] = useState()
 
+  const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
+  const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
+
   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 },
@@ -112,6 +123,14 @@ export function useCanvasSetting() {
     console.log('useCanvasSetting 실행1', correntObjectNo)
   }, [])
 
+  // 배치면 초기설정 변경 시
+  useEffect(() => {
+    //console.log('useCanvasSetting canvasSetting 실행', canvasSetting)
+    if (canvasSetting.flag) {
+      basicSettingSave()
+    }
+  }, [canvasSetting])
+
   //흡착점 ON/OFF 변경 시
   useEffect(() => {
     //console.log('useCanvasSetting 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
@@ -232,6 +251,95 @@ export function useCanvasSetting() {
     }
   }
 
+  // 기본설정(PlacementShapeSetting) 조회 및 초기화
+  const fetchBasicSettings = async () => {
+    try {
+      await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}` }).then((res) => {
+        console.log('fetchBasicSettings res ', res)
+        if (res.length == 0) return
+
+        // 'roofs' 배열을 생성하여 각 항목을 추가
+        const roofsRow = res.map((item) => {
+          return {
+            roofSizeSet: item.roofSizeSet,
+            roofAngleSet: item.roofAngleSet,
+          }
+        })
+
+        const roofsArray = res.some((item) => !item.roofSeq)
+          ? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
+            res.map(() => ({
+              flag: false,
+              roofApply: true,
+              roofSeq: 1,
+              roofType: 1,
+              roofWidth: 265,
+              roofHeight: 235,
+              roofHajebichi: 0,
+              roofGap: 455,
+              // roofType: 1,
+              // roofWidth: 200,
+              // roofHeight: 200,
+              // roofHajebichi: 200,
+              // roofGap: 0,
+              roofLayout: 'parallel',
+            }))
+          : res.map((item) => ({
+              flag: false,
+              roofApply: item.roofApply === '' || item.roofApply === false ? false : true,
+              roofSeq: item.roofSeq,
+              roofType: item.roofType,
+              roofWidth: item.roofWidth,
+              roofHeight: item.roofHeight,
+              roofHajebichi: item.roofHajebichi,
+              roofGap: item.roofGap,
+              roofLayout: item.roofLayout,
+            }))
+        console.log('roofsArray ', roofsArray)
+        // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
+        const patternData = {
+          roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
+          roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
+          roofs: roofsArray, // 만들어진 roofs 배열
+        }
+
+        //console.error('patternData', patternData)
+
+        // 데이터 설정
+        setBasicSettings({ ...patternData })
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+
+    if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
+      setBasicSettings({ ...canvasSetting })
+    }
+    //setCanvasSetting({ ...basicSetting })
+  }
+
+  // 기본설정(PlacementShapeSetting) 저장
+  const basicSettingSave = async () => {
+    try {
+      const patternData = {
+        objectNo: correntObjectNo,
+        roofSizeSet: basicSetting.roofSizeSet,
+        roofAngleSet: basicSetting.roofAngleSet,
+        roofMaterialsAddList: basicSetting.roofs,
+      }
+
+      await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+      })
+
+      //Recoil 설정
+      setCanvasSetting({ ...basicSetting, flag: false })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
+  }
+
+  // CanvasSetting 조회 및 초기화
   const fetchSettings = async () => {
     try {
       const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${correntObjectNo}` })
@@ -382,7 +490,7 @@ export function useCanvasSetting() {
     }
   }
 
-  // 옵션 클릭 후 저장
+  // CanvasSetting 옵션 클릭 후 저장
   const onClickOption2 = useCallback(async () => {
     // 서버에 전송할 데이터
     const dataToSend = {
@@ -592,7 +700,6 @@ export function useCanvasSetting() {
     adsorptionRange,
     setAdsorptionRange,
     fetchSettings,
-    //onClickOption,
     frontSettings,
     globalFont,
     setGlobalFont,
@@ -621,5 +728,11 @@ export function useCanvasSetting() {
     setGridColor,
     color,
     setColor,
+    canvasSetting,
+    setCanvasSetting,
+    basicSetting,
+    setBasicSettings,
+    fetchBasicSettings,
+    basicSettingSave,
   }
 }