page type

use PageImpl

src/front/src/components/common/Header.vue

@@ -1,17 +1,19 @@
 <template>
     <header>
-        <span>
+        <div class="header__inner">
-            게시판
+            <span>
-        </span>
+                게시판
+            </span>
 
-        <ul class="clearfix" v-if="!authenticated">
+            <ul class="clearfix" v-if="!authenticated">
-            <li>
+                <li>
-                <router-link to="/auth/login">로그인</router-link>
+                    <router-link to="/auth/login">로그인</router-link>
-            </li>
+                </li>
-            <li>
+                <li>
-                <router-link to="/auth/register">회원가입</router-link>
+                    <router-link to="/auth/register">회원가입</router-link>
-            </li>
+                </li>
-        </ul>
+            </ul>
+    </div>
     </header>
 </template>
 
@@ -31,11 +33,17 @@
 
 <style scoped>
 header {
+    padding: 4px;
+    box-sizing: border-box;
+}
+
+.header__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 4px;
+    max-width: 900px;
-    box-sizing: border-box;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 ul li {

src/front/src/pages/articles/List.vue

@@ -67,7 +67,9 @@
                 console.log(err);
             }
 
-            this.articles = await articleService.getArticles({});
+            const articles = await articleService.getArticles({});
+
+            this.articles = articles.content;
             this.pending = false;
 
             this.stopSpin(true);
@@ -89,14 +91,23 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
+        margin-bottom: 16px;
     }
+
     article a {
         font-size: 18px;
         text-align: left;
     }
 
+    article a:hover {
+        color: black;
+    }
+
     .article-wrapper {
         padding: 20px 16px;
         box-sizing: border-box;
+        max-width: 900px;
+        margin-left: auto;
+        margin-right: auto;
     }
 </style>

src/front/src/services/articleService.js

@@ -8,11 +8,13 @@ export default {
             const accessToken = this.$cookie.get('accessToken');
             const authorization = accessToken ? commonUtil.getAuthenticationHeaderBearer(accessToken) : '';
 
-            const result = await articleApi.getArticles({
+            const {data} = await articleApi.getArticles({
                 page,
                 size
             }, authorization);
-            return result.data;
+
+            return data;
+
         } catch (err) {
             alert('문제가 발생하였습니다.');
             console.log(err.response);

src/main/java/com/example/vue/domain/article/ArticleController.java

@@ -2,6 +2,8 @@ package com.example.vue.domain.article;
 
 import com.example.vue.domain.user.User;
 import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageRequest;
 import org.springframework.data.domain.Pageable;
 import org.springframework.http.HttpStatus;
 import org.springframework.security.core.annotation.AuthenticationPrincipal;
@@ -20,7 +22,7 @@ public class ArticleController {
 
     @ResponseStatus(HttpStatus.OK)
     @GetMapping
-    public List<ArticleResponseDto> getArticles(Pageable pageable, @AuthenticationPrincipal User user) {
+    public Page<ArticleResponseDto> getArticles(Pageable pageable, @AuthenticationPrincipal User user) {
         return articleService.findAll(pageable, user);
     }
 

src/main/java/com/example/vue/domain/article/ArticleRepository.java

@@ -2,8 +2,10 @@ package com.example.vue.domain.article;
 
 import com.example.vue.domain.user.User;
 import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
 import org.springframework.data.domain.PageRequest;
 import org.springframework.data.domain.Pageable;
+import org.springframework.data.web.PageableDefault;
 import org.springframework.stereotype.Repository;
 
 import javax.persistence.EntityManager;
@@ -31,6 +33,13 @@ public class ArticleRepository {
             .getResultList();
     }
 
+    public Integer findTotal() {
+        return em.createNamedQuery("findAll", Article.class)
+            .setFirstResult(0)
+            .setMaxResults(999999999)
+            .getResultList().size();
+    }
+
     public Optional<Article> findById(Long id) {
         return Optional.ofNullable(em.find(Article.class, id));
     }

src/main/java/com/example/vue/domain/article/ArticleService.java

@@ -2,6 +2,8 @@ package com.example.vue.domain.article;
 
 import com.example.vue.domain.user.User;
 import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageImpl;
 import org.springframework.data.domain.Pageable;
 import org.springframework.stereotype.Service;
 
@@ -32,11 +34,17 @@ public class ArticleService {
         return new ArticleResponseDto(articleRepository.save(article), user);
     }
 
-    public List<ArticleResponseDto> findAll(Pageable pageable, User user) {
+    public Page<ArticleResponseDto> findAll(Pageable pageable, User user) {
-        return articleRepository.findAll(pageable)
+        List<ArticleResponseDto> contents = articleRepository.findAll(pageable)
             .stream()
             .map(article -> new ArticleResponseDto(article, user))
             .collect(Collectors.toList());
+
+        int total = articleRepository.findTotal();
+
+        Page<ArticleResponseDto> page = new PageImpl<>(contents, pageable, total);
+
+        return page;
     }
 
     public ArticleResponseDto findById(Long id, User user) {