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

popup spinner 추가

Browse Source
This commit is contained in:
김창수 2025-03-13 09:49:07 +09:00
parent c282565288
commit 145a4cbe84
5 changed files with 67 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
View File

@ -2,6 +2,8 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
import PlacementGuidePop from "./PlacementGuidePop";
import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop";
import Qselect from "@/components/common/select/Qselect";
import PopSpinner from "@/components/common/spinner/PopSpiner";
const SelectOption01 = [
{name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
]
@ -189,6 +191,7 @@ export default function PlacementSettingPop(){
<div className="modal-foot handle"></div>
{/* <PlacementGuidePop/>
<RoofingMaterialGudiePop/> */}
<PopSpinner/>
</div>
</WithDraggable>
)

2
src/components/canvas/modal/roofallocation/RoofAllocation.jsx
View File

@ -1,5 +1,6 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import Qselect from "@/components/common/select/Qselect";
import PopSpinner from "@/components/common/spinner/PopSpiner";
const SelectOption01 = [
{name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
@ -170,6 +171,7 @@ export default function RoofAllocation() {
</div>
</div>
<div className="modal-foot handle"></div>
<PopSpinner/>
</div>
</WithDraggable>
)

7
src/components/common/spinner/PopSpiner.jsx Normal file
View File

@ -0,0 +1,7 @@
export default function PopSpinner() {
return(
<div className='pop-spinner'>
<span className="loader"></span>
</div>
)
}

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

@ -270,12 +270,16 @@ export default function PublishPage() {
<li>2025-02-19</li>
<li>*배치면 선 속성 설정 팝업 버튼 추가</li>
</ul>
<ul>
<ul className='mb10'>
<li>2025-02-27</li>
<li>*오브젝트 배치 팝업 명칭 및 숫자 변경, 이미지 변경</li>
<li>*지붕재 추가 상단 타이틀 제거 버튼 추가</li>
<li>*면형상 배치 1번 이미지 교체</li>
</ul>
<ul>
<li>2025-03-13</li>
<li>* popup spinner 추가</li>
</ul>
</td>
<td className="t-center">2024-10-28</td>
</tr>

50
src/styles/_modal.scss
View File

@ -2224,3 +2224,53 @@ $alert-color: #101010;
justify-content: flex-end;
}
}
.pop-spinner{
position: absolute;
bottom: 10px;
left: 5px;
width: calc(100% - 10px);
height: calc(100% - 49px);
display: flex;
align-items: center;
justify-content: center;
background-color: rgba($color: #101010, $alpha: 0.5);
z-index: 2000000;
.loader {
font-size: 10px;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #fff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
}
}
}