detail 폼만들기
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/main_layout}">
<head>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<!-- content -->
<div layout:fragment="content" class="container">
<form>
<input type="hidden" id="boardNo" th:value="${rList.boardNo}"
name="boardNo"> <input type="hidden" id="cookingId"
th:value="${cookingId}" name="cookingId"> <input
type="hidden" id="bookCount" th:value="${bookCount}"
name="bookCount"> <input type="hidden" id="id"
th:value="${id}" name="memberId">
</form>
<div class="row border border-dark rounded">
<div class="col">
<div class="row">
<div class="col">
<h1 class="text-center" th:text="${rList.foodName}"></h1>
<div class="testList">테스트 2</div>
</div>
</div>
<div class="row rList">
<div class="col-1"></div>
<div class="col">
<div class="row bg-secondary rounded">
<div class="col-3"></div>
<div class="col-6">
<h3 class="text-center text-white my-3 fw-bold">레시피 모아보기</h3>
</div>
<div
class="col-3 text-end text-white d-flex justify-content-end align-items-center">
<button type="button" class="btn btn-success" id="recipeBtn">레시피
접기</button>
</div>
</div>
<div class="row my-2">
<div class="col">
<div class="row">
<div class="col">
<h3 class="text-center my-3 fw-bold">요리 재료</h3>
</div>
</div>
<div class="row border justify-content-start">
<div class="col-6">
<ul>
<th:block th:each="mList, cStatus : ${mList}">
<li>
<div class="row my-1">
<div class="col">
[[${mList.materialName}]]
</div>
<div class="col">
[[${mList.mensuration}]]
</div>
</div>
</li>
</th:block>
</ul>
</div>
</div>
</div>
</div>
<th:block th:each="cList, cStatus : ${cList}">
<div class="row border border-danger my-2">
<div class="col">
<div class="row my-2 border border-dark rounded"
style="height: 300px;">
<div class="col-5">
<div class="row">
<div class="col mx-4">
<img src="https://via.placeholder.com/300" alt="샘플이미지"
class="img-fluid">
</div>
</div>
</div>
<div class="col">
<div class="row my-2">
<div class="col">
<h4 class="fw-bold">
<span th:text="${cStatus.index + 1}"></span>.[[${cList.cookTitle}]]
</h4>
</div>
</div>
<div class="row my-1">
<div class="col">
<h4>조리방법</h4>
</div>
</div>
<div class="row my-1">
<div class="col my-2">
<span>[[${cList.cookMethod}]]</span>
</div>
</div>
<th:block th:if="${not #strings.isEmpty(cList.recommended)}">
<div class="row my-1">
<div class="col my-2">
<h4>주의할점</h4>
</div>
</div>
<div class="row my-1">
<div class="col my-2">
<span th:text="${cList.recommended}"></span>
</div>
</div>
</th:block>
</div>
</div>
<div class="row mx-4">
<div class="col ">
<h4 class="fw-bold">요리재료</h4>
</div>
</div>
<div class="row my-1 mx-4 list border row-cols-2 rounded">
<th:block
th:if="${not #lists.isEmpty(__${'cMList' + cStatus.index}__)}">
<th:block
th:each="cMList0 : ${__${'cMList' + cStatus.index}__}">
<div class="col">
<div class="row">
<div class="col">
<span th:text="${cMList0.materialName}" ></span>
</div>
<div class="col">
<span th:text="${cMList0.mensuration}" ></span>
</div>
</div>
</div>
</th:block>
</th:block>
<th:block
th:unless="${not #lists.isEmpty(__${'cMList' + cStatus.index}__)}">
<div class="col">
<p>현 조리과정에는 재료가 포함되어 있지 않습니다.</p>
</div>
</th:block>
</div>
</div>
</div>
</th:block>
<!-- 댓글폼 -->
<!-- 댓글 작성 폼 -->
<div class="row bg-secondary rounded my-4">
<div class="col-3"></div>
<div class="col-6">
<h3 class="text-center text-white my-3 fw-bold">요리 후기</h3>
</div>
<div
class="col-3 text-end text-white d-flex justify-content-end align-items-center">
<button type="button" class="btn btn-success" id="commentBtn">후기
접기</button>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<div class="row">
<div class="col">
<h4>후기 작성</h4>
</div>
</div>
</div>
<div class="card-body">
<form id="commentForm" method="post">
<div class="mb-3">
<div
class="row my-2 d-flex justify-content-between align-items-center ">
<div class="col-9">
<label for="commentContent" class="form-label fw-bold">후기
내용 </label>
</div>
<div class="col-1 text-end">
<label for="commentPoint" class="form-label fw-bold">점수
: </label>
</div>
<div class="col-2">
<input type="number" class="form-control w-3"
id="commentPoint" name="commentPoint" min="0" max="5"
placeholder="1~5점" required>
</div>
</div>
<div
class="row d-flex justify-content-between align-items-center my-2">
<div class="col-10">
<textarea class="form-control" id="commentContent"
name="commentContent" rows="3" required></textarea>
</div>
<div class="col-2">
<button type="submit" class="btn btn-primary"
style="height: 70px;">후기 작성</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- 댓글 리스트 -->
<div class="card mb-4">
<div class="card-header">
<div class="row">
<div class="col">
<h4>후기 리스트</h4>
</div>
<div class="col text-end">
<div class="row d-flex align-items-center">
<div class="col-9">
<h4>평균 점수 :</h4>
</div>
<div class="col-3 border arg-star">
<div th:utext="${stars}"></div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-group" id="commentList">
<!-- 댓글 아이템 -->
<th:block th:if="${not #lists.isEmpty(commentList)}">
<th:block th:each="comment : ${commentList}">
<li class="list-group-item"
th:data-comment-id="${comment.commentId}">
<div class="d-flex justify-content-between">
<div>
<p class="mb-1">
<strong>[[${comment.memberId}]]</strong>
</p>
<p class="mb-1 comment-content">[[${comment.commentContent}]]</p>
<span class="text-muted" name="createdAt" th:text="${#dates.format(comment.createdAt,
'yyyy-MM-dd')}"></span>
<!--여기서 부턴 나중에 추가할 평점 부분-->
<div class="star-icons">
<th:block th:if="${comment.commentPoint > 0}">
<th:block th:each="star : ${#numbers.sequence(1, comment.commentPoint)}">
<i class="bi bi-star-fill"></i>
</th:block>
</th:block>
<th:block th:if="${comment.commentPoint < 5}">
<th:block th:each="star : ${#numbers.sequence(comment.commentPoint + 1, 5)}">
<i class="bi bi-star"></i>
</th:block>
</th:block><!--여기까지 나중에 detail에 추가해야함-->
</div>
</div>
<div>
<button class="btn btn-secondary btn-sm"
onclick="editComment(this)">수정</button>
<button class="btn btn-danger btn-sm"
onclick="deleteComment(this)">삭제</button>
</div>
</div>
</li>
</th:block>
</th:block>
<!-- 댓글이 없는 경우 -->
<th:block th:if="${#lists.isEmpty(commentList)}">
<li class="list-group-item"><span>후기가 존재하지 않습니다.</span></li>
</th:block>
<!-- 더 많은 댓글 아이템들 -->
</ul>
</div>
<!-- 댓글폼마무리 -->
</div>
</div>
<div class="col-1"></div>
</div>
</div>
</div>
<div class="row text-center my-5">
<div class="col">
<input class="btn btn-primary" type="button" id="reviewBtn"
value="리뷰보기">
</div>
<div class="col">
<input class="btn btn-primary" type="button" id="meterBtn"
value="재료보기">
</div>
<div class="col">
<input class="btn btn-primary" type="button" id="bookBtn"
value="레시피보기(책)">
</div>
<div class="col">
<input class="btn btn-primary" type="button" id="listBtn"
value="레시피보기(리스트)">
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
나중에 해야할것 컨트롤러에 별점기능추가 / 댓글 추가
detail 리스트 폼을 일단 만들었다 . 책보기/ 리스트로 보기 두개를 왔다갔다 하게 만들 것이다. 지금은 기본 폼만 만들었다.
