diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index 736c4f48..d53c1f4f 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -440,6 +440,7 @@ export default function CircuitTrestleSetting({ id }) {
     seletedOption,
     setSeletedOption,
     getModuleList,
+    setModuleStatisticsData,
   }
 
   // 승압설정 목록 조회
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
index d9398aa7..d8fa01e5 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
@@ -28,6 +28,7 @@ export default function StepUp(props) {
     setSelectedModels,
     getSelectedPcsItemList,
     getModuleList,
+    setModuleStatisticsData,
   } = props
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
@@ -148,6 +149,7 @@ export default function StepUp(props) {
           })
 
           canvas.renderAll()
+          setModuleStatisticsData()
         } else {
           swalFire({ text: getMessage('common.message.send.error') })
           // swalFire({
@@ -467,6 +469,7 @@ export default function StepUp(props) {
     })
 
     canvas.renderAll()
+    setModuleStatisticsData()
   }
 
   // 현재 선택된 값들을 가져오는 함수 추가
@@ -511,114 +514,7 @@ export default function StepUp(props) {
   return (
     <>
       <div className="properties-setting-wrap outer">
-        <div className="circuit-overflow">
-          {/* 3개일때 className = by-max */}
-          {stepUpListData.map((stepUp, index) => (
-            <div key={index} className={`module-table-box ${stepUp.pcsItemList.length === 3 ? 'by-max' : ''}`}>
-              {stepUp?.pcsItemList.map((pcsItem, idx) => (
-                <div key={idx} className="module-table-inner">
-                  <div className="mb-box">
-                    <div className="circuit-table-tit">{stepUp.pcsItemList[idx].goodsNo}</div>
-                    <div className="roof-module-table overflow-y min">
-                      <table>
-                        <thead>
-                          <tr>
-                            <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.serial.amount')}</th>
-                            <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.total.amount')}</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {pcsItem.serQtyList.map((item, serQtyIdx) => {
-                            return (
-                              <tr
-                                key={`row-${serQtyIdx}`}
-                                className={`${item.selected ? 'on' : ''}`}
-                                onClick={() => handleRowClick(idx, serQtyIdx)}
-                                style={{ cursor: allocationType === 'auto' ? 'pointer' : 'default' }}
-                              >
-                                <td className="al-r">{item.serQty}</td>
-                                <td className="al-r">{item.paralQty}</td>
-                              </tr>
-                            )
-                          })}
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                  <div className="module-box-tab mb10">
-                    <button
-                      className={`module-btn ${(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 1 ? 'act' : ''}`}
-                      onClick={() => handleTabChange(stepUp.pcsItemList[idx].goodsNo, idx, 1)}
-                    >
-                      {getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
-                    </button>
-                    <button
-                      className={`module-btn ${(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 2 ? 'act' : ''}`}
-                      onClick={() => handleTabChange(stepUp.pcsItemList[idx].goodsNo, idx, 2)}
-                    >
-                      {getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
-                    </button>
-                  </div>
-                  <div className="circuit-table-flx-wrap">
-                    {(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 1 && (
-                      <div className="circuit-table-flx-box">
-                        <div className="roof-module-table min mb10">
-                          <table>
-                            <thead>
-                              <tr>
-                                <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
-                                <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}</th>
-                                <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              <tr>
-                                <td className="al-c">
-                                  {stepUp.pcsItemList[idx].connList?.[0]?.goodsNo ? stepUp.pcsItemList[idx].connList?.[0]?.goodsNo : '-'}
-                                </td>
-                                <td className="al-c">
-                                  {stepUp.pcsItemList[idx].connList?.[0]?.connMaxParalCnt
-                                    ? (stepUp.pcsItemList[idx].connList?.[0]?.connMaxParalCnt ?? '-')
-                                    : '-'}
-                                </td>
-                                <td className="al-c">
-                                  {stepUp.pcsItemList[idx].connList?.[0]?.vstuParalCnt ? stepUp.pcsItemList[idx].connList?.[0]?.vstuParalCnt : '-'}
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                    )}
-                    {(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 2 && (
-                      <div className="circuit-table-flx-box">
-                        <div className="roof-module-table min mb10">
-                          <table>
-                            <thead>
-                              <tr>
-                                {/* <th>名称</th>
-                                <th>昇圧回路数</th> */}
-                                <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
-                                <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              <tr>
-                                <td className="al-c">-</td>
-                                <td className="al-c">-</td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-        <div className="slope-wrap">
+        <div className="circuit-title-sel">
           <div className="outline-form">
             <span className="mr10" style={{ width: 'auto' }}>
               {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
@@ -642,6 +538,116 @@ export default function StepUp(props) {
             )}
           </div>
         </div>
+
+        <div className="slope-wrap">
+          <div className="circuit-overflow">
+            {/* 3개일때 className = by-max */}
+            {stepUpListData.map((stepUp, index) => (
+              <div key={index} className={`module-table-box ${stepUp.pcsItemList.length === 3 ? 'by-max' : ''}`}>
+                {stepUp?.pcsItemList.map((pcsItem, idx) => (
+                  <div key={idx} className="module-table-inner">
+                    <div className="mb-box">
+                      <div className="circuit-table-tit">{stepUp.pcsItemList[idx].goodsNo}</div>
+                      <div className="roof-module-table overflow-y min">
+                        <table>
+                          <thead>
+                            <tr>
+                              <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.serial.amount')}</th>
+                              <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.total.amount')}</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {pcsItem.serQtyList.map((item, serQtyIdx) => {
+                              return (
+                                <tr
+                                  key={`row-${serQtyIdx}`}
+                                  className={`${item.selected ? 'on' : ''}`}
+                                  onClick={() => handleRowClick(idx, serQtyIdx)}
+                                  style={{ cursor: allocationType === 'auto' ? 'pointer' : 'default' }}
+                                >
+                                  <td className="al-r">{item.serQty}</td>
+                                  <td className="al-r">{item.paralQty}</td>
+                                </tr>
+                              )
+                            })}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                    <div className="module-box-tab mb10">
+                      <button
+                        className={`module-btn ${(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 1 ? 'act' : ''}`}
+                        onClick={() => handleTabChange(stepUp.pcsItemList[idx].goodsNo, idx, 1)}
+                      >
+                        {getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
+                      </button>
+                      <button
+                        className={`module-btn ${(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 2 ? 'act' : ''}`}
+                        onClick={() => handleTabChange(stepUp.pcsItemList[idx].goodsNo, idx, 2)}
+                      >
+                        {getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
+                      </button>
+                    </div>
+                    <div className="circuit-table-flx-wrap">
+                      {(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 1 && (
+                        <div className="circuit-table-flx-box">
+                          <div className="roof-module-table min mb10">
+                            <table>
+                              <thead>
+                                <tr>
+                                  <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
+                                  <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}</th>
+                                  <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr>
+                                  <td className="al-c">
+                                    {stepUp.pcsItemList[idx].connList?.[0]?.goodsNo ? stepUp.pcsItemList[idx].connList?.[0]?.goodsNo : '-'}
+                                  </td>
+                                  <td className="al-c">
+                                    {stepUp.pcsItemList[idx].connList?.[0]?.connMaxParalCnt
+                                      ? (stepUp.pcsItemList[idx].connList?.[0]?.connMaxParalCnt ?? '-')
+                                      : '-'}
+                                  </td>
+                                  <td className="al-c">
+                                    {stepUp.pcsItemList[idx].connList?.[0]?.vstuParalCnt ? stepUp.pcsItemList[idx].connList?.[0]?.vstuParalCnt : '-'}
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+                      )}
+                      {(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 2 && (
+                        <div className="circuit-table-flx-box">
+                          <div className="roof-module-table min mb10">
+                            <table>
+                              <thead>
+                                <tr>
+                                  {/* <th>名称</th>
+                                <th>昇圧回路数</th> */}
+                                  <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
+                                  <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr>
+                                  <td className="al-c">-</td>
+                                  <td className="al-c">-</td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
     </>
   )
diff --git a/src/hooks/useCirCuitTrestle.js b/src/hooks/useCirCuitTrestle.js
index a0b77644..0d811dfd 100644
--- a/src/hooks/useCirCuitTrestle.js
+++ b/src/hooks/useCirCuitTrestle.js
@@ -208,7 +208,7 @@ export function useCircuitTrestle() {
       surface.modules.forEach((module) => {
         if (!surfaceObjects[surface.id][module.moduleInfo.itemId]) {
           // 지붕면에 모듈 존재 여부
-          surfaceObjects[surface.id][module.moduleInfo.itemId] = new Big(0) // 모듈 초기화
+          surfaceObjects[surface.id][module.moduleInfo.itemId] = Big(0) // 모듈 초기화
         }
 
         surfaceObjects[surface.id][module.moduleInfo.itemId]++
@@ -266,7 +266,7 @@ export function useCircuitTrestle() {
     })
     let ftWpOut = 0
     tempRows.forEach((row) => {
-      ftWpOut = Big(ftWpOut).plus(+row.wpOut).toNumber()
+      ftWpOut = Big(ftWpOut).plus(Big(row.wpOut)).toNumber()
     })
 
     const tempFooter = {
@@ -277,9 +277,11 @@ export function useCircuitTrestle() {
     selectedModules.itemList.forEach((module) => {
       let wpOut = 0
       tempRows.forEach((row) => {
-        wpOut = Big(wpOut)
-          .plus(+row[module.itemId] ?? 0)
-          .toNumber()
+        if (row[module.itemId]) {
+          wpOut = Big(wpOut)
+            .plus(Big(row[module.itemId] ?? 0))
+            .toNumber()
+        }
       })
       tempFooter[module.itemId] = wpOut
     })
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 95db2ea7..b6e2d322 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -142,8 +142,28 @@ $alert-color: #101010;
         background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
     }
 }
+
 .modal-body{
+    position: relative;
     padding: 24px;
+    .left-bar{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 5px;
+        height: 100%;
+        background-color: #000;
+        cursor: pointer;
+    }
+    .right-bar{
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 5px;
+        height: 100%;
+        background-color: #000;
+        cursor: pointer;
+    }
     .modal-btn-wrap{
         display: flex;
         align-items: center;
@@ -524,7 +544,7 @@ $alert-color: #101010;
     align-items: center;
     gap: 10px;
     &.place{
-        gap: 15px;
+        gap: 33px;
         .outline-form{
             span{
                 width: fit-content;
@@ -1648,7 +1668,6 @@ $alert-color: #101010;
 
 .circuit-overflow{
     overflow-x: auto;
-    margin-bottom: 25px;
     &::-webkit-scrollbar {
         height: 4px;
         background-color: transparent;
@@ -1666,6 +1685,42 @@ $alert-color: #101010;
         }
     }
 }
+.circuit-title-sel{
+    padding-bottom: 14px;
+    .outline-form{
+        span{
+            color: #62C207;
+        }
+        .grid-select{
+            .sort-select{
+                border: 1px solid #4E9E04;
+                background-color: #1A3104;
+                p{
+                    line-height: 27px;
+                }
+                .select-item-wrap{
+                    background-color: #1A3104;
+                    border: 1px solid #4E9E04;
+                    .select-item:hover{
+                        background-color: #294e07;
+                    }
+                    &::-webkit-scrollbar {
+                        width: 2px;
+                        background-color: transparent;
+                        
+                    }
+                    &::-webkit-scrollbar-thumb {
+                        background-color: #fff;
+                        border-radius: 10px;
+                    }
+                    &::-webkit-scrollbar-track {
+                        background-color: transparent;
+                    }
+                }
+            }
+        } 
+    }
+}
 
 .circuit-table-flx-wrap{
     display: flex;