diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx
index bf8ef23c..9654c514 100644
--- a/src/components/common/context-menu/QContextMenu.jsx
+++ b/src/components/common/context-menu/QContextMenu.jsx
@@ -12,7 +12,7 @@ export default function QContextMenu(props) {
   let contextType = ''
 
   if (activeObject) {
-    if (activeObject.initOptions) {
+    if (activeObject.initOptions && activeObject.initOptions.name) {
       //이건 바뀔 가능성이 있음
       if (activeObject.initOptions?.name?.indexOf('guide') > -1) {
         contextType = 'surface' //면형상
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index d4b7e40b..71d23481 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -4,15 +4,21 @@ import { useEffect, useState } from 'react'
 import MenuDepth01 from './MenuDepth01'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
-import { post } from '@/lib/Axios'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import { canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
 import { outerLinePointsState } from '@/store/outerLineAtom'
+import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
 import { MENU } from '@/common/common'
 
+import { useAxios } from '@/hooks/useAxios'
+import { toastUp } from '@/hooks/useToast'
+
+import KO from '@/locales/ko.json'
+import JA from '@/locales/ja.json'
+
 export default function CanvasMenu(props) {
-  const [objectNo] = useState('test123240912001') // 이후 삭제 필요
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
   const [menuNumber, setMenuNumber] = useState(null)
   const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
@@ -22,6 +28,9 @@ export default function CanvasMenu(props) {
   const canvas = useRecoilValue(canvasState)
   const setCurrentMenu = useSetRecoilState(currentMenuState)
   const setPoints = useSetRecoilState(outerLinePointsState)
+  const globalLocale = useRecoilValue(globalLocaleStore)
+  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
+  const { post } = useAxios()
 
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
   const onClickNav = (number) => {
@@ -38,7 +47,13 @@ export default function CanvasMenu(props) {
   const firstOptions = useRecoilState(settingModalFirstOptionsState)
   const secondOptions = useRecoilState(settingModalSecondOptionsState)
 
-  useEffect(() => {}, [menuNumber, type])
+  useEffect(() => {
+    if (globalLocale === 'ko') {
+      setAppMessageState(KO)
+    } else {
+      setAppMessageState(JA)
+    }
+  }, [menuNumber, type, globalLocale])
 
   // 저장버튼(btn08) 클릭 시 호출되는 함수
   const handleSaveSettings = async () => {
@@ -65,6 +80,7 @@ export default function CanvasMenu(props) {
 
       const patternData = {
         objectNo,
+        //디스플레이 설정(다중)
         assignDisplay: dataToSend.firstOption1[0].selected,
         drawDisplay: dataToSend.firstOption1[1].selected,
         gridDisplay: dataToSend.firstOption1[2].selected,
@@ -76,9 +92,11 @@ export default function CanvasMenu(props) {
         trestleDisplay: dataToSend.firstOption1[8].selected,
         coordiDisplay: dataToSend.firstOption1[9].selected,
         drawConverDisplay: dataToSend.firstOption1[10].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,
@@ -86,13 +104,11 @@ export default function CanvasMenu(props) {
       }
 
       // HTTP POST 요청 보내기
-      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
-
-      // 응답 처리
-      alert('설정이 저장되었습니다.')
+      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+        toastUp({ message: res.returnMessage, type: 'success' })
+      })
     } catch (error) {
-      console.error('설정을 저장하는 동안 오류가 발생했습니다:', error)
-      alert('설정을 저장하는 중 오류가 발생했습니다.')
+      toastUp({ message: res.returnMessage, type: 'error' })
     }
   }
 
diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx
index 8c292a05..e0c4170d 100644
--- a/src/components/floor-plan/modal/setting01/FirstOption.jsx
+++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx
@@ -1,28 +1,24 @@
 import { useRecoilState } from 'recoil'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
-import React, { useEffect, useState } from 'react'
-import { get } from '@/lib/Axios'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useAxios } from '@/hooks/useAxios'
 
 export default function FirstOption() {
-  const [objectNo] = useState('test123240912001') // 이후 삭제 필요
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
   const { option1, option2 } = settingsModalOptions
   const { getMessage } = useMessage()
-
-  const [isFetched, setIsFetched] = useState(false) // 조회 여부 상태
+  const { get } = useAxios()
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('FirstOption useEffect 실행')
-    if (!isFetched) {
-      // 조회가 안 되었을 때만 fetchSettings 실행
-      fetchSettings()
-    }
-  }, [isFetched]) // isFetched 상태가 변할 때마다 확인
+    fetchSettings()
+  }, [objectNo])
 
   // Canvas Setting 조회 및 초기화
-  const fetchSettings = async () => {
+  const fetchSettings = useCallback(async () => {
     try {
       const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
 
@@ -49,12 +45,10 @@ export default function FirstOption() {
         option1,
         option2,
       })
-
-      setIsFetched(true) // 조회가 완료되면 isFetched를 true로 설정
     } catch (error) {
       console.error('Data fetching error:', error)
     }
-  }
+  }, [objectNo])
 
   const onClickOption = (option) => {
     option.selected = !option.selected
@@ -67,23 +61,25 @@ export default function FirstOption() {
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
         <div className="flex-check-box for2">
-          {settingsModalOptions?.option1?.map((item) => (
-            <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
-              <span className="check-area"></span>
-              <span className="title-area">{getMessage(item.name)}</span>
-            </button>
-          ))}
+          {settingsModalOptions &&
+            settingsModalOptions.option1.map((item) => (
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
+                <span className="check-area"></span>
+                <span className="title-area">{getMessage(item.name)}</span>
+              </button>
+            ))}
         </div>
       </div>
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
         <div className="flex-check-box for-line">
-          {settingsModalOptions?.option2?.map((item) => (
-            <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
-              <span className="check-area"></span>
-              <span className="title-area">{getMessage(item.name)}</span>
-            </button>
-          ))}
+          {settingsModalOptions &&
+            settingsModalOptions.option2.map((item) => (
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
+                <span className="check-area"></span>
+                <span className="title-area">{getMessage(item.name)}</span>
+              </button>
+            ))}
         </div>
       </div>
     </>
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx
index 0a568b67..7b8d8811 100644
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@@ -1,27 +1,24 @@
 import { useRecoilState } from 'recoil'
 import { settingModalSecondOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
-import React, { useEffect, useState } from 'react'
-import { get } from '@/lib/Axios'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useAxios } from '@/hooks/useAxios'
 
 export default function SecondOption() {
-  const [objectNo] = useState('test123240912001') // 이후 삭제 필요
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalSecondOptionsState)
   const { option1, option2 } = settingsModalOptions
   const { getMessage } = useMessage()
-
-  const [isFetched, setIsFetched] = useState(false) // 조회 여부 상태
+  const { get } = useAxios()
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('SecondOption useEffect 실행')
-    if (!isFetched) {
-      // 조회가 안 되었을 때만 fetchSettings 실행
-      fetchSettings()
-    }
-  }, [isFetched]) // isFetched 상태가 변할 때마다 확인
+    fetchSettings()
+  }, [objectNo])
 
-  const fetchSettings = async () => {
+  // Canvas Setting 조회 및 초기화
+  const fetchSettings = useCallback(async () => {
     try {
       const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
 
@@ -36,12 +33,10 @@ export default function SecondOption() {
         option1,
         option2,
       })
-
-      setIsFetched(true) // 조회가 완료되면 isFetched를 true로 설정
     } catch (error) {
       console.error('Data fetching error:', error)
     }
-  }
+  }, [objectNo])
 
   const onClickOption = (option) => {
     // option2에서 한 개만 선택 가능하도록 처리
@@ -54,22 +49,24 @@ export default function SecondOption() {
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.edit')}</h3>
         <div className="flex-check-box for2">
-          {settingsModalOptions.option1.map((item, index) => (
-            <button key={item.id || index} className="arr-btn">
-              <span>{getMessage(item.name)}</span>
-            </button>
-          ))}
+          {settingsModalOptions &&
+            settingsModalOptions.option1.map((item) => (
+              <button key={item.id} className="arr-btn">
+                <span>{getMessage(item.name)}</span>
+              </button>
+            ))}
         </div>
       </div>
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.absorption')}</h3>
         <div className="flex-check-box for-line">
-          {settingsModalOptions.option2.map((item, index) => (
-            <button key={item.id || index} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
-              <span className="check-area"></span>
-              <span className="title-area">{getMessage(item.name)}</span>
-            </button>
-          ))}
+          {settingsModalOptions &&
+            settingsModalOptions.option2.map((item) => (
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
+                <span className="check-area"></span>
+                <span className="title-area">{getMessage(item.name)}</span>
+              </button>
+            ))}
         </div>
         <div className="flex-check-box for-line">
           <button className="arr-btn">
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index d427b548..bdd02fcf 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -1280,13 +1280,44 @@ export function useMode() {
   }
 
   const templateSideMode = () => {
-    changeMode(canvas, Mode.EDIT)
-
     if (historyPoints.current.length >= 4) {
-      const wall = drawWallPolygon()
-      setWall(wall)
+      const firstPoint = historyPoints.current[0]
+      const lastPoint = historyPoints.current[historyPoints.current.length - 1]
+      historyPoints.current.forEach((point) => {
+        canvas?.remove(point)
+      })
+      drawLineWithLength(lastPoint, firstPoint)
 
-      console.log('sideWall', wall)
+      // 캔버스에서 모든 라인 객체를 찾습니다.
+      const lines = historyLines.current
+      historyLines.current = []
+
+      // 각 라인의 시작점과 끝점을 사용하여 다각형의 점 배열을 생성합니다.
+      const points = lines.map((line) => ({ x: line.x1, y: line.y1 }))
+
+      // 모든 라인 객체를 캔버스에서 제거합니다.
+      lines.forEach((line) => {
+        canvas?.remove(line)
+      })
+
+      // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
+      const polygon = new QPolygon(
+        points,
+        {
+          stroke: 'black',
+          fill: 'transparent',
+          viewLengthText: true,
+          fontSize: 15,
+          selectable: true,
+        },
+        canvas,
+      )
+
+      // 새로운 다각형 객체를 캔버스에 추가합니다.
+      canvas.add(polygon)
+
+      changeMode(canvas, Mode.DEFAULT)
+      return polygon
     }
   }