diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 65ac569d..477cdfde 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -3,8 +3,12 @@ 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 } from 'recoil'
+import { settingModalFirstOptionsState } from '@/store/settingAtom'
 
 export default function CanvasMenu(props) {
+  const [objectNo] = useState('test123240912001')
   const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
   const [menuNumber, setMenuNumber] = useState(null)
   const [vertical, setVertical] = useState(true)
@@ -21,8 +25,55 @@ export default function CanvasMenu(props) {
     setShowOutlineModal,
     type,
   }
+
+  const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
+
   useEffect(() => {}, [menuNumber, type])
 
+  // 저장버튼(btn08) 클릭 시 호출되는 함수
+  const handleSaveSettings = async () => {
+    try {
+      // 서버에 전송할 데이터
+      const dataToSend = {
+        option1: settingsModalOptions[0].option1.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        option2: settingsModalOptions[0].option2.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+      }
+
+      const patternData = {
+        objectNo,
+        assignDisplay: dataToSend.option1[0].selected,
+        drawDisplay: dataToSend.option1[1].selected,
+        gridDisplay: dataToSend.option1[2].selected,
+        charDisplay: dataToSend.option1[3].selected,
+        flowDisplay: dataToSend.option1[4].selected,
+        hallwayDimenDisplay: dataToSend.option1[5].selected,
+        actualDimenDisplay: dataToSend.option1[6].selected,
+        noDimenDisplay: dataToSend.option1[7].selected,
+        trestleDisplay: dataToSend.option1[8].selected,
+        coordiDisplay: dataToSend.option1[9].selected,
+        drawConverDisplay: dataToSend.option1[10].selected,
+        onlyBorder: dataToSend.option2[0].selected,
+        lineHatch: dataToSend.option2[1].selected,
+        allPainted: dataToSend.option2[2].selected,
+      }
+
+      // HTTP POST 요청 보내기
+      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
+
+      // 응답 처리
+      alert('설정이 저장되었습니다.')
+    } catch (error) {
+      console.error('설정을 저장하는 동안 오류가 발생했습니다:', error)
+      alert('설정을 저장하는 중 오류가 발생했습니다.')
+    }
+  }
+
   return (
     <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
       <div className="canvas-menu-inner">
@@ -104,7 +155,7 @@ export default function CanvasMenu(props) {
               </div>
               <div className="btn-from">
                 <button className="btn07"></button>
-                <button className="btn08"></button>
+                <button className="btn08" onClick={handleSaveSettings}></button>
                 <button className="btn09"></button>
               </div>
             </>
diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx
index 8489d1a5..fd2577a5 100644
--- a/src/components/floor-plan/modal/setting01/FirstOption.jsx
+++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx
@@ -5,64 +5,60 @@ import React, { useEffect, useState } from 'react'
 import { get } from '@/lib/Axios'
 
 export default function FirstOption() {
-  const [objectNo, setObjectNo] = useState('test123240912001')
+  const [objectNo] = useState('test123240912001')
   const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
   const { option1, option2 } = settingsModalOptions
   const { getMessage } = useMessage()
+
+  // 초기 조회
+  useEffect(() => {
+    console.log('useEffect 실행')
+    fetchSettings()
+  }, [])
+
+  // Canvas Setting 조회 및 초기화
+  const fetchSettings = async () => {
+    try {
+      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+
+      // console.log(res)
+
+      const options1 = [
+        'assignDisplay',
+        'drawDisplay',
+        'gridDisplay',
+        'charDisplay',
+        'flowDisplay',
+        'hallwayDimenDisplay',
+        'actualDimenDisplay',
+        'noDimenDisplay',
+        'trestleDisplay',
+        'coordiDisplay',
+        'drawConverDisplay',
+      ]
+      const option1 = settingsModalOptions.option1.map((item, index) => ({ ...item, selected: res[options1[index]] }))
+
+      const options2 = ['onlyBorder', 'lineHatch', 'allPainted']
+      const option2 = settingsModalOptions.option2.map((item, index) => ({ ...item, selected: res[options2[index]] }))
+
+      // 데이터 설정
+      setSettingModalOptions({
+        option1,
+        option2,
+        // rangeSetting: data.rangeSetting,
+        // gridSettings: data.gridSettings,
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
+
   const onClickOption = (option) => {
     option.selected = !option.selected
 
     setSettingModalOptions({ option1, option2 })
   }
 
-  // 초기 조회
-  useEffect(() => {
-    // Canvas Setting 조회 및 초기화
-    const fetchSettings = async () => {
-      try {
-        const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
-
-        // console.log(res)
-
-        const data = {
-          option1: [
-            { id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: res.assignDisplay },
-            { id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: res.drawDisplay },
-            { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: res.gridDisplay },
-            { id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: res.charDisplay },
-            { id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: res.flowDisplay },
-            { id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: res.hallwayDimenDisplay },
-            { id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: res.actualDimenDisplay },
-            { id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: res.noDimenDisplay },
-            { id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: res.trestleDisplay },
-            { id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: res.coordiDisplay },
-            { id: 11, column: 'drawConverDisplay', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: res.drawConverDisplay },
-          ],
-          option2: [
-            { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: res.onlyBorder },
-            { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: res.lineHatch },
-            { id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: res.allPainted },
-          ],
-
-          //rangeSetting: res.adsorpRangeSetting,
-          //gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd],
-        }
-
-        // 데이터 설정
-        setSettingModalOptions({
-          option1: data.option1,
-          option2: data.option2,
-          // rangeSetting: data.rangeSetting,
-          // gridSettings: data.gridSettings,
-        })
-      } catch (error) {
-        console.error('Data fetching error:', error)
-      }
-    }
-
-    fetchSettings()
-  }, [])
-
   return (
     <>
       <div className="modal-check-btn-wrap">