[1308] 촌에 소수점 입력 - {pitchText}

Reviewed-on: #425

src/components/common/draggable/WithDraggable.jsx

@@ -24,7 +24,7 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
         <Draggable
           position={{ x: position.x, y: position.y }}
           onDrag={(e, data) => handleOnDrag(e, data)}
-          handle= ''//{handle === '' ? '.modal-handle' : handle} //전체 handle
+          handle="" //{handle === '' ? '.modal-handle' : handle} //전체 handle
           cancel="input, button, select, textarea, [contenteditable], .sort-select"
         >
           <div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
@@ -38,17 +38,17 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
   )
 }
 
-function WithDraggableHeader({ title, onClose, children }) {
+function WithDraggableHeader({ title, onClose, children, isFold, onFold = null }) {
   return (
     <div className="modal-head modal-handle">
       <h1 className="title">{title}</h1>
-      <div className='modal-btn-wrap'>
+      <div className="modal-btn-wrap">
-        <button className='modal-fold act'></button>
+        {onFold && <button className={`modal-fold ${isFold ? '' : 'act'}`} onClick={onFold}></button>}
-      {onClose && (
+        {onClose && (
-        <button className="modal-close" onClick={() => onClose()}>
+          <button className="modal-close" onClick={() => onClose()}>
-          닫기
+            닫기
-        </button>
+          </button>
-      )}
+        )}
       </div>
     </div>
   )

src/components/floor-plan/modal/Slope.jsx

@@ -4,6 +4,7 @@ import { globalPitchState, pitchSelector, pitchTextSelector } from '@/store/canv
 import { useRecoilState } from 'recoil'
 import { useRef } from 'react'
 import { usePopup } from '@/hooks/usePopup'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Slope({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
@@ -22,7 +23,19 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
               {getMessage('slope')}
             </span>
             <div className="input-grid mr5">
-              <input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />
+              {/*<input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
+                className="input-origin block"
+                ref={inputRef}
+                value={globalPitch}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: true //(index !== 0),
+                }}
+              ></CalculatorInput>
             </div>
             <span className="thin">{pitchText}</span>
           </div>

src/components/floor-plan/modal/eavesGable/type/Gable.jsx

@@ -98,7 +98,7 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
                     }}
                     options={{
                       allowNegative: false,
-                      allowDecimal: false //(index !== 0),
+                      allowDecimal: true //(index !== 0),
                     }}
                   ></CalculatorInput>
                 </div>

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

@@ -13,6 +13,7 @@ import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function ContextRoofAllocationSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -204,15 +205,30 @@ export default function ContextRoofAllocationSetting(props) {
                         <div className="flex-ment">
                           <span>{getMessage('modal.object.setting.offset.slope')}</span>
                           <div className="input-grid">
-                            <input
+                            {/*<input*/}
-                              type="text"
+                            {/*  type="text"*/}
+                            {/*  className="input-origin block"*/}
+                            {/*  onChange={(e) => {*/}
+                            {/*    e.target.value = normalizeDecimalLimit(e.target.value, 2)*/}
+                            {/*    handleChangePitch(e, index)*/}
+                            {/*  }}*/}
+                            {/*  value={currentAngleType === 'slope' ? (roof.pitch ?? '') : (roof.angle ?? '')}*/}
+                            {/*/>*/}
+                            <CalculatorInput
+                              id=""
+                              name=""
+                              label=""
                               className="input-origin block"
-                              onChange={(e) => {
+                              ref={pitchRef}
-                                e.target.value = normalizeDecimalLimit(e.target.value, 2)
-                                handleChangePitch(e, index)
-                              }}
                               value={currentAngleType === 'slope' ? (roof.pitch ?? '') : (roof.angle ?? '')}
-                            />
+                              onChange={(value) => {
+                                handleChangePitch(value, index)
+                              }}
+                              options={{
+                                allowNegative: false,
+                                allowDecimal: true //(index !== 0),
+                              }}
+                            ></CalculatorInput>
                           </div>
                           <span className="absol">{pitchText}</span>
                         </div>

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

@@ -14,6 +14,7 @@ import { useRoofShapeSetting } from '@/hooks/roofcover/useRoofShapeSetting'
 import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { getDegreeByChon } from '@/util/canvas-util'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function RoofAllocationSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -205,15 +206,30 @@ export default function RoofAllocationSetting(props) {
                           <div className="flex-ment">
                             <span>{getMessage('modal.object.setting.offset.slope')}</span>
                             <div className="input-grid">
-                              <input
+                              {/*<input*/}
-                                type="text"
+                              {/*  type="text"*/}
+                              {/*  className="input-origin block"*/}
+                              {/*  onChange={(e) => {*/}
+                              {/*    e.target.value = normalizeDecimalLimit(e.target.value, 2)*/}
+                              {/*    handleChangePitch(e, index)*/}
+                              {/*  }}*/}
+                              {/*  value={currentAngleType === 'slope' ? (roof.pitch ?? '') : (roof.angle ?? '')}*/}
+                              {/*/>*/}
+                              <CalculatorInput
+                                id=""
+                                name=""
+                                label=""
                                 className="input-origin block"
-                                onChange={(e) => {
+                                ref={pitchRef}
-                                  e.target.value = normalizeDecimalLimit(e.target.value, 2)
-                                  handleChangePitch(e, index)
-                                }}
                                 value={currentAngleType === 'slope' ? (roof.pitch ?? '') : (roof.angle ?? '')}
-                              />
+                                onChange={(value) => {
+                                  handleChangePitch(value, index)
+                                }}
+                                options={{
+                                  allowNegative: false,
+                                  allowDecimal: true //(index !== 0),
+                                }}
+                              ></CalculatorInput>
                             </div>
                             <span className="absol">{pitchText}</span>
                           </div>

src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx

@@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
 import { selectedRoofMaterialSelector } from '@/store/settingAtom'
 import { useEffect } from 'react'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Eaves({ offsetRef, pitchRef, pitchText }) {
   const { getMessage } = useMessage()
@@ -16,12 +17,24 @@ export default function Eaves({ offsetRef, pitchRef, pitchText }) {
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5">
-          <input
+          {/*<input*/}
-            type="text"
+          {/*  type="text"*/}
+          {/*  className="input-origin block"*/}
+          {/*  defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle}*/}
+          {/*  ref={pitchRef}*/}
+          {/*/>*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
             className="input-origin block"
-            defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle}
             ref={pitchRef}
-          />
+            value={currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>