diff --git a/src/components/floor-plan/modal/Slope.jsx b/src/components/floor-plan/modal/Slope.jsx
new file mode 100644
index 00000000..0ae32ab6
--- /dev/null
+++ b/src/components/floor-plan/modal/Slope.jsx
@@ -0,0 +1,34 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+
+export default function Slope({ setShowSlopeSettingModal }) {
+  const { getMessage } = useMessage()
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap xxxm`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>
+          <button className="modal-close" onClick={() => setShowSlopeSettingModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="slope-wrap">
+            <div className="outline-form">
+              <span className="mr10" style={{ width: 'auto' }}>
+                {getMessage('slope')}
+              </span>
+              <div className="input-grid mr5">
+                <input type="text" className="input-origin block" defaultValue={300} />
+              </div>
+              <span className="thin">{getMessage('size.angle')}</span>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}