북마크 컴포넌트
  구성요소
    profile-detail-item
      사용자 프로필, 마지막 대화, 마지막 대화 날짜, 읽지않은 배지개수
  이벤트
    해당 북마크 사용자 클릭 시 해당 대화방으로 이동
    프로필 클릭
  데이터 
    북마크 리스트
  질문
    북마크 사용자 최대 몇개 출력
      페이징 있는지 확인
    북마크 사용자 없을 시 화면


알림봇 컴포넌트
  구성요소
    알림봇 아이콘, 알림봇 타입, 알림 날짜, 알림 제목, 알림 내용
  이벤트
    더보기 클릭 시 ? 알림 대화방 이동, 팝업창 출력 ?
    슬라이드 버튼 클릭

배너 컴포넌트 
  구성요소
    이미지
  이벤트
    

<div class="contents-main">
  <div class="subtitle">Welcome to M-Messenger</div>
  <div class="mainProfile">
    <mat-card class="example-card">
      <mat-card-header>
        <div
          mat-card-avatar
          class="profileImage"
          style="background-size: cover;"
        >
          <img
            src="https://material.angular.io/assets/img/examples/shiba2.jpg"
            style="width: 50px; height: auto;"
          />
        </div>
        <mat-card-title>홍길동 <span>선임</span></mat-card-title>
        <mat-card-subtitle>(Hong Gil Dong)</mat-card-subtitle>
        <mat-card-subtitle><span>O</span>온라인</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <div class="intro">
          <mat-form-field class="example-full-width">
            <mat-label>이름 부서명, 전화번호, 이메일</mat-label>
            <input
              matInput
              placeholder="이름 부서명, 전화번호, 이메일"
              value=""
            />
            <mat-icon matSuffix>search</mat-icon>
          </mat-form-field>
        </div>
        <ul>
          <li class="company"><label>회사</label>LGCNS</li>
          <li class="dept"><label>부서</label>아키텍쳐 솔루션</li>
          <li class="email"><label>이메일</label>lgcns@gmail.com</li>
          <li class="office">
            <label>사무실</label>+82) 041-111-2222
          </li>
          <li class="mobile"><label>모바일</label>031-2222-4444</li>
        </ul>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button class="info">info</button>
        <button mat-button class="theme">theme1</button>
        <button mat-button class="theme">theme2</button>
        <button mat-button class="theme checked">theme3</button>
      </mat-card-actions>
    </mat-card>
  </div>
  <div class="info">
    <div class="bookmark">
      <div class="subtitle">Bookmark</div>
      <div class="chatlist">
        <!-- loop > component > 대화 리스트 공용 -->
        <div>
          <div class="profileImage">
            <img
              src="https://material.angular.io/assets/img/examples/shiba2.jpg"
              style="width: 50px; height: 50px;"
            />
          </div>
          <div class="info">
            <div class="roomName">UCAP 프로젝트방</div>
            <div class="lastMessage">
              대화방의 마지막대화내용이 들어갈껍니다.
            </div>
          </div>
          <div class="subInfo">
            <div class="lastDate" matBadge="4">2020.04.05</div>
          </div>
        </div>
        <!--// loop > component > 대화 리스트 공용 -->
        <div>
          <div class="profileImage">
            <img
              src="https://material.angular.io/assets/img/examples/shiba2.jpg"
              style="width: 50px; height: 50px;"
            />
          </div>
          <div class="info">
            <div class="roomName">UCAP 프로젝트방</div>
            <div class="lastMessage">
              대화방의 마지막대화내용이 들어갈껍니다.
            </div>
          </div>
          <div class="subInfo">
            <div class="lastDate">2020.04.05</div>
          </div>
        </div>
      </div>
    </div>
    <div class="allim">
      <div class="subtitle">알림봇</div>
      <div class="allimList">
        <mat-card class="allim-card">
          <mat-card-header>
            <div
              mat-card-avatar
              class="profileImage"
              style="background-size: cover;"
            >
              <img
                src="https://material.angular.io/assets/img/examples/shiba2.jpg"
                style="width: 50px; height: auto;"
              />
            </div>
            <mat-card-title>화상회의</mat-card-title>
            <mat-card-subtitle>2020.04.05</mat-card-subtitle>
          </mat-card-header>
          <mat-card-content>
            <div class="title">화상회의 개설</div>
            <div class="contents">화상회의가 개설되었습니다.</div>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button class="more">더보기</button>
          </mat-card-actions>
        </mat-card>
        <mat-card class="allim-card">
          <mat-card-header>
            <div
              mat-card-avatar
              class="profileImage"
              style="background-size: cover;"
            >
              <img
                src="https://material.angular.io/assets/img/examples/shiba2.jpg"
                style="width: 50px; height: auto;"
              />
            </div>
            <mat-card-title>화상회의</mat-card-title>
            <mat-card-subtitle>2020.04.05</mat-card-subtitle>
          </mat-card-header>
          <mat-card-content>
            <div class="title">화상회의 개설</div>
            <div class="contents">화상회의가 개설되었습니다.</div>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button class="more">더보기</button>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>
    <div class="banner">배너</div>
  </div>
</div>