지붕 모듈 팝업 마지막탭 흡착점 경고 추가

src/app/canvas/page.jsx

@@ -118,7 +118,7 @@ export default function CanvasPage() {
                     {/* <EvaseKerabaOption/> */}
 
                     {/* 동선이동∙형 올림 내림 */}
-                    <MovingUpDonw/>
+                    {/* <MovingUpDonw/> */}
 
                     {/* 외벽선 편집 및 오프셋 */}
                     {/* <OuterWallOffset/> */}
@@ -158,7 +158,7 @@ export default function CanvasPage() {
                     {/* <DrawingFlow/> */}
 
                     {/* 지붕모듈선택 */}
-                    {/* <RoofModuleOption/> */}
+                    <RoofModuleOption/>
 
                     {/* 육지붕모듈 선택 */}
                     {/* <HexagonalRoofOption/> */}

src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx

@@ -1,9 +1,11 @@
 'use client'
 
+import Image from "next/image";
 import { useState } from "react"
 
 export default function RoofModuleOptionTab03({setTabNum}){
     const [useTab, setUseTab] = useState(false);
+    const [warningTab, setWarningTab] = useState(false);
 
     return(
         <>
@@ -133,6 +135,8 @@ export default function RoofModuleOptionTab03({setTabNum}){
                     </div>
                 </div>
             </div>
+            {/* 2025-05-30 st */}
+            <div className="hide-tab-wrap">
                 <div className="hide-check-guide">
                     屋根材別モジュールの最大段数。混合最大単数を確認してください 
                     <button className={`arr ${useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
@@ -225,6 +229,25 @@ export default function RoofModuleOptionTab03({setTabNum}){
                         </div>
                     </div>
                 </div>
+            </div>
+            <div className="hide-tab-wrap">
+                <div className="hide-check-guide">
+                    千鳥配置の注意事項
+                    <button className={`arr ${warningTab ? 'act' : ''}`} onClick={() => setWarningTab(!warningTab)}></button>
+                </div>
+                <div className={`roof-warning-wrap mt10 ${warningTab ? 'hide' : ''}`}>
+                    <div className="guide">千鳥配置する時に図のような配置ができてしまいますが、正常な積算ができません。<br/>千鳥で配置する時は、千鳥配置を「する」にして、モジュールが吸着されるようにして下さい。</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>
+            </div>
+            {/* 2025-05-30 ed */}
             <div className="grid-btn-wrap">
                 <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>前に戻る</button>
                 <button className="btn-frame modal mr5">単数指定配置</button>

src/components/publishpage/PublishPage.jsx

@@ -306,9 +306,13 @@ export default function PublishPage() {
                     <li>2025-05-23</li>
                     <li>* OuterLineWall.jsx파일 문구 추가</li>
                   </ul> */}
-                  <ul className='mb10'>
+                  {/* <ul className='mb10'>
                     <li>2025-05-26</li>
                     <li>* 동선이동 팝업 UI변경 및 수정</li>
+                  </ul> */}
+                  <ul className='mb10'>
+                    <li>2025-05-30</li>
+                    <li>* 지붕 모듈 팝업 마지막탭 흡착점 경고 추가</li>
                   </ul>
                 </td>
                 <td className="t-center">2024-10-28</td>

src/styles/_modal.scss

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