This commit is contained in:
Park Byung Eun 2020-04-29 16:42:35 +09:00
parent 24c8100399
commit 15b3bd00f4

View File

@ -0,0 +1,173 @@
북마크 컴포넌트
구성요소
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>