[2023-11-10]

검색 출력 화면 뷰 생성

<!DOCTYPE html>
<html lang="ko" xmlns:th="<http://www.thymeleaf.org>">
<head>
    <title>searchBooks</title>
    <link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>">
    <link rel="stylesheet" href=".static/css/App.css">
    <style>
        hr {
            border: 2px solid #E2ECE2;
        }

        .custom-text-box {
            border: 1px solid #E2ECE2;
            padding: 20px;
            margin: 20px;
            background-color: #F7F7F7;
        }

        a {
            color: black;
            text-decoration: none;
        }
    </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>
            <h3><span style="font-weight: bold;" th:text="'\\'' + ${param.search} + '\\''"></span>의 검색 결과 총 <span th:text="${searchBooks.size()}"></span>건</h3>
            <hr>

            <!-- 검색 결과 목록 -->
            <div class="row" th:each="searchBook : ${searchBooks}">
                <div class="col-12">
                    <a th:href="@{/board/detail/{bookId}(bookId=${searchBook.booksId})}">
                        <div class="custom-text-box">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card mb-3">
                                        <img class="card-img-top" th:src="${searchBook.imagesList[0].imagesUrl}" th:alt="${searchBook.title}" width="150" height="225">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body">
                                        <h4 class="card-title" th:text="${searchBook.title}" style="font-weight: bold;"></h4>
                                        <br>
                                        <p th:text="'출판사: ' + ${searchBook.publisher}"></p>
                                        <p th:text="'작가: ' + ${searchBook.author}"></p>
                                        <p th:text="'발행일자: ' + ${searchBook.pubDate}"></p>
                                        <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="${searchBook.transactions.status}"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

        </main>
    </div>
</div>
<footer th:replace="~{/footer/footer :: footerFragment}"></footer>
</body>
</html>

검색 화면 기능 생성

Untitled

<!-- 검색창 -->
            <br>
            <form action="/main/search" method="get">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <select class="custom-select rounded-pill" name="searchType">
                            <option value="search">통합검색</option>
                            <option value="title">제목</option>
                            <option value="author">작가</option>
                            <option value="publisher">출판사</option>
                        </select>
                    </div>
                    <input type="text" class="form-control rounded-pill" name="search" placeholder=" " aria-label="Search" aria-describedby="search-addon" />
                    <button type="submit" class="btn btn-outline-primary rounded-pill" style="color: black; border-color: #E2ECE2; background-color: #E2ECE2;">검색</button>
                </div>
            </form>
            <br>

// 검색 메서드
    List<Books> findByTitleContaining(String keyword);
    List<Books> findByAuthorContaining(String keyword);
    List<Books> findByPublisherContaining(String keyword);
    List<Books> findByTitleContainingOrAuthorContainingOrPublisherContaining(String keyword, String keyword1, String keyword2);

public List<Books> searchBooks(String searchType, String keyword) {
        if ("title".equalsIgnoreCase(searchType)) {
            return bookRepository.findByTitleContaining(keyword);
        } else if ("author".equalsIgnoreCase(searchType)) {
            return bookRepository.findByAuthorContaining(keyword);
        } else if ("publisher".equalsIgnoreCase(searchType)) {
            return bookRepository.findByPublisherContaining(keyword);
        } else {
            // 기본은 통합검색
            return bookRepository.findByTitleContainingOrAuthorContainingOrPublisherContaining(keyword, keyword, keyword);
        }
    }

@GetMapping("/search")
    public String searchBooks(@RequestParam(name = "searchType", required = false, defaultValue = "search") String searchType,
                              @RequestParam(name = "search", required = false) String searchInput, Model model) {
        List<Books> searchResults = bookService.searchBooks(searchType, searchInput);
        model.addAttribute("searchBooks", searchResults);

        return "content/board/searchBooks";
    }