기존에 만들었던 기획을 기반으로 Bootstrap을 이용해서 View단을 먼저 만들었습니다.
Bootswatch: Free themes for Bootstrap
Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility.
bootswatch.com
해당 사이트에서 Mint를 사용하였습니다.
Main
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link href="main.css" rel="stylesheet"/>
</head>
<body>
<div th:replace="~{header :: headerFragment}"></div>
<div class="container-fluid row m-2">
<div class="col-1"></div>
<div class="col-8">
<div class="row mt-5">
<div class="col">
<select class="form-select">
<option value="저자">저자</option>
<option value="작성자">작성자</option>
<option value="책 제목">책 제목</option>
<option value="제목">제목</option>
</select>
</div>
<div class="col-8">
<input class="form-control" id="inputDefault" placeholder="검색어를 입력하세요" type="text">
</div>
<div class="col">
<button class="btn btn-secondary" type="button">검색</button>
</div>
</div>
<div class="row mt-5">
<div class="col-3">
<div class="card" style="width: 18rem;">
<div class="card" style="width: 18rem;">
<img alt="img" class="card-img-top" src="/img/book.png"/>
<div class="card-body">
<h5 class="card-title">Review title</h5>
<p class="card-text">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Book title</li>
<li class="list-group-item">Book Author</li>
</ul>
</div>
</div>
</div>
<div class="col-3">
<div class="card" style="width: 18rem;">
<div class="card" style="width: 18rem;">
<img alt="img" class="card-img-top" src="/img/book.png"/>
<div class="card-body">
<h5 class="card-title">Review title</h5>
<p class="card-text">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Book title</li>
<li class="list-group-item">Book Author</li>
</ul>
</div>
</div>
</div>
<div class="col-3">
<div class="card" style="width: 18rem;">
<div class="card" style="width: 18rem;">
<img alt="img" class="card-img-top" src="/img/book.png"/>
<div class="card-body">
<h5 class="card-title">Review title</h5>
<p class="card-text">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Book title</li>
<li class="list-group-item">Book Author</li>
</ul>
</div>
</div>
</div>
<div class="col-3">
<div class="card" style="width: 18rem;">
<div class="card" style="width: 18rem;">
<img alt="img" class="card-img-top" src="/img/book.png"/>
<div class="card-body">
<h5 class="card-title">Review title</h5>
<p class="card-text">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Book title</li>
<li class="list-group-item">Book Author</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-2 flex-column mt-5" id="side-content">
<h6 class="text-center mt-3">Recent Review</h6>
<div>
<ul class="list-group align-content-center">
<li class="list-group-item d-flex justify-content-between align-items-center">1번
<span class="badge bg-primary rounded-pill">N</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">2번
<span class="badge bg-primary rounded-pill">N</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">3번
<span class="badge bg-primary rounded-pill">N</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">4번
<span class="badge bg-primary rounded-pill">N</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">5번
<span class="badge bg-primary rounded-pill">N</span></li>
</ul>
</div>
<h6 class="text-center mt-3">Recent Comment Review</h6>
<div>
<ul class="list-group align-content-center">
<li class="list-group-item d-flex justify-content-between align-items-center">1번
<span class="badge bg-primary rounded-pill">N</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">2번
<span class="badge bg-primary rounded-pill">N</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">3번
<span class="badge bg-primary rounded-pill">N</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">4번
<span class="badge bg-primary rounded-pill">N</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">5번
<span class="badge bg-primary rounded-pill">N</span></li>
</ul>
</div>
<h6 class="text-center mt-3">Link</h6>
<ul class="list-group align-content-center">
<li class="list-group-item d-flex justify-content-between align-items-center"><a
href="https://book.interpark.com/bookPark/" target="_blank">인터파크</a></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><a
href="https://www.aladin.co.kr/" target="_blank">알라딘</a></li>
</ul>
</div>
</div>
</body>
</html>현재는 예시라서 직접 카드를 다 넣어주었지만 실제로 구동시엔 하루간 가장 많은 Good을 받은 리뷰 네개를 화면에 띄울 생각입니다.
그리고 우측에 리스트에도 실시간으로 가장 최근에 올라온 리뷰와 가장 최근에 댓글이 달린 리뷰 5개를 비동기로 하여금 계속 리뉴얼되게 할 생각입니다.
그리고 상단엔 검색바를 추가해서 메인페이지에서 바로 리뷰를 검색해서 접근할수있도록 할 예정입니다.
Login
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link href="main.css" rel="stylesheet"/>
<style>
.custom-color-bg {
border-radius: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 20px;
}
</style>
</head>
<body>
<div th:replace="~{header :: headerFragment}"></div>
<div class="container d-flex justify-content-center align-items-center" style="height: 100vh;">
<div class="row">
<div class="col-md-12 custom-color-bg">
<form th:action="@{/login}" th:method="POST" class="mb-3">
<div class="form-row">
<div class="col-md-12">
<label>
<input type="text" class="form-control mb-2 form-control-lg" placeholder="Enter ID">
<input type="password" class="form-control form-control-lg" placeholder="Enter Password">
</label>
</div>
<div>
<a class="text-primary text-end float-start" href="/register">Register</a>
<button type="submit" class="btn btn-primary float-end">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
사실 원래 의도라면 로그인페이지를 더 크게 만들고싶은데 도저히 방법을 모르겠어서 일단 작은 크기로 진행중입니다..
인가가 없는데 접근시 혹은 우상단에 로그인으로 접근시 나오게 할 생각이며 하단에 가입하는 페이지로 이동도 추가했습니다.
Register
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Register</title>
<link href="main.css" rel="stylesheet"/>
<style>
.custom-color-bg {
border-radius: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 20px;
}
</style>
</head>
<body>
<div th:replace="~{header :: headerFragment}"></div>
<div class="row mt-5">
<div class="col-2"></div>
<div class="col-8 custom-color-bg">
<form class="row g-3">
<div class="col-md-6">
<label class="form-label" for="username">ID</label>
<input class="form-control" id="username" type="email">
</div>
<div class="col-md-6">
<label class="form-label" for="password">Password</label>
<input class="form-control" id="password" type="password">
</div>
<div class="col-12">
<label class="form-label" for="nickname">Nickname</label>
<input class="form-control" id="nickname" placeholder="Enter Nickname" type="text">
</div>
<div class="col-12">
<label class="form-label" for="phone">Phone</label>
<input class="form-control" id="phone" placeholder="Phone number" type="text">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" id="gridCheck" type="checkbox">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary float-end" type="submit">Sign in</button>
</div>
</form>
</div>
</div>
</body>
</html>회원가입시엔 카카오톡 알림이나 이메일 수신에 관련된 질의를 넣어놓고 확인한다면 코멘트가 달렷을 경우 알림을 발송하는 것을 고민중입니다.
회원가입시엔 Role_USER로 생성되며 추후 Admin이 변경 가능합니다.
Review
아직 작성중인 페이지이며 상단에 탭들을 누르면 해당 기준으로 정렬되도록하고 하단에 Main에 있는것과같은 검색기능을 추가할 예정입니다.
'Project > BookReview' 카테고리의 다른 글
| 도서 리뷰 웹사이트 만들기 #1 (0) | 2024.01.16 |
|---|