i18n is working

2020-01-08 14:43:43 +09:00 · 2020-01-08 14:43:43 +09:00 · 2c1278f31f
commit 2c1278f31f
parent 6d95d26d94
18 changed files with 212 additions and 153 deletions
--- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
@ -1,7 +1,17 @@
 {
  "accounts": {
+    "instructionsOfLogin": "LOGIN TO YOUR ACCOUNT",
    "login": "Login",
    "logout": "Logout",
+    "fieldCompany": "Company",
+    "fieldLoginId": "Login ID",
+    "fieldLoginPw": "Login password",
+    "fieldPassword": "Password",
+    "fieldCurrentPassword": "Current password",
+    "fieldNewPassword": "New password",
+    "fieldNewPasswordConfirm": "New password confirm",
+    "rememberMe": "Remember me",
+    "autoLogin": "Auto login",
    "consentOfPrivacy": "Agreement of ",
    "changePassword": "Change password",
    "resetPassword": "Reset password",
@ -12,6 +22,22 @@
      "changedPassword": "Password changed. Please log in again."
    },
    "errors": {
+      "requireLoginId": "Login ID is required.",
+      "requireLoginPw": "Login password is required.",
+      "requireCompany": "Company is required.",
+      "requireCurrentPassword": "Current password is required.",
+      "notSameWithCurrentPassword": "Does not match current password",
+      "sameWithCurrentPassword": "Same as current password",
+      "requireNewPassword": "New password is required.",
+      "requireNewPasswordConfirm": "New password confirm is required.",
+      "notSameWithNewPassword": "Does not match new password and new password confirm.",
+      "notContainSpacesForPassword": "Passwords cannot contain spaces",
+      "notContainUseridForPassword": "User ID cannot be included in the password",
+      "notContainPhonenumberForPassword": "Your mobile phone number cannot be included in your password",
+      "notAllowedAlphaNumOver3TimesForPassword": "You can't use numbers or letters over 3 times.",
+      "notAllowedConsecutiveAlphaNumOver3TimesForPassword": "You cannot use consecutive numbers or letters more than 3 times.",
+      "notSatisfiedCombineForPassword": "Combination of two or more kinds of letters, numbers and special characters.",
+      "minLengthCombineForPassword": "Password must be {{lengthOfPassword}} characters if {{countOfCombine}} combination.",
      "failToChangePassword": "Failed to change password."
    }
  },
@ -64,6 +90,7 @@
  "chat": {
    "label": "Chat",
    "room": "Chat room",
+    "send": "Send",
    "searchRoomByName": "Search by room name",
    "searchEventByText": "Search by chat",
    "nameOfRoom": "Name of chat room",
@ -212,6 +239,7 @@
      "downloadSelected": "Download selected",
      "openDownloadFolder": "Open download folder",
      "selectFiles": "Select files",
+      "dropZoneForUpload": "Drop files here to upload.",
      "type": {
        "label": "Type of file",
        "images": "Images",
@ -229,7 +257,9 @@
        "failToSave": "File save failed.",
        "failToSaveSomeOfAll": "Some of file(s) save failed",
        "failToSpecifyPath": "Specifing of save path failed.",
-        "expired": "This file has expired"
+        "expired": "This file has expired",
+        "noPreview": "This file does not support preview.",
+        "notSupporedType": "File format is not supported."
      }
    },
    "clipboard": {
@ -250,10 +280,13 @@
      "modify": "Modify",
      "remove": "Remove",
      "apply": "Apply",
-      "Minimize window": "창 최소화",
-      "Maxmize window": "창 최대화",
-      "Restore window": "창 이전 크기",
-      "Close window": "창 닫기"
+      "minimizeWindow": "Minimize window",
+      "maxmizeWindow": "Maxmize window",
+      "restoreWindow": "Restore window",
+      "Close window": "Close window",
+      "zoomOut": "Zoom out",
+      "zoomIn": "Zoom in",
+      "zoomReset": "Zoom reset"
    },
    "paginator": {
      "itemsPerPage": "Items per page",
@ -262,10 +295,20 @@
      "firstPage": "First page",
      "lastPage": "Last page"
    },
+    "player": {
+      "play": "Play",
+      "stop": "Stop"
+    },
    "pronoun": {
      "me": "Me",
      "all": "All"
    },
+    "translations": {
+      "targetLanguage": "Traget language",
+      "noTranslation": "No translation",
+      "simpleView": "Simple View",
+      "preview": "Preview"
+    },
    "timezone": {
      "Africa/Abidjan": "Africa/Abidjan",
      "Africa/Accra": "Africa/Accra",
--- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
@ -1,7 +1,17 @@
 {
  "accounts": {
+    "instructionsOfLogin": "계정에 로그인 하세요.",
    "login": "로그인",
    "logout": "로그아웃",
+    "fieldCompany": "회사",
+    "fieldLoginId": "로그인 아이디",
+    "fieldLoginPw": "로그인 비밀번호",
+    "fieldPassword": "비밀번호",
+    "fieldCurrentPassword": "현재 비밀번호",
+    "fieldNewPassword": "신규 비밀번호",
+    "fieldNewPasswordConfirm": "신규 비밀번호 확인",
+    "rememberMe": "아이디 저장",
+    "autoLogin": "자동 로그인",
    "consentOfPrivacy": "개인정보 동의",
    "changePassword": "비밀번호 변경",
    "resetPassword": "비밀번호 초기화",
@ -12,6 +22,22 @@
      "changedPassword": "비밀번호가 변경되었습니다. 다시 로그인하여 주십시오"
    },
    "errors": {
+      "requireLoginId": "로그인 아이디를 입력해 주세요.",
+      "requireLoginPw": "로그인 비밀번호를 입력해 주세요.",
+      "requireCompany": "회사를 입력해 주세요.",
+      "requireCurrentPassword": "현재 비밀번호를 입력해 주세요",
+      "notSameWithCurrentPassword": "현재 비밀번호와 일치하지 않습니다",
+      "sameWithCurrentPassword": "현재 비밀번호와 동일합니다",
+      "requireNewPassword": "신규 비밀번호를 입력해 주세요",
+      "requireNewPasswordConfirm": "신규 비밀번호 확인을 입력해 주세요",
+      "notSameWithNewPassword": "신규 비밀번호와 신규 비밀번호 확인이 다릅니다",
+      "notContainSpacesForPassword": "비밀번호에는 공백을 입력할 수 없습니다",
+      "notContainUseridForPassword": "사용자 ID를 비밀번호에 포함할 수 없습니다",
+      "notContainPhonenumberForPassword": "사용자 휴대폰번호를 비밀번호에 포함할 수 없습니다",
+      "notAllowedAlphaNumOver3TimesForPassword": "숫자나 문자를 3번이상 반복적으로 사용할 수 없습니다",
+      "notAllowedConsecutiveAlphaNumOver3TimesForPassword": "연속되는 숫자나 문자를 3번이상 사용할 수 없습니다",
+      "notSatisfiedCombineForPassword": "문자, 숫자, 특수문자 중 2종류 이상 조합을 해야 합니다",
+      "minLengthCombineForPassword": "비밀번호는 {{countOfCombine}}가지가 조합된 경우 {{lengthOfPassword}}자를 넘어야 합니다",
      "failToChangePassword": "비밀번호 변경에 실패하였습니다."
    }
  },
@ -64,6 +90,7 @@
  "chat": {
    "label": "대화",
    "room": "대화방",
+    "send": "보내기",
    "searchRoomByName": "대화방 이름 검색",
    "searchEventByText": "대화 내용 검색",
    "nameOfRoom": "대화방 이름",
@ -212,6 +239,7 @@
      "downloadSelected": "선택된 파일 다운로드",
      "openDownloadFolder": "다운로드 폴더 열기",
      "selectFiles": "파일을 선택하세요",
+      "dropZoneForUpload": "여기에 파일을 Drop하시면 업로드 됩니다.",
      "type": {
        "label": "파일 종류",
        "images": "이미지",
@ -229,7 +257,9 @@
        "failToSave": "파일 저장에 실패하였습니다.",
        "failToSaveSomeOfAll": "파일 저장 중 일부 파일이 실패하였습니다.",
        "failToSpecifyPath": "저장경로 지정에 실패하였습니다.",
-        "expired": "기간이 만료된 파일입니다"
+        "expired": "기간이 만료된 파일입니다",
+        "noPreview": "미리보기를 지원하지 않는 파일입니다.",
+        "notSupporedType": "지원하지 않는 파일형식입니다."
      }
    },
    "clipboard": {
@ -253,7 +283,10 @@
      "minimizeWindow": "창 최소화",
      "maxmizeWindow": "창 최대화",
      "restoreWindow": "창 이전 크기",
-      "closeWindow": "창 닫기"
+      "closeWindow": "창 닫기",
+      "zoomOut": "축소",
+      "zoomIn": "확대",
+      "zoomReset": "원본 비율"
    },
    "paginator": {
      "itemsPerPage": "페이지별 갯수",
@ -262,10 +295,20 @@
      "firstPage": "처음 페이지",
      "lastPage": "마지막 페이지"
    },
+    "player": {
+      "play": "재생",
+      "stop": "멈춤"
+    },
    "pronoun": {
      "me": "나",
      "all": "전체"
    },
+    "translations": {
+      "targetLanguage": "대상 언어",
+      "noTranslation": "번역 없음",
+      "simpleView": "간략 보기",
+      "preview": "미리 보기"
+    },
    "timezone": {
      "Africa/Abidjan": "아프리카/아비 장",
      "Africa/Accra": "아프리카/아크라",
--- a/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.html
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.html
@ -1,7 +1,7 @@
 <div class="change-password-form">
  <form name="changePasswordForm" [formGroup]="changePasswordForm" novalidate>
    <mat-form-field>
-      <mat-label>현재 패스워드</mat-label>
+      <mat-label>{{ 'accounts.fieldCurrentPassword' | translate }}</mat-label>
      <input
        matInput
        type="password"
@ -9,11 +9,13 @@
      />
    </mat-form-field>
    <mat-form-field>
-      <mat-label>신규 패스워드</mat-label>
+      <mat-label>{{ 'accounts.fieldNewPassword' | translate }}</mat-label>
      <input matInput type="password" [formControl]="newLoginPwFormControl" />
    </mat-form-field>
    <mat-form-field>
-      <mat-label>신규 패스워드 확인</mat-label>
+      <mat-label>{{
+        'accounts.fieldNewPasswordConfirm' | translate
+      }}</mat-label>
      <input
        matInput
        type="password"
@ -28,7 +30,7 @@
          currentLoginPwFormControl.hasError('required')
        "
      >
-        현재 비밀번호를 입력해 주세요
+        {{ 'accounts.errors.requireCurrentPassword' | translate }}
      </mat-error>
      <mat-error
        *ngIf="
@ -36,7 +38,7 @@
          currentLoginPwFormControl.hasError('ucapPasswordSame')
        "
      >
-        현재 비밀번호와 일치하지 않습니다
+        {{ 'accounts.errors.notSameWithCurrentPassword' | translate }}
      </mat-error>

      <mat-error
@ -45,7 +47,7 @@
          newLoginPwFormControl.hasError('required')
        "
      >
-        신규 비밀번호를 입력해 주세요
+        {{ 'accounts.errors.requireNewPassword' | translate }}
      </mat-error>
      <mat-error
        *ngIf="
@ -53,7 +55,7 @@
          newLoginPwFormControl.hasError('ucapNotSameWith')
        "
      >
-        현재 비밀번호와 동일합니다
+        {{ 'accounts.errors.sameWithCurrentPassword' | translate }}
      </mat-error>
      <mat-error
        *ngIf="
@ -67,46 +69,60 @@
          "
        >
          <ng-container *ngSwitchCase="PasswordValidationResult.IncludeSpace">
-            비밀번호에는 공백을 입력할 수 없습니다
+            {{ 'accounts.errors.notContainSpacesForPassword' | translate }}
          </ng-container>
          <ng-container *ngSwitchCase="PasswordValidationResult.IncludeUserId">
-            사용자 ID를 비밀번호에 포함할 수 없습니다
+            {{ 'accounts.errors.notContainUseridForPassword' | translate }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.IncludePhoneNumber"
          >
-            사용자 휴대폰번호를 비밀번호에 포함할 수 없습니다
+            {{ 'accounts.errors.notContainPhonenumberForPassword' | translate }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.IncludeRepeated"
          >
-            숫자나 문자를 3번이상 반복적으로 사용할 수 없습니다
+            {{
+              'accounts.errors.notAllowedAlphaNumOver3TimesForPassword'
+                | translate
+            }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.IncludeIncrements"
          >
-            연속되는 숫자나 문자를 3번이상 사용할 수 없습니다
+            {{
+              'accounts.errors.notAllowedConsecutiveAlphaNumOver3TimesForPassword'
+                | translate
+            }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.IncludeDecrements"
          >
-            연속되는 숫자나 문자를 3번이상 사용할 수 없습니다
+            {{
+              'accounts.errors.notAllowedConsecutiveAlphaNumOver3TimesForPassword'
+                | translate
+            }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.LackOfCombination"
          >
-            문자, 숫자, 특수문자 중 2종류 이상 조합을 해야 합니다
+            {{ 'accounts.errors.notSatisfiedCombineForPassword' | translate }}
          </ng-container>
          <ng-container
            *ngSwitchCase="PasswordValidationResult.TooShortCombinationLength"
          >
-            비밀번호는{{
-              newLoginPwFormControl.getError('ucapPassword').result.extra
-                .combinationCount
-            }}가지가 조합된 경우{{
-              newLoginPwFormControl.getError('ucapPassword').result.extra
-                .minPwLen
-            }}자를 넘어야 합니다
+            {{
+              'accounts.errors.minLengthCombineForPassword'
+                | translate
+                  : {
+                      countOfCombine: newLoginPwFormControl.getError(
+                        'ucapPassword'
+                      ).result.extra.combinationCount,
+                      lengthOfPassword: newLoginPwFormControl.getError(
+                        'ucapPassword'
+                      ).result.extra.minPwLen
+                    }
+            }}
          </ng-container>
        </ng-container>
      </mat-error>
@ -116,7 +132,7 @@
          newConfirmLoginPwFormControl.hasError('required')
        "
      >
-        신규 비밀번호 확인을 입력해 주세요
+        {{ 'accounts.errors.requireNewPassword' | translate }}
      </mat-error>
      <mat-error
        *ngIf="
@ -124,7 +140,7 @@
          newConfirmLoginPwFormControl.hasError('ucapSameWith')
        "
      >
-        신규 비밀번호와 신규 비밀번호 확인이 다릅니다
+        {{ 'accounts.errors.notSameWithNewPassword' | translate }}
      </mat-error>
    </div>

@ -135,7 +151,7 @@
      [disabled]="changePasswordForm.invalid"
      (click)="onClickChangePassword()"
    >
-      패스워드 변경
+      {{ 'accounts.changePassword' | translate }}
    </button>
  </form>
 </div>
--- a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
@ -3,12 +3,12 @@
    class="mat-title"
    style="background-image: url(./assets/images/logo/bg_login_w160.png);"
  >
-    LOGIN TO YOUR ACCOUNT
+    {{ 'accounts.instructionsOfLogin' | translate }}
  </div>

  <form name="loginForm" [formGroup]="loginForm" novalidate>
    <mat-form-field [style.display]="!!curCompanyCode ? 'none' : 'block'">
-      <mat-label>Company</mat-label>
+      <mat-label>{{ 'accounts.fieldCompany' | translate }}</mat-label>
      <mat-select formControlName="companyCode" required>
        <mat-option
          *ngFor="let company of companyList"
@ -17,26 +17,23 @@
        </mat-option>
      </mat-select>
      <mat-error *ngIf="loginForm.get('companyCode').hasError('required')">
-        Company is required
+        {{ 'accounts.errors.requireCompany' | translate }}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
-      <mat-label>Login ID</mat-label>
+      <mat-label>{{ 'accounts.fieldLoginId' | translate }}</mat-label>
      <input matInput formControlName="loginId" />
      <mat-error *ngIf="loginForm.get('loginId').hasError('required')">
-        Login ID is required
-      </mat-error>
-      <mat-error *ngIf="!loginForm.get('loginId').hasError('required')">
-        Please enter a valid login id
+        {{ 'accounts.errors.requireLoginId' | translate }}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
-      <mat-label>Password</mat-label>
+      <mat-label>{{ 'accounts.fieldLoginPw' | translate }}</mat-label>
      <input matInput type="password" formControlName="loginPw" #loginPw />
      <mat-error>
-        Password is required
+        {{ 'accounts.errors.requireLoginPw' | translate }}
      </mat-error>
    </mat-form-field>

@ -62,7 +59,7 @@
        formControlName="rememberMe"
        aria-label="Remember Me"
      >
-        아이디 저장
+        {{ 'accounts.rememberMe' | translate }}
      </mat-checkbox>

      <mat-checkbox
@ -71,7 +68,7 @@
        formControlName="autoLogin"
        aria-label="Auto Login"
      >
-        자동 로그인
+        {{ 'accounts.autoLogin' | translate }}
      </mat-checkbox>
    </div>
  </form>
--- a/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts
+++ b/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts
@ -15,6 +15,7 @@ import { ChangePasswordComponent } from './components/change-password.component'
 import { LoginComponent } from './components/login.component';

 import { AccountService } from './services/account.service';
+import { TranslateModule } from '@ngx-translate/core';

 const COMPONENTS = [ChangePasswordComponent, LoginComponent];
 const SERVICES = [AccountService];
@ -31,7 +32,9 @@ const SERVICES = [AccountService];
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
-    MatSelectModule
+    MatSelectModule,
+
+    TranslateModule
  ],
  exports: [...COMPONENTS],
  declarations: [...COMPONENTS]
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
@ -72,8 +72,6 @@
      </div>

      <div class="date">
-        <!-- {{ roomInfo.finalEventDate | dateToStringChatList }}
-        .. -->
        {{ roomInfo.finalEventDate | ucapDate: 'C' }}
      </div>
    </dd>
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
@ -3,11 +3,20 @@
    <div fxLayout="row" class="file-upload-info">
      <!--<mat-icon>image</mat-icon>-->
      <!--파일이미지 svg-->
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
        <path
-          d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">
-        </path>
+          d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
+        ></path>
      </svg>

      <div class="file-upload-name">{{ fileUploadItem.file.name }}</div>
@ -17,13 +26,16 @@
    </div>

    <div fxLayout="row" class="file-upload-progress">
-      <mat-progress-bar mode="determinate" [value]="fileUploadItem.uploadingProgress$ | async">
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileUploadItem.uploadingProgress$ | async"
+      >
      </mat-progress-bar>
    </div>
  </div>

  <div *ngIf="uploadItems" fxLayout="column">
-    <div>여기에 파일을 Drop하시면 업로드 됩니다.</div>
+    <div>{{ 'common.file.dropZoneForUpload' | translate }}</div>
    <div></div>
  </div>
 </div>
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
@ -23,7 +23,7 @@
    <button
      mat-icon-button
      class="ucap-binary-viewer-action"
-      matTooltip="다운로드"
+      matTooltip="{{ 'common.file.download' | translate }}"
      matTooltipPosition="below"
      aria-label=""
      (click)="onClickDownload()"
@ -92,7 +92,7 @@
        </div>
      </div>
      <div class="guide-msg">
-        미리보기를 지원하지 않는 파일입니다.
+        {{ 'common.file.errors.noPreview' | translate }}
      </div>
      <div>
        <button
@ -101,7 +101,7 @@
          aria-label=""
          (click)="onClickDownload()"
        >
-          Download
+          {{ 'common.file.download' | translate }}
        </button>
      </div>
    </div>
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
@ -23,7 +23,7 @@
    <button
      mat-icon-button
      class="ucap-image-viewer-action"
-      matTooltip="이미지 크기 재설정"
+      matTooltip="{{ 'common.messages.zoomReset' | translate }}"
      matTooltipPosition="below"
      aria-label=""
    >
@ -48,7 +48,7 @@
    <button
      mat-icon-button
      class="ucap-image-viewer-action"
-      matTooltip="축소"
+      matTooltip="{{ 'common.messages.zoomOut' | translate }}"
      matTooltipPosition="below"
      aria-label=""
    >
@ -72,7 +72,7 @@
    <button
      mat-icon-button
      class="ucap-image-viewer-action"
-      matTooltip="확대"
+      matTooltip="{{ 'common.messages.zoomIn' | translate }}"
      matTooltipPosition="below"
      aria-label=""
    >
@ -97,7 +97,7 @@
    <button
      mat-icon-button
      class="ucap-image-viewer-action"
-      matTooltip="다운로드"
+      matTooltip="{{ 'common.file.download' | translate }}"
      matTooltipPosition="below"
      aria-label=""
      (click)="onClickDownload()"
@ -124,7 +124,7 @@
      mat-icon-button
      color="warn"
      class="ucap-image-viewer-action btn-close"
-      matTooltip="뷰어닫기"
+      matTooltip="{{ 'common.messages.close' | translate }}"
      (click)="onClickClose()"
    >
      <svg
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
@ -6,7 +6,7 @@
    <button
      mat-icon-button
      class="ucap-image-viewer-action"
-      matTooltip="다운로드"
+      matTooltip="{{ 'common.file.download' | translate }}"
      matTooltipPosition="below"
      aria-label=""
      (click)="onClickDownload()"
@ -33,6 +33,7 @@
      mat-icon-button
      color="warn"
      class="ucap-image-viewer-action btn-close"
+      matTooltip="{{ 'common.messages.close' | translate }}"
      (click)="onClickClose()"
    >
      <svg
@ -125,7 +126,9 @@
        <button
          mat-icon-button
          class="ucap-sound-viewer-action"
-          [matTooltip]="playing ? '멈춤' : '재생'"
+          matTooltip="{{
+            (playing ? 'common.player.stop' : 'common.player.play') | translate
+          }}"
          aria-label=""
          (click)="onClickPlayOrPause()"
        >
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
@ -27,7 +27,7 @@
    <button
      mat-icon-button
      class="ucap-video-viewer-action"
-      matTooltip="다운로드"
+      matTooltip="{{ 'common.file.download' | translate }}"
      matTooltipPosition="below"
      aria-label=""
      (click)="onClickDownload()"
@ -54,7 +54,7 @@
      mat-icon-button
      color="warn"
      class="ucap-image-viewer-action btn-close"
-      matTooltip="뷰어닫기"
+      matTooltip="{{ 'common.messages.close' | translate }}"
      (click)="onClickClose()"
    >
      <svg
@ -130,7 +130,9 @@
        <button
          mat-icon-button
          class="ucap-video-viewer-action"
-          [matTooltip]="playing ? '멈춤' : '재생'"
+          matTooltip="{{
+            (playing ? 'common.player.stop' : 'common.player.play') | translate
+          }}"
          aria-label=""
          (click)="onClickPlayOrPause()"
        >
--- a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
@ -15,7 +15,7 @@
    mat-stroked-button
    (click)="onClickSendTranslationMessage(translationPreviewInfo)"
  >
-    Send
+    {{ 'chat.send' | translate }}
  </button>
  <span class="btn-close">
    <button
@ -32,12 +32,16 @@
 <div>
  <form name="translationForm" [formGroup]="translationForm">
    <mat-form-field>
-      <mat-label>Dest Type</mat-label>
+      <mat-label>{{
+        'common.translations.targetLanguage' | translate
+      }}</mat-label>
      <mat-select
        formControlName="destType"
        (selectionChange)="onChangeSelection($event)"
      >
-        <mat-option value="">번역없음</mat-option>
+        <mat-option value="">{{
+          'common.translations.noTranslation' | translate
+        }}</mat-option>
        <mat-option *ngFor="let dest of translationDestList" [value]="dest.key"
          >{{ dest.text }}
        </mat-option>
@ -47,13 +51,13 @@
      labelPosition="before"
      [checked]="simpleView"
      (change)="onChangToggleSimpleview($event)"
-      >Simple View</mat-slide-toggle
+      >{{ 'common.translations.simpleView' | translate }}</mat-slide-toggle
    >
    <mat-slide-toggle
      labelPosition="before"
      [checked]="preView"
      (change)="onChangTogglePreview($event)"
-      >Preview</mat-slide-toggle
+      >{{ 'common.translations.preview' | translate }}</mat-slide-toggle
    >
  </form>
 </div>
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
@ -10,7 +10,7 @@
  </mat-card-content>
  <mat-card-actions class="button-farm flex-row">
    <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
-      Confirm
+      {{ 'common.messages.confirm' | translate }}
    </button>
  </mat-card-actions>
 </mat-card>
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
@ -1,6 +1,11 @@
 <mat-card class="confirm-card mat-elevation-z">
-  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle class="card-header">
-    <mat-card-title >{{ data.title }}</mat-card-title>
+  <mat-card-header
+    cdkDrag
+    cdkDragRootElement=".cdk-overlay-pane"
+    cdkDragHandle
+    class="card-header"
+  >
+    <mat-card-title>{{ data.title }}</mat-card-title>
    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
  </mat-card-header>
  <mat-card-content>
@ -14,10 +19,10 @@
      (click)="onClickChoice(false)"
      class="mat-primary"
    >
-      No
+      {{ 'common.messages.no' | translate }}
    </button>
    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
-      Yes
+      {{ 'common.messages.yes' | translate }}
    </button>
  </mat-card-actions>
 </mat-card>
--- a/projects/ucap-webmessenger-ui/src/lib/directives/click-debounce.directive.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/directives/click-debounce.directive.ts
@ -32,7 +32,7 @@ export class ClickDebounceDirective implements OnInit, OnDestroy {
  }

  @HostListener('click', ['$event'])
-  clickEvent(event) {
+  clickEvent(event: Event) {
    event.preventDefault();
    event.stopPropagation();
    this.clicks.next(event);
--- a/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts
@ -19,6 +19,7 @@ import {
  AlertDialogResult,
  AlertDialogData
 } from '../dialogs/alert.dialog.component';
+import { TranslateService } from '@ngx-translate/core';

@Directive({
  selector: 'input[ucapFileUploadFor], div[ucapFileUploadFor]'
@ -45,6 +46,7 @@ export class FileUploadForDirective implements AfterViewInit {
    private commonApiService: CommonApiService,
    private elementRef: ElementRef,
    private logger: NGXLogger,
+    private translateService: TranslateService,
    private dialogService: DialogService
  ) {}

@ -126,7 +128,9 @@ export class FileUploadForDirective implements AfterViewInit {
      >(AlertDialogComponent, {
        data: {
          title: 'Alert',
-          html: `지원하지 않는 파일형식입니다.${
+          html: `${this.translateService.instant(
+            'common.file.errors.notSupporedType'
+          )} ${
            checkExt.reject.length > 0
              ? '<br/>(' + checkExt.reject.join(',') + ')'
              : ''
--- a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
@ -1,66 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { StringUtil } from '../utils/string.util';
-import moment from 'moment';
-
-@Pipe({
-  name: 'dateToStringChatList'
-})
-export class DateToStringForChatRoomListPipe implements PipeTransform {
-  transform(value: any): string {
-    const curDate = new Date();
-    const yesterDate = new Date(curDate.getTime() - 1 * 24 * 60 * 60 * 1000);
-    let date: Date;
-    if (typeof value === 'string') {
-      date = moment(value.toString()).toDate();
-    } else if (value instanceof Date) {
-      date = value;
-    } else {
-      return value;
-    }
-
-    if (
-      curDate.getFullYear() === date.getFullYear() &&
-      curDate.getMonth() === date.getMonth() &&
-      curDate.getDate() === date.getDate()
-    ) {
-      // 당일
-      return StringUtil.dateFormat(date, 'a/p HH:mm');
-    } else if (
-      yesterDate.getFullYear() === date.getFullYear() &&
-      yesterDate.getMonth() === date.getMonth() &&
-      yesterDate.getDate() === date.getDate()
-    ) {
-      // 어제
-      return '어제';
-    } else {
-      return StringUtil.dateFormat(date, 'MM.dd');
-    }
-  }
-}
-
-@Pipe({
-  name: 'dateToStringFormat'
-})
-export class DateToStringFormatPipe implements PipeTransform {
-  transform(value: any, format?: string): string {
-    const date = moment(value.toString()).toDate();
-
-    if (!!format) {
-      return StringUtil.dateFormat(date, format);
-    } else {
-      return StringUtil.dateFormat(date, 'YYYY.MM.DD');
-    }
-  }
-}
-
-@Pipe({
-  name: 'dateDistanceToDay'
-})
-export class DateDistanceToDatePipe implements PipeTransform {
-  transform(value: any, distanceDay?: number): Date {
-    distanceDay = distanceDay || 0;
-    const date: Date = moment(value.toString()).toDate();
-    date.setDate(date.getDate() + distanceDay);
-    return date;
-  }
-}
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@ -27,6 +27,8 @@ import {

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

+import { TranslateModule } from '@ngx-translate/core';
+
 import { FileUploadQueueComponent } from './components/file-upload-queue.component';
 import { FloatActionButtonComponent } from './components/float-action-button.component';
 import { FileViewerComponent } from './components/file-viewer.component';
@ -62,11 +64,6 @@ import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';

 import { BytesPipe } from './pipes/bytes.pipe';
 import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe';
-import {
-  DateToStringForChatRoomListPipe,
-  DateToStringFormatPipe,
-  DateDistanceToDatePipe
-} from './pipes/dates.pipe';
 import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';
 import { LinkyPipe } from './pipes/linky.pipe';
 import { TranslatePipe } from './pipes/translate.pipe';
@ -109,9 +106,6 @@ const PIPES = [
  BytesPipe,
  LinefeedToHtmlPipe,
  HtmlToLinefeedPipe,
-  DateToStringForChatRoomListPipe,
-  DateToStringFormatPipe,
-  DateDistanceToDatePipe,
  SecondsToMinutesPipe,
  LinkyPipe,
  TranslatePipe,
@ -152,7 +146,8 @@ const SERVICES = [
    MatDatepickerModule,
    MatSelectModule,
    MatSlideToggleModule,
-    DragDropModule
+    DragDropModule,
+    TranslateModule
  ],
  exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES],
  declarations: [...COMPONENTS, ...DIALOGS, ...DIRECTIVES, ...PIPES],