[2023-11-06]

admin 페이지 나눔 글 상세 뷰 구현

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-text-box {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

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

<div class="container-fluid">
    <div class="row">
        <!-- Sidebar -->
        <header th:replace="~{/sidebar/adminSidebar :: 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">책 제목</h2>
            <hr>

            <div class="row">
                <div class="col-md-6">
                    <div style="display: flex; flex-direction: column; align-items: center;">
                        <img src="이미지_경로" alt="책 이미지">
                        <button class="btn" id="editPhotoButton" style="background-color: #E2ECE2; margin-top: 10px;">사진 수정</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card-body" style="padding-top: 50px; padding-bottom: 50px;">
                        <p>저자: ${}</p>
                        <p>출판사: ${}</p>
                        <p>발행일자: ${}</p>
                        <p>기부어: ${}</p>
                    </div>
                </div>
            </div>

            <div class="card-body" style="padding-top: 50px; padding-bottom: 50px;">
                <div style="display: flex; align-items: center; margin-bottom: 10px;">
                    <p style="flex: 1; margin-bottom: 0;">기부어의 한마디</p>
                    <button class="btn" id="editGiverSays" style="background-color: #E2ECE2; margin-left: 10px;">기부어의 한마디 수정</button>
                </div>
                <div class="custom-text-box">
                    <p>${} 기부어의 한 마디 어쩌구 저쩌구</p>
                </div>
                <br>
                <div class="custom-box">
                    <p>책 소개</p>
                    <div class="custom-text-box">
                        <p>${} 책 소개 어쩌구 저쩌구</p>
                    </div>
                </div>
                <div class="buttons text-center">
                    <button class="btn" id="pickupButton" style="background-color: #E2ECE2; margin: 40px;">수거 시작</button>
                    <button class="btn" id="inspectButton" style="background-color: #E2ECE2; margin: 40px;">검수 시작</button>
                </div>
            </div>

        </main>

    </div>
</div>

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

</body>
</html>