<html layout:decorate="~{layout}">
<div layout:fragment="content">
<style>
.aside_items {
display:none;
}
</style>
<div class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom" style="width: 100%;">
<div class="title_book d-flex" style="padding-top:5px;">
제목:
<div th:text="${book.subject}"></div>
/ 출판사:
<div th:text="${book.publisher}"></div>
</div>
</div>
<div class="bt_section">
<div class="book_top-section">
<div class="book_left-side">
<div style="width:400px; height:600px;">
<img th:src="@{|/file/${book.thumbnailImg}|}" alt="사진" style="width:
400px; height: 600px;">
</div>
</div>
<div class="center-detail">
<div>
<div class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"
style="width: 100%; padding-left:10px;">
<h2>
<div class="card-text" style="white-space: pre-line;" th:text="${book.subject}"></div>
</h2>
</div>
<div class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"
style="width: 100%; padding-left:10px;">
<h6>정가</h6>
<del th:text="${book.price + ' 원'}"></del>
<br>
<h6>할인가</h6>
<div class="d-flex" style="color:red;">
<div style="margin-right:10px;" th:text="${book.discountPrice} + ' 원'"></div>
<div th:text=" ' ( ' + ${book.discount} +' % 할인' + ' ) ' "></div>
</div>
</div>
</div>
<div>
<div class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"
style="width: 100%; padding-left:10px;">
<h5>쿠폰 받기</h5>
<div class="card my-3">
<div class="card-body">
쿠폰 내용
<div class="card-text" style="white-space: pre-line;">
홈페이지 오픈 기념 이벤트 중 입니다
</div>
</div>
<div>
<p>신간 책 이벤트 중입니다</p>
</div>
</div>
</div>
</div>
</div>
<div class="book_right-side bg-light">
<div class="book_right-nav">
<div style="margin-bottom:5px">
<a class="btn btn-sm btn-primary" style="width: 150px">바로구매</a>
</div>
<div style="margin-bottom:5px">
<a class="addCartItem btn btn-sm btn-primary" style="width: 150px"
th:id="'addCartItem_' + ${book.id}" onclick="addCartItem(${book.id}); return false;">장바구니
담기</a>
</div>
<div>
<a class="addWish btn btn-sm btn-primary" th:id="'addWish_' + ${book.id}"
onclick="addWish(${book.id}); return false;" style="width:150px;">찜하기</a>
</div>
</div>
</div>
</div>
<div class="book_middle-section">
<div id="header" class="book_navbar header-scrolled text-black bg-light">
<div class="book_nav-container">
<a href="#ebook_info" class="card-body btn btn-light" onclick="activateSection('ebook_info')">
도서정보
</a>
<a href="#review_info" class="card-body btn btn-light" onclick="activateSection('review_info')">
리뷰
</a>
<div class="card-body" style="font-size:20px; color: red;">
<div class="card-text" style="white-space: pre-line;" th:text="${book.discountPrice + ' 원'}"></div>
</div>
<div style="margin-bottom:5px" class="justify-content-end">
<a class="btn btn-sm btn-primary" style="width: 100px; margin-right:10px;">바로구매</a>
<a class="addCartItem btn btn-sm btn-primary" style="width: 120px"
th:id="'addCartItem_' + ${book.id}" onclick="addCartItem(${book.id}); return false;">장바구니
담기</a>
</div>
</div>
</div>
<div id="ebook_info" class="book_info">
<div class="title_book" style="padding-top:5px;">
<h5>판매자</h5>
<br>
<div th:text="${book.publisher}"></div>
<div class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"
style="width: 100%;"></div>
<h5>판매 소개</h5>
<br>
<div th:text="${book.content}">></div>
<div class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"
style="width: 100%;"></div>
</div>
<div class="title_book" style="padding-top:5px;">
<h5>책 제목</h5>
<br>
<div th:text="${book.subject}"></div>
<div class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"
style="width: 100%;"></div>
<h5>책소개</h5>
<br>
<div th:text="${book.bookIntroduce}"></div>
<div class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"
style="width: 100%;"></div>
</div>
<div class="title_book" style="padding-top:5px;">
<h5>출판사</h5>
<br>
<div th:text="${book.publisher}"></div>
<br>
</div>
</div>
<div class="book_bottom-section">
<div id="review_info" class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"
style="width: 100%;"></div>
<h2>회원 리뷰</h2>
<div id="review_info" class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"
style="width: 100%;"></div>
<div class="justify-content-end" style="margin-bottom:5px">
<!-- 리뷰 등록 폼 -->
<div class="review_form mb-3">
<label for="content" class="form-label"></label>
<form th:action="@{|/review/create/${book.id}|}" method="post">
<textarea name="content" id="content" class="form-control" rows="3"
placeholder="책에 대한 스포일러 및 심한 욕설은 제외됩니다"></textarea>
<div class="rating">
<input type="hidden" name="rating" id="rating-value" value="0">
<span class="star" data-value="1">★</span>
<span class="star" data-value="2">★</span>
<span class="star" data-value="3">★</span>
<span class="star" data-value="4">★</span>
<span class="star" data-value="5">★</span>
</div>
<button type="submit" class="btn btn-sm btn-primary" style="width: 100px; margin-top: 5px;">
리뷰등록
</button>
</form>
</div>
<!-- 리뷰 목록 -->
<div class="a_comment_top">
<ul th:each="review : ${reviewList}">
<li>
<div id="review_info"
class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"
style="width: 100%;">
<div class="review-box mb-2">
<span>평점: <span th:utext="|★| + ${review.rating}" class="star"></span></span>
<div style="display:flex;" th:text="${review.author.username}"></div>
<div style="display:flex; justify-content:end; padding-right:10px;"
th:text="${#temporals.format(review.createDate, 'yyyy-MM-dd HH:mm')}"></div>
<div style="display:flex; justify-content:end; padding-right:10px;"
th:text="${#temporals.format(review.modifiedDate, 'yyyy-MM-dd HH:mm')}"></div>
<div class="review-content">
<span th:text="${review.content}"></span>
</div>
<h5 class="my-3 border-bottom pb-2">리뷰수정</h5>
<form th:action="@{|/review/modify/${review.id}|}" th:object="${reviewForm}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<div class="mb-3">
<label for="content" class="form-label">내용</label>
<textarea name="content" id="content" class="form-control" rows="10" th:text="${review.content}"></textarea>
</div>
<div class="mb-3">
<label for="rating" class="form-label">평점</label>
<div class="rating" id="modify-rating">
<!-- 수정 시에도 별점을 선택할 수 있는 별 아이콘 -->
<input type="hidden" name="rating" id="modify-rating-value" value="0">
<span class="star" data-value="1">★</span>
<span class="star" data-value="2">★</span>
<span class="star" data-value="3">★</span>
<span class="star" data-value="4">★</span>
<span class="star" data-value="5">★</span>
</div>
</div>
<input type="submit" value="저장하기" class="btn btn-primary my-2">
</form>
<a href="#" onclick="editReview(${review.id}, '${review.content}')"
class="btn btn-sm btn-primary" style="width: 100px; margin-right:10px;">수정</a>
<a th:href="@{|/review/delete/${review.id}|}" class="btn btn-sm btn-primary"
style="width: 100px; margin-right:10px; margin-top:20px;">삭제</a>
</div>
</div>
</li>
</ul>
</div>
<!-- JavaScript 코드 -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const reviewStars = document.querySelectorAll('.review_form .star'); // 리뷰 작성 별점
const modifyStars = document.querySelectorAll('.a_comment_top .star'); // 리뷰 수정 별점
reviewStars.forEach(star => {
star.addEventListener('mouseover', () => {
const value = parseInt(star.getAttribute('data-value'));
// 선택된 별의 인덱스까지만 활성화
reviewStars.forEach((s, index) => {
if (index < value) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
});
star.addEventListener('click', () => {
const value = parseInt(star.getAttribute('data-value'));
// 선택된 별의 값을 폼에 설정
const ratingInput = document.getElementById('rating-value');
if (ratingInput) {
ratingInput.value = value;
}
// 현재 선택된 별까지만 활성화
reviewStars.forEach((s, index) => {
if (index < value) {
s.classList.add('selected');
} else {
s.classList.remove('selected');
}
});
});
});
modifyStars.forEach(star => {
star.addEventListener('mouseover', () => {
const value = parseInt(star.getAttribute('data-value'));
// 선택된 별의 인덱스까지만 활성화
modifyStars.forEach((s, index) => {
if (index < value) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
});
star.addEventListener('click', () => {
const value = parseInt(star.getAttribute('data-value'));
// 선택된 별의 값을 폼에 설정
const ratingInput = document.getElementById('modify-rating-value');
if (ratingInput) {
ratingInput.value = value;
}
// 현재 선택된 별까지만 활성화
modifyStars.forEach((s, index) => {
if (index < value) {
s.classList.add('selected');
} else {
s.classList.remove('selected');
}
});
});
});
// 별점을 마우스로 선택하고 나서 마우스가 벗어났을 때 별을 초기화
const ratingContainer = document.querySelector('.rating');
ratingContainer.addEventListener('mouseleave', () => {
const ratingInput = ratingContainer.querySelector('input[type="hidden"]');
const currentValue = parseInt(ratingInput.value);
// 현재 선택된 별까지만 활성화
modifyStars.forEach((star, index) => {
if (index < currentValue) {
star.classList.add('selected');
} else {
star.classList.remove('selected');
}
});
});
});
</script>
<!-- CSS 코드 -->
<style>
.rating {
display: inline-block;
}
.rating .star {
font-size: 20px;
cursor: pointer;
color: #aaa;
transition: color 0.2s;
}
.rating .star.active,
.rating .star.selected {
color: #fdd835; /* 활성화된 별 색상 */
}
/* 별 아이콘의 색상을 노란색으로 변경 */
.star {
color: #fdd835; /* 원하는 색상으로 변경 */
}
</style>
<!-- 장바구니,찜 기능 -->
<script>
$(document).ready(function () {
$(".addWish").click(function () {
var bookId = this.id.split('_')[1];
Swal.fire({
title: '찜 목록에',
text: '해당 상품을 담으시겠습니까?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: '담기',
cancelButtonText: '취소',
preConfirm: () => {
return new Promise((resolve) => {
$.ajax({
url: '/wish/add/' + bookId,
type: 'GET',
success: function (data) {
resolve(true);
},
error: function () {
resolve(false);
}
});
});
}
}).then((result) => {
if (result.isConfirmed) {
// SweetAlert2 확인 버튼을 누르면 실행되는 부분
Swal.fire(
'찜 목록에 상품을 담았습니다.',
'',
'success'
).then(() => {
window.location.href = '/book/detail/' + bookId;
});
}
});
});
});
</script>
<script>
$(document).ready(function () {
$(".addCartItem").click(function () {
var bookId = this.id.split('_')[1];
Swal.fire({
title: '장바구니에',
text: '해당 상품을 담으시겠습니까?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: '담기',
cancelButtonText: '취소',
preConfirm: () => {
return new Promise((resolve) => {
// Ajax 요청을 통한 서버에서의 삭제 작업
$.ajax({
url: '/cartitem/add/' + bookId,
type: 'GET',
success: function (data) {
resolve(true);
},
error: function () {
resolve(false);
}
});
});
}
}).then((result) => {
if (result.isConfirmed) {
// SweetAlert2 확인 버튼을 누르면 실행되는 부분
Swal.fire(
'장바구니에 상품을 담았습니다.',
'',
'success'
).then(() => {
window.location.href = '/book/detail/' + bookId;
});
}
});
});
});
</script>
</div>
</div>
</html>
good