diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index a2a5abc3..5639b93f 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/src/components/floor-plan/FloorPlan.jsx
@@ -2,56 +2,33 @@
 
 import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { useAxios } from '@/hooks/useAxios'
-import { globalLocaleStore } from '@/store/localeAtom'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import '@/styles/contents.scss'
 
 export default function FloorPlan({ children }) {
-  const globalLocaleState = useRecoilValue(globalLocaleStore)
-  const { get } = useAxios(globalLocaleState)
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
 
-  // const [menuNumber, setMenuNumber] = useState(null)
   const { menuNumber, setMenuNumber } = useCanvasMenu()
 
+  const { fetchSettings } = useCanvasSetting()
+
   const modalProps = {
     menuNumber,
     setMenuNumber,
   }
+
   useEffect(() => {
     fetchSettings()
   }, [objectNo])
 
-  // Canvas Setting 조회
-  const fetchSettings = async () => {
-    try {
-      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
-      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
-        ...item,
-      }))
-      // 데이터 설정
-      setSettingModalFirstOptions({
-        option1: optionData1,
-        option2: optionData2,
-        dimensionDisplay: optionData5,
-      })
-      setSettingModalSecondOptions({
-        option3: optionData3,
-        option4: optionData4,
-      })
-    } catch (error) {
-      console.error('Data fetching error:', error)
-    }
-  }
+  useEffect(() => {
+    setMenuNumber(1)
+  }, [])
 
   return (
     <>
diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx
index 6373d8a8..db721dd5 100644
--- a/src/components/floor-plan/modal/setting01/FirstOption.jsx
+++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx
@@ -1,210 +1,216 @@
-import { useRecoilState, useRecoilValue } from 'recoil'
-import { settingModalSecondOptionsState } from '@/store/settingAtom'
-import { useMessage } from '@/hooks/useMessage'
 import React, { useEffect, useState } from 'react'
-import { useAxios } from '@/hooks/useAxios'
-import { useSwal } from '@/hooks/useSwal'
-import { useFirstOption } from '@/hooks/option/useFirstOption'
-import { setSurfaceShapePattern } from '@/util/canvas-util'
-import { canvasState } from '@/store/canvasAtom'
-import { POLYGON_TYPE } from '@/common/common'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+import { useMessage } from '@/hooks/useMessage'
+
+//import { useRecoilState, useRecoilValue } from 'recoil'
+//import { settingModalSecondOptionsState } from '@/store/settingAtom'
+//import { useAxios } from '@/hooks/useAxios'
+//import { useSwal } from '@/hooks/useSwal'
+//import { setSurfaceShapePattern } from '@/util/canvas-util'
+//import { canvasState } from '@/store/canvasAtom'
+//import { POLYGON_TYPE } from '@/common/common'
 
 export default function FirstOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-  const { settingModalFirstOptions, setSettingModalFirstOptions } = useFirstOption()
-  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
-  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
-  const { option3, option4 } = settingModalSecondOptions
+  const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
+  const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
   const { getMessage } = useMessage()
-  const { get, post } = useAxios()
-  const { swalFire } = useSwal()
-  const canvas = useRecoilValue(canvasState)
+
+  //const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  //const { option1, option2, dimensionDisplay } = settingModalFirstOptions
+  //const { option3, option4 } = settingModalSecondOptions
+  //const { get, post } = useAxios()
+  //const { swalFire } = useSwal()
+  //const canvas = useRecoilValue(canvasState)
+
+  const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('FirstOption useEffect 실행')
-    fetchSettings()
+    //fetchSettings()
+    //frontSettings()
   }, [objectNo])
 
-  // Canvas Setting 조회 및 초기화
-  const fetchSettings = async () => {
-    try {
-      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
-      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
+  // // Canvas Setting 조회 및 초기화
+  // const fetchSettings = async () => {
+  //   try {
+  //     const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+  //     const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
+  //     const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
+  //     const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
+  //     const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
+  //     const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
 
-      // 데이터 설정
-      setSettingModalFirstOptions({
-        option1: optionData1,
-        option2: optionData2,
-        dimensionDisplay: optionData5,
-      })
+  //     // 데이터 설정
+  //     setSettingModalFirstOptions({
+  //       option1: optionData1,
+  //       option2: optionData2,
+  //       dimensionDisplay: optionData5,
+  //     })
 
-      setSettingModalSecondOptions({
-        option3: optionData3,
-        option4: optionData4,
-      })
-    } catch (error) {
-      console.error('Data fetching error:', error)
-    }
-  }
+  //     setSettingModalSecondOptions({
+  //       option3: optionData3,
+  //       option4: optionData4,
+  //     })
+  //   } catch (error) {
+  //     console.error('Data fetching error:', error)
+  //   }
+  // }
 
-  const onClickOption = async (option) => {
-    option.selected = !option.selected
+  // const onClickOption = async (option) => {
+  //   option.selected = !option.selected
 
-    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
-    setSettingModalSecondOptions({ option3, option4 })
+  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+  //   setSettingModalSecondOptions({ option3, option4 })
 
-    try {
-      // 서버에 전송할 데이터
-      const dataToSend = {
-        firstOption1: option1.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        firstOption2: option2.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        firstOption3: dimensionDisplay.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        // secondOption1: secondOptions[0].option1.map((item) => ({
-        //   name: item.id,
-        //   name: item.name,
-        //   // 필요한 경우 데이터 항목 추가
-        // })),
-        secondOption2: option4.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-      }
+  //   try {
+  //     // 서버에 전송할 데이터
+  //     const dataToSend = {
+  //       firstOption1: option1.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       firstOption2: option2.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       firstOption3: dimensionDisplay.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       // secondOption1: secondOptions[0].option1.map((item) => ({
+  //       //   name: item.id,
+  //       //   name: item.name,
+  //       //   // 필요한 경우 데이터 항목 추가
+  //       // })),
+  //       secondOption2: option4.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //     }
 
-      const patternData = {
-        objectNo,
-        //디스플레이 설정(다중)
-        allocDisplay: dataToSend.firstOption1[0].selected,
-        outlineDisplay: dataToSend.firstOption1[1].selected,
-        gridDisplay: dataToSend.firstOption1[2].selected,
-        lineDisplay: dataToSend.firstOption1[3].selected,
-        wordDisplay: dataToSend.firstOption1[4].selected,
-        circuitNumDisplay: dataToSend.firstOption1[5].selected,
-        flowDisplay: dataToSend.firstOption1[6].selected,
-        trestleDisplay: dataToSend.firstOption1[7].selected,
-        totalDisplay: dataToSend.firstOption1[8].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,
-      }
+  //     const patternData = {
+  //       objectNo,
+  //       //디스플레이 설정(다중)
+  //       allocDisplay: dataToSend.firstOption1[0].selected,
+  //       outlineDisplay: dataToSend.firstOption1[1].selected,
+  //       gridDisplay: dataToSend.firstOption1[2].selected,
+  //       lineDisplay: dataToSend.firstOption1[3].selected,
+  //       wordDisplay: dataToSend.firstOption1[4].selected,
+  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
+  //       flowDisplay: dataToSend.firstOption1[6].selected,
+  //       trestleDisplay: dataToSend.firstOption1[7].selected,
+  //       totalDisplay: dataToSend.firstOption1[8].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,
+  //     }
 
-      // HTTP POST 요청 보내기
-      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-        swalFire({ text: getMessage(res.returnMessage) })
-      })
-    } catch (error) {
-      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-    }
-  }
+  //     // HTTP POST 요청 보내기
+  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+  //       swalFire({ text: getMessage(res.returnMessage) })
+  //     })
+  //   } catch (error) {
+  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+  //   }
+  // }
 
-  const onClickOnlyOne = async (item) => {
-    //화면 표시
-    if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
-      const options2 = settingModalFirstOptions?.option2.map((option2) => {
-        option2.selected = option2.id === item.id
-        return option2
-      })
+  // const onClickOnlyOne = async (item) => {
+  //   //화면 표시
+  //   if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
+  //     const options2 = settingModalFirstOptions?.option2.map((option2) => {
+  //       option2.selected = option2.id === item.id
+  //       return option2
+  //     })
 
-      const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+  //     const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
 
-      polygons.forEach((polygon) => {
-        setSurfaceShapePattern(polygon, item.column)
-      })
+  //     polygons.forEach((polygon) => {
+  //       setSurfaceShapePattern(polygon, item.column)
+  //     })
 
-      //치수 표시
-    } else {
-      const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
-        option.selected = option.id === item.id
-        return option
-      })
-    }
+  //     //치수 표시
+  //   } else {
+  //     const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+  //       option.selected = option.id === item.id
+  //       return option
+  //     })
+  //   }
 
-    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
 
-    try {
-      // 서버에 전송할 데이터
-      const dataToSend = {
-        firstOption1: option1.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        firstOption2: option2.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        firstOption3: dimensionDisplay.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        // secondOption1: secondOptions[0].option1.map((item) => ({
-        //   name: item.id,
-        //   name: item.name,
-        //   // 필요한 경우 데이터 항목 추가
-        // })),
-        secondOption2: option4.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-      }
+  //   try {
+  //     // 서버에 전송할 데이터
+  //     const dataToSend = {
+  //       firstOption1: option1.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       firstOption2: option2.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       firstOption3: dimensionDisplay.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       // secondOption1: secondOptions[0].option1.map((item) => ({
+  //       //   name: item.id,
+  //       //   name: item.name,
+  //       //   // 필요한 경우 데이터 항목 추가
+  //       // })),
+  //       secondOption2: option4.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //     }
 
-      const patternData = {
-        objectNo,
-        //디스플레이 설정(다중)
-        allocDisplay: dataToSend.firstOption1[0].selected,
-        outlineDisplay: dataToSend.firstOption1[1].selected,
-        gridDisplay: dataToSend.firstOption1[2].selected,
-        lineDisplay: dataToSend.firstOption1[3].selected,
-        wordDisplay: dataToSend.firstOption1[4].selected,
-        circuitNumDisplay: dataToSend.firstOption1[5].selected,
-        flowDisplay: dataToSend.firstOption1[6].selected,
-        trestleDisplay: dataToSend.firstOption1[7].selected,
-        totalDisplay: dataToSend.firstOption1[8].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,
-      }
+  //     const patternData = {
+  //       objectNo,
+  //       //디스플레이 설정(다중)
+  //       allocDisplay: dataToSend.firstOption1[0].selected,
+  //       outlineDisplay: dataToSend.firstOption1[1].selected,
+  //       gridDisplay: dataToSend.firstOption1[2].selected,
+  //       lineDisplay: dataToSend.firstOption1[3].selected,
+  //       wordDisplay: dataToSend.firstOption1[4].selected,
+  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
+  //       flowDisplay: dataToSend.firstOption1[6].selected,
+  //       trestleDisplay: dataToSend.firstOption1[7].selected,
+  //       totalDisplay: dataToSend.firstOption1[8].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,
+  //     }
 
-      // HTTP POST 요청 보내기
-      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-        swalFire({ text: getMessage(res.returnMessage) })
-      })
-    } catch (error) {
-      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-    }
-  }
+  //     // HTTP POST 요청 보내기
+  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+  //       swalFire({ text: getMessage(res.returnMessage) })
+  //     })
+  //   } catch (error) {
+  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+  //   }
+  // }
 
   return (
     <>
@@ -225,7 +231,7 @@ export default function FirstOption() {
         <div className="flex-check-box for-line">
           {settingModalFirstOptions &&
             settingModalFirstOptions.dimensionDisplay.map((item) => (
-              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(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>
@@ -237,7 +243,7 @@ export default function FirstOption() {
         <div className="flex-check-box for-line">
           {settingModalFirstOptions &&
             settingModalFirstOptions.option2.map((item) => (
-              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(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>
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx
index ceccce5e..ff8d61db 100644
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@@ -1,143 +1,148 @@
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+//import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
 import React, { useEffect, useState } from 'react'
-import { useAxios } from '@/hooks/useAxios'
-import { useSwal } from '@/hooks/useSwal'
-import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
 import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
 import { usePopup } from '@/hooks/usePopup'
 import { v4 as uuidv4 } from 'uuid'
 import FontSetting from '@/components/common/font/FontSetting'
 import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/PlanSizeSetting'
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+
+//import { useAxios } from '@/hooks/useAxios'
+//import { useSwal } from '@/hooks/useSwal'
+// import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
 
 export default function SecondOption() {
-  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
-  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
-  const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
-  const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
+  //const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  //const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  // const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
+  // const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
+  // const { option1, option2, dimensionDisplay } = settingModalFirstOptions
+  // const { option3, option4 } = settingModalSecondOptions
+  // const { get, post } = useAxios()
+  // const { swalFire } = useSwal()
 
-  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
-  const { option3, option4 } = settingModalSecondOptions
   const { getMessage } = useMessage()
-  const { get, post } = useAxios()
-  const { swalFire } = useSwal()
   const { addPopup, closePopup, closePopups } = usePopup()
   const [showFontSettingModal, setShowFontSettingModal] = useState(false)
   const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
   const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
 
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+  const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
+  const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
+  const { adsorptionPointMode, setAdsorptionPointMode } = useCanvasSetting()
+  const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
+
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('SecondOption useEffect 실행')
-    fetchSettings()
+    //fetchSettings()
   }, [objectNo])
 
   // Canvas Setting 조회 및 초기화
-  const fetchSettings = async () => {
-    try {
-      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
-      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
-        ...item,
-        selected: res[item.column],
-      }))
-      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
+  // const fetchSettings = async () => {
+  //   try {
+  //     const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+  //     const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
+  //     const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
+  //     const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
+  //     const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
+  //     const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
 
-      setSettingModalFirstOptions({
-        option1: optionData1,
-        option2: optionData2,
-        dimensionDisplay: optionData5,
-      })
-      setSettingModalSecondOptions({
-        option3: optionData3,
-        option4: optionData4,
-      })
-    } catch (error) {
-      console.error('Data fetching error:', error)
-    }
-  }
+  //     setSettingModalFirstOptions({
+  //       option1: optionData1,
+  //       option2: optionData2,
+  //       dimensionDisplay: optionData5,
+  //     })
+  //     setSettingModalSecondOptions({
+  //       option3: optionData3,
+  //       option4: optionData4,
+  //     })
+  //   } catch (error) {
+  //     console.error('Data fetching error:', error)
+  //   }
+  // }
 
-  const onClickOption = async (option) => {
-    // option4에서 한 개만 선택 가능하도록 처리
-    const updatedOption4 = option4.map((item) =>
-      item.id === option.id
-        ? { ...item, selected: true }
-        : {
-            ...item,
-            selected: false,
-          },
-    )
+  // const onClickOption = async (option) => {
+  //   // option4에서 한 개만 선택 가능하도록 처리
+  //   const updatedOption4 = option4.map((item) =>
+  //     item.id === option.id
+  //       ? { ...item, selected: true }
+  //       : {
+  //           ...item,
+  //           selected: false,
+  //         },
+  //   )
 
-    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
-    setSettingModalSecondOptions({ option3, option4: updatedOption4 })
+  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+  //   setSettingModalSecondOptions({ option3, option4: updatedOption4 })
 
-    try {
-      // 서버에 전송할 데이터
-      const dataToSend = {
-        firstOption1: option1.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        firstOption2: option2.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        firstOption3: dimensionDisplay.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        // secondOption1: secondOptions[0].option3.map((item) => ({
-        //   name: item.id,
-        //   name: item.name,
-        //   // 필요한 경우 데이터 항목 추가
-        // })),
-        secondOption2: updatedOption4.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-      }
-      const patternData = {
-        objectNo,
-        //디스플레이 설정(다중)
-        allocDisplay: dataToSend.firstOption1[0].selected,
-        outlineDisplay: dataToSend.firstOption1[1].selected,
-        gridDisplay: dataToSend.firstOption1[2].selected,
-        lineDisplay: dataToSend.firstOption1[3].selected,
-        wordDisplay: dataToSend.firstOption1[4].selected,
-        circuitNumDisplay: dataToSend.firstOption1[5].selected,
-        flowDisplay: dataToSend.firstOption1[6].selected,
-        trestleDisplay: dataToSend.firstOption1[7].selected,
-        totalDisplay: dataToSend.firstOption1[8].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,
-      }
+  //   try {
+  //     // 서버에 전송할 데이터
+  //     const dataToSend = {
+  //       firstOption1: option1.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       firstOption2: option2.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       firstOption3: dimensionDisplay.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //       // secondOption1: secondOptions[0].option3.map((item) => ({
+  //       //   name: item.id,
+  //       //   name: item.name,
+  //       //   // 필요한 경우 데이터 항목 추가
+  //       // })),
+  //       secondOption2: updatedOption4.map((item) => ({
+  //         column: item.column,
+  //         selected: item.selected,
+  //       })),
+  //     }
+  //     const patternData = {
+  //       objectNo,
+  //       //디스플레이 설정(다중)
+  //       allocDisplay: dataToSend.firstOption1[0].selected,
+  //       outlineDisplay: dataToSend.firstOption1[1].selected,
+  //       gridDisplay: dataToSend.firstOption1[2].selected,
+  //       lineDisplay: dataToSend.firstOption1[3].selected,
+  //       wordDisplay: dataToSend.firstOption1[4].selected,
+  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
+  //       flowDisplay: dataToSend.firstOption1[6].selected,
+  //       trestleDisplay: dataToSend.firstOption1[7].selected,
+  //       totalDisplay: dataToSend.firstOption1[8].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,
+  //     }
+
+  //     // HTTP POST 요청 보내기
+  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+  //       swalFire({ text: getMessage(res.returnMessage) })
+  //     })
+  //   } catch (error) {
+  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+  //   }
+  //   setAdsorptionRange(option.range)
+  // }
 
-      // HTTP POST 요청 보내기
-      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-        swalFire({ text: getMessage(res.returnMessage) })
-      })
-    } catch (error) {
-      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-    }
-    setAdsorptionRange(option.range)
-  }
   let dimensionId = null
   let fontId = null
   let planSizeId = null
@@ -192,16 +197,6 @@ export default function SecondOption() {
     setShowFontSettingModal(false)
 
     switch (type) {
-      case 'dimensionLine':
-        if (!showDimensionLineSettingModal) {
-          setShowDimensionLineSettingModal(true)
-          addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
-        } else {
-          setShowDimensionLineSettingModal(false)
-          closePopup(dimensionId)
-        }
-
-        break
       case 'font1': {
         //문자 글꼴변경
         setShowFontSettingModal(true)
@@ -210,6 +205,7 @@ export default function SecondOption() {
         addPopup(fontId + 1, 2, <FontSetting {...fontProps} />)
         break
       }
+
       case 'font2': {
         //흐름 방향 글꼴 변경
         setShowFontSettingModal(true)
@@ -218,6 +214,7 @@ export default function SecondOption() {
         addPopup(fontId + 2, 2, <FontSetting {...fontProps} />)
         break
       }
+
       case 'font3': {
         //치수 글꼴변경
         setShowFontSettingModal(true)
@@ -226,17 +223,34 @@ export default function SecondOption() {
         addPopup(fontId + 3, 2, <FontSetting {...fontProps} />)
         break
       }
-      case 'font4': //회로번호 글꼴변경
+
+      case 'font4': {
+        //회로번호 글꼴변경
         setShowFontSettingModal(true)
         fontProps.type = 'circuitNumberText'
         fontProps.id = fontId
         addPopup(fontId, 2, <FontSetting {...fontProps} />)
         break
-      case 'planSize':
-        setShowPlanSizeSettingModal(true)
+      }
 
+      case 'dimensionLine': {
+        //치수선 설정
+        if (!showDimensionLineSettingModal) {
+          setShowDimensionLineSettingModal(true)
+          addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
+        } else {
+          setShowDimensionLineSettingModal(false)
+          closePopup(dimensionId)
+        }
+        break
+      }
+
+      case 'planSize': {
+        //도면크기 설정
+        setShowPlanSizeSettingModal(true)
         addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
         break
+      }
     }
   }
 
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
new file mode 100644
index 00000000..2856b5c2
--- /dev/null
+++ b/src/hooks/option/useCanvasSetting.js
@@ -0,0 +1,268 @@
+import { useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { useAxios } from '@/hooks/useAxios'
+import { useSwal } from '@/hooks/useSwal'
+import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import { setSurfaceShapePattern } from '@/util/canvas-util'
+import { POLYGON_TYPE } from '@/common/common'
+
+import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
+
+export function useCanvasSetting() {
+  const canvas = useRecoilValue(canvasState)
+
+  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
+  const { option3, option4 } = settingModalSecondOptions
+
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { get, post } = useAxios(globalLocaleState)
+  const { getMessage } = useMessage()
+  const { swalFire } = useSwal()
+
+  const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
+  const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
+
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+
+  useEffect(() => {
+    console.log('useCanvasSetting useEffect 실행1')
+    fetchSettings()
+  }, [objectNo])
+
+  useEffect(() => {
+    console.log('useCanvasSetting useEffect 실행2')
+    //fetchSettings()
+    //onClickOption()
+    //fetchSettings()
+  }, [settingModalFirstOptions, settingModalSecondOptions])
+
+  const fetchSettings = async () => {
+    try {
+      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
+      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
+        ...item,
+      }))
+      // 데이터 설정
+      setSettingModalFirstOptions({
+        option1: optionData1,
+        option2: optionData2,
+        dimensionDisplay: optionData5,
+      })
+      setSettingModalSecondOptions({
+        option3: optionData3,
+        option4: optionData4,
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
+
+  // 옵션 클릭 후 저장
+  const onClickOption = async (item) => {
+    //치수 표시(단 건 선택)
+    if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
+      console.log('치수 표시 ', item)
+      const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+        option.selected = option.id === item.id
+        return option
+      })
+
+      //화면 표시(단 건 선택)
+    } else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
+      console.log('화면 표시 ', item)
+      const options2 = settingModalFirstOptions?.option2.map((option2) => {
+        option2.selected = option2.id === item.id
+        return option2
+      })
+
+      const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
+      polygons.forEach((polygon) => {
+        setSurfaceShapePattern(polygon, item.column)
+      })
+
+      //흡착범위 설정(단 건 선택)
+    } else if (
+      item.column === 'adsorpRangeSmall' ||
+      item.column === 'adsorpRangeSmallSemi' ||
+      item.column === 'adsorpRangeMedium' ||
+      item.column === 'adsorpRangeLarge'
+    ) {
+      console.log('화면 표시2 ', item, option4)
+      // option4에서 한 개만 선택 가능하도록 처리
+      const updatedOption4 = option4.map((option) =>
+        option.id === item.id
+          ? { ...option, selected: true }
+          : {
+              ...option,
+              selected: false,
+            },
+      )
+
+      setSettingModalSecondOptions({ option3, option4: updatedOption4 })
+
+      //디스플레이 설정(다 건 선택)
+    } else {
+      console.log('디스플레이 설정 ', item)
+      item.selected = !item.selected
+    }
+
+    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+
+    try {
+      // 서버에 전송할 데이터
+      const dataToSend = {
+        firstOption1: option1.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption2: option2.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption3: dimensionDisplay.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        // secondOption1: secondOptions[0].option1.map((item) => ({
+        //   name: item.id,
+        //   name: item.name,
+        //   // 필요한 경우 데이터 항목 추가
+        // })),
+        secondOption2: option4.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+      }
+
+      const patternData = {
+        objectNo,
+        //디스플레이 설정(다중)
+        allocDisplay: dataToSend.firstOption1[0].selected,
+        outlineDisplay: dataToSend.firstOption1[1].selected,
+        gridDisplay: dataToSend.firstOption1[2].selected,
+        lineDisplay: dataToSend.firstOption1[3].selected,
+        wordDisplay: dataToSend.firstOption1[4].selected,
+        circuitNumDisplay: dataToSend.firstOption1[5].selected,
+        flowDisplay: dataToSend.firstOption1[6].selected,
+        trestleDisplay: dataToSend.firstOption1[7].selected,
+        totalDisplay: dataToSend.firstOption1[8].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,
+      }
+
+      console.log('patternData ', patternData)
+
+      // HTTP POST 요청 보내기
+      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+
+        // Canvas 디스플레이 설정 시 해당 옵션 적용
+        frontSettings()
+      })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
+
+    setAdsorptionRange(item.range)
+  }
+
+  // Canvas 디스플레이 설정 시 해당 옵션 적용
+  const frontSettings = async () => {
+    const option1 = settingModalFirstOptions.option1
+
+    // 'allocDisplay' 할당 표시
+    // 'outlineDisplay' 외벽선 표시  'outerLine', 'wallLine'
+    // 'gridDisplay' 그리드 표시     'lindGrid', 'dotGrid'
+    // 'lineDisplay' 지붕선 표시     'roof', 'roofBase'
+    // 'wordDisplay' 문자 표시
+    // 'circuitNumDisplay' 회로번호 표시
+    // 'flowDisplay' 흐름방향 표시   'arrow'
+    // 'trestleDisplay' 가대 표시
+    // 'totalDisplay' 집계표 표시
+
+    let optionName //옵션명
+    let optionSelected //옵션상태
+
+    for (let i = 0; i < option1.length; i++) {
+      switch (option1[i].column) {
+        case 'allocDisplay': //할당 표시
+          optionName = ['1']
+          break
+        case 'outlineDisplay': //외벽선 표시
+          optionName = ['outerLine', 'wallLine']
+          break
+        case 'gridDisplay': //그리드 표시
+          optionName = ['lindGrid', 'dotGrid']
+          break
+        case 'lineDisplay': //지붕선 표시
+          optionName = ['roof', 'roofBase']
+          break
+        case 'wordDisplay': //문자 표시
+          optionName = ['6']
+          break
+        case 'circuitNumDisplay': //회로번호 표시
+          optionName = ['7']
+          break
+        case 'flowDisplay': //흐름방향 표시
+          optionName = ['arrow']
+          break
+        case 'trestleDisplay': //가대 표시
+          optionName = ['8']
+          break
+        case 'totalDisplay': //집계표 표시
+          optionName = ['9']
+          break
+      }
+      // 표시 선택 상태(true/false)
+      optionSelected = option1[i].selected
+
+      canvas
+        .getObjects()
+        .filter((obj) => optionName.includes(obj.name))
+        //.filter((obj) => obj.name === optionName)
+        .forEach((obj) => {
+          obj.set({ visible: optionSelected })
+          //obj.set({ visible: !obj.visible })
+        })
+
+      // console.log(
+      //   'optionName',
+      //   optionName,
+      //   canvas.getObjects().filter((obj) => optionName.includes(obj.name)),
+      // )
+    }
+  }
+
+  return {
+    settingModalFirstOptions,
+    setSettingModalFirstOptions,
+    settingModalSecondOptions,
+    setSettingModalSecondOptions,
+    fetchSettings,
+    onClickOption,
+    frontSettings,
+    adsorptionPointMode,
+    setAdsorptionPointMode,
+  }
+}
diff --git a/src/hooks/option/useCanvasSettingController.js b/src/hooks/option/useCanvasSettingController.js
index 72a590eb..48db6c08 100644
--- a/src/hooks/option/useCanvasSettingController.js
+++ b/src/hooks/option/useCanvasSettingController.js
@@ -46,6 +46,7 @@ export const useCanvasSettingController = () => {
     }
   }
 
+  //
   const onClickOption = async (option) => {
     option.selected = !option.selected