짧은 번역 기능 추가.

2019-12-31 14:36:32 +09:00 · 2019-12-31 14:36:32 +09:00 · 2e24d80483
commit 2e24d80483
parent 84a30fc416
21 changed files with 705 additions and 72 deletions
--- a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts
@ -4,7 +4,9 @@ import {
  APIResponse,
  APIEncoder,
  APIDecoder,
-  ParameterUtil
+  ParameterUtil,
+  StatusCode,
+  JsonAnalization
 } from '@ucap-webmessenger/api';

 export interface TransMassTalkDownloadRequest extends APIRequest {
@ -15,23 +17,41 @@ export interface TransMassTalkDownloadRequest extends APIRequest {
 }

 export interface TransMassTalkDownloadResponse extends APIResponse {
-  Original?: string;
-  Translation?: string;
-  Locale?: string;
-  UserName?: string;
-  RegDate?: string;
+  content?: string;
+  userName?: string;
+  regDate?: string;
+  returnJson?: any;
 }

-const transMassTalkDownloadEncodeMap = {};
+const transMassTalkDownloadEncodeMap = {
+  userSeq: 'p_user_seq',
+  deviceType: 'p_device_type',
+  token: 'p_token',
+  eventTransSeq: 'p_event_mass_seq'
+};

-export const encodeTransMassTalkDownload: APIEncoder<
-  TransMassTalkDownloadRequest
-> = (req: TransMassTalkDownloadRequest) => {
+export const encodeTransMassTalkDownload: APIEncoder<TransMassTalkDownloadRequest> = (
+  req: TransMassTalkDownloadRequest
+) => {
  return ParameterUtil.encode(transMassTalkDownloadEncodeMap, req);
 };

-export const decodeTransMassTalkDownload: APIDecoder<
-  TransMassTalkDownloadResponse
-> = (res: any) => {
-  return {} as TransMassTalkDownloadResponse;
+export const decodeTransMassTalkDownload: APIDecoder<TransMassTalkDownloadResponse> = (
+  res: any
+) => {
+  try {
+    const json = JsonAnalization.receiveAnalization(res);
+    return {
+      statusCode: json.StatusCode,
+      content: json.Content,
+      userName: json.UserName,
+      regDate: json.RegDate,
+      returnJson: res
+    } as TransMassTalkDownloadResponse;
+  } catch (e) {
+    return {
+      statusCode: StatusCode.Fail,
+      errorMessage: e
+    } as TransMassTalkDownloadResponse;
+  }
 };
--- a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts
@ -49,16 +49,15 @@ export const decodeTransMassTalkSave: APIDecoder<TransMassTalkSaveResponse> = (
  res: any
 ) => {
  try {
-    const json = JsonAnalization.receiveAnalization(res);
    return {
-      statusCode: json.StatusCode,
-      translationSeq: json.EventTransSEQ,
-      roomSeq: json.RoomID,
-      registrationDate: json.RegDate,
-      locale: json.Locale,
-      original: json.Original,
-      translation: json.Translation,
-      returnJson: res
+      statusCode: res.StatusCode,
+      translationSeq: res.EventTransSEQ,
+      roomSeq: res.RoomID,
+      registrationDate: res.RegDate,
+      locale: res.Locale,
+      original: res.Original,
+      translation: res.Translation,
+      returnJson: JSON.stringify(res)
    } as TransMassTalkSaveResponse;
  } catch (e) {
    return {
--- a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts
@ -4,7 +4,9 @@ import {
  APIResponse,
  APIEncoder,
  APIDecoder,
-  ParameterUtil
+  ParameterUtil,
+  StatusCode,
+  JsonAnalization
 } from '@ucap-webmessenger/api';

 export interface TranslationReqRequest extends APIRequest {
@ -17,13 +19,21 @@ export interface TranslationReqRequest extends APIRequest {
 }

 export interface TranslationReqResponse extends APIResponse {
-  SrcLocale?: string;
-  DestLocale?: string;
-  Original?: string;
-  Translation?: string;
+  srcLocale?: string;
+  destLocale?: string;
+  original?: string;
+  translation?: string;
+  returnJson?: any;
 }

-const translationReqEncodeMap = {};
+const translationReqEncodeMap = {
+  userSeq: 'p_user_seq',
+  deviceType: 'p_device_type',
+  token: 'p_token',
+  original: 'p_original',
+  srcLocale: 'p_src_locale',
+  destLocale: 'p_dest_locale'
+};

 export const encodeTranslationReq: APIEncoder<TranslationReqRequest> = (
  req: TranslationReqRequest
@ -34,5 +44,20 @@ export const encodeTranslationReq: APIEncoder<TranslationReqRequest> = (
 export const decodeTranslationReq: APIDecoder<TranslationReqResponse> = (
  res: any
 ) => {
+  try {
+    return {
+      statusCode: res.StatusCode,
+      srcLocale: res.SrcLocale,
+      destLocale: res.DestLocale,
+      original: res.Original,
+      translation: res.Translation,
+      returnJson: JSON.stringify(res)
+    } as TranslationReqResponse;
+  } catch (e) {
+    return {
+      statusCode: StatusCode.Fail,
+      errorMessage: e
+    } as TranslationReqResponse;
+  }
  return {} as TranslationReqResponse;
 };
--- a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts
@ -20,7 +20,7 @@ export interface TranslationSaveRequest extends APIRequest {
 }

 export interface TranslationSaveResponse extends APIResponse {
-  translationSeq?: string;
+  translationSeq?: number;
  roomSeq?: string;
  registrationDate?: string;
  srcLocale?: string;
@ -50,17 +50,16 @@ export const decodeTranslationSave: APIDecoder<TranslationSaveResponse> = (
  res: any
 ) => {
  try {
-    const json = JsonAnalization.receiveAnalization(res);
    return {
-      statusCode: json.StatusCode,
-      translationSeq: json.EventTransSEQ,
-      roomSeq: json.RoomID,
-      registrationDate: json.RegDate,
-      srcLocale: json.SrcLocale,
-      destLocale: json.DestLocale,
-      original: json.Original,
-      translation: json.Translation,
-      returnJson: res
+      statusCode: res.StatusCode,
+      translationSeq: !!res.EventTransSeq ? Number(res.EventTransSeq) : 0,
+      roomSeq: res.RoomID,
+      registrationDate: res.RegDate,
+      srcLocale: res.SrcLocale,
+      destLocale: res.DestLocale,
+      original: res.Original,
+      translation: res.Translation,
+      returnJson: JSON.stringify(res)
    } as TranslationSaveResponse;
  } catch (e) {
    return {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@ -233,6 +233,7 @@
        [minShowReadHere]="
          environment.productConfig.CommonSetting.readHereShowMinimumEventCount
        "
+        [translationSimpleview]="translationSimpleview"
        (moreEvent)="onMoreEvent($event)"
        (massDetail)="onMassDetail($event)"
        (save)="onSave($event)"
@ -266,6 +267,25 @@
    <div></div>
  </div>
  <!-- / sticker-selector -->
+
+  <!-- Translation -->
+  <div class="translation-container">
+    <ucap-translation-section
+      *ngIf="isShowTranslation"
+      [destLocale]="destLocale"
+      [simpleView]="translationSimpleview"
+      [preView]="translationPreview"
+      [translationPreviewInfo]="translationPreviewInfo"
+      (changeTranslationSimpleview)="onChangeTranslationSimpleView($event)"
+      (changeTranslationPreview)="onChangeTranslationPreView($event)"
+      (changeDestLocale)="onChangeDestLocale($event)"
+      (cancelTranslation)="onCancelTranslation($event)"
+      (sendTranslationMessage)="onSendTranslationMessage($event)"
+    >
+    </ucap-translation-section>
+  </div>
+  <!-- / Translation -->
+
  <!-- CHAT FOOTER -->
  <div fxFlex="0 0 auto" fxLayout="column" *ngIf="getEnableSend()">
    <!-- REPLY FORM -->
@ -276,6 +296,7 @@
      (sendFiles)="onFileSelected($event)"
      (clearView)="clearView()"
      (toggleStickerSelector)="onShowToggleStickerSelector($event)"
+      (toggleTranslation)="onShowToggleTranslation($event)"
    ></ucap-chat-form>
    <!-- / REPLY FORM -->
  </div>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@ -117,6 +117,22 @@
      width: 100%;
    }
  }
+
+  .translation-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: transparent;
+
+    .translation-zone {
+      position: absolute;
+      padding: 10px 10px 0 10px;
+      background-color: rgba(250, 255, 255, 0.8);
+      bottom: 0;
+      width: 100%;
+    }
+  }
 }

 ::ng-deep .chat-snackbar-class {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@ -23,7 +23,7 @@ import {
 } from '@ucap-webmessenger/ui';
 import { Store, select } from '@ngrx/store';
 import { NGXLogger } from 'ngx-logger';
-import { Observable, Subscription, forkJoin, of, combineLatest } from 'rxjs';
+import { Observable, Subscription, forkJoin, combineLatest, of } from 'rxjs';
 import {
  Info,
  EventType,
@ -35,7 +35,8 @@ import {
  EventJson,
  FileEventJson,
  StickerEventJson,
-  MassTextEventJson
+  MassTextEventJson,
+  TranslationEventJson
 } from '@ucap-webmessenger/protocol-event';

 import * as AppStore from '@app/store';
@ -72,7 +73,9 @@ import { FileUploadItem } from '@ucap-webmessenger/api';
 import {
  CommonApiService,
  FileTalkSaveRequest,
-  FileTalkSaveResponse
+  FileTalkSaveResponse,
+  TranslationReqRequest,
+  TranslationSaveRequest
 } from '@ucap-webmessenger/api-common';
 import {
  CreateChatDialogComponent,
@ -166,6 +169,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
  isShowStickerSelector = false;
  selectedSticker: StickerFilesInfo;

+  /** About Translation */
+  isShowTranslation = false;
+  translationSimpleview = false;
+  translationPreview = false;
+  destLocale = 'en'; // default English :: en
+  translationPreviewInfo: TranslationEventJson | null;
+
  /** About ReadHere */
  firstcheckReadHere = true;
  clearReadHere = false;
@ -360,8 +370,17 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
    // Chat Search Clear..
    this.onCloseSearchArea();

+    // Translate Clear..
+    this.isShowTranslation = false;
+    this.translationSimpleview = false;
+    this.translationPreview = false;
+    // this.destLocale = 'en'; // default English :: en
+    this.translationPreviewInfo = null;
+
+    // Read here Clear..
    this.firstcheckReadHere = true;

+    // Chat Formfield Clear..
    if (!!this.chatForm) {
      this.chatForm.replyForm.reset();
    }
@ -578,6 +597,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
    }
  }

+  /** Send Event */
  async onSendMessage(message: string) {
    this.setEventMoreInit();

@ -598,8 +618,77 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
      }
    }

+    if (!!this.isShowTranslation && this.destLocale.trim().length > 0) {
+      /** CASE : Translation */
+      console.log('번역들어간다.');
+
+      const destLocale = this.destLocale;
+      const original = message;
+      const roomSeq = this.roomInfo.roomSeq;
+      this.commonApiService
+        .translationSave({
+          userSeq: this.loginRes.userSeq,
+          deviceType: this.environmentsInfo.deviceType,
+          token: this.loginRes.tokenString,
+          roomSeq,
+          original,
+          srcLocale: '',
+          destLocale
+        } as TranslationSaveRequest)
+        .pipe(
+          take(1),
+          map(res => {
+            console.log(res);
+            if (res.statusCode === StatusCode.Success) {
+              if (res.translationSeq > 0) {
+                // Mass Text Translation
+              } else {
+                // Normal Text Translation
+                const json: TranslationEventJson = {
+                  locale: destLocale,
+                  original,
+                  translation: res.translation,
+                  stickername: '',
+                  stickerfile: !!this.selectedSticker
+                    ? this.selectedSticker.index
+                    : ''
+                };
+
+                if (!!this.translationPreview) {
+                  // preview
+                  this.translationPreviewInfo = json;
+                } else {
+                  // direct send
+                  this.store.dispatch(
+                    EventStore.send({
+                      senderSeq: this.loginRes.userSeq,
+                      req: {
+                        roomSeq,
+                        eventType: EventType.Translation,
+                        sentMessage: JSON.stringify(json)
+                      }
+                    })
+                  );
+
+                  if (!!this.translationPreviewInfo) {
+                    this.translationPreviewInfo = null;
+                  }
+                }
+
                if (!!this.selectedSticker) {
-      // Send Sticker
+                  this.isShowStickerSelector = false;
+                  this.setStickerHistory(this.selectedSticker);
+                }
+              }
+            } else {
+              this.logger.error(res);
+            }
+          }),
+          catchError(error => of(this.logger.error(error)))
+        )
+        .subscribe();
+    } else if (!!this.selectedSticker) {
+      /** CASE : Sticker */
      if (
        !!message &&
        message.trim().length >
@ -640,7 +729,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
      message.trim().length >
      environment.productConfig.CommonSetting.masstextLength
    ) {
-      // MASS TEXT
+      /** CASE : MASS TEXT */
      this.store.dispatch(
        EventStore.sendMass({
          senderSeq: this.loginRes.userSeq,
@ -653,6 +742,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
        })
      );
    } else {
+      /** CASE : Normal Text */
      this.store.dispatch(
        EventStore.send({
          senderSeq: this.loginRes.userSeq,
@ -1361,4 +1451,37 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
      }
    }
  }
+
+  /** About Translation */
+  onShowToggleTranslation() {
+    this.isShowTranslation = !this.isShowTranslation;
+    if (!this.isShowTranslation) {
+    }
+  }
+  onChangeTranslationSimpleView(value: boolean) {
+    this.translationSimpleview = value;
+  }
+  onChangeTranslationPreView(value: boolean) {
+    this.translationPreview = value;
+  }
+  onChangeDestLocale(destLocale: string) {
+    this.destLocale = destLocale;
+  }
+  onCancelTranslation() {
+    this.translationPreviewInfo = null;
+  }
+  onSendTranslationMessage(translationInfo: TranslationEventJson) {
+    this.store.dispatch(
+      EventStore.send({
+        senderSeq: this.loginRes.userSeq,
+        req: {
+          roomSeq: this.roomInfo.roomSeq,
+          eventType: EventType.Translation,
+          sentMessage: JSON.stringify(translationInfo)
+        }
+      })
+    );
+
+    this.translationPreviewInfo = null;
+  }
 }
--- a/projects/ucap-webmessenger-protocol-event/src/lib/protocols/event-json/translation.event-json.ts
+++ b/projects/ucap-webmessenger-protocol-event/src/lib/protocols/event-json/translation.event-json.ts
@ -5,21 +5,21 @@ export interface TranslationEventJson {
  locale?: string;
  original?: string;
  translation?: string;
-  stickerName?: string;
-  stickerFile?: string;
+  stickername?: string;
+  stickerfile?: string;
 }

-export const decodeTranslationEventJson: EventJsonDecoder<
-  TranslationEventJson
-> = (message: string) => {
+export const decodeTranslationEventJson: EventJsonDecoder<TranslationEventJson> = (
+  message: string
+) => {
  try {
    const json = JsonAnalization.receiveAnalization(message);
    return {
      locale: json.locale,
      original: json.original,
      translation: json.translation,
-      stickerName: json.stickername,
-      stickerFile: json.stickerfile
+      stickername: json.stickername,
+      stickerfile: json.stickerfile
    } as TranslationEventJson;
  } catch (e) {
    return {} as TranslationEventJson;
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
@ -24,9 +24,13 @@
      <mat-icon>sentiment_satisfied_alt</mat-icon>
    </button>

-    <!-- <button mat-icon-button class="material-icons">
+    <button
+      mat-icon-button
+      class="material-icons"
+      (click)="onClickTranslation()"
+    >
      <mat-icon>g_translate</mat-icon>
-    </button> -->
+    </button>
  </div>

  <form
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts
@ -28,6 +28,8 @@ export class FormComponent implements OnInit {

  @Output()
  toggleStickerSelector = new EventEmitter<void>();
+  @Output()
+  toggleTranslation = new EventEmitter<void>();

  @Output()
  clearView = new EventEmitter();
@ -78,4 +80,8 @@ export class FormComponent implements OnInit {
  onClickStickerSelector() {
    this.toggleStickerSelector.emit();
  }
+
+  onClickTranslation() {
+    this.toggleTranslation.emit();
+  }
 }
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.html
@ -0,0 +1,24 @@
+<div class="translation-main">
+  <div class="original">
+    {{ message.sentMessageJson.translation }}
+  </div>
+  <div class="translation">
+    <span class="language">Kor</span>
+    녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
+    롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요
+    장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
+    롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요
+    장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
+    롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트
+  </div>
+  <div class="btn-box">
+    <ul>
+      <li>
+        <button mat-button>Save</button>
+      </li>
+      <li>
+        <button mat-button><span class="language">Kor</span>번역보기</button>
+      </li>
+    </ul>
+  </div>
+</div>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.ts
@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { TranslationEventJson, Info } from '@ucap-webmessenger/protocol-event';

@Component({
  selector: 'ucap-chat-message-box-mass-translation',
@ -6,6 +7,9 @@ import { Component, OnInit } from '@angular/core';
  styleUrls: ['./mass-translation.component.scss']
 })
 export class MassTranslationComponent implements OnInit {
+  @Input()
+  message: Info<TranslationEventJson>;
+
  constructor() {}

  ngOnInit() {}
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html
@ -1,17 +1,30 @@
 <div class="translation-main">
-  <div class="original">
-    {{ message.sentMessageJson.translation }}
+  <div
+    *ngIf="
+      !!this.message.sentMessageJson &&
+      !!this.message.sentMessageJson.stickerfile &&
+      this.message.sentMessageJson.stickerfile.trim().length > 0
+    "
+    class="sticker"
+  >
+    <img
+      [src]="stickerUrl"
+      onerror="this.src='assets/sticker/sticker_default.png'"
+    />
  </div>
-  <div class="translation">
-    <span class="language">Kor</span>
-    녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
-    롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요
-    장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
-    롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요
-    장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
-    롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트
+  <div
+    *ngIf="!translationSimpleview || (!!translationSimpleview && !!isMe)"
+    class="original"
+    [innerHTML]="message.sentMessageJson.original | linky"
+  ></div>
+  <div
+    *ngIf="!translationSimpleview || (!!translationSimpleview && !isMe)"
+    class="translation"
+  >
+    <span class="language">{{ message.sentMessageJson.locale }}</span>
+    <span [innerHTML]="message.sentMessageJson.translation | linky"> </span>
  </div>
-  <div class="btn-box">
+  <!-- <div class="btn-box">
    <ul>
      <li>
        <button mat-button>Save</button>
@ -20,5 +33,5 @@
        <button mat-button><span class="language">Kor</span>번역보기</button>
      </li>
    </ul>
-  </div>
+  </div> -->
 </div>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.ts
@ -10,7 +10,23 @@ export class TranslationComponent implements OnInit {
  @Input()
  message: Info<TranslationEventJson>;

+  @Input()
+  translationSimpleview: boolean;
+
+  @Input()
+  isMe: boolean;
+
+  stickerUrl?: string;
+
  constructor() {}

-  ngOnInit() {}
+  ngOnInit() {
+    if (
+      !!this.message.sentMessageJson &&
+      !!this.message.sentMessageJson.stickerfile &&
+      this.message.sentMessageJson.stickerfile.trim().length > 0
+    ) {
+      this.stickerUrl = `assets/sticker/sticker_s_${this.message.sentMessageJson.stickerfile}.png`;
+    }
+  }
 }
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
@ -210,6 +210,13 @@
                (contextmenu)="onContextMenuMessage($event, message)"
              >
              </ucap-chat-message-box-schedule>
+              <ucap-chat-message-box-translation
+                *ngSwitchCase="EventType.Translation"
+                [message]="message"
+                [translationSimpleview]="translationSimpleview"
+                [isMe]="message.senderSeq === loginRes.userSeq"
+                class="information-msg"
+              ></ucap-chat-message-box-translation>

              <ucap-chat-message-box-allim
                *ngSwitchCase="EventType.AllimTms"
@ -223,13 +230,12 @@
                class="information-msg"
              >
              </ucap-chat-message-box-allim>
+
              <div *ngSwitchDefault>
                <!-- mass-translation
                <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
                notice
                <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
-                translation
-                <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
                video-conference
                <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>

--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
@ -50,6 +50,8 @@ export class MessagesComponent implements OnInit {
  clearReadHere: boolean;
  @Input()
  minShowReadHere = 10;
+  @Input()
+  translationSimpleview = false;

  @Output()
  openProfile = new EventEmitter<UserInfo>();
--- a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
@ -0,0 +1,108 @@
+<div
+  *ngIf="
+    isShowTranslationPreview &&
+    !!translationPreviewInfo &&
+    !!translationPreviewInfo.translation
+  "
+  class="translation-preview"
+>
+  <span class="translation-section">
+    {{ translationPreviewInfo.translation }}
+  </span>
+
+  <button
+    mat-stroked-button
+    (click)="onClickSendTranslationMessage(translationPreviewInfo)"
+  >
+    Send
+  </button>
+  <span class="btn-close">
+    <button
+      mat-button
+      matSuffix
+      mat-icon-button
+      aria-label="Close"
+      (click)="onClickTranslationCancel()"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </span>
+</div>
+<div>
+  <form name="translationForm" [formGroup]="translationForm">
+    <mat-form-field>
+      <mat-label>Dest Type</mat-label>
+      <mat-select
+        formControlName="destType"
+        (selectionChange)="onChangeSelection($event)"
+      >
+        <mat-option value="">번역없음</mat-option>
+        <mat-option *ngFor="let dest of translationDestList" [value]="dest.key"
+          >{{ dest.text }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-slide-toggle
+      labelPosition="before"
+      [checked]="simpleView"
+      (change)="onChangToggleSimpleview($event)"
+      >Simple View</mat-slide-toggle
+    >
+    <mat-slide-toggle
+      labelPosition="before"
+      [checked]="preView"
+      (change)="onChangTogglePreview($event)"
+      >Preview</mat-slide-toggle
+    >
+  </form>
+</div>
+<!-- <div *ngIf="currentSticker" class="selected-sticker">
+  <img [src]="getStickerContentsImage(currentSticker)" />
+  <span class="btn-close">
+    <button
+      mat-button
+      matSuffix
+      mat-icon-button
+      aria-label="Close"
+      (click)="onClickClose()"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </span>
+</div>
+<div class="sticker-selector">
+  <mat-tab-group
+    mat-stretch-tabs
+    animationDuration="0ms"
+    (selectedIndexChange)="onSelectedIndexChange($event)"
+  >
+    <mat-tab
+      *ngFor="let stickerInfo of stickerInfoList; let idx = index"
+      [aria-label]="stickerInfo.title"
+    >
+      <ng-template mat-tab-label>
+        <img
+          #stickerTitle
+          [matTooltip]="stickerInfo.title"
+          matTooltipPosition="after"
+          [src]="getStickerTitleImage(stickerInfo, false, idx)"
+          (mouseover)="
+            stickerTitle.src = getStickerTitleImage(stickerInfo, true, idx)
+          "
+          (mouseout)="
+            stickerTitle.src = getStickerTitleImage(stickerInfo, false, idx)
+          "
+        />
+      </ng-template>
+      <div fxFlex fxLayout="row" fxLayoutGap="20px" class="sticker-item-box">
+        <div
+          *ngFor="let sticker of getStickerInfos(stickerInfo)"
+          (click)="onClickSelectSticker(sticker)"
+          class="sticker-item"
+        >
+          <img [src]="getStickerContentsImage(sticker)" />
+        </div>
+      </div>
+    </mat-tab>
+  </mat-tab-group>
+</div> -->
--- a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss
@ -0,0 +1,34 @@
+.sticker-selector {
+  border-top: 1px solid #cccccc;
+  // .sticker-item-box {
+  //   flex-wrap: wrap;
+  //   padding: 20px 20px 0;
+  //   overflow: auto;
+  // }
+}
+
+// .sticker-item {
+//   width: 60px;
+//   margin-bottom: 20px;
+//   display: inline-flex;
+//   cursor: pointer;
+// }
+
+.selected-sticker {
+  position: relative;
+  height: 100px;
+  padding: 20px;
+  text-align: right;
+  background-color: rgba(0, 0, 0, 0.4);
+  // img {
+  //   margin-right: 40px;
+  // }
+  // .btn-close {
+  //   position: absolute;
+  //   top: 2px;
+  //   right: 20px;
+  //   width: 40px;
+  //   height: 40px;
+  //   color: #ffffff;
+  // }
+}
--- a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.spec.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TranslationSectionComponent } from './translation-section.component';
+
+describe('TranslationSectionComponent', () => {
+  let component: TranslationSectionComponent;
+  let fixture: ComponentFixture<TranslationSectionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TranslationSectionComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TranslationSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.ts
@ -0,0 +1,181 @@
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import {
+  StickerInfo,
+  StickerFilesInfo,
+  StickerUtil,
+  StickerMap
+} from '@ucap-webmessenger/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { MatSlideToggleChange, MatSelectChange } from '@angular/material';
+import { TranslationEventJson } from '@ucap-webmessenger/protocol-event';
+
+@Component({
+  selector: 'ucap-translation-section',
+  templateUrl: './translation-section.component.html',
+  styleUrls: ['./translation-section.component.scss']
+})
+export class TranslationSectionComponent implements OnInit {
+  @Input()
+  destLocale: string;
+  @Input()
+  simpleView: boolean;
+  @Input()
+  preView: boolean;
+  @Input()
+  translationPreviewInfo: TranslationEventJson | null;
+
+  @Output()
+  changeTranslationSimpleview = new EventEmitter<boolean>();
+  @Output()
+  changeTranslationPreview = new EventEmitter<boolean>();
+  @Output()
+  changeDestLocale = new EventEmitter<string>();
+  @Output()
+  cancelTranslation = new EventEmitter<void>();
+  @Output()
+  sendTranslationMessage = new EventEmitter<TranslationEventJson>();
+
+  isShowTranslationSimpleview = false;
+  isShowTranslationPreview = false;
+
+  translationDestList: {
+    key: string;
+    text: string;
+  }[] = [
+    { key: 'af', text: 'Afrikaans' },
+    { key: 'sq', text: 'Albanian' },
+    { key: 'am', text: 'Amharic' },
+    { key: 'ar', text: 'Arabic' },
+    { key: 'hy', text: 'Armenian' },
+    { key: 'az', text: 'Azeerbaijani' },
+    { key: 'eu', text: 'Basque' },
+    { key: 'be', text: 'Belarusian' },
+    { key: 'bn', text: 'Bengali' },
+    { key: 'bs', text: 'Bosnian' },
+    { key: 'bg', text: 'Bulgarian' },
+    { key: 'ca', text: 'Catalan' },
+    { key: 'ceb', text: 'Cebuano' },
+    { key: 'zh-CN', text: 'Chinese(Simplified)' },
+    { key: 'zh-TW', text: 'Chinese(Traditional)' },
+    { key: 'co', text: 'Corsican' },
+    { key: 'hr', text: 'Croatian' },
+    { key: 'cs', text: 'Czech' },
+    { key: 'da', text: 'Danish' },
+    { key: 'nl', text: 'Dutch' },
+    { key: 'en', text: 'English' },
+    { key: 'eo', text: 'Esperanto' },
+    { key: 'fi', text: 'Finnish' },
+    { key: 'fr', text: 'French' },
+    { key: 'fy', text: 'Frisian' },
+    { key: 'gl', text: 'Galician' },
+    { key: 'ka', text: 'Georgian' },
+    { key: 'de', text: 'German' },
+    { key: 'el', text: 'Greek' },
+    { key: 'gu', text: 'Gujarati' },
+    { key: 'ht', text: 'Haitian Creole' },
+    { key: 'ha', text: 'Hausa' },
+    { key: 'haw', text: 'Hawaiian' },
+    { key: 'iw', text: 'Hebrew' },
+    { key: 'hi', text: 'Hindi' },
+    { key: 'hmn', text: 'Hmong' },
+    { key: 'hu', text: 'Hungarian' },
+    { key: 'is', text: 'Icelandic' },
+    { key: 'ig', text: 'Igbo' },
+    { key: 'id', text: 'Indonesian' },
+    { key: 'ga', text: 'Irish' },
+    { key: 'it', text: 'Italian' },
+    { key: 'ja', text: 'Japanese' },
+    { key: 'jw', text: 'Javanese' },
+    { key: 'kn', text: 'Kannada' },
+    { key: 'kk', text: 'Kazakh' },
+    { key: 'km', text: 'Khmer' },
+    { key: 'ko', text: 'Korean' },
+    { key: 'ku', text: 'Kurdish' },
+    { key: 'ky', text: 'Kyrgyz' },
+    { key: 'lo', text: 'Lao' },
+    { key: 'la', text: 'Latin' },
+    { key: 'lv', text: 'Latvian' },
+    { key: 'lt', text: 'Lithuanian' },
+    { key: 'lb', text: 'Luxembourgish' },
+    { key: 'mk', text: 'Macedonian' },
+    { key: 'mg', text: 'Malagasy' },
+    { key: 'ms', text: 'Malay' },
+    { key: 'ml', text: 'Malayalam' },
+    { key: 'mi', text: 'Maori' },
+    { key: 'mr', text: 'Marathi' },
+    { key: 'mn', text: 'Mongolian' },
+    { key: 'my', text: 'Myanmar(Burmese)' },
+    { key: 'ne', text: 'Nepali' },
+    { key: 'no', text: 'Norwegian' },
+    { key: 'ny', text: 'Nyanja(Chichewa)' },
+    { key: 'ps', text: 'Pashto' },
+    { key: 'fa', text: 'Persian' },
+    { key: 'pl', text: 'Polish' },
+    { key: 'pt', text: 'Portuguese' },
+    { key: 'pa', text: 'Punjabi' },
+    { key: 'ro', text: 'Romanian' },
+    { key: 'ru', text: 'Russian' },
+    { key: 'sm', text: 'Samoan' },
+    { key: 'gd', text: 'Scots Gaelic' },
+    { key: 'sr', text: 'Serbian' },
+    { key: 'st', text: 'Sesotho' },
+    { key: 'sn', text: 'Shona' },
+    { key: 'sd', text: 'Sindhi' },
+    { key: 'si', text: 'Sinhala(Sinhalese)' },
+    { key: 'sk', text: 'Slovak' },
+    { key: 'sl', text: 'Slovenian' },
+    { key: 'so', text: 'Somali' },
+    { key: 'es', text: 'Spanish' },
+    { key: 'su', text: 'Sundanese' },
+    { key: 'sw', text: 'Swahili' },
+    { key: 'sv', text: 'Swedish' },
+    { key: 'tl', text: 'Tagalog(Filipino)' },
+    { key: 'tg', text: 'Tajik' },
+    { key: 'ta', text: 'Tamil' },
+    { key: 'te', text: 'Telugu' },
+    { key: 'th', text: 'Thai' },
+    { key: 'tr', text: 'Turkish' },
+    { key: 'uk', text: 'Ukrainian' },
+    { key: 'ur', text: 'Urdu' },
+    { key: 'uz', text: 'Uzbek' },
+    { key: 'vi', text: 'Vietnamese' },
+    { key: 'cy', text: 'Welsh' },
+    { key: 'xh', text: 'Xhosa' },
+    { key: 'yi', text: 'Yiddish' },
+    { key: 'yo', text: 'Yoruba' },
+    { key: 'zu', text: 'Zulu' }
+  ];
+
+  translationForm: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {}
+
+  ngOnInit() {
+    this.translationForm = this.formBuilder.group({
+      destType: [this.destLocale]
+    });
+  }
+
+  onChangeSelection(event: MatSelectChange) {
+    this.destLocale = event.value;
+    this.changeDestLocale.emit(this.destLocale);
+  }
+
+  onChangToggleSimpleview(event: MatSlideToggleChange) {
+    this.isShowTranslationSimpleview = event.checked;
+    this.changeTranslationSimpleview.emit(event.checked);
+  }
+
+  onChangTogglePreview(event: MatSlideToggleChange) {
+    this.isShowTranslationPreview = event.checked;
+    this.changeTranslationPreview.emit(event.checked);
+  }
+
+  onClickSendTranslationMessage(translationInfo: TranslationEventJson) {
+    this.sendTranslationMessage.emit(translationInfo);
+  }
+
+  onClickTranslationCancel() {
+    this.cancelTranslation.emit();
+  }
+}
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@ -19,6 +19,11 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import {
+  MatTabsModule,
+  MatSelectModule,
+  MatSlideToggleModule,
+} from '@angular/material';

 import { DragDropModule } from '@angular/cdk/drag-drop';

@ -66,12 +71,12 @@ import { LinkyPipe } from './pipes/linky.pipe';
 import { TranslatePipe } from './pipes/translate.pipe';
 import { DatePipe } from './pipes/date.pipe';

-import { MatTabsModule } from '@angular/material';
 import {
  StringEmptyCheckPipe,
  StringFormatterPhonePipe
 } from './pipes/string.pipe';
 import { ClickDebounceDirective } from './directives/click-debounce.directive';
+import { TranslationSectionComponent } from './components/translation-section.component';

 const COMPONENTS = [
  FileUploadQueueComponent,
@ -83,6 +88,7 @@ const COMPONENTS = [
  PickDateComponent,
  PickTimeComponent,
  StepInputComponent,
+  TranslationSectionComponent,

  BinaryViewerComponent,
  DocumentViewerComponent,
@ -142,6 +148,8 @@ const SERVICES = [
    MatButtonToggleModule,
    MatMenuModule,
    MatDatepickerModule,
+    MatSelectModule,
+    MatSlideToggleModule,
    DragDropModule
  ],
  exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES],