웹링크 화면 구성.

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

@@ -5,6 +5,33 @@
   <div class="app-layout-native-title-bar-title">UCAP M Messenger</div>
   <div class="app-layout-native-title-bar-spacer"></div>
   <div *ngIf="!!loginRes" class="app-layout-native-title-bar-link">
+    <button
+      mat-icon-button
+      class="button app-layout-native-title-bar-logout"
+      matTooltip="웹링크"
+      (click)="onToggleWebLinkSelector()"
+    >
+      <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>
+
     <button
       mat-icon-button
       class="button app-layout-native-title-bar-setting"
@@ -176,3 +203,18 @@
     </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">
+          <div class="icon">
+            <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,3 +132,58 @@
     }
   }
 }
+
+.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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import { Component, OnInit, Inject, OnDestroy, ViewChild } from '@angular/core';
 import {
   UCAP_NATIVE_SERVICE,
   NativeService,
@@ -28,6 +28,121 @@ export class TopBarComponent implements OnInit, OnDestroy {
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
 
+  showWeblink = false;
+  weblink: {
+    title: string;
+    url: string;
+    order: number;
+    activeYn: boolean;
+  }[] = [
+    {
+      order: 0,
+      title: '웹하드',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=WHD_78&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'DSP',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=GWS_01&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'SMS',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=SMS_21&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: '화상회의',
+      activeYn: true,
+      url:
+        'http://dsview.daesang.com/plugin/sso_login.asp?userid=(%USER_FIELD4%)'
+    },
+    {
+      order: 0,
+      title: 'EP',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=EPS_07&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'S & OP회의',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=SOP_05&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: 'S & OM회의',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=SOM_09&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: '코끼리',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=http%3A%2F%2Fdsp%2Edaesang%2Ecom%3A80%2FDS%5F10%2Femate%5Fapp%2Felephant%2Fmaster%2Ensf%2Fmain%2Ehtml%3Freadform%26kind%3D3'
+    },
+    {
+      order: 0,
+      title: 'IT서비스데스크',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=HPD_13&eMatePTK=(%USER_ID%)'
+    },
+    {
+      order: 0,
+      title: '개인속보',
+      activeYn: true,
+      url:
+        'http://sso.daesang.com/messenger.do?eMateApps=DSB_43&eMatePTK=(%USER_ID%)'
+    },
+
+    {
+      order: 0,
+      title: '메일 count url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=http://dsp.daesang.com/common/sysorg.nsf/unreadmailcount2?openagent%26empno=(%USER_FIELD4%)'
+    },
+    {
+      order: 0,
+      title: '메일 link url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=%2Fportal%2Ensf%2Fmailredirect%3Fopenpage%26mode%3Dm'
+    },
+    {
+      order: 0,
+      title: '결제 count url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=http://dsp.daesang.com/common/sysorg.nsf/unreadmailcount2?openagent%26empno=(%USER_FIELD4%)'
+    },
+    {
+      order: 0,
+      title: '결제 link url',
+      activeYn: true,
+      url:
+        'http://dsp.daesang.com/names.nsf?login&username=(%USER_ID%)&password=(%USER_PASS%)&RedirectTo=%2Fportal%2Ensf%2Fmailredirect%3Fopenpage%26mode%3Dm'
+    },
+
+    {
+      order: 0,
+      title: '3개월 비밀번호 변경창 url',
+      activeYn: true,
+      url: 'sso.daesang.com / modify.do'
+    }
+  ];
+
   constructor(
     private store: Store<any>,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
@@ -75,4 +190,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
       })
     );
   }
+
+  onToggleWebLinkSelector(): void {
+    this.showWeblink = !this.showWeblink;
+  }
 }