태그 정렬 수정

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

@@ -2,7 +2,7 @@
 <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
 <%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
-<%@ taglib uri = "http://java.sun.com/jsp/jstl/functions" prefix = "fn" %>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
 <%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
 
 <jsp:include page="/WEB-INF/jsp/include/head.jsp"></jsp:include>
@@ -19,12 +19,12 @@
     const filterArticle = (option) => {
         const { clickedTag, clickedFeed } = option;
         const articles = window.document.querySelectorAll('.article-preview');
-     
+
         articles.forEach(article => {
             const writerName = article.querySelector('.name').textContent;
-            
+
             let display = 'none';
-            
+
             // display 기본 값은 none이고 값이 block으로 변경되는 경우만 조건으로 건다
             if (clickedFeed === 'global-feed') {
                 display = 'block';
@@ -50,7 +50,7 @@
     const setLoading = (type) => {
         let loadingDisplay = null;
         let contentDisplay = null;
-        
+
         if (type === 'on') {
             loadingDisplay = 'block';
             contentDisplay = 'none';
@@ -70,7 +70,7 @@
         // 이미 포커싱된 탭이라면 중지
         const parentNode = event.target.parentNode;
         if (parentNode.classList.contains('active')) {
-            return ;
+            return;
         }
 
         const unFocusedFeed = parentNode;
@@ -91,9 +91,9 @@
 
     function favoriteBtn(indexNumber) {
         const favBtn = document.querySelectorAll('.favorite-btn');
-        if("${ssIsLogin}" === "true"){
+        if ("${ssIsLogin}" === "true") {
             favBtn.forEach(value => {
-                if(value.classList.contains(indexNumber)){
+                if (value.classList.contains(indexNumber)) {
                     value.classList.toggle('active');
                 }
             })
@@ -103,134 +103,163 @@
     }
 
     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' };
-            const tagSet = new Set();
-            setLoading('on');
-            
-            fetch('/article/all', options)
-                .then(response => response.json())
-                .then(json => {
-                    const { articles } = json;
-                    username = "${ssUsername}";
+
+        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' };
+        const tagSet = new Set();
+        setLoading('on');
+        const tagArray = [];
+
+        fetch('/article/all', options)
+            .then(response => response.json())
+            .then(json => {
+                const { articles } = json;
+                username = "${ssUsername}";
+
+                articles.forEach(article => {
+
+                    console.log(JSON.stringify(article))
+                    const domParser = new DOMParser();
                     
-                    articles.forEach(article => {
+                    //태그 배열 생성
+                    const tagsArray = article.tags.split(',')
+                    tagsArray.forEach(tag => {
+                        if (tag !== '') {
+                            tagArray.push(tag);
+                        }
+                    })
 
-                        console.log(JSON.stringify(article))
-                        const domParser = new DOMParser();
-    
-                        const domStrArticleMeta = 
+                    const domStrArticleMeta =
                         `
-                            <div class="article-meta">
-                                <div class="metadata">
-                                    <div class="article-info">
-                                        <a href="#" class="name"></a>
-                                        <span class="date"></span>
-                                    </div>
-                                </div>
-                                <div>
-                                    <button class="favorite-btn \${article.id}" onclick="favoriteBtn(\${article.id})">
-                                        <i class="fas fa-heart"></i>
-                                        <span class="count">564</span>
-                                    </button>
+                        <div class="article-meta">
+                            <div class="metadata">
+                                <div class="article-info">
+                                    <a href="#" class="name"></a>
+                                    <span class="date"></span>
                                 </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 domStrPreviewLink = 
+                            <div>
+                                <button class="favorite-btn \${article.id}" onclick="favoriteBtn(\${article.id})">
+                                    <i class="fas fa-heart"></i>
+                                    <span class="count">564</span>
+                                </button>
+                            </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 domStrPreviewLink =
                         `
-                            <a href="/article/\${article.id}" class="preview-link">
-                                <h1 class="preview-title"></h1>
-                                <p></p>
-                                <div class="tag-data">
-                                    <span>Read more...</span>
-                                    <ul class = "tag-list">
-    
-                                    </ul>
-                                </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);
-                            })
-                        }
-    
-                        // 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);
-                        console.log(articlePreview);
-                    });
-                    
-                    const tags = Array.from(tagSet);
-                    const tagList = window.document.querySelector('#tag-list');
-                    tags.forEach(tag => {
-                        const a = window.document.createElement('a');
-                        a.classList.add("tag");
-                        a.textContent = tag;
-                        a.onclick = () => {
-                            filterArticle({ 'clickedTag': tag });
-                        }
-                        tagList.appendChild(a);
+                        <a href="/article/\${article.id}" class="preview-link">
+                            <h1 class="preview-title"></h1>
+                            <p></p>
+                            <div class="tag-data">
+                                <span>Read more...</span>
+                                <ul class = "tag-list">
+
+                                </ul>
+                            </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);
+                        })
+                    }
+
+                    // 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);
+                    console.log(articlePreview);
+                });
+
+                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];
                     });
-    
-
-                    // hide loadings
-                    setLoading('off');
-
-                    // loadingTag.style.display = 'none';
-                    // loadingArticle.style.display = 'none';
-    
-                    // // show articles and tags
-                    // articleList.style.display = 'block';
-                    // if (tagSet.size === 0) {
-                    //     noTag.style.display = 'block';
-                    // } else {
-                    //     tagList.style.display = 'block';
-                    // }
+                    return result;
+                }
+
+                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 });
+                    }
+                    tagList.appendChild(a);
+                    console.log(tagList.appendChild(a));
                 });
+
+                // hide loadings
+                setLoading('off');
+
+                // loadingTag.style.display = 'none';
+                // loadingArticle.style.display = 'none';
+
+                // // show articles and tags
+                // articleList.style.display = 'block';
+                // if (tagSet.size === 0) {
+                //     noTag.style.display = 'block';
+                // } else {
+                //     tagList.style.display = 'block';
+                // }
+            });
     } 
 </script>
 <style>
 
 </style>
 </head>
+
 <body>
     <jsp:include page="/WEB-INF/jsp/include/header.jsp"></jsp:include>
 
@@ -255,11 +284,13 @@
                             <!-- 로그인 상태인 경우에만 your feed on -->
                             <c:if test="${ssIsLogin eq true}">
                                 <li id="your-feed" class="nav-item">
-                                    <a href="javascript:void(0);" onclick="focusFeed()">Your Feed</a>
+                                    <a href="javascript:void(0);" onclick="focusFeed()">Your
+                                        Feed</a>
                                 </li>
                             </c:if>
                             <li id="global-feed" class="nav-item">
-                                <a href="javascript:void(0);" onclick="focusFeed()">Global Feed</a>
+                                <a href="javascript:void(0);" onclick="focusFeed()">Global
+                                    Feed</a>
                             </li>
                         </ul>
                     </div>
@@ -270,11 +301,11 @@
                         <article id="article-loading">
                             loading articles...
                         </article>
-
+                        
                         <!-- article list -->
                         <div id="article-list" style="display: none;">
                         </div>
-                    </div>   
+                    </div>
                 </div>
 
                 <!-- aside -->
@@ -285,7 +316,7 @@
                         <div id="tag-loading">
                             loading tags...
                         </div>
-                        
+
                         <!-- 태그 -->
                         <div id="tag-list" class="tag-list" style="display: none;">
                         </div>
@@ -295,4 +326,5 @@
         </div>
     </div>
 </body>
+
 </html>