여기까지 별점은 등록은 됨

<!-- 리뷰 등록 폼 -->
                    <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">&#9733;</span>
                                <span class="star" data-value="2">&#9733;</span>
                                <span class="star" data-value="3">&#9733;</span>
                                <span class="star" data-value="4">&#9733;</span>
                                <span class="star" data-value="5">&#9733;</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:text="${review.rating}"></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="rating-value" value="0">
                                                    <span class="star" data-value="1">&#9733;</span>
                                                    <span class="star" data-value="2">&#9733;</span>
                                                    <span class="star" data-value="3">&#9733;</span>
                                                    <span class="star" data-value="4">&#9733;</span>
                                                    <span class="star" data-value="5">&#9733;</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>
                </div>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
    const stars = document.querySelectorAll('.star');

    stars.forEach(star => {
        star.addEventListener('click', () => {
            const value = parseInt(star.getAttribute('data-value'));

            // 선택된 별의 인덱스까지만 활성화
            stars.forEach((s, index) => {
                if (index < value) {
                    s.classList.add('active');
                } else {
                    s.classList.remove('active');
                }
            });

            // 선택된 별의 값을 폼에 설정
            const ratingInput = star.parentElement.querySelector('input[type="hidden"]');
            if (ratingInput) {
                ratingInput.value = value;
            }
        });
    });
});
        </script>