로그아웃, 환경설정 버튼 추가

projects/ucap-webmessenger-app/src/app/app.theme.scss

@@ -109,8 +109,7 @@ $pink-light-theme-warn-palette: mat-palette($mat-red);*/
 
 $pink-light-theme-primary-palette: mat-palette($daesang-grey, 900);
 $pink-light-theme-accent-palette: mat-palette($daesang);
-$pink-light-theme-warn-palette: mat-palette($mat-deep-orange);
+$pink-light-theme-warn-palette: mat-palette($mat-orange);
-
 
 // Create the Material theme object
 $pink-light-theme: mat-light-theme(
@@ -121,7 +120,7 @@ $pink-light-theme: mat-light-theme(
 
 // Add ".theme-pink-dark" class to the body to activate this theme.
 // Class name must start with "theme-" !!!
-body.theme-default  {
+body.theme-default {
   // Generate the Angular Material theme
   @include angular-material-theme($pink-light-theme);
 

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -4,7 +4,29 @@
   </div>
   <div class="app-layout-native-title-bar-title">UCAP M Messenger</div>
   <div class="app-layout-native-title-bar-spacer"></div>
+  <div class="app-layout-native-title-bar-link">
+
+    <button mat-icon-button class="button app-layout-native-title-bar-setting">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" alt="환경설정">
+        <circle cx="12" cy="12" r="3"></circle>
+        <path
+          d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
+        </path>
+      </svg>
+    </button>
+
+    <button mat-icon-button class="button app-layout-native-title-bar-logout">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" alt="로그아웃" class="stroke-warn-color" >
+        <path d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9" /></svg>
+    </button>
+
+    <span class="stroke-bar"></span>
+
+  </div>
   <div class="app-layout-native-title-bar-actions">
+
     <button
       mat-icon-button
       class="button app-layout-native-title-bar-minimize"
@@ -12,7 +34,7 @@
     >
       <!--<mat-icon>minimize</mat-icon>-->
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" alt="창 최소화">
         <line x1="5" y1="18" x2="19" y2="18"></line>
       </svg>
     </button>
@@ -24,7 +46,7 @@
       <ng-container [ngSwitch]="windowStateChanged$ | async">
         <!--<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>-->
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchCase="WindowState.Maximized">
+          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchCase="WindowState.Maximized" alt="창 이전크기">
           <path class="st0"
             d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z" />
           <path class="st0" d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8" />
@@ -32,7 +54,7 @@
 
         <!--<mat-icon *ngSwitchDefault>crop_din</mat-icon>-->
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchDefault>
+          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchDefault alt="창크기 최대">
           <rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
         </svg>
 
@@ -45,7 +67,7 @@
     >
       <!--<mat-icon>close</mat-icon>-->
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" alt="창닫기">
         <line x1="18" y1="6" x2="6" y2="18"></line>
         <line x1="6" y1="6" x2="18" y2="18"></line>
       </svg>

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -9,8 +9,8 @@
     display: flex;
     padding: 0 10px;
     cursor: pointer;
-    height: 30px;
+    height: 50px;
-    color:#ffffff;
+    color: #ffffff;
     //background: rgba(37, 27, 30, 0.9);
     //border-bottom: 1px solid #d5dadb;
 
@@ -28,7 +28,49 @@
       flex: 1 1 auto;
     }
 
+    .app-layout-native-title-bar-link {
+      align-items: center;
+      position: relative;
+
+      .stroke-bar {
+        width: 1px;
+        height: 20px;
+        background-color: rgba(256, 256, 256, 0.3);
+        margin: 0 10px 0 20px;
+        display: inline-flex;
+      }
+      .button {
+        -webkit-app-region: no-drag;
+        outline: 0;
+        cursor: pointer;
+        border: none;
+        height: 28px;
+        min-width: 28px;
+        max-width: 28px;
+        padding: 5px;
+        line-height: 10px;
+        border-radius: 0;
+        background: transparent;
+        transition: background 0.2s linear, color 0.2s linear;
+        text-align: center;
+        font-size: 10px;
+        vertical-align: middle;
+        margin-left: 10px;
+        transform: translateY(-2px);
+
+        &.app-layout-native-title-bar-logout,
+        &.app-layout-native-title-bar-setting {
+          background-color: #efefef;
+          border-radius: 50%;
+        }
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+
     .app-layout-native-title-bar-actions {
+      align-items: center;
       position: relative;
 
       .button {
@@ -47,14 +89,14 @@
         text-align: center;
         font-size: 10px;
         vertical-align: middle;
-        margin-left:6px;
+        margin-left: 6px;
         transform: translateY(-2px);
         .mat-icon {
           //transform: translateY(-2px);
           width: 16px;
           height: 16px;
-          min-height:16px;
+          min-height: 16px;
-          min-width:16px;
+          min-width: 16px;
           font-size: 16px;
         }
 
@@ -70,6 +112,7 @@
         // }
 
         &:hover {
+          border-radius: 4px;
           &.app-layout-native-title-bar-close {
             background: darken(#000000, 10%);
             color: darken(white, 0);
@@ -77,7 +120,7 @@
 
           &.app-layout-native-title-bar-minimize {
             background: darken(#000000, 10%);
-            color: darken(white,0);
+            color: darken(white, 0);
           }
 
           &.app-layout-native-title-bar-maximize {

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -1,16 +1,16 @@
 .main-container {
-  height:100%;
+  height: 100%;
   display: flex;
   flex-flow: row;
-  padding-top: 27px;
+  padding-top: 47px;
   border-top: none;
-  .split-area{
+  .split-area {
     overflow: hidden;
     .left-side {
-    width: 100%;
+      width: 100%;
-    height: 100%;
+      height: 100%;
-    flex: 0 0 auto;
+      flex: 0 0 auto;
-    position: relative;
+      position: relative;
     }
   }
 
@@ -22,14 +22,14 @@
       width: 100%;
       height: 100%;
     }
-    .rightDrawer{
+    .rightDrawer {
-      width:400px;
+      width: 400px;
       height: 100%;
       flex: 0 0 auto;
       overflow: hidden;
-      -webkit-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
+      -webkit-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3);
-      -moz-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
+      -moz-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3);
-      box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
+      box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3);
     }
   }
   .right-side {
@@ -38,6 +38,6 @@
   }
 }
 
-::ng-deep .mat-drawer-inner-container{
+::ng-deep .mat-drawer-inner-container {
   overflow: unset !important;
 }

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -223,7 +223,12 @@ $daesang-grey: (
   .border-accent-color {
     border: 1px solid mat-color($accent);
   }
-
+  .border-warn-color {
+    border: mat-color($warn);
+  }
+  .stroke-warn-color {
+    stroke: mat-color($warn, 900);
+  }
   // sass 정의
   .mat-toolbar {
     background-color: mat-color($accent, B100);
@@ -239,7 +244,7 @@ $daesang-grey: (
     cursor: pointer;
   }
 
-  .policy{
+  .policy {
     background-color: mat-color($accent, B100);
   }
   .mat-badge-accent .mat-badge-content {