번역
  컴포넌트
  데이터
    번역 토글 
    번역 국가
    오리지날 메세지
    번역 메세지
    대화방 번호
    번역 프로그레스
    로그인 사용자 seq
    디바이스 타입
    토큰
  
  절차
    form 컴포넌트 번역 버튼 클릭
    번역 컴포넌트 활성화
    번역 메세지 입력 -> 번역 클릭
    전송 처리
      성공
        미리보기 옵션
        일반 번역
        대용량 번역

        소켓 메세지 전송
      실패
        번역 실패 메세지
        번역 프로그레스 초기화

  대화방 id 변경 시 번역 데이터 초기화


// const destLocale = this.destLocale;
    // const original = message;
    // const roomSeq = this.roomInfoSubject.value.roomSeq;
    // if (!!this.isTranslationProcess) {
    //   return;
    // }
    // this.isTranslationProcess = true;
    // this.commonApiService
    //   .translationSave({
    //     userSeq: this.loginResSubject.value.userSeq,
    //     deviceType: this.environmentsInfo.deviceType,
    //     token: this.loginResSubject.value.tokenString,
    //     roomSeq,
    //     original,
    //     srcLocale: '',
    //     destLocale
    //   } as TranslationSaveRequest)
    //   .pipe(
    //     take(1),
    //     map((res) => {
    //       if (res.statusCode === StatusCode.Success) {
    //         let sentMessage = '';
    //         let eventType = EventType.Translation;
    //         let previewObject: TranslationEventJson | MassTranslationEventJson;
    //         if (res.translationSeq > 0) {
    //           // Mass Text Translation
    //           previewObject = res;
    //           sentMessage = res.returnJson;
    //           eventType = EventType.MassTranslation;
    //         } else {
    //           // Normal Text Translation
    //           previewObject = {
    //             locale: destLocale,
    //             original,
    //             translation: res.translation,
    //             stickername: '',
    //             stickerfile: !!this.selectedSticker
    //               ? this.selectedSticker.index
    //               : ''
    //           };
    //           sentMessage = JSON.stringify(previewObject);
    //           eventType = EventType.Translation;
    //         }
    //         if (!!this.translationPreview) {
    //           // preview
    //           this.translationPreviewInfo = {
    //             previewInfo: res,
    //             translationType: eventType
    //           };
    //           this.changeDetectorRef.detectChanges();
    //         } else {
    //           // direct send
    //           this.store.dispatch(
    //             EventStore.send({
    //               senderSeq: this.loginResSubject.value.userSeq,
    //               req: {
    //                 roomSeq,
    //                 eventType,
    //                 sentMessage
    //               }
    //             })
    //           );
    //           if (!!this.translationPreviewInfo) {
    //             this.translationPreviewInfo = null;
    //           }
    //         }
    //         if (!!this.selectedSticker) {
    //           this.isShowStickerSelector = false;
    //           this.setStickerHistory(this.selectedSticker);
    //           this.selectedSticker = null;
    //         }
    //       } else {
    //         this.isTranslationProcess = false;
    //         this.dialogService.open<
    //           AlertDialogComponent,
    //           AlertDialogData,
    //           AlertDialogResult
    //         >(AlertDialogComponent, {
    //           panelClass: 'miniSize-dialog',
    //           data: {
    //             title: '',
    //             message: this.translateService.instant(
    //               'chat.error.translateServerError'
    //             )
    //           }
    //         });
    //         this.logger.error('res', res);
    //       }
    //     }),
    //     catchError((error) => {
    //       this.isTranslationProcess = false;
    //       this.dialogService.open<
    //         AlertDialogComponent,
    //         AlertDialogData,
    //         AlertDialogResult
    //       >(AlertDialogComponent, {
    //         panelClass: 'miniSize-dialog',
    //         data: {
    //           title: '',
    //           message: this.translateService.instant(
    //             'chat.error.translateServerError'
    //           )
    //         }
    //       });
    //       return of(this.logger.error('error', error));
    //     })
    //   )
    //   .subscribe(() => {
    //     this.isTranslationProcess = false;
    //   });


    http://13.124.88.127:8011/Common/TranslationSave.aspx


destLocale: "en"
original: "안녕"
registrationDate: ""
returnJson: "
  {"StatusCode":"200","ErrorMessage":"","EventTransSeq":"0","RoomID":"5109369","RegDate":"",
  "Locale":"en","SrcLocale":"ko","DestLocale":"en","Original":"안녕","Translation":"Hi"}"
roomId: "5109369"
srcLocale: "ko"
statusCode: "200"
translation: "Hi"
translationSeq: 0

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import {
  Component,
  OnInit,
  ChangeDetectorRef,
  Input,
  OnDestroy,
  ChangeDetectionStrategy,
  ViewChild
} from '@angular/core';

import { MediaObserver } from '@angular/flex-layout';

import { MatCheckboxChange, MatCheckbox } from '@angular/material/checkbox';

import { select, Store } from '@ngrx/store';

import { SortOrder } from '@ucap/core';
import { Company } from '@ucap/api-external';
import { LoginResponse } from '@ucap/protocol-authentication';
import { DeptInfo, UserInfoSS } from '@ucap/protocol-query';
import { UserInfo } from '@ucap/protocol-sync';

import { LoginSelector } from '@ucap/ng-store-authentication';
import {
  DepartmentSelector,
  CompanySelector
} from '@ucap/ng-store-organization';

import { SearchData } from '@app/ucap/organization/models/search-data';
import { ProfileListComponent as AppProfileListComponent } from '@app/ucap/organization/components/profile-list.component';

@Component({
  selector: 'app-sections-organization-member-list',
  templateUrl: './member-list.component.html',
  styleUrls: ['./member-list.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MemberListComponent implements OnInit, OnDestroy {
  @Input()
  set searchData(searchData: SearchData) {
    this._searchData = searchData;

    this.selectedDeptInfo = undefined;
    this.selectedCompanyInfo = undefined;

    if (!!searchData && !searchData.bySearch && !!searchData.deptSeq) {
      this.setDeptInfo(searchData.deptSeq);
    } else {
      this.setCompanyInfo(searchData.companyCode);
    }
  }

  @ViewChild('profileList', { static: false })
  profileList: AppProfileListComponent;

  @ViewChild('checkboxAll', { static: false })
  checkboxAll: MatCheckbox;

  // tslint:disable-next-line: variable-name
  _searchData: SearchData;
  loginRes: LoginResponse;
  selectedDeptInfo: DeptInfo;
  selectedCompanyInfo: Company;
  searchedProfileLength: number;
  selectedUserInfos: UserInfoSS[] = [];
  isExpanded = false;

  sortOrderForProfileList: SortOrder = {
    property: 'name',
    ascending: undefined
  };

  layoutMode: 'min' | 'mid' | 'max';

  private ngOnDestroySubject: Subject<void> = new Subject();

  constructor(
    private store: Store<any>,
    public mediaObserver: MediaObserver,
    private changeDetectorRef: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.store
      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
      .subscribe((loginRes) => {
        this.loginRes = loginRes;
      });

    this.mediaObserver
      .asObservable()
      .pipe(takeUntil(this.ngOnDestroySubject))
      .subscribe((changes) => {
        if (!changes || 0 === changes.length) {
          return;
        }
        for (const change of changes) {
          switch (change.mqAlias) {
            case 'lt-sm':
              this.layoutMode = 'min';
              return;
            case 'sm':
            case 'md':
              this.layoutMode = 'mid';
              return;
            case 'gt-md':
              this.layoutMode = 'max';
              return;
            default:
              break;
          }
        }
      });
  }

  ngOnDestroy(): void {
    if (!!this.ngOnDestroySubject) {
      this.ngOnDestroySubject.next();
      this.ngOnDestroySubject.complete();
    }
  }

  onChangedSearch(data: { deptSeq: string; searchWord: string }) {
    this._searchData = {
      bySearch: true,
      ...data
    };
    this.setDeptInfo(data.deptSeq);
  }

  onSearchedProfileList(userInfos: UserInfoSS[]) {
    if (!!this.checkboxAll) {
      this.checkboxAll.checked = false;
    }
    this.searchedProfileLength = !!userInfos ? userInfos.length : 0;
  }

  onChangedCheckProfileList(
    datas: { checked: boolean; userInfo: UserInfoSS }[]
  ) {
    if (!datas || 0 === datas.length) {
      return;
    }

    const pushs: UserInfoSS[] = [];
    const pops: UserInfoSS[] = [];

    datas.forEach((d) => {
      const i = this.selectedUserInfos.findIndex(
        (u) => u.seq === d.userInfo.seq
      );
      if (d.checked) {
        if (-1 === i) {
          pushs.push(d.userInfo);
        }
      } else {
        if (-1 < i) {
          pops.push(d.userInfo);
        }
      }
    });

    if (0 < pushs.length) {
      this.selectedUserInfos = [...this.selectedUserInfos, ...pushs];
    }

    if (0 < pops.length) {
      this.selectedUserInfos = this.selectedUserInfos.filter(
        (u) => -1 === pops.findIndex((p) => p.seq === u.seq)
      );
    }
  }

  onRemovedProfileSelection(userInfo: UserInfo) {
    const i = this.selectedUserInfos.findIndex(
      (u) => u.seq === String(userInfo.seq)
    );

    if (-1 < i) {
      this.selectedUserInfos = this.selectedUserInfos.filter(
        (u) => u.seq !== String(userInfo.seq)
      );
    }
  }

  removableForSelection = (userInfo: UserInfo) => {
    return true;
  };

  colorForSelection = (userInfo: UserInfo) => {
    return 'accent';
  };

  onClickToggleSort() {
    this.sortOrderForProfileList = {
      ...this.sortOrderForProfileList,
      ascending:
        undefined === this.sortOrderForProfileList.ascending
          ? true
          : true === this.sortOrderForProfileList.ascending
          ? false
          : undefined
    };
  }

  onChangeSelectAll(event: MatCheckboxChange) {
    if (event.checked) {
      this.profileList.checkAll();
    } else {
      this.profileList.uncheckAll();
    }
  }

  getContainerLayout(type: 'max' | 'mid'): string {
    switch (type) {
      case 'max':
        return 'row';
      case 'mid':
        return 'column';
      default:
        break;
    }
  }

  onAfterExpandForSelection() {
    this.isExpanded = true;
  }

  onAfterCollapseForSelection() {
    this.isExpanded = false;
  }

  private setCompanyInfo(companyCode: string) {
    const destroySubject: Subject<void> = new Subject();
    this.store
      .pipe(takeUntil(destroySubject), select(CompanySelector.companyList))
      .subscribe((companyList) => {
        if (!companyList) {
          return;
        }
        this.selectedCompanyInfo = companyList.find(
          (c) => c.companyCode === companyCode
        );
        this.changeDetectorRef.markForCheck();
        destroySubject.next();
        destroySubject.complete();
      });
  }

  private setDeptInfo(seq: string) {
    const destroySubject: Subject<void> = new Subject();
    this.store
      .pipe(
        takeUntil(destroySubject),
        select(DepartmentSelector.departmentInfoList)
      )
      .subscribe((departmentInfoList) => {
        if (!departmentInfoList) {
          return;
        }
        this.selectedDeptInfo = departmentInfoList.find(
          (d) => String(d.seq) === seq
        );
        this.changeDetectorRef.markForCheck();
        destroySubject.next();
        destroySubject.complete();
      });
  }
}


/** 전체 체크여부 */
  allCheckUser() {
    if (this.allChecked) {
      this.userInfos.forEach((userInfo) =>
        this.onChangeCheckUser({ checked: true, userInfo })
      );
    } else {
      this.userInfos.forEach((userInfo) =>
        this.onChangeCheckUser({ checked: false, userInfo })
      );
    }
  }

  checkAll() {
    if (!this.userInfos || 0 === this.userInfos.length) {
      return;
    }

    const checked: CheckedInfo[] = [];
    this.userInfos.forEach((u) => {
      checked.push({
        checked: true,
        userInfo: u
      });
    });
    this.changedCheck.emit(checked);
  }

  uncheckAll() {
    if (!this.userInfos || 0 === this.userInfos.length) {
      return;
    }

    const unchecked: CheckedInfo[] = [];
    this.userInfos.forEach((u) => {
      unchecked.push({
        checked: false,
        userInfo: u
      });
    });
    this.changedCheck.emit(unchecked);
  }


onChangedCheckProfileList(
    datas: { checked: boolean; userInfo: UserInfoSS }[]
  ) {
    if (!datas || 0 === datas.length) {
      return;
    }

    const pushs: UserInfoSS[] = [];
    const pops: UserInfoSS[] = [];

    datas.forEach((d) => {
      const i = this.selectedUserInfos.findIndex(
        (u) => u.seq === d.userInfo.seq
      );
      if (d.checked) {
        if (-1 === i) {
          pushs.push(d.userInfo);
        }
      } else {
        if (-1 < i) {
          pops.push(d.userInfo);
        }
      }
    });

    if (0 < pushs.length) {
      this.selectedUserInfos = [...this.selectedUserInfos, ...pushs];
    }

    if (0 < pops.length) {
      this.selectedUserInfos = this.selectedUserInfos.filter(
        (u) => -1 === pops.findIndex((p) => p.seq === u.seq)
      );
    }
  }


<ucap-organization-profile-selection-01
  [userInfoList]="selectedUserInfos"
  [removableFor]="removableForSelection"
  [colorFor]="colorForSelection"
  (removed)="onRemovedProfileSelection($event)"
>
</ucap-organization-profile-selection-01>