<html layout:decorate="~{layout}">
<head>
<style>
.Ere_btn_register {
float: right;
margin: 0;
padding: 0px;
width: 95px;
width: 100px;
margin-right: 10px;
}
.a_comment_top {
margin-right: auto;
padding-top: 50px;
padding-bottom: 5px;
}
.a_comment_top ul {
list-style-type: none; /* 리스트 스타일 제거 */
}
.a_comment_top li {
margin-bottom: 50px; /* 각 리뷰 아래에 여백 추가 */
}
.a_comment_top li a {
margin-left: 250px; /* 삭제 버튼과 리뷰 사이에 여백 추가 */
}
.formation-item d-flex {
border: 1px solid rgba(0, 0, 0, .125);
border-radius: 0.25rem;
}
ul {
list-style-type: none;
}
textarea {
resize: none; /* 드래그 기능을 없앰 */
}
.review-box {
border: 1px solid #ccc; /* 네모칸 테두리 스타일 */
padding: 10px; /* 네모칸 안 패딩 설정 */
border-radius: 5px; /* 네모칸 테두리 곡선 설정 */
}
.create-date {
margin-bottom: 5px; /* 생성 날짜와 리뷰 내용 사이의 간격 조정 */
}
</style>
</head>
<div layout:fragment="content">
<div class="pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom" style="width: 100%;">
<div class="formation-item d-flex" style="padding-top:5px;">
게시글 제목 / 판매자
</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="card my-3">
<div class="card-body">
책 제목:
<div class="card-text" style="white-space: pre-line;" th:text="${book.subject}"></div>
출판사 :
<div class="card-text" style="white-space: pre-line;" th:text="${book.publisher}"></div>
책 소개:
<div class="card-text" style="white-space: pre-line;" th:text="${book.bookIntroduce}"></div>
</div>
</div>
</div>
<div>
<div class="card my-3">
<div class="card-body">
가격
<div class="card-text" style="white-space: pre-line;" th:text="${book.price}"></div>
</div>
</div>
<div class="card my-3">
<div class="card-body">
할인율
<div class="card-text" style="white-space: pre-line;" th:text="${book.discount}"></div>
</div>
</div>
</div>
</div>
<div class="book_right-side">
구매 창 예정
<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 th:href="@{|/wish/add/${book.id}|}" onclick="return confirm('찜 목록에 추가 하시겠습니까?')" class="btn btn-sm btn-primary" style="width: 150px">찜 하기</a>
</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">
<div class="card-body btn btn-light">
도서정보
</div>
<div class="card-body btn btn-light">
리뷰
</div>
<div class="card-body" style="font-size:20px; color: red;">
<div class="card-text" style="white-space: pre-line;" th:text="${book.price + ' 원'}"></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="btn btn-sm btn-primary"style="width: 120px" th:id="'addCartItem_' + ${book.id}" onclick="addCartItem(${book.id}); return false;">장바구니 담기</a>
</div>
</div>
</div>
<div class="book_info">
<div class="formation-item d-flex" style="padding-top:5px;">
<article class="blog-post">
<h2 class="display-5 link-body-emphasis mb-1">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
<hr>
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
<h2>Blockquotes</h2>
<p>This is an example blockquote in action:</p>
<blockquote class="blockquote">
<p>Quoted text goes here.</p>
</blockquote>
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
<h3>Example lists</h3>
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:</p>
</article>
</div>
</div>
<div class="book_bottom-section">
<!-- 리뷰 등록 폼 -->
<div class="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"></textarea>
<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="review-box mb-2">
<div>
<span th:text="${review.author.username}"></span>
<div class="create-date" th:text="${#temporals.format(review.createDate, 'yyyy-MM-dd HH:mm')}"></div>
</div>
<div class="review-content">
<span th:text="${review.content}"></span>
</div>
<a th:href="@{|/review/delete/${review.id}|}" class="btn btn-sm btn-primary" style="width: 100px; margin-right:10px;">삭제</a>
<a th:href="@{|/review/modify/${review.id}|}" class="btn btn-sm btn-primary" style="width: 100px; margin-right:10px;" >수정</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<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>
</html>
...
기존에 있던 수정 버튼을 건들기 전에
따로 화면에 아코디언이 열리기만 하게끔 아무버튼만 만들어 보자
good