progress bar is modified

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html

@@ -46,9 +46,12 @@
   </ucap-group-expansion-panel>
 </div>
 <div [style.display]="isShowSearch ? 'block' : 'none'" class="search-result">
-  <div *ngIf="searchProcessing">
+  <div style="position: relative;">
+    <div *ngIf="searchProcessing" style="position: absolute; width: 100%;">
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
+  </div>
+
   <div class="result-num">
     검색결과<span class="text-accent-color"
       >({{ searchUserInfos.length }}명)</span
@@ -93,16 +96,36 @@
   </button>
   <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
     <!--<mat-icon>expand_more</mat-icon>-->
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+    <svg
-      stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+      xmlns="http://www.w3.org/2000/svg"
-      <path d="M6 9l6 6 6-6" /></svg>
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+    >
+      <path d="M6 9l6 6 6-6" />
+    </svg>
     <span>그룹 전체 열기</span>
   </button>
   <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
     <!--<mat-icon>expand_less</mat-icon>-->
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+    <svg
-        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+      xmlns="http://www.w3.org/2000/svg"
-        <path d="M18 15l-6-6-6 6" /></svg>
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+    >
+      <path d="M18 15l-6-6-6 6" />
+    </svg>
     <span>그룹 전체 닫기</span>
   </button>
   <!-- <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -142,10 +142,14 @@
     </div>
   </mat-toolbar>
   <!-- / CHAT TOOLBAR -->
-  <mat-progress-bar
+  <div style="position: relative;">
+    <div
       *ngIf="eventListProcessing$ | async"
-    mode="indeterminate"
+      style="position: absolute; width: 100%;"
-  ></mat-progress-bar>
+    >
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </div>
+  </div>
   <!-- CHAT CONTENT -->
   <div
     fxFlex="1 1 auto"

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html

@@ -93,9 +93,15 @@
                 [style.display]="isShowSearch ? 'block' : 'none'"
                 class="search-result"
               >
-                <div *ngIf="searchProcessing">
+                <div style="position: relative;">
+                  <div
+                    *ngIf="searchProcessing"
+                    style="position: absolute; width: 100%;"
+                  >
                     <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                   </div>
+                </div>
+
                 <div class="result-num">
                   검색결과
                   <span class="text-accent-color"

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html

@@ -1,35 +1,91 @@
 <div class="ucap-binary-viewer-container">
   <mat-toolbar class="ucap-binary-viewer-header">
     <!--<mat-icon class="ucap-binary-viewer-icon">attachment</mat-icon>-->
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+    <svg
-      stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="ucap-binary-viewer-icon">
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+      class="ucap-binary-viewer-icon"
+    >
       <path
-        d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">
+        d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
-      </path>
+      ></path>
     </svg>
     <span class="ucap-binary-viewer-title">{{ fileInfo.fileName }}</span>
     <span class="ucap-binary-viewer-spacer"></span>
 
-    <button mat-icon-button class="ucap-binary-viewer-action" matTooltip="다운로드" matTooltipPosition="below" aria-label=""
+    <button
-      (click)="onClickDownload()">
+      mat-icon-button
-      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
+      class="ucap-binary-viewer-action"
-        stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+      matTooltip="다운로드"
-        <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" />
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickDownload()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
+        <path
+          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+        />
       </svg>
     </button>
     <span class="stroke-bar"></span>
-    <button mat-icon-button color="warn" class="ucap-binary-viewer-action" (click)="onClickClose()">
+    <button
-      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
+      mat-icon-button
-        stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+      color="warn"
+      class="ucap-binary-viewer-action"
+      (click)="onClickClose()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
         <line x1="18" y1="6" x2="6" y2="18"></line>
         <line x1="6" y1="6" x2="18" y2="18"></line>
       </svg>
     </button>
   </mat-toolbar>
-
+  <div style="position: relative;">
+    <div
+      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-binary-viewer-body">
-    <div class="ucap-binary-viewer-content-wrapper" fxLayout="column" fxLayout.xs="row" fxFlexFill
+    <div
-      fxLayoutAlign="center center">
+      class="ucap-binary-viewer-content-wrapper"
+      fxLayout="column"
+      fxLayout.xs="row"
+      fxFlexFill
+      fxLayoutAlign="center center"
+    >
       <div class="circle-box">
         <div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
           <div class="ico"></div>
@@ -39,7 +95,12 @@
         미리보기를 지원하지 않는 파일입니다.
       </div>
       <div>
-        <button colori mat-raised-button aria-label="" (click)="onClickDownload()">
+        <button
+          colori
+          mat-raised-button
+          aria-label=""
+          (click)="onClickDownload()"
+        >
           Download
         </button>
       </div>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html

@@ -15,9 +15,15 @@
       >delete</mat-icon
     >
   </mat-toolbar>
-  <mat-progress-bar
+  <div style="position: relative;">
+    <div
       *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
         mode="determinate"
         [value]="fileDownloadItem.downloadingProgress$ | async"
       ></mat-progress-bar>
     </div>
+  </div>
+</div>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html

@@ -143,11 +143,17 @@
       </svg>
     </button>
   </mat-toolbar>
-  <mat-progress-bar
+  <div style="position: relative;">
+    <div
       *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
         mode="determinate"
         [value]="fileDownloadItem.downloadingProgress$ | async"
       ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-image-viewer-body">
     <div
       class="ucap-image-viewer-image-wrapper"

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html

@@ -22,11 +22,17 @@
       Close
     </button>
   </mat-toolbar>
-  <mat-progress-bar
+  <div style="position: relative;">
+    <div
       *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
         mode="determinate"
         [value]="fileDownloadItem.downloadingProgress$ | async"
       ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-sound-viewer-body">
     <div
       class="ucap-sound-viewer-sound-icon"

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html

@@ -73,11 +73,17 @@
       </svg>
     </button>
   </mat-toolbar>
-  <mat-progress-bar
+  <div style="position: relative;">
+    <div
       *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
         mode="determinate"
         [value]="fileDownloadItem.downloadingProgress$ | async"
       ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-video-viewer-body">
     <div
       class="ucap-video-viewer-video-icon"