본문 바로가기
스프링과 JPA 기반 웹 어플리케이션 개발/1부 (개발환경, 회원가입, 로그인, 계정설정)

14. 첫 페이지 보완

by Backchus 2020. 4. 20.

이번에 할 일

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

NPM으로 프론트엔드 라이브러리 서치(/static에서)

  • npm install font-awesome
  • npm install jdenticon

폰트어썸 아이콘 사용하기

  • <i class="fa fa-XXXX"></i>

Jdenticon으로 아바타 생성하기

  • <svg width="80", height="80" data-jdenticon-value=user127"></svg>

타임리프 조건문

  • th:if

부트스트랩 경고창

<div class="alert alert-waring" role="alert" th:if="${account != null && !account.emailVerified}">
    스터디올레 가입을 완료하려면 
    <a href="#" th:href="@{/check-email}" class="alert-link">계정 인증 이메일을 확인</a>
    하세요.
</div>

 

fragments.html 수정

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head th:fragment="head">
    <meta charset="UTF-8">
    <title>StudyOlle</title>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"/>     
    <link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css">    // font-awesome 추가
    <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>                 // jdenticon 추가

    
    <style>
        .container {
            max-width: 100%;
        }
    </style>
</head>

<nav th:fragment="main-nav" class="navbar navbar-expand-sm navbar-dark bg-dark">
       
       // 기존 코드 ...........

        <ul class="navbar-nav justify-content-end">
            <li class="nav-item" sec:authorize="!isAuthenticated()">
                <a class="nav-link" th:href="@{/login}">로그인</a>
            </li>
            <li class="nav-item" sec:authorize="!isAuthenticated()">
                <a class="nav-link" th:href="@{/sign-up}">가입</a>
            </li>
            <li class="nav-item" sec:authorize="isAuthenticated()">
                <a class="nav-link" th:href="@{/notifications}">
                    <i class="fa fa-bell-o" aria-hidden="true"></i>  // 아이콘 추가
                </a>
            </li>
            <li class="nav-item" sec:authorize="isAuthenticated()">
                <a class="nav-link btn btn-outline-primary" th:href="@{/notifications}">
                    <i class="fa fa-plus" aria-hidden="true"></i>     // 아이콘 추가
                    스터디 개설
                </a>
            </li>
            <li class="nav-item dropdown" sec:authorize="isAuthenticated()">
                <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>
                <div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="userDropdown">
                    <h6 class="dropdown-header">
                        <span sec:authentication="name">Username</span>
                    </h6>
                    <a class="dropdown-item" th:href="@{'/profile/' + ${#authentication.name}}">프로필</a>
                    <a class="dropdown-item">스터디</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" th:href="@{'/settings/profile'}">설정</a>
                    <form class="form-inline my-2 my-lg-0" th:action="@{/logout}" method="post">
                        <button class="dropdown-item" type="submit">로그아웃</button>
                    </form>
                </div>
            </li>
        </ul>
    </div>
</nav>

<footer th:fragment="footer">
    <div class="row justify-content-center">
        <img class="mb-2" src="/images/logo_long_kr.jpg" alt="" width="100">
        <small class="d-block mb-3 text-muted">ⓒ2020</small>
    </div>
</footer>
</html>

 

index.html에 부트스트랩 경고창 추가

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<!--head-->
<head th:replace="fragments.html::head"></head>

<body class="bg-light">
<!--네비게이션 바-->
<div th:replace="fragments.html::main-nav"></div>

// 부트스트랩 경고창 추가
<div class="alert alert-waring" role="alert" th:if="${account != null && !account.emailVerified}">
    스터디올레 가입을 완료하려면
    <a href="#" th:href="@{/check-email}" class="alert-link">계정 인증 이메일을 확인</a>
    하세요.
</div>

<div class="container">
    <div class="py-5 text-center">
        <h2>스터디올래</h2>
    </div>
    <div class="row justify-content-center">

    </div>
    <!-- footer -->
    <div th:replace="fragments.html::footer"></div>
</div>

<script type="application/javascript" th:fragment="form-validation">
    (function () {

    }())
</script>
</body>
</html>

 

 

참고: https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-JPA-%EC%9B%B9%EC%95%B1#

 

스프링과 JPA 기반 웹 애플리케이션 개발 - 인프런

이 강좌에서 여러분은 실제로 운영 중인 서비스를 스프링, JPA 그리고 타임리프를 비롯한 여러 자바 기반의 여러 오픈 소스 기술을 사용하여 웹 애플리케이션을 개발하는 과정을 학습할 수 있습니다. 이 강좌를 충분히 학습한다면 여러분 만의 웹 서비스를 만들거나 취직에 도움이 될만한 포트폴리오를 만들 수 있을 겁니다. 활용 웹 개발 프레임워크 및 라이브러리 Java Spring Spring Boot Spring Data JPA Thymeleaf 온라인 강의 스

www.inflearn.com

 

'스프링과 JPA 기반 웹 어플리케이션 개발 > 1부 (개발환경, 회원가입, 로그인, 계정설정)' 카테고리의 다른 글

16. 확인 가입 이메일 재전송 기능  (0) 2020.04.20
15. 현재 인증된 사용자 정보 참조  (0) 2020.04.20
13. 뷰 중복 코드 제거  (0) 2020.04.19
12. 프론트엔드 라이브러리 설정  (0) 2020.04.19
11. 회원 가입: 메인 네비게이션 메뉴 변경  (0) 2020.04.19

관련글

티스토리툴바