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

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(

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,7 +9,7 @@
     display: flex;
     padding: 0 10px;
     cursor: pointer;
-    height: 30px;
+    height: 50px;
     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 {
@@ -70,6 +112,7 @@
         // }
 
         &:hover {
+          border-radius: 4px;
           &.app-layout-native-title-bar-close {
             background: darken(#000000, 10%);
             color: darken(white, 0);

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

@@ -2,7 +2,7 @@
   height: 100%;
   display: flex;
   flex-flow: row;
-  padding-top: 27px;
+  padding-top: 47px;
   border-top: none;
   .split-area {
     overflow: hidden;

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);