qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
김창수 2025-05-30 14:34:13 +09:00
parent 176c9f35e8
commit beeb44c78e
6 changed files with 140 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/static/images/canvas/roof_warning_correct.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/static/images/canvas/roof_warning_wrong.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

4
src/app/canvas/page.jsx
View File

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

201
src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx
View File

@ -1,9 +1,11 @@
'use client' 'use client'
import Image from "next/image";
import { useState } from "react" import { useState } from "react"
export default function RoofModuleOptionTab03({setTabNum}){ export default function RoofModuleOptionTab03({setTabNum}){
const [useTab, setUseTab] = useState(false); const [useTab, setUseTab] = useState(false);
const [warningTab, setWarningTab] = useState(false);
return( return(
<> <>
@ -133,98 +135,119 @@ export default function RoofModuleOptionTab03({setTabNum}){
</div> </div>
</div> </div>
</div> </div>
<div className="hide-check-guide"> {/* 2025-05-30 st */}
屋根材別モジュールの最大段数。混合最大単数を確認してください <div className="hide-tab-wrap">
<button className={`arr ${useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button> <div className="hide-check-guide">
</div> 屋根材別モジュールの最大段数。混合最大単数を確認してください
<div className={`module-table-box mt10 ${useTab ? 'hide' : ''}`}> <button className={`arr ${useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
<div className="module-table-inner"> </div>
<div className="roof-module-table"> <div className={`module-table-box mt10 ${useTab ? 'hide' : ''}`}>
<table> <div className="module-table-inner">
<thead> <div className="roof-module-table">
<tr> <table>
<th rowSpan={2} style={{width: '22%'}}></th> <thead>
<th> <tr>
<div className="color-wrap"> <th rowSpan={2} style={{width: '22%'}}></th>
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span> <th>
<span className="name">Re.RISE-G3 440</span> <div className="color-wrap">
</div> <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
</th> <span className="name">Re.RISE-G3 440</span>
<th> </div>
<div className="color-wrap"> </th>
<span className="color-box" style={{backgroundColor: '#67A2AA'}}></span> <th>
<span className="name">Re.RISE MS-G3 290</span> <div className="color-wrap">
</div> <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
</th> <span className="name">Re.RISE MS-G3 290</span>
<th> </div>
<div className="color-wrap"> </th>
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span> <th>
<span className="name">Re.RISE-G3 440</span> <div className="color-wrap">
</div> <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
</th> <span className="name">Re.RISE-G3 440</span>
<th></th> </div>
</tr> </th>
<tr> <th></th>
<th>最大段数</th> </tr>
<th>最大段数</th> <tr>
<th>最大段数</th> <th>最大段数</th>
<th>2種混合最大段数</th> <th>最大段数</th>
</tr> <th>最大段数</th>
</thead> <th>2種混合最大段数</th>
<tbody> </tr>
<tr> </thead>
<td> <tbody>
<div className="color-wrap"> <tr>
<span className="color-box" style={{backgroundColor: '#FFFF00'}}></span> <td>
<span className="name">アスファルトシングル</span> <div className="color-wrap">
</div> <span className="color-box" style={{backgroundColor: '#FFFF00'}}></span>
</td> <span className="name">アスファルトシングル</span>
<td className="al-r">7</td> </div>
<td className="al-r">5</td> </td>
<td className="al-r">5</td> <td className="al-r">7</td>
<td className="al-r">5</td> <td className="al-r">5</td>
</tr> <td className="al-r">5</td>
<tr> <td className="al-r">5</td>
<td> </tr>
<div className="color-wrap"> <tr>
<span className="color-box" style={{backgroundColor: '#FFC000'}}></span> <td>
<span className="name">アスファルトシングル</span> <div className="color-wrap">
</div> <span className="color-box" style={{backgroundColor: '#FFC000'}}></span>
</td> <span className="name">アスファルトシングル</span>
<td className="al-r">7</td> </div>
<td className="al-r">5</td> </td>
<td className="al-r">5</td> <td className="al-r">7</td>
<td className="al-r">5</td> <td className="al-r">5</td>
</tr> <td className="al-r">5</td>
<tr> <td className="al-r">5</td>
<td> </tr>
<div className="color-wrap"> <tr>
<span className="color-box" style={{backgroundColor: '#7030A0'}}></span> <td>
<span className="name">アスファルトシングル</span> <div className="color-wrap">
</div> <span className="color-box" style={{backgroundColor: '#7030A0'}}></span>
</td> <span className="name">アスファルトシングル</span>
<td className="al-r">7</td> </div>
<td className="al-r">5</td> </td>
<td className="al-r">5</td> <td className="al-r">7</td>
<td className="al-r">5</td> <td className="al-r">5</td>
</tr> <td className="al-r">5</td>
<tr> <td className="al-r">5</td>
<td> </tr>
<div className="color-wrap"> <tr>
<span className="color-box" style={{backgroundColor: '#385723'}}></span> <td>
<span className="name">アスファルトシングル</span> <div className="color-wrap">
</div> <span className="color-box" style={{backgroundColor: '#385723'}}></span>
</td> <span className="name">アスファルトシングル</span>
<td className="al-r">7</td> </div>
<td className="al-r">5</td> </td>
<td className="al-r">5</td> <td className="al-r">7</td>
<td className="al-r">5</td> <td className="al-r">5</td>
</tr> <td className="al-r">5</td>
</tbody> <td className="al-r">5</td>
</table> </tr>
</tbody>
</table>
</div>
</div> </div>
</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"> <div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>前に戻る</button> <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>前に戻る</button>
<button className="btn-frame modal mr5">単数指定配置</button> <button className="btn-frame modal mr5">単数指定配置</button>

6
src/components/publishpage/PublishPage.jsx
View File

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

21
src/styles/_modal.scss
View File

@ -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{
}
}