모듈 설치 페이지 변경

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -172,7 +172,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   }, [checkedModules])
 
   return (
-    <WithDraggable isShow={true} pos={pos} className="lx-2">
+    <WithDraggable isShow={true} pos={pos} className="ll">
       <WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} />
       <WithDraggable.Body>
         <div className="roof-module-tab">

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

@@ -8,12 +8,13 @@ import {
   moduleSetupOptionState,
   toggleManualSetupModeState,
 } from '@/store/canvasAtom'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { isObjectNotEmpty } from '@/util/common-utils'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
+  const [useTab, setUseTab] = useState(true)
 
   const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)
 
@@ -22,7 +23,7 @@ const Placement = forwardRef((props, refs) => {
 
   const setCheckedModules = useSetRecoilState(checkedModuleState)
   const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
-  const { makeModuleInitArea } = useModuleBasicSetting(3)
+  const { makeModuleInitArea, roofOutlineColor } = useModuleBasicSetting(3)
 
   const [isMultiModule, setIsMultiModule] = useState(false)
 
@@ -32,6 +33,9 @@ const Placement = forwardRef((props, refs) => {
   const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
 
   const [moduleSetupOption, setModuleSetupOption] = useRecoilState(moduleSetupOptionState) //모듈 설치 옵션
+  const resetModuleSetupOption = useResetRecoilState(moduleSetupOptionState)
+
+  const [colspan, setColspan] = useState(1)
 
   //모듈 배치면 생성
   useEffect(() => {
@@ -44,17 +48,24 @@ const Placement = forwardRef((props, refs) => {
       makeModuleInitArea(moduleSelectionData)
     }
 
+    if (moduleSelectionData.module.itemList.length > 1) {
+      setColspan(2)
+    }
+
     return () => {
-      refs.isChidori.current = 'false'
-      refs.setupLocation.current = 'eaves'
+      // refs.isChidori.current = 'false'
+      // refs.setupLocation.current = 'eaves'
       setIsManualModuleSetup(false)
       setIsManualModuleLayoutSetup(false)
       setManualSetupMode('off')
+      resetModuleSetupOption()
     }
   }, [])
 
   //최초 지입시 체크
   useEffect(() => {
+    console.log('moduleSelectionData', moduleSelectionData)
+
     if (isObjectNotEmpty(moduleSelectionData)) {
       //두번째 선택한 데이터가를 기반으로 세번째 선택을 체크한다
       if (moduleSelectionData.roofConstructions.length > 0 && moduleSelectionData.module.itemList.length > 0) {
@@ -93,7 +104,9 @@ const Placement = forwardRef((props, refs) => {
     header: [
       { type: 'check', name: '', prop: 'check', width: 70 },
       { type: 'color-box', name: getMessage('module'), prop: 'module' },
-      { type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
+      { type: 'text', name: getMessage('modal.module.basic.setting.module.placement.mix.asg.yn'), prop: 'mixAsgYn', width: 50 },
+      { type: 'text', name: `単数`, prop: 'rows', width: 60 },
+      { type: 'text', name: `熱水`, prop: 'cols', width: 60 },
     ],
     rows: [],
   }
@@ -130,26 +143,24 @@ const Placement = forwardRef((props, refs) => {
 
   return (
     <>
-      <div className="module-table-flex-wrap mb10">
+      <div className="module-table-flex-wrap">
         <div className="module-table-box">
           <div className="module-table-inner">
             <div className="roof-module-table">
               <table>
                 <thead>
-                  <tr>
-                    {moduleData.header.map((data) => (
-                      <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
-                        {data.type === 'check' ? (
-                          <div className="d-check-box no-text pop">
-                            <input type="checkbox" id="ch01" disabled />
-                            <label htmlFor="ch01"></label>
-                          </div>
-                        ) : (
-                          data.name
-                        )}
-                      </th>
-                    ))}
-                  </tr>
+                  {moduleData.header.map((data) => (
+                    <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
+                      {data.type === 'check' ? (
+                        <div className="d-check-box no-text pop">
+                          <input type="checkbox" id="ch01" disabled />
+                          <label htmlFor="ch01"></label>
+                        </div>
+                      ) : (
+                        data.name
+                      )}
+                    </th>
+                  ))}
                 </thead>
                 <tbody>
                   {selectedModules.itemList &&
@@ -173,106 +184,174 @@ const Placement = forwardRef((props, refs) => {
                             <span className="name">{item.itemNm}</span>
                           </div>
                         </td>
-                        <td className="al-r">{item.wpOut}</td>
-                        <label htmlFor="ra06">행</label>
-                        <input
-                          type="text"
-                          className="input-origin block mr10"
-                          name="col"
-                          value={props.layoutSetup[index]?.col ?? 1}
-                          defaultValue={0}
-                          onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
-                        />{' '}
-                        ×<label htmlFor="ra07">열</label>
-                        <input
-                          type="text"
-                          className="input-origin block"
-                          name="row"
-                          value={props.layoutSetup[index]?.row ?? 1}
-                          defaultValue={0}
-                          onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
-                        />
+                        <td className="al-c">
+                          <div className="color-wrap">
+                            <span className="name">{item.mixAsgYn}</span>
+                          </div>
+                        </td>
+                        <td className="al-r">
+                          <div className="input-grid">
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              name="row"
+                              value={props.layoutSetup[index]?.row ?? 1}
+                              defaultValue={0}
+                              onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
+                            />
+                          </div>
+                        </td>
+                        <td className="al-r">
+                          <div className="input-grid">
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              name="col"
+                              value={props.layoutSetup[index]?.col ?? 1}
+                              defaultValue={0}
+                              onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
+                            />
+                          </div>
+                        </td>
                       </tr>
                     ))}
+                  <tr>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
                 </tbody>
               </table>
             </div>
           </div>
         </div>
-        <div className="module-table-box">
+        <div className="module-table-box non-flex">
           <div className="module-table-inner">
-            <div className="self-table-tit">{getMessage('modal.module.basic.setting.module.placement.select.fitting.type')}</div>
-            <div className="module-self-table">
-              <div className="self-table-item">
-                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</div>
-                <div className="self-item-td">
-                  <div className="pop-form-radio">
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio01"
-                        id="ra01"
-                        checked={moduleSetupOption.isChidori}
-                        disabled={isChidoriNotAble}
-                        value={'true'}
-                        onChange={(e) => handleChangeChidori(e)}
-                      />
-                      <label htmlFor="ra01">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
-                    </div>
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio02"
-                        id="ra02"
-                        checked={!moduleSetupOption.isChidori}
-                        value={'false'}
-                        onChange={(e) => handleChangeChidori(e)}
-                      />
-                      <label htmlFor="ra02">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="self-table-item">
-                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</div>
-                <div className="self-item-td">
-                  <div className="pop-form-radio">
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio04"
-                        id="ra04"
-                        checked={moduleSetupOption.setupLocation === 'eaves'}
-                        value={'eaves'}
-                        onChange={handleSetupLocation}
-                      />
-                      <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
-                    </div>
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio05"
-                        id="ra05"
-                        checked={moduleSetupOption.setupLocation === 'ridge'}
-                        value={'ridge'}
-                        onChange={handleSetupLocation}
-                        disabled={isMultiModule}
-                      />
-                      <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="self-table-flx">
-              {/* <div className="d-check-box pop">
-                <input type="checkbox" id="ch04" checked={isMaxSetup === 'true'} value={'true'} onChange={handleMaxSetup} />
-                <label htmlFor="ch04">{getMessage('modal.module.basic.setting.module.placement.maximum')}</label>
-              </div> */}
+            <div className="roof-module-table">
+              <table>
+                <thead>
+                  <tr>
+                    <th>{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</th>
+                    <th>{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      <div className="hexagonal-radio-wrap">
+                        <div className="d-check-radio pop mb10">
+                          <input
+                            type="radio"
+                            name="radio02"
+                            id="ra03"
+                            checked={moduleSetupOption.isChidori}
+                            disabled={isChidoriNotAble}
+                            value={'true'}
+                            onChange={(e) => handleChangeChidori(e)}
+                          />
+                          <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
+                        </div>
+                        <div className="d-check-radio pop">
+                          <input
+                            type="radio"
+                            name="radio02"
+                            id="ra04"
+                            checked={!moduleSetupOption.isChidori}
+                            value={'false'}
+                            onChange={(e) => handleChangeChidori(e)}
+                          />
+                          <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
+                        </div>
+                      </div>
+                    </td>
+                    <td>
+                      <div className="hexagonal-radio-wrap">
+                        <div className="d-check-radio pop mb10">
+                          <input
+                            type="radio"
+                            name="radio03"
+                            id="ra05"
+                            checked={moduleSetupOption.setupLocation === 'eaves'}
+                            value={'eaves'}
+                            onChange={handleSetupLocation}
+                          />
+                          <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
+                        </div>
+                        <div className="d-check-radio pop">
+                          <input
+                            type="radio"
+                            name="radio03"
+                            id="ra06"
+                            checked={moduleSetupOption.setupLocation === 'ridge'}
+                            value={'ridge'}
+                            onChange={handleSetupLocation}
+                            disabled={isMultiModule}
+                          />
+                          <label htmlFor="ra06">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
           </div>
         </div>
       </div>
+      <div className="hide-check-guide">
+        {getMessage('modal.module.basic.setting.module.placement.max.size.check')}
+        <button className={`arr ${!useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
+      </div>
+      <div className={`module-table-box mt10 ${useTab ? 'hide' : ''}`}>
+        <div className="module-table-inner">
+          <div className="roof-module-table">
+            <table className="">
+              <thead>
+                <tr>
+                  <th rowSpan={2} style={{ width: '22%' }}></th>
+                  {selectedModules &&
+                    selectedModules.itemList.map((item) => (
+                      <th colSpan={colspan}>
+                        <div className="color-wrap">
+                          <span className="color-box" style={{ backgroundColor: item.color }}></span>
+                          <span className="name">{item.itemNm}</span>
+                        </div>
+                      </th>
+                    ))}
+                </tr>
+                <tr>
+                  {selectedModules.itemList.map((item) => (
+                    <>
+                      <th>{getMessage('modal.module.basic.setting.module.placement.max.row')}</th>
+                      {colspan > 1 && <th>{getMessage('modal.module.basic.setting.module.placement.max.rows.multiple')}</th>}
+                    </>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {moduleSelectionData.roofConstructions.map((item) => (
+                  <tr>
+                    <td>
+                      <div className="color-wrap">
+                        <span className="color-box" style={{ backgroundColor: roofOutlineColor(item.roofIndex) }}></span>
+                        <span className="name">{item.addRoof.roofMatlNmJp}</span>
+                      </div>
+                    </td>
+                    {selectedModules.itemList.map((item) => (
+                      <>
+                        <td className="al-c">7</td>
+                        {colspan > 1 && <td className="al-c">5</td>}
+                      </>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
     </>
   )
 })

src/hooks/module/useModuleBasicSetting.js

@@ -114,7 +114,7 @@ export function useModuleBasicSetting(tabNum) {
         //육지붕 일경우에는 바로 배치면 설치LL
         canvas
           .getObjects()
-          .filter((roof) => roof.name === 'roof')
+          .filter((roof) => roof.name === POLYGON_TYPE.ROOF)
           .forEach((roof) => {
             makeModuleInstArea(roof, null)
           })
@@ -172,13 +172,13 @@ export function useModuleBasicSetting(tabNum) {
 
   const roofOutlineColor = (roofIndex) => {
     if (roofIndex === 1) {
-      return 'rgb(86,170,255)'
+      return '#FFC000'
     } else if (roofIndex === 2) {
-      return 'rgb(125, 252, 173)'
+      return '#7030A0'
     } else if (roofIndex === 3) {
-      return 'rgb(238, 109, 255)'
+      return '#385723'
     } else {
-      return 'rgb(252, 148, 106)'
+      return '#FFFF00'
     }
   }
 
@@ -775,7 +775,7 @@ export function useModuleBasicSetting(tabNum) {
             const mixAsgYn = trestlePolygon.modules[0].moduleInfo.mixAsgYn
             //현재 체크된 모듈기준으로 혼합가능인지 확인 Y === Y, N === N 일때만 설치 가능
             if (checkedModule[0].mixAsgYn !== mixAsgYn) {
-              swalFire({ text: getMessage('module.place.mix.asg.yn.error') })
+              swalFire({ text: getMessage('modal.module.basic.setting.module.placement.mix.asg.yn.error') })
               return
             }
           }
@@ -1732,7 +1732,7 @@ export function useModuleBasicSetting(tabNum) {
 
     //Y인 모듈과 N인 모듈이 둘다 존재하면 설치 불가
     if (mixAsgY.length > 0 && mixAsgN.length > 0) {
-      swalFire({ text: getMessage('module.place.mix.asg.yn.error') })
+      swalFire({ text: getMessage('modal.module.basic.setting.module.placement.mix.asg.yn.error') })
       return
     }
 
@@ -3575,5 +3575,6 @@ export function useModuleBasicSetting(tabNum) {
     autoFlatroofModuleSetup,
     checkModuleDisjointObjects,
     makeModuleInitArea,
+    roofOutlineColor,
   }
 }

src/locales/ja.json

@@ -116,8 +116,8 @@
   "modal.module.basic.setting.module.placement.do.not": "しない",
   "modal.module.basic.setting.module.placement.arrangement.standard": "配置基準",
   "modal.module.basic.setting.module.placement.arrangement.standard.center": "中央",
-  "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "軒",
-  "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "棟",
+  "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "軒側",
+  "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "棟側",
   "modal.module.basic.setting.module.placement.maximum": "最大配置",
   "modal.module.basic.setting.pitch.module.placement.standard.setting": "配置基準設定",
   "modal.module.basic.setting.pitch.module.placement.standard.setting.south": "南向き設置",
@@ -1045,5 +1045,10 @@
   "chidory.can.not.install": "千鳥配置できない工法です。",
   "module.layout.setup.max.count": "모듈의 최대 단수는 {0}, 최대 열수는 {1} 입니다. (JA)",
   "module.layout.setup.max.count.multiple": "모듈 {0}번의 최대 단수는 {1}, 최대 열수는 {2} 입니다. (JA)",
-  "roofAllocation.not.found": "할당할 지붕이 없습니다. (JA)"
+  "roofAllocation.not.found": "할당할 지붕이 없습니다. (JA)",
+  "modal.module.basic.setting.module.placement.max.size.check": "지붕재별 모듈의 최대 단수. 혼합 최대 단수를 확인하십시오. (JA)",
+  "modal.module.basic.setting.module.placement.max.row": "최대 단수 (JA)",
+  "modal.module.basic.setting.module.placement.max.rows.multiple": "혼합 단수 (JA)",
+  "modal.module.basic.setting.module.placement.mix.asg.yn.error": "혼합 설치 불가능한 모듈입니다. (JA)",
+  "modal.module.basic.setting.module.placement.mix.asg.yn": "ミックス. (JA)"
 }

src/locales/ko.json

@@ -1045,5 +1045,10 @@
   "chidory.can.not.install": "치조 불가 공법입니다.",
   "module.layout.setup.max.count": "모듈의 최대 단수는 {0}, 최대 열수는 {1} 입니다.",
   "module.layout.setup.max.count.multiple": "모듈 {0}번의 최대 단수는 {1}, 최대 열수는 {2} 입니다.",
-  "roofAllocation.not.found": "할당할 지붕이 없습니다."
+  "roofAllocation.not.found": "할당할 지붕이 없습니다.",
+  "modal.module.basic.setting.module.placement.max.size.check": "지붕재별 모듈의 최대 단수. 혼합 최대 단수를 확인하십시오.",
+  "modal.module.basic.setting.module.placement.max.row": "최대 단수",
+  "modal.module.basic.setting.module.placement.max.rows.multiple": "혼합 단수",
+  "modal.module.basic.setting.module.placement.mix.asg.yn.error": "혼합 설치 불가능한 모듈입니다.",
+  "modal.module.basic.setting.module.placement.mix.asg.yn": "혼합"
 }