ng-deep 정리중 (1차)

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="left-container">
   <mat-tab-group
     mat-stretch-tabs
     animationDuration="0ms"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss

@@ -1,58 +1,16 @@
-::ng-deep .mat-tab-label,
+.left-container {
-::ng-deep .mat-tab-label-active {
-  min-width: 0 !important;
-}
-
-::ng-deep .mat-tab-body-wrapper,
-::ng-deep .mat-tab-body {
-  height: 100%;
-  width: 100%;
-}
-::ng-deep .mat-tab-header {
-  border-bottom: none !important;
-  width: 100%;
-}
-
-.left-side-tabs-body {
-  position: relative;
-  height: 100%;
-  div[id^='tabs'] {
-    height: 100%;
-    width: 100%;
-    position: relative;
-  }
-}
-
-.container {
   display: flex;
+  width: 100%;
   height: 100%;
 }
 
-.mat-tab-group {
+::ng-deep .global-menu {
   display: flex;
   flex-direction: row;
-}
+  .mat-tab-header {
-
+    border-bottom: none !important;
-.myprofile {
+    width: 100%;
-  position: absolute;
+  }
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  height: 80px;
-  width: 68px;
-  bottom: 10px;
-  color: #ffffff;
-  font-size: 11px;
-  text-align: center;
-  z-index: 1;
-  cursor: pointer;
-}
-
-::ng-deep .organization-side {
-  flex-direction: column;
-  height: 100%;
-}
-::ng-deep .global-menu {
   .mat-tab-label-container {
     .mat-tab-list {
       .mat-tab-labels {
@@ -60,10 +18,48 @@
         height: 360px;
         padding-top: 10px;
         border-bottom: none;
+
         .mat-tab-label {
           width: 100%;
           height: 80px;
           padding: 0;
+          min-width: 0 !important;
+          .mat-tab-label-content {
+            .icon-item {
+              display: inline-flex;
+              width: 36px;
+              height: 36px;
+              border-radius: 50%;
+              justify-content: center;
+              align-items: center;
+              transform: scale(0.9);
+              transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
+
+              svg {
+                width: 24px;
+                height: 24px;
+                stroke: #ffffff;
+                stroke-width: 1.5;
+                stroke-linecap: square;
+                stroke-linejoin: miter;
+                fill: none;
+              }
+              .mat-badge-content {
+                right: -4px !important;
+              }
+            }
+          }
+          &.mat-tab-label-active {
+            min-width: 0 !important;
+          }
+          &[aria-selected='true'] {
+            opacity: 1;
+            .mat-tab-label-content {
+              .icon-item {
+                transform: scale(1);
+              }
+            }
+          }
         }
       }
       .mat-ink-bar {
@@ -72,60 +68,32 @@
       }
     }
   }
-}
+  .mat-tab-body-wrapper {
-.left-group-side {
+    .mat-tab-body {
-  position: relative;
+      height: 100%;
-  height: 100%;
+      width: 100%;
-}
-
-::ng-deep .mat-tab-label {
-  .mat-tab-label-content {
-    .icon-item {
-      background: var(--white);
-      border-radius: 4px;
-      display: inline-flex;
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      justify-content: center;
-      align-items: center;
-      transform: scale(0.9);
-      transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
-
-      svg {
-        width: 24px;
-        height: 24px;
-        stroke: #ffffff;
-        stroke-width: 1.5;
-        stroke-linecap: square;
-        stroke-linejoin: miter;
-        fill: none;
-      }
-      .mat-badge-content {
-        right: -4px !important;
-      }
-    }
-  }
-  &[aria-selected='true'] {
-    opacity: 1;
-    .mat-tab-label-content {
-      .icon-item {
-        transform: scale(1);
-      }
     }
   }
 }
 
-::ng-deep .ps {
+/*::ng-deep .ps {
   .ps-content {
     position: relative;
     width: 100%;
     height: 100%;
   }
-}
+}*/
 // perfect-scrollbar right로 2px이동
 ::ng-deep .ps__rail-y {
   & > .ps__thumb-y {
     margin-right: -2px;
   }
 }
+
+::ng-deep .cdk-virtual-scroll-orientation-vertical {
+  .cdk-virtual-scroll-content-wrapper {
+    width: 100%;
+    height: 100%;
+    contain: unset;
+  }
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss

@@ -1,126 +1,30 @@
-::ng-deep .mat-tab-label,
+.container {
-::ng-deep .mat-tab-label-active {
+  display: flex;
-  min-width: 0 !important;
+  width: 300px;
-}
-
-::ng-deep .mat-tab-body-wrapper,
-::ng-deep .mat-tab-body {
   height: 100%;
-  width: 100%;
+  .mat-tab-group {
-}
+    display: flex;
-::ng-deep .mat-tab-header {
+    flex-direction: row;
-  border-bottom: none !important;
+  }
-  width: 100%;
 }
 
 .left-side-tabs-body {
   position: relative;
   height: 100%;
-  div.left-side-tabs-contents {
+  div[id^='tabs'] {
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+  .left-side-tabs-contents {
     height: 100%;
     width: 100%;
     position: relative;
   }
 }
 
-.container {
+//다이얼로그 창과 구분
-  display: flex;
+.organization-side {
-  width: 300px;
-  height: 100%;
-}
-
-.mat-tab-group {
-  display: flex;
-  flex-direction: row;
-}
-
-.myprofile {
-  position: absolute;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  height: 80px;
-  width: 68px;
-  bottom: 10px;
-  color: #ffffff;
-  font-size: 11px;
-  text-align: center;
-  z-index: 1;
-  cursor: pointer;
-}
-
-::ng-deep .organization-side {
   flex-direction: column;
   height: 100%;
 }
-::ng-deep .global-menu {
-  .mat-tab-label-container {
-    .mat-tab-list {
-      .mat-tab-labels {
-        flex-flow: column;
-        height: 360px;
-        padding-top: 10px;
-        border-bottom: none;
-        .mat-tab-label {
-          width: 100%;
-          height: 80px;
-          padding: 0;
-        }
-      }
-      .mat-ink-bar {
-        background-color: none;
-        height: 0;
-      }
-    }
-  }
-}
-.left-group-side {
-  position: relative;
-  height: 100%;
-}
-
-::ng-deep .mat-tab-label {
-  .mat-tab-label-content {
-    .icon-item {
-      background: var(--white);
-      border-radius: 4px;
-      display: inline-flex;
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      justify-content: center;
-      align-items: center;
-      transform: scale(0.9);
-      transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
-
-      svg {
-        width: 24px;
-        height: 24px;
-        stroke: #ffffff;
-        stroke-width: 1.5;
-        stroke-linecap: square;
-        stroke-linejoin: miter;
-        fill: none;
-      }
-      .mat-badge-content {
-        right: -4px !important;
-      }
-    }
-  }
-  &[aria-selected='true'] {
-    opacity: 1;
-    .mat-tab-label-content {
-      .icon-item {
-        transform: scale(1);
-      }
-    }
-  }
-}
-
-::ng-deep .ps {
-  .ps-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss

@@ -19,12 +19,12 @@
 }
 
 .app-layout-chat-left-sidenav-chat-list {
-  //height: calc(100% - 120px);
   position: relative;
 
   .no-search-result {
-    padding-top: 10px;
+    justify-content: center;
-    padding-left: 10px;
+    align-items: center;
+    display: flex;
   }
 }
 
@@ -32,10 +32,10 @@
   width: 100%;
   height: 100%;
 }
-::ng-deep .cdk-virtual-scroll-orientation-vertical {
+/*::ng-deep .cdk-virtual-scroll-orientation-vertical {
   .cdk-virtual-scroll-content-wrapper {
     width: 100%;
     height: 100%;
     contain: unset;
   }
-}
+}*/

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss

@@ -1,7 +1,3 @@
-.message-box {
-  position: relative;
-  height: 100%;
-}
 .current-head {
   h3 {
     display: inline-flex;
@@ -23,12 +19,22 @@
   cursor: pointer;
 }
 ::ng-deep .message-box {
+  position: relative;
+  height: 100%;
   .message-section {
     position: relative;
-    //height: calc(100% - 120px);
     .message-tab {
       position: relative;
       height: 100%;
+      & > .mat-tab-header {
+        width: 100%;
+        .mat-tab-label {
+          min-width: 33%;
+        }
+      }
+      .mat-tab-body-wrapper {
+        height: calc(100% - 50px);
+      }
     }
     .search-sub {
       padding: 0 20px;

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

@@ -14,21 +14,31 @@
 </div>
 <ng-container *ngIf="selectedRightDrawer" [ngSwitch]="selectedRightDrawer">
   <!-- [S] About Chat room -->
-  <app-layout-chat-right-drawer-file-box *ngSwitchCase="RightDrawer.FileBox">
+  <app-layout-chat-right-drawer-file-box
+    *ngSwitchCase="RightDrawer.FileBox"
+    class="rightDrawer-item"
+  >
   </app-layout-chat-right-drawer-file-box>
 
-  <app-layout-chat-right-drawer-album-box *ngSwitchCase="RightDrawer.AlbumBox">
+  <app-layout-chat-right-drawer-album-box
+    *ngSwitchCase="RightDrawer.AlbumBox"
+    class="rightDrawer-item"
+  >
   </app-layout-chat-right-drawer-album-box>
 
   <app-layout-chat-right-drawer-room-user-list
     *ngSwitchCase="RightDrawer.RoomUser"
     (openProfile)="onClickOpenProfile($event)"
+    class="rightDrawer-item"
   >
   </app-layout-chat-right-drawer-room-user-list>
   <!-- [E] About Chat room -->
 
   <!-- [S] About Common -->
-  <app-layout-chat-right-drawer-notice *ngSwitchCase="RightDrawer.Notice">
+  <app-layout-chat-right-drawer-notice
+    *ngSwitchCase="RightDrawer.Notice"
+    class="rightDrawer-item"
+  >
   </app-layout-chat-right-drawer-notice>
   <!-- [E] About Common -->
 </ng-container>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss

@@ -1,3 +1,4 @@
+$tablet-s-width: 768px;
 .rightDrawer-title {
   height: 50px;
   border-bottom: 1px solid #dddddd;
@@ -11,10 +12,75 @@
     margin-right: -10px;
   }
 }
-::ng-deep .mat-tab-labels {
+
-  display: flex;
+//rightDrawer공통
+::ng-deep .rightDrawer-item {
   width: 100%;
-  border-bottom: 2px solid #dddddd;
+  height: calc(100% - 60px);
-  flex: 1 1 auto;
+  .rightDrawer-tab {
-  justify-content: space-around;
+    .mat-tab-label {
+      width: 50%;
+      min-width: 50%;
+    }
+    .mat-tab-header-pagination {
+      display: none;
+    }
+  }
 }
+
+::ng-deep .footer-fix {
+  position: absolute;
+  bottom: 0;
+  min-height: 40px;
+  width: 100%;
+  flex-direction: column;
+  box-sizing: border-box;
+  display: flex;
+  border-top: 1px solid #dddddd;
+  .btn-box {
+    height: 50px;
+    padding-bottom: 10px;
+    width: 100%;
+    background-color: #ffffff;
+    button {
+      margin: 5px;
+      font-size: 0.9em;
+      padding: 0 12px;
+    }
+  }
+  .mat-paginator-page-size {
+    @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
+      display: none;
+    }
+  }
+}
+
+/*right-drawer tab 레이아웃
+::ng-deep .rightDrawer-tab {
+  .mat-tab-labels {
+    display: flex;
+    width: 100%;
+    border-bottom: 2px solid #dddddd;
+    flex: 1 1 auto;
+    justify-content: space-around;
+    width: 100%;
+    padding: 0;
+    min-width: 0 !important;
+
+    .mat-tab-label {
+      width: 50%;
+    }
+  }
+  .mat-tab-header-pagination.mat-tab-header-pagination-disabled {
+    display: none !important;
+  }
+  .message-tab {
+      position: relative;
+      height: 100%;
+      & > .mat-tab-header {
+        width: 100%;
+        .mat-tab-label {
+          min-width: 33%;
+        }
+      }
+}*/

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="column" class="rightDrawer-albumbox">
-  <div>
+  <div class="rightDrawer-tab">
     <mat-tab-group
       mat-stretch-tabs
       animationDuration="0ms"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss

@@ -14,17 +14,11 @@ $tablet-s-width: 768px;
     word-wrap: break-word;
   }
 }
-
+.rightDrawer-albumbox {
-::ng-deep .rightDrawer-albumbox {
+  position: relative;
+  width: 100%;
   height: 100%;
-  overflow: hidden;
-  .mat-tab-labels {
-    .mat-tab-label {
-      width: 50%;
-    }
-  }
 }
-
 .select-filebox {
   display: flex;
   flex-flow: column;
@@ -92,6 +86,11 @@ $tablet-s-width: 768px;
     cursor: pointer;
     margin-bottom: 10px;
     position: relative;
+    width: 32%;
+    margin-right: 2%;
+    &:nth-child(3n + 0) {
+      margin-right: 0;
+    }
     dl {
       dt {
         display: flex;
@@ -125,19 +124,21 @@ $tablet-s-width: 768px;
       justify-content: stretch;
       align-content: space-between;
       width: 100%;
-      .img-item {
-        cursor: pointer;
-        margin-bottom: 10px;
-        position: relative;
-        width: 32%;
-        margin-right: 2%;
-        &:nth-child(3n + 0) {
-          margin-right: 0;
-        }
-      }
     }
   }
 }
+
+.img-item {
+  cursor: pointer;
+  margin-bottom: 10px;
+  position: relative;
+  width: 32%;
+  margin-right: 2%;
+  &:nth-child(3n + 0) {
+    margin-right: 0;
+  }
+}
+
 .preview-image,
 .preview-video {
   max-height: 140px;
@@ -145,7 +146,7 @@ $tablet-s-width: 768px;
 
 .btn-box {
   position: absolute;
-  bottom: 0;
+  bottom: 50px;
   height: 50px;
   margin-bottom: 10px;
   width: 100%;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss

@@ -16,14 +16,9 @@ $tablet-s-width: 768px;
   }
 }
 
-::ng-deep .rightDrawer-filebox {
+.rightDrawer-filebox {
   width: 100%;
   height: calc(100% - 60px);
-  .rightDrawer-tab {
-    .mat-tab-label {
-      width: 50%;
-    }
-  }
 }
 
 .select-filebox {
@@ -140,7 +135,7 @@ $tablet-s-width: 768px;
   }
 }
 .table-box {
-  height: calc(100% - 440px);
+  height: calc(100% - 420px);
   overflow-y: auto;
   @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
     height: calc(100% - 146px);
@@ -164,35 +159,8 @@ $tablet-s-width: 768px;
   cursor: pointer;
 }
 
-::ng-deep .footer-fix {
+/*::ng-deep .mat-form-field-appearance-legacy {
-  position: absolute;
-  bottom: 0;
-  min-height: 40px;
-  width: 100%;
-  flex-direction: column;
-  box-sizing: border-box;
-  display: flex;
-  border-top: 1px solid #dddddd;
-  .btn-box {
-    height: 50px;
-    padding-bottom: 10px;
-    width: 100%;
-    background-color: #ffffff;
-    button {
-      margin: 5px;
-      font-size: 0.9em;
-      padding: 0 12px;
-    }
-  }
-  .mat-paginator-page-size {
-    @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
-      display: none;
-    }
-  }
-}
-
-::ng-deep .mat-form-field-appearance-legacy {
   .mat-form-field-infix {
     padding: 6px;
   }
-}
+}*/

projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss

@@ -7,6 +7,7 @@ $tablet-s-width: 768px;
   .mat-tab-header {
     .mat-tab-label {
       padding: 0 10px;
+      min-width: 16%;
     }
   }
   .mat-tab-body-wrapper {