16. 첫 페이지 보완
이번에 할 일
> 네비게이션 바에 Fontawesome으로 아이콘 추가
> 이메일 인증을 마치지 않은 사용자에게 메시지 보여주기
> jdenticon으로 프로필 기본 이미지 생성하기
NPM으로 프론트엔드 라이브러리 설치
> npm install font-awesome
> npm install jdenticon
Fontawesome(폰트어썸) 아이콘 사용하기
> <i class="fa fa-XXXX"></i>
Jdenticon으로 아바타 생성하기
> <svg width="80" height="80" data-jdenticon-value="user127"></svg>
타임리프 조건문
> th:if
부트스트랩 경고창
<div class = "alert alert-warning" role = "alert" th:if="${account != null && !account.emailVerified}">
닷 스터디 가입을 완료하려면 <a href="#" th:href="@{/check-email}" class="alert-link"> 계정 인증 이메일을 확인 </a>하세요.
</div>
font-awesome으로 아이콘 넣기
fragments.html
<head th:fragment="head">
<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css"/>
<!-- jquery, bootstrap 헤더에 추가 -->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- 링크는 되는데 , 자바 스크립트를 추가할 때 '/>' 이렇게 닫으면 안됨 -->
<script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
</head>
<!-- font-awesome에서 제공하는 플러스 아이콘 -->
<a class="nav-link btn btn-outline-primary" th:href="@{/notification}">
<i class="fa fa-plus" aria-hidden="true"></i> 스터디 개설
</a>
<!-- font-awesome에서 제공하는 벨 아이콘-->
<a class="nav-link" th:href="@{/notification}">
<i class="fa fa-bell-o"></i>
</a>
주의사항
자바 스크립트를 추가할 때 /> 이렇게 닫지말고 > </script> 이렇게 닫아줘야 한다.
아이콘 추가 결과 화면
Jdenticon을 사용하여 프로필 이미지 자동으로 추가하는 방법
<!-- authentication.name에 따라 각기 다른 이미지 생성 -->
<svg data-jdenticon-value="user127" th:data-jdenticon-value="${#authentication.name}"
width="24" height="24" class="rounded border bg-light">
</svg>
- data-jdenticon-value에 따라 아이콘이 바뀌기 때문에 authentication.name으로 value값 이름마다 다르게 설정
- bootstrap을 사용하여 class="rounded border bg-light" 이미지 틀 규격 설정
그럼 아래와 같이 프로필 이미지이 생성된다.
부트스트랩을 사용하여 경고창 띄우기
index.html
<div class = "alert alert-warning" role = "alert"
th:if="${account != null && !account.emailVerified}">
닷 스터디 가입을 완료하려면 <a href="#" th:href="@{/check-email}" class="alert-link">
계정 인증 이메일을 확인 </a>하세요.
</div>해당 경고창은 account가 null이거나 email 인증을 안받았을 경우에만 적용
현재 로그인한 사용자 정보 (account)를 알아오는 방법은 다음 시간에 계속...
참고
'Dot Programming > Spring Clone' 카테고리의 다른 글
| [스프링 웹앱 프로젝트 #17] 가입 확인 이메일 재전송 (0) | 2020.12.08 |
|---|---|
| [스프링 웹앱 프로젝트 #16] 현재 인증된 사용자 정보 참조 (0) | 2020.12.07 |
| [스프링 웹앱 프로젝트 #14] 뷰 중복 코드 제거 (0) | 2020.11.30 |
| [스프링 웹앱 프로젝트 #13] 프론트엔드 라이브러리 설정 (0) | 2020.11.27 |
| [스프링 웹앱 프로젝트 #12] 회원 가입 메인 네비게이션 메뉴 (0) | 2020.11.27 |
