Merge remote-tracking branch 'origin/qcast-pub' into dev

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' : ''}`}>
+            <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
-              {getMessage('modal.circuit.trestle.setting.power.conditional.select')}
+            <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>
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
-            <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.circuit.trestle.setting.step.up.allocation')}</div>
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && <PassivityCircuitAllocation {...powerConditionalSelectProps} />}
-          </div>
+          {tabNum === 2 && <StepUp />}
-          {tabNum === 1 && <PowerConditionalSelect />}
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
-          {tabNum === 2 && <CircuitAllocation {...circuitProps} />}
-          {tabNum === 3 && <StepUp />}
             <div className="grid-btn-wrap">
-            {tabNum !== 1 && (
+              <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
-              <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
+                {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>
-            )}
+              <button className="btn-frame modal act" onClick={() => setTabNum(2)}>
-            {tabNum !== 3 && (
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
-              <button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
-                Next
               </button>
-            )}
-            {tabNum === 3 && (
-              <button className="btn-frame modal act">
-                {`${getMessage('modal.common.save')} (${getMessage('modal.circuit.trestle.setting.alloc.trestle')})`}
-              </button>
-            )}
             </div>
+          )}
+          {tabNum === 2 && (
+            <div className="grid-btn-wrap">
+              <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>
+                {getMessage('modal.common.prev')}
+              </button>
+              <button className="btn-frame modal act" onClick={() => apply()}>
+                {getMessage('modal.common.save')}({getMessage('modal.circuit.trestle.setting.circuit.allocation')})
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </WithDraggable>

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

@@ -1,15 +1,31 @@
 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 = {
+  const globalLocale = useRecoilValue(globalLocaleStore)
-    header: [
+  const modelHeader = [
     { name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' },
     {
       name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
@@ -36,54 +52,40 @@ export default function PowerConditionalSelect({ setTabNum }) {
       width: '10%',
       prop: 'outputCurrent',
     },
-    ],
+  ]
-    rows: [
+  const onCheckSeries = (series) => {
-      {
+    setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
-        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: '-' },
-      },
-    ],
   }
   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="circuit-check-inner overflow">
-            <div className="d-check-box pop mb15 sel">
+            {series?.map((series, index) => (
-              <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" />
+                <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} />
-              <label htmlFor="ch02">屋外マルチPCS（HQJP-RA5シリーズ）</label>
+                <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,10 +104,12 @@ export default function PowerConditionalSelect({ setTabNum }) {
                   </tr>
                 </thead>
                 <tbody>
-                  {seriesData.rows.map((row, index) => (
+                  {models
+                    ?.filter((model) => model.series === selectedSeries?.code)
+                    .map((row, index) => (
                       <tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}>
-                      {seriesData.header.map((header) => (
+                        {modelHeader.map((header) => (
-                        <td>{row[header.prop].name}</td>
+                          <td>{row[header.prop]}</td>
                         ))}
                       </tr>
                     ))}
@@ -117,15 +121,11 @@ export default function PowerConditionalSelect({ setTabNum }) {
             <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
           </div>
           <div className="circuit-data-form">
+            {selectedModels?.map((model) => (
               <span className="normal-font">
-              HQJP-KA40-5 <button className="del"></button>
+                {model.name} <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>
+            ))}
           </div>
         </div>
       </div>
@@ -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> */}
     </>
   )
 }

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

@@ -1,20 +1,24 @@
 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">
+          {/* 3개일때 className = by-max */}
-            <div className="module-table-inner">
+          <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">
+                  <div className="roof-module-table overflow-y min">
                     <table>
                       <thead>
                         <tr>
@@ -23,6 +27,10 @@ export default function StepUp({}) {
                         </tr>
                       </thead>
                       <tbody>
+                        <tr className="on">
+                          <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>
@@ -47,14 +55,22 @@ export default function StepUp({}) {
                     </table>
                   </div>
                 </div>
+                <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="bold-font mb10">{getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}</div>
+                      <div className="roof-module-table min mb10">
-                  <div className="roof-module-table mb10">
                         <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.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>
@@ -65,160 +81,14 @@ export default function StepUp({}) {
                               <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">{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>
+                  )}
+                  {moduleTab === 2 && (
                     <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 min mb10">
-                  <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>
-                    <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">{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>
@@ -231,165 +101,14 @@ export default function StepUp({}) {
                               <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>*/}
     </>
   )
 }

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,6 +32,8 @@ export default function PassivityCircuitAllocation() {
   }
   return (
     <>
+      <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>
@@ -46,7 +51,9 @@ export default function PassivityCircuitAllocation() {
                   {moduleData.rows.map((row, index) => (
                     <tr key={index}>
                       {moduleData.header.map((header) => (
-                      <td key={header.prop}>{row[header.prop].name}</td>
+                        <td className="al-c" key={header.prop}>
+                          {row[header.prop].name}
+                        </td>
                       ))}
                     </tr>
                   ))}
@@ -87,6 +94,7 @@ export default function PassivityCircuitAllocation() {
               <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 className="circuit-right-wrap">
@@ -96,7 +104,7 @@ export default function PassivityCircuitAllocation() {
             <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>
         </div>
       </div>
     </>

src/hooks/common/useMasterController.js

@@ -118,11 +118,12 @@ export function useMasterController() {
    * @param {혼합모듈번호}      mixMatlNo
    * @returns
    */
-  const getPcsMakerList = async (params) => {
+  const getPcsMakerList = async (params = null) => {
-    const paramString = getQueryString(params)
+    let paramString = ''
-    console.log('🚀🚀 ~ getPcsMakerList ~ paramString:', paramString)
+    if (params) {
+      paramString = getQueryString(params)
+    }
     return await get({ url: '/api/v1/master/pcsMakerList' + paramString }).then((res) => {
-      console.log('🚀🚀 ~ getPcsMakerList ~ res:', res)
       return res
     })
   }

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)",

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": "굵게",

src/styles/_modal.scss

@@ -5,24 +5,12 @@ $pop-normal-size: 12px;
 $alert-color: #101010;
 
 @keyframes mountpop{
-  from {
+    from{opacity: 0; scale: 0.95;}
-    opacity: 0;
+    to{opacity: 1; scale: 1;}
-    scale: 0.95;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
 }
 @keyframes unmountpop{
-  from {
+    from{opacity: 1; scale: 1;}
-    opacity: 1;
+    to{opacity: 0; scale: 0.95;}
-    scale: 1;
-  }
-  to {
-    opacity: 0;
-    scale: 0.95;
-  }
 }
 
 .normal-font{
@@ -97,10 +85,10 @@ $alert-color: #101010;
         width: 900px;
     }
     &.mount{
-    animation: mountpop 0.17s ease-in-out forwards;
+        animation: mountpop .17s ease-in-out forwards;
     }
     &.unmount{
-    animation: unmountpop 0.17s ease-in-out forwards;
+        animation: unmountpop .17s ease-in-out forwards;
     }
     &.alert{
         position: absolute;
@@ -205,7 +193,7 @@ $alert-color: #101010;
         }
     }
     .outer-line-wrap{
-    border-top: 1px solid #3c3c3c;
+        border-top: 1px solid #3C3C3C;
         margin-top: 10px;
         padding-top: 15px;
         margin-bottom: 15px;
@@ -227,7 +215,7 @@ $alert-color: #101010;
 .adsorption-point{
     display: flex;
     align-items: center;
-  background-color: #3a3a3a;
+    background-color: #3A3A3A;
     border-radius: 3px;
     padding-left: 11px;
     overflow: hidden;
@@ -248,7 +236,7 @@ $alert-color: #101010;
     &.act{
         i{
             color: $pop-color;
-      background-color: #1083e3;
+            background-color: #1083E3;
         }
     }
 }
@@ -271,7 +259,7 @@ $alert-color: #101010;
         background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
+        background-color: #D9D9D9;
     }
     &::-webkit-scrollbar-track {
         background-color: transparent;
@@ -282,7 +270,7 @@ $alert-color: #101010;
         display: flex;
         align-items: center;
         background-color: transparent;
-    border: 1px solid #3d3d3d;
+        border: 1px solid #3D3D3D;
         border-radius: 2px;
         padding: 15px 10px;
         gap: 20px;
@@ -312,9 +300,7 @@ $alert-color: #101010;
     }
 }
 .select-form{
-  .sort-select {
+    .sort-select{width: 100%;}
-    width: 100%;
-  }
 }
 .grid-select{
     flex: 1;
@@ -359,6 +345,7 @@ $alert-color: #101010;
     color: $pop-color;
     font-weight: $pop-normal-weight;
     padding-bottom: 15px;
+
 }
 .grid-direction{
     display: flex;
@@ -375,17 +362,11 @@ $alert-color: #101010;
     background-position: center;
     background-size: 16px 15px;
     border-radius: 50%;
-  transition: all 0.15s ease-in-out;
+    transition: all .15s ease-in-out;
     opacity: 0.6;
-  &.down {
+    &.down{transform: rotate(180deg);}
-    transform: rotate(180deg);
+    &.left{transform: rotate(-90deg);}
-  }
+    &.right{transform: rotate(90deg);}
-  &.left {
-    transform: rotate(-90deg);
-  }
-  &.right {
-    transform: rotate(90deg);
-  }
     &:hover,
     &.act{
         opacity: 1;
@@ -471,11 +452,10 @@ $alert-color: #101010;
     }
     &.light{
         padding: 0;
-    th,
+        th,td{
-    td {
             color: $alert-color;
             border-bottom: none;
-      border-top: 1px solid #efefef;
+            border-top: 1px solid #EFEFEF;
         }
         th{
             padding: 14px 0;
@@ -529,6 +509,7 @@ $alert-color: #101010;
         color: $pop-color;
         font-weight: $pop-normal-weight;
     }
+
 }
 
 .img-edit-wrap{
@@ -544,7 +525,7 @@ $alert-color: #101010;
         background-color: #fff;
         border-radius: 2px;
         cursor: pointer;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         .img-edit{
             width: 16px;
             height: 16px;
@@ -564,6 +545,7 @@ $alert-color: #101010;
     margin-left: 10px;
     input{
         flex: 1;
+
     }
     .img-check{
         flex: none;
@@ -589,12 +571,8 @@ $alert-color: #101010;
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
-    &.fail {
+        &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
-      background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+        &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
-    }
-    &.success {
-      background-image: url(../../public/static/images/canvas/img_check_success.svg);
-    }
     }
 }
 
@@ -674,7 +652,7 @@ $alert-color: #101010;
         align-items: center;
         justify-content: center;
         width: 50%;
-    background-color: #3d3d3d;
+        background-color: #3D3D3D;
         border-radius: 2px ;
     }
 }
@@ -682,7 +660,7 @@ $alert-color: #101010;
 // 외벽선 속성 설정
 .properties-guide{
     font-size: $pop-normal-size;
-  color: #aaa;
+    color: #AAA;
     font-weight: $pop-normal-weight;
     margin-bottom: 14px;
 }
@@ -711,17 +689,17 @@ $alert-color: #101010;
             color: #fff;
             font-weight: 700;
             border-radius: 2px;
-      transition: all 0.15s ease-in-out;
+            transition: all .15s ease-in-out;
             &.green{
                 background-color: #305941;
-        border: 1px solid #45cd7d;
+                border: 1px solid #45CD7D;
                 &:hover{
                     background-color: #3a6b4e;
                 }
             }
             &.blue{
-        background-color: #2e5360;
+                background-color: #2E5360;
-        border: 1px solid #3fbae6;
+                border: 1px solid #3FBAE6;
                 &:hover{
                     background-color: #365f6e;
                 }
@@ -743,8 +721,8 @@ $alert-color: #101010;
         justify-content: center;
         width: 100%;
         padding: 13px;
-    background-color: #3d3d3d;
+        background-color: #3D3D3D;
-    transition: background 0.15s ease-in-out;
+        transition: background .15s ease-in-out;
         img{
             max-width: 100%;
         }
@@ -755,17 +733,13 @@ $alert-color: #101010;
         color: $pop-color;
         margin-top: 10px;
         text-align: center;
-    transition: color 0.15s ease-in-out;
+        transition: color .15s ease-in-out;
     }
     .shape-menu-box{
         &.act,
         &:hover{
-      .shape-box {
+            .shape-box{background-color: #008BFF;}
-        background-color: #008bff;
+            .shape-title{color: #008BFF;}
-      }
-      .shape-title {
-        color: #008bff;
-      }
         }
     }
 }
@@ -780,7 +754,7 @@ $alert-color: #101010;
 }
 .discrimination-box{
     padding: 16px 12px;
-  border: 1px solid #3d3d3d;
+    border: 1px solid #3D3D3D;
     border-radius: 2px;
 }
 
@@ -813,12 +787,12 @@ $alert-color: #101010;
             align-items: center;
             justify-content: center;
             padding: 5px;
-      background-color: #3d3d3d;
+            background-color: #3D3D3D;
-      border: 1px solid #3d3d3d;
+            border: 1px solid #3D3D3D;
             border-radius: 2px;
             cursor: pointer;
             &.act{
-        border: 1px solid #ed0004;
+                border: 1px solid #ED0004;
             }
         }
         &:last-child{
@@ -917,7 +891,7 @@ $alert-color: #101010;
         border: 1px solid #646464;
         border-radius: 2px;
         padding: 0 10px;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         i{
             height: 15px;
             display: block;
@@ -925,7 +899,7 @@ $alert-color: #101010;
             background-repeat: no-repeat;
             background-position: center;
             background-size: cover;
-      transition: all 0.15s ease-in-out;
+            transition: all .15s ease-in-out;
             &.allocation01{
                 background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
                 width: 15px;
@@ -978,9 +952,7 @@ $alert-color: #101010;
         height: 34px;
         background-color: #373737;
         border: 1px solid #676767;
-    transition:
+        transition: background .15s ease-in-out, border .15s ease-in-out;
-      background 0.15s ease-in-out,
-      border 0.15s ease-in-out;
         .shape-box{
             display: flex;
             justify-content: center;
@@ -992,8 +964,8 @@ $alert-color: #101010;
         }
         &.act,
         &:hover{
-      border-color: #008bff;
+            border-color: #008BFF;
-      background-color: #008bff;
+            background-color: #008BFF;
         }
     }
 }
@@ -1008,27 +980,18 @@ $alert-color: #101010;
     .library-btn{
         width: 100%;
         height: 34px;
-    border: 1px solid #6c6c6c;
+        border: 1px solid #6C6C6C;
         border-radius: 2px;
         background-color: #373737;
         background-repeat: no-repeat;
         background-position: center;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
-    &.ico01 {
+        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
-      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
+        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
-      background-size: 19px 18px;
+        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
-    }
-    &.ico02 {
-      background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
-      background-size: 15px 20px;
-    }
-    &.ico03 {
-      background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
-      background-size: 19px 16px;
-    }
         &:hover{
-      border-color: #1083e3;
+            border-color: #1083E3;
-      background-color: #1083e3;
+            background-color: #1083E3;
         }
     }
 }
@@ -1114,27 +1077,11 @@ $alert-color: #101010;
         position: absolute;
         font-size: 12px;
         font-weight: 500;
-    color: #b1b1b1;
+        color: #B1B1B1;
-    &.top {
+        &.top{top: 0; left: 50%; transform: translateX(-50%);}
-      top: 0;
+        &.right{top: 50%; right: 0; transform: translateY(-50%);}
-      left: 50%;
+        &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
-      transform: translateX(-50%);
+        &.left{top: 50%; left: 0; transform: translateY(-50%);}
-    }
-    &.right {
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-    }
-    &.bottom {
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    &.left {
-      top: 50%;
-      left: 0;
-      transform: translateY(-50%);
-    }
     }
     .plane-btn{
         position: absolute;
@@ -1146,27 +1093,11 @@ $alert-color: #101010;
         background-repeat: no-repeat;
         background-position: center;
         border-radius: 50%;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
-    &.up {
+        &.up{top: 22px; left: 50%; transform: translateX(-50%);}
-      top: 22px;
+        &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
-      left: 50%;
+        &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
-      transform: translateX(-50%);
+        &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
-    }
-    &.right {
-      top: 50%;
-      right: 32px;
-      transform: translateY(-50%) rotate(90deg);
-    }
-    &.down {
-      bottom: 22px;
-      left: 50%;
-      transform: translateX(-50%) rotate(180deg);
-    }
-    &.left {
-      top: 50%;
-      left: 32px;
-      transform: translateY(-50%) rotate(270deg);
-    }
         &:hover,
         &.act{
             background-color: #fff;
@@ -1232,7 +1163,7 @@ $alert-color: #101010;
 .warning{
     font-size: $pop-normal-size;
     font-weight: $pop-normal-weight;
-  color: #ffafaf;
+    color: #FFAFAF;
 }
 
 // 각 변 속성 변경
@@ -1288,157 +1219,37 @@ $alert-color: #101010;
             top: 12.5px;
             left: 50%;
             font-size: 11px;
-      color: #8b8b8b;
+            color: #8B8B8B;
             font-weight: 500;
             -webkit-user-select: none;
             -moz-user-select: none;
             -ms-use-select: none;
             user-select: none;
         }
-    &:nth-child(1) {
+        &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
-      transform: rotate(180deg) translate(-50%, -50%);
+        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
-      i {
+        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
-        transform: translateX(-50%) rotate(180deg);
+        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
-      }
+        &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
-    }
+        &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
-    &:nth-child(2) {
+        &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
-      transform: rotate(195deg) translate(-50%, -50%);
+        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
-      i {
+        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
-        transform: translateX(-50%) rotate(165deg);
+        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
-      }
+        &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
-    }
+        &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
-    &:nth-child(3) {
+        &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
-      transform: rotate(210deg) translate(-50%, -50%);
+        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
-      i {
+        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
-        transform: translateX(-50%) rotate(150deg);
+        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
-      }
+        &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
-    }
+        &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
-    &:nth-child(4) {
+        &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
-      transform: rotate(225deg) translate(-50%, -50%);
+        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
-      i {
+        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
-        transform: translateX(-50%) rotate(135deg);
+        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
-      }
+        &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
-    }
+        &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
-    &:nth-child(5) {
-      transform: rotate(240deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(120deg);
-      }
-    }
-    &:nth-child(6) {
-      transform: rotate(255deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(105deg);
-      }
-    }
-    &:nth-child(7) {
-      transform: rotate(270deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(90deg);
-      }
-    }
-    &:nth-child(8) {
-      transform: rotate(285deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(75deg);
-      }
-    }
-    &:nth-child(9) {
-      transform: rotate(300deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(60deg);
-      }
-    }
-    &:nth-child(10) {
-      transform: rotate(315deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(45deg);
-      }
-    }
-    &:nth-child(11) {
-      transform: rotate(330deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(30deg);
-      }
-    }
-    &:nth-child(12) {
-      transform: rotate(345deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(15deg);
-      }
-    }
-    &:nth-child(13) {
-      transform: rotate(0deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(0deg);
-      }
-    }
-    &:nth-child(14) {
-      transform: rotate(15deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-15deg);
-      }
-    }
-    &:nth-child(15) {
-      transform: rotate(30deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-30deg);
-      }
-    }
-    &:nth-child(16) {
-      transform: rotate(45deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-45deg);
-      }
-    }
-    &:nth-child(17) {
-      transform: rotate(60deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-60deg);
-      }
-    }
-    &:nth-child(18) {
-      transform: rotate(75deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-75deg);
-      }
-    }
-    &:nth-child(19) {
-      transform: rotate(90deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-90deg);
-      }
-    }
-    &:nth-child(20) {
-      transform: rotate(105deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-105deg);
-      }
-    }
-    &:nth-child(21) {
-      transform: rotate(120deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-120deg);
-      }
-    }
-    &:nth-child(22) {
-      transform: rotate(135deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-135deg);
-      }
-    }
-    &:nth-child(23) {
-      transform: rotate(150deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-150deg);
-      }
-    }
-    &:nth-child(24) {
-      transform: rotate(165deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-165deg);
-      }
-    }
         &.act{
             &::after{
                 content: '';
@@ -1492,13 +1303,13 @@ $alert-color: #101010;
         border-radius: 2px;
         background-color: transparent;
         font-size: 12px;
-    color: #aaa;
+        color: #AAA;
         text-align: center;
         cursor: default;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         &.act{
-      background-color: #1083e3;
+            background-color: #1083E3;
-      border: 1px solid #1083e3;
+            border: 1px solid #1083E3;
             color: #fff;
             font-weight: 500;
         }
@@ -1511,7 +1322,7 @@ $alert-color: #101010;
         background-position: center;
         background-size: cover;
         background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         &.act{
             background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
         }
@@ -1544,9 +1355,7 @@ $alert-color: #101010;
                 top: 22px;
             }
             &.act{
-        i {
+                i{color: #8B8B8B;}
-          color: #8b8b8b;
-        }
             }
         }
     }
@@ -1578,7 +1387,7 @@ $alert-color: #101010;
         height: 30px;
         font-size: 12px;
         font-weight: 400;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         &:first-child{
             border-left: 1px solid #505050;
         }
@@ -1592,7 +1401,7 @@ $alert-color: #101010;
 
 .module-table-box{
     flex: 1;
-  background-color: #3d3d3d;
+    background-color: #3D3D3D;
     border-radius: 2px;
     .module-table-inner{
         padding: 10px;
@@ -1605,7 +1414,7 @@ $alert-color: #101010;
             padding: 10px 0;
             font-size: 12px;
             color: #fff;
-      border-bottom: 1px solid #4d4d4d;
+            border-bottom: 1px solid #4D4D4D;
         }
         .eaves-keraba-table{
             width: 100%;
@@ -1628,7 +1437,7 @@ $alert-color: #101010;
     .warning-guide{
         padding: 20px;
         .warning{
-      color: #ffcaca;
+            color: #FFCACA;
             max-height: 55px;
             overflow-y: auto;
             padding-right: 30px;
@@ -1637,7 +1446,7 @@ $alert-color: #101010;
                 background-color: transparent;
             }
             &::-webkit-scrollbar-thumb {
-        background-color: #d9d9d9;
+                background-color: #D9D9D9;
             }
             &::-webkit-scrollbar-track {
                 background-color: transparent;
@@ -1648,7 +1457,7 @@ $alert-color: #101010;
 
 .module-self-table{
     display: table;
-  border-top: 1px solid #4d4d4d;
+    border-top: 1px solid #4D4D4D;
     border-collapse: collapse;
     width: 100%;
     .self-table-item{
@@ -1657,7 +1466,7 @@ $alert-color: #101010;
         .self-item-th{
             display: table-cell;
             vertical-align: middle;
-      border-bottom: 1px solid #4d4d4d;
+            border-bottom: 1px solid #4D4D4D;
         }
         .self-item-th{
             width: 60px;
@@ -1685,7 +1494,7 @@ $alert-color: #101010;
 .hexagonal-wrap{
     .hexagonal-item{
         padding: 15px 0;
-    border-bottom: 1px solid #4d4d4d;
+        border-bottom: 1px solid #4D4D4D;
         &:first-child{
             padding-top: 0;
         }
@@ -1710,24 +1519,51 @@ $alert-color: #101010;
 // 회로 및 가대설정
 .circuit-check-inner{
     padding: 5px 0;
+    &.overflow{
+        overflow-y: auto;
+        max-height: 100px;
+        min-height: 60px;
+        &::-webkit-scrollbar {
+            width: 4px;
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: #D9D9D9;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+    }
+    .d-check-box{
+        margin-bottom: 15px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+    }
 }
 
 .x-scroll-table{
-  overflow-x: auto;
+    overflow: auto;
     padding-bottom: 5px;
+    background-color: transparent;
+    max-height: 170px;
     .roof-module-table{
         min-width: 1200px;
     }
     &::-webkit-scrollbar {
+        width: 4px;
         height: 4px;
         background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
+        background-color: #b4b4b4;
     }
     &::-webkit-scrollbar-track {
         background-color: transparent;
     }
+    &::-webkit-scrollbar-corner{
+        background-color: transparent;
+    }
 }
 
 .circuit-right-wrap{
@@ -1741,7 +1577,7 @@ $alert-color: #101010;
     gap: 5px;
     min-height: 60px;
     padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.20);
     span{
         display: inline-flex;
         align-items: center;
@@ -1766,19 +1602,24 @@ $alert-color: #101010;
 }
 
 .circuit-overflow{
-  max-height: 400px;
+    overflow-x: auto;
-  overflow-y: auto;
+    margin-bottom: 25px;
-  margin-bottom: 15px;
     &::-webkit-scrollbar {
-    width: 4px;
+        height: 4px;
         background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
+        background-color: #D9D9D9;
     }
     &::-webkit-scrollbar-track {
         background-color: transparent;
     }
+    .module-table-box{
+        display: flex;
+        &.by-max{
+            min-width: 886px;
+        }
+    }
 }
 
 .circuit-table-flx-wrap{
@@ -1833,10 +1674,10 @@ $alert-color: #101010;
             height: 16px;
             &.pink{
                 border: 2px solid #ce1c9c;
-        background-color: #16417d;
+                background-color: #16417D;
             }
             &.white{
-        border: 2px solid #fff;
+                border: 2px solid #FFF;
                 background-color: #001027;
             }
         }
@@ -1861,7 +1702,7 @@ $alert-color: #101010;
             .react-colorful__pointer{
                 width: 15px;
                 height: 15px;
-        border: 4px solid #fff;
+                border: 4px solid #Fff;
             }
             .react-colorful__saturation{
                 border-radius: 2px;
@@ -1951,6 +1792,7 @@ $alert-color: #101010;
         min-height: 80px;
         background-color: #fff;
     }
+    
 }
 
 // 치수선 설정
@@ -2070,22 +1912,10 @@ $alert-color: #101010;
                 border-radius: 50%;
             }
         }
-    &:nth-child(1) {
+        &:nth-child(1){ top: 0; left: 0; }
-      top: 0;
+        &:nth-child(2){ top: 0; right: 0; }
-      left: 0;
+        &:nth-child(3){ bottom: 0; left: 0; }
-    }
+        &:nth-child(4){ bottom: 0; right: 0; }
-    &:nth-child(2) {
-      top: 0;
-      right: 0;
-    }
-    &:nth-child(3) {
-      bottom: 0;
-      left: 0;
-    }
-    &:nth-child(4) {
-      bottom: 0;
-      right: 0;
-    }
     }
     .size-box{
         position: absolute;
@@ -2169,6 +1999,7 @@ $alert-color: #101010;
     &.tab2{
         margin-top: 10px;
         gap: 15px;
+        
     }
     .module-flex-item{
         flex: 1;
@@ -2177,7 +2008,7 @@ $alert-color: #101010;
             font-weight: 500;
             color: #fff;
             padding-bottom: 10px;
-      border-bottom: 1px solid #4d4d4d;
+            border-bottom: 1px solid #4D4D4D;
         }
         .flex-item-btn-wrap{
             display: grid;
@@ -2225,12 +2056,12 @@ $alert-color: #101010;
 }
 .module-bottom{
     padding-bottom: 15px;
-  border-bottom: 1px solid #4d4d4d;
+    border-bottom: 1px solid #4D4D4D;
 }
 
 .reset-word{
     font-size: 12px;
-  color: #ffcaca;
+    color: #FFCACA;
     font-weight: 400;
     margin-top: 10px;
 }