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

src/app/floor-plan/[mid]/[pid]/page.jsx

@@ -0,0 +1,3 @@
+export default function EstimatePage() {
+  return <div>이자리....</div>
+}

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>
     </>
   )
 }

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 />
     </>
   )
 }

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) {

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
 

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) {
+      if (selectedPlan?.canvasStatus) {
-        canvas?.loadFromJSON(JSON.parse(plan.canvasStatus), function () {
+        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) {
+    if (modifiedPlanFlag && selectedPlan?.id) {
-      checkCanvasObjectEvent(plan.id)
+      checkCanvasObjectEvent(selectedPlan.id)
     }
   }, [modifiedPlanFlag])
 
   useEffect(() => {
     loadCanvas()
     resetModifiedPlans()
-  }, [plan, canvas])
+  }, [selectedPlan, canvas])
 
   return (
     <div className="canvas-frame">

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) {
+export default function CanvasLayout({ children }) {
-  const { menuNumber } = props
+  // 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>
   )
 }

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' : ''}`}>
+        <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>{children}</div>
-          <CanvasLayout menuNumber={menuNumber} />
-        </div>
       </div>
     </>
   )

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">

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 = {

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' }}>

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">

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({
+  const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
-    roofSizeSet: 1,
-    roofAngleSet: 'slope',
-    roofs: [
-      {
-        roofApply: true,
-        roofSeq: 1,
-        roofType: 1,
-        roofWidth: 200,
-        roofHeight: 200,
-        roofHajebichi: 200,
-        roofGap: 0,
-        roofLayout: 'parallel',
-      },
-    ],
-  })
 
   const { getMessage } = useMessage()
   const { get, post } = useAxios()

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 = {

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 ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
-  const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset }
+  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 (

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' }}>

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' }}>

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' }}>

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' }}>

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' }}>

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 hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }
-  const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch }
+  const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText }
   const shedProps = { shedWidth, setShedWidth }
 
   const { getMessage } = useMessage()

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' }}>

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' }}>

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>
     </>
   )

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 [selectedRowData, setSelectedRowData] = useState([])
-  const [selectedRowDataCount, setSelectedRowDataCount] = useState(0)
+  // const [selectedRowDataCount, setSelectedRowDataCount] = useState(0)
 
   const router = useRouter()
   const pathname = usePathname()
@@ -165,11 +165,11 @@ export default function Stuff() {
     }
   }
 
-  //그리드 체크박스 선택시
+  //그리드 체크박스 선택시 미사용
-  const getSelectedRowdata = (data) => {
+  // const getSelectedRowdata = (data) => {
-    setSelectedRowData(data)
+  //   setSelectedRowData(data)
-    setSelectedRowDataCount(data.length)
+  //   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')}
+                {/* {getMessage('stuff.search.grid.selected')} */}
-                <span className="red">{convertNumberToPriceDecimal(selectedRowDataCount)}</span>
+                {/* <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>

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')
         })
       }

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(
+  // const onGridReady = useCallback(
-    (params) => {
+  //   (params) => {
-      setGridApi(params.api)
+  //     setGridApi(params.api)
-      planGridData ? setRowData(planGridData) : ''
+  //     planGridData ? setRowData(planGridData) : ''
-    },
+  //   },
-    [planGridData],
+  //   [planGridData],
-  )
+  // )
 
   return (
     <div className="ag-theme-quartz" style={{ height: '100%' }}>
       <AgGridReact
-        onGridReady={onGridReady}
+        // onGridReady={onGridReady}
         rowBuffer={rowBuffer}
         rowData={rowData}
         columnDefs={colDefs}

src/components/management/StuffQGrid.jsx

@@ -62,10 +62,10 @@ export default function StuffQGrid(props) {
     [count],
   )
 
-  // 체크박스 체크시
+  // 체크박스 체크시 체크박스 미사용
-  const onSelectionChanged = useCallback((event) => {
+  // const onSelectionChanged = useCallback((event) => {
-    props.getSelectedRowdata(event.api.getSelectedRows())
+  //   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>`}

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')
   }

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) : ''

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) : ''

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 { basicSettingState, roofDisplaySelector, settingModalFirstOptionsState } from '@/store/settingAtom'
-import { canvasState, dotLineGridSettingState } from '@/store/canvasAtom'
+import { canvasState, dotLineGridSettingState, pitchText, pitchTextSelector, showAngleUnitSelector } from '@/store/canvasAtom'
-import { setSurfaceShapePattern } from '@/util/canvas-util'
+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() //화면표시 초기화
   }

src/hooks/common/useCanvasMenu.js

@@ -0,0 +1,10 @@
+import { useState } from 'react'
+
+export const useCanvasMenu = () => {
+  const [menuNumber, setMenuNumber] = useState(null)
+
+  return {
+    menuNumber,
+    setMenuNumber,
+  }
+}

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']

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 }
 }

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 }
 }

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,
   }
 }

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')) {
+      if (target.name === 'lengthText' && target.type.toLowerCase().includes('text') > 0) {
-        target.set({ fontSize })
-        target.set({ fontFamily })
-      }
-
-      if (target.name === 'lengthText') {
         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) => {

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

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(/∠/g, '∠')
+    return cs.replace(/##/g, '"').replace(/∠/g, '∠').replace(/°/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,

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,

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' ? '寸' : '°'
+  },
+})

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,
+})

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',
+      },
+    ],
+  },
+})

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}