배치면초기설정 plan_no 추가 적용

src/components/floor-plan/CanvasMenu.jsx

@@ -329,7 +329,12 @@ export default function CanvasMenu(props) {
       x: 50,
       y: 180,
     },
+    planNo: selectedPlan?.planNo ? selectedPlan.planNo : pid,
+    openPiont: 'canvasMenus',
   }
+  /**
+   * 배치면 초기설정 팝업 열기
+   */
   const onClickPlacementInitialMenu = () => {
     addPopup(placementInitialId, 1, <PlacementShapeSetting {...placementInitialProps} />)
   }

src/components/floor-plan/FloorPlan.jsx

@@ -19,7 +19,7 @@ export default function FloorPlan({ children }) {
 
   const { closeAll } = usePopup()
   const { menuNumber, setMenuNumber } = useCanvasMenu()
-  const { fetchSettings, fetchBasicSettings } = useCanvasSetting()
+  const { fetchSettings } = useCanvasSetting()
   const resetCurrentMenu = useResetRecoilState(currentMenuState)
   useEffect(() => {
     return () => {
@@ -27,7 +27,9 @@ export default function FloorPlan({ children }) {
     }
   }, [])
 
-  // URL 파라미터에서 objectNo 설정
+  /**
+   * URL 파라미터에서 objectNo 설정
+   */
   useEffect(() => {
     if (!objectNo) {
       notFound()
@@ -35,15 +37,16 @@ export default function FloorPlan({ children }) {
     setCurrentObjectNo(objectNo)
   }, [objectNo, setCurrentObjectNo])
 
-  // 설정 데이터 fetch
+  /**
+   * 설정 데이터 fetch
+   */
   useEffect(() => {
-    if (!correntObjectNo) return // correntObjectNo가 없으면 실행하지 않음
+    /**
+     * correntObjectNo가 없으면 실행하지 않음
+     */
+    if (!correntObjectNo) return
 
-    if (menuNumber === null) {
-      //setMenuNumber(1)
-    }
     fetchSettings()
-    fetchBasicSettings()
 
     return () => {
       closeAll()

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -475,8 +475,9 @@ export default function CircuitTrestleSetting({ id }) {
         type: 'alert',
       })
       return
+    } else {
+      setTabNum(2)
     }
-    setTabNum(2)
   }
 
   // 닫기 버튼 클릭 시 처리하는 함수 추가

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

@@ -20,7 +20,7 @@ export const ROOF_MATERIAL_LAYOUT = {
   PARALLEL: 'P',
   STAIRS: 'S',
 }
-export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
+export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, planNo, openPiont }) {
   const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
   const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
   const { closePopup } = usePopup()
@@ -28,7 +28,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   const roofMaterials = useRecoilValue(roofMaterialsAtom)
 
   const globalLocale = useRecoilValue(globalLocaleStore)
-  const { basicSetting, setBasicSettings, basicSettingSave } = useCanvasSetting()
+  const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting()
   const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보
@@ -42,19 +42,26 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     hajebichi: useRef(null),
   }
 
-  //치수 입력방법(복시도입력/실측값입력/육지붕)
+  /**
+   * 치수 입력방법(복시도입력/실측값입력/육지붕)
+   */
   const roofSizeSetArray = [
     { id: 'ra01', name: 'roofSizeSet', value: '1', message: 'modal.placement.initial.setting.size.roof' },
     { id: 'ra02', name: 'roofSizeSet', value: '2', message: 'modal.placement.initial.setting.size.actual' },
     { id: 'ra03', name: 'roofSizeSet', value: '3', message: 'modal.placement.initial.setting.size.none.pitch' },
   ]
 
-  //지붕각도 설정(경사/각도)
+  /**
+   * 지붕각도 설정(경사/각도)
+   */
   const roofAngleSetArray = [
     { id: 'ra04', name: 'roofAngleSet', value: 'slope', message: 'modal.placement.initial.setting.roof.pitch' },
     { id: 'ra05', name: 'roofAngleSet', value: 'flat', message: 'modal.placement.initial.setting.roof.angle' },
   ]
 
+  /**
+   * 지붕재 초기값
+   */
   const defaultRoofSettings = {
     roofSizeSet: '1', // 기본 치수 입력 방법
     roofAngleSet: 'slope', // 기본 지붕 각도 설정
@@ -86,14 +93,24 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     width: '265',
   }
 
+  useEffect(() => {
+    console.log('🚀 ~ useEffect ~ planNo:', planNo, openPiont)
+    /**
+     * 메뉴에서 배치면초기설정 선택 시 조회
+     */
+    if (openPiont && openPiont === 'canvasMenus') fetchBasicSettings(planNo, openPiont)
+  }, [])
+
   useEffect(() => {
     if (addedRoofs.length > 0) {
       const raftCodeList = findCommonCode('203800')
       setRaftCodes(raftCodeList)
 
-      // 데이터 설정 확인 후 데이터가 없으면 기본 데이터 설정
+      /**
+       * 데이터 설정 확인 후 데이터가 없으면 기본 데이터 설정
+       */
       if (addedRoofs.length > 0) {
-        setCurrentRoof({ ...addedRoofs[0] })
+        setCurrentRoof({ ...addedRoofs[0], planNo: basicSetting.planNo })
       } else {
         setCurrentRoof(defaultRoofSettings)
       }
@@ -101,13 +118,14 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   }, [addedRoofs])
 
   useEffect(() => {
-    //console.log('🚀 ~ fetchBasicSettings ~ currentRoof :', currentRoof)
     if (!currentRoof) return
     setBasicSettings({
       ...basicSetting,
+      planNo: Number(currentRoof.planNo),
       roofSizeSet: String(currentRoof.roofSizeSet),
       roofAngleSet: currentRoof.roofAngleSet,
       roofsData: {
+        planNo: Number(currentRoof.planNo),
         roofApply: true,
         roofSeq: 0,
         roofMatlCd: currentRoof.roofMatlCd,
@@ -130,10 +148,15 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     setCurrentRoof({ ...currentRoof, roofAngleSet: value })
   }
 
-  // Function to update the roofType and corresponding values
   const handleRoofTypeChange = (value) => {
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
-    setCurrentRoof({ ...selectedRoofMaterial, index: 0, roofSizeSet: String(currentRoof.roofSizeSet), roofAngleSet: currentRoof.roofAngleSet })
+    setCurrentRoof({
+      ...selectedRoofMaterial,
+      index: 0,
+      planNo: currentRoof.planNo,
+      roofSizeSet: String(currentRoof.roofSizeSet),
+      roofAngleSet: currentRoof.roofAngleSet,
+    })
   }
 
   const changeInput = (value, e) => {
@@ -152,6 +175,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   const handleSaveBtn = () => {
     const roofInfo = {
       ...currentRoof,
+      planNo: basicSetting.planNo,
       roofCd: roofRef.roofCd.current?.value,
       width: roofRef.width.current?.value,
       length: roofRef.length.current?.value,
@@ -169,16 +193,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     console.log('save Info', {
       ...basicSetting,
       selectedRoofMaterial: {
-        // 선택된 지붕재 정보
         roofInfo,
       },
     })
 
-    // 배치면초기설정 저장
+    /**
+     * 배치면초기설정 저장
+     */
     basicSettingSave({
       ...basicSetting,
+      /**
+       * 선택된 지붕재 정보
+       */
       selectedRoofMaterial: {
-        // 선택된 지붕재 정보
         roofInfo,
       },
     })
@@ -239,9 +266,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                     <div className="pop-form-radio place">
                       {currentRoof &&
                         roofAngleSetArray.map((item, index) => (
-                          <div className="outline-form">
+                          <div className="outline-form" key={item.id}>
                             <span>
-                              <div className="d-check-radio pop" key={item.id}>
+                              <div className="d-check-radio pop">
                                 <input
                                   type="radio"
                                   id={item.id}

src/hooks/option/useCanvasSetting.js

@@ -31,7 +31,7 @@ import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { gridColorState } from '@/store/gridAtom'
 import { useColor } from 'react-color-palette'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
+import PlacementShapeSetting, { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { useCanvasMenu } from '../common/useCanvasMenu'
 import { menuTypeState } from '@/store/menuAtom'
 import { usePopup } from '../usePopup'
@@ -39,6 +39,7 @@ import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
+import { v4 as uuidv4 } from 'uuid'
 
 const defaultDotLineGridSetting = {
   INTERVAL: {
@@ -52,11 +53,11 @@ const defaultDotLineGridSetting = {
   LINE: false,
 }
 
-let previousRoofMaterialsYn = 'N' // 지붕재 select 정보 비교 후 변경된 것이 없으면 1회만 실행
+// let previousRoofMaterialsYn = 'N' // 지붕재 select 정보 비교 후 변경된 것이 없으면 1회만 실행
 
 export function useCanvasSetting() {
   const canvas = useRecoilValue(canvasState)
-  // canvas가 null이 아닐 때에만 getObjects 호출
+  /* canvas가 null이 아닐 때에만 getObjects 호출 */
   const canvasObjects = canvas ? canvas.getObjects() : []
   const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState)
 
@@ -126,6 +127,8 @@ export function useCanvasSetting() {
   const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보
   const { findCommonCode } = useCommonCode()
   const [currentRoof, setCurrentRoof] = useState(null) // 현재 선택된 지붕재 정보
+  const { addPopup } = usePopup()
+  const [popupId, setPopupId] = useState(uuidv4())
 
   const SelectOptions = [
     { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
@@ -137,40 +140,82 @@ export function useCanvasSetting() {
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector) // 선택된 지붕재 정보
   const { floorPlanState } = useContext(FloorPlanContext) // 플랜 상태
   const { closeAll } = usePopup() // 팝업 닫기
-  const previousObjectNoRef = useRef(null) // 최초 데이터 설정 확인
+  // const previousObjectNoRef = useRef(null) // 최초 데이터 설정 확인
-  const previousRoofMaterialsRef = useRef(null) // 최초 데이터 설정 확인
+  // const previousRoofMaterialsRef = useRef(null) // 최초 데이터 설정 확인
 
   useEffect(() => {
     const tempFetchRoofMaterials = !fetchRoofMaterials
 
-    //최초 1회만 실행하도록 처리
+    /* 초 1회만 실행하도록 처리 */
     setFetchRoofMaterials(tempFetchRoofMaterials)
     if (tempFetchRoofMaterials) {
       addRoofMaterials()
     }
   }, [])
 
-  useEffect(() => {
+  /**
-    // 지붕재 select 정보가 존재해야 배치면초기설정 DB 정보 비교 후 지붕재 정보를 가져올 수 있음
+   * 지붕재 초기세팅
-    if (
+   */
-      (!previousObjectNoRef.current && !correntObjectNo && previousObjectNoRef.current !== correntObjectNo) ||
+  const addRoofMaterials = async () => {
-      (roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials))
+    if (roofMaterials.length !== 0) {
-    ) {
+      return
-      // 1회만 실행
-      if (roofMaterials && previousRoofMaterialsYn === 'N') {
-        if (correntObjectNo) {
-          fetchBasicSettings()
-          previousRoofMaterialsYn = 'Y'
-        }
-      }
-
-      // 이전 값을 업데이트
-      previousObjectNoRef.current = correntObjectNo
-      previousRoofMaterialsRef.current = roofMaterials
     }
-  }, [roofMaterials, correntObjectNo])
+    const { data } = await getRoofMaterialList()
 
-  //배치면 초기설정 화면이 열리지 않아도 데이터 set 하기 위해서 추가
+    const roofLists = data.map((item, idx) => ({
+      ...item,
+      id: item.roofMatlCd,
+      name: item.roofMatlNm,
+      selected: idx === 0,
+      index: idx,
+      nameJp: item.roofMatlNmJp,
+      length: item.lenBase && parseInt(item.lenBase),
+      width: item.widBase && parseInt(item.widBase),
+      raft: item.raftBase && parseInt(item.raftBase),
+      layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL,
+      hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
+      pitch: item.pitch ? parseInt(item.pitch) : 4,
+      angle: item.angle ? parseInt(item.angle) : 21.8,
+    }))
+    setRoofMaterials(roofLists)
+    const selectedRoofMaterial = roofLists[0]
+
+    if (addedRoofs.length === 0) {
+      const newAddedRoofs = []
+      newAddedRoofs.push({ ...selectedRoofMaterial, selected: true, index: 0 })
+      setAddedRoofs(newAddedRoofs)
+    }
+    setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial })
+  }
+
+  // // ObjectNo 최초 데이터 설정 확인
+  // const previousObjectNoRef = useRef(null)
+  // // 지붕재 정보 최초 데이터 설정 확인
+  // const previousRoofMaterialsRef = useRef(null)
+
+  // useEffect(() => {
+  //   // 지붕재 select 정보가 존재해야 배치면초기설정 DB 정보 비교 후 지붕재 정보를 가져올 수 있음
+  //   if (
+  //     (!previousObjectNoRef.current && !correntObjectNo && previousObjectNoRef.current !== correntObjectNo) ||
+  //     (roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials))
+  //   ) {
+  //     // 1회만 실행
+  //     if (roofMaterials && previousRoofMaterialsYn === 'N') {
+  //       if (correntObjectNo) {
+  //         //fetchBasicSettings()
+  //         previousRoofMaterialsYn = 'Y'
+  //       }
+  //     }
+
+  //     // 이전 값을 업데이트
+  //     previousObjectNoRef.current = correntObjectNo
+  //     previousRoofMaterialsRef.current = roofMaterials
+  //   }
+  // }, [roofMaterials, correntObjectNo])
+
+  /**
+   * 배치면 초기설정 화면이 열리지 않아도 데이터 set 하기 위해서 추가
+   */
   useEffect(() => {
     if (addedRoofs.length > 0) {
       const raftCodeList = findCommonCode('203800')
@@ -215,39 +260,6 @@ export function useCanvasSetting() {
     if (settingsDataSave !== undefined) onClickOption2()
   }, [settingsData])
 
-  //지붕재 초기세팅
-  const addRoofMaterials = async () => {
-    if (roofMaterials.length !== 0) {
-      return
-    }
-    const { data } = await getRoofMaterialList()
-
-    const roofLists = data.map((item, idx) => ({
-      ...item,
-      id: item.roofMatlCd,
-      name: item.roofMatlNm,
-      selected: idx === 0,
-      index: idx,
-      nameJp: item.roofMatlNmJp,
-      length: item.lenBase && parseInt(item.lenBase),
-      width: item.widBase && parseInt(item.widBase),
-      raft: item.raftBase && parseInt(item.raftBase),
-      layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL,
-      hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
-      pitch: item.pitch ? parseInt(item.pitch) : 4,
-      angle: item.angle ? parseInt(item.angle) : 21.8,
-    }))
-    setRoofMaterials(roofLists)
-    const selectedRoofMaterial = roofLists[0]
-
-    if (addedRoofs.length === 0) {
-      const newAddedRoofs = []
-      newAddedRoofs.push({ ...selectedRoofMaterial, selected: true, index: 0 })
-      setAddedRoofs(newAddedRoofs)
-    }
-    setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial })
-  }
-
   const getFonts = (itemValue) => {
     if (!itemValue) return { id: 1, name: 'MS PGothic', value: 'MS PGothic' }
     const data = [
@@ -319,22 +331,30 @@ export function useCanvasSetting() {
     }
   }
 
-  // 기본설정(PlacementShapeSetting) 조회 및 초기화
+  /**
-  const fetchBasicSettings = async () => {
+   * 기본설정(PlacementShapeSetting) 조회 및 초기화
+   */
+  const fetchBasicSettings = async (planNo, openPiont) => {
     try {
-      await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}` }).then((res) => {
+      await get({
+        //url: `/api/canvas-management/canvas-basic-settings/by-object?objectNo=${correntObjectNo}&planNo=${pid}`,
+        url: `http://localhost:8080/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`,
+        //url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`,
+      }).then((res) => {
         let roofsRow = {}
         let roofsArray = {}
 
         if (res.length > 0) {
           roofsRow = res.map((item) => {
             return {
+              planNo: item.planNo,
               roofSizeSet: String(item.roofSizeSet),
               roofAngleSet: item.roofAngleSet,
             }
           })
           roofsArray = res.map((item) => {
             return {
+              planNo: item.planNo,
               roofApply: item.roofApply,
               roofSeq: item.roofSeq,
               roofMatlCd: item.roofMatlCd,
@@ -350,6 +370,7 @@ export function useCanvasSetting() {
         } else {
           roofsRow = [
             {
+              planNo: planNo,
               roofSizeSet: '1',
               roofAngleSet: 'slope',
             },
@@ -357,6 +378,7 @@ export function useCanvasSetting() {
 
           roofsArray = [
             {
+              planNo: planNo,
               roofApply: true,
               roofSeq: 0,
               roofMatlCd: 'ROOF_ID_WA_53A',
@@ -370,10 +392,23 @@ export function useCanvasSetting() {
             },
           ]
 
-          setMenuNumber(1)
+          /* 메뉴에서 배치면 초기설정 클릭 시 실행하지 않음 */
+          if (openPiont === null) {
+            /* 배치면 초기설정 미저장 상태이면 화면 열기 */
+            const placementInitialProps = {
+              id: popupId,
+              pos: {
+                x: 50,
+                y: 180,
+              },
+              planNo: planNo,
+              openPiont: 'useCanvasSetting',
+            }
+            addPopup(popupId, 1, <PlacementShapeSetting {...placementInitialProps} />)
+          }
         }
 
-        // 데이터 설정
+        /* 데이터 설정 */
         const addRoofs = []
         for (let i = 0; i < roofsArray.length; i++) {
           roofMaterials?.map((material) => {
@@ -387,6 +422,7 @@ export function useCanvasSetting() {
                 hajebichi: roofsArray[i].roofHajebichi,
                 raft: roofsArray[i].roofGap,
                 layout: roofsArray[i].roofLayout,
+                planNo: roofsRow[i].planNo,
                 roofSizeSet: roofsRow[i].roofSizeSet,
                 roofAngleSet: roofsRow[i].roofAngleSet,
                 pitch: roofsArray[i].roofPitch,
@@ -399,6 +435,7 @@ export function useCanvasSetting() {
         setBasicSettings({
           ...basicSetting,
           roofMaterials: addRoofs[0],
+          planNo: roofsRow[0].planNo,
           roofSizeSet: roofsRow[0].roofSizeSet,
           roofAngleSet: roofsRow[0].roofAngleSet,
           roofsData: roofsArray,
@@ -412,15 +449,19 @@ export function useCanvasSetting() {
     setCanvasSetting({ ...basicSetting })
   }
 
-  // 기본설정(PlacementShapeSetting) 저장
+  /**
+   * 기본설정(PlacementShapeSetting) 저장
+   */
   const basicSettingSave = async (params) => {
     try {
       const patternData = {
         objectNo: correntObjectNo,
+        planNo: Number(params.planNo),
         roofSizeSet: Number(params.roofSizeSet),
         roofAngleSet: params.roofAngleSet,
         roofMaterialsAddList: [
           {
+            planNo: Number(params.planNo),
             roofApply: true,
             roofSeq: 0,
             roofMatlCd:
@@ -438,21 +479,20 @@ export function useCanvasSetting() {
       }
 
       //await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData })
-      await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
+      await post({ url: `http://localhost:8080/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
-        console.log('🚀 ~ basicSettingSave ~ res :', res)
+        // await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
-
         swalFire({ text: getMessage(res.returnMessage) })
-
+        /* 배치면초기설정 조회 */
         setBasicSettings({ ...params })
       })
 
-      //Recoil 설정
+      /* CanvasSetting Recoil 설정 */
       setCanvasSetting({ ...basicSetting })
 
-      // 배치면초기설정 조회
+      /* 배치면초기설정 조회 */
-      fetchBasicSettings()
+      fetchBasicSettings(params.planNo, null)
 
-      // 메뉴 설정
+      /* 메뉴 설정 */
       if (['2', '3'].includes(basicSetting?.roofSizeSet)) {
         setMenuNumber(3)
         setType('surface')
@@ -463,16 +503,11 @@ export function useCanvasSetting() {
         setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
       }
 
-      //모듈 선택 데이터 초기화
+      /* 모듈 선택 데이터 초기화 */
       resetModuleSelectionData()
-
-      // 모듈 선택 데이터 초기화
       moduleSelectedDataTrigger({ common: {}, module: {}, roofConstructions: [] })
-
-      // 모듈 선택 데이터 초기화
       const isModuleExist = canvas.getObjects().some((obj) => obj.name === POLYGON_TYPE.MODULE)
       if (!isModuleExist) {
-        // 모듈 선택 데이터 초기화
         resetSelectedModules()
       }
     } catch (error) {
@@ -480,7 +515,9 @@ export function useCanvasSetting() {
     }
   }
 
-  // CanvasSetting 조회 및 초기화
+  /**
+   * CanvasSetting 조회 및 초기화
+   */
   const fetchSettings = async () => {
     try {
       const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${correntObjectNo}` })
@@ -493,16 +530,24 @@ export function useCanvasSetting() {
         const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
         const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))
 
-        //흡착점 ON/OFF
+        /**
+         * 흡착점 ON/OFF
+         */
         setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint })
 
-        //치수선 설정
+        /**
+         * 치수선 설정
+         */
         setDimensionLineSettings({ ...dimensionLineSettings, pixel: res.originPixel, color: res.originColor })
 
-        //도면크기 설정
+        /**
+         * 도면크기 설정
+         */
         setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: res.originHorizon, originVertical: res.originVertical })
 
-        // 데이터 설정
+        /**
+         * 데이터 설정
+         */
         setSettingModalFirstOptions({
           ...settingModalFirstOptions,
           option1: optionData1,
@@ -517,35 +562,45 @@ export function useCanvasSetting() {
 
         const fontPatternData = {
           commonText: {
-            //문자 글꼴 조회 데이터
+            /**
+             * 문자 글꼴 조회 데이터
+             */
             fontFamily: getFonts(res.wordFont),
             fontWeight: getFontStyles(res.wordFontStyle),
             fontSize: getFontSizes(res.wordFontSize),
             fontColor: getFontColors(res.wordFontColor),
           },
           flowText: {
-            //흐름방향 글꼴 조회 데이터
+            /**
+             * 흐름방향 글꼴 조회 데이터
+             */
             fontFamily: getFonts(res.flowFont),
             fontWeight: getFontStyles(res.flowFontStyle),
             fontSize: getFontSizes(res.flowFontSize),
             fontColor: getFontColors(res.flowFontColor),
           },
           dimensionLineText: {
-            //치수 글꼴 조회 데이터
+            /**
+             * 치수 글꼴 조회 데이터
+             */
             fontFamily: getFonts(res.dimensioFont),
             fontWeight: getFontStyles(res.dimensioFontStyle),
             fontSize: getFontSizes(res.dimensioFontSize),
             fontColor: getFontColors(res.dimensioFontColor),
           },
           circuitNumberText: {
-            //회로번호 글꼴 조회 데이터
+            /**
+             * 회로번호 글꼴 조회 데이터
+             */
             fontFamily: getFonts(res.circuitNumFont),
             fontWeight: getFontStyles(res.circuitNumFontStyle),
             fontSize: getFontSizes(res.circuitNumFontSize),
             fontColor: getFontColors(res.circuitNumFontColor),
           },
           lengthText: {
-            //치수선 글꼴 조회 데이터
+            /**
+             * 치수선 글꼴 조회 데이터
+             */
             fontFamily: getFonts(res.lengthFont),
             fontWeight: getFontStyles(res.lengthFontStyle),
             fontSize: getFontSizes(res.lengthFontSize),
@@ -553,10 +608,14 @@ export function useCanvasSetting() {
           },
         }
 
-        //조회된 글꼴 데이터 set
+        /**
+         * 조회된 글꼴 데이터 set
+         */
         setGlobalFont(fontPatternData)
 
-        //점/선 그리드
+        /**
+         * 점/선 그리드
+         */
         const patternData = {
           INTERVAL: {
             type: res.gridType,
@@ -572,32 +631,48 @@ export function useCanvasSetting() {
         setDotLineGridSettingState(patternData)
         //setCurrentSetting(patternData)
 
-        //그리드 색 설정
+        /**
+         * 그리드 색 설정
+         */
         setGridColor(res.gridColor)
       } else {
         //조회된 글꼴 데이터가 없는 경우 (데이터 초기화)
 
-        //흡착점 ON/OFF
+        /**
+         * 흡착점 ON/OFF
+         */
         setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: false })
 
-        //치수선 설정
+        /**
+         * 치수선 설정
+         */
         resetDimensionLineSettings()
 
-        //도면크기 설정
+        /**
+         * 도면크기 설정
+         */
         resetPlanSizeSettingMode()
 
-        // 데이터 설정
+        /**
+         * 데이터 설정
+         */
         resetSettingModalFirstOptions()
         resetSettingModalSecondOptions()
 
-        // 데이터 초기화
+        /**
+         * 데이터 초기화
+         */
         resetGlobalFont()
 
-        //점/선 그리드
+        /**
+         * 점/선 그리드
+         */
         setDotLineGridSettingState({ ...defaultDotLineGridSetting })
         //setCurrentSetting({ ...defaultDotLineGridSetting })
 
-        //그리드 색 설정
+        /**
+         * 그리드 색 설정
+         */
         setGridColor('#FF0000')
       }
 
@@ -607,9 +682,13 @@ export function useCanvasSetting() {
     }
   }
 
-  // CanvasSetting 옵션 클릭 후 저장
+  /**
+   * CanvasSetting 옵션 클릭 후 저장
+   */
   const onClickOption2 = async () => {
-    // 서버에 전송할 데이터
+    /**
+     * 서버에 전송할 데이터
+     */
     const dataToSend = {
       firstOption1: option1.map((item) => ({
         column: item.column,
@@ -630,9 +709,13 @@ export function useCanvasSetting() {
       })),
     }
     const patternData = {
-      //견적서 번호
+      /**
+       * 견적서 번호
+       */
       objectNo: correntObjectNo,
-      //디스플레이 설정(다중)
+      /**
+       * 디스플레이 설정(다중)
+       */
       allocDisplay: dataToSend.firstOption1[0].selected,
       outlineDisplay: dataToSend.firstOption1[1].selected,
       gridDisplay: dataToSend.firstOption1[2].selected,
@@ -643,60 +726,82 @@ export function useCanvasSetting() {
       trestleDisplay: dataToSend.firstOption1[7].selected,
       imageDisplay: dataToSend.firstOption1[8].selected,
       totalDisplay: dataToSend.firstOption1[9].selected,
-      //차수 표시(단 건)
+      /**
+       * 차수 표시(단 건)
+       */
       corridorDimension: dataToSend.firstOption3[0].selected,
       realDimension: dataToSend.firstOption3[1].selected,
       noneDimension: dataToSend.firstOption3[2].selected,
-      //화면 표시(단 건)
+      /**
+       * 화면 표시(단 건)
+       */
       onlyBorder: dataToSend.firstOption2[0].selected,
       lineHatch: dataToSend.firstOption2[1].selected,
       allPainted: dataToSend.firstOption2[2].selected,
-      //흡착범위 설정(단 건)
+      /**
+       * 흡착범위 설정(단 건)
+       */
       adsorpRangeSmall: dataToSend.secondOption2[0].selected,
       adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
 
-      //흡착점 ON/OFF
+      /**
+       * 흡착점 ON/OFF
+       */
       adsorpPoint: adsorptionPointMode.adsorptionPoint,
       //??: adsorptionRange, 사용여부 확인 필요
 
-      //글꼴 설정
+      /**
+       * 글꼴 설정
+       */
       //문자 글꼴
       wordFont: globalFont.commonText.fontFamily?.value ?? 'MS PGothic',
       wordFontStyle: globalFont.commonText.fontWeight?.value ?? 'normal',
       wordFontSize: globalFont.commonText.fontSize?.value ?? 16,
       wordFontColor: globalFont.commonText.fontColor?.value ?? 'black',
 
-      //흐름방향 글꼴
+      /**
+       * 흐름방향 글꼴
+       */
       flowFont: globalFont.flowText.fontFamily?.value ?? 'MS PGothic',
       flowFontStyle: globalFont.flowText.fontWeight?.value ?? 'normal',
       flowFontSize: globalFont.flowText.fontSize?.value ?? 16,
       flowFontColor: globalFont.flowText.fontColor?.value ?? 'black',
 
-      //치수 글꼴
+      /**
+       * 치수 글꼴
+       */
       dimensioFont: globalFont.dimensionLineText.fontFamily?.value ?? 'MS PGothic',
       dimensioFontStyle: globalFont.dimensionLineText.fontWeight?.value ?? 'normal',
       dimensioFontSize: globalFont.dimensionLineText.fontSize?.value ?? 16,
       dimensioFontColor: globalFont.dimensionLineText.fontColor?.value ?? 'black',
 
-      //회로번호 글꼴
+      /**
+       * 회로번호 글꼴
+       */
       circuitNumFont: globalFont.circuitNumberText.fontFamily?.value ?? 'MS PGothic',
       circuitNumFontStyle: globalFont.circuitNumberText.fontWeight?.value ?? 'normal',
       circuitNumFontSize: globalFont.circuitNumberText.fontSize?.value ?? 16,
       circuitNumFontColor: globalFont.circuitNumberText.fontColor?.value ?? 'black',
 
-      //치수선 글꼴
+      /**
+       * 치수선 글꼴
+       */
       lengthFont: globalFont.lengthText.fontFamily?.value ?? 'MS PGothic',
       lengthFontStyle: globalFont.lengthText.fontWeight?.value ?? 'normal',
       lengthFontSize: globalFont.lengthText.fontSize?.value ?? 16,
       lengthFontColor: globalFont.lengthText.fontColor?.value ?? 'black',
 
-      //치수선 설정
+      /**
+       * 치수선 설정
+       */
       originPixel: dimensionLineSettings.pixel,
       originColor: dimensionLineSettings.color,
 
-      //도면크기 설정
+      /**
+       * 도면크기 설정
+       */
       originHorizon: planSizeSettingMode.originHorizon,
       originVertical: planSizeSettingMode.originVertical,
 
@@ -713,14 +818,20 @@ export function useCanvasSetting() {
 
     console.log('patternData ', patternData)
 
-    // HTTP POST 요청 보내기
+    /**
+     * 저장 API 호출
+     */
     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
       .then((res) => {
         //swalFire({ text: getMessage(res.returnMessage) })
 
-        // Canvas 디스플레이 설정 시 해당 옵션 적용
+        /**
+         * Canvas 디스플레이 설정 시 해당 옵션 적용
+         */
         frontSettings()
-        // 저장 후 재조회
+        /**
+         * 저장 후 재조회
+         */
         fetchSettings()
       })
       .catch((error) => {
@@ -731,77 +842,80 @@ export function useCanvasSetting() {
     //setAdsorptionRange(item.range)
   }
 
-  // Canvas 디스플레이 설정 시 해당 옵션 적용
+  /**
+   * Canvas 디스플레이 설정 시 해당 옵션 적용
+   */
   const frontSettings = async () => {
     const option1 = settingModalFirstOptions.option1
 
-    // 'allocDisplay' 할당 표시
+    /**
-    // 'outlineDisplay' 외벽선 표시  'outerLine', POLYGON_TYPE.WALL
+     * 'allocDisplay' 할당 표시
-    // 'gridDisplay' 그리드 표시     'lindGrid', 'dotGrid'
+     * 'outlineDisplay' 외벽선 표시  'outerLine', POLYGON_TYPE.WALL
-    // 'lineDisplay' 지붕선 표시     'roof', POLYGON_TYPE.ROOF
+     * 'gridDisplay' 그리드 표시     'lindGrid', 'dotGrid'
-    // 'wordDisplay' 문자 표시
+     * 'lineDisplay' 지붕선 표시     'roof', POLYGON_TYPE.ROOF
-    // 'circuitNumDisplay' 회로번호 표시
+     * 'wordDisplay' 문자 표시
-    // 'flowDisplay' 흐름방향 표시   'arrow', 'flowText'
+     * 'circuitNumDisplay' 회로번호 표시
-    // 'trestleDisplay' 가대 표시
+     * 'flowDisplay' 흐름방향 표시   'arrow', 'flowText'
-    // 'imageDisplay' 이미지 표시
+     * 'trestleDisplay' 가대 표시
-    // 'totalDisplay' 집계표 표시
+     * 'imageDisplay' 이미지 표시
+     * 'totalDisplay' 집계표 표시
+     */
 
-    let optionName //옵션명
+    /**
-    let optionSelected //옵션상태
+     * 옵션명
+     * 옵션상태
+     */
+    let optionName
+    let optionSelected
 
     for (let i = 0; i < option1.length; i++) {
       switch (option1[i].column) {
-        case 'allocDisplay': //할당 표시
+        case 'allocDisplay':
           optionName = []
           break
-        case 'outlineDisplay': //외벽선 표시
+        case 'outlineDisplay':
           optionName = ['outerLine', POLYGON_TYPE.WALL]
           break
-        case 'gridDisplay': //그리드 표시
+        case 'gridDisplay':
           optionName = ['lindGrid', 'dotGrid', 'tempGrid']
           break
-        case 'lineDisplay': //지붕선 표시
+        case 'lineDisplay':
           optionName = ['roof', POLYGON_TYPE.ROOF]
           break
-        case 'wordDisplay': //문자 표시
+        case 'wordDisplay':
           optionName = ['commonText']
           break
-        case 'circuitNumDisplay': //회로번호 표시
+        case 'circuitNumDisplay':
           optionName = ['circuitNumber']
           break
-        case 'flowDisplay': //흐름방향 표시
+        case 'flowDisplay':
           optionName = ['arrow', 'flowText']
           break
-        case 'trestleDisplay': //가대 표시
+        case 'trestleDisplay':
           optionName = ['rack', 'smartRack', 'bracket', 'eaveBar', 'halfEaveBar']
           break
-        case 'imageDisplay': //이미지 표시
+        case 'imageDisplay':
           optionName = ['9']
           break
-        case 'totalDisplay': //집계표 표시
+        case 'totalDisplay':
-          // 작업할 필요 없음
+          /**
+           * 작업할 필요 없음
+           */
           optionName = []
           break
       }
-      // 표시 선택 상태(true/false)
+      /**
+       * 표시 선택 상태(true/false)
+       */
       optionSelected = option1[i].selected
 
-      //canvas.getObjects() >> canvasObjects
       canvasObjects
         .filter((obj) => optionName.includes(obj.name))
-        //.filter((obj) => obj.name === optionName)
         .forEach((obj) => {
           obj.set({ visible: optionSelected })
-          //obj.set({ visible: !obj.visible })
         })
 
       canvas?.renderAll()
-
-      // console.log(
-      //   'optionName',
-      //   optionName,
-      //   canvas.getObjects().filter((obj) => optionName.includes(obj.name)),
-      // )
     }
   }
 

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -100,19 +100,26 @@ export function useRoofAllocationSetting(id) {
       closePopup(id)
     }
 
-    fetchBasicSettings()
+    fetchBasicSettings(basicSetting.planNo, null)
   }, [])
 
-  // 지붕면 할당 조회 및 초기화
+  /**
-  const fetchBasicSettings = async () => {
+   * 지붕면 할당 조회 및 초기화
+   */
+  const fetchBasicSettings = async (planNo, openPiont) => {
     try {
-      await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}` }).then((res) => {
+      await get({
+        //url: `/api/canvas-management/canvas-basic-settings/by-object/objectNo=${correntObjectNo}/planNo=${currentCanvasPlan.planNo}`,
+        url: `http://localhost:8080/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`,
+        // url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`,
+      }).then((res) => {
         console.log('🚀 ~ useRoofAllocationSetting ~ fetchBasicSettings ~ res >>>>>>>>>>>>>>>>>>>>> :', res)
         let roofsArray = {}
 
         if (res.length > 0) {
           roofsArray = res.map((item) => {
             return {
+              planNo: item.planNo,
               roofApply: item.roofApply,
               roofSeq: item.roofSeq,
               roofMatlCd: item.roofMatlCd,
@@ -128,6 +135,7 @@ export function useRoofAllocationSetting(id) {
         } else {
           roofsArray = [
             {
+              planNo: planNo,
               roofApply: true,
               roofSeq: 0,
               roofMatlCd: 'ROOF_ID_WA_53A',
@@ -142,11 +150,9 @@ export function useRoofAllocationSetting(id) {
           ]
         }
 
-        console.log('fetchBasicSettings roofsArray', roofsArray)
+        /**
-
+         * 데이터 설정
-        console.log(roofsArray)
+         */
-
-        // 데이터 설정
         const selectRoofs = []
         for (let i = 0; i < roofsArray.length; i++) {
           roofMaterials?.map((material) => {
@@ -169,15 +175,16 @@ export function useRoofAllocationSetting(id) {
         }
 
         // setCurrentRoofList(selectRoofs)
-        //setBasicSetting({ ...basicSetting, roofsData: roofsArray })
         setBasicSetting({
           ...basicSetting,
+          planNo: res[0].planNo,
           roofSizeSet: res[0].roofSizeSet,
           roofAngleSet: res[0].roofAngleSet,
           roofsData: roofsArray,
           selectedRoofMaterial: selectRoofs.find((roof) => roof.selected),
         })
         setBasicInfo({
+          planNo: '' + res[0].planNo,
           roofSizeSet: '' + res[0].roofSizeSet,
           roofAngleSet: '' + res[0].roofAngleSet,
         })
@@ -187,14 +194,18 @@ export function useRoofAllocationSetting(id) {
     }
   }
 
-  // 지붕면 할당 저장
+  /**
+   * 지붕면 할당 저장
+   */
   const basicSettingSave = async () => {
     try {
       const patternData = {
         objectNo: correntObjectNo,
+        planNo: Number(basicSetting.planNo),
         roofSizeSet: Number(basicSetting.roofSizeSet),
         roofAngleSet: basicSetting.roofAngleSet,
         roofAllocationList: currentRoofList.map((item, index) => ({
+          planNo: Number(basicSetting.planNo),
           roofApply: item.selected,
           roofSeq: index,
           roofMatlCd: item.roofMatlCd === null || item.roofMatlCd === undefined ? 'ROOF_ID_WA_53A' : item.roofMatlCd,
@@ -210,14 +221,15 @@ export function useRoofAllocationSetting(id) {
 
       console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData)
 
-      await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => {
+      await post({ url: `http://localhost:8080/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => {
+        // await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => {
         console.log('roof-allocation-settings res ', res)
         swalFire({ text: getMessage(res.returnMessage) })
       })
 
       //Recoil 설정
       //setCanvasSetting({ ...basicSetting })
-      fetchBasicSettings()
+      fetchBasicSettings(basicSetting.planNo, null)
     } catch (error) {
       swalFire({ text: error.message, icon: 'error' })
     }
@@ -249,11 +261,15 @@ export function useRoofAllocationSetting(id) {
     setCurrentRoofList(newRoofList)
   }
 
-  // 선택한 지붕재로 할당
+  /**
+   * 선택한 지붕재로 할당
+   */
   const handleSave = () => {
     basicSettingSave()
 
-    // 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정
+    /**
+     * 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정
+     */
     if (checkInnerLines()) {
       addPopup(popupId, 1, <ActualSizeSetting id={popupId} />)
     } else {
@@ -262,7 +278,9 @@ export function useRoofAllocationSetting(id) {
     }
   }
 
-  // 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우
+  /**
+   * 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우
+   */
   const handleSaveContext = () => {
     basicSettingSave()
     const newRoofList = currentRoofList.map((roof, idx) => {
@@ -400,7 +418,9 @@ export function useRoofAllocationSetting(id) {
     canvas?.renderAll()
   }
 
-  // 지붕재 변경
+  /**
+   * 지붕재 변경
+   */
   const handleChangeRoofMaterial = (value, index) => {
     const selectedIndex = roofMaterials.findIndex((roof) => roof.selected)
 
@@ -415,7 +435,9 @@ export function useRoofAllocationSetting(id) {
     setCurrentRoofList(newRoofList)
   }
 
-  // 기본 지붕재 radio값 변경
+  /**
+   * 기본 지붕재 radio값 변경
+   */
   const handleDefaultRoofMaterial = (index) => {
     const newRoofList = currentRoofList.map((roof, idx) => {
       return { ...roof, selected: idx === index }
@@ -424,7 +446,9 @@ export function useRoofAllocationSetting(id) {
     setCurrentRoofList(newRoofList)
   }
 
-  // 서까래 변경
+  /**
+   * 서까래 변경
+   */
   const handleChangeRaft = (e, index) => {
     const raftValue = e.clCode
 
@@ -451,42 +475,6 @@ export function useRoofAllocationSetting(id) {
 
   const handleChangeInput = (e, type = '', index) => {
     const value = e.target.value
-    /*if (type === 'pitch') {
-      // type이 pitch인 경우 소수점 1자리까지만 입력 가능
-      const reg = /^[0-9]+(\.[0-9]{0,1})?$/
-
-      if (!reg.test(value)) {
-        e.target.value = value.substring(0, value.length - 1)
-        const newRoofList = currentRoofList.map((roof, idx) => {
-          if (idx === index) {
-            return {
-              ...roof,
-              [type]: currentAngleType === 'slope' ? value.substring(0, value.length - 1) : getChonByDegree(value.substring(0, value.length - 1)),
-            }
-          }
-          return roof
-        })
-
-        setCurrentRoofList(newRoofList)
-
-        return
-      } else {
-        const newRoofList = currentRoofList.map((roof, idx) => {
-          if (idx === index) {
-            return {
-              ...roof,
-              [type]: currentAngleType === 'slope' ? value : getChonByDegree(value),
-            }
-          }
-          return roof
-        })
-
-        setCurrentRoofList(newRoofList)
-      }
-
-      return
-    }*/
-
     const newRoofList = currentRoofList.map((roof, idx) => {
       if (idx === index) {
         return { ...roof, [type]: value }
@@ -516,7 +504,9 @@ export function useRoofAllocationSetting(id) {
     setCurrentRoofList(newRoofList)
   }
 
-  // 모듈 선택에서 선택한 데이터 초기화
+  /**
+   * 모듈 선택에서 선택한 데이터 초기화
+   */
   const modifyModuleSelectionData = () => {
     if (moduleSelectionData.roofConstructions.length > 0) {
       setModuleSelectionData({ ...moduleSelectionData, roofConstructions: [] })

src/hooks/usePlan.js

@@ -15,6 +15,7 @@ import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 
 export function usePlan(params = {}) {
   const { floorPlanState } = useContext(FloorPlanContext)
@@ -38,6 +39,8 @@ export function usePlan(params = {}) {
   const resetOuterLinePoints = useResetRecoilState(outerLinePointsState)
   const resetPlacementShapeDrawingPoints = useResetRecoilState(placementShapeDrawingPointsState)
 
+  const { fetchBasicSettings } = useCanvasSetting()
+
   /**
    * 마우스 포인터의 가이드라인 제거
    */
@@ -209,6 +212,9 @@ export function usePlan(params = {}) {
           setPlans((plans) => [...plans.map((plan) => ({ ...plan, isCurrent: false })), newPlan])
           swalFire({ text: getMessage('plan.message.save') })
         }
+
+        /* 플랜 추가 시 배치면초기설정 정보 조회 */
+        fetchBasicSettings(newPlan.planNo, null)
       })
       .catch((error) => {
         swalFire({ text: error.response.data.message, icon: 'error' })
@@ -267,6 +273,10 @@ export function usePlan(params = {}) {
   const handleCurrentPlan = async (newCurrentId) => {
     const planNo = plans?.find((obj) => obj.id === newCurrentId).planNo
     const objectNo = floorPlanState.objectNo
+
+    /* 플랜 이동 시 배치면초기설정 정보 조회 */
+    fetchBasicSettings(planNo, null)
+
     //견적서 or 발전시뮬
 
     if (pathname !== '/floor-plan') {
@@ -409,6 +419,10 @@ export function usePlan(params = {}) {
       .then((res) => {
         setPlans((plans) => plans.filter((plan) => plan.id !== targetPlan.id))
         removeImage(currentCanvasPlan.id)
+
+        /* 플랜 삭제 후 배치면 초기설정 삭제 */
+        deleteBasicSettings(targetPlan.objectNo, targetPlan.planNo)
+
         swalFire({ text: getMessage('plan.message.delete') })
       })
       .catch((error) => {
@@ -422,6 +436,9 @@ export function usePlan(params = {}) {
     } else if (targetPlan.id !== lastPlan.id) {
       setCurrentCanvasPlan(lastPlan)
       setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === lastPlan.id })))
+
+      /* 플랜 삭제 시 그 전 플랫의 배치면초기설정 정보 조회 */
+      fetchBasicSettings(lastPlan.planNo, null)
     }
   }
 
@@ -470,6 +487,17 @@ export function usePlan(params = {}) {
     }
   }
 
+  /**
+   * 플랜 삭제 시 배치면 초기설정 데이터 삭제
+   *
+   * @param {string} objectNo - 물건번호
+   * @param {string} planNo - 플랜번호
+   */
+  const deleteBasicSettings = async (objectNo, planNo) => {
+    await promiseDel({ url: `http://localhost:8080/api/canvas-management/delete-basic-settings/${objectNo}/${planNo}` })
+    //await promiseDel({ url: `/api/canvas-management/delete-basic-settings/${objectNo}/${planNo}` })
+  }
+
   return {
     canvas,
     plans,