<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 style="margin-top:60px;">
<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">
<p style="color:black;">홈페이지 오픈 기념 이벤트 중 입니다</p>
<div>
<p>쿠폰 발급 받으세요</p>
</div>
<a class="btn btn-sm btn-primary" th:href="@{/coupon/list}">쿠폰 받기</a>
</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">
<nav class="book_navbar header-scrolled text-black bg-light">
<div class="book_nav-container">
<a href="#ebook_info" class="card-body btn btn-light">
도서정보
</a>
<a href="#review_info" class="card-body btn btn-light">
리뷰
</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>
</nav>
<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 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
class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"
style="width: 100%;">
<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 ')}"></div>
<div style="display:flex; justify-content:end; padding-right:10px;" th:text="${#temporals.format(review.modifiedDate, 'yyyy-MM-dd ')}"></div>
<div class="review-content">
<span th:text="${review.content}"></span>
</div>
<!-- 수정 버튼 -->
<button sec:authorize="isAuthenticated()" onclick="toggleEditForm(this)" class="btn btn-sm btn-primary btn-edit" style="width: 100px; margin-right:10px;">수정</button>
<!-- 리뷰 수정 폼 -->
<div class="review-edit-form" style="display: none;">
<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="modify-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>
</div>
<!-- 삭제 버튼 -->
<a th:href="@{|/review/delete/${review.id}|}" sec:authorize="isAuthenticated()" class="btn btn-sm btn-primary"
th:if="${review.author != null and (#authentication.getPrincipal().getUsername() == review.author.username
or #authentication.getPrincipal().getUsername() == 'admin')}"
style="width: 100px; margin-right:10px; margin-top:20px;">삭제</a>
<!-- 댓글 모달 버튼 -->
<button sec:authorize="isAuthenticated()" type="button" class="btn btn-sm btn-outline-secondary reportReview"
data-bs-toggle="modal"
data-bs-target="#reportReviewModal"
th:data-review-id="${review.id}"
id="reportReviewButton">신고
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- 댓글 모달 부트스트랩 시작 -->
<div aria-hidden="true" aria-labelledby="reportModalReview" class="modal" id="reportReviewModal"
tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="reportModalReview">신고내용</h1>
<button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
</div>
<form class="was-validated" method="post" th:action="@{|/review/report/${book.id}|}">
<div class="modal-body">
<input type="hidden" id="reviewId" name="reviewId">
<div class="mb-3">
<label class="col-form-label" for="validationTextareaComment">내용</label>
<textarea class="form-control" id="validationTextareaComment" name="reportContent"
placeholder="내용을 입력해주세요." required></textarea>
</div>
<!-- 라디오 버튼에 이벤트 리스너 추가 -->
<div class="form-check">
<input class="form-check-input" id="flexRadioComment1" name="reportType"
onchange="handleRadioSelection()"
type="radio" value="욕설">
<label class="form-check-label" for="flexRadioComment1">욕설</label>
</div>
<div class="form-check">
<input class="form-check-input" id="flexRadioComment2" name="reportType"
onchange="handleRadioSelection()"
type="radio" value="스팸 및 광고">
<label class="form-check-label" for="flexRadioComment2">스팸 및 광고</label>
</div>
<div class="form-check">
<input class="form-check-input" id="flexRadioComment3" name="reportType"
onchange="handleRadioSelection()"
type="radio" value="불법적인 콘텐츠">
<label class="form-check-label" for="flexRadioComment3">불법적인 콘텐츠</label>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" onclick="handleRadioSelection()" type="submit">신고 보내기
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- 댓글 모달 부트스트랩 종료 -->
<script>
$(".reportReview").on('click', function() {
var reviewId = $(this).attr('data-review-id');
$("input[name=reviewId]").val(reviewId)
})
</script>>
<!-- JavaScript 코드 -->
<script>
function toggleEditForm(button) {
var editForm = button.nextElementSibling;
if (editForm.style.display === 'block') {
editForm.style.display = 'none';
} else {
// 수정 폼이 다른 수정 폼과 중복되어 열리지 않도록 모든 수정 폼을 닫음
var allEditForms = document.querySelectorAll('.review-edit-form');
allEditForms.forEach(function (form) {
form.style.display = 'none';
});
editForm.style.display = 'block';
}
}
</script>
<script>
// 별점 등록 폼에서 클릭한 별의 값 설정
document.querySelectorAll('.review_form .star').forEach(star => {
star.addEventListener('click', function() {
const value = this.getAttribute('data-value');
document.getElementById('rating-value').value = value;
highlightStars('.review_form .star', value);
});
});
// 리뷰 수정 폼에서 클릭한 별의 값 설정
document.querySelectorAll('.review-edit-form .star').forEach(star => {
star.addEventListener('click', function() {
const value = this.getAttribute('data-value');
const parentForm = this.closest('.review-edit-form');
parentForm.querySelector('#modify-rating-value').value = value;
highlightStars('.review-edit-form .star', value);
});
});
// 클릭한 별 점을 강조하는 함수
function highlightStars(selector, value) {
document.querySelectorAll(selector).forEach(star => {
const starValue = star.getAttribute('data-value');
if (starValue <= value) {
star.style.color = 'orange';
} else {
star.style.color = 'gray';
}
});
}
</script>
<!-- <!– CSS 코드 –>-->
<!-- <style>-->
<!-- /* 별점을 나타내는 별 아이콘에 마우스를 올렸을 때 색상 변경 */-->
<!-- .star:hover,-->
<!-- .star.filled {-->
<!-- color: yellow;-->
<!-- }-->
<!-- </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