diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index bfc4949a..c09687b6 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -20,8 +20,9 @@ import { useTrestle } from '@/hooks/module/useTrestle'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { v4 as uuidv4 } from 'uuid'
 
-import { stepUpListDataState } from '@/store/circuitTrestleAtom'
 import { useEstimate } from '@/hooks/useEstimate'
+import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
+import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 
 const ALLOCATION_TYPE = {
   AUTO: 'auto',
@@ -35,13 +36,6 @@ export default function CircuitTrestleSetting({ id }) {
   const { saveEstimate } = useEstimate()
   const canvas = useRecoilValue(canvasState)
 
-  const [makers, setMakers] = useRecoilState(makersState)
-  const [selectedMaker, setSelectedMaker] = useRecoilState(selectedMakerState)
-  const [series, setSeries] = useRecoilState(seriesState)
-  const [models, setModels] = useRecoilState(modelsState)
-  const [selectedModels, setSelectedModels] = useRecoilState(selectedModelsState)
-  const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
-
   const [tabNum, setTabNum] = useState(1)
   const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
   const [circuitAllocationType, setCircuitAllocationType] = useState(1)
@@ -52,15 +46,44 @@ export default function CircuitTrestleSetting({ id }) {
   // 회로할당(승합설정)에서 선택된 값들을 저장할 상태 추가
   const [selectedStepUpValues, setSelectedStepUpValues] = useState({})
   const [getStepUpSelections, setGetStepUpSelections] = useState(null)
-
+  const { trigger: setCircuitData } = useCanvasPopupStatusController(4)
   // const [stepUpListData, setStepUpListData] = useRecoilState(stepUpListDataState)
   const [stepUpListData, setStepUpListData] = useState([])
   const [seletedOption, setSeletedOption] = useState(null)
+  const {
+    makers,
+    setMakers,
+    selectedMaker,
+    setSelectedMaker,
+    series,
+    setSeries,
+    models,
+    setModels,
+    selectedModels,
+    setSelectedModels,
+    pcsCheck,
+    setPcsCheck,
+    getOptYn,
+    getPcsItemList,
+    getSelectedPcsItemList,
+    getUseModuleItemList,
+    getRoofSurfaceList,
+    getModuleList,
+    removeNotAllocationModules,
+  } = useCircuitTrestle()
 
   useEffect(() => {
     if (!managementState) {
       setManagementState(managementStateLoaded)
     }
+    setCircuitData({
+      makers,
+      selectedMaker,
+      series,
+      models,
+      selectedModels,
+      pcsCheck,
+    })
   }, [])
 
   // 수동할당 시 모듈 삭제
@@ -95,12 +118,17 @@ export default function CircuitTrestleSetting({ id }) {
       getPcsAutoRecommendList(params).then((res) => {
         if (res.data?.pcsItemList) {
           let pcsItemList = []
+          let pcsObj = {}
+
+          models.forEach((model) => {
+            pcsObj[model.itemId] = model
+          })
           res.data?.pcsItemList.forEach((item) => {
-            if (models.map((model) => model.itemId).includes(item.itemId)) {
+            if (pcsObj[item.itemId]) {
               pcsItemList.push({
-                ...item,
-                id: uuidv4(),
+                ...pcsObj[item.itemId],
                 isUsed: false,
+                id: uuidv4(),
               })
             }
           })
@@ -160,147 +188,6 @@ export default function CircuitTrestleSetting({ id }) {
     }
   }
 
-  // 옵션 Y/N
-  const getOptYn = () => {
-    return {
-      maxConnYn: pcsCheck.max ? 'Y' : 'N',
-      smpCirYn: pcsCheck.division ? 'Y' : 'N',
-      coldZoneYn: managementState?.coldRegionFlg === '1' ? 'Y' : 'N',
-    }
-  }
-
-  // PCS 아이템 목록
-  const getPcsItemList = () => {
-    return models.map((model) => {
-      return {
-        itemId: model.itemId,
-        pcsMkrCd: model.pcsMkrCd,
-        pcsSerCd: model.pcsSerCd,
-      }
-    })
-  }
-
-  // 선택된 PCS 아이템 목록
-  const getSelectedPcsItemList = () => {
-    return selectedModels.map((model) => {
-      return {
-        itemId: model.itemId,
-        pcsMkrCd: model.pcsMkrCd,
-        pcsSerCd: model.pcsSerCd,
-      }
-    })
-  }
-
-  // 사용된 모듈아이템 목록
-  const getUseModuleItemList = () => {
-    return selectedModules?.itemList?.map((m) => {
-      return {
-        itemId: m.itemId,
-        mixMatlNo: m.mixMatlNo,
-      }
-    })
-  }
-
-  // 지붕면 목록
-  const getRoofSurfaceList = () => {
-    const roofSurfaceList = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
-    roofSurfaceList.sort((a, b) => a.left - b.left || b.top - a.top)
-    return roofSurfaceList
-      .map((obj) => {
-        return {
-          roofSurfaceId: obj.id,
-          roofSurface: canvas
-            .getObjects()
-            .filter((o) => o.id === obj.parentId)[0]
-            .directionText.replace(/[0-9]/g, ''),
-          roofSurfaceIncl: canvas.getObjects().filter((o) => o.id === obj.parentId)[0].roofMaterial.pitch,
-          moduleList: getModuleList(obj).map((module) => {
-            return {
-              itemId: module.moduleInfo.itemId,
-              circuit: module.circuitNumber ? module.circuitNumber : null,
-              pcsItemId: module.circuit ? module.circuit?.pcsItemId : null,
-              uniqueId: module.id ? module.id : null,
-            }
-          }),
-        }
-      })
-      .filter((surface) => surface.moduleList.length > 0)
-  }
-
-  // 모듈 목록
-  const getModuleList = (surface) => {
-    let moduleList = []
-    let [xObj, yObj] = [{}, {}]
-    let [xPoints, yPoints] = [[], []]
-    surface.modules.forEach((module) => {
-      if (!xObj[module.left]) {
-        xObj[module.left] = module.left
-        xPoints.push(module.left)
-      }
-      if (!yObj[module.top]) {
-        yObj[module.top] = module.top
-        yPoints.push(module.top)
-      }
-    })
-    switch (surface.direction) {
-      case 'south':
-        xPoints.sort((a, b) => a - b)
-        yPoints.sort((a, b) => b - a)
-        yPoints.forEach((y, index) => {
-          let temp = surface.modules.filter((m) => m.top === y)
-          if (index % 2 === 0) {
-            temp.sort((a, b) => a.left - b.left)
-          } else {
-            temp.sort((a, b) => b.left - a.left)
-          }
-          moduleList = [...moduleList, ...temp]
-        })
-        break
-      case 'north':
-        xPoints.sort((a, b) => b - a)
-        yPoints.sort((a, b) => a - b)
-        yPoints.forEach((y, index) => {
-          let temp = surface.modules.filter((m) => m.top === y)
-          if (index % 2 === 0) {
-            temp.sort((a, b) => b.left - a.left)
-          } else {
-            temp.sort((a, b) => a.left - b.left)
-          }
-          moduleList = [...moduleList, ...temp]
-        })
-        break
-      case 'west':
-        xPoints.sort((a, b) => a - b)
-        yPoints.sort((a, b) => a - b)
-        xPoints.forEach((x, index) => {
-          let temp = surface.modules.filter((m) => m.left === x)
-          if (index % 2 === 0) {
-            temp.sort((a, b) => a.top - b.top)
-          } else {
-            temp.sort((a, b) => b.top - a.top)
-          }
-          moduleList = [...moduleList, ...temp]
-        })
-        break
-      case 'east':
-        xPoints.sort((a, b) => b - a)
-        yPoints.sort((a, b) => b - a)
-        xPoints.forEach((x, index) => {
-          let temp = surface.modules.filter((m) => m.left === x)
-          if (index % 2 === 0) {
-            temp.sort((a, b) => b.top - a.top)
-          } else {
-            temp.sort((a, b) => a.top - b.top)
-          }
-          moduleList = [...moduleList, ...temp]
-        })
-        break
-      default:
-        return []
-    }
-    return moduleList
-  }
-
   // 자동할당 버튼 클릭 시
   const onAutoAllocation = () => {
     let moduleStdQty = 0
@@ -464,12 +351,6 @@ export default function CircuitTrestleSetting({ id }) {
     // removeNotAllocationModules()
   }
 
-  const removeNotAllocationModules = () => {
-    const notAllocationModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE && !obj.circuit)
-    canvas.remove(...notAllocationModules)
-    canvas.renderAll()
-  }
-
   // 이전 버튼 클릭 시
   const onClickPrev = () => {
     setAllocationType(ALLOCATION_TYPE.AUTO)
diff --git a/src/hooks/useCirCuitTrestle.js b/src/hooks/useCirCuitTrestle.js
new file mode 100644
index 00000000..db427817
--- /dev/null
+++ b/src/hooks/useCirCuitTrestle.js
@@ -0,0 +1,187 @@
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import { POLYGON_TYPE } from '@/common/common'
+import { canvasState } from '@/store/canvasAtom'
+import { makersState, modelsState, pcsCheckState, selectedMakerState, selectedModelsState, seriesState } from '@/store/circuitTrestleAtom'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
+import { useContext } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+
+export function useCircuitTrestle() {
+  const [makers, setMakers] = useRecoilState(makersState)
+  const [selectedMaker, setSelectedMaker] = useRecoilState(selectedMakerState)
+  const [series, setSeries] = useRecoilState(seriesState)
+  const [models, setModels] = useRecoilState(modelsState)
+  const [selectedModels, setSelectedModels] = useRecoilState(selectedModelsState)
+  const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
+  const selectedModules = useRecoilValue(selectedModuleState)
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const canvas = useRecoilValue(canvasState)
+  const getOptYn = () => {
+    return {
+      maxConnYn: pcsCheck.max ? 'Y' : 'N',
+      smpCirYn: pcsCheck.division ? 'Y' : 'N',
+      coldZoneYn: managementState?.coldRegionFlg === '1' ? 'Y' : 'N',
+    }
+  }
+  // PCS 아이템 목록
+  const getPcsItemList = () => {
+    return models.map((model) => {
+      return {
+        itemId: model.itemId,
+        pcsMkrCd: model.pcsMkrCd,
+        pcsSerCd: model.pcsSerCd,
+      }
+    })
+  }
+
+  // 선택된 PCS 아이템 목록
+  const getSelectedPcsItemList = () => {
+    return selectedModels.map((model) => {
+      return {
+        itemId: model.itemId,
+        pcsMkrCd: model.pcsMkrCd,
+        pcsSerCd: model.pcsSerCd,
+      }
+    })
+  }
+
+  // 사용된 모듈아이템 목록
+  const getUseModuleItemList = () => {
+    return selectedModules?.itemList?.map((m) => {
+      return {
+        itemId: m.itemId,
+        mixMatlNo: m.mixMatlNo,
+      }
+    })
+  }
+
+  // 지붕면 목록
+  const getRoofSurfaceList = () => {
+    const roofSurfaceList = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+    roofSurfaceList.sort((a, b) => a.left - b.left || b.top - a.top)
+    return roofSurfaceList
+      .map((obj) => {
+        return {
+          roofSurfaceId: obj.id,
+          roofSurface: canvas
+            .getObjects()
+            .filter((o) => o.id === obj.parentId)[0]
+            .directionText.replace(/[0-9]/g, ''),
+          roofSurfaceIncl: canvas.getObjects().filter((o) => o.id === obj.parentId)[0].roofMaterial.pitch,
+          moduleList: getModuleList(obj).map((module) => {
+            return {
+              itemId: module.moduleInfo.itemId,
+              circuit: module.circuitNumber ? module.circuitNumber : null,
+              pcsItemId: module.circuit ? module.circuit?.pcsItemId : null,
+              uniqueId: module.id ? module.id : null,
+            }
+          }),
+        }
+      })
+      .filter((surface) => surface.moduleList.length > 0)
+  }
+
+  // 모듈 목록
+  const getModuleList = (surface) => {
+    let moduleList = []
+    let [xObj, yObj] = [{}, {}]
+    let [xPoints, yPoints] = [[], []]
+    surface.modules.forEach((module) => {
+      if (!xObj[module.left]) {
+        xObj[module.left] = module.left
+        xPoints.push(module.left)
+      }
+      if (!yObj[module.top]) {
+        yObj[module.top] = module.top
+        yPoints.push(module.top)
+      }
+    })
+    switch (surface.direction) {
+      case 'south':
+        xPoints.sort((a, b) => a - b)
+        yPoints.sort((a, b) => b - a)
+        yPoints.forEach((y, index) => {
+          let temp = surface.modules.filter((m) => m.top === y)
+          if (index % 2 === 0) {
+            temp.sort((a, b) => a.left - b.left)
+          } else {
+            temp.sort((a, b) => b.left - a.left)
+          }
+          moduleList = [...moduleList, ...temp]
+        })
+        break
+      case 'north':
+        xPoints.sort((a, b) => b - a)
+        yPoints.sort((a, b) => a - b)
+        yPoints.forEach((y, index) => {
+          let temp = surface.modules.filter((m) => m.top === y)
+          if (index % 2 === 0) {
+            temp.sort((a, b) => b.left - a.left)
+          } else {
+            temp.sort((a, b) => a.left - b.left)
+          }
+          moduleList = [...moduleList, ...temp]
+        })
+        break
+      case 'west':
+        xPoints.sort((a, b) => a - b)
+        yPoints.sort((a, b) => a - b)
+        xPoints.forEach((x, index) => {
+          let temp = surface.modules.filter((m) => m.left === x)
+          if (index % 2 === 0) {
+            temp.sort((a, b) => a.top - b.top)
+          } else {
+            temp.sort((a, b) => b.top - a.top)
+          }
+          moduleList = [...moduleList, ...temp]
+        })
+        break
+      case 'east':
+        xPoints.sort((a, b) => b - a)
+        yPoints.sort((a, b) => b - a)
+        xPoints.forEach((x, index) => {
+          let temp = surface.modules.filter((m) => m.left === x)
+          if (index % 2 === 0) {
+            temp.sort((a, b) => b.top - a.top)
+          } else {
+            temp.sort((a, b) => a.top - b.top)
+          }
+          moduleList = [...moduleList, ...temp]
+        })
+        break
+      default:
+        return []
+    }
+    return moduleList
+  }
+
+  const removeNotAllocationModules = () => {
+    const notAllocationModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE && !obj.circuit)
+    canvas.remove(...notAllocationModules)
+    canvas.renderAll()
+  }
+
+  const setPowerConditionerData = () => {}
+
+  return {
+    makers,
+    setMakers,
+    selectedMaker,
+    setSelectedMaker,
+    series,
+    setSeries,
+    models,
+    setModels,
+    selectedModels,
+    setSelectedModels,
+    pcsCheck,
+    setPcsCheck,
+    getOptYn,
+    getPcsItemList,
+    getSelectedPcsItemList,
+    getUseModuleItemList,
+    getRoofSurfaceList,
+    getModuleList,
+    removeNotAllocationModules,
+  }
+}
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 04c3ddb0..bb5ff100 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -535,7 +535,15 @@ input[type=text]{
         }
     }
 }
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
 
+input[type=number] {
+    -moz-appearance: textfield;
+}
 
 
 // check-btn