첫 페이지 보완

할일

• 네비바에 fontawesome으로 아이콘 추가
• 이메일 인증을 마치지 않은 사용자에게 메시지 보여주기
• identicon 으로 프로필 기본 이미지 생성

NPM으로 프론트엔드 라이브러리 설치

• npm install font-awesome
• npm install jdenticon

폰트 어썸 아이콘 사용하기

원하는 아이콘을 가져다가 사용하면 된다.

Jdenticon으로 아바타 생성하기

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/