[2023-11-08]

main.html에서 각 글의 첫 번째 이미지만 메인에 나오도록 하기

Untitled

<!-- 이미지 출력 폼 -->
            <form>
                <div class="form-row">
                    <div class="form-group col-md-4" th:each="book : ${Books}">
                        <div th:with="firstImage=${book.images[0]}" class="image-size" style="text-align: center;">
                            <a th:href="@{/board/detail/{bookId}(bookId=${book.book_id})}">
                                <img th:src="${firstImage.image_url}" th:alt="${book.title}" style="display: inline-block;">
                            </a>
                        </div>
                        <div style="margin-bottom: 10px;"></div>
                        <figcaption class="figcaption-center">
                            <a th:href="@{/board/detail/{bookId}(bookId=${book.book_id})}">
                                <span th:text="${book.title}"></span>
                            </a>
                            <div style="background-color: #E2ECE2; border: 1px solid #E2ECE2; border-radius: 20px; color: black; font-size: 14px; padding: 5px 10px; pointer-events: none; display: inline-block;">
                                <span th:text="${book.transactions.status}"></span>
                            </div>
                        </figcaption>
                    </div>
                </div>
            </form>

detail.html에 이미지 슬라이더 만들기

Untitled

<!DOCTYPE html>
<html lang="ko" xmlns:th="<http://www.thymeleaf.org>">
<head>
    <title>detail</title>
    <link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>">
    <style>
        hr {
            border: 2px solid #E2ECE2;
        }
        .custom-button {
            background-color: #E2ECE2;
            font-size: 18px;
            color: black;
            border: 2px solid #E2ECE2;
            width: 40%;
        }

        .custom-text-box {
            border: 1px solid black;
            padding: 10px;
        }

        .image-slider {
            display: block;
            position: relative;
            width: 450px;
            height: 350px;
        }

        .image-container {
            display: block;
        }

        .slide {
            display: none;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: #E2ECE2;
            font-size: 24px;
            color: black;
            padding: 10px;
            cursor: pointer;
            user-select: none;
        }

        .prev {
            left: 0;
        }

        .next {
            right: 0;
        }
    </style>
</head>

<body>
<header th:replace="~{/header/header :: headerFragment}"></header>

<div class="container-fluid">
    <div class="row">
        <!-- Sidebar -->
        <header th:replace="~{/sidebar/sidebar :: sidebarFragment}"></header>

        <!-- Main -->
        <main role="main" class="col-md-9 col-lg-10 px-md-4" style="margin-left: 200px">
            <br>
            <h2 class="text-center"><span th:text="${book.title}"></span></h2>
            <hr>

            <div class="row">
                <div class="col-md-6">
                    <div class="image-slider">
                        <div class="image-container">
                            <img class="slide" th:each="image : ${book.images}" th:src="${image.image_url}" th:alt="${book.title}">
                        </div>
                        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                        <a class="next" onclick="plusSlides(1)">&#10095;</a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card-body" style="padding-top: 50px; padding-bottom: 50px;">
                        <p th:text="'저자: ' + ${book.author}"></p>
                        <p th:text="'출판사: ' + ${book.publisher}"></p>
                        <p th:text="'발행일자: ' + ${book.pubdate}"></p>
                        <p th:text="'기부어: ' + ${book.boards.giver_user_id}"></p>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-center mt-4">
                <button class="custom-button btn btn-primary btn-lg btn-block">나눔 받기</button>
            </div>

            <div class="card-body" style="padding-top: 50px; padding-bottom: 50px;">
                <div class="custom-box">
                    <p>기부어의 한마디</p>
                    <div class="custom-text-box">
                        <span th:text="${book.boards.message}"></span>
                    </div>
                </div>
                <br>
                <div class="custom-box">
                    <p>책 소개</p>
                    <div class="custom-text-box">
                        <span th:text="${book.description}"></span>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<footer th:replace="~{/footer/footer :: footerFragment}"></footer>

<script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("slide");
        if (n > slides.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
            slides[i].style.width = "450px";
            slides[i].style.height = "350px";
        }
        slides[slideIndex - 1].style.display = "block";
    }
</script>

</body>
</html>

merge 후 pull 이후 에러 수정 (바뀐 메서드명, 변수명 등 )