diff --git a/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx b/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx
new file mode 100644
index 00000000..00f00e80
--- /dev/null
+++ b/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx
@@ -0,0 +1,74 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+import { useRoofLinePropertySetting } from '@/hooks/surface/useRoofLinePropertySetting'
+import { useEffect } from 'react'
+import { LINE_TYPE } from '@/common/common'
+import { useSwal } from '@/hooks/useSwal'
+
+export default function PlacementSurfaceLineProperty(props) {
+  const { id, pos = { x: 50, y: 230 }, roof } = props
+  const { closePopup } = usePopup()
+  // const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id)
+  const { roofLinesInit, handleSetRidge, handleSetEaves, handleSetGable, handleRollback, handleFix } = useRoofLinePropertySetting(id, roof)
+  const { getMessage } = useMessage()
+  const { swalFire } = useSwal()
+
+  useEffect(() => {
+    roofLinesInit(roof)
+  }, [])
+
+  const handleClose = () => {
+    const notSettingLines = roof.lines.filter(
+      (line) =>
+        !line.attributes.type || ![LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.SUBLINE.RIDGE].includes(line.attributes.type),
+    )
+    if (notSettingLines.length > 0) {
+      swalFire({ text: getMessage('modal.canvas.setting.roofline.properties.setting.not.setting'), type: 'alert', icon: 'warning' })
+      return
+    }
+
+    closePopup(id)
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap mount lr`}>
+        <div className="modal-head modal-handle">
+          <h1 className="title">{getMessage('modal.canvas.setting.roofline.properties.setting')}</h1>
+          <button className="modal-close" onClick={() => handleClose()}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="left-bar modal-handle"></div>
+          <div className="right-bar modal-handle"></div>
+          <div className="properties-guide">{getMessage('modal.canvas.setting.roofline.properties.setting.info')}</div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('setting')}</div>
+            <div className="setting-btn-wrap">
+              <button className="setting-btn green mr5" onClick={handleSetEaves}>
+                {getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
+              </button>
+              <button className="setting-btn blue mr5" onClick={handleSetGable}>
+                {getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
+              </button>
+              <button className="setting-btn gray" onClick={handleSetRidge}>
+                {getMessage('modal.canvas.setting.wallline.properties.setting.ridge')}
+              </button>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5" onClick={handleRollback}>
+              {getMessage('modal.cover.outline.rollback')}
+            </button>
+            <button className="btn-frame modal act" onClick={() => handleFix()}>
+              {getMessage('modal.cover.outline.finish')}
+            </button>
+          </div>
+        </div>
+        <div className="modal-foot modal-handle"></div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/hooks/surface/useRoofLinePropertySetting.js b/src/hooks/surface/useRoofLinePropertySetting.js
new file mode 100644
index 00000000..184d7f4e
--- /dev/null
+++ b/src/hooks/surface/useRoofLinePropertySetting.js
@@ -0,0 +1,151 @@
+import { LINE_TYPE } from '@/common/common'
+import { canvasState, currentObjectState } from '@/store/canvasAtom'
+import { useEffect, useRef } from 'react'
+import { useRecoilValue } from 'recoil'
+import { usePopup } from '../usePopup'
+import useSWR from 'swr'
+import { useSwal } from '../useSwal'
+import { useMessage } from '../useMessage'
+
+const LINE_COLOR = {
+  EAVES: '#45CD7D',
+  GABLE: '#3FBAE6',
+  RIDGE: '#9e9e9e',
+  DEFAULT: '#000000',
+}
+
+export function useRoofLinePropertySetting(id, roof) {
+  const canvas = useRecoilValue(canvasState)
+  const currentObject = useRecoilValue(currentObjectState)
+  const history = useRef([])
+  const { closePopup } = usePopup()
+  const { swalFire } = useSwal()
+  const { getMessage } = useMessage()
+
+  useEffect(() => {
+    if (currentObject) {
+      currentObject.set({
+        stroke: '#EA10AC',
+        strokeWidth: 4,
+      })
+    }
+  }, [currentObject])
+
+  const roofLinesInit = () => {
+    roof.lines.forEach((line) => {
+      line.set({
+        stroke: '#000000',
+        strokeWidth: 4,
+        visible: true,
+      })
+      line.bringToFront()
+      line.setViewLengthText(false)
+    })
+    canvas.renderAll()
+  }
+
+  const handleSetEaves = () => {
+    currentObject.set({
+      attributes: {
+        ...currentObject.attributes,
+        type: LINE_TYPE.WALLLINE.EAVES,
+      },
+      stroke: LINE_COLOR.EAVES,
+    })
+
+    history.current.push(currentObject)
+    nextLineFocus(currentObject)
+    canvas.renderAll()
+  }
+
+  const handleSetGable = () => {
+    currentObject.set({
+      attributes: {
+        ...currentObject.attributes,
+        type: LINE_TYPE.WALLLINE.GABLE,
+      },
+      stroke: LINE_COLOR.GABLE,
+    })
+
+    history.current.push(currentObject)
+    nextLineFocus(currentObject)
+    canvas.renderAll()
+  }
+
+  const handleSetRidge = () => {
+    currentObject.set({
+      attributes: {
+        ...currentObject.attributes,
+        type: LINE_TYPE.SUBLINE.RIDGE,
+      },
+      stroke: LINE_COLOR.RIDGE,
+    })
+
+    history.current.push(currentObject)
+    nextLineFocus(currentObject)
+    canvas.renderAll()
+  }
+
+  const handleRollback = () => {
+    if (history.current.length === 0) {
+      return
+    }
+    const lastLine = history.current.pop()
+
+    delete lastLine.attributes
+    lastLine.set({
+      stroke: LINE_COLOR.DEFAULT,
+      strokeWidth: 4,
+    })
+
+    canvas.setActiveObject(lastLine)
+    canvas.renderAll()
+  }
+
+  const handleFix = () => {
+    // const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id)
+    const notSettingLines = roof.lines.filter(
+      (line) =>
+        !line.attributes.type || ![LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.SUBLINE.RIDGE].includes(line.attributes.type),
+    )
+    if (notSettingLines.length > 0) {
+      swalFire({ text: getMessage('modal.canvas.setting.roofline.properties.setting.not.setting'), type: 'alert', icon: 'warning' })
+      return
+    }
+
+    roof.lines.forEach((line) => {
+      line.set({
+        stroke: LINE_COLOR.DEFAULT,
+        strokeWidth: 4,
+        visible: false,
+      })
+    })
+
+    canvas.renderAll()
+    closePopup(id)
+  }
+
+  const nextLineFocus = (selectedLine) => {
+    // const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id)
+    const lines = roof?.lines
+    if (!lines) return
+    const index = lines.findIndex((line) => line === selectedLine)
+
+    const nextLine = lines[index + 1] || lines[0]
+    if (!nextLine.attributes?.type) {
+      canvas.setActiveObject(nextLine)
+    } else {
+      //activeObject 해제
+      canvas.discardActiveObject()
+    }
+  }
+
+  return {
+    roofLinesInit,
+    handleSetEaves,
+    handleSetGable,
+    handleSetRidge,
+    handleRollback,
+    handleFix,
+  }
+}
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 9f06310e..7c3333c3 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -269,6 +269,10 @@
   "modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定\nボタンをクリックして設定値を適用してください。\n",
   "modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定",
   "modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定",
+  "modal.canvas.setting.wallline.properties.setting.ridge": "용마루로 설정(JA)",
+  "modal.canvas.setting.roofline.properties.setting": "지붕선 속성 설정(JA)",
+  "modal.canvas.setting.roofline.properties.setting.info": "※ 속성을 변경할 지붕선을 선택하고 처마로 설정 또는 케라바로 설정\n    버튼을 클릭하여 설정값을 적용하십시오.\n(JA)",
+  "modal.canvas.setting.roofline.properties.setting.not.setting": "설정하지 않은 라인이 존재합니다.(JA)",
   "modal.eaves.gable.edit": "軒/ケラバ変更",
   "modal.eaves.gable.edit.basic": "通常",
   "modal.eaves.gable.edit.wall.merge.info": "河屋などの壁に面する屋根を作成します。",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index b43e6853..d4ea7929 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -269,6 +269,10 @@
   "modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고 처마로 설정 또는 케라바로 설정\n    버튼을 클릭하여 설정값을 적용하십시오.\n",
   "modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정",
   "modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정",
+  "modal.canvas.setting.wallline.properties.setting.ridge": "용마루로 설정",
+  "modal.canvas.setting.roofline.properties.setting": "지붕선 속성 설정",
+  "modal.canvas.setting.roofline.properties.setting.info": "※ 속성을 변경할 지붕선을 선택하고 처마로 설정 또는 케라바로 설정\n    버튼을 클릭하여 설정값을 적용하십시오.\n",
+  "modal.canvas.setting.roofline.properties.setting.not.setting": "설정하지 않은 라인이 존재합니다.",
   "modal.eaves.gable.edit": "처마/케라바 변경",
   "modal.eaves.gable.edit.basic": "통상",
   "modal.eaves.gable.edit.wall.merge.info": "하옥 등 벽에 접하는 지붕을 작성합니다.",