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

@@ -1,7 +1,6 @@
 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()
@@ -15,29 +14,14 @@ 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}
-                  onChange={(value) => setAngle1(value)}
+                  onFocus={(e) => (angle1Ref.current.value = '')}
+                  onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}
                   placeholder="45"
-                  onFocus={() => (angle1Ref.current.value = '')}
-                  options={{
-                    allowNegative: false,
-                    allowDecimal: true
-                  }}
                 />
               </div>
               <button
@@ -50,29 +34,14 @@ 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}
-                  onChange={(value) => setLength1(value)}
+                  onFocus={(e) => (length1Ref.current.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,6 +1,5 @@
 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()
@@ -31,29 +30,14 @@ 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}
-                onChange={(value) => setOuterLineDiagonalLength(value)}
+                onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}
+                onChange={(e) => setOuterLineDiagonalLength(normalizeDigits(e.target.value))}
                 placeholder="3000"
-                onFocus={() => (outerLineDiagonalLengthRef.current.value = '')}
-                options={{
-                  allowNegative: false,
-                  allowDecimal: false
-                }}
               />
             </div>
             <button
@@ -68,29 +52,14 @@ 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}
-                onChange={(value) => setLength1(value)}
+                onFocus={(e) => (length1Ref.current.value = '')}
+                onChange={(e) => setLength1(normalizeDigits(e.target.value))}
                 placeholder="3000"
-                onFocus={() => (length1Ref.current.value = '')}
-                options={{
-                  allowNegative: false,
-                  allowDecimal: false
-                }}
               />
             </div>
             <button
@@ -141,29 +110,14 @@ 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={(value) => setLength2(value)}
+                onChange={(e) => setLength2(normalizeDigits(e.target.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,7 +1,6 @@
 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()
@@ -51,29 +50,14 @@ 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}
-                onChange={(value) => setAngle1(value)}
+                onFocus={(e) => (angle1Ref.current.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>
@@ -83,29 +67,14 @@ 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}
-                onChange={(value) => setLength1(value)}
+                onFocus={(e) => (length1Ref.current.value = '')}
+                onChange={(e) => setLength1(normalizeDigits(e.target.value))}
                 placeholder="3000"
-                onFocus={() => (length1Ref.current.value = '')}
-                options={{
-                  allowNegative: false,
-                  allowDecimal: false
-                }}
               />
             </div>
             <button
@@ -156,36 +125,18 @@ 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}
-                onChange={(value) => {
+                onFocus={(e) => (angle2Ref.current.value = '')}
-                  setAngle2(value)
+                onChange={(e) => {
+                  const v = normalizeDecimalLimit(e.target.value, 2)
+                  setAngle2(v)
                   setLength2(getLength2())
                 }}
                 placeholder="45"
-                onFocus={() => (angle2Ref.current.value = '')}
-                options={{
-                  allowNegative: false,
-                  allowDecimal: true
-                }}
               />
             </div>
             <button
@@ -200,30 +151,15 @@ 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}
-                onChange={(value) => setLength2(value)}
+                onFocus={(e) => (length2Ref.current.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,6 +1,5 @@
 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()
@@ -23,29 +22,14 @@ 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}
-              onChange={(value) => setLength1(value)}
+              onFocus={(e) => (length1Ref.current.value = '')}
-              onFocus={() => (length1Ref.current.value = '')}
+              onChange={(e) => setLength1(normalizeDigits(e.target.value))}
-              options={{
+              placeholder="3000"
-                allowNegative: false,
-                allowDecimal: false
-              }}
             />
           </div>
           <button
@@ -94,29 +78,14 @@ 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={() => (length2Ref.current.value = '')}
+              onFocus={(e) => (length2Ref.current.value = '')}
-              onChange={(value) => setLength2(value)}
+              onChange={(e) => setLength2(normalizeDigits(e.target.value))}
               placeholder="3000"
-              options={{
-                allowNegative: false,
-                allowDecimal: false
-              }}
             />
           </div>
           <button

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

@@ -6,7 +6,6 @@ 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)
@@ -17,8 +16,6 @@ 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({})
@@ -53,20 +50,7 @@ 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,11 +5,10 @@ import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { contextPopupPositionState } from '@/store/popupAtom'
-import { useEffect, useRef, useState } from 'react'
+import { 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)
@@ -21,8 +20,7 @@ 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)
 
@@ -30,15 +28,6 @@ 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
@@ -58,25 +47,11 @@ 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={width}
+                <input type="text" className="input-origin mr5" value={(target?.originWidth * 10).toFixed(0)} readOnly={true} />
-                       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>
@@ -85,25 +60,11 @@ 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={height}
+                  <input type="text" className="input-origin mr5" value={(target?.originHeight * 10).toFixed(0)} readOnly={true} />
-                         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,13 +1,10 @@
 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) {
@@ -54,26 +51,12 @@ 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"
-                      value={width}
+                      placeholder={0}
                       ref={refs.widthRef}
-                      onChange={(value) => setWidth(value)}
                       disabled={selectedType !== INPUT_TYPE.DIMENSION}
-                      options={{
-                        allowNegative: false,
-                        allowDecimal: false
-                      }}
                     />
                   </div>
                   <span className="thin">mm</span>
@@ -85,26 +68,12 @@ 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"
-                      value={height}
+                      placeholder={0}
                       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,7 +1,6 @@
 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()
@@ -12,11 +11,6 @@ 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 (
     <>
@@ -36,20 +30,7 @@ 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>
@@ -60,20 +41,7 @@ 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>
@@ -87,20 +55,7 @@ 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>
@@ -111,20 +66,7 @@ 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>
@@ -135,20 +77,7 @@ 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,14 +1,11 @@
 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) {
@@ -54,26 +51,12 @@ 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"
-                      value={width}
+                      placeholder={0}
                       ref={refs.widthRef}
-                      onChange={(value) => setWidth(value)}
                       disabled={selectedType !== INPUT_TYPE.DIMENSION}
-                      options={{
-                        allowNegative: false,
-                        allowDecimal: false
-                      }}
                     />
                   </div>
                   <span className="thin">mm</span>
@@ -85,26 +68,12 @@ 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"
-                      value={height}
+                      placeholder={0}
                       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,7 +1,6 @@
 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()
@@ -12,9 +11,6 @@ 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 (
     <>
@@ -34,20 +30,7 @@ const [pitch, setPitch] = useState(4)
                 <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>
@@ -58,20 +41,7 @@ const [pitch, setPitch] = useState(4)
                 <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>
@@ -82,20 +52,7 @@ const [pitch, setPitch] = useState(4)
                 <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>