Merge pull request 'dev' (#418) from dev into prd-deploy

Reviewed-on: #418

src/components/common/draggable/WithDraggable.jsx

@@ -42,12 +42,15 @@ function WithDraggableHeader({ title, onClose, children }) {
   return (
     <div className="modal-head modal-handle">
       <h1 className="title">{title}</h1>
+      <div className='modal-btn-wrap'>
+        <button className='modal-fold act'></button>
       {onClose && (
         <button className="modal-close" onClick={() => onClose()}>
           닫기
         </button>
       )}
       </div>
+    </div>
   )
 }
 

src/components/common/input/CalcInput.jsx

@@ -48,14 +48,23 @@ export const CalculatorInput = forwardRef(
       const calculator = calculatorRef.current
       let newDisplayValue = ''
 
+      // 소수점 이하 2자리 제한 로직 추가
+      const shouldPreventInput = (value) => {
+        const decimalParts = (value || '').split('.')
+        return decimalParts.length > 1 && decimalParts[1].length >= 2
+      }
+
       if (hasOperation) {
         // 연산자 이후 숫자 입력 시
         if (calculator.currentOperand === '0' || calculator.shouldResetDisplay) {
           calculator.currentOperand = num.toString()
           calculator.shouldResetDisplay = false
-        } else {
+        }else if (!shouldPreventInput(calculator.currentOperand)) { //소수점 이하2자리
           calculator.currentOperand = (calculator.currentOperand || '') + num
         }
+        // else {
+        //   calculator.currentOperand = (calculator.currentOperand || '') + num
+        // }
         newDisplayValue = calculator.previousOperand + calculator.operation + calculator.currentOperand
         setDisplayValue(newDisplayValue)
       } else {
@@ -68,7 +77,7 @@ export const CalculatorInput = forwardRef(
           if (!hasOperation) {
             onChange(calculator.currentOperand)
           }
-        } else {
+        } else if (!shouldPreventInput(calculator.currentOperand)) { //소수점 이하2자리
           calculator.currentOperand = (calculator.currentOperand || '') + num
           newDisplayValue = calculator.currentOperand
           setDisplayValue(newDisplayValue)
@@ -76,6 +85,14 @@ export const CalculatorInput = forwardRef(
             onChange(newDisplayValue)
           }
         }
+        // else {
+        //   calculator.currentOperand = (calculator.currentOperand || '') + num
+        //   newDisplayValue = calculator.currentOperand
+        //   setDisplayValue(newDisplayValue)
+        //   if (!hasOperation) {
+        //     onChange(newDisplayValue)
+        //   }
+        // }
       }
 
       // 커서를 텍스트 끝으로 이동하고 스크롤 처리

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

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth, pitchText }) {
   const { getMessage } = useMessage()
@@ -10,12 +11,24 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
+          {/*<input*/}
-            type="text"
+          {/*  type="text"*/}
+          {/*  className="input-origin block"*/}
+          {/*  value={pitch}*/}
+          {/*  onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))}*/}
+          {/*/>*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
             className="input-origin block"
             value={pitch}
-            onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))}
+            onChange={(value) => setPitch(value)}
-          />
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -24,12 +37,24 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
+          {/*<input*/}
-            type="text"
+          {/*  type="text"*/}
+          {/*  className="input-origin block"*/}
+          {/*  value={eavesOffset}*/}
+          {/*  onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))}*/}
+          {/*/>*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
             className="input-origin block"
             value={eavesOffset}
-            onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))}
+            onChange={(value) => setEavesOffset(value)}
-          />
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -38,12 +63,24 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('gable.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
+          {/*<input*/}
-            type="text"
+          {/*  type="text"*/}
+          {/*  className="input-origin block"*/}
+          {/*  value={gableOffset}*/}
+          {/*  onChange={(e) => setGableOffset(normalizeDigits(e.target.value))}*/}
+          {/*/>*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
             className="input-origin block"
             value={gableOffset}
-            onChange={(e) => setGableOffset(normalizeDigits(e.target.value))}
+            onChange={(value) => setGableOffset(value)}
-          />
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -52,12 +89,24 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('windage.width')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
+          {/*<input*/}
-            type="text"
+          {/*  type="text"*/}
+          {/*  className="input-origin block"*/}
+          {/*  value={shedWidth}*/}
+          {/*  onChange={(e) => setShedWidth(normalizeDigits(e.target.value))}*/}
+          {/*/>*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
             className="input-origin block"
             value={shedWidth}
-            onChange={(e) => setShedWidth(normalizeDigits(e.target.value))}
+            onChange={(value) => setShedWidth(value)}
-          />
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Pattern(props) {
   const { getMessage } = useMessage()
@@ -11,7 +12,20 @@ export default function Pattern(props) {
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={pitch} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          {/*<input type="text" className="input-origin block" value={pitch} */}
+          {/*       onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={pitch}
+            onChange={(value) => setPitch(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin"> {pitchText}</span>
       </div>
@@ -20,7 +34,20 @@ export default function Pattern(props) {
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={eavesOffset} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
+          {/*<input type="text" className="input-origin block" value={eavesOffset} */}
+          {/*       onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={eavesOffset}
+            onChange={(value) => setEavesOffset(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -29,7 +56,20 @@ export default function Pattern(props) {
           {getMessage('gable.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={gableOffset} onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
+          {/*<input type="text" className="input-origin block" value={gableOffset} */}
+          {/*       onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={gableOffset}
+            onChange={(value) => setGableOffset(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,6 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect } from 'react'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Ridge(props) {
   const { getMessage } = useMessage()
@@ -13,7 +14,20 @@ export default function Ridge(props) {
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={pitch} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          {/*<input type="text" className="input-origin block" value={pitch} */}
+          {/*       onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={pitch}
+            onChange={(value) => setPitch(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -22,7 +36,20 @@ export default function Ridge(props) {
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={eavesOffset} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
+          {/*<input type="text" className="input-origin block" value={eavesOffset} */}
+          {/*       onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={eavesOffset}
+            onChange={(value) => setEavesOffset(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pitchText }) {
   const { getMessage } = useMessage()
@@ -10,7 +11,21 @@ export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pi
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={pitch} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          {/*<input type="text" className="input-origin block" value={pitch} */}
+          {/*       onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={pitch}
+            onChange={(value) => setPitch(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
+
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -19,7 +34,20 @@ export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pi
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={eavesOffset} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
+          {/*<input type="text" className="input-origin block" value={eavesOffset} */}
+          {/*       onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={eavesOffset}
+            onChange={(value) => setEavesOffset(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,6 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect } from 'react'
 import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Gable({ gableOffset, setGableOffset }) {
   const { getMessage } = useMessage()
@@ -10,7 +11,20 @@ export default function Gable({ gableOffset, setGableOffset }) {
       <div className="outline-form">
         <span className="mr10">{getMessage('gable.offset')}</span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={gableOffset} onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
+          {/*<input type="text" className="input-origin block" value={gableOffset}*/}
+          {/*       onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={gableOffset}
+            onChange={(value) => setGableOffset(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }) {
   const { getMessage } = useMessage()
@@ -10,7 +11,8 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={pitch} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          <input type="text" className="input-origin block" value={pitch}
+                 onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -19,7 +21,8 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={eavesOffset} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
+          <input type="text" className="input-origin block" value={eavesOffset}
+                 onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
         </div>
         <span className="thin">mm</span>
       </div>
@@ -28,12 +31,24 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
           {getMessage('hipandgable.width')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
+          {/*<input*/}
-            type="text"
+          {/*  type="text"*/}
+          {/*  className="input-origin block"*/}
+          {/*  value={hipAndGableWidth}*/}
+          {/*  onChange={(e) => setHipAndGableWidth(normalizeDigits(e.target.value))}*/}
+          {/*/>*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
             className="input-origin block"
             value={hipAndGableWidth}
-            onChange={(e) => setHipAndGableWidth(normalizeDigits(e.target.value))}
+            onChange={(value) => setHipAndGableWidth(value)}
-          />
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Jerkinhead({
   gableOffset,
@@ -18,7 +19,20 @@ export default function Jerkinhead({
           {getMessage('gable.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={gableOffset} onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
+          <input type="text" className="input-origin block" value={gableOffset}
+                 onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={gableOffset}
+            onChange={(value) => setGableOffset(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -27,7 +41,21 @@ export default function Jerkinhead({
           {getMessage('jerkinhead.width')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={jerkinHeadWidth} onChange={(e) => setJerkinHeadWidth(normalizeDigits(e.target.value))} />
+          {/*<input type="text" className="input-origin block" value={jerkinHeadWidth}*/}
+          {/*       onChange={(e) => setJerkinHeadWidth(normalizeDigits(e.target.value))} />*/}
+
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={jerkinHeadWidth}
+            onChange={(value) => setJerkinHeadWidth(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -36,12 +64,24 @@ export default function Jerkinhead({
           {getMessage('jerkinhead.slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
+          {/*<input*/}
-            type="text"
+          {/*  type="text"*/}
+          {/*  className="input-origin block"*/}
+          {/*  value={jerkinHeadPitch}*/}
+          {/*  onChange={(e) => setJerkinHeadPitch(normalizeDecimalLimit(e.target.value, 2))}*/}
+          {/*/>*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
             className="input-origin block"
             value={jerkinHeadPitch}
-            onChange={(e) => setJerkinHeadPitch(normalizeDecimalLimit(e.target.value, 2))}
+            onChange={(value) => jerkinHeadPitch(value)}
-          />
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>

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

@@ -8,14 +8,16 @@ export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch,
       <div className="outline-form mb10">
         <span className="mr10">{getMessage('slope')}</span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={shedPitch} onChange={(e) => setShedPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          <input type="text" className="input-origin block" value={shedPitch}
+                 onChange={(e) => setShedPitch(normalizeDecimalLimit(e.target.value, 2))} />
         </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' }}>
-          <input type="text" className="input-origin block" value={shedWidth} onChange={(e) => setShedWidth(normalizeDigits(e.target.value))} />
+          <input type="text" className="input-origin block" value={shedWidth}
+                 onChange={(e) => setShedWidth(normalizeDigits(e.target.value))} />
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }) {
   const { getMessage } = useMessage()
@@ -10,7 +11,8 @@ export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasS
         <div className="eaves-keraba-item">
           <div className="eaves-keraba-th">
             <div className="d-check-radio pop">
-              <input type="radio" name="radio01" checked={hasSleeve === '0'} id="ra01" value={'0'} onChange={(e) => setHasSleeve(e.target.value)} />
+              <input type="radio" name="radio01" checked={hasSleeve === '0'} id="ra01" value={'0'}
+                     onChange={(e) => setHasSleeve(e.target.value)} />
               <label htmlFor="ra01">{getMessage('has.not.sleeve')}</label>
             </div>
           </div>
@@ -18,20 +20,34 @@ export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasS
         <div className="eaves-keraba-item">
           <div className="eaves-keraba-th">
             <div className="d-check-radio pop">
-              <input type="radio" name="radio01" checked={hasSleeve !== '0'} id="ra02" value={'1'} onChange={(e) => setHasSleeve(e.target.value)} />
+              <input type="radio" name="radio01" checked={hasSleeve !== '0'} id="ra02" value={'1'}
+                     onChange={(e) => setHasSleeve(e.target.value)} />
               <label htmlFor="ra02">{getMessage('has.sleeve')}</label>
             </div>
           </div>
           <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"*/}
+                {/*  value={sleeveOffset}*/}
+                {/*  onChange={(e) => setSleeveOffset(normalizeDigits(e.target.value))}*/}
+                {/*  readOnly={hasSleeve === '0'}*/}
+                {/*/>*/}
+                <CalculatorInput
+                  id=""
+                  name=""
+                  label=""
                   className="input-origin block"
                   value={sleeveOffset}
-                  onChange={(e) => setSleeveOffset(normalizeDigits(e.target.value))}
+                  onChange={(value) => setSleeveOffset(value)}
                   readOnly={hasSleeve === '0'}
-                />
+                  options={{
+                    allowNegative: false,
+                    allowDecimal: false //(index !== 0),
+                  }}
+                ></CalculatorInput>
               </div>
               <span className="thin">mm</span>
             </div>

src/styles/_modal.scss

@@ -133,8 +133,23 @@ $alert-color: #101010;
         color: $pop-color;
         font-weight: 700;
     }
-    .modal-close{
+    .modal-btn-wrap{
         margin-left: auto;
+        display: flex;
+        align-items: center;
+        gap: 15px;
+    }
+    .modal-fold{
+        display: block;
+        width: 15px;
+        height: 15px;
+        background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
+        background-size: contain;
+        &.act{
+            transform: rotate(180deg);
+        }
+    }
+    .modal-close{
         color: transparent;
         font-size: 0;
         width: 10px;