JPA 쇼핑몰 메인페이지 구현
들어가며
이번포스팅에서는 기본적으로 우리가 사이트를 들어갔을때 메인으로 보여지는 페이지를 구현할예정입니다. 저는 HTML/CSS는 아직 부족하여 부트스트랩 과 무료로 제공하는 html템플릿을 이용해 구현할 예정입니다!
레이아웃 구성
메인페이지를 구성하기 위해해서 부트스트랩 시작이라는 무료 html사이트를 이용해 아래와 같은템플릿을 사용할 예정입니다.
다운 받은 파일을 압축을 풀고 static 폴더에 넣어줍니다.
그후에 templates 파일에 fragements폴더를 생성후 그 하위에 frage와 layout폴더를 생성
frage
footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="footer">
<footer class="py-5 bg-dark">
<div class="container"><p class="m-0 text-center text-white">Copyright © Jincrates 2023</p> </div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/scripts.js"></script>
</div>
</html>
header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
.button-container {
display: flex;
justify-content: center;
}
.btn {
text-align: center;
padding: 10px;
margin: 5px;
flex: 1; /* 그룹 내에서 버튼이 동일한 너비를 가지도록 설정합니다. */
}
.btn-login {
font-size: 20px;
background-color: #0D0D0D;
color: white;
}
.btn-small {
font-size: 14px;
background-color: #f0f0f0;
}
</style>
<div th:fragment="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="/">책방</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#!">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#!">전체 상품</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#!">인기 상품</a></li>
<li><a class="dropdown-item" href="#!">새로운 상품</a></li>
</ul>
</li>
</ul>
<div class="button-container">
<a href="" class="btn-login" style="color: #0D0D0D;">
<i class="btn-login">
<span class="blind">|</span>
</i>
로그인
</a>
<a href="" class="nav-item" style=" color: #0D0D0D; margin-right: 5px;">회원가입</a>
</div>
<form class="d-flex">
<button class="btn btn-outline-dark" type="submit">
<i class="bi-cart-fill me-1"></i>
Cart
<span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
</button>
</form>
</div>
</div>
</nav>
<!-- Header-->
<header class="bg-dark py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="text-center text-white">
<h1 class="display-4 fw-bolder">BookStore</h1>
<p class="lead fw-normal text-white-50 mb-0">With this shop hompeage template</p>
</div>
</div>
</header>
</div>
</html>loayousts
deafult.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>책방</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="/css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
@font-face {
font-family: 'DungGeunMo-Regular';
src: url('https://cdn.jsdelivr.net/gh/wooin21/web/fonts/etc/DungGeunMo-Regular.woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'DungGeunMo-Regular';
}
.item .card:hover {border: #0D0D0D 1px solid;}
</style>
<!-- 각 페이지의 script 가 작성될 위치-->
<th:block layout:fragment="script"></th:block>
<!-- 각 페이지의 css 가 작성될 위치-->
<th:block layout:fragment="css"></th:block>
</head>
<body>
<div th:replace="fragements/frage/header :: header"></div>
<div layout:fragment="content" class="content"></div>
<div th:replace="fragements/frage/footer ::footer"></div>
</body>
</html>
/templates
home.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/fragements/layout/default}">
<div layout:fragment="content">
</div>>
</html>- layout:decorate="~{/fragements/layout/default}" : 사용하기 위해서 Bulid.gradle에다가 추가
implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '3.0.0'추후에 href=" "부분을 개발하면서 채워나갈 예정입니다
레이아웃이나 글꼴은 찾아서 원하시는걸로 바꾸시면 됩니다!
Controller
실행시 화면을 보여주기 위해서 컨트롤러를 작성하자 Shopping 하위에 web/controller을 생성후 web/하위에 BookApplication.class를 이동후에 controller에 HomeController작성
HomeController
@Controller
@RequiredArgsConstructor
public class HomeController {
@GetMapping("/")
public String defaultHome(){
return "home";
}
}실행하면 !
이렇게 메인 페이지를 간단하게 변경하여 표시 할수있게된다!
다음으로
다음에는 회원가입을 구현해보겠습니다!
부족하지만 열람해주셔서 감사합니다. :)
'ToyProject쇼핑몰' 카테고리의 다른 글
| [스프링 부트] JPA 쇼핑몰 # 6.회원가입 주소 (0) | 2023.10.27 |
|---|---|
| [스프링 부트] JPA 쇼핑몰 # 5.메일 인증 (0) | 2023.10.27 |
| [스프링 부트] JPA 쇼핑몰 프로젝트 # 4.중복검사(중복체크) (0) | 2023.10.26 |
| [스프링 부트] JPA 쇼핑몰 프로젝트 # 3.회원가입 (4) | 2023.10.22 |
| [스프링 부트] JPA 쇼핑몰 프로젝트 #1.프로젝트 준비 (0) | 2023.10.20 |
