173 lines
5.8 KiB
Plaintext
173 lines
5.8 KiB
Plaintext
북마크 컴포넌트
|
|
구성요소
|
|
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> |