diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
new file mode 100644
index 00000000..c705b0eb
--- /dev/null
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
@@ -0,0 +1,155 @@
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
+import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
+import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
+import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
+import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
+import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
+import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
+
+export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal }) {
+  const { getMessage } = useMessage()
+  const [buttonAct, setButtonAct] = useState(1)
+  const types = [
+    { id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE },
+    { id: 2, name: getMessage('right.angle'), type: OUTER_LINE_TYPE.RIGHT_ANGLE },
+    { id: 3, name: getMessage('double.pitch'), type: OUTER_LINE_TYPE.DOUBLE_PITCH },
+    { id: 4, name: getMessage('angle'), type: OUTER_LINE_TYPE.ANGLE },
+    { id: 5, name: getMessage('diagonal'), type: OUTER_LINE_TYPE.DIAGONAL_LINE },
+  ]
+  const {
+    length1,
+    setLength1,
+    length2,
+    setLength2,
+    length1Ref,
+    length2Ref,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+    angle1,
+    setAngle1,
+    angle1Ref,
+    angle2,
+    setAngle2,
+    angle2Ref,
+    type,
+    setType,
+    arrow1Ref,
+    arrow2Ref,
+    outerLineDiagonalLength,
+    setOuterLineDiagonalLength,
+    outerLineDiagonalLengthRef,
+    handleRollback,
+    handleFix,
+  } = useOuterLineWall()
+
+  const outerLineProps = {
+    length1,
+    setLength1,
+    length1Ref,
+    arrow1,
+    setArrow1,
+  }
+
+  const rightAngleProps = {
+    length1,
+    setLength1,
+    length1Ref,
+    length2,
+    setLength2,
+    length2Ref,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+  }
+
+  const doublePitchProps = {
+    angle1,
+    setAngle1,
+    angle1Ref,
+    angle2,
+    setAngle2,
+    angle2Ref,
+    length1,
+    setLength1,
+    length1Ref,
+    length2,
+    setLength2,
+    length2Ref,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+    arrow1Ref,
+    arrow2Ref,
+  }
+
+  const angleProps = {
+    angle1,
+    setAngle1,
+    angle1Ref,
+    length1,
+    setLength1,
+    length1Ref,
+  }
+
+  const diagonalLineProps = {
+    length1,
+    setLength1,
+    length1Ref,
+    length2,
+    setLength2,
+    length2Ref,
+    outerLineDiagonalLength,
+    setOuterLineDiagonalLength,
+    outerLineDiagonalLengthRef,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+  }
+
+  const onClickButton = (button) => {
+    setButtonAct(button.id)
+    setType(button.type)
+  }
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>
+          <button className="modal-close" onClick={() => setShowPlaceShapeDrawingModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="modal-btn-wrap">
+            {types.map((type) => (
+              <button className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`} onClick={() => onClickButton(type)}>
+                {type.name}
+              </button>
+            ))}
+          </div>
+          <div className="properties-setting-wrap outer">
+            <div className="setting-tit">{getMessage('setting')}</div>
+            {buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
+            {buttonAct === 2 && <RightAngle props={rightAngleProps} />}
+            {buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
+            {buttonAct === 4 && <Angle props={angleProps} />}
+            {buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
+          </div>
+
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5">{getMessage('modal.cover.outline.rollback')}</button>
+            <button className="btn-frame modal act">{getMessage('modal.cover.outline.fix')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}