Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -50,7 +50,7 @@
       <div class="room-info">
         <h3 class="room-name">
           <ng-container *ngIf="!roomInfo || !userInfoList">
-            대화방명을 가져오고 있습니다..
+            {{ 'chat.getRoomNameInProgress' | translate }}
           </ng-container>
           <ng-container *ngIf="!!roomInfo && !!userInfoList">
             <ng-container [ngSwitch]="roomInfo.roomType">
@@ -90,7 +90,7 @@
         >
           <span class="bg-accent-dark"
             >{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span
-          >비밀 대화방입니다.
+          >{{ 'chat.isRoomTypeSecret' | translate }}
         </div>
         <!-- Timer Room Info -->
       </div>
@@ -104,13 +104,13 @@
           <mat-icon
             class="amber-fg"
             *ngIf="roomInfo.receiveAlarm"
-            matTooltip="알림 켜짐"
+            matTooltip="{{ 'chat.notificationIsOn' | translate }}"
             >notifications_active</mat-icon
           >
           <mat-icon
             class="secondary-text"
             *ngIf="!roomInfo.receiveAlarm"
-            matTooltip="알림 꺼짐"
+            matTooltip="{{ 'chat.notificationIsOff' | translate }}"
             >notifications_off</mat-icon
           >
         </button>

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -42,7 +42,25 @@
     }
   },
   "profile": {
+    "my": "My profile",
     "open": "Open profile",
+    "changeProfileImage": "Change image of profile",
+    "favorit": "Favorit",
+    "addBuddy": "Add a buddy",
+    "removeBuddy": "Remove a buddy",
+    "fieldCompany": "Company",
+    "fieldResponsibilities": "Responsibilities",
+    "fieldWorkplace": "Workplace",
+    "fieldJob": "Job",
+    "fieldCustomerInfo": "CustomerInfo",
+    "fieldEmail": "Email",
+    "fieldOfficePhoneNumber": "Office phone",
+    "fieldHandphone": "Cellphone",
+    "fieldMyTalk": "MyTalk",
+    "fieldOneToOneTalk": "1:1 Talk",
+    "fieldSMS": "SMS",
+    "fieldVideoConference": "Video conference",
+    "fieldMessage": "Message",
     "errors": {
       "label": "Profile error",
       "failToChangeProfileImage": "Failed to change profile image."
@@ -52,7 +70,44 @@
     "label": "Settings",
     "typeGenernal": "Genernal",
     "typeNotification": "Notification",
-    "typeChat": "Chat"
+    "typeChat": "Chat",
+    "chat": {
+      "label": "Chat",
+      "fontFamily": "Font family",
+      "fontSize": "Font size",
+      "file": "File transfer",
+      "downloadPath": "Download path"
+    },
+    "genernal": {
+      "theme": "Theme",
+      "application": "Application",
+      "autoStartOnBoot": "Auto start on OS boot time",
+      "autoHideWindow": "Hide window on excuted",
+      "login": "Login",
+      "autoLogin": "Auto login",
+      "language": "Language",
+      "hrLanguage": "HR language",
+      "timezone": "Timezone"
+    },
+    "notification": {
+      "chat": "Chat",
+      "receival": "Get notified",
+      "receive": "Receive",
+      "notReceive": "Not receive",
+      "method": "Notification method",
+      "methodTypeSound": "Sound",
+      "methodTypeAlert": "Alert",
+      "methodTypeSoundAndAlert": "Sound + Alert",
+      "settingOfAlertWindow": "Alert",
+      "mobile": "Mobile",
+      "receiveForMobile": "Mobile notifications",
+      "receiveForMobileTypeAlways": "Always get mobile notifications",
+      "descriptionReceiveForMobileTypeAlways": "Receive mobile notifications only when PC version is absent on release",
+      "message": "Message",
+      "receiveForMessage": "Message notifications",
+      "receiveForMessageTypePopup": "Alert view when receiving a message",
+      "descriptionReceiveForMobileTypePopup": "Only get notifications on release"
+    }
   },
   "presence": {
     "online": "Online",
@@ -127,6 +182,10 @@
     "ejectFromRoom": "Eject from room",
     "confirmEjectFromRoom": "Do you want to eject member[{{targetMember}}] from room?",
     "badgeDescriptionForUnread": "There is an unconfirmed message.",
+    "getRoomNameInProgress": "Getting chat room name.",
+    "isRoomTypeSecret": "This room is secret type",
+    "notificationIsOn": "Notification is on",
+    "notificationIsOff": "Notification is off",
     "event": {
       "inviteToRoomWith": "{{owner}} invited {{inviter}}.",
       "exitFromRoomWith": "{{exitor}} has left.",
@@ -173,10 +232,13 @@
   },
   "message": {
     "label": "Message",
+    "fieldTitle": "Title",
+    "fieldReceiver": "Receiver",
     "new": "New message",
     "remove": "Remove message",
     "modify": "Modify message",
     "sendTo": "Send message",
+    "sendReservation": "Send reservation",
     "placeholderForSearch": "search for name, title, content",
     "messageTypeAll": "All",
     "messageTypeReceiving": "Receiving",
@@ -208,7 +270,8 @@
     "errors": {
       "label": "Message error",
       "failToSending": "The message failed to send.",
-      "failToModify": "The message failed to modify."
+      "failToModify": "The message failed to modify.",
+      "minTimeReservation": "It can be set only 30 minutes after the current time."
     }
   },
   "notice": {
@@ -248,7 +311,12 @@
       "hourFrom": "hour",
       "minute": "minute",
       "second": "second",
-      "persons": "person(s)"
+      "persons": "person(s)",
+      "hourLaterWith": "(An) {{hour}} hour(s) later",
+      "tomorrowMorning": "Tomorrow morning",
+      "tomorrowAfternoon": "Tomorrow afternoon",
+      "weekLaterWith": "(A) {{week}} week(s) later",
+      "monthLaterWith": "(A) {{month}} month(s) later"
     },
     "file": {
       "name": "Name of file",

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -42,7 +42,25 @@
     }
   },
   "profile": {
+    "my": "내 프로필",
     "open": "프로필 보기",
+    "changeProfileImage": "프로필 이미지 변경",
+    "favorit": "즐겨찾기",
+    "addBuddy": "동료추가",
+    "removeBuddy": "동료삭제",
+    "fieldCompany": "회사",
+    "fieldResponsibilities": "담당업무",
+    "fieldWorkplace": "근무지",
+    "fieldJob": "직무",
+    "fieldCustomerInfo": "거래처",
+    "fieldEmail": "이메일",
+    "fieldOfficePhoneNumber": "사무실",
+    "fieldHandphone": "핸드폰",
+    "fieldMyTalk": "MyTalk",
+    "fieldOneToOneTalk": "1:1 대화",
+    "fieldSMS": "SMS",
+    "fieldVideoConference": "화상회의",
+    "fieldMessage": "쪽지",
     "errors": {
       "label": "프로필 에러",
       "failToChangeProfileImage": "프로필 이미지 변경에 실패 하였습니다."
@@ -52,7 +70,44 @@
     "label": "설정",
     "typeGenernal": "일반",
     "typeNotification": "알림",
-    "typeChat": "대화"
+    "typeChat": "대화",
+    "chat": {
+      "label": "대화",
+      "fontFamily": "글꼴",
+      "fontSize": "글 크기",
+      "file": "파일 전송",
+      "downloadPath": "다운로드 폴더"
+    },
+    "genernal": {
+      "theme": "테마",
+      "application": "응용 프로그램",
+      "autoStartOnBoot": "Windows 실행 시 자동 실행",
+      "autoHideWindow": "실행 시 창 숨기기",
+      "login": "로그인",
+      "autoLogin": "실행 시 자동 로그인",
+      "language": "언어",
+      "hrLanguage": "인사 정보 언어",
+      "timezone": "시간대"
+    },
+    "notification": {
+      "chat": "메시지",
+      "receival": "알림 받기",
+      "receive": "알림 받음",
+      "notReceive": "알림 받지 않음",
+      "method": "알림 방법",
+      "methodTypeSound": "소리",
+      "methodTypeAlert": "알림창",
+      "methodTypeSoundAndAlert": "소리 + 알림창",
+      "settingOfAlertWindow": "알림창 설정",
+      "mobile": "모바일",
+      "receiveForMobile": "모바일 알림",
+      "receiveForMobileTypeAlways": "항상 모바일 알림을 받음",
+      "descriptionReceiveForMobileTypeAlways": "해제 시 PC버전이 부재중인 경우에만 모바일 알림을 받음",
+      "message": "쪽지",
+      "receiveForMessage": "쪽지 알림",
+      "receiveForMessageTypePopup": "쪽지 수신 시 팝업보기",
+      "descriptionReceiveForMobileTypePopup": "해제 시 쪽지 알림만 받음"
+    }
   },
   "presence": {
     "online": "온라인",
@@ -67,8 +122,8 @@
     "nameFavorit": "즐겨찾기",
     "nameMyDept": "소속부서",
     "nameDefault": "기본",
-    "favorite": "즐겨찾기 등록",
+    "favorit": "즐겨찾기 등록",
-    "unfavorite": "즐겨찾기 해제",
+    "unfavorit": "즐겨찾기 해제",
     "removeBuddyFromGroup": "그룹에서 삭제",
     "copyBuddyToGroup": "대화 상대 복사",
     "moveBuddyToGroup": "대화 상대 이동",
@@ -127,6 +182,10 @@
     "ejectFromRoom": "강퇴",
     "confirmEjectFromRoom": "{{targetMember}} 님을 대화방에서 퇴장 시키겠습니까?",
     "badgeDescriptionForUnread": "확인하지 않은 메시지가 있습니다.",
+    "getRoomNameInProgress": "대화방명을 가져오고 있습니다.",
+    "isRoomTypeSecret": "비밀 대화방입니다.",
+    "notificationIsOn": "알림 켜짐",
+    "notificationIsOff": "알림 꺼짐",
     "event": {
       "inviteToRoomWith": "{{owner}}이 {{inviter}}을 초대했습니다.",
       "exitFromRoomWith": "{{exitor}}님이 퇴장하셨습니다.",
@@ -173,10 +232,13 @@
   },
   "message": {
     "label": "쪽지",
+    "fieldTitle": "제목",
+    "fieldReceiver": "수신자",
     "new": "새로운 쪽지",
     "remove": "쪽지 삭제",
     "modify": "쪽지 수정",
     "sendTo": "쪽지 보내기",
+    "sendReservation": "쪽지 예약 보내기",
     "placeholderForSearch": "이름, 제목, 내용 검색",
     "messageTypeAll": "전체",
     "messageTypeReceiving": "수신",
@@ -208,7 +270,8 @@
     "errors": {
       "label": "쪽지 에러",
       "failToSending": "쪽지를 전송에 실패 하였습니다.",
-      "failToModify": "쪽지 수정에 실패 하였습니다."
+      "failToModify": "쪽지 수정에 실패 하였습니다.",
+      "minTimeReservation": "현재 시각으로부터 30분 이후로만 설정 가능합니다."
     }
   },
   "notice": {
@@ -248,7 +311,12 @@
       "hourFrom": "시간",
       "minute": "분",
       "second": "초",
-      "persons": "명"
+      "persons": "명",
+      "hourLaterWith": "{{hour}}시간 뒤",
+      "tomorrowMorning": "내일 아침",
+      "tomorrowAfternoon": "내일 오후",
+      "weekLaterWith": "{{week}}주일 뒤",
+      "monthLaterWith": "{{month}}달 뒤"
     },
     "file": {
       "name": "파일 이름",

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

@@ -5,7 +5,7 @@
         'chat.event.inviteToRoomWith'
           | translate
             : {
-                owner: message.sentMessageJson.owner,
+                owner: getI18nForSir(message.sentMessageJson.owner),
                 inviter: getI18nForSir(message.sentMessageJson.inviter)
               }
       }}

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -55,7 +55,9 @@
 
           <ng-container [ngSwitch]="node.nodeType">
             <span *ngSwitchCase="NodeType.Profile">
-              <span class="title-name ellipsis">내 프로필</span>
+              <span class="title-name ellipsis">{{
+                'profile.my' | translate
+              }}</span>
             </span>
             <span *ngSwitchCase="NodeType.Favorit">
               <span class="title-name ellipsis">{{
@@ -81,7 +83,8 @@
           </ng-container>
 
           <span class="text-accent-color number">
-            ({{ node.countOfChildren }}명)</span
+            ({{ node.countOfChildren
+            }}{{ 'common.units.persons' | translate }})</span
           >
 
           <mat-checkbox

projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html

@@ -1,7 +1,11 @@
 <mat-card class="mat-elevation-z0 ucap-message-write">
   <form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
     <mat-form-field class="message-title">
-      <input matInput formControlName="title" placeholder="제목" />
+      <input
+        matInput
+        formControlName="title"
+        placeholder="{{ 'message.fieldTitle' | translate }}"
+      />
     </mat-form-field>
 
     <mat-card-content class="message-write-body">
@@ -43,7 +47,7 @@
           </mat-chip>
           <input
             [matChipInputFor]="chipList"
-            placeholder="수신자"
+            placeholder="{{ 'message.fieldReceiver' | translate }}"
             readonly
             (click)="onClickReceiverList()"
           />
@@ -80,12 +84,13 @@
           (click)="onClickCancel()"
           class="mat-primary"
         >
-          취소
+          {{ 'common.messages.cancel' | translate }}
         </button>
 
         <mat-menu #appMenu="matMenu" yPosition="above">
           <button mat-menu-item (click)="onClickSendSchedule()">
-            <span class="mdi mdi-send-clock"></span><span>예약 보내기</span>
+            <span class="mdi mdi-send-clock"></span
+            ><span>{{ 'message.sendReservation' | translate }}</span>
           </button>
         </mat-menu>
 
@@ -100,7 +105,7 @@
             0 === contentLength ||
             1000 < contentLength
           "
-          >보내기</ucap-split-button
+          >{{ 'message.sendTo' | translate }}</ucap-split-button
         >
         <button
           *ngIf="isModify"
@@ -115,7 +120,7 @@
           "
           class="mat-primary"
         >
-          예약 보내기
+          {{ 'message.sendReservation' | translate }}
         </button>
       </div>
     </mat-card-actions>

projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.html

@@ -1,7 +1,7 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header>
     <mat-card-title>
-      예약 발송
+      {{ 'message.sendReservation' | translate }}
     </mat-card-title>
   </mat-card-header>
   <mat-card-content>
@@ -46,7 +46,7 @@
                   class="preset-button"
                   (click)="onClickPresetHour(1)"
                 >
-                  1시간 뒤
+                  {{ 'common.units.hourLaterWith' | translate: { hour: 1 } }}
                 </button>
               </mat-list-item>
               <mat-list-item role="listitem">
@@ -55,7 +55,7 @@
                   class="preset-button"
                   (click)="onClickPresetHour(2)"
                 >
-                  2시간 뒤
+                  {{ 'common.units.hourLaterWith' | translate: { hour: 2 } }}
                 </button>
               </mat-list-item>
               <mat-list-item role="listitem">
@@ -64,7 +64,7 @@
                   class="preset-button"
                   (click)="onClickPresetTommorowMorning()"
                 >
-                  내일 아침
+                  {{ 'common.units.tomorrowMorning' | translate }}
                 </button>
               </mat-list-item>
               <mat-list-item role="listitem">
@@ -73,7 +73,7 @@
                   class="preset-button"
                   (click)="onClickPresetTommorowAfternoon()"
                 >
-                  내일 오후
+                  {{ 'common.units.tomorrowAfternoon' | translate }}
                 </button>
               </mat-list-item>
               <mat-list-item role="listitem">
@@ -82,7 +82,7 @@
                   class="preset-button"
                   (click)="onClickPresetDay(7)"
                 >
-                  일주일 뒤
+                  {{ 'common.units.weekLaterWith' | translate: { week: 1 } }}
                 </button>
               </mat-list-item>
               <mat-list-item role="listitem">
@@ -91,7 +91,7 @@
                   class="preset-button"
                   (click)="onClickPresetDay(30)"
                 >
-                  한달 뒤
+                  {{ 'common.units.monthLaterWith' | translate: { month: 2 } }}
                 </button>
               </mat-list-item>
             </mat-list>
@@ -104,7 +104,7 @@
     <div class="actions-container">
       <div class="actions-message">
         <span *ngIf="dateIsToEarly">
-          현재 시각으로부터 30분 이후로만 설정 가능합니다.
+          {{ 'message.errors.minTimeReservation' | translate }}
         </span>
       </div>
       <div class="actions-spacer"></div>
@@ -114,7 +114,7 @@
           (click)="onClickCancel()"
           class="mat-primary"
         >
-          취소
+          {{ 'common.messages.cancel' | translate }}
         </button>
         <button
           mat-stroked-button
@@ -122,7 +122,7 @@
           (click)="onClickSend()"
           class="mat-primary"
         >
-          예약 발송
+          {{ 'message.sendReservation' | translate }}
         </button>
       </div>
     </div>

projects/ucap-webmessenger-ui-message/src/lib/ucap-ui-message.module.ts

@@ -31,6 +31,7 @@ import { ListItemComponent } from './components/list-item.component';
 import { WriteComponent } from './components/write.component';
 
 import { ScheduleSendDialogComponent } from './dialogs/schedule-send.dialog.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 const COMPONENTS = [ListItemComponent, WriteComponent];
 const DIALOGS = [ScheduleSendDialogComponent];
@@ -57,10 +58,11 @@ const SERVICES = [];
     MatInputModule,
     MatListModule,
     MatMomentDateModule,
-
     MatMenuModule,
     MatButtonToggleModule,
 
+    TranslateModule,
+
     PerfectScrollbarModule,
 
     UCapUiModule

projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html

@@ -14,7 +14,7 @@
         mat-mini-fab
         class="mat-elevation-z6 btn-upload-profile-image"
         *ngIf="isMe && editableProfileImage"
-        matTooltip="프로필 이미지 변경"
+        matTooltip="{{ 'profile.changeProfileImage' | translate }}"
         matTooltipPosition="above"
         [disabled]="
           profileImageFileUploadItem &&
@@ -79,7 +79,7 @@
           stroke-linejoin="round"
           [ngClass]="[isFavorit ? 'on' : '']"
           (click)="onToggleFavorit()"
-          matTooltip="즐겨찾기"
+          matTooltip="{{ 'profile.favorite' | translate }}"
         >
           <polygon
             points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
@@ -100,7 +100,7 @@
           class="on"
           *ngIf="!isBuddy"
           (click)="onClickAddBuddy()"
-          matTooltip="동료추가"
+          matTooltip="{{ 'profile.addBuddy' | translate }}"
         >
           <!-- not buddy -->
           <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
@@ -122,7 +122,7 @@
           class="on"
           *ngIf="getShowBuddyDelBtn()"
           (click)="onClickDelBuddy()"
-          matTooltip="동료삭제"
+          matTooltip="{{ 'profile.removeBuddy' | translate }}"
         >
           <!-- is buddy -->
           <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
@@ -157,32 +157,36 @@
       </li>
     -->
       <li class="company">
-        <dt class="division">회사</dt>
+        <dt class="division">{{ 'profile.fieldCompany' | translate }}</dt>
         <dd>{{ userInfo.companyName | ucapStringEmptycheck }}</dd>
       </li>
       <li>
-        <dt class="division">담당업무</dt>
+        <dt class="division">
+          {{ 'profile.fieldResponsibilities' | translate }}
+        </dt>
         <dd>{{ userInfo.responsibilities | ucapStringEmptycheck }}</dd>
       </li>
       <li>
-        <dt>근무지</dt>
+        <dt>{{ 'profile.fieldworkplace' | translate }}</dt>
         <dd>{{ userInfo.workplace | ucapStringEmptycheck }}</dd>
       </li>
       <li>
-        <dt class="division">직무</dt>
+        <dt class="division">{{ 'profile.fieldJob' | translate }}</dt>
         <dd>{{ userInfo.job | ucapStringEmptycheck }}</dd>
       </li>
       <li>
-        <dt>거래처</dt>
+        <dt>{{ 'profile.fieldCustomerInfo' | translate }}</dt>
         <dd>{{ userInfo.customerInfo | ucapStringEmptycheck }}</dd>
       </li>
       <li>
-        <dt class="division">이메일</dt>
+        <dt class="division">{{ 'profile.fieldEmail' | translate }}</dt>
         <dd>{{ userInfo.email | ucapStringEmptycheck }}</dd>
       </li>
 
       <li>
-        <dt class="division">사무실</dt>
+        <dt class="division">
+          {{ 'profile.fieldOfficePhoneNumber' | translate }}
+        </dt>
         <dd>
           {{
             userInfo.lineNumber
@@ -194,7 +198,7 @@
           mat-mini-fab
           class="mat-elevation-z userInfo-call"
           *ngIf="!isMe"
-          matTooltip="전화"
+          matTooltip="{{ 'profile.fieldOfficePhoneNumber' | translate }}"
           matTooltipPosition="above"
           [disabled]="getDisabledBtn('LINE')"
           (click)="onClickCall('LINE')"
@@ -217,7 +221,7 @@
         </button>
       </li>
       <li>
-        <dt class="division">핸드폰</dt>
+        <dt class="division">{{ 'profile.fieldHandphone' | translate }}</dt>
         <dd>
           {{
             userInfo.hpNumber | ucapStringFormatterPhone | ucapStringEmptycheck
@@ -227,7 +231,7 @@
           mat-mini-fab
           class="mat-elevation-z userInfo-call"
           *ngIf="!isMe"
-          matTooltip="모바일"
+          matTooltip="{{ 'profile.fieldHandphone' | translate }}"
           matTooltipPosition="above"
           [disabled]="getDisabledBtn('MOBILE')"
           (click)="onClickCall('MOBILE')"
@@ -257,7 +261,10 @@
           <button
             mat-mini-fab
             class="mat-elevation-z bg-accent-darkest"
-            [matTooltip]="isMe ? 'MyTalk' : '1:1 대화'"
+            matTooltip="{{
+              (isMe ? 'profile.fieldMyTalk' : 'profile.fieldOneToOneTalk')
+                | translate
+            }}"
             matTooltipPosition="above"
             (click)="onClickOpenChat()"
           >
@@ -294,8 +301,12 @@
               />
             </svg>
           </button>
-          <span *ngIf="!isMe" class="button-text">대화</span>
+          <span *ngIf="!isMe" class="button-text">{{
-          <span *ngIf="isMe" class="button-text">myTalk</span>
+            'profile.fieldOneToOneTalk' | translate
+          }}</span>
+          <span *ngIf="isMe" class="button-text">{{
+            'profile.fieldMyTalk' | translate
+          }}</span>
         </div>
 
         <div class="button-text-item" *ngIf="!isMe">
@@ -303,7 +314,7 @@
             mat-mini-fab
             class="mat-elevation-z"
             *ngIf="!isMe"
-            matTooltip="SMS"
+            matTooltip="{{ 'profile.fieldSMS' | translate }}"
             matTooltipPosition="above"
             [disabled]="getDisabledBtn('SMS')"
             (click)="onClickSMS()"
@@ -314,7 +325,7 @@
               />
             </svg>
           </button>
-          <span class="button-text">SMS</span>
+          <span class="button-text">{{ 'profile.fieldSMS' | translate }}</span>
         </div>
 
         <div class="button-text-item" *ngIf="!isMe">
@@ -322,7 +333,7 @@
             mat-mini-fab
             class="mat-elevation-z bg-accent-darkest"
             *ngIf="!isMe"
-            matTooltip="화상회의"
+            matTooltip="{{ 'profile.fieldVideoConference' | translate }}"
             matTooltipPosition="above"
             (click)="onClickVideoConference()"
           >
@@ -332,7 +343,9 @@
               />
             </svg>
           </button>
-          <span class="button-text">화상</span>
+          <span class="button-text">{{
+            'profile.fieldVideoConference' | translate
+          }}</span>
         </div>
 
         <div class="button-text-item" *ngIf="!isMe">
@@ -340,7 +353,7 @@
             mat-mini-fab
             class="mat-elevation-z bg-accent-darkest"
             *ngIf="!isMe"
-            matTooltip="쪽지"
+            matTooltip="{{ 'profile.fieldMessage' | translate }}"
             matTooltipPosition="above"
             (click)="onClickMessage()"
           >
@@ -348,7 +361,9 @@
               <path d="M0 0l20 10L0 20V0zm0 8v4l10-2L0 8z" />
             </svg>
           </button>
-          <span class="button-text">쪽지</span>
+          <span class="button-text">{{
+            'profile.fieldMessage' | translate
+          }}</span>
         </div>
       </div>
     </mat-card-actions>

projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts

@@ -19,6 +19,7 @@ import { ListItemComponent } from './components/list-item.component';
 import { UserListItemComponent } from './components/user-list-item.component';
 import { ProfileComponent } from './components/profile.component';
 import { MyProfileWidgetComponent } from './components/my-profile-widget.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 const COMPONENTS = [
   ListItemComponent,
@@ -44,6 +45,8 @@ const SERVICES = [];
     MatTooltipModule,
     MatProgressSpinnerModule,
 
+    TranslateModule,
+
     UCapUiModule
   ],
   exports: [...COMPONENTS],

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -60,7 +60,8 @@
             class="num bg-accent-light"
             *ngIf="roomInfo.roomType === RoomType.Multi"
           >
-            {{ roomInfo.joinUserCount }}명
+            {{ roomInfo.joinUserCount }}
+            {{ 'common.units.persons' | translate }}
           </div>
           <div *ngIf="!checkable && !roomInfo.receiveAlarm">
             <mat-icon>notifications_off</mat-icon>

projects/ucap-webmessenger-ui-room/src/lib/ucap-ui-room.module.ts

@@ -8,9 +8,14 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { ListItemComponent } from './components/list-item.component';
-import { MatBadgeModule, MatCheckboxModule, MatRippleModule } from '@angular/material';
+import {
+  MatBadgeModule,
+  MatCheckboxModule,
+  MatRippleModule
+} from '@angular/material';
 
 import { UCapUiModule } from '@ucap-webmessenger/ui';
+import { TranslateModule } from '@ngx-translate/core';
 
 const COMPONENTS = [ListItemComponent];
 const DIRECTIVES = [];
@@ -29,6 +34,8 @@ const SERVICES = [];
     MatBadgeModule,
     MatCheckboxModule,
 
+    TranslateModule,
+
     UCapUiModule
   ],
   exports: [...COMPONENTS, ...DIRECTIVES],

projects/ucap-webmessenger-ui-settings/src/lib/components/chat.component.html

@@ -1,8 +1,10 @@
 <div>
   <mat-list>
-    <h1 mat-subheader>대화</h1>
+    <h1 mat-subheader>{{ 'settings.chat.label' | translate }}</h1>
     <mat-list-item>
-      <span class="item-title">글꼴</span>
+      <span class="item-title">{{
+        'settings.chat.fontFamily' | translate
+      }}</span>
       <span class="item-input">
         <mat-form-field>
           <mat-select
@@ -17,7 +19,7 @@
       </span>
     </mat-list-item>
     <mat-list-item>
-      <span class="item-title">크기</span>
+      <span class="item-title">{{ 'settings.chat.fontSize' | translate }}</span>
       <span class="item-input">
         <mat-form-field>
           <mat-select
@@ -37,12 +39,14 @@
 
     <mat-divider></mat-divider>
 
-    <h1 mat-subheader *ngIf="_isNodeWebkit">파일 전송</h1>
+    <h1 mat-subheader *ngIf="_isNodeWebkit">
+      {{ 'settings.chat.file' | translate }}
+    </h1>
     <mat-list-item *ngIf="_isNodeWebkit">
       <mat-form-field fxFlexFill>
         <input
           matInput
-          placeholder="다운로드 폴더"
+          placeholder="{{ 'settings.chat.downloadPath' | translate }}"
           [value]="setting.downloadPath"
           readonly
           (click)="onClickDownloadPath()"

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html

@@ -1,6 +1,6 @@
 <div>
   <mat-list>
-    <h1 mat-subheader>테마</h1>
+    <h1 mat-subheader>{{ 'settings.genernal.theme' | translate }}</h1>
     <!--<ul class="theme-list">
       <li
         class="theme-box default"
@@ -37,19 +37,19 @@
 
     <mat-divider></mat-divider>
 
-    <h1 mat-subheader>응용 프로그램</h1>
+    <h1 mat-subheader>{{ 'settings.genernal.application' | translate }}</h1>
     <mat-list-item>
       <mat-checkbox
         [checked]="setting.autoLaunch"
         (change)="onChangeAutoStart($event)"
-        >Windows 실행 시 자동 실행</mat-checkbox
+        >{{ 'settings.genernal.autoStartOnBoot' | translate }}</mat-checkbox
       >
     </mat-list-item>
     <mat-list-item>
       <mat-checkbox
         [checked]="setting.startupHideWindow"
         (change)="onChangeStartupHideWindow($event)"
-        >실행 시 창 숨기기</mat-checkbox
+        >{{ 'settings.genernal.autoHideWindow' | translate }}</mat-checkbox
       >
     </mat-list-item>
     <!-- <mat-list-item>
@@ -62,18 +62,18 @@
 
     <mat-divider></mat-divider>
 
-    <h1 mat-subheader>로그인</h1>
+    <h1 mat-subheader>{{ 'settings.genernal.login' | translate }}</h1>
     <mat-list-item>
       <mat-checkbox
         [checked]="setting.autoLogin"
         (change)="onChangeAutoLogin($event)"
-        >실행 시 자동 로그인</mat-checkbox
+        >{{ 'settings.genernal.autoLogin' | translate }}</mat-checkbox
       >
     </mat-list-item>
 
     <mat-divider></mat-divider>
 
-    <h1 mat-subheader>언어</h1>
+    <h1 mat-subheader>{{ 'settings.genernal.language' | translate }}</h1>
     <mat-list-item>
       <mat-form-field fxFlexFill>
         <mat-select
@@ -92,7 +92,7 @@
 
     <mat-divider></mat-divider>
 
-    <h1 mat-subheader>인사 정보 언어</h1>
+    <h1 mat-subheader>{{ 'settings.genernal.hrLanguage' | translate }}</h1>
     <mat-list-item>
       <mat-form-field fxFlexFill>
         <mat-select

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.html

@@ -1,8 +1,10 @@
 <div>
   <mat-list>
-    <h1 mat-subheader>메시지</h1>
+    <h1 mat-subheader>{{ 'settings.notification.chat' | translate }}</h1>
     <mat-list-item>
-      <span class="item-title">알림 받기</span>
+      <span class="item-title">{{
+        'settings.notification.receival' | translate
+      }}</span>
     </mat-list-item>
     <mat-list-item>
       <span class="item-input" fullWidth>
@@ -11,27 +13,30 @@
           [value]="setting.use ? 'true' : 'false'"
           (change)="onChangeUse($event)"
         >
-          <mat-radio-button value="true">알림 받음</mat-radio-button>
+          <mat-radio-button value="true">{{
-          <mat-radio-button value="false">알림 받지 않음</mat-radio-button>
+            'settings.notification.receive' | translate
+          }}</mat-radio-button>
+          <mat-radio-button value="false">{{
+            'settings.notification.notReceive' | translate
+          }}</mat-radio-button>
         </mat-radio-group>
       </span>
     </mat-list-item>
     <mat-list-item>
-      <span class="item-title">알림 방법</span>
+      <span class="item-title">{{
+        'settings.notification.method' | translate
+      }}</span>
       <span class="item-input">
         <mat-form-field>
           <mat-select
             [value]="setting.method"
             (selectionChange)="onSelectionChangeMethod($event)"
           >
-            <mat-option [value]="NotificationMethod.Sound">
+            <mat-option
-              소리
+              *ngFor="let notificationMethod of notificationMethodList"
-            </mat-option>
+              [value]="notificationMethod.type"
-            <mat-option [value]="NotificationMethod.Alert">
+            >
-              알림창
+              {{ notificationMethod.name }}
-            </mat-option>
-            <mat-option [value]="NotificationMethod.SoundAndAlert">
-              소리 + 알림창
             </mat-option>
           </mat-select>
         </mat-form-field>
@@ -39,7 +44,9 @@
     </mat-list-item>
 
     <mat-list-item>
-      <span class="item-title">알림창 설정</span>
+      <span class="item-title">{{
+        'settings.notification.settingOfAlertWindow' | translate
+      }}</span>
       <span class="item-input">
         <mat-form-field>
           <mat-select
@@ -57,34 +64,48 @@
 
     <mat-divider></mat-divider>
 
-    <h1 mat-subheader>모바일</h1>
+    <h1 mat-subheader>{{ 'settings.notification.mobile' | translate }}</h1>
     <mat-list-item>
-      <span class="item-title">모바일 알림</span>
+      <span class="item-title">{{
+        'settings.notification.receiveForMobile' | translate
+      }}</span>
     </mat-list-item>
     <mat-list-item>
       <span class="item-input" fullWidth>
         <mat-checkbox
           [checked]="setting.receiveForMobile"
           (change)="onChangeReceiveForMobile($event)"
-          >항상 모바일 알림을 받음</mat-checkbox
+          >{{
+            'settings.notification.receiveForMobileTypeAlways' | translate
+          }}</mat-checkbox
         >
-        <br />(해제 시 PC버전이 부재중인 경우에만 모바일 알림을 받음)
+        <br />({{
+          'settings.notification.descriptionReceiveForMobileTypeAlways'
+            | translate
+        }})
       </span>
     </mat-list-item>
 
     <mat-divider></mat-divider>
-    <h1 mat-subheader>쪽지</h1>
+    <h1 mat-subheader>{{ 'settings.notification.message' | translate }}</h1>
     <mat-list-item>
-      <span class="item-title">쪽지 알림</span>
+      <span class="item-title">{{
+        'settings.notification.receiveForMessage' | translate
+      }}</span>
     </mat-list-item>
     <mat-list-item>
       <span class="item-input" fullWidth>
         <mat-checkbox
           [checked]="setting.receiveForMessage"
           (change)="onChangeReceiveForMessage($event)"
-          >쪽지 수신 시 팝업보기</mat-checkbox
+          >{{
+            'settings.notification.receiveForMessageTypePopup' | translate
+          }}</mat-checkbox
         >
-        <br />(해제 시 쪽지 알림만 받음)
+        <br />({{
+          'settings.notification.descriptionReceiveForMobileTypePopup'
+            | translate
+        }})
       </span>
     </mat-list-item>
   </mat-list>

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.ts

@@ -4,7 +4,8 @@ import {
   ChangeDetectorRef,
   Input,
   Output,
-  EventEmitter
+  EventEmitter,
+  OnDestroy
 } from '@angular/core';
 import { NotificationSetting } from '../models/settings';
 import {
@@ -14,28 +15,48 @@ import {
 } from '@angular/material';
 import { NGXLogger } from 'ngx-logger';
 import { NotificationMethod } from '@ucap-webmessenger/core';
+import { TranslateService } from '@ngx-translate/core';
+import { Subscription, merge } from 'rxjs';
 
 @Component({
   selector: 'ucap-settings-notification',
   templateUrl: './notification.component.html',
   styleUrls: ['./notification.component.scss']
 })
-export class NotificationComponent implements OnInit {
+export class NotificationComponent implements OnInit, OnDestroy {
   @Input()
   setting: NotificationSetting;
 
   @Output()
   changed = new EventEmitter<NotificationSetting>();
 
+  notificationMethodList: { type: NotificationMethod; name: string }[];
+  langChangeSubscription: Subscription;
+
   NotificationMethod = NotificationMethod;
 
   constructor(
+    private translateService: TranslateService,
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
   ) {}
 
   ngOnInit() {
     this.logger.debug('setting', this.setting);
+
+    this.langChangeSubscription = merge(
+      this.translateService.onLangChange,
+      this.translateService.onDefaultLangChange,
+      this.translateService.onTranslationChange
+    ).subscribe(() => {
+      this.setNotificationMethodList();
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.langChangeSubscription) {
+      this.langChangeSubscription.unsubscribe();
+    }
   }
 
   onChangeUse(event: MatRadioChange) {
@@ -62,4 +83,27 @@ export class NotificationComponent implements OnInit {
     this.setting = setting;
     this.changed.emit(this.setting);
   }
+
+  private setNotificationMethodList() {
+    const langs = this.translateService.instant([
+      'settings.notification.methodTypeSound',
+      'settings.notification.methodTypeAlert',
+      'settings.notification.methodTypeSoundAndAlert'
+    ]);
+
+    this.notificationMethodList = [
+      {
+        type: NotificationMethod.Sound,
+        name: langs['settings.notification.methodTypeSound']
+      },
+      {
+        type: NotificationMethod.Alert,
+        name: langs['settings.notification.methodTypeAlert']
+      },
+      {
+        type: NotificationMethod.SoundAndAlert,
+        name: langs['settings.notification.methodTypeSoundAndAlert']
+      }
+    ];
+  }
 }

projects/ucap-webmessenger-ui-settings/src/lib/ucap-ui-settings.module.ts

@@ -20,6 +20,7 @@ import { NotificationComponent } from './components/notification.component';
 import { PermissionComponent } from './components/permission.component';
 import { PrivacyComponent } from './components/privacy.component';
 import { ChatComponent } from './components/chat.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 const COMPONENTS = [
   CallComponent,
@@ -44,7 +45,9 @@ const SERVICES = [];
     MatSelectModule,
     MatSlideToggleModule,
     MatTabsModule,
-    MatRadioModule
+    MatRadioModule,
+
+    TranslateModule
   ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS]