경사, 각도 설정 추가

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 }

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/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 } 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,11 @@ 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 {} = useFont()
   const {} = useGrid()
   const {} = useRoof()
@@ -29,6 +31,24 @@ export function useCanvasConfigInitialize() {
     canvas.renderAll()
   }, [roofDisplay])
 
+  useEffect(() => {
+    if (!canvas) return
+    const texts = canvas.getObjects().filter((obj) => obj.name === 'pitchText' || obj.name === 'flowText')
+    if (basicSetting.roofAngleSet === 'slope') {
+      texts.forEach((obj) => {
+        obj.set({ text: `${obj.originText}-∠${obj.pitch}${pitchText}` })
+      })
+    }
+
+    if (basicSetting.roofAngleSet === 'flat') {
+      texts.forEach((obj) => {
+        obj.set({ text: `${obj.originText}-∠${getDegreeByChon(obj.pitch)}${pitchText}` })
+      })
+    }
+
+    canvas.renderAll()
+  }, [basicSetting])
+
   const canvasLoadInit = () => {
     roofInit() //화면표시 초기화
   }

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 { canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
 import { LINE_TYPE } from '@/common/common'
@@ -28,6 +28,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)
@@ -217,5 +219,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 { canvasState, currentAngleTypeSelector, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
 import { useEffect, useRef, useState } from 'react'
 import { useLine } from '@/hooks/useLine'
@@ -19,6 +19,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 +36,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 },
@@ -216,5 +219,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'
@@ -17,13 +17,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')
@@ -68,8 +71,8 @@ export function useRoofShapeSetting(id) {
             strokeWidth,
           })
 
-          addPitchText(line)
+          /*addPitchText(line)
-          line.setViewLengthText(false)
+          line.setViewLengthText(false)*/
         }
       })
       canvas.renderAll()
@@ -114,12 +117,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])
@@ -629,5 +630,6 @@ export function useRoofShapeSetting(id) {
     setButtonAct,
     handleConfirm,
     handleRollBack,
+    pitchText,
   }
 }

src/hooks/useLine.js

@@ -97,9 +97,11 @@ export const useLine = () => {
         left,
         top,
         fontSize: 20,
+        originText: `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}`,
         fill: 'black',
         name: 'pitchText',
         parentId: line.id,
+        pitch: attributes.pitch,
       },
     )
 

src/hooks/usePolygon.js

@@ -406,9 +406,11 @@ export const usePolygon = () => {
         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,49 @@ 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' ? '寸' : '度'
+  },
+})

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}