Merge branch 'dev' of https://git.hanasys.jp/qcast3/qcast-front into dev

src/components/floor-plan/modal/lineTypes/Angle.jsx

@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Angle({ props }) {
   const { getMessage } = useMessage()
@@ -14,14 +15,29 @@ export default function Angle({ props }) {
             <div className="outline-form">
               <span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
               <div className="input-grid" style={{ width: '63px' }}>
-                <input
+                {/*<input*/}
-                  type="text"
+                {/*  type="text"*/}
+                {/*  className="input-origin block"*/}
+                {/*  value={angle1}*/}
+                {/*  ref={angle1Ref}*/}
+                {/*  onFocus={(e) => (angle1Ref.current.value = '')}*/}
+                {/*  onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}*/}
+                {/*  placeholder="45"*/}
+                {/*/>*/}
+                <CalculatorInput
+                  id=""
+                  name=""
+                  label=""
                   className="input-origin block"
                   value={angle1}
                   ref={angle1Ref}
-                  onFocus={(e) => (angle1Ref.current.value = '')}
+                  onChange={(value) => setAngle1(value)}
-                  onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}
                   placeholder="45"
+                  onFocus={() => (angle1Ref.current.value = '')}
+                  options={{
+                    allowNegative: false,
+                    allowDecimal: true
+                  }}
                 />
               </div>
               <button
@@ -34,14 +50,29 @@ export default function Angle({ props }) {
             <div className="outline-form">
               <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
               <div className="input-grid" style={{ width: '63px' }}>
-                <input
+                {/*<input*/}
-                  type="text"
+                {/*  type="text"*/}
+                {/*  className="input-origin block"*/}
+                {/*  value={length1}*/}
+                {/*  ref={length1Ref}*/}
+                {/*  onFocus={(e) => (length1Ref.current.value = '')}*/}
+                {/*  onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
+                {/*  placeholder="3000"*/}
+                {/*/>*/}
+                <CalculatorInput
+                  id=""
+                  name=""
+                  label=""
                   className="input-origin block"
                   value={length1}
                   ref={length1Ref}
-                  onFocus={(e) => (length1Ref.current.value = '')}
+                  onChange={(value) => setLength1(value)}
-                  onChange={(e) => setLength1(normalizeDigits(e.target.value))}
                   placeholder="3000"
+                  onFocus={() => (length1Ref.current.value = '')}
+                  options={{
+                    allowNegative: false,
+                    allowDecimal: false
+                  }}
                 />
               </div>
               <button

src/components/floor-plan/modal/lineTypes/Diagonal.jsx

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Diagonal({ props }) {
   const { getMessage } = useMessage()
@@ -30,14 +31,29 @@ export default function Diagonal({ props }) {
               {getMessage('modal.cover.outline.length')}
             </span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input
+              {/*<input*/}
-                type="text"
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  value={outerLineDiagonalLength}*/}
+              {/*  ref={outerLineDiagonalLengthRef}*/}
+              {/*  onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}*/}
+              {/*  onChange={(e) => setOuterLineDiagonalLength(normalizeDigits(e.target.value))}*/}
+              {/*  placeholder="3000"*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 value={outerLineDiagonalLength}
                 ref={outerLineDiagonalLengthRef}
-                onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}
+                onChange={(value) => setOuterLineDiagonalLength(value)}
-                onChange={(e) => setOuterLineDiagonalLength(normalizeDigits(e.target.value))}
                 placeholder="3000"
+                onFocus={() => (outerLineDiagonalLengthRef.current.value = '')}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
               />
             </div>
             <button
@@ -52,14 +68,29 @@ export default function Diagonal({ props }) {
           <div className="outline-form">
             <span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input
+              {/*<input*/}
-                type="text"
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  value={length1}*/}
+              {/*  ref={length1Ref}*/}
+              {/*  onFocus={(e) => (length1Ref.current.value = '')}*/}
+              {/*  onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
+              {/*  placeholder="3000"*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 value={length1}
                 ref={length1Ref}
-                onFocus={(e) => (length1Ref.current.value = '')}
+                onChange={(value) => setLength1(value)}
-                onChange={(e) => setLength1(normalizeDigits(e.target.value))}
                 placeholder="3000"
+                onFocus={() => (length1Ref.current.value = '')}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
               />
             </div>
             <button
@@ -110,14 +141,29 @@ export default function Diagonal({ props }) {
           <div className="outline-form">
             <span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
             <div className="input-grid" style={{ width: '98px' }}>
-              <input
+              {/*<input*/}
-                type="text"
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  value={length2}*/}
+              {/*  ref={length2Ref}*/}
+              {/*  onChange={(e) => setLength2(normalizeDigits(e.target.value))}*/}
+              {/*  readOnly={true}*/}
+              {/*  placeholder="3000"*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 value={length2}
                 ref={length2Ref}
-                onChange={(e) => setLength2(normalizeDigits(e.target.value))}
+                onChange={(value) => setLength2(value)}
-                readOnly={true}
                 placeholder="3000"
+                onFocus={() => (length2Ref.current.value = '')}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
               />
             </div>
           </div>

src/components/floor-plan/modal/lineTypes/DoublePitch.jsx

@@ -1,6 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
 import { getDegreeByChon } from '@/util/canvas-util'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function DoublePitch({ props }) {
   const { getMessage } = useMessage()
@@ -50,14 +51,29 @@ export default function DoublePitch({ props }) {
           <div className="outline-form">
             <span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input
+              {/*<input*/}
-                type="text"
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  value={angle1}*/}
+              {/*  ref={angle1Ref}*/}
+              {/*  onFocus={(e) => (angle1Ref.current.value = '')}*/}
+              {/*  onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}*/}
+              {/*  placeholder="45"*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 value={angle1}
                 ref={angle1Ref}
-                onFocus={(e) => (angle1Ref.current.value = '')}
+                onChange={(value) => setAngle1(value)}
-                onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}
                 placeholder="45"
+                onFocus={() => (angle1Ref.current.value = '')}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: true
+                }}
               />
             </div>
             <button className="reset-btn" onClick={() => setAngle1(0)}></button>
@@ -67,14 +83,29 @@ export default function DoublePitch({ props }) {
           <div className="outline-form">
             <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input
+              {/*<input*/}
-                type="text"
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  value={length1}*/}
+              {/*  ref={length1Ref}*/}
+              {/*  onFocus={(e) => (length1Ref.current.value = '')}*/}
+              {/*  onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
+              {/*  placeholder="3000"*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 value={length1}
                 ref={length1Ref}
-                onFocus={(e) => (length1Ref.current.value = '')}
+                onChange={(value) => setLength1(value)}
-                onChange={(e) => setLength1(normalizeDigits(e.target.value))}
                 placeholder="3000"
+                onFocus={() => (length1Ref.current.value = '')}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
               />
             </div>
             <button
@@ -125,18 +156,36 @@ export default function DoublePitch({ props }) {
           <div className="outline-form">
             <span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input
+              {/*<input*/}
-                type="text"
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  value={angle2}*/}
+              {/*  ref={angle2Ref}*/}
+              {/*  onFocus={(e) => (angle2Ref.current.value = '')}*/}
+              {/*  onChange={(e) => {*/}
+              {/*    const v = normalizeDecimalLimit(e.target.value, 2)*/}
+              {/*    setAngle2(v)*/}
+              {/*    setLength2(getLength2())*/}
+              {/*  }}*/}
+              {/*  placeholder="45"*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 value={angle2}
                 ref={angle2Ref}
-                onFocus={(e) => (angle2Ref.current.value = '')}
+                onChange={(value) => {
-                onChange={(e) => {
+                  setAngle2(value)
-                  const v = normalizeDecimalLimit(e.target.value, 2)
-                  setAngle2(v)
                   setLength2(getLength2())
                 }}
                 placeholder="45"
+                onFocus={() => (angle2Ref.current.value = '')}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: true
+                }}
               />
             </div>
             <button
@@ -151,15 +200,30 @@ export default function DoublePitch({ props }) {
           <div className="outline-form">
             <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
             <div className="input-grid" style={{ width: '63px' }}>
-              <input
+              {/*<input*/}
-                type="text"
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  value={length2}*/}
+              {/*  ref={length2Ref}*/}
+              {/*  onFocus={(e) => (length2Ref.current.value = '')}*/}
+              {/*  onChange={(e) => setLength2(normalizeDigits(e.target.value))}*/}
+              {/*  readOnly={true}*/}
+              {/*  placeholder="3000"*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 value={length2}
                 ref={length2Ref}
-                onFocus={(e) => (length2Ref.current.value = '')}
+                onChange={(value) => setLength2(value)}
-                onChange={(e) => setLength2(normalizeDigits(e.target.value))}
-                readOnly={true}
                 placeholder="3000"
+                onFocus={() => (length2Ref.current.value = '')}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
               />
             </div>
             <button

src/components/floor-plan/modal/lineTypes/RightAngle.jsx

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function RightAngle({ props }) {
   const { getMessage } = useMessage()
@@ -22,14 +23,29 @@ export default function RightAngle({ props }) {
         <div className="outline-form">
           <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
           <div className="input-grid" style={{ width: '63px' }}>
-            <input
+            {/*<input*/}
-              type="text"
+            {/*  type="text"*/}
+            {/*  className="input-origin block"*/}
+            {/*  value={length1}*/}
+            {/*  ref={length1Ref}*/}
+            {/*  onFocus={(e) => (length1Ref.current.value = '')}*/}
+            {/*  onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
+            {/*  placeholder="3000"*/}
+            {/*/>*/}
+            <CalculatorInput
+              id=""
+              name=""
+              label=""
               className="input-origin block"
+              placeholder="3000"
               value={length1}
               ref={length1Ref}
-              onFocus={(e) => (length1Ref.current.value = '')}
+              onChange={(value) => setLength1(value)}
-              onChange={(e) => setLength1(normalizeDigits(e.target.value))}
+              onFocus={() => (length1Ref.current.value = '')}
-              placeholder="3000"
+              options={{
+                allowNegative: false,
+                allowDecimal: false
+              }}
             />
           </div>
           <button
@@ -78,14 +94,29 @@ export default function RightAngle({ props }) {
         <div className="outline-form">
           <span className="mr10">{getMessage('modal.cover.outline.length')}</span>
           <div className="input-grid" style={{ width: '63px' }}>
-            <input
+            {/*<input*/}
-              type="text"
+            {/*  type="text"*/}
+            {/*  className="input-origin block"*/}
+            {/*  value={length2}*/}
+            {/*  ref={length2Ref}*/}
+            {/*  onFocus={(e) => (length2Ref.current.value = '')}*/}
+            {/*  onChange={(e) => setLength2(normalizeDigits(e.target.value))}*/}
+            {/*  placeholder="3000"*/}
+            {/*/>*/}
+            <CalculatorInput
+              id=""
+              name=""
+              label=""
               className="input-origin block"
               value={length2}
               ref={length2Ref}
-              onFocus={(e) => (length2Ref.current.value = '')}
+              onFocus={() => (length2Ref.current.value = '')}
-              onChange={(e) => setLength2(normalizeDigits(e.target.value))}
+              onChange={(value) => setLength2(value)}
               placeholder="3000"
+              options={{
+                allowNegative: false,
+                allowDecimal: false
+              }}
             />
           </div>
           <button

src/components/floor-plan/modal/object/DormerOffset.jsx

@@ -6,6 +6,7 @@ import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useObjectBatch } from '@/hooks/object/useObjectBatch'
 import { canvasState } from '@/store/canvasAtom'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function DormerOffset(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -16,6 +17,8 @@ export default function DormerOffset(props) {
   const [arrow2, setArrow2] = useState(null)
   const arrow1LengthRef = useRef()
   const arrow2LengthRef = useRef()
+  const [arrow1Length, setArrow1Length] = useState(0)
+  const [arrow2Length, setArrow2Length] = useState(0)
 
   const canvas = useRecoilValue(canvasState)
   const { dormerOffsetKeyEvent, dormerOffset } = useObjectBatch({})
@@ -50,7 +53,20 @@ export default function DormerOffset(props) {
               <p className="mb5">{getMessage('length')}</p>
               <div className="input-move-wrap mb5">
                 <div className="input-move">
-                  <input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />
+                  {/*<input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    value={arrow1LengthRef.current.value}
+                    ref={arrow1LengthRef}
+                    onChange={(value) => setArrow1Length(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
+                  />
                 </div>
                 <span>mm</span>
                 <div className="direction-move-wrap">

src/components/floor-plan/modal/object/SizeSetting.jsx

@@ -5,10 +5,11 @@ import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { contextPopupPositionState } from '@/store/popupAtom'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useObjectBatch } from '@/hooks/object/useObjectBatch'
 import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function SizeSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -20,7 +21,8 @@ export default function SizeSetting(props) {
   const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch({})
   const widthRef = useRef(null)
   const heightRef = useRef(null)
-
+  const [width, setWidth] = useState(target?.originWidth ? (target.originWidth * 10) : 0)
+  const [height, setHeight] = useState(target?.originHeight ? (target.originHeight * 10) : 0)
   // const { initEvent } = useEvent()
   // const { initEvent } = useContext(EventContext)
 
@@ -28,6 +30,15 @@ export default function SizeSetting(props) {
   //   initEvent()
   // }, [])
 
+  useEffect(() => {
+    if (target?.originWidth !== undefined) {
+      setWidth(target.originWidth * 10);
+    }
+    if (target?.originHeight !== undefined) {
+      setHeight(target.originHeight * 10);
+    }
+  }, [target]);
+
   const handleReSizeObject = () => {
     const width = widthRef.current.value
     const height = heightRef.current.value
@@ -47,11 +58,25 @@ export default function SizeSetting(props) {
           <div className="size-option-top">
             <div className="size-option-wrap">
               <div className="size-option mb5">
-                <input type="text" className="input-origin mr5" value={(target?.originWidth * 10).toFixed(0)} readOnly={true} />
+                <input type="text" className="input-origin mr5" value={width}
+                       onChange={(e) => setWidth(e.target.value)} readOnly={true} />
                 <span className="normal-font">mm</span>
               </div>
               <div className="size-option">
-                <input type="text" className="input-origin mr5" defaultValue={(target?.originWidth * 10).toFixed(0)} ref={widthRef} />
+                {/*<input type="text" className="input-origin mr5" defaultValue={(target?.originWidth * 10).toFixed(0)} ref={widthRef} />*/}
+                <CalculatorInput
+                  id=""
+                  name=""
+                  label=""
+                  className="input-origin block"
+                  value={width}
+                  ref={widthRef}
+                  onChange={(value) => setWidth(value)}
+                  options={{
+                    allowNegative: false,
+                    allowDecimal: false
+                  }}
+                />
                 <span className="normal-font">mm</span>
               </div>
             </div>
@@ -60,11 +85,25 @@ export default function SizeSetting(props) {
             <div className="size-option-side">
               <div className="size-option-wrap">
                 <div className="size-option mb5">
-                  <input type="text" className="input-origin mr5" value={(target?.originHeight * 10).toFixed(0)} readOnly={true} />
+                  <input type="text" className="input-origin mr5" value={height}
+                         onChange={(e) => setHeight(e.target.value)}  readOnly={true} />
                   <span className="normal-font">mm</span>
                 </div>
                 <div className="size-option">
-                  <input type="text" className="input-origin mr5" defaultValue={(target?.originHeight * 10).toFixed(0)} ref={heightRef} />
+                  {/*<input type="text" className="input-origin mr5" defaultValue={(target?.originHeight * 10).toFixed(0)} ref={heightRef} />*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    value={height}
+                    ref={heightRef}
+                    onChange={(value) => setHeight(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
+                  />
                   <span className="normal-font">mm</span>
                 </div>
               </div>

src/components/floor-plan/modal/object/type/OpenSpace.jsx

@@ -1,10 +1,13 @@
 import { forwardRef, useState, useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { INPUT_TYPE } from '@/common/common'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const OpenSpace = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
   const [selectedType, setSelectedType] = useState(INPUT_TYPE.FREE)
+  const [width, setWidth] = useState(0)
+  const [height, setHeight] = useState(0)
 
   useEffect(() => {
     if (selectedType === INPUT_TYPE.FREE) {
@@ -51,12 +54,26 @@ const OpenSpace = forwardRef((props, refs) => {
               <div className="eaves-keraba-td">
                 <div className="outline-form">
                   <div className="input-grid mr5" style={{ width: '100px' }}>
-                    <input
+                    {/*<input*/}
-                      type="text"
+                    {/*  type="text"*/}
+                    {/*  className="input-origin block"*/}
+                    {/*  placeholder={0}*/}
+                    {/*  ref={refs.widthRef}*/}
+                    {/*  disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
+                    {/*/>*/}
+                    <CalculatorInput
+                      id=""
+                      name=""
+                      label=""
                       className="input-origin block"
-                      placeholder={0}
+                      value={width}
                       ref={refs.widthRef}
+                      onChange={(value) => setWidth(value)}
                       disabled={selectedType !== INPUT_TYPE.DIMENSION}
+                      options={{
+                        allowNegative: false,
+                        allowDecimal: false
+                      }}
                     />
                   </div>
                   <span className="thin">mm</span>
@@ -68,12 +85,26 @@ const OpenSpace = forwardRef((props, refs) => {
               <div className="eaves-keraba-td">
                 <div className="outline-form">
                   <div className="input-grid mr5" style={{ width: '100px' }}>
-                    <input
+                    {/*<input*/}
-                      type="text"
+                    {/*  type="text"*/}
+                    {/*  className="input-origin block"*/}
+                    {/*  placeholder={0}*/}
+                    {/*  ref={refs.heightRef}*/}
+                    {/*  disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
+                    {/*/>*/}
+                    <CalculatorInput
+                      id=""
+                      name=""
+                      label=""
                       className="input-origin block"
-                      placeholder={0}
+                      value={height}
                       ref={refs.heightRef}
+                      onChange={(value) => setHeight(value)}
                       disabled={selectedType !== INPUT_TYPE.DIMENSION}
+                      options={{
+                        allowNegative: false,
+                        allowDecimal: false
+                      }}
                     />
                   </div>
                   <span className="thin">mm</span>

src/components/floor-plan/modal/object/type/PentagonDormer.jsx

@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
 import { forwardRef, useState } from 'react'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const PentagonDormer = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
@@ -11,6 +12,11 @@ const PentagonDormer = forwardRef((props, refs) => {
     setDirection(e.target.value)
     refs.directionRef.current = e.target.value
   }
+  const [pitch, setPitch] = useState(4) // pitch 상태 추가, 기본값 4로 설정
+  const [offsetWidth, setOffsetWidth] = useState(300) // offsetWidth 상태 추가, 기본값 300으로
+  const [offsetDepth, setOffsetDepth] = useState(400) // offsetDepth 상태 추가, 기본값 400으로
+  const [width, setWidth] = useState(2000) // width 상태 추가, 기본값 2000으로
+  const [height, setHeight] = useState(2000) // height 상태 추가, 기본값 2000으로
 
   return (
     <>
@@ -30,7 +36,20 @@ const PentagonDormer = forwardRef((props, refs) => {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={2000} />
+                      {/*<input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={2000} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={height}
+                        ref={refs.heightRef}
+                        onChange={(value) => setHeight(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -41,7 +60,20 @@ const PentagonDormer = forwardRef((props, refs) => {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />
+                      {/*<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={offsetDepth}
+                        ref={refs.offsetRef}
+                        onChange={(value) => setOffsetDepth(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -55,7 +87,20 @@ const PentagonDormer = forwardRef((props, refs) => {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} ref={refs.widthRef} defaultValue={2000} />
+                      {/*<input type="text" className="input-origin block" placeholder={0} ref={refs.widthRef} defaultValue={2000} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={width}
+                        ref={refs.widthRef}
+                        onChange={(value) => setWidth(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -66,7 +111,20 @@ const PentagonDormer = forwardRef((props, refs) => {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} defaultValue={300} />
+                      {/*<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} defaultValue={300} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={offsetWidth}
+                        ref={refs.offsetWidthRef}
+                        onChange={(value) => setOffsetWidth(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -77,7 +135,20 @@ const PentagonDormer = forwardRef((props, refs) => {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />
+                      {/*<input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        ref={refs.pitchRef}
+                        value={pitch}
+                        onChange={(value) => setPitch(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: true //(index !== 0),
+                        }}
+                      ></CalculatorInput>
                     </div>
                     <span className="thin">寸</span>
                   </div>

src/components/floor-plan/modal/object/type/Shadow.jsx

@@ -1,11 +1,14 @@
 import { forwardRef, useState, useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { INPUT_TYPE } from '@/common/common'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const Shadow = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
 
   const [selectedType, setSelectedType] = useState(INPUT_TYPE.FREE)
+  const [width, setWidth] = useState(0)
+  const [height, setHeight] = useState(0)
 
   useEffect(() => {
     if (selectedType === INPUT_TYPE.FREE) {
@@ -51,12 +54,26 @@ const Shadow = forwardRef((props, refs) => {
               <div className="eaves-keraba-td">
                 <div className="outline-form">
                   <div className="input-grid mr5" style={{ width: '100px' }}>
-                    <input
+                    {/*<input*/}
-                      type="text"
+                    {/*  type="text"*/}
+                    {/*  className="input-origin block"*/}
+                    {/*  placeholder={0}*/}
+                    {/*  ref={refs.widthRef}*/}
+                    {/*  disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
+                    {/*/>*/}
+                    <CalculatorInput
+                      id=""
+                      name=""
+                      label=""
                       className="input-origin block"
-                      placeholder={0}
+                      value={width}
                       ref={refs.widthRef}
+                      onChange={(value) => setWidth(value)}
                       disabled={selectedType !== INPUT_TYPE.DIMENSION}
+                      options={{
+                        allowNegative: false,
+                        allowDecimal: false
+                      }}
                     />
                   </div>
                   <span className="thin">mm</span>
@@ -68,12 +85,26 @@ const Shadow = forwardRef((props, refs) => {
               <div className="eaves-keraba-td">
                 <div className="outline-form">
                   <div className="input-grid mr5" style={{ width: '100px' }}>
-                    <input
+                    {/*<input*/}
-                      type="text"
+                    {/*  type="text"*/}
+                    {/*  className="input-origin block"*/}
+                    {/*  placeholder={0}*/}
+                    {/*  ref={refs.heightRef}*/}
+                    {/*  disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
+                    {/*/>*/}
+                    <CalculatorInput
+                      id=""
+                      name=""
+                      label=""
                       className="input-origin block"
-                      placeholder={0}
+                      value={height}
                       ref={refs.heightRef}
+                      onChange={(value) => setHeight(value)}
                       disabled={selectedType !== INPUT_TYPE.DIMENSION}
+                      options={{
+                        allowNegative: false,
+                        allowDecimal: false
+                      }}
                     />
                   </div>
                   <span className="thin">mm</span>

src/components/floor-plan/modal/object/type/TriangleDormer.jsx

@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
 import { forwardRef, useState } from 'react'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const TriangleDormer = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
@@ -11,6 +12,9 @@ const TriangleDormer = forwardRef((props, refs) => {
     setDirection(e.target.value)
     refs.directionRef.current = e.target.value
   }
+const [height, setHeight] = useState(1500)
+const [offset, setOffset] = useState(400)
+const [pitch, setPitch] = useState(4)
 
   return (
     <>
@@ -30,7 +34,20 @@ const TriangleDormer = forwardRef((props, refs) => {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={1500} />
+                      {/*<input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={1500} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={height}
+                        ref={refs.heightRef}
+                        onChange={(value) => setHeight(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -41,7 +58,20 @@ const TriangleDormer = forwardRef((props, refs) => {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />
+                      {/*<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={offset}
+                        ref={refs.offsetRef}
+                        onChange={(value) => setOffset(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -52,7 +82,20 @@ const TriangleDormer = forwardRef((props, refs) => {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />
+                      {/*<input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        ref={refs.pitchRef}
+                        value={pitch}
+                        onChange={(value) => setPitch(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: true
+                        }}
+                      />
                     </div>
                     <span className="thin">寸</span>
                   </div>

src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx

@@ -219,7 +219,6 @@ export default function ContextRoofAllocationSetting(props) {
                               name=""
                               label=""
                               className="input-origin block"
-                              ref={pitchRef}
                               value={currentAngleType === 'slope' ? (roof.pitch ?? '') : (roof.angle ?? '')}
                               onChange={(value) => {
                                 handleChangePitch(value, index)

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -220,7 +220,6 @@ export default function RoofAllocationSetting(props) {
                                 name=""
                                 label=""
                                 className="input-origin block"
-                                ref={pitchRef}
                                 value={currentAngleType === 'slope' ? (roof.pitch ?? '') : (roof.angle ?? '')}
                                 onChange={(value) => {
                                   handleChangePitch(value, index)