개인설정 - 폰트설정 축소확대, 프로필 휴가자 정보 색상 적용

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

@@ -322,22 +322,44 @@
 </mat-toolbar>
 
 <mat-menu #profileMenu="matMenu" class="myset">
-  <div class="setting"><button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button></div>
+  <div class="setting">
+    <button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button>
+  </div>
   <div class="setting"><button mat-menu-item>상태 메시지 설정</button></div>
-  <div class="setting"><button mat-menu-item>축소</button><span>100%</span><button mat-menu-item>확대</button></div>
+  <div class="setting">
-  <div class="setting"><button mat-menu-item (click)="onClickSettings()">설정</button></div>
+    <button mat-menu-item class="zoom minus-square">축소</button
+    ><span class="set-size">100%</span
+    ><button mat-menu-item class="zoom plus-square">확대</button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item (click)="onClickSettings()">설정</button>
+  </div>
   <mat-divider></mat-divider>
-  <div class="setting"><button mat-menu-item (click)="onClickLogout()">로그아웃</button></div>
+  <div class="setting">
+    <button mat-menu-item (click)="onClickLogout()">로그아웃</button>
+  </div>
 </mat-menu>
 
 <mat-menu #presenseMenu="matMenu" class="status-pc-set">
-  <div class="setting"><button mat-menu-item><span class="presence pcOn"> </span>온라인</button></div>
+  <div class="setting">
-  <div class="setting"><button mat-menu-item><span class="presence pcOut"> </span>부재중</button><button mat-menu-item
+    <button mat-menu-item><span class="presence pcOn"> </span>온라인</button>
-      class="clock"></button></div>
+  </div>
-  <div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>다른용무중</button><button mat-menu-item
+  <div class="setting">
-      class="edit"></button></div>
+    <button mat-menu-item><span class="presence pcOut"> </span>부재중</button
-  <div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>회의중</button><button mat-menu-item
+    ><button mat-menu-item class="clock"></button>
-      class="edit"></button></div>
+  </div>
-  <div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>집중근무중</button><button mat-menu-item
+  <div class="setting">
-      class="edit"></button></div>
+    <button mat-menu-item>
+      <span class="presence pcOther"> </span>다른용무중</button
+    ><button mat-menu-item class="edit"></button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item><span class="presence pcOther"> </span>회의중</button
+    ><button mat-menu-item class="edit"></button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item>
+      <span class="presence pcOther"> </span>집중근무중</button
+    ><button mat-menu-item class="edit"></button>
+  </div>
 </mat-menu>

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

@@ -218,6 +218,31 @@
       display: flex;
       flex-flow: row;
       align-items: center;
+      height: 48px;
+      .zoom {
+        height: 16px;
+        background-repeat: no-repeat;
+        &.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;
+      }
     }
   }
 }

projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html

@@ -25,9 +25,10 @@
         <span class="mdi mdi-upload mdi-18px"></span>
       </button>
 
+      <!--morning-off:오전 afternoon-off:오후  day-off:휴가 long-time:장기  leave-of-absence:휴직-->
       <span
         *ngIf="getWorkstatus(userInfo).length > 0"
-        class="work-status text-accent-darkest"
+        class="work-status afternoon-off"
       >
         {{ getWorkstatus(userInfo) }}
       </span>

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

@@ -61,12 +61,28 @@
       .work-status {
         display: inline-flex;
         height: 24px;
-        background-color: #ffffff;
+        border: 1px solid #ffffff;
         padding: 4px 14px;
         border-radius: 100px;
         font-size: 13px;
         justify-content: center;
         align-items: center;
+        color: #ffffff;
+        &.morning-off {
+          background-color: #11845d;
+        }
+        &.afternoon-off {
+          background-color: #875acb;
+        }
+        &.day-off {
+          background-color: #2b98eb;
+        }
+        &.long-time {
+          background-color: #c72f20;
+        }
+        &.leave-of-absence {
+          background-color: #e7853e;
+        }
       }
     }
 
@@ -218,7 +234,7 @@
       display: flex;
       width: 40px;
       height: 40px;
-      line-height: 40px;
+      //line-height: 40px;
       .mat-button-wrapper {
         padding: 0;
         fill: #ffffff;