뷰페이지를 Thymeleaf로 작성했으며, dependencies에는 미리 등록을 해놓았다.
implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6:3.1.1.RELEASE'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'뷰페이지는 MPA방식으로 만들었고, thymeLeaf에 th:block을 사용했다.
Header
<nav th:fragment="headerFragment">
<div id="menu1">
<ul>
<li>
<a th:href="@{/}">HOME</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
<li>
<a href="#">MY CAFE</a>
<ul>
<li><a href="#">즐겨찾는 카페</a></li>
<li><a href="#">이웃 카페</a></li>
<li><a href="#">중고 장터</a></li>
</ul>
</li>
<li>
<a href="#">BOARD</a>
<ul>
<li><a href="#">NOTICE</a></li>
<li><a href="#">FREEBOARD</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</li>
</ul>
</div>
</nav>CSS
header {
border:30px;
width: 1000px;
margin: auto;
}
#menu1 {
width: 1000px;
height: 50px;
background: skyblue ;
color: black;
line-height: 50px;
margin: auto;
text-align: center;
text-decoration:none;
}
#menu1 > ul > li {
float: left;
width: 250px;
position: relative;
}
#menu1 > ul > li > ul {
width: 250px;
display: none;
position: absolute;
background: skyblue;
}
#menu1 > ul > li:hover > ul {
display: block;
z-index: 50;
}
#menu1 > ul > li > ul > li:hover {
background: gray;
transition: ease 1s;
z-index: 50;
}
메인페이지는 hover 를 사용했고, 나중에 사용할 CKeditor와의 겹치는것을 방지하기위해 z-index를 설정하였다.
Layout
<!doctype html>
<html lang="ko-kr" >
<head>
<meta charset="utf-8">
<meta name="viewport">
<link rel="stylesheet" type="text/css" th:href ="@{/css/layout/layout.css}" />
<title>Project</title>
</head>
<body>
<nav th:replace="~{layout/header :: headerFragment}"></nav>
<th:block layout:fragment="content"></th:block>
</body>
</html>
상단네비바는 th:replace를 사용해서 th:block이 변경되더라도 네비바가 reaplace될수있게 설정해놓았다.
contents 안에들어갈 mainpage는 model을 통해서 여러가지 정보를 가져올 계획계획이지만 내용이 필요한것들만 넣겠다.
Main
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container">
<div id="contents">
<div id="login">
<br><br>
<a id="loginTab" sec:authorize="isAnonymous()" th:href="@{/crud/login}">LOGIN
<div id=loginOther>
<a th:href="@{/crud/register}">회원가입</a> ||
<a href="">아이디찾기</a> ||
<a href="">비밀번호찾기</a>
</div>
</a>
<a id="loginTab" sec:authorize="isAuthenticated()" th:href="@{/crud/logout}">
<div th:if="${#authentication.principal instanceof T(org.springframework.security.oauth2.core.user.DefaultOAuth2User)}">
<span th:text="${#authentication.principal.attributes['name']}"></span>님 환영합니다.
</div>
<div th:if="${#authentication.principal instanceof T(org.springframework.security.core.userdetails.User)}">
<span th:text="${#authentication.principal.username}"></span>님 환영합니다.
</div>
<a th:href="@{/crud/update}">개인정보수정</a> ||
<a th:href="@{/crud/delete}">회원탈퇴</a>
</div>
</a>
<br>
</div>
</div>
</div>
</html>th:if문을 통해서 SNS사용자인지 사이트사용자인지를 확인하도록했다.
사이트사용자와 SNS사용자의 Token값이 다르기때문에 instanceof 연산자를 불러와서 직접대입하는 방법으로 처리를 했고, 일반사용자는 userId가 출력이되고 SNS사용자는 name이 표시되도록 구분시켜놓았다.
CSS
#loginTab {
background-color: skyblue;
display : block;
text-align: center;
height: 30px;
}뷰페이지 작업은 간단히 마무리하였으며, 이제 페이지를 호출할수있는 컨트롤러를 만들어주면된다.
MainController
@RequiredArgsConstructor
@Controller
public class MainController {
@GetMapping("/")
public String root() {
return "/main/main";
}전체적인 완성은 이런느낌이지만 시간의 흐름으로 재구성중이다.
열심히 배우자