# 이슈처리 271

linky 링크시 style 적용.

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html

@@ -14,7 +14,7 @@
     <perfect-scrollbar>
       <p
         [innerHTML]="data.contents | linefeedtohtml | linky"
-        class="contnets"
+        class="contents"
       ></p>
     </perfect-scrollbar>
   </mat-card-content>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss

@@ -11,7 +11,12 @@
   }
 }
 
-.contnets {
+.contents {
   max-height: 500px;
   word-break: break-word;
+
+  ::ng-deep a {
+    color: #0367a6 !important;
+    text-decoration: underline !important;
+  }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.ts

@@ -1,6 +1,14 @@
-import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Inject,
+  OnDestroy,
+  AfterViewInit,
+  ElementRef
+} from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { NoticeList } from '@ucap-webmessenger/api-message';
+import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 
 export interface NoticeDetailDialogData {
   notice: NoticeList;
@@ -13,17 +21,38 @@ export interface NoticeDetailDialogResult {}
   templateUrl: './notice-detail.dialog.component.html',
   styleUrls: ['./notice-detail.dialog.component.scss']
 })
-export class NoticeDetailDialogComponent implements OnInit, OnDestroy {
+export class NoticeDetailDialogComponent
+  implements OnInit, OnDestroy, AfterViewInit {
   constructor(
     public dialogRef: MatDialogRef<
       NoticeDetailDialogData,
       NoticeDetailDialogResult
     >,
-    @Inject(MAT_DIALOG_DATA) public data: NoticeDetailDialogData
+    @Inject(MAT_DIALOG_DATA) public data: NoticeDetailDialogData,
+    private elementRef: ElementRef,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
   ) {}
 
   ngOnInit() {}
 
+  ngAfterViewInit(): void {
+    if (
+      !!this.elementRef.nativeElement &&
+      !!this.elementRef.nativeElement.querySelector('a')
+    ) {
+      const elements = this.elementRef.nativeElement.querySelectorAll('a');
+      elements.forEach(element => {
+        element.addEventListener('click', this.onClickEvent.bind(this));
+      });
+    }
+  }
+
+  onClickEvent(event: MouseEvent) {
+    this.nativeService.openDefaultBrowser(
+      (event.target as HTMLAnchorElement).text
+    );
+  }
+
   ngOnDestroy(): void {}
 
   onClickConfirm(): void {

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.html

@@ -1,4 +1,4 @@
-<div class="translation-main">
+<div class="bubble-main translation-main">
   <div
     *ngIf="!translationSimpleview || (!!translationSimpleview && !!isMe)"
     class="original"

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.ts

@@ -1,16 +1,26 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+  ElementRef,
+  Inject
+} from '@angular/core';
 import {
   TranslationEventJson,
   Info,
   MassTranslationEventJson
 } from '@ucap-webmessenger/protocol-event';
+import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 
 @Component({
   selector: 'ucap-chat-message-box-mass-translation',
   templateUrl: './mass-translation.component.html',
   styleUrls: ['./mass-translation.component.scss']
 })
-export class MassTranslationComponent implements OnInit {
+export class MassTranslationComponent implements OnInit, AfterViewInit {
   @Input()
   message: Info<MassTranslationEventJson>;
 
@@ -32,10 +42,31 @@ export class MassTranslationComponent implements OnInit {
     type: string;
   }>();
 
-  constructor() {}
+  constructor(
+    private elementRef: ElementRef,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
+  ) {}
 
   ngOnInit() {}
 
+  ngAfterViewInit(): void {
+    if (
+      !!this.elementRef.nativeElement &&
+      !!this.elementRef.nativeElement.querySelector('a')
+    ) {
+      const elements = this.elementRef.nativeElement.querySelectorAll('a');
+      elements.forEach(element => {
+        element.addEventListener('click', this.onClickEvent.bind(this));
+      });
+    }
+  }
+
+  onClickEvent(event: MouseEvent) {
+    this.nativeService.openDefaultBrowser(
+      (event.target as HTMLAnchorElement).text
+    );
+  }
+
   onClickMassDetail(contentsType: string) {
     this.massTranslationDetail.emit({
       message: this.message,

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.ts

@@ -1,15 +1,25 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef,
+  AfterViewInit,
+  Inject
+} from '@angular/core';
 import { Info, MassTextEventJson } from '@ucap-webmessenger/protocol-event';
 import { NGXLogger } from 'ngx-logger';
 import { StatusCode } from '@ucap-webmessenger/api';
 import moment from 'moment';
+import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 
 @Component({
   selector: 'ucap-chat-message-box-mass',
   templateUrl: './mass.component.html',
-  styleUrls: ['./mass.component.scss'],
+  styleUrls: ['./mass.component.scss']
 })
-export class MassComponent implements OnInit {
+export class MassComponent implements OnInit, AfterViewInit {
   @Input()
   message: Info<MassTextEventJson>;
 
@@ -22,7 +32,11 @@ export class MassComponent implements OnInit {
 
   moment = moment;
 
-  constructor(private logger: NGXLogger) {}
+  constructor(
+    private logger: NGXLogger,
+    private elementRef: ElementRef,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
+  ) {}
 
   ngOnInit() {
     try {
@@ -45,6 +59,24 @@ export class MassComponent implements OnInit {
     }
   }
 
+  ngAfterViewInit(): void {
+    if (
+      !!this.elementRef.nativeElement &&
+      !!this.elementRef.nativeElement.querySelector('a')
+    ) {
+      const elements = this.elementRef.nativeElement.querySelectorAll('a');
+      elements.forEach(element => {
+        element.addEventListener('click', this.onClickEvent.bind(this));
+      });
+    }
+  }
+
+  onClickEvent(event: MouseEvent) {
+    this.nativeService.openDefaultBrowser(
+      (event.target as HTMLAnchorElement).text
+    );
+  }
+
   onClickDetailView() {
     this.massDetail.emit(this.eventMassSeq);
   }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html

@@ -1,4 +1,4 @@
-<div class="translation-main">
+<div class="bubble-main translation-main">
   <div
     *ngIf="
       !!this.message.sentMessageJson &&

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.ts

@@ -1,12 +1,22 @@
-import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  EventEmitter,
+  Output,
+  AfterViewInit,
+  ElementRef,
+  Inject
+} from '@angular/core';
 import { Info, TranslationEventJson } from '@ucap-webmessenger/protocol-event';
+import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 
 @Component({
   selector: 'ucap-chat-message-box-translation',
   templateUrl: './translation.component.html',
   styleUrls: ['./translation.component.scss']
 })
-export class TranslationComponent implements OnInit {
+export class TranslationComponent implements OnInit, AfterViewInit {
   @Input()
   message: Info<TranslationEventJson>;
 
@@ -24,7 +34,10 @@ export class TranslationComponent implements OnInit {
 
   stickerUrl?: string;
 
-  constructor() {}
+  constructor(
+    private elementRef: ElementRef,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
+  ) {}
 
   ngOnInit() {
     if (
@@ -36,6 +49,24 @@ export class TranslationComponent implements OnInit {
     }
   }
 
+  ngAfterViewInit(): void {
+    if (
+      !!this.elementRef.nativeElement &&
+      !!this.elementRef.nativeElement.querySelector('a')
+    ) {
+      const elements = this.elementRef.nativeElement.querySelectorAll('a');
+      elements.forEach(element => {
+        element.addEventListener('click', this.onClickEvent.bind(this));
+      });
+    }
+  }
+
+  onClickEvent(event: MouseEvent) {
+    this.nativeService.openDefaultBrowser(
+      (event.target as HTMLAnchorElement).text
+    );
+  }
+
   onContextMenuMessage(event: MouseEvent, type: string) {
     this.contextMenu.emit({ event, type });
   }