점프 투 스프링부트 추가기능 구현 - 카테고리 기능

• 점프 투 스프링부트 추가기능 구현 네번째, 카테고리 기능 입니다.

• Repository 코드만 포스팅 하겠습니다. 혹시 참조하실 분들은 상세 코드는 아래 PR를 참조해주세요

• 구현 방식

  • Question 엔티티에 카테고리 속성을 추가한다.

    • 저자님의 사이트에서 3개의 게시판 분류가 있는 것을 확인
    • 구현 : 부트스트랩 목록 그룹 활용
      

     <div style="margin-top:10%;">
        <ul class="list-group">
            <li class="list-group-item" aria-current="true" th:classappend="${boardName == 0} ? 'active'">
                <a th:href="@{/question/list/qna}">질문과답변</a>
            </li>
            <li class="list-group-item" th:classappend="${boardName == 1} ? 'active'">
                <a th:href="@{/question/list/free}">자유게시판</a>
            </li>
            <li class="list-group-item" th:classappend="${boardName == 2} ? 'active'">
                <a th:href="@{/question/list/bug}">버그및건의</a>
            </li>
        </ul>
    </div>

  • Enum을 활용하여 가독성 있게 구현

  • Switch / case 문을 활용하여 View에서도 상황에 맞게 처리

• 카테고리 검색

  • 질문 목록 가져올 때 카테고리 조건 추가

  	@Query("select "
  			+ "distinct q "
  			+ "from Question q "
  			+ "left outer join SiteUser u1 on q.author=u1 "
  			+ "left outer join Answer a on a.question=q "
  			+ "left outer join SiteUser u2 on a.author=u2 "
  			+ "where "
  			+ "   (q.category = :category) "
  			+ "   and ( "
  			+ "   q.subject like %:kw% "
  			+ "   or q.content like %:kw% "
  			+ "   or u1.username like %:kw% "
  			+ "   or a.content like %:kw% "
  			+ "   or u2.username like %:kw% "
  			+ "   )")
  		Page<Question> findAllByKeywordAndType(@Param("kw") String kw, @Param("category") Integer category, Pageable pageable);

  • 검색 시 카테고리 And 조건 추가

• 최근 답변 페이지 - 카테고리 구분 추가
  • 카테고리 기능 추가 후 추가 예정

 <table class="table">
        <thead class="table-dark">
        <tr class="text-center">
            <th>구분</th>
            <th>글쓴이</th>
            <th style="width:50%">제목(내용)</th>
            <th>날짜</th>
        </tr>
        </thead>
        <tbody>
        <tr class="text-center" th:each="answer, loop : ${answerList}">
            <td th:text="${answer.question.categoryAsString}">-</td>
            <td th:text="${answer.author.username}"></td>
            <td class="text-start">
                <a th:href="@{|/question/detail/${answer.question.id}#answer_${answer.id}|}">
                    <div class="d-flex gap-1">
                    <p th:if="${answer.question.subject.length() <= 10}" th:text="${'('+answer.question.subject + ')'}"></p>
                    <p th:if="${answer.question.subject.length() > 10}" th:text="${'('+answer.question.subject.substring(0,10) + '...)'}"></p>

                    <p th:if="${answer.content.length() <= 10}" th:text="${'('+answer.content + ')'}"></p>
                    <p th:if="${answer.content.length() > 10}" th:text="${'('+answer.content.substring(0,10) + '...)'}"></p>
                    </div>
                </a>
            </td>
            <td th:text="${#temporals.format(answer.createDate, 'yyyy년 M월 d일 h:mm a')}"></td>
        </tr>
        </tbody>
    </table>

• 상세 코드를 확인하고 싶은 분들은 Git-PR를 참조해주세요.