페이징 초기

realworld/src/main/java/com/dbs/realworld/controller/ArticleController.java

@@ -191,8 +191,13 @@ public class ArticleController {
     @GetMapping("/page")
     public ResponseEntity getArticles(HttpServletRequest request, 
         @RequestParam(defaultValue = "global-feed") String feed, 
-        @RequestParam(defaultValue = "-1") int articleId) {
-        int userId = (int) request.getSession().getAttribute("ssId");
+            @RequestParam(defaultValue = "-1") int articleId) {
+        
+        int userId = -1;
+        HttpSession session = request.getSession();
+        if (session.getAttribute("ssId") != null) {
+            userId = (int) request.getSession().getAttribute("ssId");
+        }
         
         List<ArticleDTO> articleDTOs = this.articleService.find(articleId, feed, userId);
         // List<ArticleDTO> articleDTOs = this.articleService.find(articleId, feed, 10);

realworld/src/main/webapp/WEB-INF/jsp/main.jsp

@@ -13,6 +13,8 @@
     let ssIsLogin = null;
     let targetFeed = null;
     let username = null;
+    const tagSet = new Set();
+    const tagArray = [];
 
     // 1. feed를 바꾼 경우
     // 2. 태그를 클릭한 경우
@@ -108,39 +110,50 @@
         }
     }
 
+    function getSortedArr(array) {
+        const counts = array.reduce((pv, cv) => {
+            pv[cv] = (pv[cv] || 0) + 1;
+            return pv;
+        }, {});
 
-    window.onload = (event) => {
-
-        ssIsLogin = "${ssIsLogin}";
+        const result = [];
+        for (let key in counts) {
+            result.push([key, counts[key]]);
+        };
 
-        targetFeed = (ssIsLogin === "true") ? window.document.querySelector('#your-feed') : window.document.querySelector('#global-feed');
-        targetFeed.classList.add('active');
+        result.sort((first, second) => {
+            return second[1] - first[1];
+        });
 
-        loadingTag = window.document.querySelector('#tag-loading');
-        loadingArticle = window.document.querySelector('#article-loading');
-        articleList = window.document.querySelector('#article-list');
-        noTag = window.document.querySelector('#no-tag');
-        tagList = window.document.querySelector('#tag-list');
+        return result.slice(0, 10);
+    }
 
-        // fetch api call
-        const options = { method: 'GET' };
-        const tagSet = new Set();
-        setLoading('on');
-        const tagArray = [];
+    function tagFilter(event) {
+        let currentValue = document.querySelector('.tag.active');
+        if (currentValue !== null) {
+            currentValue.classList.remove('active');
+        }
+        event.target.classList.add('active');
+    }
 
-        fetch('/article/all', options)
-            .then(response => response.json())
-            .then(json => {
-                const { articles } = json;
-                username = "${ssUsername}";
+    function selectFeed() {
+            if (ssIsLogin === "true") {
+                return 'your-feed'
+            } else {
+                return 'global-feed'
+            }
+    }
 
-                articles.forEach(article => {
+    
+    function loadArticle(articles) {
+        
+        articles.forEach(article => {
 
-                    console.log(JSON.stringify(article))
-                    const domParser = new DOMParser();
+            console.log(JSON.stringify(article))
+            const domParser = new DOMParser();
 
-                    const domStrArticleMeta =
-                        `
+            const domStrArticleMeta =
+                `
                         <div class="article-meta">
                             <div class="metadata">
                                 <a href="#" class="profile-link">
@@ -159,13 +172,13 @@
                             </div>
                         </div>
                         `;
-                    const divArticleMeta = domParser.parseFromString(domStrArticleMeta, 'text/html').body.firstChild;
-                    divArticleMeta.querySelector('.name').textContent = article.writerName;
-                    divArticleMeta.querySelector('.date').textContent = new Date(article.created).toLocaleString();
+            const divArticleMeta = domParser.parseFromString(domStrArticleMeta, 'text/html').body.firstChild;
+            divArticleMeta.querySelector('.name').textContent = article.writerName;
+            divArticleMeta.querySelector('.date').textContent = new Date(article.created).toLocaleString();
 
 
-                    const domStrPreviewLink =
-                        `
+            const domStrPreviewLink =
+                `
                         <a href="/article/\${article.id}" class="preview-link">
                             <h1 class="preview-title"></h1>
                             <p></p>
@@ -177,79 +190,132 @@
                             </div>
                         </a>
                         `;
-                    const aPreviewLink = domParser.parseFromString(domStrPreviewLink, 'text/html').body.firstChild;
-                    aPreviewLink.querySelector('.preview-title').textContent = article.title;
-                    aPreviewLink.querySelector('p').textContent = article.subtitle;
-                    const ul = aPreviewLink.querySelector('.tag-list');
-
-                    if (article.tags !== '') {
-                        article.tags.split(',').forEach(tag => {
-                            if (!tagSet.has(tag)) {
-                                tagSet.add(tag);
-                            }
-
-                            const li = window.document.createElement('li');
-                            li.classList.add('tag');
-                            li.textContent = tag;
-                            ul.appendChild(li);
-                        })
+            const aPreviewLink = domParser.parseFromString(domStrPreviewLink, 'text/html').body.firstChild;
+            aPreviewLink.querySelector('.preview-title').textContent = article.title;
+            aPreviewLink.querySelector('p').textContent = article.subtitle;
+            const ul = aPreviewLink.querySelector('.tag-list');
+
+            if (article.tags !== '') {
+                article.tags.split(',').forEach(tag => {
+                    if (!tagSet.has(tag)) {
+                        tagSet.add(tag);
                     }
 
-                    // article 완성
-                    const articlePreview = window.document.createElement('article');
-                    articlePreview.classList.add('article-preview');
-                    articlePreview.appendChild(divArticleMeta);
-                    articlePreview.appendChild(aPreviewLink);
+                    const li = window.document.createElement('li');
+                    li.classList.add('tag');
+                    li.textContent = tag;
+                    ul.appendChild(li);
+                })
+            }
 
-                    if (targetFeed.id === 'your-feed') {
-                        articlePreview.style.display = (username === article.writerName) ? 'block' : 'none';
-                    }
+            // article 완성
+            const articlePreview = window.document.createElement('article');
+            articlePreview.classList.add('article-preview');
+            articlePreview.appendChild(divArticleMeta);
+            articlePreview.appendChild(aPreviewLink);
+
+            if (targetFeed.id === 'your-feed') {
+                articlePreview.style.display = (username === article.writerName) ? 'block' : 'none';
+            }
 
-                    articleList.appendChild(articlePreview); 
-
-                    //태그 배열 생성
-                    const tagsArray = article.tags.split(',')
-                    tagsArray.forEach(tag => {
-                        if (tag !== '') {
-                            tagArray.push(tag);
-                        }
-                    })
-                });
-
-                //태그 정렬
-                const tags = Array.from(tagSet);
-                const tagList = window.document.querySelector('#tag-list');
-                function getSortedArr(array) {
-                    const counts = array.reduce((pv, cv) => {
-                        pv[cv] = (pv[cv] || 0) + 1;
-                        return pv;
-                    }, {});
-
-                    const result = [];
-                    for (let key in counts) {
-                        result.push([key, counts[key]]);
-                    };
-
-                    result.sort((first, second) => {
-                        return second[1] - first[1];
-                    });
-
-                    return result.slice(0, 10);
+            articleList.appendChild(articlePreview);
+
+            //태그 배열 생성
+            const tagsArray = article.tags.split(',')
+            tagsArray.forEach(tag => {
+                if (tag !== '') {
+                    tagArray.push(tag);
                 }
+            })
+        });
+
+        //태그 정렬
+        const tags = Array.from(tagSet);
+        const tagList = window.document.querySelector('#tag-list');
 
-                getSortedArr(tagArray).forEach(tag => {
-                    const a = document.createElement('a');
-                    const tagString = tag.join(',');
-                    const tagValue = tagString.substring(0, tagString.lastIndexOf(','));
-                    const tagCount = tagString.substring(tagString.lastIndexOf(',') + 1);
 
-                    a.classList.add("tag");
-                    a.textContent = `\${tagValue} (\${tagCount})`
-                    a.onclick = () => {
-                        filterArticle({ 'clickedTag': tagValue });
+        getSortedArr(tagArray).forEach(tag => {
+            const a = document.createElement('a');
+            const tagString = tag.join(',');
+            const tagValue = tagString.substring(0, tagString.lastIndexOf(','));
+            const tagCount = tagString.substring(tagString.lastIndexOf(',') + 1);
+
+            a.classList.add("tag");
+            a.textContent = `\${tagValue} (\${tagCount})`
+            a.onclick = (event) => {
+                filterArticle({ 'clickedTag': tagValue });
+
+                // let currentValue = document.querySelector('.tag.active');
+                // if(currentValue !== null) {
+                //     currentValue.classList.remove('active');
+                // }
+                // event.target.classList.add('active');
+            }
+            tagList.appendChild(a);
+        });
+    }
+
+    window.onload = (event) => {
+
+        ssIsLogin = "${ssIsLogin}";
+
+        targetFeed = (ssIsLogin === "true") ? window.document.querySelector('#your-feed') : window.document.querySelector('#global-feed');
+        targetFeed.classList.add('active');
+
+        loadingTag = window.document.querySelector('#tag-loading');
+        loadingArticle = window.document.querySelector('#article-loading');
+        articleList = window.document.querySelector('#article-list');
+        noTag = window.document.querySelector('#no-tag');
+        tagList = window.document.querySelector('#tag-list');
+
+        // fetch api call
+        const options = { method: 'GET' };
+        setLoading('on');
+        
+        let params = {
+            articleId: -1,
+            feed: selectFeed()
+        };
+
+        let query = Object.keys(params)
+                    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
+                    .join('&');
+
+        let url = '/article/page?' + query;
+        console.log(url)
+
+        fetch(url, options)
+            .then(response => response.json())
+            .then(json => {
+                const { articles, paging } = json;
+                username = "${ssUsername}";
+
+                loadArticle(articles);
+
+                if(paging.isNext) {
+                    const moreButton = document.createElement('button');
+                    moreButton.textContent = '더보기';
+                    const articleList = document.querySelector('#article-list');
+                    articleList.appendChild(moreButton);
+                    moreButton.onclick = () => {
+                        params['articleId'] = articles[articles.length - 1].id;
+
+                        query = Object.keys(params)
+                            .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
+                            .join('&');
+
+                        console.log(query);
+                        fetch(url, options)
+                            .then(response => response.json())
+                            .then(json => {
+                                const {articles, paging} = json;
+                                username = "${ssUsername}";
+                                loadArticle(articles);
+                                articleList.removeChild(moreButton);
+                            })
                     }
-                    tagList.appendChild(a);
-                });
+                }
+                console.log(paging.isNext);
 
                 // hide loadings
                 setLoading('off');
@@ -331,7 +397,7 @@
                         </div>
 
                         <!-- 태그 -->
-                        <div id="tag-list" class="tag-list" style="display: none;">
+                        <div id="tag-list" class="tag-list" style="display: none;" onclick="tagFilter(event)">
                         </div>
                     </div>
                 </div>