diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 45896d96..47b1ec88 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -3,10 +3,13 @@ import { useState } from 'react'
 import MenuDepth01 from './MenuDepth01'
 import { useRecoilState } from 'recoil'
 import { modalState } from '@/store/modalAtom'
+import { settingModalFirstOptionsState } from '@/store/settingAtom'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
+import { post } from '@/lib/Axios'
 
 export default function CanvasMenu() {
+  const [objectNo, setObjectNo] = useState('test123240912001')
   const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
   const [menuNumber, setMenuNumber] = useState(null)
   const [vertical, setVertical] = useState(true)
@@ -18,6 +21,54 @@ export default function CanvasMenu() {
       setMenuNumber(null)
     }
   }
+
+  const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
+
+  // 저장버튼(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 요청 보내기
+      const response = await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
+
+      // 응답 처리
+      console.log('서버 응답:', response.data)
+      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">
@@ -98,7 +149,7 @@ export default function CanvasMenu() {
               </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 cddab6c0..8489d1a5 100644
--- a/src/components/floor-plan/modal/setting01/FirstOption.jsx
+++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx
@@ -1,8 +1,11 @@
 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'
 
 export default function FirstOption() {
+  const [objectNo, setObjectNo] = useState('test123240912001')
   const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
   const { option1, option2 } = settingsModalOptions
   const { getMessage } = useMessage()
@@ -12,6 +15,54 @@ export default function FirstOption() {
     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">
diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js
index 2899dd4e..26afc275 100644
--- a/src/store/settingAtom.js
+++ b/src/store/settingAtom.js
@@ -4,22 +4,22 @@ export const settingModalFirstOptionsState = atom({
   key: 'settingModalFirstOptions',
   default: {
     option1: [
-      { id: 1, name: 'modal.canvas.setting.first.option.alloc', selected: false },
-      { id: 2, name: 'modal.canvas.setting.first.option.outline', selected: false },
-      { id: 3, name: 'modal.canvas.setting.first.option.plan', selected: false },
-      { id: 4, name: 'modal.canvas.setting.first.option.roof.line', selected: false },
-      { id: 5, name: 'modal.canvas.setting.first.option.grid', selected: false },
-      { id: 6, name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
-      { id: 7, name: 'modal.canvas.setting.first.option.word', selected: false },
-      { id: 8, name: 'modal.canvas.setting.first.option.trestle', selected: false },
-      { id: 9, name: 'modal.canvas.setting.first.option.flow', selected: false },
-      { id: 10, name: 'modal.canvas.setting.first.option.total', selected: false },
-      { id: 11, name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
+      { id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
+      { id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false },
+      { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: false },
+      { id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
+      { id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
+      { id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
+      { id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
+      { id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
+      { id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
+      { id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
+      { id: 11, column: 'drawConverDisplay', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
     ],
     option2: [
-      { id: 1, name: 'modal.canvas.setting.first.option.border', selected: false },
-      { id: 2, name: 'modal.canvas.setting.first.option.line', selected: false },
-      { id: 3, name: 'modal.canvas.setting.first.option.all', selected: false },
+      { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false },
+      { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false },
+      { id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: false },
     ],
   },
   dangerouslyAllowMutability: true,