이용시 주의 사항 변경

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.html

@@ -1,18 +1,21 @@
-<mat-card class="confirm-card mat-elevation-z">
+<mat-card class="confirm-card mat-elevation-z use-caution bg-warn-color">
   <!-- 이용시 주의사항 항목 -->
-  <mat-card-header>
-    <mat-card-title>{{ data.title }}</mat-card-title>
   <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
     <i class="mdi mdi-window-close"></i>
   </button>
+  <mat-card-header>
+    <mat-card-title
+      ><span class="icon-img"><i class="mid mdi-alarm-light"></i></span
+      >{{ data.title }}</mat-card-title
+    >
   </mat-card-header>
   <mat-card-content>
     <div #messageContainer class="notice">
       {{ data.message }}
     </div>
   </mat-card-content>
-  <mat-card-actions class="button-farm flex-row">
-    <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
+  <mat-card-actions class="button-form flex-row">
+    <button mat-flat-button (click)="onClickConfirm()" class="mat-primary">
       {{ 'common.messages.confirm' | translate }}
     </button>
   </mat-card-actions>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.scss

@@ -1,3 +1,34 @@
+::ng-deep .use-caution {
+  .btn-dialog-close {
+    margin-left: auto;
+  }
+  .mat-card-header-text {
+    width: 100%;
+    .mat-card-title {
+      justify-content: center;
+      color: #ffffff;
+      .icon-img {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+      }
+    }
+  }
+  .mat-card-content {
+    padding: 16px;
+    margin: 0 -16px;
+    background-color: #ffffff;
+  }
+  .button-form {
+    margin: 0 -16px -16px !important;
+    background-color: #ffffff;
+    button {
+      width: 100%;
+      height: 40px;
+    }
+  }
+}
+
 form {
   .mat-form-field {
     width: 100%;

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.ts

@@ -303,11 +303,11 @@ export class LoginPageComponent implements OnInit, OnDestroy {
         <ol>
           <li>메신저 계정/비밀번호를 타인에게 공유하지 않아야 합니다.</li>
           <li>회사 중요정보(고객정보 포함)를 업무상 필요한 인원에게 필요한 만큼만 공유해야 합니다.</li>
-          <li>퇴근, 회의 등 자리를 비우는 경우 <span>중요자료가 방치되지 않도록 주의</span>하고, Clean Desk를 실천해야 합니다.</li>
+          <li>퇴근, 회의 등 자리를 비우는 경우 중요자료가 방치되지 않도록 주의하고, Clean Desk를 실천해야 합니다.</li>
           <li>메신저를 누군가 허락 없이 함부로 열람하고 그 내부 내용을 타인과 공유하지 않아야 합니다.</li>
-          <li>공용PC에 메신저 <span>사용 후 반드시 로그아웃</span> 하시기 바랍니다.</li>
+          <li>공용PC에 메신저 사용 후 반드시 로그아웃하시기 바랍니다.</li>
           <li>사내메신저는 업무용 협업도구입니다. 비업무용 소통을 자제하시기 바랍니다.</li>
-          <li>업무상 인지한 정보(개인의 프라이버시 포함)나 일반인에게 공개되지 않은 회사기록을 통해 얻은 정보는 오직 회사의 이익을 위해서 활용하여야 하며 <span>사외에 유출하거나 타인에게 알려주거나 업무 이외의 목적에 사용하여서는 아니 됩니다.</span></li>
+          <li>업무상 인지한 정보(개인의 프라이버시 포함)나 일반인에게 공개되지 않은 회사기록을 통해 얻은 정보는 오직 회사의 이익을 위해서 활용하여야 하며 사외에 유출하거나 타인에게 알려주거나 업무 이외의 목적에 사용하여서는 아니 됩니다.</li>
         </ol>`
       }
     });