로그인 페이지 레이아웃 구성
들어가며
이전 포스팅까지는 회원가입을 하는기능을 개발해봤습니다. 이제부터는 회원가입한 데이터값을 이용해서 로그인 기능을 개발해볼 예정입니다. 이번 포스팅에서는 로그인 페이지의 레이아웃 부터 구성해보겠습니다.
예상 로그인 페이지
간단한 기능이 있는 로그인 페이지
HTML
기존에 만들었던 header.html 에서 href 부분에 "/login"을 추가한다.
<div class="button-container">
<a href="/login" class="btn-login" style="color: #0D0D0D;">
<i class="btn-login">
<span class="blind">|</span>
</i>
로그인
</a>
templates/ 하위에 login폴더 생성후 loginPage.html 생성 bootstrap을 사용할 예정이라 css파일에다가 bootstrap다운받은후에 bootstrap.min.css 파일을 넣어줘야합니다.
loginPage.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<style>
.login {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-heading {
font-weight: 300;
}
.btn-login {
font-size: 0.9rem;
letter-spacing: 0.05rem;
padding: 0.75rem 1rem;
}
@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>
</head>
<body>
<div class="container-fluid ps-md-0">
<div class="login">
<div class="container align-content-center"> <!-- 이 부분에 text-center 클래스를 추가하여 로그인 폼을 가운데로 정렬합니다. -->
<div class="col-md-9 col-lg-8 mx-auto">
<a href="/" style="text-decoration: none; color: #0D0D0D;">
<h1 class="login-heading mb-5 text-center">책방</h1>
</a>
<div></div>
<!-- Sign In Form -->
<form role="form">
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="Id">
<label th:for="id">Id</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" placeholder="Password">
<label th:for="password1">Password</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="rememberPasswordCheck">
<label class="form-check-label" for="rememberPasswordCheck">
Remember Id
</label>
</div>
<div class="d-grid">
<button class="btn btn-lg btn-primary btn-login text-uppercase fw-bold mb-2" type="submit">Sign in</button>
<div class="text-center ">
<a class="small">아이디 찾기</a>
<a class="small">비밀번호 찾기</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="/js/bootstrap.bundle.min.js"/>
</body>
</html>
Controller
이제는 컨트롤러를 작성해야합니다. 현재는 접속만 하는 것을 목표로하는것이기때문에 Get방식으로 매핑해주시면 됩니다.
LoginController
@Controller
public class LoginController {
@GetMapping("/login")
public String loginGet(){
return "login/loginPage";
}
}그후에 실행해서 메인페이지에서 로그인을 클릭하게되면 예상 페이지처럼 접속할수있게됩니다.
다음으로
다음에는 로그인을 기능을 개발해보도록 하겠습니다.
'ToyProject쇼핑몰' 카테고리의 다른 글
| [스프링 부트] JPA 쇼핑몰 # 10.아이디찾기(본인인증), 비밀번호 찾기 (1) | 2023.10.31 |
|---|---|
| [스프링 부트] JPA 쇼핑몰 # 9.세션을 이용한 로그인 및 로그아웃 (9) | 2023.10.28 |
| [스프링 부트] JPA 쇼핑몰 # 7.회원가입 실행해보기 (0) | 2023.10.27 |
| [스프링 부트] JPA 쇼핑몰 # 6.회원가입 주소 (0) | 2023.10.27 |
| [스프링 부트] JPA 쇼핑몰 # 5.메일 인증 (0) | 2023.10.27 |
