.env.development

@@ -10,8 +10,7 @@ SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
 
 # NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"
 # NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_yAS4QDalL9jgQ7vS"
-NEXT_PUBLIC_CONVERTER_DWG_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK"
-NEXT_PUBLIC_CONVERTER_DXF_API_URL="https://v2.convertapi.com/convert/dxf/to/png?Secret=secret_a0FLEK6M2oTpXInK"
+NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK"
 
 NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-stg.q-cells.jp:8120/eos/login/autoLogin"
 NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-stg.q-cells.jp:8120/qm/login/autoLogin"
@@ -30,7 +29,4 @@ AWS_ACCESS_KEY_ID="AKIA3K4QWLZHFZRJOM2E"
 AWS_SECRET_ACCESS_KEY="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"
 NEXT_PUBLIC_AWS_S3_BASE_URL="//files.hanasys.jp"
 
-S3_PROFILE="dev"
-
-#logging
-NEXT_PUBLIC_ENABLE_LOGGING=true
+S3_PROFILE="dev"

.env.localhost

@@ -10,8 +10,7 @@ SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
 
 # NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"
 # NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_yAS4QDalL9jgQ7vS"
-NEXT_PUBLIC_CONVERTER_DWG_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK"
-NEXT_PUBLIC_CONVERTER_DXF_API_URL="https://v2.convertapi.com/convert/dxf/to/png?Secret=secret_a0FLEK6M2oTpXInK"
+NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK"
 
 NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-stg.q-cells.jp:8120/eos/login/autoLogin"
 NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-stg.q-cells.jp:8120/qm/login/autoLogin"
@@ -30,7 +29,4 @@ AWS_ACCESS_KEY_ID="AKIA3K4QWLZHFZRJOM2E"
 AWS_SECRET_ACCESS_KEY="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"
 NEXT_PUBLIC_AWS_S3_BASE_URL="//files.hanasys.jp"
 
-S3_PROFILE="dev"
-
-#logging
-NEXT_PUBLIC_ENABLE_LOGGING=false
+S3_PROFILE="dev"

.env.production

@@ -10,11 +10,12 @@ SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
 
 # NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"
 # NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_yAS4QDalL9jgQ7vS"
-NEXT_PUBLIC_CONVERTER_DWG_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK"
-NEXT_PUBLIC_CONVERTER_DXF_API_URL="https://v2.convertapi.com/convert/dxf/to/png?Secret=secret_a0FLEK6M2oTpXInK"
+NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK"
 
-NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="https://q-order.q-cells.jp/eos/login/autoLogin"
-NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="https://q-musubi.q-cells.jp/qm/login/autoLogin"
+# NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="https://q-order.q-cells.jp/eos/login/autoLogin"
+# NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="https://q-musubi.q-cells.jp/qm/login/autoLogin"
+NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-stg.q-cells.jp:8120/eos/login/autoLogin"
+NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-stg.q-cells.jp:8120/qm/login/autoLogin"
 
 # AWS_REGION="ap-northeast-2"
 # AMPLIFY_BUCKET="interplug"
@@ -29,7 +30,4 @@ AWS_ACCESS_KEY_ID="AKIA3K4QWLZHFZRJOM2E"
 AWS_SECRET_ACCESS_KEY="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"
 NEXT_PUBLIC_AWS_S3_BASE_URL="//files.hanasys.jp"
 
-S3_PROFILE="prd"
-
-#logging
-NEXT_PUBLIC_ENABLE_LOGGING=false
+S3_PROFILE="prd"

README.md

@@ -1,6 +1,6 @@
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-### Getting Started
+## Getting Started
 
 First, run the development server:
 

package.json

@@ -55,14 +55,11 @@
   },
   "devDependencies": {
     "@turf/turf": "^7.0.0",
-    "@types/node": "^24.3.0",
-    "@types/react": "^19.1.11",
     "convertapi": "^1.14.0",
     "postcss": "^8",
     "prettier": "^3.3.3",
     "react-color-palette": "^7.2.2",
     "sass": "^1.77.8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.9.2"
+    "tailwindcss": "^3.4.1"
   }
 }

src/app/api/image/canvas/route.js

@@ -38,14 +38,10 @@ const cropImage = async (Key, width, height, left, top) => {
     }
     const buffer = Buffer.concat(chunks)
 
-    let image = await Jimp.read(buffer)
+    const image = await Jimp.read(buffer)
+
     image.autocrop({ tolerance: 0.0002, leaveBorder: 10 })
-
-    const resizedImage = await resizeImage(image).then((result) => {
-      return result
-    })
-
-    return await resizedImage.getBuffer('image/png')
+    return await image.getBuffer('image/png')
 
     // Convert stream to buffer
     // const chunks = []
@@ -81,56 +77,6 @@ const cropImage = async (Key, width, height, left, top) => {
   }
 }
 
-//크롭된 이미지를 배경 크기에 맞게 리사이즈
-const resizeImage = async (image) => {
-  //엑셀 템플릿 너비 35.4cm, 높이 12.89cm
-  const convertStandardWidth = Math.round((35.4 * 96) / 2.54)
-  const convertStandardHeight = Math.round((12.89 * 96) / 2.54)
-
-  // 이미지를 배경의 98%까지 확대 (훨씬 더 크게)
-  const targetImageWidth = convertStandardWidth * 0.98
-  const targetImageHeight = convertStandardHeight * 0.98
-
-  const scaleX = targetImageWidth / image.bitmap.width
-  const scaleY = targetImageHeight / image.bitmap.height
-  let scale = Math.min(scaleX, scaleY) // 비율 유지하면서 최대한 크게
-
-  // scale 저장 (나중에 전체 확대에 사용)
-  const originalScale = scale
-
-  let finalWidth = Math.round(image.bitmap.width * scale)
-  let finalHeight = Math.round(image.bitmap.height * scale)
-
-  if (scale >= 0.6) {
-    // 실제 리사이즈 실행
-    image.resize({ w: finalWidth, h: finalHeight })
-  }
-
-  //배경 이미지를 생성
-  const mixedImage = new Jimp({ width: convertStandardWidth, height: convertStandardHeight, color: 0xffffffff })
-
-  //이미지를 중앙에 배치
-  const x = Math.floor((mixedImage.bitmap.width - image.bitmap.width) / 2)
-  const y = Math.floor((mixedImage.bitmap.height - image.bitmap.height) / 2)
-
-  //이미지를 배경 이미지에 합성
-  mixedImage.composite(image, x, y, {
-    opacitySource: 1, // 원본 투명도 유지
-    opacityDest: 1,
-  })
-
-  // scale이 0.8 이하인 경우 완성된 이미지를 전체적으로 확대
-  if (originalScale <= 0.8) {
-    const enlargeRatio = 1.5 // 50% 확대
-    const newWidth = Math.round(mixedImage.bitmap.width * enlargeRatio)
-    const newHeight = Math.round(mixedImage.bitmap.height * enlargeRatio)
-
-    mixedImage.resize({ w: newWidth, h: newHeight })
-  }
-
-  return mixedImage
-}
-
 export async function POST(req) {
   try {
     const formData = await req.formData()

src/app/floor-plan/FloorPlanProvider.js

@@ -21,8 +21,6 @@ const defaultEstimateData = {
   fileList: [],
   fileFlg: '0', //후일 자료 제출 (체크 1 노체크 0)
   priceCd: '',
-  pricingFlag: false, // 가격 처리 플래그 추가
-
 }
 
 /**

src/common/common.js

@@ -13,7 +13,6 @@ export const MENU = {
     MOVEMENT_SHAPE_UPDOWN: 'movementShapeUpdown', // 동선이동.형올림내림
     OUTLINE_EDIT_OFFSET: 'outlineEditOffset', // 외벽선 편집 및 오프셋
     ROOF_SHAPE_ALLOC: 'rootShapeAlloc', // 지붕면 항당
-    ALL_REMOVE: 'allRemove', // 전체 삭제
     DEFAULT: 'roofCoveringDefault', // 아무것도 선택 안할 경우
   }, // 지붕덮개
   BATCH_CANVAS: {
@@ -213,13 +212,6 @@ export const SAVE_KEY = [
   'endPoint',
   'editable',
   'isSortedPoints',
-  'isMultipleOf45',
-  'from',
-  'originColor',
-  'originWidth',
-  'originHeight',
-  'skeletonLines',
-  'skeleton'
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype]

src/components/common/draggable/WithDraggable.jsx

@@ -24,8 +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
-          cancel="input, button, select, textarea, [contenteditable], .sort-select"
+          handle={handle === '' ? '.modal-handle' : handle}
         >
           <div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
             {children}

src/components/common/input/CalcInput.jsx

@@ -1,442 +0,0 @@
-import React, { useState, useRef, useEffect, forwardRef } from 'react'
-import { createCalculator } from '@/util/calc-utils'
-import '@/styles/calc.scss'
-
-export const CalculatorInput = forwardRef(
-  ({ value, onChange, label, options = {}, id, className = 'calculator-input', readOnly = false, placeholder, name='', disabled = false }, ref) => {
-    const [showKeypad, setShowKeypad] = useState(false)
-    const [displayValue, setDisplayValue] = useState(value || '0')
-    const [hasOperation, setHasOperation] = useState(false)
-    const calculatorRef = useRef(createCalculator(options))
-    const containerRef = useRef(null)
-    const inputRef = useRef(null)
-
-    // 외부 ref와 내부 ref를 동기화
-    useEffect(() => {
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(inputRef.current)
-        } else {
-          ref.current = inputRef.current
-        }
-      }
-    }, [ref])
-
-    // Sync displayValue with value prop
-    useEffect(() => {
-      setDisplayValue(value || '0')
-    }, [value])
-
-    // 클릭 외부 감지
-    useEffect(() => {
-      const handleClickOutside = (event) => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-          setShowKeypad(false)
-          if (hasOperation) {
-            // If there's an operation in progress, compute the result when losing focus
-            handleCompute()
-          }
-        }
-      }
-
-      document.addEventListener('mousedown', handleClickOutside)
-      return () => document.removeEventListener('mousedown', handleClickOutside)
-    }, [value, onChange, hasOperation])
-
-    // 숫자 입력 처리 함수 수정
-    const handleNumber = (num) => {
-      const calculator = calculatorRef.current
-      let newDisplayValue = ''
-
-      if (hasOperation) {
-        // 연산자 이후 숫자 입력 시
-        if (calculator.currentOperand === '0' || calculator.shouldResetDisplay) {
-          calculator.currentOperand = num.toString()
-          calculator.shouldResetDisplay = false
-        } else {
-          calculator.currentOperand = (calculator.currentOperand || '') + num
-        }
-        newDisplayValue = calculator.previousOperand + calculator.operation + calculator.currentOperand
-        setDisplayValue(newDisplayValue)
-      } else {
-        // 첫 번째 숫자 입력 시
-        if (displayValue === '0' || calculator.shouldResetDisplay) {
-          calculator.currentOperand = num.toString()
-          calculator.shouldResetDisplay = false
-          newDisplayValue = calculator.currentOperand
-          setDisplayValue(newDisplayValue)
-          if (!hasOperation) {
-            onChange(calculator.currentOperand)
-          }
-        } else {
-          calculator.currentOperand = (calculator.currentOperand || '') + num
-          newDisplayValue = calculator.currentOperand
-          setDisplayValue(newDisplayValue)
-          if (!hasOperation) {
-            onChange(newDisplayValue)
-          }
-        }
-      }
-
-      // 커서를 텍스트 끝으로 이동하고 스크롤 처리
-      requestAnimationFrame(() => {
-        if (inputRef.current) {
-          inputRef.current.focus()
-          const len = newDisplayValue.length
-          inputRef.current.setSelectionRange(len, len)
-          // 텍스트 끝으로 스크롤
-          inputRef.current.scrollLeft = inputRef.current.scrollWidth
-        }
-      })
-    }
-
-    // 연산자 처리 함수 수정
-    const handleOperation = (operation) => {
-      const calculator = calculatorRef.current
-      let newDisplayValue = ''
-
-      // 현재 입력된 값이 없으면 이전 값 사용 (연속 연산 시)
-      if (!calculator.currentOperand && calculator.previousOperand) {
-        calculator.operation = operation
-        newDisplayValue = calculator.previousOperand + operation
-        setDisplayValue(newDisplayValue)
-        setHasOperation(true)
-      } else if (hasOperation) {
-        // 이미 연산자가 있는 경우, 계산 실행
-        const result = calculator.compute()
-        if (result !== undefined) {
-          calculator.previousOperand = result.toString()
-          calculator.operation = operation
-          calculator.currentOperand = ''
-          newDisplayValue = calculator.previousOperand + operation
-          setDisplayValue(newDisplayValue)
-        }
-      } else {
-        // 첫 번째 연산자 입력 시
-        calculator.previousOperand = calculator.currentOperand || '0'
-        calculator.operation = operation
-        calculator.currentOperand = ''
-        setHasOperation(true)
-        newDisplayValue = calculator.previousOperand + operation
-        setDisplayValue(newDisplayValue)
-      }
-
-      // 커서를 텍스트 끝으로 이동하고 스크롤 처리
-      requestAnimationFrame(() => {
-        if (inputRef.current) {
-          inputRef.current.focus()
-          const len = newDisplayValue.length
-          inputRef.current.setSelectionRange(len, len)
-          // 텍스트 끝으로 스크롤
-          inputRef.current.scrollLeft = inputRef.current.scrollWidth
-        }
-      })
-    }
-
-    // AC 버튼 클릭 핸들러
-    const handleClear = () => {
-      const calculator = calculatorRef.current
-      const newValue = calculator.clear()
-      const displayValue = newValue || '0'
-      setDisplayValue(displayValue)
-      setHasOperation(false)
-      onChange(displayValue)
-      // 커서를 텍스트 끝으로 이동하고 스크롤 처리
-      requestAnimationFrame(() => {
-        if (inputRef.current) {
-          inputRef.current.focus()
-          const len = displayValue.length
-          inputRef.current.setSelectionRange(len, len)
-          // 텍스트 끝으로 스크롤
-          inputRef.current.scrollLeft = inputRef.current.scrollWidth
-        }
-      })
-    }
-
-    // 계산 실행 함수 수정
-    const handleCompute = (fromEnterKey = false) => {
-      const calculator = calculatorRef.current
-      if (!hasOperation || !calculator.currentOperand) return
-
-      const result = calculator.compute()
-      if (result !== undefined) {
-        const resultStr = result.toString()
-        setDisplayValue(resultStr)
-        setHasOperation(false)
-        // Only call onChange with the final result
-        onChange(resultStr)
-
-        // 엔터키로 호출된 경우 포커스 설정하지 않음
-        if (!fromEnterKey) {
-          requestAnimationFrame(() => {
-            if (inputRef.current) {
-              inputRef.current.focus()
-              const len = resultStr.length
-              inputRef.current.setSelectionRange(len, len)
-            }
-          })
-        }
-      }
-    }
-
-    // DEL 버튼 클릭 핸들러
-    const handleDelete = () => {
-      const calculator = calculatorRef.current
-      const newValue = calculator.deleteNumber()
-      const displayValue = newValue || '0'
-      setDisplayValue(displayValue)
-      setHasOperation(!!calculator.operation)
-      onChange(displayValue)
-      // 커서를 텍스트 끝으로 이동하고 스크롤 처리
-      requestAnimationFrame(() => {
-        if (inputRef.current) {
-          inputRef.current.focus()
-          const len = displayValue.length
-          inputRef.current.setSelectionRange(len, len)
-          // 텍스트 끝으로 스크롤
-          inputRef.current.scrollLeft = inputRef.current.scrollWidth
-        }
-      })
-    }
-
-    // input의 onChange 이벤트 처리 - 허용된 계산기 입력만 처리
-    const handleInputChange = (e) => {
-      if (readOnly) return
-
-      const inputValue = e.target.value
-
-      // 허용된 문자만 필터링 (숫자, 연산자, 소수점)
-      const filteredValue = inputValue.replace(/[^0-9+\-×÷.]/g, '')
-
-      // 연산자 연속 입력 방지
-      const lastChar = filteredValue[filteredValue.length - 1]
-      const prevChar = filteredValue[filteredValue.length - 2]
-
-      if (['+', '×', '÷'].includes(lastChar) && ['+', '-', '×', '÷', '.'].includes(prevChar)) {
-        // 연산자나 소수점이 연속으로 입력된 경우 이전 문자 유지
-        return
-      }
-
-      // 소수점 중복 입력 방지
-      const parts = filteredValue.split(/[+\-×÷]/)
-      if (parts[parts.length - 1].split('.').length > 2) {
-        // 한 숫자에 소수점이 2개 이상인 경우
-        return
-      }
-
-      setDisplayValue(filteredValue)
-
-      // 계산기 상태 업데이트
-      if (filteredValue !== displayValue) {
-        const calculator = calculatorRef.current
-        const hasOperation = /[+\-×÷]/.test(filteredValue)
-
-        if (hasOperation) {
-          const [operand1, operator, operand2] = filteredValue.split(/([+\-×÷])/)
-          calculator.previousOperand = operand1 || ''
-          calculator.operation = operator || ''
-          calculator.currentOperand = operand2 || ''
-          setHasOperation(true)
-        } else {
-          calculator.currentOperand = filteredValue
-          setHasOperation(false)
-        }
-
-        onChange(filteredValue)
-      }
-    }
-
-    // 키패드 토글 함수
-    const toggleKeypad = (e) => {
-      if (e) {
-        e.preventDefault()
-        e.stopPropagation()
-      }
-      const newShowKeypad = !showKeypad
-      setShowKeypad(newShowKeypad)
-
-      // Show keypad 시에만 포커스 유지
-      if (newShowKeypad) {
-        setTimeout(() => {
-          inputRef.current?.focus()
-        }, 0)
-      }
-    }
-
-    // 키보드 이벤트 처리 수정
-    const handleKeyDown = (e) => {
-      if (readOnly) return
-
-      // Tab 키는 계산기 숨기고 기본 동작 허용
-      if (e.key === 'Tab') {
-        setShowKeypad(false)
-        return
-      }
-
-      // 모든 방향키는 기본 동작 허용
-      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        setShowKeypad(true)
-        return
-      }
-
-      // 계산기 허용 키들이 입력되면 키패드 표시 (엔터키 제외)
-      if (/^[0-9+\-×÷.=]$/.test(e.key) || e.key === 'Backspace' || e.key === 'Delete' || e.key === '*' || e.key === '/') {
-        setShowKeypad(true)
-      }
-
-      // 키패드가 숨겨진 상태에서 엔터키는 페이지로 전달
-      if (!showKeypad && e.key === 'Enter') {
-        return
-      }
-
-      e.preventDefault()
-      const calculator = calculatorRef.current
-      const { allowDecimal } = options
-
-      if (e.key === '.') {
-        // allowDecimal이 false이면 소수점 입력 무시
-        if (!allowDecimal) return
-
-        // 소수점 입력 처리
-        const currentValue = displayValue.toString()
-        const parts = currentValue.split(/[+\-×÷]/)
-        const lastPart = parts[parts.length - 1]
-
-        // 이미 소수점이 있으면 무시
-        if (!lastPart.includes('.')) {
-          handleNumber(e.key)
-        }
-      } else if (/^[0-9]$/.test(e.key)) {
-        handleNumber(e.key)
-      } else {
-        switch (e.key) {
-          case '+':
-          case '-':
-          case '*':
-          case '/':
-            const opMap = { '*': '×', '/': '÷' }
-            handleOperation(opMap[e.key] || e.key)
-            break
-          case 'Enter':
-          case '=':
-            if (showKeypad) {
-              // 키패드가 보이는 상태에서 엔터키: 계산 후 키패드만 숨김
-              handleCompute(true) // 엔터키로 호출됨을 표시
-              setShowKeypad(false)
-            }
-            // 키패드가 숨겨진 상태에서 엔터키: 페이지로 전달 (preventDefault 하지 않음)
-            break
-          case 'Backspace':
-          case 'Delete':
-            handleDelete()
-            break
-
-          case 'Escape':
-            handleClear()
-            setShowKeypad(false)
-            break
-
-          default:
-            break
-        }
-      }
-    }
-
-    return (
-      <div ref={containerRef} className="calculator-input-wrapper">
-        {label && (
-          <label htmlFor={id} className="calculator-label">
-            {label}
-          </label>
-        )}
-        <input
-          ref={inputRef}
-          type="text"
-          id={id}
-          name={name}
-          value={displayValue}
-          readOnly={readOnly}
-          className={className}
-          onClick={() => !readOnly && setShowKeypad(true)}
-          onFocus={() => !readOnly && setShowKeypad(true)}
-          onChange={handleInputChange}
-          onKeyDown={handleKeyDown}
-          tabIndex={readOnly ? -1 : 0}
-          placeholder={placeholder}
-          autoComplete={'off'}
-          disabled={disabled}
-        />
-
-        {showKeypad && !readOnly && (
-          <div className="keypad-container">
-            <div className="keypad-grid">
-              <button
-                onClick={() => {
-                  // const newValue = calculatorRef.current.clear()
-                  // setDisplayValue(newValue || '0')
-                  // onChange(newValue || '0')
-                  handleClear()
-                  setHasOperation(false)
-                }}
-                className="btn-clear"
-              >
-                AC
-              </button>
-              <button
-                onClick={() => {
-                  // const newValue = calculatorRef.current.deleteNumber()
-                  // setDisplayValue(newValue || '0')
-                  // onChange(newValue || '0')
-                  //setHasOperation(!!calculatorRef.current.operation)
-                  handleDelete()
-                }}
-                className="btn-delete"
-              >
-                DEL
-              </button>
-              <button onClick={() => handleOperation('÷')} className="btn-operator">
-                ÷
-              </button>
-
-              <button onClick={() => handleOperation('×')} className="btn-operator">
-                ×
-              </button>
-              <button onClick={() => handleOperation('-')} className="btn-operator">
-                -
-              </button>
-              <button onClick={() => handleOperation('+')} className="btn-operator">
-                +
-              </button>
-
-              {/* 숫자 버튼 */}
-              {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
-                <button key={num} onClick={() => handleNumber(num)} className="btn-number">
-                  {num}
-                </button>
-              ))}
-              {/* 0 버튼 */}
-              <button onClick={() => handleNumber('0')} className="btn-number btn-zero">
-                0
-              </button>
-              <button
-                onClick={() => {
-                  const newValue = calculatorRef.current.appendNumber('.')
-                  onChange(newValue)
-                }}
-                className="btn-number"
-              >
-                .
-              </button>
-              {/* = 버튼 */}
-              <button onClick={() => handleCompute(false)} className="btn-equals">
-                =
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-    )
-  },
-)
-
-CalculatorInput.displayName = 'CalculatorInput'

src/components/common/select/QSelectBox.jsx

@@ -14,7 +14,6 @@ import { useMessage } from '@/hooks/useMessage'
  * @param {string} targetKey - value에 있는 키
  * @param {string} showKey - options 있는 키중 보여줄 키
  * @param {object} params - 추가 파라미터
- * @param {boolean} showFirstOptionWhenEmpty - value가 빈값일 때 첫 번째 옵션을 보여줄지 여부
  * @returns
  */
 export default function QSelectBox({
@@ -28,7 +27,6 @@ export default function QSelectBox({
   showKey = '',
   params = {},
   tagTitle = '',
-  showFirstOptionWhenEmpty = false,
 }) {
   const { getMessage } = useMessage()
 
@@ -41,9 +39,7 @@ export default function QSelectBox({
     if (options.length === 0) return title !== '' ? title : getMessage('selectbox.title')
     if (showKey !== '' && !value) {
       //value가 없으면 showKey가 있으면 우선 보여준다
-      if (showFirstOptionWhenEmpty && options.length > 0) {
-        return options[0][showKey]
-      }
+      // return options[0][showKey]
       return title !== '' ? title : getMessage('selectbox.title')
     } else if (showKey !== '' && value) {
       //value가 있으면 sourceKey와 targetKey를 비교하여 보여준다
@@ -52,18 +48,12 @@ export default function QSelectBox({
         return option[sourceKey] === value[targetKey]
       })
       if (!option) {
-        if (showFirstOptionWhenEmpty && options.length > 0) {
-          return options[0][showKey]
-        }
         return title !== '' ? title : getMessage('selectbox.title')
       } else {
         return option[showKey]
       }
     } else {
       //일치하는 조건이 없으면 기본값을 보여준다.
-      if (showFirstOptionWhenEmpty && options.length > 0) {
-        return showKey !== '' ? options[0][showKey] : options[0].name
-      }
       return title !== '' ? title : getMessage('selectbox.title')
     }
   }
@@ -84,7 +74,7 @@ export default function QSelectBox({
   useEffect(() => {
     // value && handleClickSelectOption(value)
     setSelected(handleInitState())
-  }, [options, value, sourceKey, targetKey, showKey, showFirstOptionWhenEmpty])
+  }, [options, value, sourceKey, targetKey, showKey])
 
   useOnClickOutside(ref, handleClose)
 

src/components/community/modal/QnaDetailModal.jsx

@@ -25,7 +25,6 @@ export default function QnaDetailModal({ qnaNo, setOpen, qnaType }) {
         compCd        : 5200,
         loginId       : sessionState.userId,
         langCd        : 'JA',
-        siteTpCd      : 'QC',
       })
       const apiUrl = `${url}?${params.toString()}`
 

src/components/community/modal/QnaRegModal.jsx

@@ -22,8 +22,7 @@ export default function QnaRegModal({ setOpen, setReload, searchValue, selectPag
   const [sessionState, setSessionState] = useRecoilState(sessionStore)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const [files, setFiles] = useState([])
-  //const [qnaData, setQnaData] = useState([])
-  const [qnaData, setQnaData] = useState({})
+  const [qnaData, setQnaData] = useState([])
   const [closeMdFlg, setCloseMdFlg] = useState(true)
   const [closeSmFlg, setCloseSmFlg] = useState(true)
   const [hideSmFlg, setHideSmFlg] = useState(false)
@@ -45,10 +44,6 @@ export default function QnaRegModal({ setOpen, setReload, searchValue, selectPag
   const [isBtnDisable, setIsBtnDisable] = useState(false);
   const { promiseGet, post, promisePost } = useAxios(globalLocaleState)
 
-  useEffect(() => {
-    console.log('qnaData updated:', qnaData);
-  }, [qnaData]);
-
 let fileCheck = false;
   const regPhoneNumber = (e) => {
     const result = e.target.value
@@ -85,16 +80,14 @@ let fileCheck = false;
     //setQnaData([])
 
     setQnaData({
+      ...qnaData,
       compCd: "5200",
       siteTpCd: "QC",
       schNoticeClsCd: "QNA",
-      regId: sessionState?.userId || '',
-      storeId: sessionState?.userId || '',
-      qstMail: sessionState?.email || '',
-      qnaClsLrgCd: '',
-      qnaClsMidCd: '',
-      qnaClsSmlCd: ''
-    });
+      regId: sessionState.userId,
+      storeId: sessionState.userId,
+      qstMail : sessionState.email
+    })
 
     const codeL = findCommonCode(204200)
     if (codeL != null) {
@@ -126,42 +119,41 @@ let fileCheck = false;
 
   }
   const onChangeQnaTypeM = (e) => {
-    if (!e?.clCode) return;
 
-    // 중분류 코드 업데이트
-    setQnaData(prevState => ({
-      ...prevState,
-      qnaClsMidCd: e.clCode,
-      // 소분류는 초기화 (새로 선택하도록)
-      qnaClsSmlCd: ''
-    }));
+    if(e === undefined || e === null) return;
+    const codeS = findCommonCode(204400)
+    if (codeS != null) {
+
+      let codeList = []
+
+      codeS.map((item) => {
+
+        if (item.clRefChr1 === e.clCode) {
+          codeList.push(item);
+
+        }
+      })
+
+
+      setQnaData({ ...qnaData, qnaClsMidCd: e.clCode })
+      setCloseSmFlg(false)
+      setQnaTypeSmCodeList(codeList)
+      qnaTypeSmCodeRef.current?.setValue();
+
+      if(codeList.length > 0) {
+        setHideSmFlg(false)
+      }else{
+        setHideSmFlg(true)
+      }
+
 
-    // 소분류 코드 목록 설정
-    const codeS = findCommonCode(204400);
-    if (codeS) {
-      const filteredCodeList = codeS.filter(item => item.clRefChr1 === e.clCode);
-      setQnaTypeSmCodeList(filteredCodeList);
 
-      // 소분류가 있으면 초기화, 없으면 숨김
-      const hasSubCategories = filteredCodeList.length > 0;
-      setCloseSmFlg(!hasSubCategories);
-      setHideSmFlg(!hasSubCategories);
-    } else {
-      setHideSmFlg(true)
     }
 
-    // 소분류 선택기 초기화
-    qnaTypeSmCodeRef.current?.setValue();
-  };
-
-
+  }
   const onChangeQnaTypeS = (e) => {
-    if (!e?.clCode) return;
-
-    setQnaData(prevState => ({
-      ...prevState,
-      qnaClsSmlCd: e.clCode
-    }));
+    if(e === undefined || e === null) return;
+    setQnaData({ ...qnaData, qnaClsSmlCd:e.clCode})
   }
 
   const onFileSave = () => {

src/components/estimate/Estimate.jsx

@@ -23,7 +23,6 @@ import { usePopup } from '@/hooks/usePopup'
 import { useSwal } from '@/hooks/useSwal'
 import { QcastContext } from '@/app/QcastProvider'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
-import {normalizeDigits, normalizeDecimal} from '@/util/input-utils'
 export default function Estimate({}) {
   const [uniqueData, setUniqueData] = useState([])
   const [handlePricingFlag, setHandlePricingFlag] = useState(false)
@@ -138,27 +137,7 @@ export default function Estimate({}) {
           updatedRes = [...res]
         }
 
-        const groupByItemGroup = (items) => {
-          const grouped = items.reduce((acc, item) => {
-            const group = item.itemGroup || '기타';
-            if (!acc[group]) {
-              acc[group] = {
-                label: group,
-                options: []
-              };
-            }
-            acc[group].options.push({
-              value: item.itemId,
-              label: `${item.itemNo} - ${item.itemName}`,
-              ...item
-            });
-            return acc;
-          }, {});
-
-          return Object.values(grouped);
-        };
-        const groupedItems = groupByItemGroup(res);
-        setOriginDisplayItemList(groupedItems)
+        setOriginDisplayItemList(res)
         setDisplayItemList(updatedRes)
       }
     })
@@ -173,19 +152,6 @@ export default function Estimate({}) {
     })
   }
 
-  const groupStyles = {
-    groupHeading: (provided) => ({
-      ...provided,
-      fontSize: '14px',
-      fontWeight: 'bold',
-      color: '#333',
-      backgroundColor: '#f5f5f5',
-      padding: '8px 12px',
-      marginBottom: '4px',
-      borderBottom: '2px solid #ddd'
-    })
-  };
-
   useEffect(() => {
     // console.log('🚀 ~ Estimate ~ selectedPlan:', selectedPlan)
     if (selectedPlan) initEstimate(selectedPlan?.planNo?? currentPid)
@@ -541,7 +507,6 @@ export default function Estimate({}) {
      icon: 'warning',
      confirmFn: () => {
        handlePricing(showPriceCd)
-       setEstimateContextState({ pricingFlag:true })
      },
    })
  }
@@ -679,14 +644,11 @@ export default function Estimate({}) {
         newValue = parts[0] + '.' + parts[1].substring(0, 2)
       }
 
-      let pkgAsp = normalizeDecimal(newValue || '0')
+      let pkgAsp = newValue || '0'
 
       //현재 PKG용량값 가져오기
       let totVolKw = estimateContextState.totVolKw * 1000
-      // let pkgTotPrice = parseFloat(pkgAsp?.replaceAll(',', '')) * totVolKw * 1000
-
-      const pkgAspNumber = Number(normalizeDecimal(pkgAsp))
-      const pkgTotPrice = pkgAspNumber * totVolKw * 1000
+      let pkgTotPrice = parseFloat(pkgAsp?.replaceAll(',', '')) * totVolKw * 1000
 
       setEstimateContextState({
         pkgAsp: pkgAsp,
@@ -700,7 +662,7 @@ export default function Estimate({}) {
   // 수량 변경
   const onChangeAmount = (value, dispOrder, index) => {
     //itemChangeFlg = 1, partAdd = 0 셋팅
-    let amount = Number(normalizeDigits(value))
+    let amount = Number(value.replace(/[^0-9]/g, '').replaceAll(',', ''))
 
     if (isNaN(amount)) {
       amount = '0'
@@ -738,8 +700,7 @@ export default function Estimate({}) {
   // 단가 변경
   const onChangeSalePrice = (value, dispOrder, index) => {
     //itemChangeFlg, partAdd 받아온 그대로
-    let salePrice = Number(normalizeDecimal(value))
-
+    let salePrice = Number(value.replace(/[^0-9]/g, '').replaceAll(',', ''))
     if (isNaN(salePrice)) {
       salePrice = 0
     } else {
@@ -770,7 +731,7 @@ export default function Estimate({}) {
   /* 케이블 select 변경시  */
   const onChangeDisplayCableItem = (value, itemList) => {
     itemList.map((item, index) => {
-      if (item.dispCableFlg === '1' && item.itemTpCd !== 'M12' && item.itemTpCd !== 'S13') {
+      if (item.dispCableFlg === '1' && item.itemTpCd !== 'M12') {
         if (value !== '') {
           onChangeDisplayItem(value, item.dispOrder, index, true)
         }
@@ -782,7 +743,7 @@ export default function Estimate({}) {
   /* 케이블 select 변경시  */
   const onChangeDisplayDoubleCableItem = (value, itemList) => {
     itemList.map((item, index) => {
-      if (item.dispCableFlg === '1' && (item.itemTpCd === 'M12' || item.itemTpCd === 'S13')) {
+      if (item.dispCableFlg === '1' && item.itemTpCd === 'M12') {
         if (value !== '') {
           onChangeDisplayItem(value, item.dispOrder, index, true)
         }
@@ -978,7 +939,7 @@ export default function Estimate({}) {
           delete item.showSalePrice
           delete item.showSaleTotPrice
           if (item.delFlg === '0') {
-            let amount = Number(normalizeDigits(item.amount)) || 0
+            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
             let price
             if (amount === 0) {
               price = 0
@@ -1013,7 +974,7 @@ export default function Estimate({}) {
         makeUniqueSpecialNoteCd(itemList)
         itemList.forEach((item) => {
           if (item.delFlg === '0') {
-            let amount = Number(normalizeDigits(item.amount)) || 0
+            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
             let salePrice
             if (item.moduleFlg === '1') {
               const volKw = (item.pnowW * amount) / 1000
@@ -1047,8 +1008,8 @@ export default function Estimate({}) {
             }
           }
         })
-        //let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
-        const pkgAsp = Number(normalizeDecimal(estimateContextState.pkgAsp))
+        let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
+
         totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000
         totals.supplyPrice = totals.addSupplyPrice + totals.pkgTotPrice
         totals.vatPrice = totals.supplyPrice * 0.1
@@ -1107,7 +1068,7 @@ export default function Estimate({}) {
         let dispCableFlgCnt = 0
         estimateContextState.itemList.forEach((item) => {
           if (item.delFlg === '0') {
-            let amount = Number(normalizeDigits(item.amount)) || 0
+            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
             let salePrice
             if (item.moduleFlg === '1') {
               const volKw = (item.pnowW * amount) / 1000
@@ -1140,9 +1101,9 @@ export default function Estimate({}) {
               item.showSaleTotPrice = '0'
             }
 
-            if (item.dispCableFlg === '1') {
+            if (item.dispCableFlg === '1' ) {
               dispCableFlgCnt++
-              if(item.itemTpCd === 'M12' || item.itemTpCd === 'S13') {
+              if(item.itemTpCd === 'M12') {
                 setCableDbItem(item.itemId)
               }else{
                 setCableItem(item.itemId)
@@ -1156,10 +1117,9 @@ export default function Estimate({}) {
           setCableDbItem('100037')
         }
 
-        // let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
-        const pkgAsp = Number(normalizeDecimal(estimateContextState.pkgAsp))
-        totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000
+        let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
 
+        totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000
         totals.supplyPrice = totals.addSupplyPrice + totals.pkgTotPrice
         totals.vatPrice = totals.supplyPrice * 0.1
         totals.totPrice = totals.supplyPrice + totals.vatPrice
@@ -1189,7 +1149,7 @@ export default function Estimate({}) {
           delete item.showSalePrice
           delete item.showSaleTotPrice
           if (item.delFlg === '0') {
-            let amount = Number(normalizeDigits(item.amount)) || 0
+            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
             let price
             if (amount === 0) {
               price = 0
@@ -1215,7 +1175,11 @@ export default function Estimate({}) {
 
             if (item.dispCableFlg === '1') {
               dispCableFlgCnt++
-              if(item.itemTpCd === 'M12' || item.itemTpCd === 'S13') {
+            }
+
+            if (item.dispCableFlg === '1'){
+
+              if(item.itemTpCd === 'M12') {
                 setCableDbItem(item.itemId)
               }else{
                 setCableItem(item.itemId)
@@ -1473,7 +1437,7 @@ export default function Estimate({}) {
                               onChange={(e) => {
                                 //주문분류
                                 setHandlePricingFlag(true)
-                                setEstimateContextState({ estimateType: e.target.value, setEstimateContextState })
+                                setEstimateContextState({ estimateType: e.target.value })
                               }}
                             />
                             <label htmlFor="YJSS">{getMessage('estimate.detail.estimateType.yjss')}</label>
@@ -1493,7 +1457,7 @@ export default function Estimate({}) {
                             <label htmlFor="YJOD">{getMessage('estimate.detail.estimateType.yjod')}</label>
                           </div>
                         </div>
-                        {session?.storeLvl === '100000' && agencyCustList.length > 0 ? (  //일시적으로 1 => 100000로 정리
+                        {session?.storeLvl === '1' && agencyCustList.length > 0 ? (
                           <div className="form-flex-select ml10">
                             <label htmlFor="">{getMessage('estimate.detail.agency')}</label>
                             <div className="select-wrap" style={{ width: '400px' }}>
@@ -2031,7 +1995,6 @@ export default function Estimate({}) {
                                       classNamePrefix="custom"
                                       placeholder="Select"
                                       options={originDisplayItemList}
-                                      styles={groupStyles}
                                       onChange={(e) => {
                                         if (isObjectNotEmpty(e)) {
                                           onChangeDisplayItem(e.itemId, item.dispOrder, index, false)
@@ -2068,13 +2031,13 @@ export default function Estimate({}) {
                                       getOptionValue={(x) => x.clRefChr1}
                                       components={{
                                         SingleValue: ({ children, ...props }) => {
-                                          return <components.SingleValue {...props}>{(item.itemTpCd === 'M12' || item.itemTpCd === 'S13')? item.itemName : props.data.clRefChr3}</components.SingleValue>
+                                          return <components.SingleValue {...props}>{(item.itemTpCd === 'M12')? item.itemName : props.data.clRefChr3}</components.SingleValue>
                                         },
                                       }}
                                       isClearable={false}
                                       isDisabled={true}
                                       value={cableItemList.filter(function (option) {
-                                        return (item.itemTpCd === 'M12' || item.itemTpCd === 'S13' )? item.itemId : option.clRefChr1 === item.itemId
+                                        return (item.itemTpCd === 'M12')? item.itemId : option.clRefChr1 === item.itemId
                                       })}
                                     />
                                   )}

src/components/estimate/popup/DocDownOptionPop.jsx

@@ -6,7 +6,6 @@ import { useRecoilValue } from 'recoil'
 import { floorPlanObjectState, estimateState } from '@/store/floorPlanObjectAtom'
 import { usePathname, useSearchParams } from 'next/navigation'
 import { QcastContext } from '@/app/QcastProvider'
-import { sessionStore } from '@/store/commonAtom'
 
 export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDownPopLockFlg }) {
   const { setIsGlobalLoading } = useContext(QcastContext)
@@ -31,7 +30,7 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
   // recoil 물건번호
   const objectRecoil = useRecoilValue(floorPlanObjectState)
   const estimateRecoilState = useRecoilValue(estimateState)
- const sessionState = useRecoilValue(sessionStore)
+
   //문서 다운로드
   const handleFileDown = async () => {
     const url = '/api/estimate/excel-download'
@@ -68,8 +67,6 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
       schWeightFlg: schWeightFlg,
       schDrawingFlg: defaultSchDrawingFlg,
       pwrGnrSimType: 'D', //default 화면에 안보여줌
-      userId: sessionState.userId ? sessionState.userId : "",
-      saleStoreId: sessionState.storeId ? sessionState.storeId : "",
     }
 
     const options = { responseType: 'blob' }
@@ -133,7 +130,7 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
               <div className="common-table">
                 <table>
                   <colgroup>
-                    <col style={{ width: '220px' }} />
+                    <col style={{ width: '260px' }} />
                     <col />
                   </colgroup>
                   <tbody>
@@ -186,7 +183,7 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
                             />
                             <label htmlFor="schUnitPricePdfFlg0">{getMessage('estimate.detail.docPopup.schUnitPriceFlg.pdfFlg0')}</label>
                           </div>
-                          <div className="d-check-radio light mr10">
+                          <div className="d-check-radio light ">
                             <input
                               type="radio"
                               id="schUnitPricePdfFlg1"
@@ -200,20 +197,6 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen, docDown
                             />
                             <label htmlFor="schUnitPricePdfFlg1">{getMessage('estimate.detail.docPopup.schUnitPriceFlg.pdfFlg1')}</label>
                           </div>
-                          <div className="d-check-radio light">
-                            <input
-                              type="radio"
-                              id="schUnitPriceExcelFlg2"
-                              name="schUnitPriceFlg"
-                              value={'4'}
-                              checked={schUnitPriceFlg === '4'}
-                              onChange={(e) => {
-                                setSchDownload('EXCEL2')
-                                setSchUnitPriceFlg(e.target.value)
-                              }}
-                            />
-                            <label htmlFor="schUnitPriceExcelFlg2">{getMessage('estimate.detail.docPopup.schUnitPriceFlg.excelFlg2')}</label>
-                          </div>
                         </div>
                       </td>
                     </tr>

src/components/fabric/QLine.js

@@ -1,8 +1,6 @@
 import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { getDirectionByPoint } from '@/util/canvas-util'
-import { calcLinePlaneSize } from '@/util/qpolygon-utils'
-import { logger } from '@/util/logger'
 
 export const QLine = fabric.util.createClass(fabric.Line, {
   type: 'QLine',
@@ -16,11 +14,10 @@ export const QLine = fabric.util.createClass(fabric.Line, {
   children: [],
   padding: 5,
   textVisible: true,
-  textBaseline: 'alphabetic',
   initialize: function (points, options, length = 0) {
     // 소수점 전부 제거
 
-    points = points.map((point) => Number(Number(point)?.toFixed(1)))
+    points = points.map((point) => Number(point?.toFixed(1)))
 
     this.callSuper('initialize', points, { ...options, selectable: options.selectable ?? true })
     if (options.id) {
@@ -34,16 +31,14 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
     this.textMode = options.textMode ?? 'plane' // plane:복시도, actual:실측, none:표시안함
     this.textVisible = options.textVisible ?? true
+    if (length !== 0) {
+      this.length = length
+    } else {
+      this.setLength()
+    }
 
     this.startPoint = { x: this.x1, y: this.y1 }
     this.endPoint = { x: this.x2, y: this.y2 }
-    try {
-      this.setLength()
-    } catch (e) {
-      setTimeout(() => {
-        this.setLength()
-      }, 100)
-    }
   },
 
   init: function () {
@@ -71,14 +66,23 @@ export const QLine = fabric.util.createClass(fabric.Line, {
   },
 
   setLength() {
-    // Ensure all required properties are valid numbers
-    const { x1, y1, x2, y2 } = this;
-    if (isNaN(x1) || isNaN(y1) || isNaN(x2) || isNaN(y2)) {
-      logger.error('Invalid coordinates in QLine:', { x1, y1, x2, y2 });
-      this.length = 0;
-      return;
+    if (this.attributes?.actualSize !== undefined && this.attributes?.planeSize !== undefined) {
+      if (this.textMode === 'plane') {
+        this.length = this.attributes.planeSize / 10
+      } else if (this.textMode === 'actual') {
+        this.length = this.attributes.actualSize / 10
+      }
+    } else {
+      const scaleX = this.scaleX
+      const scaleY = this.scaleY
+      const x1 = this.left
+      const y1 = this.top
+      const x2 = this.left + this.width * scaleX
+      const y2 = this.top + this.height * scaleY
+      const dx = x2 - x1
+      const dy = y2 - y1
+      this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1))
     }
-    this.length = calcLinePlaneSize({ x1, y1, x2, y2 }) / 10;
   },
 
   addLengthText() {
@@ -178,78 +182,4 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     }
     return this
   },
-
-  setCoords: function () {
-    // 부모 클래스의 setCoords 호출
-    this.callSuper('setCoords')
-
-    // QLine의 경우 추가 처리 - 항상 강제로 재계산
-    if (this.canvas) {
-      // 모든 좌표 관련 캐시 초기화
-      delete this.oCoords
-      delete this.aCoords
-      delete this.__corner
-
-      // 다시 부모 setCoords 호출
-      this.callSuper('setCoords')
-
-      // 한 번 더 강제로 bounding rect 재계산
-      this._clearCache && this._clearCache()
-    }
-  },
-
-  containsPoint: function (point) {
-    // 먼저 좌표 업데이트
-    this.setCoords()
-
-    // 캔버스 줌과 viewport transform 고려한 좌표 변환
-    let localPoint = point
-    if (this.canvas) {
-      const vpt = this.canvas.viewportTransform
-      if (vpt) {
-        // viewport transform 역변환
-        const inverted = fabric.util.invertTransform(vpt)
-        localPoint = fabric.util.transformPoint(point, inverted)
-      }
-    }
-
-    // 기본 boundingRect 사용하되 줌을 고려하여 선택 영역 조정
-    const boundingRect = this.getBoundingRect(true)
-
-    // 선의 방향 판단
-    const dx = Math.abs(this.x2 - this.x1)
-    const dy = Math.abs(this.y2 - this.y1)
-    const isVertical = dx < dy && dx < 10
-    const isDiagonal = dx > 10 && dy > 10
-
-    // 줌 레벨에 따른 선택 영역 조정
-    const zoom = this.canvas ? this.canvas.getZoom() : 1
-    const baseMultiplier = 1 // 줌이 클수록 선택 영역을 줄임
-
-    let reducedWidth, reducedHeight
-
-    if (isDiagonal) {
-      reducedWidth = Math.max(boundingRect.width / 2, 10 * baseMultiplier)
-      reducedHeight = Math.max(boundingRect.height / 2, 10 * baseMultiplier)
-    } else if (isVertical) {
-      reducedWidth = Math.max(boundingRect.width * 2, 20 * baseMultiplier)
-      reducedHeight = boundingRect.height
-    } else {
-      reducedWidth = boundingRect.width
-      reducedHeight = Math.max(boundingRect.height * 2, 20 * baseMultiplier)
-    }
-
-    // 축소된 영역의 중심점 계산
-    const centerX = boundingRect.left + boundingRect.width / 2
-    const centerY = boundingRect.top + boundingRect.height / 2
-
-    // 축소된 영역의 경계 계산
-    const left = centerX - reducedWidth / 2
-    const top = centerY - reducedHeight / 2
-    const right = centerX + reducedWidth / 2
-    const bottom = centerY + reducedHeight / 2
-
-    // 점이 축소된 영역 내에 있는지 확인
-    return localPoint.x >= left && localPoint.x <= right && localPoint.y >= top && localPoint.y <= bottom
-  },
 })

src/components/fabric/QPolygon.js

@@ -2,11 +2,10 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { calculateAngle, drawGableRoof, drawRidgeRoof, drawShedRoof, toGeoJSON } from '@/util/qpolygon-utils'
+import { calculateAngle, drawRidgeRoof, drawShedRoof, toGeoJSON } from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
 import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import Big from 'big.js'
-import { drawSkeletonRidgeRoof } from '@/util/skeleton-utils'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
@@ -88,10 +87,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.initLines()
     this.init()
     this.setShape()
-    const originWidth = this.originWidth ?? this.width
-    const originHeight = this.originHeight ?? this.height
-    this.originWidth = this.angle === 90 || this.angle === 270 ? originHeight : originWidth
-    this.originHeight = this.angle === 90 || this.angle === 270 ? originWidth : originHeight
   },
 
   setShape() {
@@ -131,13 +126,11 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.on('moving', () => {
       this.initLines()
       this.addLengthText()
-      this.setCoords()
     })
 
     this.on('modified', (e) => {
       this.initLines()
       this.addLengthText()
-      this.setCoords()
     })
 
     this.on('selected', () => {
@@ -217,26 +210,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       line.startPoint = point
       line.endPoint = nextPoint
       this.lines.push(line)
-      this.calculateDegree()
     })
   },
-  calculateDegree() {
-    const degrees = []
-    // polygon.lines를 순회하며 각도를 구해 출력
-    this.lines.forEach((line, idx) => {
-      const dx = line.x2 - line.x1
-      const dy = line.y2 - line.y1
-      const rad = Math.atan2(dy, dx)
-      const degree = (rad * 180) / Math.PI
-      degrees.push(degree)
-    })
-
-    function isMultipleOf45(degree, epsilon = 1) {
-      return Math.abs(degree % 45) <= epsilon || Math.abs((degree % 45) - 45) <= epsilon
-    }
-
-    this.isMultipleOf45 = degrees.every((degree) => isMultipleOf45(degree))
-  },
 
   /**
    * 보조선 그리기
@@ -244,20 +219,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
    */
   drawHelpLine(settingModalFirstOptions) {
     /* innerLines 초기화 */
-    this.canvas
-      .getObjects()
-      .filter(
-        (obj) =>
-          obj.parentId === this.id &&
-          obj.name !== POLYGON_TYPE.WALL &&
-          obj.name !== POLYGON_TYPE.ROOF &&
-          obj.name !== 'lengthText' &&
-          obj.name !== 'outerLine' &&
-          obj.name !== 'baseLine',
-        // && obj.name !== 'outerLinePoint',
-      )
-      .forEach((obj) => this.canvas.remove(obj))
-    this.innerLines = []
+    this.innerLines.forEach((line) => {
+      this.canvas.remove(line)
+    })
     this.canvas.renderAll()
 
     let textMode = 'plane'
@@ -277,76 +241,50 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         break
     }
 
-    const types = this.lines.map((line) => line.attributes.type)
+    const types = []
+    this.lines.forEach((line) => types.push(line.attributes.type))
 
-    const isGableRoof = function (types) {
-      if (!types.includes(LINE_TYPE.WALLLINE.GABLE)) {
-        return false
-      }
-      const gableTypes = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
-      const oddTypes = types.filter((type, i) => i % 2 === 0)
-      const evenTypes = types.filter((type, i) => i % 2 === 1)
+    const gableType = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
 
-      const oddAllEaves = oddTypes.every((type) => type === LINE_TYPE.WALLLINE.EAVES)
-      const evenAllGable = evenTypes.every((type) => gableTypes.includes(type))
-      const evenAllEaves = evenTypes.every((type) => type === LINE_TYPE.WALLLINE.EAVES)
-      const oddAllGable = oddTypes.every((type) => gableTypes.includes(type))
+    const hasShed = types.includes(LINE_TYPE.WALLLINE.SHED)
 
-      return (oddAllEaves && evenAllGable) || (evenAllEaves && oddAllGable)
-    }
-
-    const isShedRoof = function (types, lines) {
-      const gableTypes = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
-      if (!types.includes(LINE_TYPE.WALLLINE.SHED)) {
-        return false
-      }
-      const shedLines = lines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.SHED)
-      const areShedLinesParallel = function (shedLines) {
-        return shedLines.every((shed, i) => {
-          const nextShed = shedLines[(i + 1) % shedLines.length]
-          const angle1 = calculateAngle(shed.startPoint, shed.endPoint)
-          const angle2 = calculateAngle(nextShed.startPoint, nextShed.endPoint)
-          return angle1 === angle2
-        })
-      }
-      if (!areShedLinesParallel(shedLines)) {
-        return false
+    if (hasShed) {
+      const sheds = this.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.SHED)
+      const areLinesParallel = function (line1, line2) {
+        const angle1 = calculateAngle(line1.startPoint, line1.endPoint)
+        const angle2 = calculateAngle(line2.startPoint, line2.endPoint)
+        return angle1 === angle2
       }
 
-      const getParallelEavesLines = function (shedLines, lines) {
-        const eavesLines = lines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.EAVES)
-
-        const referenceAngle = calculateAngle(shedLines[0].startPoint, shedLines[0].endPoint)
-
-        return eavesLines.filter((line) => {
-          const eavesAngle = calculateAngle(line.startPoint, line.endPoint)
-          return Math.abs(referenceAngle - eavesAngle) === 180
-        })
+      let isShedRoof = true
+      sheds.forEach((shed, i) => {
+        isShedRoof = areLinesParallel(shed, sheds[(i + 1) % sheds.length])
+      })
+      if (isShedRoof) {
+        const eaves = this.lines
+          .filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
+          .filter((line) => {
+            const angle1 = calculateAngle(sheds[0].startPoint, sheds[0].endPoint)
+            const angle2 = calculateAngle(line.startPoint, line.endPoint)
+            if (Math.abs(angle1 - angle2) === 180) {
+              return line
+            }
+          })
+        if (eaves.length > 0) {
+          const gables = this.lines.filter((line) => sheds.includes(line) === false && eaves.includes(line) === false)
+          const isGable = gables.every((line) => gableType.includes(line.attributes.type))
+          if (isGable) {
+            drawShedRoof(this.id, this.canvas, textMode)
+          } else {
+            drawRidgeRoof(this.id, this.canvas, textMode)
+          }
+        } else {
+          drawRidgeRoof(this.id, this.canvas, textMode)
+        }
+      } else {
+        drawRidgeRoof(this.id, this.canvas, textMode)
       }
-
-      const parallelEaves = getParallelEavesLines(shedLines, lines)
-      if (parallelEaves.length === 0) {
-        return false
-      }
-
-      const remainingLines = lines.filter((line) => !shedLines.includes(line) && !parallelEaves.includes(line))
-      return remainingLines.every((line) => gableTypes.includes(line.attributes.type))
-    }
-
-    if (types.every((type) => type === LINE_TYPE.WALLLINE.EAVES)) {
-      // 용마루 -- straight-skeleton
-      console.log('용마루 지붕')
-      drawRidgeRoof(this.id, this.canvas, textMode)
-      //drawSkeletonRidgeRoof(this.id, this.canvas, textMode);
-    } else if (isGableRoof(types)) {
-      // A형, B형 박공 지붕
-      console.log('패턴 지붕')
-      drawGableRoof(this.id, this.canvas, textMode)
-    } else if (isShedRoof(types, this.lines)) {
-      console.log('한쪽흐름 지붕')
-      drawShedRoof(this.id, this.canvas, textMode)
     } else {
-      console.log('변별로 설정')
       drawRidgeRoof(this.id, this.canvas, textMode)
     }
   },
@@ -376,27 +314,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       const dy = Big(end.y).minus(Big(start.y))
       const length = dx.pow(2).plus(dy.pow(2)).sqrt().times(10).round().toNumber()
 
-      const direction = getDirectionByPoint(start, end)
-
-      let left, top
-
-      if (direction === 'bottom') {
-        left = (start.x + end.x) / 2 - 50
-        top = (start.y + end.y) / 2
-      } else if (direction === 'top') {
-        left = (start.x + end.x) / 2 + 30
-        top = (start.y + end.y) / 2
-      } else if (direction === 'left') {
-        left = (start.x + end.x) / 2
-        top = (start.y + end.y) / 2 - 30
-      } else if (direction === 'right') {
-        left = (start.x + end.x) / 2
-        top = (start.y + end.y) / 2 + 30
-      }
-
       let midPoint
 
-      midPoint = new fabric.Point(left, top)
+      midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
 
       const degree = Big(Math.atan2(dy.toNumber(), dx.toNumber())).times(180).div(Math.PI).toNumber()
 
@@ -449,15 +369,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.canvas = canvas
   },
   fillCellABType(
-    cell = {
-      width: 50,
-      height: 100,
-      padding: 5,
-      wallDirection: 'left',
-      referenceDirection: 'none',
-      startIndex: -1,
-      isCellCenter: false,
-    },
+    cell = { width: 50, height: 100, padding: 5, wallDirection: 'left', referenceDirection: 'none', startIndex: -1, isCellCenter: false },
   ) {
     const points = this.points
 
@@ -759,119 +671,13 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     return intersects % 2 === 1
   },
-
-  inPolygonImproved(point) {
-    const vertices = this.getCurrentPoints()
-    let inside = false
-    const testX = Number(point.x.toFixed(this.toFixed))
-    const testY = Number(point.y.toFixed(this.toFixed))
-
-    for (let i = 0, j = vertices.length - 1; i < vertices.length; j = i++) {
-      const xi = Number(vertices[i].x.toFixed(this.toFixed))
-      const yi = Number(vertices[i].y.toFixed(this.toFixed))
-      const xj = Number(vertices[j].x.toFixed(this.toFixed))
-      const yj = Number(vertices[j].y.toFixed(this.toFixed))
-
-      // 점이 정점 위에 있는지 확인
-      if (Math.abs(xi - testX) <= 0.01 && Math.abs(yi - testY) <= 0.01) {
-        return true
-      }
-
-      // 점이 선분 위에 있는지 확인
-      if (this.isPointOnSegment(point, { x: xi, y: yi }, { x: xj, y: yj })) {
-        return true
-      }
-
-      // Ray casting 알고리즘 - 부동소수점 정밀도 개선
-      if (yi > testY !== yj > testY) {
-        const denominator = yj - yi
-        if (Math.abs(denominator) > 1e-10) {
-          // 0으로 나누기 방지
-          const intersection = ((xj - xi) * (testY - yi)) / denominator + xi
-          if (testX < intersection) {
-            inside = !inside
-          }
-        }
-      }
-    }
-
-    return inside
-  },
-
-  isPointOnSegment(point, segStart, segEnd) {
-    const tolerance = 0.1
-    const dxSegment = segEnd.x - segStart.x
-    const dySegment = segEnd.y - segStart.y
-    const dxPoint = point.x - segStart.x
-    const dyPoint = point.y - segStart.y
-
-    // 벡터의 외적을 계산하여 점이 선분 위에 있는지 확인
-    const crossProduct = Math.abs(dxPoint * dySegment - dyPoint * dxSegment)
-
-    if (crossProduct > tolerance) {
-      return false
-    }
-
-    // 점이 선분의 범위 내에 있는지 확인
-    const dotProduct = dxPoint * dxSegment + dyPoint * dySegment
-    const squaredLength = dxSegment * dxSegment + dySegment * dySegment
-
-    return dotProduct >= 0 && dotProduct <= squaredLength
-  },
-  setCoords: function () {
-    // 부모 클래스의 setCoords 호출
-    this.callSuper('setCoords')
-
-    // QPolygon의 경우 추가 처리 - 항상 강제로 재계산
-    if (this.canvas) {
-      // 모든 좌표 관련 캐시 초기화
-      delete this.oCoords
-      delete this.aCoords
-      delete this.__corner
-
-      // 다시 부모 setCoords 호출
-      this.callSuper('setCoords')
-
-      // 한 번 더 강제로 bounding rect 재계산
-      this._clearCache && this._clearCache()
-    }
-  },
-
   containsPoint: function (point) {
-    // 먼저 좌표 업데이트
-    this.setCoords()
-
-    // 캔버스 줌과 viewport transform 고려한 좌표 변환
-    let localPoint = point
-    if (this.canvas) {
-      const vpt = this.canvas.viewportTransform
-      if (vpt) {
-        // viewport transform 역변환
-        const inverted = fabric.util.invertTransform(vpt)
-        localPoint = fabric.util.transformPoint(point, inverted)
-      }
-    }
-
-    // 오브젝트의 transform matrix를 고려한 좌표 변환
-    const matrix = this.calcTransformMatrix()
-    const invertedMatrix = fabric.util.invertTransform(matrix)
-    const transformedPoint = fabric.util.transformPoint(localPoint, invertedMatrix)
-
-    // pathOffset을 고려한 최종 좌표 계산
-    const pathOffset = this.get('pathOffset')
-    const finalPoint = {
-      x: Number((transformedPoint.x + pathOffset.x).toFixed(this.toFixed)),
-      y: Number((transformedPoint.y + pathOffset.y).toFixed(this.toFixed)),
-    }
-
     if (this.name === POLYGON_TYPE.ROOF && this.isFixed) {
-      const isInside = this.inPolygonImproved(finalPoint)
-      if (!this.selectable) {
-        this.set('selectable', isInside)
-      }
+      const isInside = this.inPolygon(point)
+      this.set('selectable', isInside)
       return isInside
     } else {
-      return this.inPolygonImproved(finalPoint)
+      return this.callSuper('containsPoint', point)
     }
   },
 

src/components/floor-plan/CanvasFrame.jsx

@@ -2,7 +2,7 @@
 
 import { useContext, useEffect, useRef } from 'react'
 
-import { useRecoilValue, useResetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
@@ -12,8 +12,8 @@ import { usePlan } from '@/hooks/usePlan'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
 import { currentMenuState } from '@/store/canvasAtom'
-import { totalDisplaySelector } from '@/store/settingAtom'
-import { POLYGON_TYPE } from '@/common/common'
+import { roofMaterialsAtom, totalDisplaySelector } from '@/store/settingAtom'
+import { MENU, POLYGON_TYPE } from '@/common/common'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { QcastContext } from '@/app/QcastProvider'
 import {
@@ -30,6 +30,8 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useEvent } from '@/hooks/useEvent'
 import { compasDegAtom } from '@/store/orientationAtom'
+import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
+import { useMasterController } from '@/hooks/common/useMasterController'
 import { hotkeyStore } from '@/store/hotkeyAtom'
 import { usePopup } from '@/hooks/usePopup'
 
@@ -68,29 +70,10 @@ export default function CanvasFrame() {
           canvas?.renderAll() // 캔버스를 다시 그립니다.
 
           if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE).length > 0) {
-            setTimeout(() => {
-              setSelectedMenu('module')
-            }, 500)
-          } else if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL).length > 0) {
-            setSelectedMenu('outline')
+            setSelectedMenu('module')
           } else {
-            setTimeout(() => {
-              setSelectedMenu('surface')
-            }, 500)
+            setSelectedMenu('surface')
           }
-
-          const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-
-          roofs.forEach((roof) => {
-            const auxiliaryLines = canvas
-              .getObjects()
-              .filter((obj) => obj.name === 'auxiliaryLine' && roof.inPolygonImproved(obj.startPoint) && roof.inPolygonImproved(obj.endPoint))
-
-            auxiliaryLines.forEach((auxiliaryLine) => {
-              roof.innerLines.push(auxiliaryLine)
-            })
-          })
-
           initEvent()
         })
       } else {
@@ -141,12 +124,12 @@ export default function CanvasFrame() {
   /**
    * 캔버스가 있을 경우 핫키 이벤트 처리
    * hotkeyStore에 핫키 이벤트 리스너 추가
-   *
+   * 
    * const hotkeys = [
-   { key: 'c', fn: () => asdf() },
-   { key: 'v', fn: () => qwer() },
-   ]
-   setHotkeyStore(hotkeys)
+      { key: 'c', fn: () => asdf() },
+      { key: 'v', fn: () => qwer() },
+    ]
+    setHotkeyStore(hotkeys)
    */
   const hotkeyState = useRecoilValue(hotkeyStore)
   const hotkeyHandlerRef = useRef(null)

src/components/floor-plan/CanvasMenu.jsx

@@ -118,7 +118,7 @@ export default function CanvasMenu(props) {
 
     const params = {
       objectNo: objectNo,
-      planNo: selectedPlan?.planNo ? selectedPlan.planNo : pid,
+      planNo: selectedPlan.planNo,
       schDownload: donwloadType,
       schDrawingFlg: drawingFlg,
       pwrGnrSimType: pwrGnrSimTypeRecoil.type,
@@ -196,14 +196,6 @@ export default function CanvasMenu(props) {
             text: getMessage('module.delete.confirm'),
             type: 'confirm',
             confirmFn: () => {
-              const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-              roofs.forEach((roof) => {
-                roof.set({
-                  stroke: 'black',
-                  strokeWidth: 3,
-                })
-              })
-
               //해당 메뉴 이동시 배치면 삭제
 
               setAllModuleSurfaceIsComplete(false)
@@ -246,13 +238,10 @@ export default function CanvasMenu(props) {
         await reloadCanvasStatus(objectNo, currentCanvasPlan?.planNo ?? pid)
         break
       case 'estimate':
-        if (selectedMenu !== 'simulation') {
-          if (!isAllComplete()) {
-            swalFire({ text: getMessage('estimate.menu.move.valid1') })
-            return
-          }
+        if (!isAllComplete()) {
+          swalFire({ text: getMessage('estimate.menu.move.valid1') })
+          return
         }
-
         setIsGlobalLoading(true)
         promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan?.planNo ?? pid}/detail` }).then((res) => {
           if (res.status === 200) {
@@ -323,6 +312,7 @@ export default function CanvasMenu(props) {
   const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
 
   useEffect(() => {
+    console.log(selectedMenu)
     if (selectedMenu === 'placement') {
       onClickPlacementInitialMenu()
     }

src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx

@@ -8,12 +8,8 @@ import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
 import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
 import { usePopup } from '@/hooks/usePopup'
-import { useEffect } from 'react'
-import { useRecoilValue } from 'recoil'
-import { canvasState } from '@/store/canvasAtom'
 
 export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
-  const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
 
@@ -56,15 +52,6 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
     cutAuxiliary,
   } = useAuxiliaryDrawing(id)
 
-  useEffect(() => {
-    return () => {
-      const auxiliaryLines = canvas.getObjects().filter((line) => line.name === 'auxiliaryLine' && !line.isAuxiliaryFixed) // 보조선이 그려져 있는 경우 물어본다.
-      if (auxiliaryLines.length > 0) {
-        handleFix()
-      }
-    }
-  }, [])
-
   const outerLineProps = {
     length1,
     setLength1,

src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx

@@ -7,7 +7,6 @@ import { useState } from 'react'
 import { currentObjectState } from '@/store/canvasAtom'
 import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
 import { useSwal } from '@/hooks/useSwal'
-import { normalizeDigits } from '@/util/input-utils'
 
 export default function AuxiliaryEdit(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -41,15 +40,15 @@ export default function AuxiliaryEdit(props) {
       if (currentObject) {
         copy(
           currentObject,
-          arrow2 ? (arrow2 === '←' ? (Number(normalizeDigits(horizonSize)) / 10) * -1 : Number(normalizeDigits(horizonSize)) / 10) : 0,
-          arrow1 ? (arrow1 === '↑' ? (Number(normalizeDigits(verticalSize)) / 10) * -1 : Number(normalizeDigits(verticalSize)) / 10) : 0,
+          arrow2 ? (arrow2 === '←' ? Number(+horizonSize / 10) * -1 : Number(+horizonSize / 10)) : 0,
+          arrow1 ? (arrow1 === '↑' ? Number(+verticalSize / 10) * -1 : Number(+verticalSize / 10)) : 0,
         )
       }
     } else {
       move(
         currentObject,
-        arrow2 ? (arrow2 === '←' ? (Number(normalizeDigits(horizonSize)) / 10) * -1 : Number(normalizeDigits(horizonSize)) / 10) : 0,
-        arrow1 ? (arrow1 === '↑' ? (Number(normalizeDigits(verticalSize)) / 10) * -1 : Number(normalizeDigits(verticalSize)) / 10) : 0,
+        arrow2 ? (arrow2 === '←' ? Number(+horizonSize / 10) * -1 : Number(+horizonSize / 10)) : 0,
+        arrow1 ? (arrow1 === '↑' ? Number(+verticalSize / 10) * -1 : Number(+verticalSize / 10)) : 0,
       )
     }
 
@@ -66,7 +65,7 @@ export default function AuxiliaryEdit(props) {
               <p className="mb5">{getMessage('length')}</p>
               <div className="input-move-wrap mb5">
                 <div className="input-move">
-                  <input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(normalizeDigits(e.target.value))} />
+                  <input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(e.target.value)} />
                 </div>
                 <span>mm</span>
                 <div className="direction-move-wrap">
@@ -88,7 +87,7 @@ export default function AuxiliaryEdit(props) {
               </div>
               <div className="input-move-wrap">
                 <div className="input-move">
-                  <input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(normalizeDigits(e.target.value))} />
+                  <input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(e.target.value)} />
                 </div>
                 <span>mm</span>
                 <div className="direction-move-wrap">

src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx

@@ -7,7 +7,6 @@ import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import Big from 'big.js'
 import { calcLineActualSize, calcLinePlaneSize } from '@/util/qpolygon-utils'
-import { normalizeDigits } from '@/util/input-utils'
 
 export default function AuxiliarySize(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -43,8 +42,7 @@ export default function AuxiliarySize(props) {
       if (checkedRadio === 2) setValue2(value)
       setSize(0)
     } else {
-      //value = Big(value.replace(/[^0-9]/g, ''))
-      value = Big(normalizeDigits(value))
+      value = Big(value.replace(/[^0-9]/g, ''))
       if (checkedRadio === 1) setValue1(value.toNumber())
       if (checkedRadio === 2) setValue2(value.toNumber())
       setSize(value.div(10).toNumber())

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

@@ -10,7 +10,6 @@ import { useDebounceValue } from 'usehooks-ts'
 import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { isObjectNotEmpty } from '@/util/common-utils'
-import { normalizeDecimal} from '@/util/input-utils'
 
 export default function Module({ setTabNum }) {
   const { getMessage } = useMessage()
@@ -189,7 +188,7 @@ export default function Module({ setTabNum }) {
                           type="text"
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))}
+                          onChange={(e) => setInputInstallHeight(e.target.value)}
                         />
                       </div>
                       <span className="thin">m</span>
@@ -226,7 +225,7 @@ export default function Module({ setTabNum }) {
                           type="text"
                           className="input-origin block"
                           value={inputVerticalSnowCover}
-                          onChange={(e) => setInputVerticalSnowCover(normalizeDecimal(e.target.value))}
+                          onChange={(e) => setInputVerticalSnowCover(e.target.value)}
                         />
                       </div>
                       <span className="thin">cm</span>

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

@@ -7,21 +7,15 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { roofsState } from '@/store/roofAtom'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { useCommonCode } from '@/hooks/common/useCommonCode'
 import Swal from 'sweetalert2'
-import { normalizeDecimal} from '@/util/input-utils'
 
 export const Orientation = forwardRef((props, ref) => {
   const { getMessage } = useMessage()
-  const { findCommonCode } = useCommonCode()
   const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
   const basicSetting = useRecoilValue(basicSettingState)
   const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) //지붕재 선택
   const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
   const [roofTab, setRoofTab] = useState(0) //지붕재 탭
-  const [selectedModuleSeries, setSelectedModuleSeries] = useState(null)
-  const [moduleSeriesList, setModuleSeriesList] = useState([])
-  const [filteredModuleList, setFilteredModuleList] = useState([])
   const {
     roofs,
     setRoofs,
@@ -71,13 +65,8 @@ export const Orientation = forwardRef((props, ref) => {
     ],
   }
 
-  const allOption = {
-    moduleSerCd: 'ALL',
-    moduleSerNm: getMessage("board.sub.total") || 'ALL'
-  };
-
   useEffect(() => {
-    if (basicSetting.roofSizeSet === '3') {
+    if (basicSetting.roofSizeSet == '3') {
       restoreModuleInstArea()
     }
   }, [])
@@ -90,22 +79,9 @@ export const Orientation = forwardRef((props, ref) => {
 
   useEffect(() => {
     if (selectedModules) {
-      const foundModule = moduleList.find((module) => module.itemId === selectedModules.itemId)
-      if (foundModule) {
-        setSelectedModules(foundModule)
-
-        // 선택된 모듈의 시리즈로 업데이트 (시리즈 목록이 있는 경우에만)
-        if (moduleSeriesList.length > 0 && foundModule.moduleSerCd) {
-          const currentSeries = moduleSeriesList.find(series => series.moduleSerCd === foundModule.moduleSerCd)
-          if (currentSeries && (!selectedModuleSeries || selectedModuleSeries.moduleSerCd !== currentSeries.moduleSerCd)) {
-            //setSelectedModuleSeries(currentSeries)
-          }
-        }else{
-          setSelectedModuleSeries(allOption)
-        }
-      }
+      setSelectedModules(moduleList.find((module) => module.itemId === selectedModules.itemId))
     }
-  }, [selectedModules, moduleList, moduleSeriesList])
+  }, [selectedModules])
 
   useEffect(() => {
     if (selectedSurfaceType) {
@@ -187,7 +163,7 @@ export const Orientation = forwardRef((props, ref) => {
           title: getMessage('module.not.found'),
           icon: 'warning',
         })
-
+        return
       }
     }
   }
@@ -201,10 +177,9 @@ export const Orientation = forwardRef((props, ref) => {
       setInputCompasDeg('-0')
       return
     }
-    const n = Number(normalizeDecimal(e))
-    if (n >= -180 && n <= 180) {
-      if (numberCheck(n)) {
-        setInputCompasDeg(n)
+    if (Number(e) >= -180 && Number(e) <= 180) {
+      if (numberCheck(Number(e))) {
+        setInputCompasDeg(Number(e))
       }
     } else {
       setInputCompasDeg(compasDeg)
@@ -229,41 +204,6 @@ export const Orientation = forwardRef((props, ref) => {
     return true
   }
 
-  const handleChangeModuleSeries = (e) => {
-    resetRoofs()
-    setSelectedModuleSeries(e)
-
-    // 선택된 시리즈에 맞는 모듈 목록 필터링 및 첫 번째 모듈 선택
-    if (e && moduleList.length > 0) {
-      let filtered
-
-      if (e.moduleSerCd === 'ALL') {
-        // "전체" 선택 시 모든 모듈 표시
-        filtered = moduleList
-      } else {
-        // 특정 시리즈 선택 시 해당 시리즈 모듈만 표시
-        //filtered = moduleList.filter(module => module.moduleSerCd === e.moduleSerCd)
-       filtered = moduleList.filter(module => module && module.moduleSerCd && module.moduleSerCd === e.moduleSerCd)
-      }
-
-      setFilteredModuleList(filtered)
-
-      // 필터링된 목록의 첫 번째 모듈을 자동 선택
-      if (filtered.length > 0) {
-        const firstModule = filtered[0]
-        setSelectedModules(firstModule)
-        // 상위 컴포넌트의 handleChangeModule 호출
-        if (handleChangeModule) {
-          handleChangeModule(firstModule)
-        }
-      }
-    } else {
-      // 모듈 리스트가 비어있는 경우
-      setFilteredModuleList([])
-      setSelectedModules(null)
-    }
-  }
-
   const handleChangeModule = (e) => {
     resetRoofs()
     setSelectedModules(e)
@@ -322,71 +262,6 @@ export const Orientation = forwardRef((props, ref) => {
     setRoofsStore(newRoofs)
   }
 
-  // 모듈시리즈 목록 생성 및 commonCode와 매핑
-  useEffect(() => {
-    if (moduleList.length > 0 && moduleSeriesList.length === 0) {
-      const moduleSeriesCodes = findCommonCode(207100) || []
-
-      // moduleList에서 고유한 moduleSerCd 추출
-      const uniqueSeriesCd = [...new Set(moduleList.map(module => module.moduleSerCd).filter(Boolean))]
-
-      if (uniqueSeriesCd.length > 0) {
-        // moduleSerCd와 commonCode를 매핑하여 기본 moduleSeriesList 생성
-        const mappedSeries = uniqueSeriesCd.map(serCd => {
-          const matchedCode = moduleSeriesCodes.find(code => code.clCode === serCd)
-          return {
-            moduleSerCd: serCd,
-            moduleSerNm: matchedCode ? matchedCode.clCodeNm : serCd
-          }
-        })
-
-        // "전체" 옵션을 맨 앞에 추가
-        const seriesList = [allOption, ...mappedSeries]
-        setModuleSeriesList(seriesList)
-
-        // 현재 선택된 모듈이 있으면 해당 모듈의 시리즈를 찾아서 선택
-        if (selectedModules && selectedModules.moduleSerCd) {
-          const currentSeries = seriesList.find(series => series.moduleSerCd === selectedModules.moduleSerCd)
-          if (currentSeries) {
-            setSelectedModuleSeries(currentSeries)
-          } else {
-            setSelectedModuleSeries(allOption)
-            // "ALL"이 선택되면 자동으로 모듈 필터링 및 선택 실행
-            setTimeout(() => handleChangeModuleSeries(allOption), 0)
-          }
-        } else {
-          // 선택된 모듈이 없으면 "전체"를 기본 선택
-          setSelectedModuleSeries(allOption)
-          // "ALL"이 선택되면 자동으로 모듈 필터링 및 선택 실행
-          setTimeout(() => handleChangeModuleSeries(allOption), 0)
-        }
-      }
-    }
-  }, [moduleList, selectedModules])
-
-  // 초기 로딩 시에만 필터링된 모듈 목록 설정
-  useEffect(() => {
-    if (moduleList.length > 0 && filteredModuleList.length === 0 && selectedModuleSeries) {
-      let filtered
-
-      if (selectedModuleSeries.moduleSerCd === 'ALL') {
-        // "전체" 선택 시 모든 모듈 표시
-        filtered = moduleList
-      } else {
-        // 특정 시리즈 선택 시 해당 시리즈 모듈만 표시
-        filtered = moduleList.filter(module => module.moduleSerCd === selectedModuleSeries.moduleSerCd)
-      }
-
-      setFilteredModuleList(filtered)
-
-      if (filtered.length > 0 && !selectedModules) {
-        setSelectedModules(filtered[0])
-      }
-    } else if (moduleList.length === 0 && filteredModuleList.length === 0 && selectedModuleSeries) {
-      // 모듈 리스트가 비어있는 경우 빈 배열로 설정
-      setFilteredModuleList([])
-    }
-  }, [moduleList, selectedModuleSeries]);
   return (
     <>
       <div className="properties-setting-wrap">
@@ -400,31 +275,31 @@ export const Orientation = forwardRef((props, ref) => {
                     {Array.from({ length: 180 / 15 }).map((dot, index) => (
                       <div
                         key={index}
-                        className={`circle ${getDegreeInOrientation(inputCompasDeg) === -15 * index + 180 || (index === 0 && inputCompasDeg >= 172 && index === 0 && inputCompasDeg <= 180) || (inputCompasDeg === -180 && index === 0) ? 'act' : ''}`}
+                        className={`circle ${getDegreeInOrientation(inputCompasDeg) === -1 * (-15 * index + 180) || (index === 0 && inputCompasDeg >= 172 && index === 0 && inputCompasDeg <= 180) || (inputCompasDeg === -180 && index === 0) ? 'act' : ''}`}
                         onClick={() => {
                           if (index === 0) {
                             setInputCompasDeg(180)
                             return
                           }
-                          setInputCompasDeg(-15 * index + 180)
+                          setInputCompasDeg(-1 * (-15 * index + 180))
                         }}
                       >
                         {index === 0 && <i>180°</i>}
-                        {index === 6 && <i>90°</i>}
+                        {index === 6 && <i>-90°</i>}
                       </div>
                     ))}
                     {Array.from({ length: 180 / 15 }).map((dot, index) => (
                       <div
                         key={index}
-                        className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === -1 * 15 * index ? 'act' : ''}`}
-                        onClick={() => setInputCompasDeg(15 * index * -1)}
+                        className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === 15 * index ? 'act' : ''}`}
+                        onClick={() => setInputCompasDeg(15 * index)}
                       >
                         {index === 0 && <i>0°</i>}
-                        {index === 6 && <i>-90°</i>}
+                        {index === 6 && <i>90°</i>}
                       </div>
                     ))}
                     <div className="compas">
-                      <div className="compas-arr" style={{ transform: `rotate(${-1 * getDegreeInOrientation(inputCompasDeg)}deg)` }}></div>
+                      <div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(inputCompasDeg)}deg)` }}></div>
                     </div>
                   </div>
                 </div>
@@ -453,32 +328,16 @@ export const Orientation = forwardRef((props, ref) => {
             <div className="compas-table-wrap">
               <div className="compas-table-box mb10">
                 <div className="outline-form mb10">
-                  <span>{getMessage('modal.module.basic.setting.module.series.setting')}</span>
+                  <span>{getMessage('modal.module.basic.setting.module.setting')}</span>
                   <div className="grid-select">
-                    <div className="grid-select">
+                    {moduleList && (
                       <QSelectBox
-                        options={moduleSeriesList.length > 0 ? moduleSeriesList : [allOption]}
-                        value={selectedModuleSeries}
-                        targetKey={'moduleSerCd'}
-                        sourceKey={'moduleSerCd'}
-                        showKey={'moduleSerNm'}
-                        onChange={(e) => handleChangeModuleSeries(e)}
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="outline-form mb10">
-                  <span>{getMessage('modal.module.basic.setting.module.setting2')}</span>
-                  <div className="grid-select">
-                    {filteredModuleList && (
-                      <QSelectBox
-                        options={filteredModuleList}
+                        options={moduleList}
                         value={selectedModules}
                         targetKey={'itemId'}
                         sourceKey={'itemId'}
                         showKey={'itemNm'}
                         onChange={(e) => handleChangeModule(e)}
-                        showFirstOptionWhenEmpty = {true}
                       />
                     )}
                   </div>
@@ -529,18 +388,18 @@ export const Orientation = forwardRef((props, ref) => {
                     </tbody>
                   </table>
                 </div>
-                {basicSetting && basicSetting.roofSizeSet === '3' && (
+                {basicSetting && basicSetting.roofSizeSet == '3' && (
                   <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="number" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(e.target.value)} />
                     </div>
                     <span className="thin">m</span>
                   </div>
                 )}
               </div>
 
-              {basicSetting && basicSetting.roofSizeSet !== '3' && (
+              {basicSetting && basicSetting.roofSizeSet != '3' && (
                 <div className="compas-table-box">
                   <div className="compas-grid-table">
                     <div className="outline-form">
@@ -562,10 +421,10 @@ export const Orientation = forwardRef((props, ref) => {
                       <span>{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
                       <div className="input-grid mr10">
                         <input
-                          type="text"
+                          type="number"
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}
+                          onChange={(e) => handleChangeInstallHeight(e.target.value)}
                         />
                       </div>
                       <span className="thin">m</span>
@@ -590,10 +449,10 @@ export const Orientation = forwardRef((props, ref) => {
                       <span>{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
                       <div className="input-grid mr10">
                         <input
-                          type="text"
+                          type="number"
                           className="input-origin block"
                           value={inputVerticalSnowCover}
-                          onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}
+                          onChange={(e) => handleChangeVerticalSnowCover(e.target.value)}
                         />
                       </div>
                       <span className="thin">cm</span>

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

@@ -12,7 +12,6 @@ import {
 import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { isObjectNotEmpty } from '@/util/common-utils'
-import { normalizeDigits } from '@/util/input-utils'
 import Image from 'next/image'
 
 const Placement = forwardRef((props, refs) => {
@@ -156,7 +155,7 @@ const Placement = forwardRef((props, refs) => {
     newLayoutSetup[index] = {
       ...newLayoutSetup[index],
       moduleId: itemId,
-      [e.target.name]: Number(normalizeDigits(e.target.value)),
+      [e.target.name]: Number(e.target.value),
     }
     props.setLayoutSetup(newLayoutSetup)
   }
@@ -169,7 +168,6 @@ const Placement = forwardRef((props, refs) => {
             <div className="roof-module-table">
               <table>
                 <thead>
-                <tr>
                   {moduleData.header.map((data) => (
                     <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
                       {data.type === 'check' ? (
@@ -182,7 +180,6 @@ const Placement = forwardRef((props, refs) => {
                       )}
                     </th>
                   ))}
-                  </tr>
                 </thead>
                 <tbody>
                   {selectedModules?.itemList &&
@@ -218,7 +215,7 @@ const Placement = forwardRef((props, refs) => {
                               className="input-origin block"
                               name="row"
                               value={props.layoutSetup[index]?.row ?? 1}
-                              //defaultValue={0}
+                              defaultValue={0}
                               onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
                             />
                           </div>
@@ -230,7 +227,7 @@ const Placement = forwardRef((props, refs) => {
                               className="input-origin block"
                               name="col"
                               value={props.layoutSetup[index]?.col ?? 1}
-                              //defaultValue={0}
+                              defaultValue={0}
                               onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
                             />
                           </div>

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

@@ -9,7 +9,6 @@ import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedM
 import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import Swal from 'sweetalert2'
-import { normalizeDigits } from '@/util/input-utils'
 
 const Trestle = forwardRef((props, ref) => {
   const { tabNum, setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData, setRoofsStore } = props
@@ -18,12 +17,6 @@ const Trestle = forwardRef((props, ref) => {
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   const pitchText = useRecoilValue(pitchTextSelector)
   const [selectedRoof, setSelectedRoof] = useState(null)
-  const [isAutoSelecting, setIsAutoSelecting] = useState(false) // 자동 선택 중인지 상태
-  const [autoSelectTimeout, setAutoSelectTimeout] = useState(null) // 타임아웃 참조
-  const autoSelectTimeoutRef = useRef(null)
-
-  // 공통 타임아웃 설정 (밀리초)
-  const AUTO_SELECT_TIMEOUT = 500 // API 호출 완료 대기 시간
   const {
     trestleState,
     trestleDetail,
@@ -65,28 +58,15 @@ const Trestle = forwardRef((props, ref) => {
   const { restoreModuleInstArea } = useModuleBasicSetting()
   const [flag, setFlag] = useState(false)
   const tempModuleSelectionData = useRef(null)
-  const [autoSelectStep, setAutoSelectStep] = useState(null) // 'raftBase', 'trestle', 'constMthd', 'roofBase', 'construction'
-  const prevHajebichiRef = useRef();
 
   useEffect(() => {
-    if (roofs && roofs.length > 0 && !selectedRoof) {
-      console.log("roofs:::::", roofs.length)
-      setLengthBase(roofs[0].length);
+    if (roofs && !selectedRoof) {
       setSelectedRoof(roofs[0])
     }
-    if (selectedRoof && selectedRoof.lenAuth === "C") {
-      onChangeLength(selectedRoof.length);
-    }else if (selectedRoof && ["C", "R"].includes(selectedRoof.raftAuth) && roofs && roofs.length > 0) {
-      onChangeRaftBase(roofs[0]);
-    }else if (selectedRoof && ["C", "R"].includes(selectedRoof.roofPchAuth) && roofs && roofs.length > 0 &&
-      roofs[0].hajebichi !== prevHajebichiRef.current ) {
-      prevHajebichiRef.current = roofs[0].hajebichi;
-      onChangeHajebichi(roofs[0].hajebichi);
-    }
 
     //모듈 설치 영역 복구
     restoreModuleInstArea()
-  }, [roofs, selectedRoof])  // selectedRoof 추가
+  }, [roofs])
 
   useEffect(() => {
     if (flag && moduleSelectionData) {
@@ -120,86 +100,41 @@ const Trestle = forwardRef((props, ref) => {
 
   useEffect(() => {
     if (trestleList.length > 0) {
-      const existingTrestle = trestleList.find(
-        (trestle) => trestle.trestleMkrCd === trestleState?.trestleMkrCd
-      );
-      if (existingTrestle) {
-        setSelectedTrestle(existingTrestle)
-      } else if (autoSelectStep === 'trestle') {
-        // 자동 선택: 첫 번째 가대메이커 선택
-        console.log('Auto selecting first trestle:', trestleList[0])
-        const firstTrestle = trestleList[0]
-        onChangeTrestleMaker(firstTrestle)
-        // setAutoSelectStep은 onChangeTrestleMaker 내부에서 처리됨
-      }
+      setSelectedTrestle(trestleList.find((trestle) => trestle.trestleMkrCd === trestleState?.trestleMkrCd) ?? null)
     } else {
       setSelectedTrestle(null)
     }
-  }, [trestleList, autoSelectStep])
-
-  useEffect(() => {
-    if (constMthdList.length > 0) {
-      const existingConstMthd = constMthdList.find((constMthd) => constMthd.constMthdCd === trestleState?.constMthdCd)
-      if (existingConstMthd) {
-        setSelectedConstMthd(existingConstMthd)
-      } else if (autoSelectStep === 'constMthd') {
-        // 자동 선택: 첫 번째 공법 선택
-        const firstConstMthd = constMthdList[0]
-        onChangeConstMthd(firstConstMthd)
-        setAutoSelectStep('roofBase') // 다음 단계로 설정
-      }
-    } else {
-      setSelectedConstMthd(null)
-    }
-  }, [constMthdList, autoSelectStep])
+  }, [trestleList])
 
   useEffect(() => {
     if (roofBaseList.length > 0) {
-      const existingRoofBase = roofBaseList.find((roofBase) => roofBase.roofBaseCd === trestleState?.roofBaseCd)
-      if (existingRoofBase) {
-        setSelectedRoofBase(existingRoofBase)
-      } else if (autoSelectStep === 'roofBase') {
-        // 자동 선택: 첫 번째 지붕밑바탕 선택
-        const firstRoofBase = roofBaseList[0]
-        onChangeRoofBase(firstRoofBase)
-        setAutoSelectStep('construction') // 다음 단계로 설정
-      }
+      setSelectedRoofBase(roofBaseList.find((roofBase) => roofBase.roofBaseCd === trestleState?.roofBaseCd) ?? null)
     } else {
       setSelectedRoofBase(null)
     }
-  }, [roofBaseList, autoSelectStep])
+  }, [roofBaseList])
+
+  useEffect(() => {
+    if (constMthdList.length > 0) {
+      setSelectedConstMthd(constMthdList.find((constMthd) => constMthd.constMthdCd === trestleState?.constMthdCd) ?? null)
+    } else {
+      setSelectedConstMthd(null)
+    }
+  }, [constMthdList])
 
   useEffect(() => {
     if (constructionList.length > 0) {
-      const existingConstruction = constructionList.find((construction) => construction.constTp === trestleState.constTp)
-      if (existingConstruction) {
-        setSelectedConstruction(existingConstruction)
-      } else if (autoSelectStep === 'construction') {
-        // 자동 선택: 첫 번째 가능한 construction 선택
-        const availableConstructions = constructionList.filter((construction) => construction.constPossYn === 'Y')
-        if (availableConstructions.length > 0) {
-          const firstConstruction = availableConstructions[0]
-          const firstIndex = constructionList.findIndex((construction) => construction.constTp === firstConstruction.constTp)
-          handleConstruction(firstIndex)
-          setAutoSelectStep(null) // 자동 선택 완료
-        } else {
-          Swal.fire({
-            title: getMessage('modal.module.basic.settting.module.error4', [selectedRoof?.nameJp]),
-            icon: 'warning',
-          })
-        }
-      }
-
+      setSelectedConstruction(constructionList.find((construction) => construction.constTp === trestleState?.construction?.constTp) ?? null)
       if (constructionList.filter((construction) => construction.constPossYn === 'Y').length === 0) {
         Swal.fire({
-          title: getMessage('modal.module.basic.settting.module.error4', [selectedRoof?.nameJp]),
+          title: getMessage('modal.module.basic.settting.module.error4', [selectedRoof?.nameJp]), // 시공법법을 선택해주세요.
           icon: 'warning',
         })
       }
     } else {
       setSelectedConstruction(null)
     }
-  }, [constructionList, autoSelectStep])
+  }, [constructionList])
 
   const getConstructionState = (index) => {
     if (constructionList && constructionList.length > 0) {
@@ -216,13 +151,6 @@ const Trestle = forwardRef((props, ref) => {
 
   const onChangeLength = (e) => {
     setLengthBase(e)
-    // 다음 단계들 초기화
-    setSelectedRaftBase(null)
-    setSelectedTrestle(null)
-    setSelectedConstMthd(null)
-    setSelectedRoofBase(null)
-    setSelectedConstruction(null)
-
     dispatch({
       type: 'SET_LENGTH',
       roof: {
@@ -232,24 +160,10 @@ const Trestle = forwardRef((props, ref) => {
         raft: selectedRaftBase?.clCode,
       },
     })
-
-    // 자동으로 첫 번째 서까래 간격 선택
-    if (raftBaseList.length > 0) {
-
-      const inx = raftBaseList.findIndex((raft) => raft.clCode === selectedRoof?.raft) ?? 0
-      const firstRaftBase = raftBaseList[inx]
-      onChangeRaftBase(firstRaftBase)
-    }
   }
 
   const onChangeRaftBase = (e) => {
     setSelectedRaftBase(e)
-    // 다음 단계들 초기화
-    setSelectedTrestle(null)
-    setSelectedConstMthd(null)
-    setSelectedRoofBase(null)
-    setSelectedConstruction(null)
-
     dispatch({
       type: 'SET_RAFT_BASE',
       roof: {
@@ -258,115 +172,58 @@ const Trestle = forwardRef((props, ref) => {
         raft: e.clCode,
       },
     })
-
-    // 다음 단계(가대메이커) 자동 선택 설정 - 지연 실행
-    setTimeout(() => {
-      setAutoSelectStep('trestle')
-    }, AUTO_SELECT_TIMEOUT) // API 호출 완료를 위한 더 긴 지연
   }
 
   const onChangeHajebichi = (e) => {
     setHajebichi(e)
-    // 다음 단계들 초기화
-    setSelectedTrestle(null)
-    setSelectedConstMthd(null)
-    setSelectedRoofBase(null)
-    setSelectedConstruction(null)
-
-    // roofs 배열에서 selectedRoof.index와 같은 인덱스의 지붕 객체 업데이트
-    if (selectedRoof && selectedRoof.index !== undefined) {
-      const updatedRoofs = roofs.map((roof, index) => (index === selectedRoof.index ? { ...roof, hajebichi: Number(e) } : roof))
-      setRoofs(updatedRoofs)
-    }
-
     dispatch({
       type: 'SET_HAJEBICHI',
       roof: {
         moduleTpCd: selectedModules.itemTp ?? '',
         roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+        raft: selectedRaftBase?.clCode,
         hajebichi: e,
       },
     })
-
-    // 다음 단계(가대메이커) 자동 선택 설정 - 지연 실행
-    setTimeout(() => {
-      setAutoSelectStep('trestle')
-    }, AUTO_SELECT_TIMEOUT)
   }
 
   const onChangeTrestleMaker = (e) => {
     setSelectedTrestle(e)
-    // 다음 단계들 초기화
-    setSelectedConstMthd(null)
-    setSelectedRoofBase(null)
-    setSelectedConstruction(null)
-
     dispatch({
       type: 'SET_TRESTLE_MAKER',
       roof: {
         moduleTpCd: selectedModules.itemTp ?? '',
         roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
-        //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
+        raft: selectedRaftBase?.clCode,
         trestleMkrCd: e.trestleMkrCd,
       },
     })
-
-    // API 호출 완료 후 다음 단계(공법) 자동 선택 설정
-    setTimeout(() => {
-      setAutoSelectStep('constMthd')
-    }, AUTO_SELECT_TIMEOUT)
   }
 
   const onChangeConstMthd = (e) => {
     setSelectedConstMthd(e)
-    // 다음 단계 초기화
-    setSelectedRoofBase(null)
-    setSelectedConstruction(null)
-
     dispatch({
       type: 'SET_CONST_MTHD',
       roof: {
         moduleTpCd: selectedModules.itemTp ?? '',
         roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
-        //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
-        trestleMkrCd: selectedTrestle?.trestleMkrCd,
+        raft: selectedRaftBase?.clCode,
+        trestleMkrCd: selectedTrestle.trestleMkrCd,
         constMthdCd: e.constMthdCd,
       },
     })
-
-    // 기존 타임아웃 취소
-    if (autoSelectTimeoutRef.current) {
-      clearTimeout(autoSelectTimeoutRef.current)
-    }
-
-    // 자동 선택 중 상태 활성화
-    setIsAutoSelecting(true)
-
-    // API 호출 완료 후 다음 단계(지붕밑바탕) 자동 선택 설정
-    const timeoutId = setTimeout(() => {
-      setAutoSelectStep('roofBase')
-      setIsAutoSelecting(false)
-    }, AUTO_SELECT_TIMEOUT)
-
-    autoSelectTimeoutRef.current = timeoutId
   }
 
   const onChangeRoofBase = (e) => {
     setSelectedRoofBase(e)
-    setSelectedConstruction(null)
-
     dispatch({
       type: 'SET_ROOF_BASE',
       roof: {
         moduleTpCd: selectedModules.itemTp ?? '',
         roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
-        //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
-        trestleMkrCd: selectedTrestle?.trestleMkrCd,
-        constMthdCd: selectedConstMthd?.constMthdCd,
+        raft: selectedRaftBase?.clCode,
+        trestleMkrCd: selectedTrestle.trestleMkrCd,
+        constMthdCd: selectedConstMthd.constMthdCd,
         roofBaseCd: e.roofBaseCd,
         illuminationTp: managementState?.surfaceTypeValue ?? '',
         instHt: managementState?.installHeight ?? '',
@@ -376,11 +233,6 @@ const Trestle = forwardRef((props, ref) => {
         roofPitch: Math.round(hajebichi ?? 0),
       },
     })
-
-    // API 호출 완료 후 다음 단계(construction) 자동 선택 설정
-    setTimeout(() => {
-      setAutoSelectStep('construction')
-    }, AUTO_SELECT_TIMEOUT)
   }
 
   const handleConstruction = (index) => {
@@ -390,8 +242,7 @@ const Trestle = forwardRef((props, ref) => {
         roof: {
           moduleTpCd: selectedModules.itemTp ?? '',
           roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-          raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
-          //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
+          raft: selectedRaftBase?.clCode,
           trestleMkrCd: selectedTrestle.trestleMkrCd,
           constMthdCd: selectedConstMthd.constMthdCd,
           roofBaseCd: selectedRoofBase.roofBaseCd,
@@ -428,7 +279,7 @@ const Trestle = forwardRef((props, ref) => {
           ridgeMargin,
           kerabaMargin,
           roofIndex: selectedRoof.index,
-          raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+          raft: selectedRaftBase?.clCode,
           trestle: {
             hajebichi: hajebichi,
             length: lengthBase,
@@ -465,8 +316,8 @@ const Trestle = forwardRef((props, ref) => {
           ridgeMargin,
           kerabaMargin,
           roofIndex: roof.index,
-          raft: selectedRaftBase?.clCode ?? selectedRoof?.raft ?? '',
-          //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi ?? 0,
+          raft: selectedRaftBase?.clCode,
+          hajebichi: hajebichi,
           trestle: {
             length: lengthBase,
             hajebichi: hajebichi,
@@ -476,8 +327,7 @@ const Trestle = forwardRef((props, ref) => {
             ...selectedRoofBase,
           },
           construction: {
-            //...constructionList.find((data) => newAddedRoofs[index].construction.constTp === data.constTp),
-            ...constructionList.find((data) => trestleState.constTp === data.constTp),
+            ...constructionList.find((data) => data.constTp === trestleState.constTp),
             cvrYn,
             snowGdPossYn,
             cvrChecked,
@@ -551,7 +401,7 @@ const Trestle = forwardRef((props, ref) => {
       }
 
       if (['C', 'R'].includes(roof.roofPchAuth)) {
-        if (!roof?.hajebichi) {
+        if (!roof?.roofPchBase) {
           Swal.fire({
             title: getMessage('modal.module.basic.settting.module.error7', [roof.nameJp]), // 하제비치를 입력해주세요.
             icon: 'warning',
@@ -701,19 +551,7 @@ const Trestle = forwardRef((props, ref) => {
                             type="text"
                             className="input-origin block"
                             value={lengthBase}
-                            onChange={(e) => {
-                              const v = e.target.value
-                              if (v === '') {
-                                onChangeLength('')
-                                return
-                              }
-                              const n = Number(normalizeDigits(v))
-                              if (Number.isNaN(n)) {
-                                onChangeLength('')
-                              } else {
-                                onChangeLength(n)
-                              }
-                            }}
+                            onChange={(e) => onChangeLength(e.target.value)}
                             disabled={selectedRoof.lenAuth === 'R'}
                           />
                         </div>
@@ -736,8 +574,6 @@ const Trestle = forwardRef((props, ref) => {
                               showKey={'clCodeNm'}
                               disabled={selectedRoof.raftAuth === 'R'}
                               onChange={(e) => onChangeRaftBase(e)}
-                              showFirstOptionWhenEmpty={true}
-
                             />
                           )}
                         </div>
@@ -755,19 +591,7 @@ const Trestle = forwardRef((props, ref) => {
                             type="text"
                             className="input-origin block"
                             disabled={selectedRoof.roofPchAuth === 'R'}
-                            onChange={(e) => {
-                              const v = e.target.value
-                              if (v === '') {
-                                onChangeHajebichi('')
-                                return
-                              }
-                              const n = Number(normalizeDigits(v))
-                              if (Number.isNaN(n)) {
-                                onChangeHajebichi('')
-                              } else {
-                                onChangeHajebichi(n)
-                              }
-                            }}
+                            onChange={(e) => onChangeHajebichi(e.target.value)}
                             value={hajebichi}
                           />
                         </div>
@@ -788,7 +612,6 @@ const Trestle = forwardRef((props, ref) => {
                           targetKey={'trestleMkrCd'}
                           showKey={'trestleMkrCdJp'}
                           onChange={(e) => onChangeTrestleMaker(e)}
-                          showFirstOptionWhenEmpty={true}
                         />
                       )}
                     </div>
@@ -807,7 +630,6 @@ const Trestle = forwardRef((props, ref) => {
                           targetKey={'constMthdCd'}
                           showKey={'constMthdCdJp'}
                           onChange={(e) => onChangeConstMthd(e)}
-                          showFirstOptionWhenEmpty={true}
                         />
                       )}
                     </div>
@@ -826,7 +648,6 @@ const Trestle = forwardRef((props, ref) => {
                           showKey={'roofBaseCdJp'}
                           value={selectedRoofBase}
                           onChange={(e) => onChangeRoofBase(e)}
-                          showFirstOptionWhenEmpty={true}
                         />
                       )}
                     </div>

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -1,13 +1,16 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useContext, useEffect, useRef, useState } from 'react'
+import { useState, useEffect, useContext, useRef } from 'react'
 import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect'
 import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 import PassivityCircuitAllocation from './step/type/PassivityCircuitAllocation'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { correntObjectNoState } from '@/store/settingAtom'
+import { useRecoilValue } from 'recoil'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import { useRecoilState } from 'recoil'
+import { makersState, modelsState, modelState, pcsCheckState, selectedMakerState, selectedModelsState, seriesState } from '@/store/circuitTrestleAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useSwal } from '@/hooks/useSwal'
 import { canvasState, canvasZoomState } from '@/store/canvasAtom'
@@ -18,7 +21,9 @@ import { v4 as uuidv4 } from 'uuid'
 
 import { useEstimate } from '@/hooks/useEstimate'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
+import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { useImgLoader } from '@/hooks/floorPlan/useImgLoader'
+import { usePlan } from '@/hooks/usePlan'
 import { QcastContext } from '@/app/QcastProvider'
 import { fabric } from 'fabric'
 import { fontSelector } from '@/store/fontAtom'
@@ -102,84 +107,12 @@ export default function CircuitTrestleSetting({ id }) {
     }
   }, [])
 
-  const capture = async (type) => {
-    beforeCapture(type)
-
-    await handleCanvasToPng(type)
-
-    afterCapture(type)
-
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(true)
-      }, 1000)
-    })
-  }
-
   // 캡쳐 전 처리
-  const beforeCapture = (type) => {
-    setCanvasZoom(100)
-    canvas.set({ zoom: 1 })
-
-    // roof 객체들을 찾아서 중앙점 계산
-    const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof' && !obj.wall)
-
-    if (roofs.length > 0) {
-      // 모든 roof의 x, y 좌표를 수집
-      const allPoints = []
-      roofs.forEach((roof) => {
-        if (roof.getCurrentPoints()) {
-          roof.getCurrentPoints().forEach((point) => {
-            allPoints.push({ x: point.x, y: point.y })
-          })
-        }
-      })
-
-      if (allPoints.length > 0) {
-        // 모든 점들의 중앙값 계산
-        const minX = Math.min(...allPoints.map((p) => p.x))
-        const maxX = Math.max(...allPoints.map((p) => p.x))
-        const minY = Math.min(...allPoints.map((p) => p.y))
-        const maxY = Math.max(...allPoints.map((p) => p.y))
-
-        const centerX = (minX + maxX) / 2
-        const centerY = (minY + maxY) / 2
-
-        // 캔버스 중앙으로 이동하기 위한 오프셋 계산
-        const canvasWidth = canvas.getWidth()
-        const canvasHeight = canvas.getHeight()
-        const offsetX = canvasWidth / 2 - centerX
-        const offsetY = canvasHeight / 2 - centerY
-
-        canvas.viewportTransform = [1, 0, 0, 1, offsetX, offsetY]
-      } else {
-        canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
-      }
-    } else {
-      canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
-    }
-
-    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
-    const circuitNumberTexts = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber')
-
-    if (type === 2) {
-      modules.forEach((module) => {
-        module.set({ originColor: module.fill, fill: null, strokeWidth: 2 })
-      })
-      circuitNumberTexts.forEach((text) => {
-        text.set({ visible: false })
-      })
-    }
-
-    canvas.renderAll()
-
-    // roof polygon들의 중간점 계산
-    const roofPolygons = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-    let x, y
-    x = canvas.width / 2
-    y = canvas.height / 2
-    
-    canvas.zoomToPoint(new fabric.Point(x, y), 0.4)
+  const beforeCapture = () => {
+    // setCanvasZoom(100)
+    const x = canvas.width / 2
+    const y = canvas.height / 2
+    canvas.zoomToPoint(new fabric.Point(x, y), 0.5)
     changeFontSize('lengthText', '28')
     changeFontSize('circuitNumber', '28')
     changeFontSize('flowText', '28')
@@ -187,27 +120,13 @@ export default function CircuitTrestleSetting({ id }) {
   }
 
   // 캡쳐 후 처리
-  const afterCapture = (type) => {
+  const afterCapture = () => {
     setCanvasZoom(100)
     canvas.set({ zoom: 1 })
     canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
     changeFontSize('lengthText', lengthText.fontSize.value)
     changeFontSize('circuitNumber', circuitNumberText.fontSize.value)
     changeFontSize('flowText', flowText.fontSize.value)
-
-    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
-    const circuitNumberTexts = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber')
-    if (type === 2) {
-      modules.forEach((module) => {
-        module.set({
-          fill: module.originColor,
-          strokeWidth: 0.3,
-        })
-      })
-      circuitNumberTexts.forEach((text) => {
-        text.set({ visible: true })
-      })
-    }
     canvas.renderAll()
   }
 
@@ -468,7 +387,9 @@ export default function CircuitTrestleSetting({ id }) {
       .map((obj) => {
         obj.pcses = getStepUpListData()
       })
-    await capture(1)
+    beforeCapture()
+    handleCanvasToPng(1)
+    afterCapture()
 
     //회로할당 저장 시 result=null인 경우에도 회로번호 텍스트 표시 유지 처리
 
@@ -485,7 +406,9 @@ export default function CircuitTrestleSetting({ id }) {
     const result = await getEstimateData()
 
     if (result) {
-      await capture(2)
+      beforeCapture()
+      handleCanvasToPng(2)
+      afterCapture()
       // 견적서 저장
       await saveEstimate(result)
     } else {

src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx

@@ -74,9 +74,11 @@ export default function PowerConditionalSelect(props) {
   ]
 
   useEffect(() => {
-    getPcsMakerList().then((res) => {
-      setMakers(res.data)
-    })
+    if (makers.length === 0) {
+      getPcsMakerList().then((res) => {
+        setMakers(res.data)
+      })
+    }
   }, [])
 
   const onCheckSeries = (data) => {
@@ -200,7 +202,6 @@ export default function PowerConditionalSelect(props) {
       const param = {
         pcsMkrCd: option.pcsMkrCd,
         mixMatlNo: moduleSelectionData.module.mixMatlNo,
-        moduleMatlCds: moduleSelectionData.module.itemList.map((item) => item.itemId).join(','),
       }
 
       getPcsMakerList(param).then((res) => {

src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx

@@ -109,7 +109,6 @@ export default function StepUp(props) {
           /** 캔버스에 회로 정보 적용 */
           // 병설일때 pcs 있으면 setSubOpsions, 없으면 setMainOptions
           console.log('stepUpListData', stepUpListData)
-          let mChk = 0;
           stepUpListData[0].pcsItemList.forEach((pcsItem, index) => {
             const optionList = formatOptionCodes(pcsItem.optionList)
             if (isMultiOptions()) {
@@ -165,8 +164,6 @@ export default function StepUp(props) {
                     targetModule.pcsItemId = module.pcsItemId
                     targetModule.circuitNumber = module.circuit
                     canvas.add(moduleCircuitText)
-                  } else {
-                    mChk++;
                   }
                 })
               })
@@ -175,10 +172,6 @@ export default function StepUp(props) {
 
           canvas.renderAll()
           setModuleStatisticsData()
-
-          if (mChk > 0) {
-            swalFire({ text: getMessage('modal.circuit.trestle.setting.step.up.allocation.module.over.count') })
-          }
         } else {
           swalFire({ text: getMessage('common.message.send.error') })
         }
@@ -474,7 +467,7 @@ export default function StepUp(props) {
         module.pcsItemId = null
       })
 
-      /** 선택된 모듈 목록 추가 */
+    /** 선택된 모듈 목록 추가 */
     selectedData.roofSurfaceList.forEach((roofSurface) => {
       const targetSurface = canvas.getObjects().filter((obj) => obj.id === roofSurface.roofSurfaceId)[0]
       const moduleIds = targetSurface.modules.map((module) => {
@@ -523,7 +516,7 @@ export default function StepUp(props) {
 
     canvas.renderAll()
     setModuleStatisticsData()
-    }
+  }
 
   /**
    * 현재 선택된 값들을 가져오는 함수 추가

src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx

@@ -12,7 +12,6 @@ import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { circuitNumDisplaySelector } from '@/store/settingAtom'
 import { useContext, useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { normalizeDigits } from '@/util/input-utils'
 
 export default function PassivityCircuitAllocation(props) {
   const {
@@ -581,20 +580,7 @@ export default function PassivityCircuitAllocation(props) {
                   value={circuitNumber}
                   min={1}
                   max={99}
-                  onChange={(e) => {
-                    const v = e.target.value
-                    if (v === '') {
-                      setCircuitNumber('')
-                      return
-                    }
-                    const n = Number(normalizeDigits(v))
-                    if (Number.isNaN(n)) {
-                      setCircuitNumber('')
-                    } else {
-                      const clamped = Math.max(1, Math.min(99, n))
-                      setCircuitNumber(clamped)
-                    }
-                  }}
+                  onChange={(e) => setCircuitNumber(e.target.value)}
                 />
               </div>
               <button className="btn-frame roof" onClick={() => handleCircuitNumberFix()}>

src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx

@@ -10,7 +10,6 @@ import { defaultSlope } from '@/store/commonAtom'
 import { re } from 'mathjs'
 import { basicSettingState } from '@/store/settingAtom'
 import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
-import { normalizeDigits } from '@/util/input-utils'
 
 export default function DimensionLineSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -145,13 +144,8 @@ export default function DimensionLineSetting(props) {
                     defaultValue={''}
                     value={changeLength}
                     onChange={(e) => {
-                      const v = e.target.value
-                      if (v === '') {
-                        setChangeLength('')
-                        return
-                      }
-                      const n = Number(normalizeDigits(v))
-                      setChangeLength(Number.isNaN(n) ? '' : n)
+                      console.log(e.target)
+                      setChangeLength(e.target.value)
                     }}
                   />
                 </div>

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

@@ -3,7 +3,6 @@ import Image from 'next/image'
 import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
 
 export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
   const { getMessage } = useMessage()
@@ -21,17 +20,7 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             {getMessage('slope')}
           </span>
           <div className="input-grid mr5" style={{ width: '100px' }}>
-            <input
-              type="text"
-              className="input-origin block"
-              defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8}
-              ref={pitchRef}
-              onChange={(e) => {
-                const v = normalizeDecimalLimit(e.target.value, 2)
-                e.target.value = v
-                if (pitchRef?.current) pitchRef.current.value = v
-              }}
-            />
+            <input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
           </div>
           <span className="thin">{pitchText}</span>
         </div>
@@ -40,17 +29,7 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             {getMessage('offset')}
           </span>
           <div className="input-grid mr5" style={{ width: '100px' }}>
-            <input
-              type="text"
-              className="input-origin block"
-              defaultValue={500}
-              ref={offsetRef}
-              onChange={(e) => {
-                const v = normalizeDigits(e.target.value)
-                e.target.value = v
-                if (offsetRef?.current) offsetRef.current.value = v
-              }}
-            />
+            <input type="text" className="input-origin block" defaultValue={500} ref={offsetRef} />
           </div>
           <span className="thin">mm</span>
         </div>
@@ -66,9 +45,7 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <div style={{ width: 30, height: 30, position: 'relative' }}>
-                  <Image src="/static/images/canvas/eaves_icon01.svg" alt="react" fill style={{ objectFit: 'contain' }} />
-                </div>
+                <Image src="/static/images/canvas/eaves_icon01.svg" alt="react" width={30} height={30} />
               </div>
             </div>
           </div>
@@ -81,9 +58,7 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <div style={{ width: 30, height: 30, position: 'relative' }}>
-                  <Image src="/static/images/canvas/eaves_icon02.svg" alt="react" fill style={{ objectFit: 'contain' }} />
-                </div>
+                <Image src="/static/images/canvas/eaves_icon02.svg" alt="react" width={30} height={30} />
               </div>
             </div>
           </div>
@@ -91,27 +66,14 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             <div className="eaves-keraba-th">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input
-                    type="text"
-                    className="input-origin block"
-                    defaultValue={500}
-                    ref={widthRef}
-                    readOnly={type === '1'}
-                    onChange={(e) => {
-                      const v = normalizeDigits(e.target.value)
-                      e.target.value = v
-                      if (widthRef?.current) widthRef.current.value = v
-                    }}
-                  />
+                  <input type="number" min={0} className="input-origin block" defaultValue={500} ref={widthRef} readOnly={type === '1'} />
                 </div>
                 <span className="thin">mm</span>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <div style={{ width: 30, height: 30, position: 'relative' }}>
-                  <Image src="/static/images/canvas/eaves_icon03.svg" alt="react" fill style={{ objectFit: 'contain' }} />
-                </div>
+                <Image src="/static/images/canvas/eaves_icon03.svg" alt="react" width={30} height={30} />
               </div>
             </div>
           </div>

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

@@ -37,9 +37,7 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <div style={{ width: 30, height: 30, position: 'relative' }}>
-                  <Image src="/static/images/canvas/eaves_icon04.svg" alt="react" fill style={{ objectFit: 'contain' }} />
-                </div>
+                <Image src="/static/images/canvas/eaves_icon04.svg" alt="react" width={30} height={30} />
               </div>
             </div>
           </div>
@@ -52,9 +50,7 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <div style={{ width: 30, height: 30, position: 'relative' }}>
-                  <Image src="/static/images/canvas/eaves_icon09.svg" alt="react" fill style={{ objectFit: 'contain' }} />
-                </div>
+                <Image src="/static/images/canvas/eaves_icon09.svg" alt="react" width={30} height={30} />
               </div>
             </div>
           </div>
@@ -78,9 +74,7 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <div style={{ width: 30, height: 30, position: 'relative' }}>
-                  <Image src="/static/images/canvas/eaves_icon05.svg" alt="react" fill style={{ objectFit: 'contain' }} />
-                </div>
+                <Image src="/static/images/canvas/eaves_icon05.svg" alt="react" width={30} height={30} />
               </div>
             </div>
           </div>
@@ -98,9 +92,7 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <div style={{ width: 30, height: 30, position: 'relative' }}>
-                  <Image src="/static/images/canvas/eaves_icon10.svg" alt="react" fill style={{ objectFit: 'contain' }} />
-                </div>
+                <Image src="/static/images/canvas/eaves_icon10.svg" alt="react" width={30} height={30} />
               </div>
             </div>
           </div>

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

@@ -23,9 +23,7 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <div style={{ width: 30, height: 30, position: 'relative' }}>
-                  <Image src="/static/images/canvas/eaves_icon06.svg" alt="react" fill style={{ objectFit: 'contain' }} />
-                </div>
+                <Image src="/static/images/canvas/eaves_icon06.svg" alt="react" width={30} height={30} />
               </div>
             </div>
           </div>
@@ -38,9 +36,7 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <div style={{ width: 30, height: 30, position: 'relative' }}>
-                  <Image src="/static/images/canvas/eaves_icon07.svg" alt="react" fill style={{ objectFit: 'contain' }} />
-                </div>
+                <Image src="/static/images/canvas/eaves_icon07.svg" alt="react" width={30} height={30} />
               </div>
             </div>
           </div>
@@ -58,9 +54,7 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <div style={{ width: 30, height: 30, position: 'relative' }}>
-                  <Image src="/static/images/canvas/eaves_icon08.svg" alt="react" fill style={{ objectFit: 'contain' }} />
-                </div>
+                <Image src="/static/images/canvas/eaves_icon08.svg" alt="react" width={30} height={30} />
               </div>
             </div>
           </div>

src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx

@@ -8,7 +8,6 @@ import { usePopup } from '@/hooks/usePopup'
 import { canvasState } from '@/store/canvasAtom'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
-import { useRoofFn } from '@/hooks/common/useRoofFn'
 
 const FLOW_DIRECTION_TYPE = {
   EIGHT_AZIMUTH: 'eightAzimuth',
@@ -20,7 +19,6 @@ export default function FlowDirectionSetting(props) {
   const { id, pos = contextPopupPosition, target } = props
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
-  const { setSurfaceShapePattern } = useRoofFn()
 
   const { changeSurfaceLineType } = useSurfaceShapeBatch({})
 
@@ -34,40 +32,15 @@ export default function FlowDirectionSetting(props) {
   const [flowDirection, setFlowDirection] = useState(target.direction)
   const { closePopup } = usePopup()
 
-  useEffect(() => {
-    let newCompassDeg = 0
-    if ([-15, 0, 15].includes(compasDeg)) {
-      newCompassDeg = 0
-    } else if ([30, 45, 60].includes(compasDeg)) {
-      newCompassDeg = 45
-    } else if ([75, 90, 105].includes(compasDeg)) {
-      newCompassDeg = 90
-    } else if ([120, 135, 150].includes(compasDeg)) {
-      newCompassDeg = 135
-    } else if ([165, 180, -165].includes(compasDeg)) {
-      newCompassDeg = 180
-    } else if ([-120, -135, -150].includes(compasDeg)) {
-      newCompassDeg = -135
-    } else if ([-105, -90, -75].includes(compasDeg)) {
-      newCompassDeg = -90
-    } else if ([-60, -45, -30].includes(compasDeg)) {
-      newCompassDeg = -45
-    } else {
-      newCompassDeg = ''
-    }
-    const newOrientation = orientations.find((item) => item.value === newCompassDeg)
-    setSelectedOrientation(newOrientation)
-  }, [compasDeg])
-
   const orientations = [
-    { name: `${getMessage('commons.none')}`, value: '' },
-    { name: `${getMessage('commons.south')}`, value: 0 },
-    { name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 45 },
-    { name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: -45 },
-    { name: `${getMessage('commons.east')}`, value: 90 },
-    { name: `${getMessage('commons.west')}`, value: -90 },
-    { name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 135 },
-    { name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: -135 },
+    { name: `${getMessage('commons.none')}`, value: 0 },
+    { name: `${getMessage('commons.south')}`, value: 360 },
+    { name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 315 },
+    { name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: 45 },
+    { name: `${getMessage('commons.east')}`, value: 270 },
+    { name: `${getMessage('commons.west')}`, value: 90 },
+    { name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 225 },
+    { name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: 135 },
     { name: `${getMessage('commons.north')}`, value: 180 },
   ]
 
@@ -81,7 +54,6 @@ export default function FlowDirectionSetting(props) {
       surfaceCompass: orientation,
       surfaceCompassType: type,
     })
-    setSurfaceShapePattern(roof, null, null, roof.roofMaterial)
     drawDirectionArrow(roof)
     canvas?.renderAll()
     changeSurfaceLineType(roof)
@@ -137,11 +109,6 @@ export default function FlowDirectionSetting(props) {
                   value={selectedOrientation}
                   options={orientations}
                   onChange={(e) => {
-                    if (e.value === '') {
-                      setCompasDeg(null)
-                      setSelectedOrientation(e)
-                      return
-                    }
                     setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
                     setSelectedOrientation(e)
                     setCompasDeg(e.value)
@@ -170,32 +137,31 @@ export default function FlowDirectionSetting(props) {
             <div className="draw-flow-wrap">
               <div className="compas-box">
                 <div className="compas-box-inner">
-                  {Array.from({ length: 180 / 15 }).map((dot, index) => (
+                  {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
                     <div
                       key={index}
-                      className={`circle ${compasDeg === -15 * index + 180 ? 'act' : ''}`}
+                      className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
                       onClick={() => {
-                        if (index === 0) {
-                          setCompasDeg(180)
-                          return
-                        }
                         setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
-                        setCompasDeg(-15 * index + 180)
+                        setCompasDeg(15 * (12 + index))
                       }}
                     ></div>
                   ))}
-                  {Array.from({ length: 180 / 15 }).map((dot, index) => (
+                  {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
                     <div
                       key={index}
-                      className={`circle ${compasDeg === -1 * 15 * index ? 'act' : ''}`}
+                      className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
                       onClick={() => {
                         setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
-                        setCompasDeg(15 * index * -1)
+                        setCompasDeg(15 * (index + 1))
                       }}
                     ></div>
                   ))}
                   <div className="compas">
-                    <div className="compas-arr" style={{ transform: `${`rotate(${-1 * compasDeg}deg)`}` }}></div>
+                    <div
+                      className="compas-arr"
+                      style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
+                    ></div>
                   </div>
                 </div>
               </div>

src/components/floor-plan/modal/grid/DotLineGrid.jsx

@@ -4,10 +4,10 @@ import { useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { canvasState } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
+import { onlyNumberInputChange } from '@/util/input-utils'
 import { usePopup } from '@/hooks/usePopup'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useSwal } from '@/hooks/useSwal'
-import { normalizeDigits } from '@/util/input-utils'
 
 const TYPE = {
   DOT: 'DOT',
@@ -218,7 +218,7 @@ export default function DotLineGrid(props) {
                   className="input-origin"
                   name={`horizontalInterval`}
                   value={copyCurrentSetting.INTERVAL.horizontalInterval}
-                  onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}
+                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
                 />
               </div>
               <span>mm</span>
@@ -231,7 +231,7 @@ export default function DotLineGrid(props) {
                   className="input-origin"
                   name={`verticalInterval`}
                   value={copyCurrentSetting.INTERVAL.verticalInterval}
-                  onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}
+                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
                 />
               </div>
               <span>mm</span>
@@ -258,7 +258,7 @@ export default function DotLineGrid(props) {
                   className="input-origin"
                   name={`ratioInterval`}
                   value={copyCurrentSetting.INTERVAL.ratioInterval}
-                  onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}
+                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
                 />
               </div>
               <span>mm</span>

src/components/floor-plan/modal/grid/GridCopy.jsx

@@ -5,9 +5,9 @@ import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useState } from 'react'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
+import { useGrid } from '@/hooks/common/useGrid'
 import { gridColorState } from '@/store/gridAtom'
 import { gridDisplaySelector } from '@/store/settingAtom'
-
 const GRID_PADDING = 5
 export default function GridCopy(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -25,10 +25,10 @@ export default function GridCopy(props) {
   }
 
   const copy = (object, length) => {
-    const lineStartX = object.direction === 'vertical' ? object.x1 + length : object.x1
-    const lineEndX = object.direction === 'vertical' ? object.x2 + length : object.x2
-    const lineStartY = object.direction === 'vertical' ? object.y1 : object.y1 + length
-    const lineEndY = object.direction === 'vertical' ? object.y2 : object.y1 + length
+    const lineStartX = object.direction === 'vertical' ? object.x1 + length : 0
+    const lineEndX = object.direction === 'vertical' ? object.x2 + length : canvas.width
+    const lineStartY = object.direction === 'vertical' ? 0 : object.y1 + length
+    const lineEndY = object.direction === 'vertical' ? canvas.width : object.y1 + length
 
     const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
       stroke: gridColor,

src/components/floor-plan/modal/grid/GridMove.jsx

@@ -3,10 +3,11 @@ import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
+import { useCanvas } from '@/hooks/useCanvas'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import { useSwal } from '@/hooks/useSwal'
-import { normalizeDigits } from '@/util/input-utils'
+import { set } from 'react-hook-form'
 
 export default function GridMove(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -51,15 +52,15 @@ export default function GridMove(props) {
         .forEach((grid) => {
           move(
             grid,
-            arrow2 === '←' ? (Number(normalizeDigits(horizonSize)) * -1) / 10 : Number(normalizeDigits(horizonSize)) / 10,
-            arrow1 === '↑' ? (Number(normalizeDigits(verticalSize)) * -1) / 10 : Number(normalizeDigits(verticalSize)) / 10,
+            arrow2 === '←' ? (Number(horizonSize) * -1) / 10 : Number(horizonSize) / 10,
+            arrow1 === '↑' ? (Number(verticalSize) * -1) / 10 : Number(verticalSize) / 10,
           )
         })
     } else {
       move(
         currentObject,
-        arrow2 === '←' ? (Number(normalizeDigits(horizonSize)) * -1) / 10 : Number(normalizeDigits(horizonSize)) / 10,
-        arrow1 === '↑' ? (Number(normalizeDigits(verticalSize)) * -1) / 10 : Number(normalizeDigits(verticalSize)) / 10,
+        arrow2 === '←' ? (Number(horizonSize) * -1) / 10 : Number(horizonSize) / 10,
+        arrow1 === '↑' ? (Number(verticalSize) * -1) / 10 : Number(verticalSize) / 10,
       )
     }
     canvas.renderAll()
@@ -69,10 +70,10 @@ export default function GridMove(props) {
   const move = (object, x, y) => {
     object.set({
       ...object,
-      x1: object.direction === 'vertical' ? object.x1 + x : object.x1,
-      x2: object.direction === 'vertical' ? object.x1 + x : object.x2,
-      y1: object.direction === 'vertical' ? object.y1 : object.y1 + y,
-      y2: object.direction === 'vertical' ? object.y2 : object.y1 + y,
+      x1: object.direction === 'vertical' ? object.x1 + x : 0,
+      x2: object.direction === 'vertical' ? object.x1 + x : canvas.width,
+      y1: object.direction === 'vertical' ? 0 : object.y1 + y,
+      y2: object.direction === 'vertical' ? canvas.height : object.y1 + y,
     })
   }
 
@@ -98,7 +99,7 @@ export default function GridMove(props) {
                     type="text"
                     className="input-origin"
                     value={verticalSize}
-                    onChange={(e) => setVerticalSize(normalizeDigits(e.target.value))}
+                    onChange={(e) => setVerticalSize(e.target.value)}
                     readOnly={!isAll && currentObject?.direction === 'vertical'}
                   />
                 </div>
@@ -126,7 +127,7 @@ export default function GridMove(props) {
                     type="text"
                     className="input-origin"
                     value={horizonSize}
-                    onChange={(e) => setHorizonSize(normalizeDigits(e.target.value))}
+                    onChange={(e) => setHorizonSize(e.target.value)}
                     readOnly={!isAll && currentObject?.direction === 'horizontal'}
                   />
                 </div>

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

@@ -1,6 +1,6 @@
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
 export default function Angle({ props }) {
   const { getMessage } = useMessage()
@@ -20,7 +20,7 @@ export default function Angle({ props }) {
                   value={angle1}
                   ref={angle1Ref}
                   onFocus={(e) => (angle1Ref.current.value = '')}
-                  onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}
+                  onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
                   placeholder="45"
                 />
               </div>
@@ -40,7 +40,7 @@ export default function Angle({ props }) {
                   value={length1}
                   ref={length1Ref}
                   onFocus={(e) => (length1Ref.current.value = '')}
-                  onChange={(e) => setLength1(normalizeDigits(e.target.value))}
+                  onChange={(e) => onlyNumberInputChange(e, setLength1)}
                   placeholder="3000"
                 />
               </div>

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

@@ -1,5 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange } from '@/util/input-utils'
 
 export default function Diagonal({ props }) {
   const { getMessage } = useMessage()
@@ -36,7 +36,7 @@ export default function Diagonal({ props }) {
                 value={outerLineDiagonalLength}
                 ref={outerLineDiagonalLengthRef}
                 onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}
-                onChange={(e) => setOuterLineDiagonalLength(normalizeDigits(e.target.value))}
+                onChange={(e) => onlyNumberInputChange(e, setOuterLineDiagonalLength)}
                 placeholder="3000"
               />
             </div>
@@ -58,7 +58,7 @@ export default function Diagonal({ props }) {
                 value={length1}
                 ref={length1Ref}
                 onFocus={(e) => (length1Ref.current.value = '')}
-                onChange={(e) => setLength1(normalizeDigits(e.target.value))}
+                onChange={(e) => onlyNumberInputChange(e, setLength1)}
                 placeholder="3000"
               />
             </div>
@@ -115,7 +115,7 @@ export default function Diagonal({ props }) {
                 className="input-origin block"
                 value={length2}
                 ref={length2Ref}
-                onChange={(e) => setLength2(normalizeDigits(e.target.value))}
+                onChange={(e) => onlyNumberInputChange(e, setLength2)}
                 readOnly={true}
                 placeholder="3000"
               />

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

@@ -1,5 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 import { getDegreeByChon } from '@/util/canvas-util'
 
 export default function DoublePitch({ props }) {
@@ -56,7 +56,7 @@ export default function DoublePitch({ props }) {
                 value={angle1}
                 ref={angle1Ref}
                 onFocus={(e) => (angle1Ref.current.value = '')}
-                onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}
+                onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
                 placeholder="45"
               />
             </div>
@@ -73,7 +73,7 @@ export default function DoublePitch({ props }) {
                 value={length1}
                 ref={length1Ref}
                 onFocus={(e) => (length1Ref.current.value = '')}
-                onChange={(e) => setLength1(normalizeDigits(e.target.value))}
+                onChange={(e) => onlyNumberInputChange(e, setLength1)}
                 placeholder="3000"
               />
             </div>
@@ -132,8 +132,7 @@ export default function DoublePitch({ props }) {
                 ref={angle2Ref}
                 onFocus={(e) => (angle2Ref.current.value = '')}
                 onChange={(e) => {
-                  const v = normalizeDecimalLimit(e.target.value, 2)
-                  setAngle2(v)
+                  onlyNumberWithDotInputChange(e, setAngle2)
                   setLength2(getLength2())
                 }}
                 placeholder="45"
@@ -157,7 +156,7 @@ export default function DoublePitch({ props }) {
                 value={length2}
                 ref={length2Ref}
                 onFocus={(e) => (length2Ref.current.value = '')}
-                onChange={(e) => setLength2(normalizeDigits(e.target.value))}
+                onChange={(e) => onlyNumberInputChange(e, setLength2)}
                 readOnly={true}
                 placeholder="3000"
               />

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

@@ -1,91 +1,30 @@
 'use client'
 
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDigits } from '@/util/input-utils'
-import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
-import { CalculatorInput } from '@/components/common/input/CalcInput'
-import { useEffect, useRef } from 'react'
+import { onlyNumberInputChange } from '@/util/input-utils'
 
 export default function OuterLineWall({ props }) {
   const { getMessage } = useMessage()
 
   const { length1, setLength1, length1Ref, arrow1, setArrow1 } = props
-
-  // 키보드 입력 처리
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      // 계산기 키패드가 보이는지 확인
-      const keypadVisible = document.querySelector('.keypad-container')
-
-      // 계산기 키패드가 보이면 계산기가 처리하도록 함
-      if (keypadVisible) {
-        return
-      }
-
-      // 이미 계산기 input에 포커스가 있으면 계산기가 처리하도록 함
-      if (document.activeElement && document.activeElement.classList.contains('calculator-input')) {
-        return
-      }
-
-      // 엔터키는 계산기가 숨겨진 상태에서만 페이지가 처리
-      if (e.key === 'Enter') {
-        // 엔터키를 페이지 레벨로 전달 (useOuterLineWall.js에서 처리)
-        return
-      }
-
-      // 숫자 키가 입력되면 계산기 input에 포커스만 주기
-      if (/^[0-9+\-*\/=.]$/.test(e.key) || e.key === 'Backspace' || e.key === 'Delete') {
-        const calcInput = document.querySelector('.calculator-input')
-        if (calcInput) {
-          // 포커스만 주고 이벤트는 preventDefault 하지 않음
-          calcInput.focus()
-          calcInput.click()
-        }
-      }
-    }
-
-    // capture: true로 설정하여 다른 핸들러보다 먼저 실행
-    document.addEventListener('keydown', handleKeyDown, { capture: true })
-    return () => document.removeEventListener('keydown', handleKeyDown, { capture: true })
-  }, [])
   return (
     <div className="outline-wrap">
       <div className="outline-inner">
         <div className="outline-form">
           <span className="mr10">{getMessage('straight.line')}</span>
           <div className="input-grid" style={{ width: '63px' }}>
-            {/*<input*/}
-            {/*  type="text"*/}
-            {/*  className="input-origin block"*/}
-            {/*  value={length1}*/}
-            {/*  ref={length1Ref}*/}
-            {/*  onFocus={(e) => {*/}
-            {/*    if (length1Ref.current.value === '0') {*/}
-            {/*      length1Ref.current.value = ''*/}
-            {/*    }*/}
-            {/*  }}*/}
-            {/*  onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
-            {/*  placeholder="3000"*/}
-            {/*/>*/}
-
-            <CalculatorInput
-              id="length1-calc"
-              label=""
-              className="input-origin block calculator-input"
-              readOnly={false}
+            <input
+              type="text"
+              className="input-origin block"
               value={length1}
-              onChange={(value) => setLength1(value)}
-              options={{
-                allowNegative: false,
-                allowDecimal: false //(index !== 0),
-                   }}
-              placeholder={'3000'}
               ref={length1Ref}
-              onFocus={() => {
-                if (length1Ref.current && length1Ref.current.value === '0') {
+              onFocus={(e) => {
+                if (length1Ref.current.value === '0') {
                   length1Ref.current.value = ''
                 }
               }}
+              onChange={(e) => onlyNumberInputChange(e, setLength1)}
+              placeholder="3000"
             />
           </div>
           <button className="reset-btn" onClick={() => setLength1(0)}></button>

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

@@ -1,21 +1,9 @@
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange } from '@/util/input-utils'
 
 export default function RightAngle({ props }) {
   const { getMessage } = useMessage()
   const { length1, setLength1, length1Ref, length2, setLength2, length2Ref, arrow1, setArrow1, arrow2, setArrow2 } = props
-
-  const handleClickArrow = (arrow) => {
-    const arrowType = arrow === '↑' ? 'ArrowUp' : arrow === '↓' ? 'ArrowDown' : arrow === '←' ? 'ArrowLeft' : arrow === '→' ? 'ArrowRight' : ''
-    setArrow2(arrow)
-    const originLeng2Val = length2Ref.current.value
-    if (originLeng2Val === '') {
-      length2Ref.current.value = '0'
-    }
-    length2Ref.current.focus()
-    length2Ref.current.value = originLeng2Val
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: arrowType }))
-  }
   return (
     <div className="outline-wrap">
       <div className="outline-inner">
@@ -28,7 +16,7 @@ export default function RightAngle({ props }) {
               value={length1}
               ref={length1Ref}
               onFocus={(e) => (length1Ref.current.value = '')}
-              onChange={(e) => setLength1(normalizeDigits(e.target.value))}
+              onChange={(e) => onlyNumberInputChange(e, setLength1)}
               placeholder="3000"
             />
           </div>
@@ -84,7 +72,7 @@ export default function RightAngle({ props }) {
               value={length2}
               ref={length2Ref}
               onFocus={(e) => (length2Ref.current.value = '')}
-              onChange={(e) => setLength2(normalizeDigits(e.target.value))}
+              onChange={(e) => onlyNumberInputChange(e, setLength2)}
               placeholder="3000"
             />
           </div>
@@ -101,25 +89,29 @@ export default function RightAngle({ props }) {
             <button
               className={`direction up ${arrow2 === '↑' ? 'act' : ''}`}
               onClick={() => {
-                handleClickArrow('↑')
+                setArrow2('↑')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
               }}
             ></button>
             <button
               className={`direction down ${arrow2 === '↓' ? 'act' : ''}`}
               onClick={() => {
-                handleClickArrow('↓')
+                setArrow2('↓')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
               }}
             ></button>
             <button
               className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
               onClick={() => {
-                handleClickArrow('←')
+                setArrow2('←')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
               }}
             ></button>
             <button
               className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
               onClick={() => {
-                handleClickArrow('→')
+                setArrow2('→')
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
               }}
             ></button>
           </div>

src/components/floor-plan/modal/module/PanelEdit.jsx

@@ -4,7 +4,10 @@ import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
+import { polygonToTurfPolygon } from '@/util/canvas-util'
+import { deepCopyArray } from '@/util/common-utils'
 import { canvasState } from '@/store/canvasAtom'
+import * as turf from '@turf/turf'
 import { POLYGON_TYPE } from '@/common/common'
 import { useModule } from '@/hooks/module/useModule'
 import { useSwal } from '@/hooks/useSwal'
@@ -38,15 +41,7 @@ export default function PanelEdit(props) {
 
     //팝업 닫을때 선택 해제
     return () => {
-      const modules = canvas.getObjects().filter((obj) => obj.name === 'module')
-      modules.forEach((obj) => {
-        obj.set({
-          stroke: 'black',
-          strokeWidth: 0.3,
-        })
-      })
       canvas?.discardActiveObject() //선택해제
-      canvas.renderAll()
     }
   }, [])
 

src/components/floor-plan/modal/movement/type/FlowLine.jsx

@@ -12,12 +12,11 @@ export default function FlowLine({ FLOW_LINE_REF }) {
   const { getMessage } = useMessage()
   const [type, setType] = useState(FLOW_LINE_TYPE.DOWN_LEFT)
   const [filledInput, setFilledInput] = useState('')
-  const [pointerInput, setPointerInput] = useState('100')
   const currentObject = useRecoilValue(currentObjectState)
   const handleFocus = () => {
     if (currentObject === null) {
-      setPointerInput('')
-      setFilledInput('')
+      FLOW_LINE_REF.POINTER_INPUT_REF.current.value = ''
+      FLOW_LINE_REF.FILLED_INPUT_REF.current.value = ''
       FLOW_LINE_REF.FILLED_INPUT_REF.current.blur()
     }
   }
@@ -36,7 +35,7 @@ export default function FlowLine({ FLOW_LINE_REF }) {
         <div className="outline-form">
           <span>{getMessage('modal.movement.flow.line.position')}</span>
           <div className="input-grid mr5">
-            <input type="text" className="input-origin block" value={pointerInput} readOnly={true} ref={FLOW_LINE_REF.POINTER_INPUT_REF} />
+            <input type="text" className="input-origin block" defaultValue={100} readOnly={true} ref={FLOW_LINE_REF.POINTER_INPUT_REF} />
           </div>
         </div>
         <div className="moving-tab-content">
@@ -72,6 +71,7 @@ export default function FlowLine({ FLOW_LINE_REF }) {
               <input
                 type="text"
                 className="input-origin block"
+                defaultValue={100}
                 ref={FLOW_LINE_REF.FILLED_INPUT_REF}
                 value={filledInput}
                 onFocus={handleFocus}

src/components/floor-plan/modal/movement/type/Updown.jsx

@@ -2,7 +2,6 @@ import { useMessage } from '@/hooks/useMessage'
 import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { currentObjectState } from '@/store/canvasAtom'
-import { normalizeDigits } from '@/util/input-utils'
 
 const UP_DOWN_TYPE = {
   UP: 'up',
@@ -12,7 +11,7 @@ const UP_DOWN_TYPE = {
 export default function Updown({ UP_DOWN_REF }) {
   const { getMessage } = useMessage()
   const [type, setType] = useState(UP_DOWN_TYPE.UP)
-  const [filledInput, setFilledInput] = useState('100')
+  const [filledInput, setFilledInput] = useState('')
   const currentObject = useRecoilValue(currentObjectState)
   const handleFocus = () => {
     if (currentObject === null) {
@@ -23,8 +22,7 @@ export default function Updown({ UP_DOWN_REF }) {
   }
   const handleInput = (e) => {
     const value = e.target.value.replace(/^0+/, '')
-    //setFilledInput(value.replace(/[^0-9]/g, ''))
-    setFilledInput(normalizeDigits(value))
+    setFilledInput(value.replace(/[^0-9]/g, ''))
   }
 
   return (
@@ -71,6 +69,7 @@ export default function Updown({ UP_DOWN_REF }) {
               <input
                 type="text"
                 className="input-origin block"
+                defaultValue={100}
                 ref={UP_DOWN_REF.FILLED_INPUT_REF}
                 value={filledInput}
                 onFocus={handleFocus}

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

@@ -13,7 +13,6 @@ import Shadow from '@/components/floor-plan/modal/object/type/Shadow'
 import TriangleDormer from '@/components/floor-plan/modal/object/type/TriangleDormer'
 import PentagonDormer from '@/components/floor-plan/modal/object/type/PentagonDormer'
 import { usePopup } from '@/hooks/usePopup'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
 
 export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
@@ -62,20 +61,20 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
     if (buttonAct === 1 || buttonAct === 2) {
       applyOpeningAndShadow(objectPlacement, buttonAct)
     } else {
-      const height = dormerPlacement.heightRef.current !== null ? Number(normalizeDigits(dormerPlacement.heightRef.current.value)) / 10 : 0
-      const width = dormerPlacement.widthRef.current !== null ? Number(normalizeDigits(dormerPlacement.widthRef.current.value)) / 10 : 0 //triangle일때는 없음
-      const pitch = dormerPlacement.pitchRef.current !== null ? Number(normalizeDecimalLimit(dormerPlacement.pitchRef.current.value, 2)) : 0
+      const height = dormerPlacement.heightRef.current !== null ? dormerPlacement.heightRef.current.value / 10 : 0
+      const width = dormerPlacement.widthRef.current !== null ? dormerPlacement.widthRef.current.value / 10 : 0 //triangle일때는 없음
+      const pitch = dormerPlacement.pitchRef.current !== null ? Number(dormerPlacement.pitchRef.current.value) : 0
       const offsetRef =
         dormerPlacement.offsetRef.current !== null
           ? dormerPlacement.offsetRef.current.value === ''
             ? 0
-            : Number(normalizeDigits(dormerPlacement.offsetRef.current.value)) / 10
+            : parseInt(dormerPlacement.offsetRef.current.value) / 10
           : 0
       const offsetWidthRef =
         dormerPlacement.offsetWidthRef.current !== null
           ? dormerPlacement.offsetWidthRef.current.value === ''
             ? 0
-            : Number(normalizeDigits(dormerPlacement.offsetWidthRef.current.value)) / 10
+            : parseInt(dormerPlacement.offsetWidthRef.current.value) / 10
           : 0
       const directionRef = dormerPlacement.directionRef.current
 

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

@@ -12,7 +12,7 @@ import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
 
 export default function SizeSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
-  const [settingTarget, setSettingTarget] = useState(props.side || 1)
+  const [settingTarget, setSettingTarget] = useState(1)
   const { id, pos = contextPopupPosition, target } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
@@ -47,11 +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={(target?.originWidth * 10).toFixed(0)} readOnly={true} />
+                <input type="text" className="input-origin mr5" value={target?.width.toFixed(0) * 10} 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?.width.toFixed(0) * 10} ref={widthRef} />
                 <span className="normal-font">mm</span>
               </div>
             </div>
@@ -60,11 +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={(target?.originHeight * 10).toFixed(0)} readOnly={true} />
+                  <input type="text" className="input-origin mr5" value={target?.height.toFixed(0) * 10} 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?.height.toFixed(0) * 10} ref={heightRef} />
                   <span className="normal-font">mm</span>
                 </div>
               </div>

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -14,14 +14,12 @@ import { useCommonCode } from '@/hooks/common/useCommonCode'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { globalLocaleStore } from '@/store/localeAtom'
 
+import { onlyNumberInputChange } from '@/util/input-utils'
 import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
 import { usePolygon } from '@/hooks/usePolygon'
 import { canvasState } from '@/store/canvasAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { usePlan } from '@/hooks/usePlan'
-import { normalizeDecimal, normalizeDigits } from '@/util/input-utils'
-import { logger } from '@/util/logger'
-import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 /**
  * 지붕 레이아웃
@@ -184,7 +182,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
    */
   const changeInput = (value, e) => {
     const { name } = e.target
-    setCurrentRoof({ ...currentRoof, [name]: Number(normalizeDecimal(value)) })
+    setCurrentRoof({ ...currentRoof, [name]: Number(value) })
   }
 
   /**
@@ -209,7 +207,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
    * 배치면초기설정 저장 버튼 클릭
    */
   const handleSaveBtn = async () => {
-
     const roofInfo = {
       ...currentRoof,
       planNo: basicSetting.planNo,
@@ -217,7 +214,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
       width: roofRef.width.current?.value,
       length: roofRef.length.current?.value,
       hajebichi: roofRef.hajebichi.current?.value,
-      //raft: roofRef.rafter.current?.value,
+      raft: roofRef.rafter.current?.value,
       selected: true,
       layout: currentRoof.layout,
       index: 0,
@@ -227,7 +224,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
     newAddedRoofs[0] = { ...roofInfo }
     setAddedRoofs(newAddedRoofs)
 
-    logger.debug('save Info', {
+    console.log('save Info', {
       ...basicSetting,
       selectedRoofMaterial: {
         ...newAddedRoofs[0],
@@ -327,51 +324,16 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                             </div>
                           </span>
                           <div className="input-grid mr5">
-                            {/* <input
-                              type="text"
+                            <input
+                              type="number"
                               className="input-origin block"
                               readOnly={currentRoof?.roofAngleSet !== item.value}
-                              value={index === 0 ? currentRoof?.pitch || '0' : currentRoof?.angle || '0'}
-                              onChange={(e) => {
-                                const v = normalizeDecimal(e.target.value)
-                                e.target.value = v
-                                if (index === 0) {
-                                  const num = v === '' ? '' : Number(v)
-                                  setCurrentRoof({ ...currentRoof, pitch: num === '' ? '' : num, angle: num === '' ? '' : getDegreeByChon(num) })
-                                } else {
-                                  const num = v === '' ? '' : Number(v)
-                                  setCurrentRoof({ ...currentRoof, pitch: num === '' ? '' : getChonByDegree(num), angle: num === '' ? '' : num })
-                                }
-                              }}
-                            /> */}
-                            <CalculatorInput
-                              id=""
-                              name=""
-                              label=""
-                              className="input-origin block"
-                              readOnly={currentRoof?.roofAngleSet !== item.value}
-                              value={index === 0 ? currentRoof?.pitch || '0' : currentRoof?.angle || '0'}
-                              onChange={(value) => {
-                                if (index === 0) {
-                                  const num = value === '' ? '' : Number(value)
-                                  setCurrentRoof(prev => ({
-                                    ...prev,
-                                    pitch: num === '' ? '' : num,
-                                    angle: num === '' ? '' : getDegreeByChon(num),
-                                  }))
-                                } else {
-                                  const num = value === '' ? '' : Number(value)
-                                  setCurrentRoof( prev => ({
-                                    ...prev,
-                                    pitch: num === '' ? '' : getChonByDegree(num),
-                                    angle: num === '' ? '' : num,
-                                  }))
-                                }
-                              }}
-                              options={{
-                                allowNegative: false,
-                                allowDecimal: true //(index !== 0),
-                              }}
+                              value={index === 0 ? currentRoof?.pitch : currentRoof?.angle}
+                              onChange={(e) =>
+                                index === 0
+                                  ? setCurrentRoof({ ...currentRoof, pitch: e.target.value, angle: getDegreeByChon(e.target.value) })
+                                  : setCurrentRoof({ ...currentRoof, pitch: getChonByDegree(e.target.value), angle: e.target.value })
+                              }
                             />
                           </div>
                           <span className="thin">{index === 0 ? '寸' : '度'}</span>
@@ -413,33 +375,15 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                       <div className="flex-ment">
                         <span>W</span>
                         <div className="input-grid" style={{ width: '84px' }}>
-                          {/*<input*/}
-                          {/*  type="text"*/}
-                          {/*  className="input-origin block"*/}
-                          {/*  name={`width`}*/}
-                          {/*  ref={roofRef.width}*/}
-                          {/*  value={parseInt(currentRoof?.width)}*/}
-                          {/*  onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}*/}
-                          {/*  readOnly={currentRoof?.widAuth === 'R'}*/}
-                          {/*  disabled={currentRoof?.roofSizeSet === '3'}*/}
-                          {/*/>*/}
-
-                          <CalculatorInput
-                            id=""
-                            name={'width'}
-                            label=""
+                          <input
+                            type="text"
                             className="input-origin block"
+                            name={`width`}
                             ref={roofRef.width}
-                            value={currentRoof?.width||0}
-                            onChange={(value) => {
-                              setCurrentRoof({ ...currentRoof, value })
-                            }}
+                            value={parseInt(currentRoof?.width)}
+                            onChange={(e) => onlyNumberInputChange(e, changeInput)}
                             readOnly={currentRoof?.widAuth === 'R'}
                             disabled={currentRoof?.roofSizeSet === '3'}
-                            options={{
-                              allowNegative: false,
-                              allowDecimal: false //(index !== 0),
-                            }}
                           />
                         </div>
                       </div>
@@ -448,33 +392,15 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                       <div className="flex-ment">
                         <span>L</span>
                         <div className="input-grid" style={{ width: '84px' }}>
-                          {/*<input*/}
-                          {/*  type="text"*/}
-                          {/*  className="input-origin block"*/}
-                          {/*  name={`length`}*/}
-                          {/*  ref={roofRef.length}*/}
-                          {/*  value={parseInt(currentRoof?.length)}*/}
-                          {/*  onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}*/}
-                          {/*  readOnly={currentRoof?.lenAuth === 'R'}*/}
-                          {/*  disabled={currentRoof?.roofSizeSet === '3'}*/}
-                          {/*/>*/}
-
-                          <CalculatorInput
-                            id=""
-                            name={'length'}
-                            label=""
+                          <input
+                            type="text"
                             className="input-origin block"
+                            name={`length`}
                             ref={roofRef.length}
-                            value={currentRoof?.length||0}
-                            onChange={(value) => {
-                              setCurrentRoof({ ...currentRoof, value })
-                            }}
+                            value={parseInt(currentRoof?.length)}
+                            onChange={(e) => onlyNumberInputChange(e, changeInput)}
                             readOnly={currentRoof?.lenAuth === 'R'}
                             disabled={currentRoof?.roofSizeSet === '3'}
-                            options={{
-                              allowNegative: false,
-                              allowDecimal: false //(index !== 0),
-                            }}
                           />
                         </div>
                       </div>
@@ -486,8 +412,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                           <div className="select-wrap" style={{ width: '160px' }}>
                             <QSelectBox
                               options={raftCodes}
-                              title={raftCodes?.find((r) => r.clCode === (currentRoof.raft ?? currentRoof?.raftBaseCd))?.clCodeNm}
-                              value={currentRoof?.raft ?? currentRoof?.raftBaseCd}
+                              title={
+                                raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
+                                  .clCodeNm
+                              }
+                              value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft}
                               onChange={(e) => handleRafterChange(e.clCode)}
                               sourceKey="clCode"
                               targetKey={currentRoof?.raft ? 'raft' : 'raftBaseCd'}
@@ -502,34 +431,16 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                       <div className="flex-ment">
                         <span>{getMessage('hajebichi')}</span>
                         <div className="input-grid" style={{ width: '84px' }}>
-                          {/*<input*/}
-                          {/*  type="text"*/}
-                          {/*  className="input-origin block"*/}
-                          {/*  name={`hajebichi`}*/}
-                          {/*  ref={roofRef.hajebichi}*/}
-                          {/*  value={parseInt(currentRoof?.hajebichi)}*/}
-                          {/*  onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}*/}
-                          {/*  readOnly={currentRoof?.roofPchAuth === 'R'}*/}
-                          {/*  disabled={currentRoof?.roofSizeSet === '3'}*/}
-                          {/*/>*/}
-                          <CalculatorInput
-                            id=""
-                            name={'hajebichi'}
-                            label=""
+                          <input
+                            type="text"
                             className="input-origin block"
+                            name={`hajebichi`}
                             ref={roofRef.hajebichi}
-                            value={currentRoof?.hajebichi||0}
-                            onChange={(value) => {
-                              setCurrentRoof({ ...currentRoof, value })
-                            }}
+                            value={parseInt(currentRoof?.hajebichi)}
+                            onChange={(e) => onlyNumberInputChange(e, changeInput)}
                             readOnly={currentRoof?.roofPchAuth === 'R'}
                             disabled={currentRoof?.roofSizeSet === '3'}
-                            options={{
-                              allowNegative: false,
-                              allowDecimal: false //(index !== 0),
-                            }}
                           />
-
                         </div>
                       </div>
                     )}

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

@@ -7,7 +7,6 @@ import { useEffect, useState } from 'react'
 import { currentObjectState } from '@/store/canvasAtom'
 import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
 import { useSwal } from '@/hooks/useSwal'
-import { normalizeDigits } from '@/util/input-utils'
 
 export default function ActualSizeSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -28,7 +27,7 @@ export default function ActualSizeSetting(props) {
 
   const handleFinish = () => {
     swalFire({
-      text: getMessage("modal.roof.allocation.auxiliary.accept"),
+      text: '완료 하시겠습니까?',
       type: 'confirm',
       confirmFn: () => {
         handleAlloc()
@@ -38,7 +37,7 @@ export default function ActualSizeSetting(props) {
 
   const handleClose = () => {
     swalFire({
-      text: getMessage("modal.roof.allocation.auxiliary.accept"),
+      text: '완료 하시겠습니까?',
       type: 'confirm',
       confirmFn: () => {
         handleAlloc()
@@ -88,7 +87,7 @@ export default function ActualSizeSetting(props) {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5">
-                      <input type="text" className="input-origin block" value={actualSize} onChange={(e) => setActualSize(Number(normalizeDigits(e.target.value)))} />
+                      <input type="text" className="input-origin block" value={actualSize} onChange={(e) => setActualSize(Number(e.target.value))} />
                     </div>
                     <span className="thin">mm</span>
                   </div>

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

@@ -12,7 +12,6 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
 
 export default function ContextRoofAllocationSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -86,7 +85,7 @@ export default function ContextRoofAllocationSetting(props) {
                 return (
                   <div className="grid-option-box" key={index}>
                     <div className="d-check-radio pop no-text">
-                      <input type="radio" name="radio01" checked={!!roof.selected} readOnly={true} />
+                      <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
                       <label
                         htmlFor="ra01"
                         onClick={(e) => {
@@ -152,7 +151,6 @@ export default function ContextRoofAllocationSetting(props) {
                                     defaultValue={roof.width}
                                     readOnly={roof.widAuth === 'R'}
                                     onChange={(e) => {
-                                      e.target.value = normalizeDigits(e.target.value)
                                       handleChangeInput(e, 'width', index)
                                     }}
                                   />
@@ -171,7 +169,6 @@ export default function ContextRoofAllocationSetting(props) {
                                     defaultValue={roof.length}
                                     readOnly={roof.lenAuth === 'R'}
                                     onChange={(e) => {
-                                      e.target.value = normalizeDigits(e.target.value)
                                       handleChangeInput(e, 'length', index)
                                     }}
                                   />
@@ -189,12 +186,9 @@ export default function ContextRoofAllocationSetting(props) {
                               <input
                                 type="text"
                                 className="input-origin block"
-                                value={roof.hajebichi ?? ''}
+                                value={parseInt(roof.hajebichi)}
                                 readOnly={roof.roofPchAuth === 'R'}
-                                onChange={(e) => {
-                                  e.target.value = normalizeDigits(e.target.value)
-                                  handleChangeInput(e, 'hajebichi', index)
-                                }}
+                                onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
                               />
                             </div>
                           </div>
@@ -208,10 +202,11 @@ export default function ContextRoofAllocationSetting(props) {
                               type="text"
                               className="input-origin block"
                               onChange={(e) => {
-                                e.target.value = normalizeDecimalLimit(e.target.value, 2)
+                                // handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
                                 handleChangePitch(e, index)
                               }}
-                              value={currentAngleType === 'slope' ? (roof.pitch ?? '') : (roof.angle ?? '')}
+                              value={currentAngleType === 'slope' ? roof.pitch : roof.angle}
+                              defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
                             />
                           </div>
                           <span className="absol">{pitchText}</span>

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

@@ -13,7 +13,7 @@ import { globalLocaleStore } from '@/store/localeAtom'
 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 { onlyNumberWithDotInputChange } from '@/util/input-utils'
 
 export default function RoofAllocationSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -86,7 +86,7 @@ export default function RoofAllocationSetting(props) {
                   return (
                     <div className="grid-option-box" key={index}>
                       <div className="d-check-radio pop no-text">
-                        <input type="radio" name="radio01" checked={!!roof.selected} readOnly />
+                        <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
                         <label
                           htmlFor="ra01"
                           onClick={(e) => {
@@ -151,10 +151,7 @@ export default function RoofAllocationSetting(props) {
                                       type="text"
                                       className="input-origin block"
                                       defaultValue={roof.width}
-                                      onChange={(e) => {
-                                        e.target.value = normalizeDigits(e.target.value)
-                                        handleChangeInput(e, 'width', index)
-                                      }}
+                                      onChange={(e) => handleChangeInput(e, 'width', index)}
                                       readOnly={roof.widAuth === 'R'}
                                     />
                                   </div>
@@ -170,10 +167,7 @@ export default function RoofAllocationSetting(props) {
                                       type="text"
                                       className="input-origin block"
                                       defaultValue={roof.length}
-                                      onChange={(e) => {
-                                        e.target.value = normalizeDigits(e.target.value)
-                                        handleChangeInput(e, 'length', index)
-                                      }}
+                                      onChange={(e) => handleChangeInput(e, 'length', index)}
                                       readOnly={roof.lenAuth === 'R'}
                                     />
                                   </div>
@@ -190,11 +184,8 @@ export default function RoofAllocationSetting(props) {
                                 <input
                                   type="text"
                                   className="input-origin block"
-                                  onChange={(e) => {
-                                    e.target.value = normalizeDigits(e.target.value)
-                                    handleChangeInput(e, 'hajebichi', index)
-                                  }}
-                                  value={roof.hajebichi ?? ''}
+                                  onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
+                                  value={parseInt(roof.hajebichi)}
                                   readOnly={roof.roofPchAuth === 'R'}
                                 />
                               </div>
@@ -209,10 +200,10 @@ export default function RoofAllocationSetting(props) {
                                 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 ?? '')}
+                                value={currentAngleType === 'slope' ? roof.pitch : roof.angle}
+                                defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
                               />
                             </div>
                             <span className="absol">{pitchText}</span>

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

@@ -1,5 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
 export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth, pitchText }) {
   const { getMessage } = useMessage()
@@ -10,12 +10,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {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) => onlyNumberWithDotInputChange(e, setPitch)} />
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -24,12 +19,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {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) => onlyNumberInputChange(e, setEavesOffset)} />
         </div>
         <span className="thin">mm</span>
       </div>
@@ -38,12 +28,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {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) => onlyNumberInputChange(e, setGableOffset)} />
         </div>
         <span className="thin">mm</span>
       </div>
@@ -52,12 +37,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('windage.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) => onlyNumberInputChange(e, setShedWidth)} />
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,5 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
 export default function Pattern(props) {
   const { getMessage } = useMessage()
@@ -11,7 +11,7 @@ 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) => onlyNumberWithDotInputChange(e, setPitch)} />
         </div>
         <span className="thin"> {pitchText}</span>
       </div>
@@ -20,7 +20,7 @@ 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) => onlyNumberInputChange(e, setEavesOffset)} />
         </div>
         <span className="thin">mm</span>
       </div>
@@ -29,7 +29,7 @@ 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) => onlyNumberInputChange(e, setGableOffset)} />
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,6 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect } from 'react'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
 export default function Ridge(props) {
   const { getMessage } = useMessage()
@@ -13,7 +13,7 @@ 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) => onlyNumberWithDotInputChange(e, setPitch)} />
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -22,7 +22,7 @@ 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) => onlyNumberInputChange(e, setEavesOffset)} />
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,5 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
 export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pitchText }) {
   const { getMessage } = useMessage()
@@ -10,7 +10,7 @@ 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) => onlyNumberWithDotInputChange(e, setPitch)} />
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -19,7 +19,7 @@ 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) => onlyNumberInputChange(e, setEavesOffset)} />
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,6 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect } from 'react'
-import { normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange } from '@/util/input-utils'
 
 export default function Gable({ gableOffset, setGableOffset }) {
   const { getMessage } = useMessage()
@@ -10,7 +10,7 @@ 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) => onlyNumberInputChange(e, setGableOffset)} />
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,5 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
 export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }) {
   const { getMessage } = useMessage()
@@ -10,7 +10,7 @@ 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) => onlyNumberWithDotInputChange(e, setPitch)} />
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -19,7 +19,7 @@ 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) => onlyNumberInputChange(e, setEavesOffset)} />
         </div>
         <span className="thin">mm</span>
       </div>
@@ -32,7 +32,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
             type="text"
             className="input-origin block"
             value={hipAndGableWidth}
-            onChange={(e) => setHipAndGableWidth(normalizeDigits(e.target.value))}
+            onChange={(e) => onlyNumberInputChange(e, setHipAndGableWidth)}
           />
         </div>
         <span className="thin">mm</span>

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

@@ -1,5 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
 export default function Jerkinhead({
   gableOffset,
@@ -18,7 +18,7 @@ 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) => onlyNumberInputChange(e, setGableOffset)} />
         </div>
         <span className="thin">mm</span>
       </div>
@@ -27,7 +27,7 @@ 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) => onlyNumberInputChange(e, setJerkinHeadWidth)} />
         </div>
         <span className="thin">mm</span>
       </div>
@@ -40,7 +40,7 @@ export default function Jerkinhead({
             type="text"
             className="input-origin block"
             value={jerkinHeadPitch}
-            onChange={(e) => setJerkinHeadPitch(normalizeDecimalLimit(e.target.value, 2))}
+            onChange={(e) => onlyNumberWithDotInputChange(e, setJerkinHeadPitch)}
           />
         </div>
         <span className="thin">{pitchText}</span>

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

@@ -1,5 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
 export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }) {
   const { getMessage } = useMessage()
@@ -8,14 +8,14 @@ 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) => onlyNumberWithDotInputChange(e, setShedPitch)} />
         </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) => onlyNumberInputChange(e, setShedWidth)} />
         </div>
         <span className="thin">mm</span>
       </div>

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

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import { normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange } from '@/util/input-utils'
 
 export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }) {
   const { getMessage } = useMessage()
@@ -29,7 +29,7 @@ export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasS
                   type="text"
                   className="input-origin block"
                   value={sleeveOffset}
-                  onChange={(e) => setSleeveOffset(normalizeDigits(e.target.value))}
+                  onChange={(e) => onlyNumberInputChange(e, setSleeveOffset)}
                   readOnly={hasSleeve === '0'}
                 />
               </div>

src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx

@@ -5,7 +5,7 @@ import { usePopup } from '@/hooks/usePopup'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { canvasState } from '@/store/canvasAtom'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
-import { normalizeDigits } from '@/util/input-utils'
+import { onlyNumberInputChange } from '@/util/input-utils'
 
 export default function PlanSizeSetting(props) {
   const { setIsShow, horizon, vertical, id, pos = { x: 985, y: 180 }, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = props
@@ -24,15 +24,15 @@ export default function PlanSizeSetting(props) {
     setPlanSizeSettingMode((prev) => {
       return {
         ...prev,
-        originHorizon: Number(normalizeDigits(planSizeSettingMode.originHorizon)),
-        originVertical: Number(normalizeDigits(planSizeSettingMode.originVertical)),
+        originHorizon: Number(planSizeSettingMode.originHorizon),
+        originVertical: Number(planSizeSettingMode.originVertical),
       }
     })
 
     setSettingsData({
       ...settingsData,
-      originHorizon: Number(normalizeDigits(planSizeSettingMode.originHorizon)),
-      originVertical: Number(normalizeDigits(planSizeSettingMode.originVertical)),
+      originHorizon: Number(planSizeSettingMode.originHorizon),
+      originVertical: Number(planSizeSettingMode.originVertical),
     })
 
     canvas.setWidth(planSizeSettingMode.originHorizon)
@@ -46,15 +46,14 @@ export default function PlanSizeSetting(props) {
   const changeInput = (value, e) => {
     const { name } = e.target
 
-    let n = Number(normalizeDigits(value))
-    if (n > 100000) {
-      n = 100000
+    if (Number(value) > 100000) {
+      value = 100000
     }
 
     setPlanSizeSettingMode((prev) => {
       return {
         ...prev,
-        [name]: n / 10,
+        [name]: Number(value) / 10,
       }
     })
   }
@@ -78,7 +77,7 @@ export default function PlanSizeSetting(props) {
                 className="input-origin block"
                 name={`originHorizon`}
                 value={planSizeSettingMode.originHorizon * 10}
-                onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}
+                onChange={(e) => onlyNumberInputChange(e, changeInput)}
               />
             </div>
             <span className="thin">mm</span>
@@ -91,7 +90,7 @@ export default function PlanSizeSetting(props) {
                 className="input-origin block"
                 name={`originVertical`}
                 value={planSizeSettingMode.originVertical * 10}
-                onChange={(e) => changeInput(normalizeDigits(e.target.value), e)}
+                onChange={(e) => onlyNumberInputChange(e, changeInput)}
               />
             </div>
             <span className="thin">mm</span>

src/components/header/Header.jsx

@@ -25,7 +25,6 @@ import { isObjectNotEmpty } from '@/util/common-utils'
 import { roofMaterialsAtom } from '@/store/settingAtom'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
-import { useSwal } from '@/hooks/useSwal'
 
 export const ToggleonMouse = (e, act, target) => {
   const listWrap = e.target.closest(target)
@@ -76,8 +75,6 @@ export default function Header(props) {
   const [commonCode, setCommonCode] = useRecoilState(commonCodeState)
   const { promiseGet } = useAxios()
 
-  const { swalFire } = useSwal()
-
   /**
    * 지붕재 목록 Header에서 조회
    */
@@ -133,21 +130,17 @@ export default function Header(props) {
                   { id: 1, name: 'HANASYS ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                   { id: 2, name: 'HANASYS Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                   { id: 3, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
-                  { id: 4, name: 'Q.PARTNERS', link: `https://q-partners.q-cells.jp/qcast_login.php`, target: '_blank' },
-
                 ]
               : userSession.groupId === '60000'
                 ? [
                     { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
                     { id: 1, name: 'HANASYS ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                     { id: 2, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
-                    { id: 3, name: 'Q.PARTNERS', link: `https://q-partners.q-cells.jp/qcast_login.php`, target: '_blank' },
                   ]
                 : [
                     { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
                     { id: 1, name: 'HANASYS Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                     { id: 2, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
-                    { id: 3, name: 'Q.PARTNERS', link: `https://q-partners.q-cells.jp/qcast_login.php`, target: '_blank' },
                   ],
           )
           onChangeSelect({ id: 0, name: getMessage('site.header.link1') })
@@ -239,32 +232,11 @@ export default function Header(props) {
               key={`${menu.id}`}
               href={menu.url}
               replace={true}
-              onClick={(e) => {
-
-                if(pathName === '/floor-plan') {
-                  e.preventDefault() // 기본 네비게이션 방지
-                  e.stopPropagation() // 이벤트 전파 방지
-                  swalFire({
-                    text     : getMessage('common.link.confirm'), // 적절한 확인 메시지
-                    type     : 'confirm',
-                    confirmFn: () => {
-                      // 확인 버튼 클릭 시 실행
-                      removeStuffRecoil(menu)
-                      if (pathName === '/' && menu.id !== 8) {
-                        window.location.reload()
-                      } else {
-                        router.push(menu.url)
-                      }
-                      router.push(menu.url)
-                    }
-                  })
-                } else {
-                  removeStuffRecoil(menu)
-                  if (pathName === '/' && menu.id !== 8) {
-                    window.location.reload()
-                  } else {
-                    router.push(menu.url)
-                  }
+              onClick={() => {
+                // moveHome()
+                removeStuffRecoil(menu)
+                if (pathName === '/' && menu.id !== 8) {
+                  window.location.reload()
                 }
               }}
             >
@@ -286,24 +258,9 @@ export default function Header(props) {
                         scroll={false}
                         href={m.url}
                         replace={true}
-                        onClick={(e) => {
-                          if(pathName === '/floor-plan') {
-                            e.preventDefault() // 기본 네비게이션 방지
-                            e.stopPropagation() // 이벤트 전파 방지
-                             swalFire({
-                               text: getMessage('common.link.confirm'), // 적절한 확인 메시지
-                               type: 'confirm',
-                               confirmFn: () => {
-                                 // 확인 버튼 클릭 시 기존 로직 실행
-                                 removeStuffRecoil(m)
-                                 router.push(m.url)
-                               }
-                             })
-                            } else {
-                             removeStuffRecoil(m)
-                            }
-                          }
-                        }
+                        onClick={() => {
+                          removeStuffRecoil(m)
+                        }}
                       >
                         {getMessage(m.name)}
                       </Link>
@@ -327,28 +284,14 @@ export default function Header(props) {
               <h1 className="logo">
                 <Link
                   href={'/'}
-                  onClick={(e) => {
+                  onClick={() => {
                     setStuffSearch({
                       ...stuffSearch,
                       code: 'DELETE',
                     })
                     if (pathName === '/') {
                       window.location.reload()
-                    } else if(pathName === '/floor-plan') {
-                      e.preventDefault() // 기본 네비게이션 방지
-                      e.stopPropagation() // 이벤트 전파 방지
-                      swalFire({
-                        text: getMessage('common.link.confirm'), // 적절한 확인 메시지
-                        type: 'confirm',
-                        confirmFn: () => {
-                          // 확인 버튼 클릭 시 기존 로직 실행
-                          //removeStuffRecoil(m)
-                          router.push('/')
-                        }
-                      })
                     }
-
-
                   }}
                 ></Link>
               </h1>

src/components/management/StuffDetail.jsx

@@ -22,7 +22,6 @@ import { stuffSearchState } from '@/store/stuffAtom'
 import { QcastContext } from '@/app/QcastProvider'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useSwal } from '@/hooks/useSwal'
-import { sanitizeIntegerInputEvent } from '@/util/input-utils'
 
 export default function StuffDetail() {
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
@@ -1240,10 +1239,10 @@ export default function StuffDetail() {
     }
 
     //주소
-    // if (!formData.address) {
-    //   fieldNm = getMessage('stuff.detail.address')
-    //   errors = fieldNm
-    // }
+    if (!formData.address) {
+      fieldNm = getMessage('stuff.detail.address')
+      errors = fieldNm
+    }
 
     //도도부현
     if (!formData.prefId || formData.prefId === '0') {
@@ -1635,15 +1634,13 @@ export default function StuffDetail() {
 
   // 숫자만 입력 가능
   const handleKeyUp = (e) => {
-    // let input = e.target
-    // input.value = input.value.replace(/[^0-9]/g, '')
-    sanitizeIntegerInputEvent(e)
+    let input = e.target
+    input.value = input.value.replace(/[^0-9]/g, '')
   }
 
   const handleBlur = (e) => {
-    // let input = e.target
-    // input.value = input.value.replace(/[^0-9]/g, '')
-    sanitizeIntegerInputEvent(e)
+    let input = e.target
+    input.value = input.value.replace(/[^0-9]/g, '')
   }
 
   // 그리드 더블 클릭 해당플랜의 도면작성 화면으로 이동

src/components/management/popup/FindAddressPop.jsx

@@ -9,7 +9,6 @@ import { useMessage } from '@/hooks/useMessage'
 import { isNotEmptyArray } from '@/util/common-utils'
 import { useSwal } from '@/hooks/useSwal'
 import { QcastContext } from '@/app/QcastProvider'
-import { sanitizeIntegerInputEvent } from '@/util/input-utils'
 export default function FindAddressPop(props) {
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
@@ -114,12 +113,12 @@ export default function FindAddressPop(props) {
 
   //숫자만
   const handleKeyUp = (e) => {
-    // let input = e.target
-    //  input.value = input.value.replace(/[^0-9]/g, '')
-    //  if (e.key === 'Enter') {
-    //   searchPostNum()
-    // }
-    sanitizeIntegerInputEvent(e)
+    let input = e.target
+    input.value = input.value.replace(/[^0-9]/g, '')
+
+    if (e.key === 'Enter') {
+      searchPostNum()
+    }
   }
 
   //그리드에서 선택한 우편정보

src/components/management/popup/PlanRequestPop.jsx

@@ -11,8 +11,6 @@ import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
 import QPagination from '@/components/common/pagination/QPagination'
 import { useSwal } from '@/hooks/useSwal'
 import { QcastContext } from '@/app/QcastProvider'
-import { sanitizeDecimalInputEvent } from '@/util/input-utils'
-
 export default function PlanRequestPop(props) {
   const [pageNo, setPageNo] = useState(1) //현재 페이지 번호
   const [pageSize, setPageSize] = useState(20) //페이지 당 게시물 개수
@@ -235,16 +233,16 @@ export default function PlanRequestPop(props) {
 
   // 숫자만 입력 가능
   const handleKeyUp = (e) => {
-    sanitizeIntegerInputEvent(e)
+    let input = e.target
+    input.value = input.value.replace(/[^0-9]/g, '')
     if (e.key === 'Enter') {
       onSubmit(pageNo, 'S')
     }
   }
 
   const handleBlur = (e) => {
-    // let input = e.target
-    // input.value = input.value.replace(/[^0-9]/g, '')
-    sanitizeIntegerInputEvent(e)
+    let input = e.target
+    input.value = input.value.replace(/[^0-9]/g, '')
   }
 
   // 엔터 이벤트

src/components/simulator/Simulator.jsx

@@ -18,7 +18,7 @@ import { usePlan } from '@/hooks/usePlan'
 import { usePopup } from '@/hooks/usePopup'
 
 import { QcastContext } from '@/app/QcastProvider'
-import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+
 export default function Simulator() {
   // global 로딩바
   const { setIsGlobalLoading } = useContext(QcastContext)
@@ -34,7 +34,6 @@ export default function Simulator() {
 
   const { get } = useAxios()
   const { getMessage } = useMessage()
-  const { setSelectedMenu } = useCanvasMenu()
 
   // 차트 관련
   const [chartData, setChartData] = useState([])
@@ -49,25 +48,34 @@ export default function Simulator() {
           return isNaN(num) ? 0 : num
         }),
 
-        backgroundColor: (context) => {
-          const chart = context.chart
-          const { ctx, chartArea } = chart
-
-          if (!chartArea) {
-            // This case happens on initial chart load
-            return null
-          }
-
-          const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top)
-          gradient.addColorStop(0, '#4FC3F7')  // Light blue at bottom
-          gradient.addColorStop(0.3, '#2FA8E0') // Original blue
-          gradient.addColorStop(0.7, '#1976D2') // Medium blue
-          gradient.addColorStop(1, '#0D47A1')   // Dark blue at top
-
-
-          return gradient
-        },
-        borderColor: '#2FA8E0' ,
+        backgroundColor: [
+          'rgba(255, 99, 132, 0.2)',
+          'rgba(54, 162, 235, 0.2)',
+          'rgba(255, 206, 86, 0.2)',
+          'rgba(75, 192, 192, 0.2)',
+          'rgba(153, 102, 255, 0.2)',
+          'rgba(255, 159, 64, 0.2)',
+          'rgba(0, 99, 132, 0.2)',
+          'rgba(0, 162, 235, 0.2)',
+          'rgba(0, 206, 86, 0.2)',
+          'rgba(0, 192, 192, 0.2)',
+          'rgba(0, 102, 255, 0.2)',
+          'rgba(0, 159, 64, 0.2)',
+        ],
+        borderColor: [
+          'rgba(255, 99, 132, 0.2)',
+          'rgba(54, 162, 235, 0.2)',
+          'rgba(255, 206, 86, 0.2)',
+          'rgba(75, 192, 192, 0.2)',
+          'rgba(153, 102, 255, 0.2)',
+          'rgba(255, 159, 64, 0.2)',
+          'rgba(0, 99, 132, 0.2)',
+          'rgba(0, 162, 235, 0.2)',
+          'rgba(0, 206, 86, 0.2)',
+          'rgba(0, 192, 192, 0.2)',
+          'rgba(0, 102, 255, 0.2)',
+          'rgba(0, 159, 64, 0.2)',
+        ],
         borderWidth: 1,
       },
     ],
@@ -95,7 +103,6 @@ export default function Simulator() {
   }
 
   useEffect(() => {
-    setSelectedMenu('simulation')
     /* 초기화 작업 */
     setChartData([])
     setObjectDetail({})
@@ -186,10 +193,10 @@ export default function Simulator() {
         setChartData(hatsudenryouAll)
         break
       case 'B':
-        setChartData(hatsudenryouPeakcutAll)
+        setChartData(hatsudenryouAllSnow)
         break
       case 'C':
-        setChartData(hatsudenryouAllSnow)
+        setChartData(hatsudenryouPeakcutAll)
         break
       case 'D':
         setChartData(hatsudenryouPeakcutAllSnow)

src/config/config.development.js

@@ -1,7 +1,7 @@
 import getConfigs from './config.common'
 
 // 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 development 환경에 맞는 값을 지정합니다.)
-const baseUrl = 'https://dev.hanasys.jp'
+const baseUrl = 'https://dev.hanssys.jp'
 const mode = 'development'
 
 // 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.

src/hooks/common/useCanvasPopupStatusController.js

@@ -101,7 +101,6 @@ export function useCanvasPopupStatusController(param = 1) {
         popupType: popupType.toString(),
         // popupStatus: popupType === 1 ? arg : JSON.stringify(arg).replace(/"/g, '\"'),
         popupStatus: JSON.stringify(arg).replace(/"/g, '\"'),
-        //hajebichi: arg.roofConstructions?.[0]?.addRoof?.hajebichi || '',
       }
       postFetcher(`/api/v1/canvas-popup-status`, params)
     },

src/hooks/common/useCommonUtils.js

@@ -1,18 +1,17 @@
 import { useEffect } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { checkLineOrientation, getDistance } from '@/util/canvas-util'
 import { commonUtilsState, dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { fontSelector } from '@/store/fontAtom'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, currentMenuState } from '@/store/canvasAtom'
 import { v4 as uuidv4 } from 'uuid'
 import { usePopup } from '@/hooks/usePopup'
 import Distance from '@/components/floor-plan/modal/distance/Distance'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useObjectBatch } from '@/hooks/object/useObjectBatch'
 import { BATCH_TYPE } from '@/common/common'
-import { useMouse } from '@/hooks/useMouse'
 
 export function useCommonUtils() {
   const canvas = useRecoilValue(canvasState)
@@ -26,7 +25,6 @@ export function useCommonUtils() {
   const { addPopup, closeAll, targetClose } = usePopup()
   const { drawDirectionArrow, addLengthText } = usePolygon()
   const { applyDormers } = useObjectBatch({})
-  const { getIntersectMousePoint } = useMouse()
 
   useEffect(() => {
     commonTextMode()
@@ -215,7 +213,7 @@ export function useCommonUtils() {
       addCanvasMouseEventListener('mouse:down', (e) => {
         let groupObjects = []
 
-        const pointer = getIntersectMousePoint(e)
+        const pointer = canvas.getPointer(e.e)
 
         let point
 
@@ -656,11 +654,7 @@ export function useCommonUtils() {
             clonedObj.setCoords()
             clonedObj.fire('modified')
             clonedObj.fire('polygonMoved')
-            clonedObj.set({
-              direction: obj.direction,
-              directionText: obj.directionText,
-              roofMaterial: obj.roofMaterial,
-            })
+            clonedObj.set({ direction: obj.direction, directionText: obj.directionText, roofMaterial: obj.roofMaterial })
 
             obj.lines.forEach((line, index) => {
               clonedObj.lines[index].set({ attributes: line.attributes })

src/hooks/common/useGrid.js

@@ -1,18 +1,15 @@
 import { useRecoilValue } from 'recoil'
-import { canvasState, canvasZoomState, dotLineGridSettingState } from '@/store/canvasAtom'
+import { canvasState, dotLineGridSettingState } from '@/store/canvasAtom'
 import { useEffect } from 'react'
 import { gridColorState } from '@/store/gridAtom'
 import { gridDisplaySelector } from '@/store/settingAtom'
-
 const GRID_PADDING = 5
-
 export function useGrid() {
   const canvas = useRecoilValue(canvasState)
 
   const dotLineGridSetting = useRecoilValue(dotLineGridSettingState)
   const gridColor = useRecoilValue(gridColorState)
   const isGridDisplay = useRecoilValue(gridDisplaySelector)
-  const zoom = useRecoilValue(canvasZoomState)
 
   useEffect(() => {
     if (!canvas) {
@@ -93,32 +90,14 @@ export function useGrid() {
     }
 
     if (patternData.lineGridDisplay) {
-      // 캔버스의 실제 보이는 영역 계산
-      const canvasWidth = canvas.getWidth()
-      const canvasHeight = canvas.getHeight()
-      const currentZoom = canvas.getZoom()
-      const viewportTransform = canvas.viewportTransform
-
-      const visibleLeft = -viewportTransform[4] / currentZoom
-      const visibleTop = -viewportTransform[5] / currentZoom
-      const visibleRight = visibleLeft + canvasWidth / currentZoom
-      const visibleBottom = visibleTop + canvasHeight / currentZoom
-
-      // 여유 공간 추가
-      const padding = 200
-      const gridLeft = visibleLeft - padding
-      const gridTop = visibleTop - padding
-      const gridRight = visibleRight + padding
-      const gridBottom = visibleBottom + padding
-
-      // 가로선 생성 (수평선)
-      const horizontalGridRange = gridBottom - gridTop
-      const horizontalGridCount = Math.ceil(horizontalGridRange / patternData.gridVertical) + 2
-      
-      for (let i = 0; i < horizontalGridCount; i++) {
-        const y = gridTop + i * patternData.gridVertical
+      for (let i = 0; i < 5000 / patternData.gridVertical + 1; i++) {
         const horizontalLine = new fabric.Line(
-          [gridLeft, y, gridRight, y],
+          [
+            -1500,
+            -1500 + i * patternData.gridVertical - patternData.gridVertical / 2,
+            3000,
+            -1500 + i * patternData.gridVertical - patternData.gridVertical / 2,
+          ],
           {
             stroke: gridColor,
             strokeWidth: 1,
@@ -139,14 +118,14 @@ export function useGrid() {
         canvas.add(horizontalLine)
       }
 
-      // 세로선 생성 (수직선)
-      const verticalGridRange = gridRight - gridLeft
-      const verticalGridCount = Math.ceil(verticalGridRange / patternData.gridHorizon) + 2
-      
-      for (let i = 0; i < verticalGridCount; i++) {
-        const x = gridLeft + i * patternData.gridHorizon
+      for (let i = 0; i < 5000 / patternData.gridHorizon + 1; i++) {
         const verticalLine = new fabric.Line(
-          [x, gridTop, x, gridBottom],
+          [
+            -1500 + i * patternData.gridHorizon - patternData.gridHorizon / 2,
+            -1500,
+            -1500 + i * patternData.gridHorizon - patternData.gridHorizon / 2,
+            3000,
+          ],
           {
             stroke: gridColor,
             strokeWidth: 1,
@@ -169,7 +148,7 @@ export function useGrid() {
     }
 
     canvas.renderAll()
-  }, [dotLineGridSetting, zoom])
+  }, [dotLineGridSetting])
 
   const move = (object, x, y) => {
     object.set({

src/hooks/common/useMenu.js

@@ -6,6 +6,7 @@ import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableE
 import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
 import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
 import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
+import Slope from '@/components/floor-plan/modal/Slope'
 import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing'
 import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
 import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
@@ -19,8 +20,9 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState, currentMenuState } from '@/store/canvasAtom'
 import { MENU } from '@/common/common'
 import { useTrestle } from '@/hooks/module/useTrestle'
+import { usePolygon } from '@/hooks/usePolygon'
 import { useOrientation } from '@/hooks/module/useOrientation'
-import { corridorDimensionSelector } from '@/store/settingAtom'
+import { corridorDimensionSelector, settingModalFirstOptionsState } from '@/store/settingAtom'
 
 /**
  * 메뉴 처리 훅
@@ -31,13 +33,12 @@ export default function useMenu() {
   const currentMenu = useRecoilValue(currentMenuState)
   const canvas = useRecoilValue(canvasState)
   const [popupId, setPopupId] = useState(uuidv4())
-  const { addPopup, closeAll } = usePopup()
+  const { addPopup } = usePopup()
   const { deleteAllSurfacesAndObjects } = useSurfaceShapeBatch({})
   const { clear: trestleClear, setAllModuleSurfaceIsComplete } = useTrestle()
   const { nextStep } = useOrientation()
   const [corridorDimension, setCorridorDimension] = useRecoilState(corridorDimensionSelector)
   const handleMenu = (type) => {
-    closeAll()
     if (type === 'outline') {
       // 지붕 덮개 메뉴의 경우는 복도치수로 적용한다.
       setCorridorDimension(0)
@@ -66,9 +67,6 @@ export default function useMenu() {
         case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC:
           addPopup(popupId, 1, <RoofAllocationSetting id={popupId} />)
           break
-        case MENU.ROOF_COVERING.ALL_REMOVE:
-          deleteAllSurfacesAndObjects()
-          break
       }
     }
 

src/hooks/common/useRefFiles.js

@@ -9,8 +9,6 @@ import { deleteBackGroundImage, setBackGroundImage } from '@/lib/imageActions'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
 import { popSpinnerState } from '@/store/popupAtom'
 import Config from '@/config/config.export'
-import { useMessage } from '@/hooks/useMessage'
-import { logger } from '@/util/logger'
 
 /**
  * 배경 이미지 관리
@@ -25,9 +23,7 @@ import { logger } from '@/util/logger'
  * @returns {object}
  */
 export function useRefFiles() {
-  const converterDwgUrl = process.env.NEXT_PUBLIC_CONVERTER_DWG_API_URL
-  const converterDxfUrl = process.env.NEXT_PUBLIC_CONVERTER_DXF_API_URL
-  const { getMessage } = useMessage()
+  const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
   const [refImage, setRefImage] = useState(null)
   const [refFileMethod, setRefFileMethod] = useState('1')
   const [mapPositionAddress, setMapPositionAddress] = useState('')
@@ -54,12 +50,12 @@ export function useRefFiles() {
    * @param {*} file
    */
   const handleRefFile = (file) => {
-    logger.log('handleRefFile', file)
-    logger.log('refImage', refImage)
+    console.log('handleRefFile', file)
+    console.log('refImage', refImage)
 
     if (refImage) {
       swalFire({
-        text: getMessage('common.message.ref.file.change'),
+        text: '파일을 변경하시겠습니까?',
         type: 'confirm',
         confirmFn: () => {
           refFileSetting(file)
@@ -75,29 +71,15 @@ export function useRefFiles() {
    * @param {File} file
    */
   const refFileSetting = (file) => {
-    logger.log('🚀 ~ refFileSetting ~ file:', file)
-
-    setPopSpinnerStore(true)
-    const newOption1 = settingModalFirstOptions.option1.map((option) => ({
-      ...option,
-      selected: option.column === 'imageDisplay' ? true : option.selected,
-    }))
-
-    setSettingModalFirstOptions((prev) => ({
-      ...prev,
-      option1: newOption1,
-    }))
-
+    console.log('🚀 ~ refFileSetting ~ file:', file)
     if (file.name.split('.').pop() === 'dwg') {
-      handleUploadConvertRefFile(file, converterDwgUrl);
-    } else if (file.name.split('.').pop() === 'dxf') {
-      handleUploadConvertRefFile(file, converterDxfUrl);
+      handleUploadConvertRefFile(file)
     } else {
       if (file && ['image/png', 'image/jpg', 'image/jpeg', 'image/bmp', 'image/gif'].includes(file.type)) {
         handleUploadImageRefFile(file)
       } else {
         swalFire({
-          text: getMessage('common.message.ref.file.noImage'),
+          text: '이미지가 아닙니다.',
           type: 'alert',
           icon: 'error',
         })
@@ -110,12 +92,12 @@ export function useRefFiles() {
    */
   const handleFileDelete = async () => {
     swalFire({
-      text: getMessage('common.message.data.delete'),
+      text: '삭제하시겠습니까?',
       type: 'confirm',
       confirmFn: async () => {
         setPopSpinnerStore(true)
-        logger.log('🚀 ~ handleFileDelete ~ handleFileDelete:', refImage)
-        logger.log('🚀 ~ handleFileDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
+        console.log('🚀 ~ handleFileDelete ~ handleFileDelete:', refImage)
+        console.log('🚀 ~ handleFileDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
         await del({ url: `${Config().baseUrl}/api/image/upload?fileName=${currentCanvasPlan.bgImageName}` })
         setCurrentBgImage(null)
         await deleteBackGroundImage({
@@ -132,11 +114,11 @@ export function useRefFiles() {
    */
   const handleAddressDelete = async () => {
     swalFire({
-      text: getMessage('common.message.data.delete'),
+      text: '삭제하시겠습니까?',
       type: 'confirm',
       confirmFn: async () => {
-        logger.log('🚀 ~ handleAddressDelete ~ handleAddressDelete:', refImage)
-        logger.log('🚀 ~ handleAddressDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
+        console.log('🚀 ~ handleAddressDelete ~ handleAddressDelete:', refImage)
+        console.log('🚀 ~ handleAddressDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
         await del({ url: `${Config().baseUrl}/api/image/map?fileName=${currentCanvasPlan.bgImageName}` })
         setMapPositionAddress('')
         setCurrentBgImage(null)
@@ -152,7 +134,7 @@ export function useRefFiles() {
    * 주소로 구글 맵 이미지 다운로드하여 캔버스 배경으로 로드
    */
   const handleMapImageDown = async () => {
-    debugger; logger.log('🚀 ~ handleMapImageDown ~ handleMapImageDown:')
+    console.log('🚀 ~ handleMapImageDown ~ handleMapImageDown:')
     if (queryRef.current.value === '' || queryRef.current.value === null) {
       return
     }
@@ -170,7 +152,7 @@ export function useRefFiles() {
     const res = await get({
       url: `${Config().baseUrl}/api/image/map?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
     })
-    logger.log('🚀 ~ handleMapImageDown ~ res:', res)
+    console.log('🚀 ~ handleMapImageDown ~ res:', res)
     setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${res.fileName}`)
 
     await setBackGroundImage({
@@ -188,11 +170,9 @@ export function useRefFiles() {
     // if (!currentBgImage) {
     //   return
     // }
-    logger.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage)
+    console.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage)
     if (currentBgImage) {
-      handleBackImageLoadToCanvas(currentBgImage, () => {
-        logger.log('Background image loaded successfully')
-      })
+      handleBackImageLoadToCanvas(currentBgImage)
       setCurrentCanvasPlan((prev) => ({
         ...prev,
         // bgImageName: refImage?.name ?? null,
@@ -214,16 +194,16 @@ export function useRefFiles() {
    * @param {*} file
    */
   const handleUploadImageRefFile = async (file) => {
-    // setPopSpinnerStore(true)
-    // const newOption1 = settingModalFirstOptions.option1.map((option) => ({
-    //   ...option,
-    //   selected: option.column === 'imageDisplay' ? true : option.selected,
-    // }))
-    //
-    // setSettingModalFirstOptions((prev) => ({
-    //   ...prev,
-    //   option1: newOption1,
-    // }))
+    setPopSpinnerStore(true)
+    const newOption1 = settingModalFirstOptions.option1.map((option) => ({
+      ...option,
+      selected: option.column === 'imageDisplay' ? true : option.selected,
+    }))
+
+    setSettingModalFirstOptions((prev) => ({
+      ...prev,
+      option1: newOption1,
+    }))
 
     const formData = new FormData()
     formData.append('file', file)
@@ -232,7 +212,7 @@ export function useRefFiles() {
       url: `${Config().baseUrl}/api/image/upload`,
       data: formData,
     })
-    logger.log('🚀 ~ handleUploadImageRefFile ~ res:', res)
+    console.log('🚀 ~ handleUploadImageRefFile ~ res:', res)
     setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${res.fileName}`)
     setRefImage(file)
 
@@ -242,7 +222,7 @@ export function useRefFiles() {
       // imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
       imagePath: `${res.filePath}`,
     }
-    logger.log('🚀 ~ handleUploadImageRefFile ~ params:', params)
+    console.log('🚀 ~ handleUploadImageRefFile ~ params:', params)
     await setBackGroundImage(params)
     setPopSpinnerStore(false)
   }
@@ -250,15 +230,14 @@ export function useRefFiles() {
   /**
    * RefFile이 캐드 도면 파일일 경우 변환하여 이미지로 저장
    * @param {*} file
-   * @param converterUrl
    */
-  const handleUploadConvertRefFile = async (file, converterUrl) => {
+  const handleUploadConvertRefFile = async (file) => {
     const formData = new FormData()
     formData.append('file', file)
 
     /** 캐드 도면 파일 변환 */
     const res = await post({ url: converterUrl, data: formData })
-    logger.log('🚀 ~ handleUploadConvertRefFile ~ res:', res)
+    console.log('🚀 ~ handleUploadConvertRefFile ~ res:', res)
 
     // Convert Base64 to Blob
     const base64Data = res.Files[0].FileData
@@ -290,7 +269,7 @@ export function useRefFiles() {
       url: `${Config().baseUrl}/api/image/cad`,
       data: newFormData,
     })
-    logger.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)
+    console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)
 
     setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${result.fileName}`)
     // setCurrentBgImage(result.filePath)
@@ -302,9 +281,8 @@ export function useRefFiles() {
       // imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
       imagePath: `${result.filePath}`,
     }
-    logger.log('🚀 ~ handleUploadImageRefFile ~ params:', params)
+    console.log('🚀 ~ handleUploadImageRefFile ~ params:', params)
     await setBackGroundImage(params)
-    setPopSpinnerStore(false)
   }
 
   /**

src/hooks/common/useRoofFn.js

@@ -6,8 +6,6 @@ import { POLYGON_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
 import { useLine } from '@/hooks/useLine'
 import { outerLinePointsState } from '@/store/outerLineAtom'
-import { usePolygon } from '@/hooks/usePolygon'
-import { useText } from '@/hooks/useText'
 
 const ROOF_COLOR = {
   0: 'rgb(199,240,213)',
@@ -15,7 +13,6 @@ const ROOF_COLOR = {
   2: 'rgb(187,204,255)',
   3: 'rgb(228,202,255)',
 }
-
 export function useRoofFn() {
   const canvas = useRecoilValue(canvasState)
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
@@ -23,8 +20,6 @@ export function useRoofFn() {
   const { addCanvasMouseEventListener, initEvent } = useEvent()
   const resetPoints = useResetRecoilState(outerLinePointsState)
   const { addPitchText } = useLine()
-  const { setPolygonLinesActualSize } = usePolygon()
-  const { changeCorridorDimensionText } = useText()
 
   //면형상 선택 클릭시 지붕 패턴 입히기
   function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial, isForceChange = false, isDisplay = false) {
@@ -32,9 +27,6 @@ export function useRoofFn() {
       if (!polygon) {
         return
       }
-      if (polygon.wall) {
-        return
-      }
       if (polygon.points.length < 3) {
         return
       }
@@ -52,7 +44,6 @@ export function useRoofFn() {
 
       let width = (roofMaterial.width || 226) / 10
       let height = (roofMaterial.length || 158) / 10
-
       const index = roofMaterial.index ?? 0
       let roofStyle = 2
       const inputPatternSize = { width: width, height: height } //임시 사이즈
@@ -178,8 +169,6 @@ export function useRoofFn() {
       polygon.set('fill', null)
       polygon.set('fill', pattern)
       polygon.roofMaterial = roofMaterial
-      setPolygonLinesActualSize(polygon)
-      changeCorridorDimensionText()
       polygon.canvas?.renderAll()
     } catch (e) {
       console.log(e)
@@ -213,7 +202,7 @@ export function useRoofFn() {
     }
 
     const roof = roofBase[0]
-    const wall = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.WALL && obj.attributes?.roofId === roof.id)
+    const wall = roof.wall
 
     const checkPolygon = new fabric.Polygon(roof.points, {
       name: 'moveRoofPolygon',
@@ -241,11 +230,16 @@ export function useRoofFn() {
       const texts = canvas.getObjects().filter((obj) => obj.type === 'text' && (obj.attributes?.roofId === roof.id || obj.parentId === roof.id))
       texts.forEach((text) => canvas.remove(text))
 
+      const outerLines = canvas.getObjects().filter((obj) => obj.type === 'QLine' && (obj.attributes?.roofId === roof.id || obj.parentId === roof.id))
+
       const allRoofObject = canvas
         .getObjects()
-        .filter((obj) => obj !== roof && (obj.attributes?.roofId === roof.id || obj.parentId === roof.id || obj.parentId === wall.id))
+        .filter(
+          (obj) => obj !== roof && /*obj !== wall &&*/ (obj.attributes?.roofId === roof.id || obj.parentId === roof.id || obj.parentId === wall.id),
+        )
+
+      // // Calculate the movement delta
 
-      /** 지붕이 움직인 만큼의 delta를 구한다. */
       const originalRoofLeft = roof.left
       const originalRoofTop = roof.top
 
@@ -314,15 +308,7 @@ export function useRoofFn() {
   }
 
   function convertAbsolutePoint(area) {
-    return area.points.map((p) =>
-      fabric.util.transformPoint(
-        {
-          x: p.x - area.pathOffset.x,
-          y: p.y - area.pathOffset.y,
-        },
-        area.calcTransformMatrix(),
-      ),
-    )
+    return area.points.map((p) => fabric.util.transformPoint({ x: p.x - area.pathOffset.x, y: p.y - area.pathOffset.y }, area.calcTransformMatrix()))
   }
 
   const removeOuterLines = (currentMousePos) => {

src/hooks/common/useTurf.js

@@ -1,37 +0,0 @@
-import * as turf from '@turf/turf'
-
-export const useTurf = () => {
-  /**
-   * 모듈이 배치면 안에 있는지 확인
-   * @param {*} module
-   * @param {*} surface
-   * @param spare
-   * @returns
-   */
-  const checkModuleDisjointSurface = (module, surface, spare = 1) => {
-    // 표면 영역을 spare만큼 수동 확장
-    const expandedSurface = {
-      type: 'Polygon',
-      coordinates: [
-        surface.geometry.coordinates[0].map(([x, y]) => {
-          // 각 점을 바깥쪽으로 2 단위씩 이동
-          const coords = surface.geometry.coordinates[0]
-          const centerX = coords.slice(0, -1).reduce((sum, [x, y]) => sum + x, 0) / (coords.length - 1)
-          const centerY = coords.slice(0, -1).reduce((sum, [x, y]) => sum + y, 0) / (coords.length - 1)
-
-          return [x < centerX ? x - spare : x + spare, y < centerY ? y - spare : y + spare]
-        }),
-      ],
-    }
-
-    const isWithin = turf.booleanContains(expandedSurface, module) || turf.booleanWithin(module, expandedSurface)
-
-    const isContact = turf.booleanIntersects(module, expandedSurface) && !turf.booleanOverlap(module, expandedSurface)
-
-    return isWithin || isContact
-  }
-
-  return {
-    checkModuleDisjointSurface,
-  }
-}