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';
            this.changeDetectorRef.detectChanges();
            return;
          case 'sm':
          case 'md':
            this.layoutMode = 'mid';
            this.changeDetectorRef.detectChanges();
            return;
          case 'gt-md':
            this.layoutMode = 'max';
            this.changeDetectorRef.detectChanges();
            return;
          default:
            break;
        }
      }
    });
}

대화 이슈 
  리스트
    백 스페이스로 입력된 검색어 모두 삭제 시 기존 리스트를 출력 하지 않음
  대화
    폼 컴포넌트 입력창 간헐적으로 입력이 안됨 
      -> 한글일 때 키보드 연속으로 누르고 있을 때 화면에 나타나지 않다가 key up 할때 한번에 입력
    번역
      간략보기 기능 미구현
    대화방 멤버
      me 표시 없음
      프레즌스 표현안됨
      컨텍스트 메뉴 (미구현)
        프로필, 대화, 쪽지 
    삭제, 회수
      모바일, 피시 간 연동 안됨, 상대방 대화에서 회수되지 않음(방이동 이나 새로고침)

  다이얼로그
    일반 대화방 생성
      -> 인원 선택 X 대화방 생성 버튼 활성화
    타이머 대화방 상동
    1:n 대화방 생성 후 '대화방 이름 설정 안내 팝업' 노출되지 않음
      대화 x 
      type(pin):"J"
      senderSeq(pin):"770074"

    타이머 설정 안내 팝업 노출되지 않음
    

<form name="chatSettingForm" [formGroup]="chatSettingForm" novalidate>
  <div class="ucap-chat-room-setting-body">
    <div class="setting-content-box roomName">
      <span class="tit-setting-content">{{
        'chat:dialog.roomName' | ucapI18n
      }}</span>
      <mat-form-field
        hintLabel="{{ 'common:useSpecialCharactor' | ucapI18n }}"
        style="display: block; margin-bottom: 10px;"
        color="accent"
      >
        <input
          matInput
          #input
          maxlength="20"
          formControlName="roomName"
          (keyup)="onKeyupName()"
        />
        <mat-hint align="end"
          ><em>{{ input.value?.length || 0 }}</em
          >/20</mat-hint
        >
      </mat-form-field>
    </div>
    <div class="setting-content-box roomName-target">
      <span class="tit-setting-content">{{
        'chat:dialog.roomNameChangeTarget' | ucapI18n
      }}</span>
      <mat-radio-group
        aria-label="Select an option"
        value="me"
        formControlName="changeTarget"
      >
        <mat-radio-button value="me">{{
          'chat:dialog.me' | ucapI18n
        }}</mat-radio-button>
        <mat-radio-button value="all">{{
          'chat:dialog.all' | ucapI18n
        }}</mat-radio-button>
      </mat-radio-group>
      <!-- <div class="radio-hint-copy">
        ※ 설정시간이 초과되면 대화내용이 삭제됩니다.
      </div> -->
    </div>
    <div
      class="setting-content-box timer"
      [style.display]="!!roomInfo?.isTimeRoom ? 'block' : 'none'"
    >
      <span class="tit-setting-content">{{
        'chat:dialog.settingTimer' | ucapI18n
      }}</span>
      <mat-form-field class="form-select-timer" color="accent">
        <mat-select formControlName="timerInterval">
          <mat-option
            *ngFor="let timer of timerArray"
            [value]="timer.value"
          >
            {{ timer.text }}
          </mat-option>
        </mat-select>
        <mat-hint>{{
          'chat:dialog:settingTimerHint' | ucapI18n
        }}</mat-hint>
      </mat-form-field>
    </div>
  </div>
</form>