Merge branch 'dev' into dev-yj

2025-01-10 18:58:35 +09:00 · 2025-01-10 18:58:35 +09:00 · 7cc69df808
commit 7cc69df808
parent 228c1997bc 26bd4ac9e0
16 changed files with 2438 additions and 2639 deletions
--- a/src/components/estimate/Estimate.jsx
+++ b/src/components/estimate/Estimate.jsx
@ -221,7 +221,6 @@ export default function Estimate({}) {
      files.map((row) => {
        fileList.push(row.data)
        setEstimateContextState({ fileList: row.data, newFileList: fileList })
-        // setEstimateContextState({ fileList: row.data })
      })
    } else {
      setEstimateContextState({ fileList: [], newFileList: [] })
@ -235,19 +234,26 @@ export default function Estimate({}) {
      setFiles([])
      setOriginFiles(estimateContextState.fileList)
    } else {
-      if (originFiles.length > 0) {
-        if (isEmptyArray(files)) {
-          let file
-          file = originFiles.filter((item) => item.delFlg === '0')
-          setEstimateContextState({
-            originFiles: file,
-          })
-          setOriginFiles(file)
+      if (estimateContextState?.resetFlag === 'Y') {
+        originReset()
+      } else {
+        if (originFiles.length > 0) {
+          if (isEmptyArray(files)) {
+            let file
+            file = originFiles.filter((item) => item.delFlg === '0')
+            setEstimateContextState({
+              originFiles: file,
+            })
+            setOriginFiles(file)
+          }
        }
      }
    }
  }, [estimateContextState?.fileList])

+  const originReset = () => {
+    setOriginFiles([])
+  }
  // 삭제누른 첨부파일 복원
  const returnOriginFile = (no) => {
    originFiles.map((file) => {
@ -338,19 +344,6 @@ export default function Estimate({}) {
    //프라이싱 했을때 priceCd setEstimateContextState
    //화면에 보여지는 값은 showPriceCd로 관리
    setShowPriceCd(priceCd)
-    // return
-    // const param = {
-    //   saleStoreId: session.storeId,
-    //   sapSalesStoreCd: session.custCd,
-    //   docTpCd: priceCd,
-    // }
-
-    // const apiUrl = `/api/estimate/price/store-price-list?${queryStringFormatter(param)}`
-    // get({ url: apiUrl }).then((res) => {
-    //   if (isNotEmptyArray(res?.data)) {
-    //     setStorePriceList(res.data)
-    //   }
-    // })
  }

  const makeUniqueSpecialNoteCd = (itemList) => {
@ -648,6 +641,7 @@ export default function Estimate({}) {
      updates.openFlg = res.openFlg

      if (estimateContextState.estimateType === 'YJSS') {
+        // console.log('YJSS:::,', res.pkgMaterialFlg)
        if (res.pkgMaterialFlg === '0') {
          updates.showSalePrice = '0'
          updates.showSaleTotPrice = '0'
@ -662,6 +656,7 @@ export default function Estimate({}) {
      //104671
      let bomList = res.itemBomList

+      // console.log('updates::', updates)
      updateList = estimateContextState.itemList.map((item) => {
        if (item.dispOrder === dispOrder) {
          if (item?.addFlg) {
@ -816,6 +811,7 @@ export default function Estimate({}) {
      }

      const calculateYJSSTotals = (itemList) => {
+        // console.log(':::itemList::', itemList)
        itemList.sort((a, b) => a.dispOrder - b.dispOrder)
        makeUniqueSpecialNoteCd(itemList)
        itemList.forEach((item) => {
@ -926,6 +922,10 @@ export default function Estimate({}) {
    setEstimateContextState({ remarks: e.target.value })
  }

+  useEffect(() => {
+    // console.log('리셋여부::', estimateContextState.resetFlag)
+  }, [estimateContextState.resetFlag])
+
  return (
    <div className="sub-content estimate">
      <div className="sub-content-inner">
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@ -63,7 +63,7 @@ export default function CanvasMenu(props) {
  const { handleZoomClear, handleZoom } = useCanvasEvent()
  const { handleMenu } = useMenu()

-  const { handleEstimateSubmit } = useEstimateController()
+  const { handleEstimateSubmit, fetchSetting } = useEstimateController()
  const estimateRecoilState = useRecoilValue(estimateState)
  const [estimatePopupOpen, setEstimatePopupOpen] = useState(false)
  const [estimateCopyPopupOpen, setEstimateCopyPopupOpen] = useState(false)
@ -252,16 +252,21 @@ export default function CanvasMenu(props) {

  // 견적서 초기화 버튼
  const handleEstimateReset = () => {
-    return alert('개발전입니다;;;')
-    // console.log('estimateRecoilState::', estimateRecoilState)
-    //objectNo, planNo
    swalFire({
      //저장된 견적서 정보가 초기화되고, 도면정보가 반영됩니다. 정말로 초기화 하시겠습니까?
      //물건정보
      text: getMessage('estimate.detail.reset.confirmMsg'),
      type: 'confirm',
-      confirmFn: () => {
-        console.log('내용초기화 및 변경일시 갱신')
+      confirmFn: async () => {
+        const params = {
+          objectNo: objectNo,
+          planNo: pid,
+          userId: sessionState.userId,
+        }
+        //디테일 호출
+        await promisePost({ url: '/api/estimate/reset-estimate', data: params }).then((res) => {
+          fetchSetting(objectNo, pid, 'R')
+        })
      },
      denyFn: () => {
        console.log('초기화하지 않음. 변경일시 갱신안함')
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@ -1,23 +1,106 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useState } from 'react'
+import { useState, useEffect, useContext } from 'react'
 import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect'
 import CircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/CircuitAllocation'
 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 { useAxios } from '@/hooks/useAxios'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { get } from 'react-hook-form'
+import { correntObjectNoState } from '@/store/settingAtom'
+import { useRecoilValue } from 'recoil'
+import { GlobalDataContext } from '@/app/GlobalDataProvider'

+const ALLOCATION_TYPE = {
+  AUTO: 'auto',
+  PASSIVITY: 'passivity',
+}
 export default function CircuitTrestleSetting({ id }) {
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
+  // 탭 번호 1: 파워 컨디셔너 선택(+수동 설정)
+  // 탭 번호 2: 회로 할당
  const [tabNum, setTabNum] = useState(1)
+  const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
+  const [makers, setMakers] = useState([])
+  const [series, setSeries] = useState([])
+  const [models, setModels] = useState([])
+  const [selectedMaker, setSelectedMaker] = useState(null)
+  const [selectedModels, setSelectedModels] = useState(null)
+  const [selectedSeries, setSelectedSeries] = useState(null)
+  const correntObjectNo = useRecoilValue(correntObjectNoState)
+  const { getPcsMakerList } = useMasterController()
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const apply = () => {
+    closePopup(id)
+  }
+
+  useEffect(() => {
+    getPcsMakerList().then((res) => {
+      setMakers(res.data)
+    })
+    if (!managementState) {
+      console.log('🚀 ~ useEffect ~ managementState:', managementState)
+      setManagementState(managementStateLoaded)
+    }
+    console.log('🚀 ~ useEffect ~ managementState:', managementState)
+    // promiseGet({ url: `/api/object/${correntObjectNo}/detail` }).then((res) => {
+    //   console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res)
+    //   // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량)
+    // })
+  }, [])
+
+  useEffect(() => {
+    if (selectedMaker) {
+      getPcsMakerList(selectedMaker).then((res) => {
+        const series = res.data.map((series) => {
+          return { ...series, selected: false }
+        })
+        setSeries(series)
+      })
+    }
+  }, [selectedMaker])
+
+  useEffect(() => {
+    console.log('🚀 ~ CircuitTrestleSetting ~ series:', series)
+    const selectedSeries = series.filter((s) => s.selectd).map((s) => s.pcsSerCd)
+    if (selectedSeries.length > 0) {
+      getPcsMakerList(selectedSeries).then((res) => {
+        setModels(res.data)
+      })
+    }
+  }, [series])
+  // 회로 할당 유형
  const [circuitAllocationType, setCircuitAllocationType] = useState(1)
+
+  const powerConditionalSelectProps = {
+    tabNum,
+    setTabNum,
+    makers,
+    selectedMaker,
+    setSelectedMaker,
+    series,
+    setSeries,
+    selectedSeries,
+    setSelectedSeries,
+    models,
+    setModels,
+    selectedModels,
+    setSelectedModels,
+    managementState,
+  }
  const circuitProps = {
+    tabNum,
+    setTabNum,
    circuitAllocationType,
    setCircuitAllocationType,
  }
+
  return (
    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
-      <div className={`modal-pop-wrap lx-2`}>
+      <div className={`modal-pop-wrap l-2`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
          <button className="modal-close" onClick={() => closePopup(id)}>
@ -26,36 +109,45 @@ export default function CircuitTrestleSetting({ id }) {
        </div>
        <div className="modal-body">
          <div className="roof-module-tab">
-            <div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act' : ''}`}>
-              {getMessage('modal.circuit.trestle.setting.power.conditional.select')}
+            <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
+            <span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
+            <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
+              {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
            </div>
-            <span className={`tab-arr ${tabNum === 2 || tabNum === 3 ? 'act' : ''}`}></span>
-            <div className={`module-tab-bx ${tabNum === 2 || tabNum === 3 ? 'act' : ''}`}>
-              {getMessage('modal.circuit.trestle.setting.circuit.allocation')}
-            </div>
-            <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
-            <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.circuit.trestle.setting.step.up.allocation')}</div>
          </div>
-          {tabNum === 1 && <PowerConditionalSelect />}
-          {tabNum === 2 && <CircuitAllocation {...circuitProps} />}
-          {tabNum === 3 && <StepUp />}
-          <div className="grid-btn-wrap">
-            {tabNum !== 1 && (
-              <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && <PassivityCircuitAllocation {...powerConditionalSelectProps} />}
+          {tabNum === 2 && <StepUp />}
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
+            <div className="grid-btn-wrap">
+              <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
+              </button>
+              <button className="btn-frame modal act" onClick={() => setAllocationType(ALLOCATION_TYPE.PASSIVITY)}>
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
+              </button>
+            </div>
+          )}
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
+            <div className="grid-btn-wrap">
+              <button className="btn-frame modal mr5" onClick={() => setAllocationType(ALLOCATION_TYPE.AUTO)}>
                {getMessage('modal.common.prev')}
              </button>
-            )}
-            {tabNum !== 3 && (
-              <button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
-                Next
+              <button className="btn-frame modal act" onClick={() => setTabNum(2)}>
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
              </button>
-            )}
-            {tabNum === 3 && (
-              <button className="btn-frame modal act">
-                {`${getMessage('modal.common.save')} (${getMessage('modal.circuit.trestle.setting.alloc.trestle')})`}
+            </div>
+          )}
+          {tabNum === 2 && (
+            <div className="grid-btn-wrap">
+              <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>
+                {getMessage('modal.common.prev')}
              </button>
-            )}
-          </div>
+              <button className="btn-frame modal act" onClick={() => apply()}>
+                {getMessage('modal.common.save')}({getMessage('modal.circuit.trestle.setting.circuit.allocation')})
+              </button>
+            </div>
+          )}
        </div>
      </div>
    </WithDraggable>
--- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
@ -1,89 +1,91 @@
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
+import { globalLocaleStore } from '@/store/localeAtom'
 import { useState } from 'react'
+import { useRecoilValue } from 'recoil'

 const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]

-export default function PowerConditionalSelect({ setTabNum }) {
+export default function PowerConditionalSelect(props) {
+  const {
+    makers,
+    selectedMaker,
+    setSelectedMaker,
+    series,
+    setSeries,
+    selectedSeries,
+    setSelectedSeries,
+    models,
+    selectedModels,
+    tabNum,
+    setTabNum,
+    managementState,
+  } = props
  const { getMessage } = useMessage()
  const [selectedRowIndex, setSelectedRowIndex] = useState(null)
  const [powerConditions, setPowerConditions] = useState([])
-  const seriesData = {
-    header: [
-      { name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' },
-      {
-        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
-        width: '10%',
-        prop: 'ratedOutput',
-      },
-      {
-        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}`,
-        width: '10%',
-        prop: 'circuitAmount',
-      },
-      {
-        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.connection')}`,
-        width: '10%',
-        prop: 'maxConnection',
-      },
-      {
-        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.overload')}`,
-        width: '10%',
-        prop: 'maxOverload',
-      },
-      {
-        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.output.current')}`,
-        width: '10%',
-        prop: 'outputCurrent',
-      },
-    ],
-    rows: [
-      {
-        name: { name: 'PCSオプションマスター', color: '#AA6768' },
-        ratedOutput: { name: '2' },
-        circuitAmount: { name: '2' },
-        maxConnection: { name: '-' },
-        maxOverload: { name: '-' },
-        outputCurrent: { name: '-' },
-      },
-      {
-        name: { name: 'HQJP-KA40-5', color: '#AA6768' },
-        ratedOutput: { name: '2' },
-        circuitAmount: { name: '2' },
-        maxConnection: { name: '-' },
-        maxOverload: { name: '-' },
-        outputCurrent: { name: '-' },
-      },
-      {
-        name: { name: 'Re.RISE-G3 440', color: '#AA6768' },
-        ratedOutput: { name: '2' },
-        circuitAmount: { name: '2' },
-        maxConnection: { name: '-' },
-        maxOverload: { name: '-' },
-        outputCurrent: { name: '-' },
-      },
-    ],
+  const globalLocale = useRecoilValue(globalLocaleStore)
+  const modelHeader = [
+    { name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' },
+    {
+      name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
+      width: '10%',
+      prop: 'ratedOutput',
+    },
+    {
+      name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}`,
+      width: '10%',
+      prop: 'circuitAmount',
+    },
+    {
+      name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.connection')}`,
+      width: '10%',
+      prop: 'maxConnection',
+    },
+    {
+      name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.overload')}`,
+      width: '10%',
+      prop: 'maxOverload',
+    },
+    {
+      name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.output.current')}`,
+      width: '10%',
+      prop: 'outputCurrent',
+    },
+  ]
+  const onCheckSeries = (series) => {
+    setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
  }
  return (
    <>
      <div className="outline-form mb15">
-        <span className="mr10">分類 (余剰)</span>
+        <span className="mr10">
+          {getMessage('common.type')} ({getMessage(managementState?.conType === '0' ? 'stuff.detail.conType0' : 'stuff.detail.conType1')})
+        </span>
        <div className="grid-select mr10">
-          <QSelectBox title={'HQJPシリーズ'} option={SelectOption01} />
+          <QSelectBox
+            title={'PCS Maker'}
+            options={makers}
+            showKey={globalLocale === 'ko' ? 'pcsMkrNm' : 'pcsMkrNmJp'}
+            sourceKey="pcsMkrCd"
+            targetKey="pcsMkrCd"
+            value={selectedMaker}
+            onChange={(option) => setSelectedMaker(option)}
+          />
        </div>
-        <span className="thin">寒冷地仕様</span>
+        {managementState?.conType === '1' && (
+          <span className="thin">{getMessage('modal.circuit.trestle.setting.power.conditional.select.cold.region')}</span>
+        )}
      </div>
      <div className="module-table-box mb10">
        <div className="module-table-inner">
-          <div className="circuit-check-inner">
-            <div className="d-check-box pop mb15 sel">
-              <input type="checkbox" id="ch01" />
-              <label htmlFor="ch01">屋内PCS（HQJP-KA-5シリーズ）</label>
-            </div>
-            <div className="d-check-box pop sel">
-              <input type="checkbox" id="ch02" />
-              <label htmlFor="ch02">屋外マルチPCS（HQJP-RA5シリーズ）</label>
-            </div>
+          <div className="circuit-check-inner overflow">
+            {series?.map((series, index) => (
+              <div className="d-check-box pop sel">
+                <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} />
+                <label htmlFor={`"ch0"${index}`}>{globalLocale === 'ko' ? series.pcsSerNm : series.pcsSerNmJp}</label>
+              </div>
+            ))}
          </div>
        </div>
      </div>
@ -94,7 +96,7 @@ export default function PowerConditionalSelect({ setTabNum }) {
              <table>
                <thead>
                  <tr>
-                    {seriesData.header.map((header) => (
+                    {modelHeader.map((header) => (
                      <th key={header.prop} style={{ width: header.width }}>
                        {header.name}
                      </th>
@ -102,13 +104,15 @@ export default function PowerConditionalSelect({ setTabNum }) {
                  </tr>
                </thead>
                <tbody>
-                  {seriesData.rows.map((row, index) => (
-                    <tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}>
-                      {seriesData.header.map((header) => (
-                        <td>{row[header.prop].name}</td>
-                      ))}
-                    </tr>
-                  ))}
+                  {models
+                    ?.filter((model) => model.series === selectedSeries?.code)
+                    .map((row, index) => (
+                      <tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}>
+                        {modelHeader.map((header) => (
+                          <td>{row[header.prop]}</td>
+                        ))}
+                      </tr>
+                    ))}
                </tbody>
              </table>
            </div>
@ -117,22 +121,18 @@ export default function PowerConditionalSelect({ setTabNum }) {
            <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
          </div>
          <div className="circuit-data-form">
-            <span className="normal-font">
-              HQJP-KA40-5 <button className="del"></button>
-            </span>
-            <span className="normal-font">
-              HQJP-KA40-5 <button className="del"></button>
-            </span>
-            <span className="normal-font">
-              HQJP-KA40-5 <button className="del"></button>
-            </span>
+            {selectedModels?.map((model) => (
+              <span className="normal-font">
+                {model.name} <button className="del"></button>
+              </span>
+            ))}
          </div>
        </div>
      </div>
      <div className="slope-wrap">
        <div className="d-check-box pop mb15">
          <input type="checkbox" id="ch03" />
-          <label htmlFor="ch03"> {getMessage('modal.circuit.trestle.setting.power.conditional.select.check1')}</label>
+          <label htmlFor="ch03">{getMessage('modal.circuit.trestle.setting.power.conditional.select.check1')}</label>
        </div>
        <div className="d-check-box pop">
          <input type="checkbox" id="ch04" />
@ -141,6 +141,14 @@ export default function PowerConditionalSelect({ setTabNum }) {
          </label>
        </div>
      </div>
+      {/* <div className="grid-btn-wrap">
+        <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
+          {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
+        </button>
+        <button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
+          {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
+        </button>
+      </div> */}
    </>
  )
 }
--- a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
@ -1,395 +1,114 @@
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'

 const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]

 export default function StepUp({}) {
  const { getMessage } = useMessage()
+  const [moduleTab, setModuleTab] = useState(1)
+  const [arrayLength, setArrayLength] = useState(3) //module-table-inner의 반복 개수
  return (
    <>
      <div className="properties-setting-wrap outer">
-        <div className="setting-tit">{getMessage('modal.circuit.trestle.setting.step.up.allocation')}</div>
        <div className="circuit-overflow">
-          <div className="module-table-box mb10">
-            <div className="module-table-inner">
-              <div className="mb-box">
-                <div className="circuit-table-tit">HQJP-KA55-5</div>
-                <div className="roof-module-table overflow-y">
-                  <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>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div className="circuit-table-flx-wrap">
-                <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}</div>
-                  <div className="roof-module-table mb10">
+          {/* 3개일때 className = by-max */}
+          <div className={`module-table-box ${arrayLength === 3 ? 'by-max' : ''}`}>
+            {Array.from({ length: arrayLength }).map((_, idx) => (
+              <div key={idx} className="module-table-inner">
+                <div className="mb-box">
+                  <div className="circuit-table-tit">HQJP-KA55-5</div>
+                  <div className="roof-module-table overflow-y min">
                    <table>
                      <thead>
                        <tr>
-                          <th style={{ width: '140px' }}>{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>
+                          <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>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
+                        <tr className="on">
+                          <td className="al-r">10</td>
                          <td className="al-r">0</td>
                        </tr>
                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
+                          <td className="al-r">10</td>
                          <td className="al-r">0</td>
                        </tr>
                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
+                          <td className="al-r">10</td>
+                          <td className="al-r">0</td>
+                        </tr>
+                        <tr>
+                          <td className="al-r">10</td>
+                          <td className="al-r">0</td>
+                        </tr>
+                        <tr>
+                          <td className="al-r">10</td>
+                          <td className="al-r">0</td>
+                        </tr>
+                        <tr>
+                          <td className="al-r">10</td>
                          <td className="al-r">0</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
-                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
-                    </div>
-                  </div>
                </div>
-                <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}</div>
-                  <div className="roof-module-table mb10">
-                    <table>
-                      <thead>
-                        <tr>
-                          <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>
-                        <tr>
-                          <td className="al-c">-</td>
-                          <td className="al-c">-</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
+                <div className="module-box-tab mb10">
+                  <button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>
+                    {getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
+                  </button>
+                  <button className={`module-btn ${moduleTab === 2 ? 'act' : ''}`} onClick={() => setModuleTab(2)}>
+                    {getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
+                  </button>
+                </div>
+                <div className="circuit-table-flx-wrap">
+                  {moduleTab === 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">KTN-CBD4C</td>
+                              <td className="al-r">4</td>
+                              <td className="al-r">0</td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
+                  )}
+                  {moduleTab === 2 && (
+                    <div className="circuit-table-flx-box">
+                      <div className="roof-module-table min mb10">
+                        <table>
+                          <thead>
+                            <tr>
+                              <th>名称</th>
+                              <th>昇圧回路数</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr>
+                              <td className="al-c">-</td>
+                              <td className="al-c">-</td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
                    </div>
-                  </div>
+                  )}
                </div>
              </div>
-              <div className="circuit-count-input">
-                <span className="normal-font">{getMessage('modal.module.basic.setting.module.cotton.classification')}</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路</span>
-                <span className="normal-font">(二重昇圧回路数</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路)</span>
-              </div>
-            </div>
-          </div>
-          <div className="module-table-box mb10">
-            <div className="module-table-inner">
-              <div className="mb-box">
-                <div className="circuit-table-tit">HQJP-KA55-5</div>
-                <div className="roof-module-table overflow-y">
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>シリアル枚数</th>
-                        <th>総回路数</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div className="circuit-table-flx-wrap">
-                <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">接続する</div>
-                  <div className="roof-module-table mb10">
-                    <table>
-                      <thead>
-                        <tr>
-                          <th style={{ width: '140px' }}>名称</th>
-                          <th>回路数</th>
-                          <th>昇圧回路数</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">追加</button>
-                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">昇圧オプション</div>
-                  <div className="roof-module-table mb10">
-                    <table>
-                      <thead>
-                        <tr>
-                          <th>名称</th>
-                          <th>昇圧回路数</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <td className="al-c">-</td>
-                          <td className="al-c">-</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">-</td>
-                          <td className="al-c">-</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">追加</button>
-                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="circuit-count-input">
-                <span className="normal-font">綿調道区分</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路</span>
-                <span className="normal-font">(二重昇圧回路数</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路)</span>
-              </div>
-            </div>
-          </div>
-          <div className="module-table-box ">
-            <div className="module-table-inner">
-              <div className="mb-box">
-                <div className="circuit-table-tit">HQJP-KA55-5</div>
-                <div className="roof-module-table overflow-y">
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>シリアル枚数</th>
-                        <th>総回路数</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div className="circuit-table-flx-wrap">
-                <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">接続する</div>
-                  <div className="roof-module-table mb10">
-                    <table>
-                      <thead>
-                        <tr>
-                          <th style={{ width: '140px' }}>名称</th>
-                          <th>回路数</th>
-                          <th>昇圧回路数</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">追加</button>
-                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">昇圧オプション</div>
-                  <div className="roof-module-table mb10">
-                    <table>
-                      <thead>
-                        <tr>
-                          <th>名称</th>
-                          <th>昇圧回路数</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <td className="al-c">-</td>
-                          <td className="al-c">-</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">-</td>
-                          <td className="al-c">-</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">追加</button>
-                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="circuit-count-input">
-                <span className="normal-font">綿調道区分</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路</span>
-                <span className="normal-font">(二重昇圧回路数</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路)</span>
-              </div>
-            </div>
+            ))}
          </div>
        </div>
        <div className="slope-wrap">
@ -398,17 +117,11 @@ export default function StepUp({}) {
              {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
            </span>
            <div className="grid-select mr10">
-              <QSelectBox title={'電力検出ユニット (モニター付き)'} option={SelectOption01} />
+              <QSelectBox title={'電力検出ユニット (モニター付き)'} options={SelectOption01} />
            </div>
          </div>
        </div>
      </div>
-      {/*<div className="grid-btn-wrap">*/}
-      {/*  <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>*/}
-      {/*    以前*/}
-      {/*  </button>*/}
-      {/*  <button className="btn-frame modal act">保存 (仮割り当て)</button>*/}
-      {/*</div>*/}
    </>
  )
 }
--- a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
@ -5,6 +5,7 @@ export default function PassivityCircuitAllocation() {
  const moduleData = {
    header: [
      { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
+      { name: getMessage('modal.circuit.trestle.setting.circuit'), prop: 'circuit' },
      {
        name: getMessage('Q.TRON M-G2'),
        prop: 'moduleName',
@ -17,11 +18,13 @@ export default function PassivityCircuitAllocation() {
    rows: [
      {
        roofShape: { name: 'M 1' },
+        circuit: { name: 'M 1' },
        moduleName: { name: '8' },
        powerGeneration: { name: '3,400' },
      },
      {
        roofShape: { name: 'M 1' },
+        circuit: { name: 'M 1' },
        moduleName: { name: '8' },
        powerGeneration: { name: '3,400' },
      },
@ -29,74 +32,79 @@ export default function PassivityCircuitAllocation() {
  }
  return (
    <>
-      <div className="module-table-box mb10">
-        <div className="module-table-inner">
-          <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div>
-          <div className="normal-font mb15">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.info')}</div>
-          <div className="roof-module-table overflow-y">
-            <table>
-              <thead>
-                <tr>
-                  {moduleData.header.map((header) => (
-                    <th key={header.prop}>{header.name}</th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {moduleData.rows.map((row, index) => (
-                  <tr key={index}>
+      <div className="properties-setting-wrap outer">
+        <div className="setting-tit">{getMessage('modal.circuit.trestle.setting.circuit.allocation')}</div>
+        <div className="module-table-box mb10">
+          <div className="module-table-inner">
+            <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div>
+            <div className="normal-font mb15">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.info')}</div>
+            <div className="roof-module-table overflow-y">
+              <table>
+                <thead>
+                  <tr>
                    {moduleData.header.map((header) => (
-                      <td key={header.prop}>{row[header.prop].name}</td>
+                      <th key={header.prop}>{header.name}</th>
                    ))}
                  </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {moduleData.rows.map((row, index) => (
+                    <tr key={index}>
+                      {moduleData.header.map((header) => (
+                        <td className="al-c" key={header.prop}>
+                          {row[header.prop].name}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
          </div>
        </div>
-      </div>
-      <div className="module-table-box mb10">
-        <div className="module-table-inner">
-          <div className="hexagonal-wrap">
-            <div className="hexagonal-item">
-              <div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
-            </div>
-            <div className="hexagonal-item">
-              <div className="d-check-radio pop mb10">
-                <input type="radio" name="radio01" id="ra01" />
-                <label htmlFor="ra01">HQJP-KA55-5 (標準回路2枚～10枚)</label>
+        <div className="module-table-box mb10">
+          <div className="module-table-inner">
+            <div className="hexagonal-wrap">
+              <div className="hexagonal-item">
+                <div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
              </div>
-              <div className="d-check-radio pop mb10">
-                <input type="radio" name="radio01" id="ra02" />
-                <label htmlFor="ra02">HQJP-KA55-5 (標準回路2枚～10枚)</label>
-              </div>
-              <div className="d-check-radio pop">
-                <input type="radio" name="radio01" id="ra03" />
-                <label htmlFor="ra03">HQJP-KA55-5 (標準回路2枚～10枚)</label>
+              <div className="hexagonal-item">
+                <div className="d-check-radio pop mb10">
+                  <input type="radio" name="radio01" id="ra01" />
+                  <label htmlFor="ra01">HQJP-KA55-5 (標準回路2枚～10枚)</label>
+                </div>
+                <div className="d-check-radio pop mb10">
+                  <input type="radio" name="radio01" id="ra02" />
+                  <label htmlFor="ra02">HQJP-KA55-5 (標準回路2枚～10枚)</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra03" />
+                  <label htmlFor="ra03">HQJP-KA55-5 (標準回路2枚～10枚)</label>
+                </div>
              </div>
            </div>
          </div>
        </div>
-      </div>
-      <div className="slope-wrap">
-        <div className="circuit-right-wrap mb15">
-          <div className="outline-form">
-            <span className="mr10" style={{ width: 'auto' }}>
-              {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num')}
-            </span>
-            <div className="input-grid mr5" style={{ width: '70px' }}>
-              <input type="text" className="input-origin block" />
+        <div className="slope-wrap">
+          <div className="circuit-right-wrap mb15">
+            <div className="outline-form">
+              <span className="mr10" style={{ width: 'auto' }}>
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num')}
+              </span>
+              <div className="input-grid mr5" style={{ width: '70px' }}>
+                <input type="text" className="input-origin block" />
+              </div>
+              <button className="btn-frame roof">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}</button>
            </div>
          </div>
-        </div>
-        <div className="circuit-right-wrap">
-          <button className="btn-frame roof mr5">
-            {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset')}
-          </button>
-          <button className="btn-frame roof mr5">
-            {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset')}
-          </button>
-          <button className="btn-frame roof">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}</button>
+          <div className="circuit-right-wrap">
+            <button className="btn-frame roof mr5">
+              {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset')}
+            </button>
+            <button className="btn-frame roof mr5">
+              {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset')}
+            </button>
+          </div>
        </div>
      </div>
    </>
--- a/src/components/floor-plan/modal/movement/type/Updown.jsx
+++ b/src/components/floor-plan/modal/movement/type/Updown.jsx
@ -1,8 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
-import { useEffect, useState } from 'react'
-import { useEvent } from '@/hooks/useEvent'
-import { canvasState } from '@/store/canvasAtom'
+import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
+import { currentObjectState } from '@/store/canvasAtom'

 const UP_DOWN_TYPE = {
  UP: 'up',
@ -12,17 +11,18 @@ const UP_DOWN_TYPE = {
 export default function Updown({ UP_DOWN_REF }) {
  const { getMessage } = useMessage()
  const [type, setType] = useState(UP_DOWN_TYPE.UP)
-  const canvas = useRecoilValue(canvasState)
-
-  useEffect(() => {
-    if (type === UP_DOWN_TYPE.UP) {
-      UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
-      UP_DOWN_REF.UP_INPUT_REF.current.focus()
-    } else {
-      UP_DOWN_REF.UP_INPUT_REF.current.value = ''
-      UP_DOWN_REF.DOWN_INPUT_REF.current.focus()
+  const [filledInput, setFilledInput] = useState('')
+  const currentObject = useRecoilValue(currentObjectState)
+  const handleFocus = () => {
+    if (currentObject === null) {
+      UP_DOWN_REF.FILLED_INPUT_REF.current.value = ''
+      UP_DOWN_REF.FILLED_INPUT_REF.current.blur()
    }
-  }, [type])
+  }
+  const handleInput = (e) => {
+    const value = e.target.value.replace(/^0+/, '')
+    setFilledInput(value.replace(/[^0-9]/g, ''))
+  }

  return (
    <>
@ -48,7 +48,7 @@ export default function Updown({ UP_DOWN_REF }) {
            <div className="eaves-keraba-td">
              <div className="outline-form">
                <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" readOnly={true} ref={UP_DOWN_REF.UP_INPUT_REF} />
+                  {/*<input type="text" className="input-origin block" readOnly={true} ref={UP_DOWN_REF.UP_INPUT_REF} />*/}
                </div>
              </div>
            </div>
@ -71,7 +71,14 @@ export default function Updown({ UP_DOWN_REF }) {
            <div className="eaves-keraba-td">
              <div className="outline-form">
                <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.DOWN} ref={UP_DOWN_REF.DOWN_INPUT_REF} />
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    ref={UP_DOWN_REF.FILLED_INPUT_REF}
+                    value={filledInput}
+                    onFocus={handleFocus}
+                    onChange={handleInput}
+                  />
                </div>
                <span className="thin">mm</span>
              </div>
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@ -1495,7 +1495,7 @@ export default function StuffDetail() {
      if (params?.data?.planNo && params?.data?.objectNo) {
        let objectNo = params?.data?.objectNo
        let planNo = params?.data?.planNo
-        router.push(`/floor-plan?pid=${planNo}&objectNo=${objectNo}`)
+        router.push(`/floor-plan/estimate/5?pid=${planNo}&objectNo=${objectNo}`)
      }
    }
  }
--- a/src/hooks/common/useMasterController.js
+++ b/src/hooks/common/useMasterController.js
@ -118,11 +118,12 @@ export function useMasterController() {
   * @param {혼합모듈번호}      mixMatlNo
   * @returns
   */
-  const getPcsMakerList = async (params) => {
-    const paramString = getQueryString(params)
-    console.log('🚀🚀 ~ getPcsMakerList ~ paramString:', paramString)
+  const getPcsMakerList = async (params = null) => {
+    let paramString = ''
+    if (params) {
+      paramString = getQueryString(params)
+    }
    return await get({ url: '/api/v1/master/pcsMakerList' + paramString }).then((res) => {
-      console.log('🚀🚀 ~ getPcsMakerList ~ res:', res)
      return res
    })
  }
--- a/src/hooks/floorPlan/estimate/useEstimateController.js
+++ b/src/hooks/floorPlan/estimate/useEstimateController.js
@ -51,12 +51,17 @@ export const useEstimateController = (planNo) => {
  }, [fileList])

  // 상세 조회
-  const fetchSetting = async (objectNo, planNo) => {
+  const fetchSetting = async (objectNo, planNo, resetFlag) => {
    try {
      await promiseGet({ url: `/api/estimate/${objectNo}/${planNo}/detail` }).then((res) => {
        setIsGlobalLoading(true)
        if (res.status === 200) {
          if (isObjectNotEmpty(res.data)) {
+            if (resetFlag) {
+              res.data.originFiles = []
+              res.data.originFile = []
+              res.data.resetFlag = 'Y'
+            }
            if (res.data.itemList.length > 0) {
              res.data.itemList.map((item) => {
                item.delFlg = '0'
--- a/src/hooks/roofcover/useMovementSetting.js
+++ b/src/hooks/roofcover/useMovementSetting.js
@ -31,15 +31,13 @@ export function useMovementSetting(id) {
  const { swalFire } = useSwal()

  const FLOW_LINE_REF = {
-    POINTER_INPUT_REF: useRef(null),
    FILLED_INPUT_REF: useRef(null),
    DOWN_LEFT_RADIO_REF: useRef(null),
    UP_RIGHT_RADIO_REF: useRef(null),
  }

  const UP_DOWN_REF = {
-    UP_INPUT_REF: useRef(null),
-    DOWN_INPUT_REF: useRef(null),
+    FILLED_INPUT_REF: useRef(null),
    UP_RADIO_REF: useRef(null),
    DOWN_RADIO_REF: useRef(null),
  }
@ -138,6 +136,32 @@ export function useMovementSetting(id) {
  }, [])

  useEffect(() => {
+    console.log('selectedObject.current : ', selectedObject.current)
+    if (selectedObject.current != null) {
+      let wallStroke
+      switch (selectedObject.current.attributes.type) {
+        case LINE_TYPE.WALLLINE.EAVES:
+          wallStroke = '#45CD7D'
+          break
+        case LINE_TYPE.WALLLINE.HIPANDGABLE:
+          wallStroke = '#45CD7D'
+          break
+        case LINE_TYPE.WALLLINE.GABLE:
+          wallStroke = '#3FBAE6'
+          break
+        case LINE_TYPE.WALLLINE.JERKINHEAD:
+          wallStroke = '#3FBAE6'
+          break
+        case LINE_TYPE.WALLLINE.SHED:
+          wallStroke = '#000000'
+          break
+        case LINE_TYPE.WALLLINE.WALL:
+          wallStroke = '#000000'
+          break
+      }
+      selectedObject.current.set({ stroke: wallStroke })
+      selectedObject.current.bringToFront()
+    }
    selectedObject.current = null
    if (!currentObject) {
      return
@ -159,8 +183,7 @@ export function useMovementSetting(id) {
      FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = false
    }
    if (type === TYPE.UP_DOWN) {
-      UP_DOWN_REF.UP_INPUT_REF.current.value = ''
-      UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
+      UP_DOWN_REF.FILLED_INPUT_REF.current.value = ''
      UP_DOWN_REF.UP_RADIO_REF.current.checked = true
      UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
    }
@ -170,7 +193,7 @@ export function useMovementSetting(id) {
    if (typeRef.current === TYPE.FLOW_LINE) {
      saveFlowLine(e)
    } else {
-      updownDownEvent(e)
+      saveUpDownLine(e)
    }
  }

@ -370,6 +393,129 @@ export function useMovementSetting(id) {
    FLOW_LINE_REF.FILLED_INPUT_REF.current.value = ''
  }

+  //형 올림내림 마우스 클릭 이벤트
+  const saveUpDownLine = (e) => {
+    const target = selectedObject.current
+    if (!target) {
+      return
+    }
+
+    const roof = canvas.getObjects().find((obj) => obj.id === target.attributes.roofId)
+    const wallLines = roof.wall.lines
+    const roofLines = roof.lines
+    const currentWall = wallLines.find((line) => line.id === target.attributes.currentWall)
+    let prevWall, nextWall
+    let prevEave, nextEave
+
+    wallLines.forEach((wallLine, index) => {
+      if (wallLine.id === currentWall.id) {
+        prevWall = index === 0 ? wallLines[wallLines.length - 1] : wallLines[index - 1]
+        nextWall = index === wallLines.length - 1 ? wallLines[0] : wallLines[index + 1]
+      }
+    })
+
+    const eaves = roofLines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.EAVES)
+
+    wallLines
+      .filter((line) => line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
+      .forEach((eave, index) => {
+        if (eave.id === currentWall.id) {
+          prevEave = index === 0 ? eaves[eaves.length - 1] : eaves[index - 1]
+          nextEave = index === eaves.length - 1 ? eaves[0] : eaves[index + 1]
+        }
+      })
+
+    const currentRoof = roofLines.find((line) => line.id === target.attributes.currentRoof)
+    const currentRidges = roof.innerLines.filter(
+      (line) => line.name === LINE_TYPE.SUBLINE.RIDGE && line.attributes.currentRoof.includes(currentRoof.id),
+    )
+    /*const prevWallRidges = roof.innerLines.filter(
+      (line) => line.name === LINE_TYPE.SUBLINE.RIDGE && line.attributes.currentRoof.includes(prevEave.id),
+    )
+    const nextWallRidges = roof.innerLines.filter(
+      (line) => line.name === LINE_TYPE.SUBLINE.RIDGE && line.attributes.currentRoof.includes(nextEave.id),
+    )
+    //라인 확인 작업
+    /!* const roofLine = new fabric.Line([currentRoof.x1, currentRoof.y1, currentRoof.x2, currentRoof.y2], {
+      stroke: 'red',
+      strokeWidth: 5,
+      selectable: false,
+    })
+    canvas.add(roofLine)
+
+    const prevEaves = new fabric.Line([prevEave.x1, prevEave.y1, prevEave.x2, prevEave.y2], {
+      stroke: 'yellow',
+      strokeWidth: 5,
+      selectable: false,
+    })
+    canvas.add(prevEaves)
+    currentRidges.forEach((ridge) => ridge.set({ stroke: 'purple', strokeWidth: 5 }))
+    prevWallRidges.forEach((ridge) => ridge.set({ stroke: 'yellow', strokeWidth: 5 }))
+    nextWallRidges.forEach((ridge) => ridge.set({ stroke: 'green', strokeWidth: 5 }))
+    canvas.renderAll()*!/*/
+
+    console.log(
+      'UP/DOWN',
+      UP_DOWN_REF.UP_RADIO_REF.current.checked,
+      UP_DOWN_REF.DOWN_RADIO_REF.current.checked,
+      UP_DOWN_REF.FILLED_INPUT_REF.current.value,
+    )
+
+    let compareLine
+    if (Math.sign(currentRoof.x1 - currentRoof.x2) === 0) {
+      const currentDiff = currentRidges[0].x1 - currentRoof.x1
+      const prevDiff = prevEave.x1 - currentRoof.x1
+      const nextDiff = nextEave.x1 - currentRoof.x1
+
+      console.log('currentDiff', Math.sign(currentDiff), currentDiff)
+
+      if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
+        if (Math.sign(currentDiff) === 1) {
+        } else {
+          if (Math.sign(prevDiff) === 1 && Math.sign(nextDiff) === 1) {
+          } else {
+          }
+        }
+      } else {
+        if (Math.sign(currentDiff) === -1) {
+        } else {
+          if (Math.sign(prevDiff) === -1 && Math.sign(nextDiff) === -1) {
+          } else {
+          }
+        }
+      }
+    } else {
+      const currentDiff = currentRidges[0].y1 - currentRoof.y1
+      const prevDiff = prevEave.y1 - currentRoof.y1
+      const nextDiff = nextEave.y1 - currentRoof.y1
+
+      if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
+        if (Math.sign(currentDiff) === 1) {
+        } else {
+          if (Math.sign(prevDiff) === 1 && Math.sign(nextDiff) === 1) {
+          } else {
+          }
+        }
+      } else {
+        if (Math.sign(currentDiff) === -1) {
+        } else {
+          if (Math.sign(prevDiff) === -1 && Math.sign(nextDiff) === -1) {
+          } else {
+          }
+        }
+      }
+    }
+
+    //확인
+    /*const compareRoofLine = new fabric.Line([compareRoof.x1, compareRoof.y1, compareRoof.x2, compareRoof.y2], {
+      stroke: 'red',
+      strokeWidth: 5,
+      selectable: false,
+    })
+    canvas.add(compareRoofLine)
+    canvas.renderAll()*/
+  }
+
  const redrawSeparatePolygon = (roof) => {
    roof.separatePolygon.forEach((polygon) => canvas.remove(polygon))
    roof.separatePolygon = []
@ -752,10 +898,6 @@ export function useMovementSetting(id) {
    console.log('ridges : ', ridges)
  }

-  //형 올림내림 마우스 클릭 이벤트
-  const updownDownEvent = (e) => {
-    console.log('updownDownEvent')
-  }
  const flowLineMoveEvent = (e) => {
    const target = canvas.getActiveObject()
    if (!target) {
@ -791,34 +933,25 @@ export function useMovementSetting(id) {
    if (!target) {
      return
    }
-    const direction = target.direction
    const { top: targetTop, left: targetLeft } = target
    const currentX = canvas.getPointer(e.e).x
    const currentY = Math.floor(canvas.getPointer(e.e).y)

-    if (direction === 'left' || direction === 'right') {
+    if (Math.sign(target.x1 - target.x2) !== 0) {
      if (targetTop > currentY) {
        UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
-        UP_DOWN_REF.UP_INPUT_REF.current.value = ''
-
-        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
+        UP_DOWN_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
      } else {
        UP_DOWN_REF.UP_RADIO_REF.current.checked = true
-        UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
-
-        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
+        UP_DOWN_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
      }
    } else {
      if (targetLeft > currentX) {
        UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
-        UP_DOWN_REF.UP_INPUT_REF.current.value = ''
-
-        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
+        UP_DOWN_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
      } else {
        UP_DOWN_REF.UP_RADIO_REF.current.checked = true
-        UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
-
-        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
+        UP_DOWN_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
      }
    }

@ -829,14 +962,7 @@ export function useMovementSetting(id) {
    if (type === TYPE.FLOW_LINE) {
      saveFlowLine()
    } else {
-      // 형 올림내림
-      if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
-        // 자릿수를 올리다 체크
-        const length = Number(UP_DOWN_REF.UP_INPUT_REF.current.value)
-      } else {
-        // 자릿수를 내리다 체크
-        const length = Number(UP_DOWN_REF.DOWN_INPUT_REF.current.value)
-      }
+      saveUpDownLine()
    }
  }

--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@ -1763,6 +1763,8 @@ export function useMode() {
    roof.name = POLYGON_TYPE.ROOF
    roof.setWall(wall)

+    console.log('roof.lines : ', roof.lines)
+
    roof.lines.forEach((line, index) => {
      const lineLength = Math.sqrt(
        Math.pow(Math.round(Math.abs(line.x1 - line.x2) * 10), 2) + Math.pow(Math.round(Math.abs(line.y1 - line.y2) * 10), 2),
@ -1826,7 +1828,7 @@ export function useMode() {
      }
      const wallLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], {
        name: 'wallLine',
-        attributes: { wallId: wall.id, roofId: roof.id },
+        attributes: { wallId: wall.id, roofId: roof.id, type: line.attributes.type, currentRoof: line.attributes.currentRoof, currentWall: line.id },
        stroke: wallStroke,
        strokeWidth: wallStrokeWidth,
        selectable: false,
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@ -129,6 +129,7 @@
  "modal.circuit.trestle.setting": "回路と架台設定",
  "modal.circuit.trestle.setting.alloc.trestle": "仮割り当て",
  "modal.circuit.trestle.setting.power.conditional.select": "パワーコンディショナーを選択",
+  "modal.circuit.trestle.setting.power.conditional.select.cold.region": "寒冷地仕様",
  "modal.circuit.trestle.setting.power.conditional.select.name": "名称",
  "modal.circuit.trestle.setting.power.conditional.select.rated.output": "定格出力",
  "modal.circuit.trestle.setting.power.conditional.select.circuit.amount": "回路数",
@ -500,6 +501,8 @@
  "commons.east": "ドン",
  "commons.south": "南",
  "commons.north": "北",
+  "commons.none": "선택안함(JA)",
+  "common.type": "分類",
  "font.style.normal": "보통(JA)",
  "font.style.italic": "기울임꼴(JA)",
  "font.style.bold": "굵게(JA)",
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@ -133,6 +133,7 @@
  "modal.circuit.trestle.setting": "회로 및 가대설정",
  "modal.circuit.trestle.setting.alloc.trestle": "가대할당",
  "modal.circuit.trestle.setting.power.conditional.select": "파워컨디셔너 선택",
+  "modal.circuit.trestle.setting.power.conditional.select.cold.region": "한랭지사양",
  "modal.circuit.trestle.setting.power.conditional.select.name": "명칭",
  "modal.circuit.trestle.setting.power.conditional.select.rated.output": "정격출력",
  "modal.circuit.trestle.setting.power.conditional.select.circuit.amount": "회로수",
@ -510,6 +511,7 @@
  "commons.south": "남",
  "commons.north": "북",
  "commons.none": "선택안함",
+  "common.type": "분류",
  "font.style.normal": "보통",
  "font.style.italic": "기울임꼴",
  "font.style.bold": "굵게",
@ -937,7 +939,7 @@
  "estimate.detail.save.requiredItemId": "제품을 선택해주세요.",
  "estimate.detail.save.requiredAmount": "수량은 0보다 큰값을 입력해주세요.",
  "estimate.detail.save.requiredSalePrice": "단가는 0보다 큰값을 입력해주세요.",
-  "estimate.detail.reset.confirmMsg": "저장된 견적서 정보가 초기화되고, 도면정보가 반영됩니다. 정말로 초기화 하시겠습니까?",
+  "estimate.detail.reset.confirmMsg": "수기 변경(저장)한 견적 정보가 초기화되고, 최근 저장된 도면정보가 반영됩니다. 정말로 초기화하시겠습니까?",
  "estimate.detail.alert.delFile": "첨부파일을 완전히 삭제하려면 [저장]버튼을 클릭하십시오.",
  "estimate.detail.alert.selectDelItem": "삭제할 제품을 선택하세요.",
  "simulator.title.sub1": "물건번호",
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@ -321,7 +321,6 @@ export const drawGabledRoof = (roofId, canvas) => {
      eaves.push({ index: index, roof: currentRoof, length: currentRoof.attributes.planeSize })
    }
  })
-  const ridgeCount = eaves.length - 1
  const ridges = []
  eaves.sort((a, b) => a.length - b.length)

@ -345,8 +344,6 @@ export const drawGabledRoof = (roofId, canvas) => {
        }
      }) // 현재 벽라인과 직교하는 벽라인

-    console.log('oppositeLine', oppositeLine)
-
    // 현재 벽라인과 직교하는 벽라인 사이에 마루를 그린다.
    oppositeLine.forEach((line) => {
      let points // 마루의 시작점과 끝점
@ -487,7 +484,6 @@ export const drawGabledRoof = (roofId, canvas) => {
        }
      } else {
        const lastPoint = sortedPoints[sortedPoints.length - 1]
-        console.log('lastPoint', lastPoint)
        const prevPoint = sortedPoints[sortedPoints.length - 2]
        const otherPoints = points.filter((point) => sortedPoints.includes(point) === false)
        const nextPoint = otherPoints.reduce((prev, current) => {