From 771b88b1b308afabff0a79271ff246907268244e Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Thu, 13 Feb 2020 20:03:24 +0900
Subject: [PATCH] =?UTF-8?q?ng-deep=20=EC=A0=95=EB=A6=AC=EC=A4=91(6?=
 =?UTF-8?q?=EC=B0=A8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/left-nav.component.scss        |  15 ---
 .../left-sidenav/message.component.html       |   4 +-
 .../left-sidenav/message.component.scss       |  15 ---
 .../components/right-drawer.component.scss    |   4 +-
 .../right-drawer/album-box.component.html     | 118 +++++++++---------
 .../right-drawer/album-box.component.scss     |   1 +
 .../right-drawer/file-box.component.html      |   1 +
 .../right-drawer/file-box.component.scss      |  10 --
 .../right-drawer/notice.component.scss        |   2 +-
 .../native/components/top-bar.component.html  |  12 +-
 .../native/components/top-bar.component.scss  |  44 +++----
 .../components/main.page.component.scss       |  14 +--
 .../src/assets/scss/global/_default.scss      |  84 +++++++++++--
 .../lib/components/message-box.component.scss |  19 ---
 .../message-box/schedule.component.scss       |   4 -
 .../video-conference.component.scss           |   4 -
 .../src/lib/components/search.component.scss  |   8 +-
 .../src/lib/components/write.component.html   |  55 ++------
 .../src/lib/components/write.component.scss   |  39 +++---
 .../src/lib/components/profile.component.html |   4 +-
 .../src/lib/components/profile.component.scss |  13 +-
 21 files changed, 212 insertions(+), 258 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss
index 1fdb3d35..643be540 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss
@@ -75,18 +75,3 @@
     }
   }
 }
-
-// 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;
-  }
-}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
index d83cb5cb..9c8f536e 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
@@ -44,7 +44,7 @@
       animationDuration="0ms"
       [selectedIndex]="0"
       (selectedIndexChange)="onSelectedIndexChange($event)"
-      class="message-tab"
+      class="message-tab tab_num3"
     >
       <mat-tab [label]="MessageType.Receive">
         <ng-template mat-tab-label>
@@ -161,7 +161,7 @@
         </mat-radio-group>
       </form>
     </div>
-    <div style="height: calc(100% - 65.5px)">
+    <div style="height: calc(100% - 50px)">
       <perfect-scrollbar
         fxFlex="1 1 auto"
         *ngIf="!!(messageSearchList$ | async)"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
index 216dfd4b..696370db 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
@@ -66,18 +66,3 @@
     }
   }
 }
-
-//쪽지 local style
-::ng-deep .message-box {
-  .mat-tab-label {
-    min-width: 33%;
-  }
-  .mat-radio-label {
-    .mat-radio-label-content {
-      padding-left: 4px;
-    }
-  }
-  .mat-tab-body-wrapper {
-    height: calc(100% - 50px);
-  }
-}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss
index 8b61b407..c72454f8 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss
@@ -13,7 +13,7 @@ $tablet-s-width: 768px;
   }
 }
 
-//rightDrawer공통
+/*rightDrawer공통
 ::ng-deep .rightDrawer-item {
   width: 100%;
   height: calc(100% - 60px);
@@ -23,4 +23,4 @@ $tablet-s-width: 768px;
       min-width: 50%;
     }
   }
-}
+}*/
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
index ab291689..eb8c74cd 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
@@ -4,6 +4,7 @@
       mat-stretch-tabs
       animationDuration="0ms"
       (selectedIndexChange)="onSelectedIndexChange($event)"
+      class="tab_num2"
     >
       <mat-tab label="{{ 'common.file.type.images' | translate }}"></mat-tab>
       <mat-tab label="{{ 'common.file.type.video' | translate }}"></mat-tab>
@@ -101,71 +102,70 @@
   <div class="search-list">
     <perfect-scrollbar class="album-scrollbar">
       <div class="albumlist-content">
-      <div
-        *ngFor="let fileInfo of filteredList"
-        class="img-item"
-        (click)="onClickImage($event, fileInfo)"
-      >
-        <dl>
-          <dt>
-            <div
-              *ngIf="fileInfo.fileDownloadItem.downloadingProgress$ | async"
-              class="spinner"
-            >
-              <span class="mdi mdi-spin mdi-loading mdi-48px"></span>
-            </div>
-            <div
-              *ngIf="
-                !!fileInfo.info &&
-                  !!fileInfo.info.sentMessageJson &&
-                  !!fileInfo.info.sentMessageJson.thumbUrl;
-                then thumb;
-                else icon
-              "
-            ></div>
-            <ng-template #thumb>
-              <img
-                #thumbImg
-                [src]="fileInfo.info.sentMessageJson.thumbUrl"
-                [matTooltip]="fileInfo.info.name"
-                (error)="onErrorThumbnail(thumbImg, fileInfo)"
-              />
-            </ng-template>
-            <ng-template #icon>
+        <div
+          *ngFor="let fileInfo of filteredList"
+          class="img-item"
+          (click)="onClickImage($event, fileInfo)"
+        >
+          <dl>
+            <dt>
               <div
-                [ngClass]="[
-                  'mime-icon',
-                  'light',
-                  'ico-' + getExtention(fileInfo.info.name)
-                ]"
+                *ngIf="fileInfo.fileDownloadItem.downloadingProgress$ | async"
+                class="spinner"
               >
-                <div class="ico"></div>
+                <span class="mdi mdi-spin mdi-loading mdi-48px"></span>
               </div>
-            </ng-template>
-          </dt>
-          <dd>
-            <span class="checkbox">
-              <mat-checkbox
-                #checkbox
-                [checked]="getCheckItem(fileInfo)"
-                (change)="onCheckItem(checkbox.checked, fileInfo)"
-                (click)="$event.stopPropagation()"
-              >
-              </mat-checkbox>
-            </span>
-            <span class="btn-download">
-              <button mat-button (click)="onClickDownload(fileInfo)">
-                <mat-icon>vertical_align_bottom</mat-icon>
-              </button>
-            </span>
-          </dd>
-        </dl>
-      </div>
+              <div
+                *ngIf="
+                  !!fileInfo.info &&
+                    !!fileInfo.info.sentMessageJson &&
+                    !!fileInfo.info.sentMessageJson.thumbUrl;
+                  then thumb;
+                  else icon
+                "
+              ></div>
+              <ng-template #thumb>
+                <img
+                  #thumbImg
+                  [src]="fileInfo.info.sentMessageJson.thumbUrl"
+                  [matTooltip]="fileInfo.info.name"
+                  (error)="onErrorThumbnail(thumbImg, fileInfo)"
+                />
+              </ng-template>
+              <ng-template #icon>
+                <div
+                  [ngClass]="[
+                    'mime-icon',
+                    'light',
+                    'ico-' + getExtention(fileInfo.info.name)
+                  ]"
+                >
+                  <div class="ico"></div>
+                </div>
+              </ng-template>
+            </dt>
+            <dd>
+              <span class="checkbox">
+                <mat-checkbox
+                  #checkbox
+                  [checked]="getCheckItem(fileInfo)"
+                  (change)="onCheckItem(checkbox.checked, fileInfo)"
+                  (click)="$event.stopPropagation()"
+                >
+                </mat-checkbox>
+              </span>
+              <span class="btn-download">
+                <button mat-button (click)="onClickDownload(fileInfo)">
+                  <mat-icon>vertical_align_bottom</mat-icon>
+                </button>
+              </span>
+            </dd>
+          </dl>
+        </div>
       </div>
     </perfect-scrollbar>
   </div>
-  <div class="btn-box"
-  >
+  <div class="btn-box">
     <button
       mat-flat-button
       [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
index e8677900..ee882a8a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
@@ -14,6 +14,7 @@ $tablet-s-width: 768px;
     word-wrap: break-word;
   }
 }
+
 .rightDrawer-albumbox {
   position: relative;
   width: 100%;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
index d246bd85..73a991a2 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
@@ -4,6 +4,7 @@
       mat-stretch-tabs
       animationDuration="0ms"
       (selectedIndexChange)="onSelectedIndexChange($event)"
+      class="tab_num2"
     >
       <mat-tab label="{{ 'chat.typeReceived' | translate }}"></mat-tab>
       <mat-tab label="{{ 'chat.typeSent' | translate }}"></mat-tab>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
index 8ce49a9a..ab1934e1 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
@@ -178,16 +178,6 @@ $tablet-s-width: 768px;
       padding: 0 12px;
     }
   }
-  .mat-paginator-page-size {
-    @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
-      display: none;
-    }
-  }
-}
-
-.mat-paginator-container {
-  display: flex;
-  flex-flow: column;
 }
 
 .mat-row:hover {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/notice.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/notice.component.scss
index d1822359..91bbeba3 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/notice.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/notice.component.scss
@@ -19,7 +19,7 @@
   height: calc(100% - 60px);
 
   .table-box {
-    height: calc(100% - 111.5px);
+    height: calc(100% - 100px);
     overflow: auto;
   }
   .footer-fix {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 7b8a060a..dde66f22 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -260,22 +260,22 @@
         {{ 'profile.open' | translate }}
       </button>
     </div>
-    <!-- <div class="setting">
+    <!--<div class=" zoom setting">
     <button
       mat-menu-item
-      class="zoom minus-square"
+      class="icon-button"
       (click)="onClickZoomOut($event)"
     >
-      축소</button
+      <i class="mid mdi-minus-box-outline"></i>축소</button
     ><span class="set-size" (click)="onClickZoomLabel($event)">{{ zoom }}%</span
     ><button
       mat-menu-item
-      class="zoom plus-square"
+      class="icon-button"
       (click)="onClickZoomIn($event)"
     >
-      확대
+      <i class="mid mdi-plus-box-outline"></i>확대
     </button>
-  </div> -->
+  </div>-->
     <div class="setting">
       <button mat-menu-item (click)="onClickNotice()">
         {{ 'notice.label' | translate }}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
index 531d101c..5af24713 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
@@ -218,38 +218,30 @@
 
 @include weblink(#2d3a4a);
 
-::ng-deep .myset {
+.myset {
   .mat-menu-content {
     .setting {
       display: flex;
       flex-flow: row;
       align-items: center;
       height: 48px;
-      .zoom {
-        height: 16px;
-        background-repeat: no-repeat;
-        height: 48px;
-        &.plus-square {
-          margin-left: 10px;
-          padding-left: 26px;
-          background-position: left 50%;
-          line-height: normal;
-          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
-        }
-        &.minus-square {
-          margin-right: 10px;
-          padding-right: 26px;
-          background-position: right 50%;
-          line-height: normal;
-          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
-        }
-        &:hover {
-          background-repeat: no-repeat;
-        }
-      }
-      .set-size {
-        margin: 0 10px;
-      }
+    }
+    .set-size {
+      margin: 0 10px;
+    }
+  }
+}
+
+.zoom {
+  display: flex;
+  flex-flow: row;
+  height: 16px;
+  align-items: center;
+  background-repeat: no-repeat;
+  height: 48px;
+  button {
+    &:hover {
+      background-repeat: no-repeat;
     }
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
index 7bec2a75..cf429d2d 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
@@ -55,19 +55,7 @@
   }
 }
 
-/*::ng-deep .mat-drawer-inner-container {
-  overflow: unset !important;
-}
-
-::ng-deep .mat-tab-labels {
-  display: flex;
-  width: 100%;
-  //border-bottom: 2px solid #dddddd;
-  flex: 1 1 auto;
-  justify-content: space-around;
-}*/
-
-::ng-deep .left-drawer-toggle {
+.left-drawer-toggle {
   position: absolute;
   top: calc(50% - 30px);
   left: -4px;
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
index c6e3ffd7..cb8401ae 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -300,6 +300,20 @@ $daesang-grey: (
     background-color: mat-color($accent, 300);
   }
 
+  .ps__rail-y {
+    & > .ps__thumb-y {
+      margin-right: -2px;
+    }
+  }
+
+  .cdk-virtual-scroll-orientation-vertical {
+    .cdk-virtual-scroll-content-wrapper {
+      width: 100%;
+      height: 100%;
+      contain: none;
+    }
+  }
+
   .global-menu {
     .mat-tab-label[aria-selected='true'] {
       .mat-tab-label-content {
@@ -356,6 +370,31 @@ $daesang-grey: (
     color: #ffffff;
   }
 
+  //탭개수에 의한 width 정의
+  .mat-tab-group {
+    &.tab_num2 {
+      .mat-tab-label {
+        width: 50%;
+        min-width: 50%;
+      }
+    }
+    &.tab_num3 {
+      .mat-tab-label {
+        width: 33%;
+        min-width: 33%;
+      }
+    }
+  }
+
+  //쪽지 라디오 버튼 정렬
+  .message-box {
+    .mat-radio-label {
+      .mat-radio-label-content {
+        padding-left: 4px;
+      }
+    }
+  }
+
   mat-tab-group[vertical] {
     display: flex;
     flex-direction: row;
@@ -408,12 +447,28 @@ $daesang-grey: (
     }
   }
 
+  //대화 말풍선 global 적용
   .message-row {
     .message-main {
       .bubble {
         background-color: mat-color($accent, 100);
         border: 1px solid mat-color($accent, 200);
         overflow: hidden;
+        .bubble-main {
+          word-wrap: break-word;
+          white-space: pre-wrap;
+          word-break: break-word;
+          a {
+            color: #0367a6;
+            text-decoration: underline;
+          }
+        }
+        .btn-box {
+          min-width: 300px;
+          @media screen and (max-width: #{$tablet-s-width}) {
+            min-width: 250px;
+          }
+        }
       }
     }
     &.me {
@@ -428,13 +483,7 @@ $daesang-grey: (
       }
     }
   }
-  /*.대화방 검색창 bg
-  chat-search-frame {
-    .chat-search {
-      //background-color: mat-color($accent, 600, 0.7);
-      background-color: mat-color($accent, 800, 0.8);
-    }
-  }*/
+
   .translationForm {
     background-color: mat-color($accent, 200, 0.4);
   }
@@ -471,4 +520,25 @@ $daesang-grey: (
       background-color: mat-color($accent, B100);
     }
   }
+
+  .rightDrawer-item {
+    .footer-fix {
+      .mat-paginator-container {
+        display: flex;
+        flex-flow: column;
+      }
+    }
+    @media screen and (max-width: #{$tablet-s-width}) {
+      .footer-fix {
+        height: 100px;
+        .mat-paginator-container {
+          height: 40px;
+          min-height: 40px;
+          .mat-paginator-page-size {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss
index 3f96dab9..43f48ea0 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss
@@ -165,22 +165,3 @@ $tablet-s-width: 768px;
     }
   }
 }
-
-//대화창 공통
-::ng-deep .bubble {
-  .bubble-main {
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    word-break: break-word;
-    a {
-      color: #0367a6;
-      text-decoration: underline;
-    }
-  }
-  .btn-box {
-    min-width: 300px;
-    @media screen and (max-width: #{$tablet-s-width}) {
-      min-width: 250px;
-    }
-  }
-}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss
index f176eaec..92a656fc 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss
@@ -67,10 +67,6 @@
   }
 }
 
-::ng-deep .message-row.me > .event-info {
-  border-radius: 0 0 0 6px;
-}
-
 .feather-calendar {
   stroke: #ffffff;
 }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.scss
index b28fc02d..63726c2e 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.scss
@@ -96,10 +96,6 @@
   }
 }
 
-::ng-deep .message-row.me > .event-info {
-  border-radius: 0 0 0 6px;
-}
-
 .feather-calendar {
   stroke: #ffffff;
 }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss
index 5852ae26..c9c15ee7 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss
@@ -50,14 +50,14 @@ $search-item-color: #444444;
     min-width: 30px;
     padding: 0 10px;
     align-self: center;
-    font-size: 0.9em;
+    font-size: 0.7em;
     font-weight: normal;
     justify-content: center;
     margin-left: auto;
   }
 }
 
-::ng-deep .chat-search {
+.chat-search {
   margin: 0 4px 4px;
   padding: 6px;
   font-size: 14px;
@@ -67,7 +67,7 @@ $search-item-color: #444444;
     .search-form {
       form {
         display: flex;
-        icon-img {
+        .icon-img {
           display: none;
         }
       }
@@ -75,7 +75,7 @@ $search-item-color: #444444;
   }
 }
 
-::ng-deep .chatroom-search {
+.chatroom-search {
   position: relative;
   .btns {
     display: flex;
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html
index 505de121..aad28e91 100644
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html
@@ -79,69 +79,36 @@
           <mat-list>
             <mat-list-item
               *ngFor="let oldAttachment of oldAttachmentList"
-              class="attach-file"
+              class="attach-file-list"
             >
-              <div class="file-name">
+              <div class="attach-file">
                 <span class="mdi mdi-attachment mdi-18px"> </span
-                >{{ oldAttachment.resContent }}
+                >
+                <span class="file-name">{{ oldAttachment.resContent }}</span>
                 <button
                   mat-button
+                  class="icon-button"
                   aria-label="기존파일삭제"
                   (click)="onClickDeleteOldAttachment(oldAttachment)"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    class="feather feather-trash-2"
-                  >
-                    <polyline points="3 6 5 6 21 6"></polyline>
-                    <path
-                      d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-                    ></path>
-                    <line x1="10" y1="11" x2="10" y2="17"></line>
-                    <line x1="14" y1="11" x2="14" y2="17"></line>
-                  </svg>
+                  <i class="mid mdi-18px mdi-delete-outline"></i>
                 </button>
               </div>
             </mat-list-item>
             <mat-list-item
               *ngFor="let attachment of attachmentList"
-              class="attach-file"
+              class="attach-file-list"
             >
-              <div class="file-name">
+              <div class="attach-file">
                 <span class="mdi mdi-attachment mdi-18px"> </span
-                >{{ attachment.name }}
+                ><span class="file-name">{{ attachment.name }}</span>
                 <button
                   mat-button
+                  class="icon-button"
                   aria-label="파일삭제"
                   (click)="onClickDelelteAttachment(attachment)"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    class="feather feather-trash-2"
-                  >
-                    <polyline points="3 6 5 6 21 6"></polyline>
-                    <path
-                      d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-                    ></path>
-                    <line x1="10" y1="11" x2="10" y2="17"></line>
-                    <line x1="14" y1="11" x2="14" y2="17"></line>
-                  </svg>
+                  <i class="mid mdi-18px mdi-delete-outline"></i>
                 </button>
               </div>
             </mat-list-item>
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss
index b23f81b3..cf69c853 100644
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss
@@ -128,25 +128,30 @@
     margin-top: 10px;
   }
 }
-.attach-file {
-  display: flex;
-  flex-flow: row;
-  flex: 1 1 auto;
-  .mat-list-item-content {
-    padding: 0 !important;
+
+.attach-file-list {
+  width: 100%;
+  .attach-file {
+    display: flex;
+    flex-flow: row;
+    flex: 1 1 auto;
+    width: 100%;
+    margin: 0 -16px;
+    align-items: center;
+    font-size: 0.9em;
+    border-bottom: 1px dotted #dddddd;
+    span {
+      margin-right: 6px;
+      flex: 0 0 auto;
+    }
     .file-name {
       display: flex;
-      width: 100%;
-      align-items: center;
-      font-size: 0.9em;
-      border-bottom: 1px dotted #dddddd;
-      span {
-        margin-right: 6px;
-      }
-      button {
-        width: 24px;
-        margin-left: auto;
-      }
+      flex: 1 1 auto;
+    }
+    button {
+      flex: 0 0 auto;
+      width: 24px;
+      margin-left: auto;
     }
   }
 }
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
index 3f2d8d03..7517f517 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
@@ -12,7 +12,7 @@
 
       <button
         mat-mini-fab
-        class="mat-elevation-z6 btn-upload-profile-image"
+        class="mat-elevation-z6 icon-button btn-upload-profile-image"
         *ngIf="isMe && editableProfileImage"
         matTooltip="{{ 'profile.changeProfileImage' | translate }}"
         matTooltipPosition="above"
@@ -22,7 +22,7 @@
         "
         (click)="profileImageFileInput.click()"
       >
-        <span class="mdi mdi-upload mdi-18px"></span>
+        <i class="mid mdi-camera"></i>
       </button>
 
       <span
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss
index 69d963c2..9c0217d6 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss
@@ -206,22 +206,19 @@ $login-max-height: 800px;
   }
 }
 
-::ng-deep .btn-upload-profile-image {
+.btn-upload-profile-image {
   display: flex;
   margin-left: -26px;
   margin-right: 10px;
   width: 36px;
   height: 36px;
   line-height: 36px;
+  font-size: 20px;
   justify-content: center;
   justify-content: center;
-  &.mat-mini-fab {
-    .mat-button-wrapper {
-      display: flex;
-      justify-content: center;
-      justify-items: center;
-      padding: 0;
-    }
+  i {
+    display: inline-block;
+    margin-top: -8px;
   }
 }