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

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

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,12 +319,38 @@ const Placement = forwardRef((props, refs) => {
           </div>
         </div>
       </div>
+      <div className="hide-tab-wrap">
         <div className="hide-check-guide">
-        <div onClick={() => setUseTab(!useTab)}>
+          {getMessage('modal.module.basic.setting.module.placement.info')}
-          {getMessage('modal.module.basic.setting.module.placement.max.size.check')}
+          <button className={`arr ${useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
-          <button className={`arr ${!useTab ? 'act' : ''}`}></button>
+        </div>
+        <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">
@@ -375,6 +403,9 @@ const Placement = forwardRef((props, refs) => {
                 </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;
+    }
+}