src/components/floor-plan/modal/basic/step/Module.jsx

@@ -11,6 +11,7 @@ import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import { normalizeDecimal} from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Module({ setTabNum }) {
   const { getMessage } = useMessage()
@@ -185,11 +186,23 @@ export default function Module({ setTabNum }) {
                   <div className="eaves-keraba-td">
                     <div className="outline-form">
                       <div className="grid-select mr10">
-                        <input
+                        {/*<input*/}
-                          type="text"
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputInstallHeight}*/}
+                        {/*  onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))}
+                          onChange={(value) => setInputInstallHeight(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
                         />
                       </div>
                       <span className="thin">m</span>

src/components/floor-plan/modal/basic/step/Orientation.jsx

@@ -10,6 +10,7 @@ import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import Swal from 'sweetalert2'
 import { normalizeDecimal} from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export const Orientation = forwardRef((props, ref) => {
   const { getMessage } = useMessage()
@@ -436,13 +437,26 @@ export const Orientation = forwardRef((props, ref) => {
                     <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}</label>
                   </div>
                   <div className="input-grid mr10" style={{ width: '60px' }}>
-                    <input
+                    {/*<input*/}
-                      type="text"
+                    {/*  type="text"*/}
+                    {/*  className="input-origin block"*/}
+                    {/*  value={inputCompasDeg}*/}
+                    {/*  readOnly={!hasAnglePassivity}*/}
+                    {/*  placeholder={0}*/}
+                    {/*  onChange={(e) => checkDegree(e.target.value)}*/}
+                    {/*/>*/}
+                    <CalculatorInput
+                      id=""
+                      name=""
+                      label=""
                       className="input-origin block"
                       value={inputCompasDeg}
                       readOnly={!hasAnglePassivity}
-                      placeholder={0}
+                      onChange={(value) => setInputCompasDeg(value)}
-                      onChange={(e) => checkDegree(e.target.value)}
+                      options={{
+                        allowNegative: true,
+                        allowDecimal: false
+                      }}
                     />
                   </div>
                   <span className="thin">°</span>
@@ -533,7 +547,19 @@ export const Orientation = forwardRef((props, ref) => {
                   <div className="outline-form mt15">
                     <span>{getMessage('modal.module.basic.setting.module.placement.area')}</span>
                     <div className="input-grid mr10" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(normalizeDecimal(e.target.value))} />
+                      {/*<input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(normalizeDecimal(e.target.value))} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={inputMargin}
+                        onChange={(value) => setInputMargin(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
                     </div>
                     <span className="thin">m</span>
                   </div>
@@ -561,11 +587,23 @@ export const Orientation = forwardRef((props, ref) => {
                     <div className="outline-form">
                       <span>{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
                       <div className="input-grid mr10">
-                        <input
+                        {/*<input*/}
-                          type="text"
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputInstallHeight}*/}
+                        {/*  onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}
+                          onChange={(value) => handleChangeInstallHeight(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
                         />
                       </div>
                       <span className="thin">m</span>
@@ -589,11 +627,23 @@ export const Orientation = forwardRef((props, ref) => {
                     <div className="outline-form">
                       <span>{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
                       <div className="input-grid mr10">
-                        <input
+                        {/*<input*/}
-                          type="text"
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputVerticalSnowCover}*/}
+                        {/*  onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
                           className="input-origin block"
-                          value={inputVerticalSnowCover}
+                          value={inputInstallHeight}
-                          onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}
+                          onChange={(value) => handleChangeVerticalSnowCover(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
                         />
                       </div>
                       <span className="thin">cm</span>

src/components/floor-plan/modal/basic/step/Trestle.jsx

@@ -10,6 +10,7 @@ import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useStat
 import { useRecoilState, useRecoilValue } from 'recoil'
 import Swal from 'sweetalert2'
 import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const Trestle = forwardRef((props, ref) => {
   const { tabNum, setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData, setRoofsStore } = props
@@ -885,12 +886,24 @@ const Trestle = forwardRef((props, ref) => {
               <div className="outline-form mr15">
                 <span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
                 <div className="input-grid mr10">
-                  <input
+                  {/*<input*/}
-                    type="number"
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={eavesMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setEavesMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
                     value={eavesMargin ?? 0}
-                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
+                    onChange={(value) => setEavesMargin(value)}
-                    onChange={(e) => setEavesMargin(+e.target.value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
                   />
                 </div>
                 <span className="thin">mm</span>
@@ -898,12 +911,24 @@ const Trestle = forwardRef((props, ref) => {
               <div className="outline-form mr15">
                 <span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
                 <div className="input-grid mr10">
-                  <input
+                  {/*<input*/}
-                    type="number"
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={ridgeMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setRidgeMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
                     value={ridgeMargin ?? 0}
-                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
+                    onChange={(value) => setRidgeMargin(value)}
-                    onChange={(e) => setRidgeMargin(+e.target.value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
                   />
                 </div>
                 <span className="thin">mm</span>
@@ -911,12 +936,24 @@ const Trestle = forwardRef((props, ref) => {
               <div className="outline-form ">
                 <span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
                 <div className="input-grid mr10">
-                  <input
+                  {/*<input*/}
-                    type="number"
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={kerabaMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setKerabaMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
                     value={kerabaMargin ?? 0}
-                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
+                    onChange={(value) => setKerabaMargin(value)}
-                    onChange={(e) => setKerabaMargin(+e.target.value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
                   />
                 </div>
                 <span className="thin">mm</span>

src/components/management/StuffDetail.jsx

@@ -23,6 +23,7 @@ import { QcastContext } from '@/app/QcastProvider'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useSwal } from '@/hooks/useSwal'
 import { sanitizeIntegerInputEvent } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function StuffDetail() {
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
@@ -1204,8 +1205,10 @@ export default function StuffDetail() {
   }
 
   // 저장
-  const onValid = async () => {
+  const onValid = async (actionType) => {
-    const formData = form.getValues()
+    const formData = form.getValues();
+    if(actionType !== 'save') return false
+    console.log('Action type:', actionType); // 'save' 또는 'tempSave'
     let errors = {}
     let fieldNm
 
@@ -1715,7 +1718,7 @@ export default function StuffDetail() {
                 <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
                   {getMessage('stuff.detail.btn.tempSave')}
                 </button>
-                <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+                <button  type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                   {getMessage('stuff.detail.btn.save')}
                 </button>
                 <button
@@ -2113,13 +2116,25 @@ export default function StuffDetail() {
                     <td>
                       <div className="flx-box">
                         <div className="input-wrap mr10" style={{ width: '200px' }}>
-                          <input
+                          {/*<input*/}
-                            type="text"
+                          {/*  type="text"*/}
+                          {/*  className="input-light"*/}
+                          {/*  onInput={handleKeyUp}*/}
+                          {/*  onBlur={handleBlur}*/}
+                          {/*  value={form.watch('verticalSnowCover') || ''}*/}
+                          {/*  {...register('verticalSnowCover')}*/}
+                          {/*/>*/}
+                          <CalculatorInput
+                            id=""
+                            name=""
+                            label=""
                             className="input-light"
-                            onInput={handleKeyUp}
-                            onBlur={handleBlur}
                             value={form.watch('verticalSnowCover') || ''}
-                            {...register('verticalSnowCover')}
+                            onChange={()=>{}}
+                            options={{
+                              allowNegative: false,
+                              allowDecimal: false
+                            }}
                           />
                         </div>
                         <span className="mr10">cm</span>
@@ -2173,13 +2188,25 @@ export default function StuffDetail() {
                     <td>
                       <div className="flx-box">
                         <div className="input-wrap mr10" style={{ width: '200px' }}>
-                          <input
+                          {/*<input*/}
-                            type="text"
+                          {/*  type="text"*/}
+                          {/*  className="input-light"*/}
+                          {/*  onInput={handleKeyUp}*/}
+                          {/*  onBlur={handleBlur}*/}
+                          {/*  value={form.watch('installHeight') || ''}*/}
+                          {/*  {...register('installHeight')}*/}
+                          {/*/>*/}
+                          <CalculatorInput
+                            id=""
+                            name=""
+                            label=""
                             className="input-light"
-                            onInput={handleKeyUp}
-                            onBlur={handleBlur}
                             value={form.watch('installHeight') || ''}
-                            {...register('installHeight')}
+                            onChange={()=>{}}
+                            options={{
+                              allowNegative: false,
+                              allowDecimal: false
+                            }}
                           />
                         </div>
                         <span>m</span>
@@ -2216,7 +2243,7 @@ export default function StuffDetail() {
               <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
                 {getMessage('stuff.detail.btn.tempSave')}
               </button>
-              <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+              <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                 {getMessage('stuff.detail.btn.save')}
               </button>
               <button
@@ -2253,7 +2280,7 @@ export default function StuffDetail() {
                       >
                         {getMessage('stuff.detail.btn.moveList')}
                       </button>
-                      <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+                      <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                         {getMessage('stuff.detail.btn.save')}
                       </button>
                       <button type="button" className="btn-origin grey" onClick={onDelete} style={{ display: showButton }}>
@@ -2267,7 +2294,7 @@ export default function StuffDetail() {
                       <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
                         {getMessage('stuff.detail.btn.tempSave')}
                       </button>
-                      <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+                      <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                         {getMessage('stuff.detail.btn.save')}
                       </button>
                       <button
@@ -2685,13 +2712,25 @@ export default function StuffDetail() {
                         <td>
                           <div className="flx-box">
                             <div className="input-wrap mr10" style={{ width: '200px' }}>
-                              <input
+                              {/*<input*/}
-                                type="text"
+                              {/*  type="text"*/}
+                              {/*  className="input-light"*/}
+                              {/*  onInput={handleKeyUp}*/}
+                              {/*  onBlur={handleBlur}*/}
+                              {/*  value={form.watch('verticalSnowCover') || ''}*/}
+                              {/*  {...register('verticalSnowCover')}*/}
+                              {/*/>*/}
+                              <CalculatorInput
+                                id=""
+                                name=""
+                                label=""
                                 className="input-light"
-                                onInput={handleKeyUp}
-                                onBlur={handleBlur}
                                 value={form.watch('verticalSnowCover') || ''}
-                                {...register('verticalSnowCover')}
+                                onChange={()=>{}}
+                                options={{
+                                  allowNegative: false,
+                                  allowDecimal: false
+                                }}
                               />
                             </div>
                             <span className="mr10">cm</span>
@@ -2748,13 +2787,26 @@ export default function StuffDetail() {
                         <td>
                           <div className="flx-box">
                             <div className="input-wrap mr10" style={{ width: '200px' }}>
-                              <input
+                              {/*<input*/}
-                                type="text"
+                              {/*  type="text"*/}
+                              {/*  className="input-light"*/}
+                              {/*  onInput={handleKeyUp}*/}
+                              {/*  onBlur={handleBlur}*/}
+                              {/*  value={form.watch('installHeight') || ''}*/}
+                              {/*  {...register('installHeight')}*/}
+                              {/*/>*/}
+
+                              <CalculatorInput
+                                id=""
+                                name=""
+                                label=""
                                 className="input-light"
-                                onInput={handleKeyUp}
-                                onBlur={handleBlur}
                                 value={form.watch('installHeight') || ''}
-                                {...register('installHeight')}
+                                onChange={()=>{}}
+                                options={{
+                                  allowNegative: false,
+                                  allowDecimal: false
+                                }}
                               />
                             </div>
                             <span>m</span>
@@ -2835,7 +2887,7 @@ export default function StuffDetail() {
                     >
                       {getMessage('stuff.detail.btn.moveList')}
                     </button>
-                    <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+                    <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                       {getMessage('stuff.detail.btn.save')}
                     </button>
                     <button type="button" className="btn-origin grey" onClick={onDelete} style={{ display: showButton }}>
@@ -2849,7 +2901,7 @@ export default function StuffDetail() {
                     <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
                       {getMessage('stuff.detail.btn.tempSave')}
                     </button>
-                    <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+                    <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                       {getMessage('stuff.detail.btn.save')}
                     </button>
                     <button

src/util/qpolygon-utils.js

@@ -2957,11 +2957,12 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
                 ridgePoint.x2 += pointVector.x * offset
                 ridgePoint.y2 += pointVector.y * offset
               }
-            } else {
-              ridgePoint.x2 += pointVector.x * offset
-              ridgePoint.y2 += pointVector.y * offset
             }
+          } else {
+            ridgePoint.x2 += pointVector.x * offset
+            ridgePoint.y2 += pointVector.y * offset
           }
+          // }
         } else if (drivePoint) {
           ridgePoint.x2 = drivePoint.x
           ridgePoint.y2 = drivePoint.y
@@ -3398,8 +3399,18 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
                 default:
                   break
               }
-              point[2] += pointVector.x * offset
+              if (oppLine.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
-              point[3] += pointVector.y * offset
+                if (drivePoint) {
+                  point[2] = drivePoint.x
+                  point[3] = drivePoint.y
+                } else {
+                  point[2] += pointVector.x * offset
+                  point[3] += pointVector.y * offset
+                }
+              } else {
+                point[2] += pointVector.x * offset
+                point[3] += pointVector.y * offset
+              }
             } else if (drivePoint) {
               point[2] = drivePoint.x
               point[3] = drivePoint.y
@@ -4316,8 +4327,8 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
 
         const intersect = lineIntersection(currLine.start, currLine.end, nextLine.start, nextLine.end, canvas)
         if (intersect) {
-          const checkCircle = new fabric.Circle({ left: intersect.x, top: intersect.y, radius: 5, fill: 'blue', parentId: roofId, name: 'check' })
+          /*const checkCircle = new fabric.Circle({ left: intersect.x, top: intersect.y, radius: 5, fill: 'blue', parentId: roofId, name: 'check' })
-          canvas.add(checkCircle).renderAll()
+          canvas.add(checkCircle).renderAll()*/
           let distance1 = Math.sqrt(Math.pow(intersect.x - currLine.start.x, 2) + Math.pow(intersect.y - currLine.start.y, 2))
           let distance2 = Math.sqrt(Math.pow(intersect.x - nextLine.start.x, 2) + Math.pow(intersect.y - nextLine.start.y, 2))
           let point = [currLine.start.x, currLine.start.y, intersect.x, intersect.y]
@@ -4799,13 +4810,17 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
           allLinesPoints.filter((p) => almostEqual(p.x, line.start.x) && almostEqual(p.y, line.start.y)).length < 3 &&
           allLinesPoints.filter((p) => almostEqual(p.x, line.end.x) && almostEqual(p.y, line.end.y)).length === 0
         ) {
-          if (startOnLine && endOnLine) {
+          if (line.type === TYPES.RIDGE && baseLines.length === 4 && (startOnLine || endOnLine)) {
-            if (line.degree === 0) {
+            innerLines.push(drawRidgeLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode))
-              innerLines.push(drawRoofLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode))
+          } else {
-            } else {
+            if (startOnLine && endOnLine) {
-              innerLines.push(
+              if (line.degree === 0) {
-                drawHipLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode, null, line.degree, line.degree),
+                innerLines.push(drawRoofLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode))
-              )
+              } else {
+                innerLines.push(
+                  drawHipLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode, null, line.degree, line.degree),
+                )
+              }
             }
           }
         }