Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into qcast-pub

2024-10-28 15:08:52 +09:00 · 2024-10-28 15:08:52 +09:00 · 293471411e
commit 293471411e
parent 6a979fefc9 64c4a6ddca
45 changed files with 405 additions and 165 deletions
--- a/src/app/floor-plan/[mid]/[pid]/page.jsx
+++ b/src/app/floor-plan/[mid]/[pid]/page.jsx
@ -0,0 +1,3 @@
+export default function EstimatePage() {
+  return <div>이자리....</div>
+}
--- a/src/app/floor-plan/layout.js
+++ b/src/app/floor-plan/layout.js
@ -1,11 +1,17 @@
 'use client'
+import FloorPlan from '@/components/floor-plan/FloorPlan'
 import { FloorPlanProvider } from './FloorPlanProvider'
+import CanvasLayout from '@/components/floor-plan/CanvasLayout'

 export default function FloorPlanLayout({ children }) {
  console.log('FloorPlanLayout')
  return (
    <>
-      <FloorPlanProvider>{children}</FloorPlanProvider>
+      <FloorPlanProvider>
+        <FloorPlan>
+          <CanvasLayout>{children}</CanvasLayout>
+        </FloorPlan>
+      </FloorPlanProvider>
    </>
  )
 }
--- a/src/app/floor-plan/page.jsx
+++ b/src/app/floor-plan/page.jsx
@ -1,9 +1,10 @@
+import CanvasFrame from '@/components/floor-plan/CanvasFrame'
 import FloorPlan from '@/components/floor-plan/FloorPlan'

 export default function FloorPlanPage() {
  return (
    <>
-      <FloorPlan />
+      <CanvasFrame />
    </>
  )
 }
--- a/src/components/fabric/QLine.js
+++ b/src/components/fabric/QLine.js
@ -12,7 +12,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
  idx: 0,
  area: 0,
  children: [],
-  initialize: function (points, options, canvas) {
+  initialize: function (points, options, length = 0) {
    this.callSuper('initialize', points, { ...options, selectable: options.selectable ?? true })
    if (options.id) {
      this.id = options.id
@ -27,7 +27,11 @@ export const QLine = fabric.util.createClass(fabric.Line, {

    this.idx = options.idx ?? 0
    this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
-    this.setLength()
+    if (length !== 0) {
+      this.length = length
+    } else {
+      this.setLength()
+    }

    this.startPoint = { x: this.x1, y: this.y1 }
    this.endPoint = { x: this.x2, y: this.y2 }
@ -148,7 +152,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {

  getLength() {
    //10배 곱해진 값 return
-    return Number(this.length.toFixed(2) * 10)
+    return Number(this.length.toFixed(1)) * 10
  },

  setViewLengthText(bool) {
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@ -183,7 +183,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
      const end = points[(i + 1) % points.length]
      const dx = end.x - start.x
      const dy = end.y - start.y
-      const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(2)) * 10
+      const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1)) * 10

      let midPoint

--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@ -15,7 +15,7 @@ import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitial
 import { MENU } from '@/common/common'
 import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'

-export default function CanvasFrame({ plan }) {
+export default function CanvasFrame() {
  const canvasRef = useRef(null)
  const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState)
  const { canvas } = useCanvas('canvas')
@ -24,14 +24,14 @@ export default function CanvasFrame({ plan }) {
  const currentObject = useRecoilValue(currentObjectState)
  const currentMenu = useRecoilValue(currentMenuState)
  const { contextMenu, handleClick, handleKeyup } = useContextMenu()
-  const { checkCanvasObjectEvent, checkUnsavedCanvasPlan, resetModifiedPlans } = usePlan()
+  const { selectedPlan, checkCanvasObjectEvent, checkUnsavedCanvasPlan, resetModifiedPlans } = usePlan()
  useEvent()

  const loadCanvas = () => {
    if (canvas) {
      canvas?.clear() // 캔버스를 초기화합니다.
-      if (plan?.canvasStatus) {
-        canvas?.loadFromJSON(JSON.parse(plan.canvasStatus), function () {
+      if (selectedPlan?.canvasStatus) {
+        canvas?.loadFromJSON(JSON.parse(selectedPlan.canvasStatus), function () {
          canvasLoadInit() //config된 상태로 캔버스 객체를 그린다
          canvas?.renderAll() // 캔버스를 다시 그립니다.
        })
@ -41,15 +41,15 @@ export default function CanvasFrame({ plan }) {
  }

  useEffect(() => {
-    if (modifiedPlanFlag && plan?.id) {
-      checkCanvasObjectEvent(plan.id)
+    if (modifiedPlanFlag && selectedPlan?.id) {
+      checkCanvasObjectEvent(selectedPlan.id)
    }
  }, [modifiedPlanFlag])

  useEffect(() => {
    loadCanvas()
    resetModifiedPlans()
-  }, [plan, canvas])
+  }, [selectedPlan, canvas])

  return (
    <div className="canvas-frame">
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/src/components/floor-plan/CanvasLayout.jsx
@ -9,9 +9,11 @@ import { usePlan } from '@/hooks/usePlan'
 import { modifiedPlansState } from '@/store/canvasAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { SessionContext } from '@/app/SessionProvider'
+import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'

-export default function CanvasLayout(props) {
-  const { menuNumber } = props
+export default function CanvasLayout({ children }) {
+  // const { menuNumber } = props
+  const { menuNumber } = useCanvasMenu()
  const { session } = useContext(SessionContext)
  const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
  const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
@ -60,7 +62,7 @@ export default function CanvasLayout(props) {
          </button>
        )}
      </div>
-      <CanvasFrame plan={plans.find((plan) => plan.isCurrent === true)} />
+      {children}
    </div>
  )
 }
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/src/components/floor-plan/FloorPlan.jsx
@ -7,16 +7,18 @@ import { globalLocaleStore } from '@/store/localeAtom'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
+import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import '@/styles/contents.scss'

-export default function FloorPlan() {
+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] = useState(null)
+  const { menuNumber, setMenuNumber } = useCanvasMenu()

  const modalProps = {
    menuNumber,
@ -57,9 +59,7 @@ export default function FloorPlan() {
    <>
      <div className="canvas-wrap">
        <CanvasMenu {...modalProps} />
-        <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
-          <CanvasLayout menuNumber={menuNumber} />
-        </div>
+        <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>{children}</div>
      </div>
    </>
  )
--- a/src/components/floor-plan/modal/Slope.jsx
+++ b/src/components/floor-plan/modal/Slope.jsx
@ -1,6 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { globalPitchState } from '@/store/canvasAtom'
+import { globalPitchState, pitchSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { useRecoilState } from 'recoil'
 import { useRef } from 'react'
 import { usePopup } from '@/hooks/usePopup'
@ -8,7 +8,8 @@ import { usePopup } from '@/hooks/usePopup'
 export default function Slope({ id, pos = { x: 50, y: 230 } }) {
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
-  const [globalPitch, setGlobalPitch] = useRecoilState(globalPitchState)
+  const [globalPitch, setGlobalPitch] = useRecoilState(pitchSelector)
+  const pitchText = useRecoilState(pitchTextSelector)
  const inputRef = useRef()

  return (
@ -29,7 +30,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
              <div className="input-grid mr5">
                <input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />
              </div>
-              <span className="thin">{getMessage('size.angle')}</span>
+              <span className="thin">{pitchText}</span>
            </div>
          </div>
          <div className="grid-btn-wrap">
--- a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
+++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
@ -11,12 +11,13 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()

-  const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef } = useEavesGableEdit(id)
+  const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef, pitchText } = useEavesGableEdit(id)
  const eavesProps = {
    pitchRef,
    offsetRef,
    widthRef,
    radioTypeRef,
+    pitchText,
  }

  const gableProps = {
@ -24,6 +25,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
    offsetRef,
    widthRef,
    radioTypeRef,
+    pitchText,
  }

  const wallMergeProps = {
--- a/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx
+++ b/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx
@ -1,14 +1,17 @@
 import { useMessage } from '@/hooks/useMessage'
 import Image from 'next/image'
 import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'

-export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
+export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
  const { getMessage } = useMessage()
  const [type, setType] = useState('1')
  const onChange = (e) => {
    setType(e.target.value)
    radioTypeRef.current = e.target.value
  }
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
  return (
    <>
      <div className="outline-wrap">
@ -17,9 +20,9 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
            {getMessage('slope')}
          </span>
          <div className="input-grid mr5" style={{ width: '100px' }}>
-            <input type="number" className="input-origin block" defaultValue={4} ref={pitchRef} />
+            <input type="number" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
          </div>
-          <span className="thin">寸</span>
+          <span className="thin">{pitchText}</span>
        </div>
        <div className="outline-form">
          <span className="mr10" style={{ width: '24px' }}>
--- a/src/components/floor-plan/modal/eavesGable/type/Gable.jsx
+++ b/src/components/floor-plan/modal/eavesGable/type/Gable.jsx
@ -1,14 +1,18 @@
 import { useMessage } from '@/hooks/useMessage'
 import Image from 'next/image'
 import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'

-export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
+export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
  const { getMessage } = useMessage()
  const [type, setType] = useState('1')
  const onChange = (e) => {
    setType(e.target.value)
    radioTypeRef.current = e.target.value
  }
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+
  return (
    <>
      <div className="outline-wrap">
@ -57,9 +61,15 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
                  {getMessage('slope')}
                </span>
                <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={4.5} ref={pitchRef} readOnly={type === '1'} />
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}
+                    ref={pitchRef}
+                    readOnly={type === '1'}
+                  />
                </div>
-                <span className="thin">寸</span>
+                <span className="thin">{pitchText}</span>
              </div>
            </div>
            <div className="eaves-keraba-td">
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@ -8,6 +8,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
+import { basicSettingState } from '@/store/settingAtom'

 export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
  const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
@ -16,22 +17,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
  const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(1)
  const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
  const { closePopup } = usePopup()
-  const [basicSetting, setBasicSettings] = useState({
-    roofSizeSet: 1,
-    roofAngleSet: 'slope',
-    roofs: [
-      {
-        roofApply: true,
-        roofSeq: 1,
-        roofType: 1,
-        roofWidth: 200,
-        roofHeight: 200,
-        roofHajebichi: 200,
-        roofGap: 0,
-        roofLayout: 'parallel',
-      },
-    ],
-  })
+  const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)

  const { getMessage } = useMessage()
  const { get, post } = useAxios()
--- a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
@ -7,18 +7,21 @@ import { useRoofShapePassivitySetting } from '@/hooks/roofcover/useRoofShapePass
 import { usePopup } from '@/hooks/usePopup'

 export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 } }) {
-  const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef } = useRoofShapePassivitySetting(id)
+  const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef, pitchText } =
+    useRoofShapePassivitySetting(id)
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()

  const eavesProps = {
    offsetRef,
    pitchRef,
+    pitchText,
  }

  const gableProps = {
    offsetRef,
    pitchRef,
+    pitchText,
  }

  const shedProps = {
--- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
@ -38,11 +38,12 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
    buttonMenu,
    handleConfirm,
    handleRollBack,
+    pitchText,
  } = useRoofShapeSetting(id)
  const { closePopup } = usePopup()

-  const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset }
-  const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset }
+  const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
+  const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText }
  const sideProps = {
    pitch,
    setPitch,
@ -67,6 +68,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
    buttonMenu,
    handleConfirm,
    handleRollBack,
+    pitchText,
  }

  const directionProps = {
@ -78,6 +80,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
    setGableOffset,
    shedWidth,
    setShedWidth,
+    pitchText,
  }

  return (
--- a/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
+++ b/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
@ -1,7 +1,10 @@
 import { useMessage } from '@/hooks/useMessage'
+import { useRecoilValue } from 'recoil'
+import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'

-export default function Eaves({ offsetRef, pitchRef }) {
+export default function Eaves({ offsetRef, pitchRef, pitchText }) {
  const { getMessage } = useMessage()
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
  return (
    <>
      <div className="outline-form mb10">
@ -9,9 +12,9 @@ export default function Eaves({ offsetRef, pitchRef }) {
          {getMessage('slope')}
        </span>
        <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={4} ref={pitchRef} />
+          <input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
        </div>
-        <span className="thin">寸</span>
+        <span className="thin">{pitchText}</span>
      </div>
      <div className="outline-form mb10">
        <span className="mr10" style={{ width: '63px' }}>
--- a/src/components/floor-plan/modal/roofShape/passivity/Gable.jsx
+++ b/src/components/floor-plan/modal/roofShape/passivity/Gable.jsx
@ -1,7 +1,10 @@
 import { useMessage } from '@/hooks/useMessage'
+import { useRecoilValue } from 'recoil'
+import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'

-export default function Gable({ offsetRef, pitchRef }) {
+export default function Gable({ offsetRef, pitchRef, pitchText }) {
  const { getMessage } = useMessage()
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
  return (
    <>
      <div className="outline-form mb10">
@ -9,9 +12,9 @@ export default function Gable({ offsetRef, pitchRef }) {
          {getMessage('slope')}
        </span>
        <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={4} ref={pitchRef} />
+          <input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
        </div>
-        <span className="thin">寸</span>
+        <span className="thin">{pitchText}</span>
      </div>
      <div className="outline-form mb10">
        <span className="mr10" style={{ width: '63px' }}>
--- a/src/components/floor-plan/modal/roofShape/type/Direction.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/Direction.jsx
@ -1,7 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'

-export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth }) {
+export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth, pitchText }) {
  const { getMessage } = useMessage()
  return (
    <div className="setting-box">
@ -12,7 +12,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
        <div className="input-grid mr5" style={{ width: '100px' }}>
          <input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
        </div>
-        <span className="thin">{getMessage('size')}</span>
+        <span className="thin">{pitchText}</span>
      </div>
      <div className="outline-form mb10">
        <span className="mr10" style={{ width: '60px' }}>
--- a/src/components/floor-plan/modal/roofShape/type/Pattern.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/Pattern.jsx
@ -3,7 +3,7 @@ import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/inpu

 export default function Pattern(props) {
  const { getMessage } = useMessage()
-  const { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset } = props
+  const { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText } = props
  return (
    <div className="setting-box">
      <div className="outline-form mb10">
@ -13,7 +13,7 @@ export default function Pattern(props) {
        <div className="input-grid mr5" style={{ width: '100px' }}>
          <input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
        </div>
-        <span className="thin"> {getMessage('size')}</span>
+        <span className="thin"> {pitchText}</span>
      </div>
      <div className="outline-form mb10">
        <span className="mr10" style={{ width: '60px' }}>
--- a/src/components/floor-plan/modal/roofShape/type/Ridge.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/Ridge.jsx
@ -4,7 +4,7 @@ import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/inpu

 export default function Ridge(props) {
  const { getMessage } = useMessage()
-  const { pitch, setPitch, eavesOffset, setEavesOffset } = props
+  const { pitch, setPitch, eavesOffset, setEavesOffset, pitchText } = props

  return (
    <div className="setting-box">
@ -15,7 +15,7 @@ export default function Ridge(props) {
        <div className="input-grid mr5" style={{ width: '100px' }}>
          <input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
        </div>
-        <span className="thin">{getMessage('size')}</span>
+        <span className="thin">{pitchText}</span>
      </div>
      <div className="outline-form">
        <span className="mr10" style={{ width: '24px' }}>
--- a/src/components/floor-plan/modal/roofShape/type/Side.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/Side.jsx
@ -32,13 +32,14 @@ export default function Side(props) {
    buttonMenu,
    handleConfirm,
    handleRollBack,
+    pitchText,
  } = props

-  const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset }
+  const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
  const gableProps = { gableOffset, setGableOffset }
  const wallProps = { sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }
-  const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth }
-  const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch }
+  const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }
+  const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText }
  const shedProps = { shedWidth, setShedWidth }

  const { getMessage } = useMessage()
--- a/src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx
@ -1,7 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'

-export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset }) {
+export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pitchText }) {
  const { getMessage } = useMessage()
  return (
    <>
@ -12,7 +12,7 @@ export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset })
        <div className="input-grid mr5" style={{ width: '100px' }}>
          <input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
        </div>
-        <span className="thin">{getMessage('size')}</span>
+        <span className="thin">{pitchText}</span>
      </div>
      <div className="outline-form">
        <span className="mr10" style={{ width: '24px' }}>
--- a/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
@ -1,7 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'

-export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth }) {
+export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }) {
  const { getMessage } = useMessage()
  return (
    <>
@ -12,7 +12,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
        <div className="input-grid mr5" style={{ width: '100px' }}>
          <input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
        </div>
-        <span className="thin">{getMessage('size')}</span>
+        <span className="thin">{pitchText}</span>
      </div>
      <div className="outline-form mb10">
        <span className="mr10" style={{ width: '60px' }}>
--- a/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
@ -1,7 +1,15 @@
 import { useMessage } from '@/hooks/useMessage'
 import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'

-export default function Jerkinhead({ gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch }) {
+export default function Jerkinhead({
+  gableOffset,
+  setGableOffset,
+  jerkinHeadWidth,
+  setJerkinHeadWidth,
+  jerkinHeadPitch,
+  setJerkinHeadPitch,
+  pitchText,
+}) {
  const { getMessage } = useMessage()
  return (
    <>
@ -35,7 +43,7 @@ export default function Jerkinhead({ gableOffset, setGableOffset, jerkinHeadWidt
            onChange={(e) => onlyNumberWithDotInputChange(e, setJerkinHeadPitch)}
          />
        </div>
-        <span className="thin">{getMessage('size')}</span>
+        <span className="thin">{pitchText}</span>
      </div>
    </>
  )
--- a/src/components/management/Stuff.jsx
+++ b/src/components/management/Stuff.jsx
@ -33,8 +33,8 @@ export default function Stuff() {
  const { get } = useAxios(globalLocaleState)
  const gridRef = useRef()

-  const [selectedRowData, setSelectedRowData] = useState([])
-  const [selectedRowDataCount, setSelectedRowDataCount] = useState(0)
+  // const [selectedRowData, setSelectedRowData] = useState([])
+  // const [selectedRowDataCount, setSelectedRowDataCount] = useState(0)

  const router = useRouter()
  const pathname = usePathname()
@ -165,11 +165,11 @@ export default function Stuff() {
    }
  }

-  //그리드 체크박스 선택시
-  const getSelectedRowdata = (data) => {
-    setSelectedRowData(data)
-    setSelectedRowDataCount(data.length)
-  }
+  //그리드 체크박스 선택시 미사용
+  // const getSelectedRowdata = (data) => {
+  //   setSelectedRowData(data)
+  //   setSelectedRowDataCount(data.length)
+  // }

  //물건삭제
  // const fnDeleteRowData = (data) => {
@ -405,8 +405,8 @@ export default function Stuff() {
                <span>{convertNumberToPriceDecimal(totalCount)}</span>
              </li>
              <li>
-                {getMessage('stuff.search.grid.selected')}
-                <span className="red">{convertNumberToPriceDecimal(selectedRowDataCount)}</span>
+                {/* {getMessage('stuff.search.grid.selected')} */}
+                {/* <span className="red">{convertNumberToPriceDecimal(selectedRowDataCount)}</span> */}
              </li>
            </ul>
          </div>
@ -428,7 +428,7 @@ export default function Stuff() {
        </div>
        <div className="grid-table-wrap">
          <div className="q-grid">
-            <StuffQGrid {...gridProps} getSelectedRowdata={getSelectedRowdata} getCellDoubleClicked={getCellDoubleClicked} gridRef={gridRef} />
+            <StuffQGrid {...gridProps} getCellDoubleClicked={getCellDoubleClicked} gridRef={gridRef} />
            <div className="pagination-wrap">
              <QPagination pageNo={pageNo} pageSize={pageSize} pagePerBlock={10} totalCount={totalCount} handleChangePage={handleChangePage} />
            </div>
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@ -10,15 +10,18 @@ import { globalLocaleStore } from '@/store/localeAtom'
 import { isEmptyArray, isNotEmptyArray, isObjectNotEmpty } from '@/util/common-utils'
 import { useMessage } from '@/hooks/useMessage'
 import { useForm } from 'react-hook-form'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { sessionStore } from '@/store/commonAtom'
 import FindAddressPop from './popup/FindAddressPop'
 import PlanRequestPop from './popup/PlanRequestPop'
 import WindSelectPop from './popup/WindSelectPop'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import StuffPlanQGrid from './StuffPlanQGrid'
+import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'

 export default function StuffDetail() {
+  const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState) //견적서 화면용 물건번호리코일
+
  const inputReceiveUserEl = useRef(null) //담당자ref
  const inputObjectNameEl = useRef(null) //물건명ref
  const inputZipNoEl = useRef(null) //우편번호ref
@ -1077,6 +1080,7 @@ export default function StuffDetail() {
        //상세화면으로 전환
        if (res.status === 201) {
          alert(getMessage('stuff.detail.save'))
+          setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
          router.push(`/management/stuff/detail?objectNo=${res.data.objectNo.toString()}`)
        }
      })
@ -1085,6 +1089,7 @@ export default function StuffDetail() {
      await promisePut({ url: apiUrl, data: params }).then((res) => {
        if (res.status === 201) {
          alert(getMessage('stuff.detail.save'))
+          setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
          router.refresh()
        }
      })
@ -1153,7 +1158,8 @@ export default function StuffDetail() {
      alert(getMessage('stuff.detail.delete.message1'))
    } else {
      if (confirm(getMessage('common.message.data.delete'))) {
-        del({ url: `/api/object/${objectNo}` }).then((res) => {
+        del({ url: `/api/object/${objectNo}` }).then(() => {
+          setFloorPlanObjectNo({ floorPlanObjectNo: '' })
          router.push('/management/stuff')
        })
      }
--- a/src/components/management/StuffPlanQGrid.jsx
+++ b/src/components/management/StuffPlanQGrid.jsx
@ -6,7 +6,7 @@ export default function StuffPlanQGrid(props) {
  const { planGridData, planGridColumns, isPageable = true } = props

  const [rowData, setRowData] = useState(null)
-  const [gridApi, setGridApi] = useState(null)
+  // const [gridApi, setGridApi] = useState(null)
  const [colDefs, setColDefs] = useState(planGridColumns)

  const defaultColDef = useMemo(() => {
@ -20,24 +20,24 @@ export default function StuffPlanQGrid(props) {
    }
  }, [])

-  const rowBuffer = 100
+  const rowBuffer = 10

  useEffect(() => {
    planGridData ? setRowData(planGridData) : ''
  }, [planGridData])

-  const onGridReady = useCallback(
-    (params) => {
-      setGridApi(params.api)
-      planGridData ? setRowData(planGridData) : ''
-    },
-    [planGridData],
-  )
+  // const onGridReady = useCallback(
+  //   (params) => {
+  //     setGridApi(params.api)
+  //     planGridData ? setRowData(planGridData) : ''
+  //   },
+  //   [planGridData],
+  // )

  return (
    <div className="ag-theme-quartz" style={{ height: '100%' }}>
      <AgGridReact
-        onGridReady={onGridReady}
+        // onGridReady={onGridReady}
        rowBuffer={rowBuffer}
        rowData={rowData}
        columnDefs={colDefs}
--- a/src/components/management/StuffQGrid.jsx
+++ b/src/components/management/StuffQGrid.jsx
@ -62,10 +62,10 @@ export default function StuffQGrid(props) {
    [count],
  )

-  // 체크박스 체크시
-  const onSelectionChanged = useCallback((event) => {
-    props.getSelectedRowdata(event.api.getSelectedRows())
-  }, [])
+  // 체크박스 체크시 체크박스 미사용
+  // const onSelectionChanged = useCallback((event) => {
+  //   props.getSelectedRowdata(event.api.getSelectedRows())
+  // }, [])

  //더블클릭
  const onCellDoubleClicked = useCallback((event) => {
@ -95,7 +95,7 @@ export default function StuffQGrid(props) {
        isRowSelectable={isRowSelectable}
        rowSelection={'multiple'}
        suppressRowClickSelection={true}
-        onSelectionChanged={onSelectionChanged}
+        // onSelectionChanged={onSelectionChanged}
        onCellDoubleClicked={onCellDoubleClicked}
        pagination={isPageable}
        overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
--- a/src/components/management/StuffSubHeader.jsx
+++ b/src/components/management/StuffSubHeader.jsx
@ -5,14 +5,15 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { stuffSearchState } from '@/store/stuffAtom'
+import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
 import { useSetRecoilState } from 'recoil'

 export default function StuffSubHeader({ type }) {
  const { getMessage } = useMessage()
  const router = useRouter()

-  const setSchObjectNo = useSetRecoilState(stuffSearchState)
+  const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState)
+
  useEffect(() => {
    window.scrollTo(0, 0)
  }, [])
@ -22,7 +23,7 @@ export default function StuffSubHeader({ type }) {

  // url에 물건번호로 도면작성화면으로 이동
  const moveFloorPlan = () => {
-    setSchObjectNo(objectNo)
+    setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })

    router.push('/floor-plan')
  }
--- a/src/components/management/popup/FindAddressPopQGrid.jsx
+++ b/src/components/management/popup/FindAddressPopQGrid.jsx
@ -28,7 +28,7 @@ export default function FindAddressPopGrid(props) {
    }
  }, [])

-  const rowBuffer = 100
+  const rowBuffer = 10

  useEffect(() => {
    gridData ? setRowData(gridData) : ''
--- a/src/components/management/popup/PlanRequestPopQGrid.jsx
+++ b/src/components/management/popup/PlanRequestPopQGrid.jsx
@ -28,7 +28,7 @@ export default function PlanRequestPopQGrid(props) {
    }
  }, [])

-  const rowBuffer = 100
+  const rowBuffer = 20

  useEffect(() => {
    gridData ? setRowData(gridData) : ''
--- a/src/hooks/common/useCanvasConfigInitialize.js
+++ b/src/hooks/common/useCanvasConfigInitialize.js
@ -1,8 +1,8 @@
 import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { roofDisplaySelector, settingModalFirstOptionsState } from '@/store/settingAtom'
-import { canvasState, dotLineGridSettingState } from '@/store/canvasAtom'
-import { setSurfaceShapePattern } from '@/util/canvas-util'
+import { basicSettingState, roofDisplaySelector, settingModalFirstOptionsState } from '@/store/settingAtom'
+import { canvasState, dotLineGridSettingState, pitchText, pitchTextSelector, showAngleUnitSelector } from '@/store/canvasAtom'
+import { getChonByDegree, getDegreeByChon, setSurfaceShapePattern } from '@/util/canvas-util'
 import { useFont } from '@/hooks/common/useFont'
 import { useGrid } from '@/hooks/common/useGrid'
 import { globalFontAtom } from '@/store/fontAtom'
@ -11,9 +11,12 @@ import { useRoof } from '@/hooks/common/useRoof'
 export function useCanvasConfigInitialize() {
  const canvas = useRecoilValue(canvasState)
  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
  const roofDisplay = useRecoilValue(roofDisplaySelector)
  const setGlobalFonts = useSetRecoilState(globalFontAtom)
  const setDotLineGridSetting = useSetRecoilState(dotLineGridSettingState)
+  const pitchText = useRecoilValue(pitchTextSelector)
+  const angleUnit = useRecoilValue(showAngleUnitSelector)
  const {} = useFont()
  const {} = useGrid()
  const {} = useRoof()
@ -29,6 +32,31 @@ export function useCanvasConfigInitialize() {
    canvas.renderAll()
  }, [roofDisplay])

+  useEffect(() => {
+    if (!canvas) return
+    const offsetTexts = canvas.getObjects().filter((obj) => obj.name === 'pitchText')
+    const flowTexts = canvas.getObjects().filter((obj) => obj.name === 'flowText')
+    if (basicSetting.roofAngleSet === 'slope') {
+      offsetTexts.forEach((obj) => {
+        obj.set({ text: `${obj.originText}-∠${obj.pitch}${angleUnit}` })
+      })
+      flowTexts.forEach((obj) => {
+        obj.set({ text: `${obj.originText}-∠${obj.pitch}${pitchText}` })
+      })
+    }
+
+    if (basicSetting.roofAngleSet === 'flat') {
+      offsetTexts.forEach((obj) => {
+        obj.set({ text: `${obj.originText}-∠${getDegreeByChon(obj.pitch)}${angleUnit}` })
+      })
+      flowTexts.forEach((obj) => {
+        obj.set({ text: `${obj.originText}-∠${getDegreeByChon(obj.pitch)}${pitchText}` })
+      })
+    }
+
+    canvas.renderAll()
+  }, [basicSetting])
+
  const canvasLoadInit = () => {
    roofInit() //화면표시 초기화
  }
--- a/src/hooks/common/useCanvasMenu.js
+++ b/src/hooks/common/useCanvasMenu.js
@ -0,0 +1,10 @@
+import { useState } from 'react'
+
+export const useCanvasMenu = () => {
+  const [menuNumber, setMenuNumber] = useState(null)
+
+  return {
+    menuNumber,
+    setMenuNumber,
+  }
+}
--- a/src/hooks/option/useFirstOption.js
+++ b/src/hooks/option/useFirstOption.js
@ -33,7 +33,7 @@ export function useFirstOption() {
          optionName = ['outerLine', 'wallLine']
          break
        case 'gridDisplay': //그리드 표시
-          optionName = ['lineGrid', 'dotGrid']
+          optionName = ['lineGrid', 'dotGrid', 'adsorptionPoint', 'tempGrid']
          break
        case 'lineDisplay': //지붕선 표시
          optionName = ['roof', 'roofBase']
--- a/src/hooks/roofcover/useEavesGableEdit.js
+++ b/src/hooks/roofcover/useEavesGableEdit.js
@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { useRecoilValue } from 'recoil'
-import { canvasState } from '@/store/canvasAtom'
+import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
 import { LINE_TYPE } from '@/common/common'
@ -9,6 +9,7 @@ import { useMode } from '@/hooks/useMode'
 import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
+import { getChonByDegree } from '@/util/canvas-util'

 // 처마.케라바 변경
 export function useEavesGableEdit(id) {
@ -28,6 +29,8 @@ export function useEavesGableEdit(id) {
  const { swalFire } = useSwal()

  const { drawRoofPolygon } = useMode()
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+  const pitchText = useRecoilValue(pitchTextSelector)

  const pitchRef = useRef(null)
  const offsetRef = useRef(null)
@ -105,13 +108,13 @@ export function useEavesGableEdit(id) {
        if (radioTypeRef.current === '1') {
          attributes = {
            type: LINE_TYPE.WALLLINE.EAVES,
-            pitch: pitchRef.current.value,
+            pitch: currentAngleType === ANGLE_TYPE.SLOPE ? pitchRef.current.value : getChonByDegree(pitchRef.current.value),
            offset: offsetRef.current.value / 10,
          }
        } else {
          attributes = {
            type: LINE_TYPE.WALLLINE.HIPANDGABLE,
-            pitch: pitchRef.current.value,
+            pitch: currentAngleType === ANGLE_TYPE.SLOPE ? pitchRef.current.value : getChonByDegree(pitchRef.current.value),
            offset: offsetRef.current.value / 10,
            width: widthRef.current.value / 10,
          }
@ -126,7 +129,7 @@ export function useEavesGableEdit(id) {
        } else {
          attributes = {
            type: LINE_TYPE.WALLLINE.JERKINHEAD,
-            pitch: pitchRef.current.value,
+            pitch: currentAngleType === ANGLE_TYPE.SLOPE ? pitchRef.current.value : getChonByDegree(pitchRef.current.value),
            offset: offsetRef.current.value / 10,
            width: widthRef.current.value / 10,
          }
@ -217,5 +220,5 @@ export function useEavesGableEdit(id) {
    canvas?.renderAll()
  }

-  return { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef }
+  return { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }
 }
--- a/src/hooks/roofcover/useRoofShapePassivitySetting.js
+++ b/src/hooks/roofcover/useRoofShapePassivitySetting.js
@ -1,4 +1,4 @@
-import { canvasState, currentObjectState } from '@/store/canvasAtom'
+import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
 import { useEffect, useRef, useState } from 'react'
 import { useLine } from '@/hooks/useLine'
@ -10,6 +10,7 @@ import { usePolygon } from '@/hooks/usePolygon'
 import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
+import { getChonByDegree } from '@/util/canvas-util'

 //지붕형상 수동 설정
 export function useRoofShapePassivitySetting(id) {
@ -19,6 +20,8 @@ export function useRoofShapePassivitySetting(id) {
    SHED: 'shed',
  }
  const canvas = useRecoilValue(canvasState)
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+  const pitchText = useRecoilValue(pitchTextSelector)
  const { getMessage } = useMessage()
  const { showLine, hideLine, addPitchTextsByOuterLines } = useLine()
  const { swalFire } = useSwal()
@ -34,6 +37,7 @@ export function useRoofShapePassivitySetting(id) {
  const isFix = useRef(false)
  const initLines = useRef([])
  const [isLoading, setIsLoading] = useState(false)
+
  const { closePopup } = usePopup()
  const buttons = [
    { id: 1, name: getMessage('eaves'), type: TYPES.EAVES },
@ -134,12 +138,12 @@ export function useRoofShapePassivitySetting(id) {
      attributes = {
        type: LINE_TYPE.WALLLINE.EAVES,
        offset,
-        pitch: pitchRef.current.value,
+        pitch: currentAngleType === ANGLE_TYPE.SLOPE ? pitchRef.current.value : getChonByDegree(pitchRef.current.value),
      }
    } else if (type === TYPES.GABLE) {
      attributes = {
        type: LINE_TYPE.WALLLINE.GABLE,
-        pitch: pitchRef.current.value,
+        pitch: currentAngleType === ANGLE_TYPE.SLOPE ? pitchRef.current.value : getChonByDegree(pitchRef.current.value),
        offset,
      }
    } else if (type === TYPES.SHED) {
@ -216,5 +220,5 @@ export function useRoofShapePassivitySetting(id) {
    canvas.renderAll()
  }

-  return { handleSave, handleConfirm, buttons, type, setType, TYPES, offsetRef, pitchRef, handleRollback }
+  return { handleSave, handleConfirm, buttons, type, setType, TYPES, offsetRef, pitchRef, handleRollback, pitchText }
 }
--- a/src/hooks/roofcover/useRoofShapeSetting.js
+++ b/src/hooks/roofcover/useRoofShapeSetting.js
@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
+import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
 import { LINE_TYPE } from '@/common/common'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useMode } from '@/hooks/useMode'
@ -9,6 +9,7 @@ import { useLine } from '@/hooks/useLine'
 import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
+import { getChonByDegree } from '@/util/canvas-util'

 // 지붕형상 설정
 export function useRoofShapeSetting(id) {
@ -17,13 +18,16 @@ export function useRoofShapeSetting(id) {
  const { swalFire } = useSwal()
  const { getMessage } = useMessage()
  const canvas = useRecoilValue(canvasState)
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+  const pitchText = useRecoilValue(pitchTextSelector)
  const { addPolygonByLines } = usePolygon()
-  const [pitch, setPitch] = useState(4)
+
+  const [pitch, setPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8) // 경사
  const [eavesOffset, setEavesOffset] = useState(500) // 처마출폭
  const [gableOffset, setGableOffset] = useState(300) // 케라바출폭
  const [sleeveOffset, setSleeveOffset] = useState(300) // 소매출폭
  const [jerkinHeadWidth, setJerkinHeadWidth] = useState(800) // 반절처 폭
-  const [jerkinHeadPitch, setJerkinHeadPitch] = useState(4.5) // 반절처 경사
+  const [jerkinHeadPitch, setJerkinHeadPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20) // 반절처 경사
  const [hipAndGableWidth, setHipAndGableWidth] = useState(800) // 팔작지붕 폭
  const [shedWidth, setShedWidth] = useState(300) // 한쪽흐름 폭
  const [hasSleeve, setHasSleeve] = useState('0')
@ -34,9 +38,21 @@ export function useRoofShapeSetting(id) {
  const setCurrentMenu = useSetRecoilState(currentMenuState)
  const outerLineFix = useRecoilValue(outerLineFixState)

+  const isFixRef = useRef(false)
+
+  const pitchRef = useRef(null)
+  const jerkinHeadPitchRef = useRef(null)
+
  const history = useRef([])
  const { closePopup } = usePopup()

+  useEffect(() => {
+    pitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? pitch : getChonByDegree(pitch)
+  }, [pitch])
+  useEffect(() => {
+    jerkinHeadPitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? jerkinHeadPitch : getChonByDegree(jerkinHeadPitch)
+  }, [jerkinHeadPitch])
+
  useEffect(() => {
    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
    if (!outerLineFix || outerLines.length === 0) {
@ -46,6 +62,10 @@ export function useRoofShapeSetting(id) {
    }

    return () => {
+      if (!isFixRef.current) {
+        return
+      }
+
      const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
      const pitchTexts = canvas.getObjects().filter((obj) => obj.name === 'pitchText')
      canvas.remove(...pitchTexts)
@ -69,7 +89,6 @@ export function useRoofShapeSetting(id) {
          })

          addPitchText(line)
-          line.setViewLengthText(false)
        }
      })
      canvas.renderAll()
@ -114,12 +133,10 @@ export function useRoofShapeSetting(id) {

      canvas?.renderAll()
    }
-    setPitch(4)
    setEavesOffset(500)
    setGableOffset(300)
    setSleeveOffset(300)
    setJerkinHeadWidth(800)
-    setJerkinHeadPitch(4.5)
    setHipAndGableWidth(800)
    setShedWidth(300)
  }, [shapeNum])
@ -181,7 +198,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'bottom') {
              line.attributes = {
                offset: eavesOffset / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.EAVES,
              }
            }
@ -197,7 +214,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'top') {
              line.attributes = {
                offset: eavesOffset / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.EAVES,
              }
            }
@ -205,7 +222,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'bottom') {
              line.attributes = {
                offset: shedWidth / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.SHED,
              }
            }
@ -226,7 +243,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'top') {
              line.attributes = {
                offset: eavesOffset / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.EAVES,
              }
            }
@ -234,7 +251,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'bottom') {
              line.attributes = {
                offset: shedWidth / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.SHED,
              }
            }
@ -242,7 +259,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'bottom') {
              line.attributes = {
                offset: eavesOffset / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.EAVES,
              }
            }
@ -250,7 +267,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'top') {
              line.attributes = {
                offset: shedWidth / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.SHED,
              }
            }
@ -270,7 +287,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'right') {
              line.attributes = {
                offset: eavesOffset / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.EAVES,
              }
            }
@ -278,7 +295,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'left') {
              line.attributes = {
                offset: shedWidth / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.SHED,
              }
            }
@ -286,7 +303,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'left') {
              line.attributes = {
                offset: eavesOffset / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.EAVES,
              }
            }
@ -294,7 +311,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'right') {
              line.attributes = {
                offset: shedWidth / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.SHED,
              }
            }
@ -315,7 +332,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'left') {
              line.attributes = {
                offset: eavesOffset / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.EAVES,
              }
            }
@ -323,7 +340,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'right') {
              line.attributes = {
                offset: shedWidth / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.SHED,
              }
            }
@ -331,7 +348,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'right') {
              line.attributes = {
                offset: eavesOffset / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.EAVES,
              }
            }
@ -339,7 +356,7 @@ export function useRoofShapeSetting(id) {
            if (line.direction === 'left') {
              line.attributes = {
                offset: shedWidth / 10,
-                pitch: pitch,
+                pitch: pitchRef.current,
                type: LINE_TYPE.WALLLINE.SHED,
              }
            }
@ -376,6 +393,7 @@ export function useRoofShapeSetting(id) {
    canvas?.renderAll()
    roof.drawHelpLine()
    // setShowRoofShapeSettingModal(false)
+    isFixRef.current = true
    closePopup(id)
  }

@ -436,7 +454,7 @@ export function useRoofShapeSetting(id) {
    outerLines.forEach((line) => {
      line.attributes = {
        offset: eavesOffset / 10,
-        pitch: pitch,
+        pitch: pitchRef.current,
        type: LINE_TYPE.WALLLINE.EAVES,
      }
      // hideLine(line)
@ -458,7 +476,7 @@ export function useRoofShapeSetting(id) {
      } else if (line.direction === 'top' || line.direction === 'bottom') {
        line.attributes = {
          offset: eavesOffset / 10,
-          pitch: pitch,
+          pitch: pitchRef.current,
          type: LINE_TYPE.WALLLINE.EAVES,
        }
      }
@ -481,7 +499,7 @@ export function useRoofShapeSetting(id) {
      } else if (line.direction === 'left' || line.direction === 'right') {
        line.attributes = {
          offset: eavesOffset / 10,
-          pitch: pitch,
+          pitch: pitchRef.current,
          type: LINE_TYPE.WALLLINE.EAVES,
        }
      }
@ -504,7 +522,7 @@ export function useRoofShapeSetting(id) {
        // 처마
        attributes = {
          type: LINE_TYPE.WALLLINE.EAVES,
-          pitch: pitch,
+          pitch: pitchRef.current,
          offset: eavesOffset / 10,
        }
        addPitchText(currentObject)
@ -535,7 +553,7 @@ export function useRoofShapeSetting(id) {
        // 팔작지붕
        attributes = {
          type: LINE_TYPE.WALLLINE.HIPANDGABLE,
-          pitch: pitch,
+          pitch: pitchRef.current,
          offset: eavesOffset / 10,
          width: hipAndGableWidth / 10,
        }
@ -550,7 +568,7 @@ export function useRoofShapeSetting(id) {
          type: LINE_TYPE.WALLLINE.JERKINHEAD,
          offset: gableOffset / 10,
          width: jerkinHeadWidth / 10,
-          pitch: jerkinHeadPitch,
+          pitch: jerkinHeadPitchRef.current,
        }
        addPitchText(currentObject)
        selectedLine.set({ strokeWidth: 4 })
@ -629,5 +647,6 @@ export function useRoofShapeSetting(id) {
    setButtonAct,
    handleConfirm,
    handleRollBack,
+    pitchText,
  }
 }
--- a/src/hooks/useCanvasEvent.js
+++ b/src/hooks/useCanvasEvent.js
@ -11,6 +11,7 @@ import {
  modifiedPlanFlagState,
 } from '@/store/canvasAtom'
 import { QPolygon } from '@/components/fabric/QPolygon'
+import { fontSelector } from '@/store/fontAtom'

 // 캔버스에 필요한 이벤트
 export function useCanvasEvent() {
@ -22,6 +23,7 @@ export function useCanvasEvent() {
  const fontFamily = useRecoilValue(fontFamilyState)
  const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
  const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState)
+  const lengthTextOption = useRecoilValue(fontSelector('lengthText'))

  // 기본적인 이벤트 필요시 추가
  const attachDefaultEventOnCanvas = () => {
@ -108,16 +110,17 @@ export function useCanvasEvent() {
        })
      }

-      if (target.type.toLowerCase().includes('text')) {
-        target.set({ fontSize })
-        target.set({ fontFamily })
-      }
-
-      if (target.name === 'lengthText') {
+      if (target.name === 'lengthText' && target.type.toLowerCase().includes('text') > 0) {
        const x = target.left
        const y = target.top
        target.lockMovementX = false
        target.lockMovementY = false
+
+        target.fill = lengthTextOption.fontColor.value
+        target.fontFamily = lengthTextOption.fontFamily.value
+        target.fontSize = lengthTextOption.fontSize.value
+        target.fontWeight = lengthTextOption.fontWeight.value
+
        // Add a property to store the previous value
        const previousValue = target.text
        target.on('selected', (e) => {
--- a/src/hooks/useLine.js
+++ b/src/hooks/useLine.js
@ -1,11 +1,23 @@
 import { useRecoilValue } from 'recoil'
-import { canvasState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
+import {
+  ANGLE_TYPE,
+  canvasState,
+  currentAngleTypeSelector,
+  fontFamilyState,
+  fontSizeState,
+  pitchTextSelector,
+  showAngleUnitSelector,
+} from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
+import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'

 export const useLine = () => {
  const canvas = useRecoilValue(canvasState)
  const fontSize = useRecoilValue(fontSizeState)
  const fontFamily = useRecoilValue(fontFamilyState)
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+  const pitchText = useRecoilValue(pitchTextSelector)
+  const angleUnit = useRecoilValue(showAngleUnitSelector)

  const addLine = (points = [], options) => {
    const line = new QLine(points, {
@ -77,6 +89,11 @@ export const useLine = () => {

    let left, top

+    const textStr =
+      currentAngleType === ANGLE_TYPE.SLOPE
+        ? `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + attributes.pitch + angleUnit : ''}`
+        : `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + getDegreeByChon(attributes.pitch) + angleUnit : ''}`
+
    if (direction === 'top') {
      left = (startPoint.x + endPoint.x) / 2
      top = (startPoint.y + endPoint.y) / 2 - 50
@ -91,17 +108,20 @@ export const useLine = () => {
      top = (startPoint.y + endPoint.y) / 2 - 30
    }

-    const text = new fabric.Text(
-      `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + attributes.pitch : ''}`,
-      {
-        left,
-        top,
-        fontSize: 20,
-        fill: 'black',
-        name: 'pitchText',
-        parentId: line.id,
-      },
-    )
+    if (!attributes.pitch) {
+      return
+    }
+
+    const text = new fabric.Text(`${textStr}`, {
+      left,
+      top,
+      fontSize: 20,
+      originText: `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}`,
+      fill: 'black',
+      name: 'pitchText',
+      parentId: line.id,
+      pitch: attributes.pitch,
+    })

    canvas.add(text)
  }
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@ -8,6 +8,7 @@ import { useSwal } from '@/hooks/useSwal'

 export function usePlan() {
  const [planNum, setPlanNum] = useState(0)
+  const [selectedPlan, setSelectedPlan] = useState(null)

  const [canvas, setCanvas] = useRecoilState(canvasState)
  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
@ -65,6 +66,7 @@ export function usePlan() {
      'text',
      'pitch',
      'uuid',
+      'originText',
    ])

    const str = JSON.stringify(objs)
@ -144,7 +146,7 @@ export function usePlan() {
   * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
   */
  const dbToCanvasFormat = (cs) => {
-    return cs.replace(/##/g, '"').replace(/&ang;/g, '∠')
+    return cs.replace(/##/g, '"').replace(/&ang;/g, '∠').replace(/&deg;/g, '°')
  }

  /**
@ -278,6 +280,7 @@ export function usePlan() {
  }
  useEffect(() => {
    setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
+    setSelectedPlan(plans.find((plan) => plan.isCurrent))
  }, [plans])

  /**
@ -365,6 +368,7 @@ export function usePlan() {
  return {
    canvas,
    plans,
+    selectedPlan,
    modifiedPlans,
    checkCanvasObjectEvent,
    resetModifiedPlans,
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@ -1,7 +1,7 @@
-import { canvasState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
+import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, fontFamilyState, fontSizeState, pitchTextSelector } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
 import { fabric } from 'fabric'
-import { getDirectionByPoint } from '@/util/canvas-util'
+import { getDegreeByChon, getDirectionByPoint } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { isSamePoint } from '@/util/qpolygon-utils'
 import { flowDisplaySelector } from '@/store/settingAtom'
@ -12,6 +12,8 @@ export const usePolygon = () => {
  const isFlowDisplay = useRecoilValue(flowDisplaySelector)
  const flowFontOptions = useRecoilValue(fontSelector('flowText'))
  const lengthTextFontOptions = useRecoilValue(fontSelector('lengthText'))
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+  const pitchText = useRecoilValue(pitchTextSelector)

  const addPolygon = (points, options) => {
    const polygon = new QPolygon(points, {
@ -401,14 +403,18 @@ export const usePolygon = () => {

  const addTextByArrows = (arrows, txt, canvas) => {
    arrows.forEach((arrow, index) => {
-      const text = new fabric.Text(`${txt}${index + 1} (${arrow.pitch}寸)`, {
+      const textStr = `${txt}${index + 1} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`
+
+      const text = new fabric.Text(`${textStr}`, {
        fontSize: flowFontOptions.fontSize.value,
        fill: flowFontOptions.fontColor.value,
        fontFamily: flowFontOptions.fontFamily.value,
        fontWeight: flowFontOptions.fontWeight.value,
+        pitch: arrow.pitch,
        originX: 'center',
        originY: 'center',
        name: 'flowText',
+        originText: `${txt}${index + 1}`,
        selectable: false,
        left: arrow.stickeyPoint.x,
        top: arrow.stickeyPoint.y,
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@ -1,6 +1,8 @@
 import { atom, selector } from 'recoil'
 import { MENU } from '@/common/common'
 import { outerLineFixState, outerLinePointsState } from '@/store/outerLineAtom'
+import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
+import { basicSettingState } from '@/store/settingAtom'

 export const canvasState = atom({
  key: 'canvasState',
@ -305,3 +307,60 @@ export const globalPitchState = atom({
  key: 'globalPitch',
  default: 4,
 })
+
+export const pitchSelector = selector({
+  key: 'pitchSelector',
+  get: ({ get }) => {
+    const globalPitch = get(globalPitchState)
+    const basicSettingStateValue = get(basicSettingState)
+    const roofAngleSet = basicSettingStateValue.roofAngleSet
+    if (roofAngleSet === 'slope') {
+      return globalPitch
+    } else {
+      return getDegreeByChon(globalPitch)
+    }
+  },
+  set: ({ get, set }, newValue) => {
+    const basicSettingStateValue = get(basicSettingState)
+    const roofAngleSet = basicSettingStateValue.roofAngleSet
+    console.log(newValue)
+    if (roofAngleSet === 'slope') {
+      set(globalPitchState, newValue)
+    } else {
+      set(globalPitchState, getChonByDegree(newValue))
+    }
+  },
+})
+
+export const ANGLE_TYPE = {
+  SLOPE: 'slope',
+  FLAT: 'flat',
+}
+
+export const currentAngleTypeSelector = selector({
+  key: 'currentAngleTypeSelector',
+  get: ({ get }) => {
+    const basicSettingStateValue = get(basicSettingState)
+    return basicSettingStateValue.roofAngleSet
+  },
+})
+
+export const pitchTextSelector = selector({
+  key: 'pitchTextSelector',
+  get: ({ get }) => {
+    const basicSettingStateValue = get(basicSettingState)
+    const roofAngleSet = basicSettingStateValue.roofAngleSet
+    return roofAngleSet === 'slope' ? '寸' : '度'
+  },
+})
+
+//각도 표시, offset 길이에서는 각도가 한자가 아닌 도형으로 표시되어야 한다.
+export const showAngleUnitSelector = selector({
+  key: 'showAngleUnitSelector',
+  get: ({ get }) => {
+    const basicSettingStateValue = get(basicSettingState)
+    const roofAngleSet = basicSettingStateValue.roofAngleSet
+
+    return roofAngleSet === 'slope' ? '寸' : '°'
+  },
+})
--- a/src/store/floorPlanObjectAtom.js
+++ b/src/store/floorPlanObjectAtom.js
@ -0,0 +1,9 @@
+import { atom } from 'recoil'
+import { v1 } from 'uuid'
+export const floorPlanObjectState = atom({
+  key: `floorPlanObjectState/${v1()}`,
+  default: {
+    objectNo: '', //물건번호
+  },
+  dangerouslyAllowMutability: true,
+})
--- a/src/store/settingAtom.js
+++ b/src/store/settingAtom.js
@ -157,3 +157,23 @@ export const roofDisplaySelector = selector({
  },
  dangerouslyAllowMutability: true,
 })
+
+export const basicSettingState = atom({
+  key: 'basicSettingState',
+  default: {
+    roofSizeSet: 1,
+    roofAngleSet: 'slope',
+    roofs: [
+      {
+        roofApply: true,
+        roofSeq: 1,
+        roofType: 1,
+        roofWidth: 200,
+        roofHeight: 200,
+        roofHajebichi: 200,
+        roofGap: 0,
+        roofLayout: 'parallel',
+      },
+    ],
+  },
+})
--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@ -262,6 +262,15 @@ export const getDegreeByChon = (chon) => {
  return Number((radians * (180 / Math.PI)).toFixed(2))
 }

+/**
+ *
+ */
+export const getChonByDegree = (degree) => {
+  // tan(theta) = height / base
+  const radians = (degree * Math.PI) / 180
+  return Number(Number(Math.tan(radians) * 10).toFixed(1))
+}
+
 /**
 * 두 점 사이의 방향을 반환합니다.
 * @param a {fabric.Object}