Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

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

@@ -216,13 +216,15 @@
         </svg>
       </button>
       E[삭제예정] 마이프로필 설정을 이동-->
-      <ucap-profile-my-profile-widget
-        [profileImageRoot]="sessionVerinfo.profileRoot"
-        [profileImageFile]="getMyProfileImageWidget()"
-        (click)="onClickOpenProfile($event)"
-        class="myprofile button"
-      ></ucap-profile-my-profile-widget>
     </div>
+    <ucap-profile-my-profile-widget
+      [profileImageRoot]="sessionVerinfo.profileRoot"
+      [profileImageFile]="getMyProfileImageWidget()"
+      (openProfile)="onClickOpenProfile()"
+      *ngIf="!!loginRes"
+      class="myprofile-item"
+    ></ucap-profile-my-profile-widget>
+
     <div class="app-layout-native-title-bar-actions">
       <button
         mat-icon-button

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

@@ -32,10 +32,23 @@
       margin-left: auto;
       flex-flow: row;
       justify-items: center;
+      width: calc(100% - 300px);
+      overflow: hidden;
+      white-space: nowrap;
+      position: relative;
+      margin-left: auto;
+      justify-content: flex-end;
+      height: 100%;
+
       .app-layout-native-title-bar-link {
         align-items: center;
         position: relative;
         display: flex;
+        justify-content: flex-end;
+        width: calc(100% - 300px);
+        overflow: hidden;
+        white-space: nowrap;
+        transform: translateY(2px);
         .stroke-bar {
           width: 1px;
           height: 20px;
@@ -59,7 +72,7 @@
           text-align: center;
           font-size: 10px;
           vertical-align: middle;
-          margin-left: 14px;
+          margin-left: 16px;
           .weblink {
             display: inline-flex;
             line-height: 24px;
@@ -100,10 +113,20 @@
           &:hover {
             opacity: 0.7;
           }
+          .mat-badge-content {
+            transform: translateY(4px);
+          }
         }
       }
 
+      .myprofile-item {
+        align-items: center;
+        display: flex;
+        transform: translateY(2px);
+      }
+
       .app-layout-native-title-bar-actions {
+        display: flex;
         align-items: center;
         position: relative;
         .button {