웹링크 표현방식 변경. 팝업 > 나열식

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts

@@ -232,7 +232,6 @@ export class GroupComponent implements OnInit, OnDestroy {
   }
 
   onSelectBuddy(buddy: UserInfo) {
-    this.logger.debug('onSelectBuddy', buddy);
     if (buddy.seq === this.loginRes.userSeq) {
       this.store.dispatch(
         ChatStore.openRoom({ userSeqList: [this.loginRes.talkWithMeBotSeq] })

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

@@ -7,10 +7,35 @@
   <div *ngIf="!!loginRes" class="app-layout-native-title-bar-link">
     <button
       mat-icon-button
-      *ngIf="weblink.length > 0"
+      *ngFor="let link of weblink"
       class="button app-layout-native-title-bar-logout"
-      matTooltip="웹링크"
+      [matTooltip]="link.title"
-      (click)="onToggleWebLinkSelector()"
+      (click)="onClickWebLink(link)"
+    >
+      <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
+        <path
+          d="M13.29 9.29l-4 4a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4-4a1 1 0 0 0-1.42-1.42z"
+        />
+        <path
+          d="M12.28 17.4L11 18.67a4.2 4.2 0 0 1-5.58.4 4 4 0 0 1-.27-5.93l1.42-1.43a1 1 0 0 0 0-1.42 1 1 0 0 0-1.42 0l-1.27 1.28a6.15 6.15 0 0 0-.67 8.07 6.06 6.06 0 0 0 9.07.6l1.42-1.42a1 1 0 0 0-1.42-1.42z"
+        />
+        <path
+          d="M19.66 3.22a6.18 6.18 0 0 0-8.13.68L10.45 5a1.09 1.09 0 0 0-.17 1.61 1 1 0 0 0 1.42 0L13 5.3a4.17 4.17 0 0 1 5.57-.4 4 4 0 0 1 .27 5.95l-1.42 1.43a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l1.42-1.42a6.06 6.06 0 0 0-.6-9.06z"
+        />
+      </svg>
+    </button>
+    <span class="stroke-bar"></span>
+    <button
+      mat-icon-button
+      *ngFor="let link of weblinkBadgeTypes"
+      class="button app-layout-native-title-bar-logout"
+      [matBadgeHidden]="getHideWebLinkbadge(link)"
+      [matBadge]="getWebLinkBadgeCount(link)"
+      matBadgeDescription="확인하지 않은 메시지가 있습니다."
+      matBadgeColor="accent"
+      matBadgePosition="above after"
+      [matTooltip]="link.title"
+      (click)="onClickWebLink(link)"
     >
       <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
         <path
@@ -218,26 +243,3 @@
     </button>
   </div>
 </mat-toolbar>
-
-<div [style.display]="showWeblink ? 'inherit' : 'none'" class="weblink">
-  <div class="container">
-    <div class="img-item">
-      <ul>
-        <li *ngFor="let link of weblink" (click)="onClickWebLink(link)">
-          <div
-            class="icon"
-            [matBadgeHidden]="getHideWebLinkbadge(link)"
-            [matBadge]="getWebLinkBadgeCount(link)"
-            matBadgeDescription="확인하지 않은 메시지가 있습니다."
-            matBadgeColor="accent"
-            matBadgePosition="above after"
-            [matTooltip]="link.title"
-          >
-            <span class="mdi mdi-star-circle-outline mdi-48px"></span>
-          </div>
-          <div class="description ellipsis">{{ link.title }}</div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>

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

@@ -132,58 +132,3 @@
     }
   }
 }
-
-.weblink {
-  position: absolute;
-  width: 350px;
-  height: 40%;
-  top: 60px;
-  right: 15px;
-  background: #fff;
-  border-radius: 5px;
-  border: 1px solid #666;
-  z-index: 2;
-  padding: 10px;
-  display: none;
-
-  .container {
-    display: flex;
-    padding: 0 10px;
-    height: 100%;
-    overflow-y: auto;
-    flex-wrap: wrap;
-
-    .img-item {
-      cursor: pointer;
-      margin-bottom: 10px;
-      margin-right: 9px;
-      position: relative;
-      height: 150px;
-
-      ul {
-        li {
-          list-style: none;
-          float: left;
-          margin: 0 10px 20px 10px;
-
-          .icon {
-            height: 50px;
-            width: 50px;
-            line-height: 50px;
-          }
-          .description {
-            width: 50px;
-            text-align: center;
-          }
-          .ellipsis {
-            display: block;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            word-wrap: normal;
-            overflow: hidden;
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -50,9 +50,9 @@ export class TopBarComponent implements OnInit, OnDestroy {
 
   updateInfo$: Observable<UpdateInfo>;
 
-  showWeblink = false;
   loginInfo: LoginInfo;
   weblink: WebLink[] = [];
+  weblinkBadgeTypes: WebLink[] = [];
   webLinkBadgeMail = 0;
   webLinkBadgePayment = 0;
 
@@ -78,8 +78,6 @@ export class TopBarComponent implements OnInit, OnDestroy {
             KEY_LOGIN_INFO
           );
 
-          this.showWeblink = false;
-
           // WebLink init..
           this.initWebLink();
         })
@@ -114,10 +112,20 @@ export class TopBarComponent implements OnInit, OnDestroy {
         weblink =>
           urlInfo.webLinkAllowedList
             .filter(
-              type => type !== 'WebLinkMailCnt' && type !== 'WebLinkPaymentCnt'
+              type =>
+                type !== 'WebLinkMailCnt' &&
+                type !== 'WebLinkPaymentCnt' &&
+                type !== 'WebLinkMail' &&
+                type !== 'WebLinkPayment'
             )
             .filter(type => type === weblink.key).length > 0
       );
+      this.weblinkBadgeTypes = urlInfo.webLink.filter(
+        weblink =>
+          urlInfo.webLinkAllowedList
+            .filter(type => type === 'WebLinkMail' || type === 'WebLinkPayment')
+            .filter(type => type === weblink.key).length > 0
+      );
 
       if (urlInfo.webLinkAllowedList.indexOf('WebLinkMail') > -1) {
         // 메일 카운트 체크.
@@ -223,9 +231,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
     );
   }
 
-  onToggleWebLinkSelector(): void {
+  /** About WebLink */
-    this.showWeblink = !this.showWeblink;
-  }
   onClickWebLink(link: WebLink): void {
     const appUserInfo = this.localStorageService.encGet<AppUserInfo>(
       KEY_APP_USER_INFO,