변별로 설정 => 한쪽흐름 경사 추가

src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx

@@ -39,6 +39,8 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
     handleConfirm,
     handleRollBack,
     pitchText,
+    shedPitch,
+    setShedPitch,
   } = useRoofShapeSetting(id)
   const { closePopup } = usePopup()
 
@@ -61,6 +63,8 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
     setHipAndGableWidth,
     shedWidth,
     setShedWidth,
+    shedPitch,
+    setShedPitch,
     hasSleeve,
     setHasSleeve,
     buttonAct,

src/components/floor-plan/modal/roofShape/type/Side.jsx

@@ -33,6 +33,8 @@ export default function Side(props) {
     handleConfirm,
     handleRollBack,
     pitchText,
+    shedPitch,
+    setShedPitch,
   } = props
 
   const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
@@ -40,7 +42,7 @@ export default function Side(props) {
   const wallProps = { sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }
   const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }
   const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText }
-  const shedProps = { shedWidth, setShedWidth }
+  const shedProps = { shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }
 
   const { getMessage } = useMessage()
 

src/components/floor-plan/modal/roofShape/type/option/Shed.jsx

@@ -1,10 +1,19 @@
 import { useMessage } from '@/hooks/useMessage'
-import { onlyNumberInputChange } from '@/util/input-utils'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
-export default function Shed({ shedWidth, setShedWidth }) {
+export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }) {
   const { getMessage } = useMessage()
   return (
     <>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '24px' }}>
+          {getMessage('slope')}
+        </span>
+        <div className="input-grid mr5" style={{ width: '100px' }}>
+          <input type="text" className="input-origin block" value={shedPitch} onChange={(e) => onlyNumberWithDotInputChange(e, setShedPitch)} />
+        </div>
+        <span className="thin">{pitchText}</span>
+      </div>
       <div className="outline-form">
         <span className="mr10">{getMessage('shed.width')}</span>
         <div className="input-grid mr5" style={{ width: '100px' }}>

src/hooks/common/useCommonUtils.js

@@ -476,7 +476,7 @@ export function useCommonUtils() {
   addDocumentEventListener('keydown', document, (e) => {
     if (e.key === 'Enter') {
       const activeObject = canvas.getActiveObject()
-      if (activeObject.name === 'commonText') {
+      if (activeObject && activeObject.name === 'commonText') {
         if (activeObject && activeObject.isEditing) {
           if (activeObject.text === '') {
             canvas?.remove(activeObject)
@@ -756,7 +756,6 @@ export function useCommonUtils() {
   return {
     commonFunctions,
     dimensionSettings,
-    commonDeleteText,
     commonMoveObject,
     commonDeleteText,
     deleteObject,

src/hooks/roofcover/useRoofShapeSetting.js

@@ -29,6 +29,7 @@ export function useRoofShapeSetting(id) {
   const [jerkinHeadWidth, setJerkinHeadWidth] = useState(800) // 반절처 폭
   const [jerkinHeadPitch, setJerkinHeadPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20) // 반절처 경사
   const [hipAndGableWidth, setHipAndGableWidth] = useState(800) // 팔작지붕 폭
+  const [shedPitch, setShedPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8) // 팔작지붕 폭
   const [shedWidth, setShedWidth] = useState(300) // 한쪽흐름 폭
   const [hasSleeve, setHasSleeve] = useState('0')
   const currentObject = useRecoilValue(currentObjectState)
@@ -41,6 +42,7 @@ export function useRoofShapeSetting(id) {
   const isFixRef = useRef(false)
 
   const pitchRef = useRef(null)
+  const shedPitchRef = useRef(null)
   const jerkinHeadPitchRef = useRef(null)
 
   const history = useRef([])
@@ -49,6 +51,9 @@ export function useRoofShapeSetting(id) {
   useEffect(() => {
     pitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? pitch : getChonByDegree(pitch)
   }, [pitch])
+  useEffect(() => {
+    shedPitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? shedPitch : getChonByDegree(shedPitch)
+  }, [shedPitch])
   useEffect(() => {
     jerkinHeadPitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? jerkinHeadPitch : getChonByDegree(jerkinHeadPitch)
   }, [jerkinHeadPitch])
@@ -579,8 +584,12 @@ export function useRoofShapeSetting(id) {
         // 한쪽흐름
         attributes = {
           type: LINE_TYPE.WALLLINE.SHED,
+          pitch: shedPitchRef.current,
           width: shedWidth / 10,
         }
+        addPitchText(currentObject)
+        selectedLine.set({ strokeWidth: 4 })
+        selectedLine.set({ stroke: '#000000' })
         break
       }
     }
@@ -648,5 +657,7 @@ export function useRoofShapeSetting(id) {
     handleConfirm,
     handleRollBack,
     pitchText,
+    shedPitch,
+    setShedPitch,
   }
 }

src/hooks/useAdsorptionPoint.js

@@ -31,9 +31,8 @@ export function useAdsorptionPoint() {
       name: 'adsorptionPoint',
       visible: isGridDisplay,
     })
-
     canvas.add(adsorptionPoint)
-
+    setAdsorptionPointMode(true)
     canvas.renderAll()
   }
 

src/hooks/useCanvasEvent.js

@@ -119,7 +119,8 @@ export function useCanvasEvent() {
         target.fill = lengthTextOption.fontColor.value
         target.fontFamily = lengthTextOption.fontFamily.value
         target.fontSize = lengthTextOption.fontSize.value
-        target.fontWeight = lengthTextOption.fontWeight.value
+        target.fontStyle = lengthTextOption.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal'
+        target.fontWeight = lengthTextOption.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal'
 
         // Add a property to store the previous value
         const previousValue = target.text