Merge branch 'dev' of https://git.hanasys.jp/qcast3/qcast-front into dev

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

@@ -12,10 +12,12 @@ import {
 import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { isObjectNotEmpty } from '@/util/common-utils'
+import Image from 'next/image'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
   const [useTab, setUseTab] = useState(true)
+  const [guideType, setGuideType] = useState('batch')
 
   const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)
 
@@ -317,62 +319,91 @@ const Placement = forwardRef((props, refs) => {
           </div>
         </div>
       </div>
-      <div className="hide-check-guide">
-        <div onClick={() => setUseTab(!useTab)}>
-          {getMessage('modal.module.basic.setting.module.placement.max.size.check')}
-          <button className={`arr ${!useTab ? 'act' : ''}`}></button>
+      <div className="hide-tab-wrap">
+        <div className="hide-check-guide">
+          {getMessage('modal.module.basic.setting.module.placement.info')}
+          <button className={`arr ${useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
         </div>
-      </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}>
-                      <th>
-                        <div className="color-wrap">
-                          <span className="color-box" style={{ backgroundColor: item.color }}></span>
-                          <span className="name">{item.itemNm}</span>
-                        </div>
-                      </th>
-                    ))}
-                  {colspan > 1 && <th rowSpan={2}>{getMessage('modal.module.basic.setting.module.placement.max.rows.multiple')}</th>}
-                </tr>
-                <tr>
-                  {selectedModules &&
-                    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, index) => (
-                  <tr>
-                    <td>
-                      <div className="color-wrap">
-                        <span className="color-box" style={{ backgroundColor: roofOutlineColor(item.addRoof?.index) }}></span>
-                        <span className="name">{item.addRoof?.roofMatlNmJp}</span>
-                      </div>
-                    </td>
-                    {moduleRowColArray[index]?.map((item, index2) => (
-                      <>
-                        <td className="al-c">{item.moduleMaxRows}</td>
-                        {/* {colspan > 1 && <td className="al-c">{item.mixModuleMaxRows}</td>} */}
-                        {colspan > 1 && index2 === moduleRowColArray[index].length - 1 && <td className="al-c">{item.maxRow}</td>}
-                      </>
-                    ))}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+        <div className={`hide-tab-contents ${!useTab ? 'hide' : ''}`}>
+          <div className="roof-content-tab-wrap">
+            <button className={`btn-frame block modal mr5 ${guideType === 'batch' ? 'act' : ''} `} onClick={() => setGuideType('batch')}>
+              {getMessage('modal.module.basic.setting.module.placement.info.batch')}
+            </button>
+            <button className={`btn-frame block modal mr5 ${guideType === 'module' ? 'act' : ''}`} onClick={() => setGuideType('module')}>
+              {getMessage('modal.module.basic.setting.module.placement.info.module')}
+            </button>
           </div>
+          {guideType === 'batch' && (
+            <div className={`roof-warning-wrap mt10`}>
+              <div className="guide">
+                {getMessage('modal.module.basic.setting.module.placement.info.batch.content1')}
+                <br />
+                {getMessage('modal.module.basic.setting.module.placement.info.batch.content2')}
+              </div>
+              <div className="roof-warning-img-wrap">
+                <div className="roof-warning-img">
+                  <Image src={'/static/images/canvas/roof_warning_correct.png'} width={350} height={198} alt="" />
+                </div>
+                <div className="roof-warning-img">
+                  <Image src={'/static/images/canvas/roof_warning_wrong.png'} width={350} height={198} alt="" />
+                </div>
+              </div>
+            </div>
+          )}
+          {guideType === 'module' && (
+            <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}>
+                            <th>
+                              <div className="color-wrap">
+                                <span className="color-box" style={{ backgroundColor: item.color }}></span>
+                                <span className="name">{item.itemNm}</span>
+                              </div>
+                            </th>
+                          ))}
+                        {colspan > 1 && <th rowSpan={2}>{getMessage('modal.module.basic.setting.module.placement.max.rows.multiple')}</th>}
+                      </tr>
+                      <tr>
+                        {selectedModules &&
+                          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, index) => (
+                        <tr>
+                          <td>
+                            <div className="color-wrap">
+                              <span className="color-box" style={{ backgroundColor: roofOutlineColor(item.addRoof?.index) }}></span>
+                              <span className="name">{item.addRoof?.roofMatlNmJp}</span>
+                            </div>
+                          </td>
+                          {moduleRowColArray[index]?.map((item, index2) => (
+                            <>
+                              <td className="al-c">{item.moduleMaxRows}</td>
+                              {/* {colspan > 1 && <td className="al-c">{item.mixModuleMaxRows}</td>} */}
+                              {colspan > 1 && index2 === moduleRowColArray[index].length - 1 && <td className="al-c">{item.maxRow}</td>}
+                            </>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </>

src/locales/ja.json

@@ -1105,6 +1105,11 @@
   "module.layout.setup.max.count": "モジュールの単体での最大段数は{0}、最大列数は{1}です。 (JA)",
   "module.layout.setup.max.count.multiple": "モジュール{0}の単体での最大段数は{1}、最大列数は{2}です。 (JA)",
   "roofAllocation.not.found": "割り当てる屋根がありません。 (JA)",
+  "modal.module.basic.setting.module.placement.info": "モジュール配置案内",
+  "modal.module.basic.setting.module.placement.info.batch": "千鳥配置を手動で行う際の注意事項",
+  "modal.module.basic.setting.module.placement.info.batch.content1": "千鳥配置する時に図のような配置ができてしまいますが、正常な積算ができません。",
+  "modal.module.basic.setting.module.placement.info.batch.content2": "千鳥で配置する時は、千鳥配置を「する」にして、モジュールが吸着されるようにして下さい。",
+  "modal.module.basic.setting.module.placement.info.module": "屋根材別 単一・混合モジュールの最大段数",
   "modal.module.basic.setting.module.placement.max.size.check": "屋根材別モジュールの単体の単体での最大段数、2種混合の段数を確認して下さい",
   "modal.module.basic.setting.module.placement.max.row": "単体で\rの最大段数",
   "modal.module.basic.setting.module.placement.max.rows.multiple": "2種混合時\rの最大段数",

src/locales/ko.json

@@ -1105,6 +1105,11 @@
   "module.layout.setup.max.count": "모듈의 최대 단수는 {0}, 최대 열수는 {1} 입니다.",
   "module.layout.setup.max.count.multiple": "모듈 {0}번의 최대 단수는 {1}, 최대 열수는 {2} 입니다.",
   "roofAllocation.not.found": "할당할 지붕이 없습니다.",
+  "modal.module.basic.setting.module.placement.info": "모듈 배치 안내",
+  "modal.module.basic.setting.module.placement.info.batch": "치도리 수동 배치 시 유의사항",
+  "modal.module.basic.setting.module.placement.info.batch.content1": "치조 배치할 때 그림과 같은 배치가 되어 버립니다만, 정상적인 적산을 할 수 없습니다.",
+  "modal.module.basic.setting.module.placement.info.batch.content2": "치조로 배치할 때는, 치조 배치를 「한다」로 하고, 모듈이 흡착되도록 해 주세요.",
+  "modal.module.basic.setting.module.placement.info.module": "지붕재별 단일·혼합 모듈 최대 단수",
   "modal.module.basic.setting.module.placement.max.size.check": "지붕재별 모듈 단체의 최대 단수, 2종 혼합 단수를 확인하십시오.",
   "modal.module.basic.setting.module.placement.max.row": "최대 단수",
   "modal.module.basic.setting.module.placement.max.rows.multiple": "2종 혼합 최대단수",

src/styles/_modal.scss

@@ -2457,3 +2457,22 @@ $alert-color: #101010;
         }
     }
 }
+
+// 2025-05-30 지붕 모듈
+.roof-warning-img-wrap{
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    justify-content: center;
+}
+
+.roof-content-tab-wrap{
+    display: flex;
+    padding-top: 10px;
+}
+.hide-tab-contents{
+    &.hide{
+        height: 0;
+        overflow: hidden;
+    }
+}