popup spinner 추가

src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx

@@ -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>
     )

src/components/canvas/modal/roofallocation/RoofAllocation.jsx

@@ -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>
     )

src/components/common/spinner/PopSpiner.jsx

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

src/components/publishpage/PublishPage.jsx

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

src/styles/_modal.scss

@@ -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;
+            }
+        }
+}