원하는 아이콘을 가져다가 사용하면 된다.
Include the Jdenticon library somewhere on your page. Jdenticon is served from jsDelivr in this example.
<script src="https://cdn.jsdelivr.net/npm/jdenticon@3.0.1" async>
</script>
Add an empty inline svg element where you want to render an identicon. Use the data-jdenticon-value attribute to specify that an identicon should be rendered. user127 below is just an example of a value.
<svg data-jdenticon-value="user127" width="80" height="80">
Fallback text or image for browsers not supporting inline svg.
</svg>
이미지를 랜덤 생성해준다. 랜덤 사용자 이미지에 활용에 유용! 😮😮 user127 값에 따라 이미지가 바뀐다. 이 값을 변경하려면 th:data-jdenticon-value="${}" 를 똑같이 주고 여기 안에 스프링 표현식을 사용할 수 있다. 스프링이 가진 기능!
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<svg data-jdenticon-value="user127" th:data-jdenticon-value="${#authentication.name}"
width="24" height="24" class="rounded border bg-light"></svg>
</a>
${#authentication.name} 스프링이 갖고 있는 특별한 표현식. 스프링 시큐리티랑 타임리프를 같이 쓸때는 authentication 객체에 접근할 수 있다. authentication 객체는 인증된 사용자 정보를 참조한다. 이것을 통해 name에 접근할 수 있다. 그럼 name에 따라 각기 다른 아바타가 생성되게 된다.
<div class="alert alert-warning" role="alert"
th:if="${account != null && !account.emailVerified}">
스터디올레 가입을 완료하려면 <a href="#" th:href="@{/check-email}"
class="alert-link">계정 인증 이메일을 확인</a>하세요.
</div>
th:if가 타임리프에 있는 if 조건문, if="${account != null && !account.emailVerified}"를 만족하면 해당 alert 창을 보여준다. 조건을 만족하는지를 보려면 이 페이지에 account 정보를 넘겨줘야 한다. account 정보를 넘겨주는 방법은 참조하는 프로퍼티를 보면 알겠지만 우리가 만든 account 이다. 현재 login한 사용자 정보 authentication를 통해서 현재 사용자 정보를 알아내야 한다. (다음 시간에 이어서 ..)
출처 : 인프런 백기선님의 스프링과 JPA 기반 웹 애플리케이션 개발
https://jdenticon.com/
https://fontawesome.com/v4.7.0/icons/