[DESIGN] #118 - Add main top 5 posts

likelion-backendschool · Sep 26, 2022 · 64620ff · 64620ff
1 parent ac689a6
commit 64620ff
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/src/main/java/com/matdongsan/service/PostService.java b/src/main/java/com/matdongsan/service/PostService.java
@@ -120,4 +120,8 @@ public Page<Post> getList(String keyword , int page , String searchType ,Pageabl
 
         return postRepository.findAll(pageable);
     }
+
+    public List<Post> findTop5Post() {
+        return postRepository.findPostTop5();
+    }
 }
diff --git a/src/main/java/com/matdongsan/web/controller/MainPageController.java b/src/main/java/com/matdongsan/web/controller/MainPageController.java
@@ -1,17 +1,22 @@
 package com.matdongsan.web.controller;
 
+import com.matdongsan.service.PostService;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 
 @Controller
 @RequiredArgsConstructor
 @Slf4j
 public class MainPageController {
 
+    private final PostService postService;
+
     @GetMapping("/")
-    public String mainPageMapping() {
+    public String mainPageMapping(Model model) {
+        model.addAttribute("top5", postService.findTop5Post());
         return "index";
     }
 

diff --git a/src/main/resources/templates/fragments/header.html b/src/main/resources/templates/fragments/header.html
@@ -273,16 +273,16 @@ <h6 class="item-title">Zinia Jessy</h6>
           <div class="inline-item">
             <div class="dropdown dropdown-admin">
               <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
-                                      <span class="media">
-                                          <span class="item-img bg-white rounded-circle">
-                                              <svg th:data-jdenticon-value="${#authentication.principal.nickname}" width="45" height="45" class="rounded-circle"></svg>
-                                              <!--<img src="/media/figure/chat_5.jpg" alt="Chat">-->
-                                              <!--<span class="acc-verified"><i class="icofont-check"></i></span>-->
-                                          </span>
-                                          <span class="media-body">
-                                              <span class="item-title" sec:authentication="principal.nickname">닉네임</span>
-                                          </span>
-                                      </span>
+                  <span class="media">
+                      <span class="item-img bg-white rounded-circle">
+                          <svg th:data-jdenticon-value="${#authentication.principal.nickname}" width="45" height="45" class="rounded-circle"></svg>
+                          <!--<img src="/media/figure/chat_5.jpg" alt="Chat">-->
+                          <!--<span class="acc-verified"><i class="icofont-check"></i></span>-->
+                      </span>
+                      <span class="media-body">
+                          <span class="item-title" sec:authentication="principal.nickname">닉네임</span>
+                      </span>
+                  </span>
               </button>
               <div class="dropdown-menu dropdown-menu-right">
                 <ul class="admin-options">

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -73,6 +73,31 @@ <h5 class="card-title">맛집 둘러보기</h5>
                 </div>
             </div>
         </div>-->
+        <h3>인기 포스팅 TOP 5</h3>
+        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+            <ol class="carousel-indicators">
+                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+            </ol>
+            <div class="carousel-inner">
+                <div class="carousel-item" th:each="top, status : ${top5}" th:classappend="${status.index == 0} ? active" style=" cursor: pointer;" th:onclick="'location.href=\'' + @{/post/{postId}(postId = ${top.id})} + '\''">
+                    <img class="d-block w-100" th:src="@{${top.getPlace().mainPhotoUrl}}" style="height: 300px;">
+                    <div class="carousel-caption d-none d-md-block">
+                        <h5 th:text="${top.title}">제목</h5>
+                        <p th:utext="${top.content}">내용 조금</p>
+                    </div>
+                </div>
+            </div>
+            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="sr-only">Next</span>
+            </a>
+        </div>
     </div>
 </div>
 </body>