diff --git a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
index 9e2ce27b..81395b31 100644
--- a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
@@ -7,6 +7,9 @@ import { contextPopupPositionState } from '@/store/popupAtom'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { canvasState, pitchTextSelector } from '@/store/canvasAtom'
 import { defaultSlope } from '@/store/commonAtom'
+import { re } from 'mathjs'
+import { basicSettingState } from '@/store/settingAtom'
+import { getChonByDegree } from '@/util/canvas-util'
 
 export default function DimensionLineSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -18,7 +21,11 @@ export default function DimensionLineSetting(props) {
   const SelectOption01 = defaultSlope
   const [basicLength, setBasicLength] = useState(0)
   const [slopeAble, setSlopeAble] = useState(false)
+  const basicSetting = useRecoilValue(basicSettingState)
   const changeSlopeRef = useRef()
+  const [options, setOptions] = useState([])
+  const [selectedSlope1, setSelectedSlope1] = useState(null)
+  const [selectedSlope2, setSelectedSlope2] = useState(null)
 
   let slopeInput1, slopeInput2
 
@@ -26,10 +33,30 @@ export default function DimensionLineSetting(props) {
     if (canvas) {
       const dimensionObject = canvas.getActiveObject()
       const id = dimensionObject.groupId
-      const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
+      const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.group.groupId === id)[0]
+      if (!textObj) return
       setBasicLength(parseInt(textObj.text))
     }
 
+    if (basicSetting.roofAngleSet === 'slope') {
+      setOptions(
+        Array.from({ length: 21 }).map((_, index) => {
+          return {
+            name: index * 0.5,
+            value: index * 0.5,
+          }
+        }),
+      )
+    } else {
+      setOptions(
+        Array.from({ length: 7 }).map((_, index) => {
+          return {
+            name: index * 5,
+            value: index * 5,
+          }
+        }),
+      )
+    }
     return () => {
       setBasicLength(0)
     }
@@ -41,45 +68,40 @@ export default function DimensionLineSetting(props) {
     if (canvas) {
       const dimensionObject = canvas.getActiveObject()
       const id = dimensionObject.groupId
-      const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
+      const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.group.groupId === id)[0]
       let resultText = changeLength.value > 0 ? changeLength.value : '0'
 
       if (slopeAble) {
-        if (slopeInput1) {
-          resultText = calculateLength(basicLength, slopeInput1.angleValue).toFixed(0)
-
-          if (slopeInput2) {
-            const length = calculateLength(basicLength, slopeInput1.angleValue, slopeInput2.angleValue)
-            resultText = length.toFixed(0)
-          }
-        }
+        resultText = !selectedSlope2
+          ? calculateLength(basicLength, selectedSlope1.value).toFixed(0)
+          : calculateLength(basicLength, selectedSlope1.value, selectedSlope2.value).toFixed(0)
       }
 
       textObj.set({
         text: String(resultText),
       })
 
+      setBasicLength(resultText)
       canvas.renderAll()
     }
   }
 
-  const handleSelectbox = (option, params) => {
-    const index = params.index
-    if (index === 1) slopeInput1 = option
-    if (index === 2) slopeInput2 = option
-  }
-
-  function calculateLength(originalLength, angle) {
-    const angleInRadians = angle * (Math.PI / 180)
-    const result = Math.sqrt(Math.pow(originalLength * Math.tan(angleInRadians), 2) + Math.pow(originalLength, 2))
-    return result
-  }
-
-  function calculateLength(originalLength, angle1, angle2) {
-    const numerator = Math.sqrt(Math.pow(angle1, 2) + 100 + Math.pow((10 * angle1) / angle2, 2)) * originalLength
-    const denominator = Math.sqrt(Math.pow((10 * angle1) / angle2, 2) + 100)
-    const result = numerator / denominator
-    return result
+  function calculateLength(originalLength, angle, angle1) {
+    console.log(angle, angle1)
+    const slope1 = basicSetting.roofAngleSet !== 'slope' ? getChonByDegree(angle) : angle
+    const slope2 = basicSetting.roofAngleSet !== 'slope' ? getChonByDegree(angle1 ?? 0) : angle1
+    if (!angle1) {
+      const angleInRadians = slope1 * (Math.PI / 180)
+      const result = Math.sqrt(Math.pow(originalLength * Math.tan(angleInRadians), 2) + Math.pow(originalLength, 2))
+      console.log(angleInRadians, result)
+      return result
+    } else {
+      const numerator = Math.sqrt(Math.pow(slope1, 2) + 100 + Math.pow((10 * slope1) / slope2, 2)) * originalLength
+      const denominator = Math.sqrt(Math.pow((10 * slope1) / slope2, 2) + 100)
+      const result = numerator / denominator
+      console.log('2222222222222222')
+      return result
+    }
   }
 
   return (
@@ -123,14 +145,32 @@ export default function DimensionLineSetting(props) {
               <div className="outline-form mb15">
                 <span className="mr10">{getMessage('slope')}</span>
                 <div className="grid-select mr10">
-                  <QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 1 }} onChange={handleSelectbox} />
+                  <QSelectBox
+                    title={''}
+                    options={options}
+                    disabled={!slopeAble}
+                    value={selectedSlope1}
+                    onChange={(e) => setSelectedSlope1(e)}
+                    showKey={'name'}
+                    sourceKey={'value'}
+                    targetKey={'value'}
+                  />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
               <div className="outline-form">
                 <span className="mr10">{getMessage('slope')}</span>
                 <div className="grid-select mr10">
-                  <QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 2 }} onChange={handleSelectbox} />
+                  <QSelectBox
+                    title={''}
+                    options={options}
+                    disabled={!slopeAble}
+                    value={selectedSlope2}
+                    onChange={(e) => setSelectedSlope2(e)}
+                    showKey={'name'}
+                    sourceKey={'value'}
+                    targetKey={'value'}
+                  />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>