[Spring] 검색 결과 미리보기

이전 방법

제목이 ‘일상, 토요일, 주말 …’ 이런 식이여서 검색 시 제목으로 검색했었다.

 

변경 내용

제목을 일월시로 통일 시켜놔서 검색 시 게시글 내용으로 검색한다.

 

그래서 검색하면 네이버 카페처럼 내용이 조금 보여졌으면 싶었고 웹에디터 라이브러리(CKEditor5) 사용 중이라 게시글 내용이 html 코드로 파싱된다는 점을 인지했다.(막상 지금 들어가서 검색하니 안보이는데.. 전에 보였던건 다른 웹페이지에서 보였던 것 같다)

 

html 코드를 제거하고 문자열만 추출하는 방법은 크게 2가지로 나뉘는데 첫번째 방법은 정규식으로 제거하기 또 하나는 html 파서 라이브러리를 사용해 html 코드를 제거하는 것이였다.

 

정규식으로 html 코드를 추출하는 것 보다 라이브러리를 사용해서 제거하는 방법이 훨씬 더 수월하고 간편할 것 같아 라이브러리를 사용하기로 했다.

1. gradle 의존성 주입

implementation 'org.jsoup:jsoup:1.7.2'

 

ClassNotFoundException이 발생한다면 (STS4 기준) Gradle Tasks - build - clean 후 실행해보자.

2. HTML 코드 파싱 테스트

for(int i = 0; i < idx; i++) {
    Map<String, Object> post = boardGet.get(i);
    String contents_         = (String) post.get("CONTENTS");
    Document document        = Jsoup.parse(contents_);
    String contents          = document.text();

    log.info("[BEFORE] contents = {}", contents_);
    log.info("[AFTER ] contents = {}", contents);
}

 

c.p.homepage.board.BoardController : [BEFORE] contents = <p>asd</p>
c.p.homepage.board.BoardController : [AFTER ] contents = asd

 

이후 어떻게 담아서 표출할지는 알아서 정한다.

 

if(!search.isEmpty()) {
    for(int i = 0; i < idx; i++) {
        Map<String, Object> post = boardGet.get(i);
        String contents_         = (String) post.get("CONTENTS");
        String contents          = Jsoup.parse(contents_).text();
        int startIdx             = contents.indexOf(search);
        int endIdx               = Math.min((startIdx + 50), contents.length());
        String previewContents   = contents.substring(startIdx, endIdx);

        post.put("PREVIEW_CONTENTS", previewContents);

        log.info("post = {}", post);
    }
}

 

c.p.homepage.board.BoardController : post = {ROWNUMBER=1, ICODE=B003, YOUTUBE_ID=, CREATED_AT=2024-10-12 22:32:10.0, PREVIEW_CONTENTS=css가 제일 힘드네, IBOARD=137, TITLE=sdf, TUMBNAIL=/thumbnail/880846d7-5df9-40cd-893c-a78fc8c40e1b.jpg, SEC_YN=N, CONTENTS=<figure class="image"><img src="/img/e4b0301d-52a9-44b3-aada-993009f640f3.jpg"></figure><p>css가 제일 힘드네</p>}

3. 화면단 작업

이전 코드

<tbody>
    <tr th:each="data : ${DATA}">
        <td class="mobile-hide" th:text="${data.ROWNUMBER}">번호</td>
        <td th:if="${param.code.toString() eq 'B004'}" th:text="${data.GENRE}">장르</td>
        <td class="td-title">
            <a th:href="@{/board/read-md(iboard = ${data.IBOARD})}" th:text="${data.TITLE}">제목</a>
            <svg th:if="${data.SEC_YN == 'Y'}" xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-lock-fill" viewBox="0 0 16 16">
              <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"/>
            </svg>
        </td>
        <td class="mobile-hide" th:text="${#dates.format(data.CREATED_AT, 'yyyy-MM-dd HH:mm')}">작성일</td>
    </tr>
    <tr th:if="${#lists.isEmpty(DATA)}">
        <th:block th:if="${param.code.toString() eq 'B004'}">
            <td colspan="4">검색 결과가 없습니다. 검색 단어: <strong th:text="${SEARCH_DATA.search}"></strong></td>
        </th:block>
        <th:block th:if="${param.code.toString() ne 'B004'}">
            <td colspan="3">검색 결과가 없습니다. 검색 단어: <strong th:text="${SEARCH_DATA.search}"></strong></td>
        </th:block>
    </tr>
</tbody>

 

 

수정 코드

<table class="board-table">
    <thead>
        <tr>
            <th scope="col" class="th-num mobile-hide">번호</th>
            <th th:if="${param.code.toString() eq 'B004'}" scope="col">장르</th>
            <th scope="col" class="th-title">제목</th>
            <th scope="col" class="th-date mobile-hide">작성일</th>
        </tr>
    </thead>
    <tbody>
        <th:block th:each="data : ${DATA}">
            <tr>
                <td class="mobile-hide" th:text="${data.ROWNUMBER}">번호</td>
                <td th:if="${param.code.toString() eq 'B004'}" th:text="${data.GENRE}">장르</td>
                <td class="td-title">
                    <a th:href="@{/board/read-md(iboard = ${data.IBOARD})}" th:text="${data.TITLE}">제목</a>
                    <svg th:if="${data.SEC_YN == 'Y'}" xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-lock-fill" viewBox="0 0 16 16">
                      <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"/>
                    </svg>
                </td>
                <td class="mobile-hide" th:text="${#dates.format(data.CREATED_AT, 'yyyy-MM-dd HH:mm')}">작성일</td>
            </tr>
            <tr th:if="${SEARCH_DATA.search != ''}">
                <td colspan="4" class="preview">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="gray" class="bi bi-arrow-return-right" viewBox="0 0 15 10">
                  <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5"/>
                </svg>

                <span th:text="${data.PREVIEW_CONTENTS}"></span></td>
            </tr>
        </th:block>
        <tr th:if="${#lists.isEmpty(DATA)}">
            <th:block th:if="${param.code.toString() eq 'B004'}">
                <td colspan="4">검색 결과가 없습니다. 검색 단어: <strong th:text="${SEARCH_DATA.search}"></strong></td>
            </th:block>
            <th:block th:if="${param.code.toString() ne 'B004'}">
                <td colspan="3">검색 결과가 없습니다. 검색 단어: <strong th:text="${SEARCH_DATA.search}"></strong></td>
            </th:block>
        </tr>
    </tbody>
</table>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

결과적으로 배포하고 검색해보면 아래와 같이 표출된다.

 

 

 

내가 원하던 대로 나온다.

 

하나 아쉬운 게 있다면 검색어에 해당하는 문자열만 바탕색 주고 싶은데 할려하니 시간이 없어서 못했다.

 

나중에 기말고사 끝나면 하던가.. 해야겠다.