지붕모듈 재수정

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

@@ -5,7 +5,7 @@ import { useState } from "react"
 
 export default function RoofModuleOptionTab03({setTabNum}){
     const [useTab, setUseTab] = useState(false);
-    const [warningTab, setWarningTab] = useState(false);
+    const [numValue, setNumValue] = useState(1);
 
     return(
         <>
@@ -141,7 +141,13 @@ export default function RoofModuleOptionTab03({setTabNum}){
                     屋根材別モジュールの最大段数。混合最大単数を確認してください 
                     <button className={`arr ${useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
                 </div>
-                <div className={`module-table-box mt10 ${useTab ? 'hide' : ''}`}>
+                <div className={`hide-tab-contents ${useTab ? 'hide' : ''}`}>
+                    <div className="roof-content-tab-wrap">
+                        <button className={`btn-frame block modal mr5 ${numValue === 1 ? 'act' : ''}`} onClick={() => setNumValue(1)}>Frame01</button>
+                        <button className={`btn-frame block modal ${numValue === 2 ? 'act' : ''} `} onClick={() => setNumValue(2)}>Frame02</button>
+                    </div>
+                    {numValue === 1 && 
+                        <div className={`module-table-box mt10`}>
                             <div className="module-table-inner">
                                 <div className="roof-module-table">
                                     <table>
@@ -229,13 +235,9 @@ export default function RoofModuleOptionTab03({setTabNum}){
                                 </div>
                             </div>
                         </div>
-            </div>
+                    }
-            <div className="hide-tab-wrap">
+                    {numValue === 2 &&
-                <div className="hide-check-guide">
+                        <div className={`roof-warning-wrap mt10`}>
-                    千鳥配置の注意事項
-                    <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">
@@ -246,6 +248,8 @@ export default function RoofModuleOptionTab03({setTabNum}){
                                 </div>
                             </div>
                         </div>
+                    }
+                </div>
             </div>
             {/* 2025-05-30 ed */}
             <div className="grid-btn-wrap">

src/styles/_modal.scss

@@ -2459,22 +2459,20 @@ $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{
 
+.roof-content-tab-wrap{
+    display: flex;
+    padding-top: 10px;
+}
+.hide-tab-contents{
+    &.hide{
+        height: 0;
+        overflow: hidden;
     }
 }