Home Explore Help
Register Sign In
dbs333
/
RealWorld
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

기타 수정

Gayeon Park 3 years ago
parent
e1d61f9729
commit
0cbcf848ce
7 changed files with 94 additions and 99 deletions
Split View Show Diff Stats
  1. 24 47
      realworld/src/main/webapp/WEB-INF/jsp/article/article.jsp
  2. 31 27
      realworld/src/main/webapp/WEB-INF/jsp/article/articleDetails.jsp
  3. 1 1
      realworld/src/main/webapp/WEB-INF/jsp/include/header.jsp
  4. 24 11
      realworld/src/main/webapp/WEB-INF/jsp/main.jsp
  5. 14 13
      realworld/src/main/webapp/resources/css/style.css
  6. BIN
      realworld/src/main/webapp/resources/images/avatar.jpg
  7. BIN
      realworld/src/main/webapp/resources/images/avatar.png

+ 24 - 47
realworld/src/main/webapp/WEB-INF/jsp/article/article.jsp
View File 

@@ -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>
 
@@ -21,7 +21,7 @@
 
         editForm = window.document.querySelector('#editor-form');
 
         tagInputArea = window.document.querySelector('#tag-input-area');
 
         tagList = window.document.querySelector('.tag-list');
 
-        
+
 
         const article = "${article}";
 
 
         if (article !== "") {
 
@@ -59,11 +59,11 @@
 
             }
 
         }
 
     }
 
-    
+
 
     const addTag = (tag) => {
 
         if (!tagSet.has(tag)) {
 
             const spanTag = window.document.createElement('span');
 
-            spanTag.classList.add('tag');          
+            spanTag.classList.add('tag');
 
             spanTag.textContent = tag;
 
 
             const btnDelete = window.document.createElement('i');
 
@@ -165,25 +165,26 @@
 
 
     const validateForm = () => {
 
         const articleTitle = editForm['article-title'].value;
 
-        if(articleTitle === null || articleTitle === ""){
 
+        if (articleTitle === null || articleTitle === "") {
 
             alert("제목을 입력해주세요.");
 
             return false;
 
-        } 
+        }
 
         const subtitle = editForm['subtitle'].value;
 
-        if(subtitle === null || subtitle === ""){
 
+        if (subtitle === null || subtitle === "") {
 
             alert("부제목을 입력해주세요.");
 
             return false;
 
         }
 
         const articleBody = editForm['article-body'].value;
 
-        if(articleBody === null || articleBody === ""){
 
+        if (articleBody === null || articleBody === "") {
 
             alert("내용을 입력해주세요.");
 
             return false;
 
-        } 
+        }
 
 
-    return true;
 
+        return true;
 
     }
 
 </script>
 
 </head>
 
+
 
 <body>
 
     <jsp:include page="/WEB-INF/jsp/include/header.jsp"></jsp:include>
 
 
@@ -191,51 +192,26 @@
 
     <div class="container main editor-page">
 
         <div class="row">
 
             <div class="col-10">
 
-                <form 
-                    name="editorForm"
 
-                    id="editor-form"
 
-                    class="form-group"
 
-                    method="post"
 
-                    action="/article"
 
-                    onsubmit="return false"
 
-                >
 
+                <form name="editorForm" id="editor-form" class="form-group" method="post"
 
+                    action="/article" onsubmit="return false">
 
                     <!-- onsubmit="return validateForm()" -->
 
                     <div class="form-data">
 
-                        <input 
-                            type="text" 
-                            class="form-control" 
-                            name="article-title" 
-                            placeholder ="Article Title" 
-                            autocomplete="off"
 
-                            >
 
+                        <input type="text" class="form-control" name="article-title"
 
+                            placeholder="Article Title" autocomplete="off">
 
                     </div>
 
                     <div class="form-data">
 
-                        <input 
-                            type="text" 
-                            class="form-control form-control-sm" 
-                            name="subtitle" 
-                            placeholder ="What's this article about?" 
-                            autocomplete="off"
 
-                            >
 
+                        <input type="text" class="form-control form-control-sm" name="subtitle"
 
+                            placeholder="What's this article about?" autocomplete="off">
 
                     </div>
 
                     <div class="form-data">
 
-                        <textarea 
-                            class="form-control form-control-sm" 
-                            rows="8" 
-                            name="article-body" 
-                            placeholder="Write your article (in markdown)"
 
-                            ></textarea>
 
+                        <textarea class="form-control form-control-sm" rows="8"
 
+                            name="article-body"
 
+                            placeholder="Write your article (in markdown)"></textarea>
 
                     </div>
 
                     <div class="form-data">
 
-                        <input 
-                            id="tag-input-area"
 
-                            type="text" 
-                            class="form-control form-control-sm tag-form" 
-                            name="tags" 
-                            placeholder="Enter tags" 
-                            autocomplete="off"
 
-                            onkeydown="enterKey()"
 
-                        >
 
+                        <input id="tag-input-area" type="text"
 
+                            class="form-control form-control-sm tag-form" name="tags"
 
+                            placeholder="Enter tags" autocomplete="off" onkeydown="enterKey()">
 
                         <div class="tag-list">
 
 
                         </div>
 
@@ -246,4 +222,5 @@
 
         </div>
 
     </div>
 
 </body>
 
+
 
 </html>

+ 31 - 27
realworld/src/main/webapp/WEB-INF/jsp/article/articleDetails.jsp
View File 

@@ -8,24 +8,14 @@
 
 
 <jsp:include page="/WEB-INF/jsp/include/head.jsp"></jsp:include>
 
 <script>
 
-    function favorite() {
 
-        const favArticleBtn = document.querySelectorAll('.favorite-btn');
 
-        if("${ssIsLogin}" === "true"){
 
-            favArticleBtn.forEach(value =>
 
-                value.classList.toggle('active')
 
-            )
 
-        } else {
 
-            location.href = "/user/signin"
 
-        }
 
-    }
 
-        
-
 
-    function follow() {
 
-        const followBtn = document.querySelectorAll('.follow-btn');
 
-        if("${ssIsLogin}" === "true"){
 
-            followBtn.forEach(value => 
-                value.classList.toggle('active')
 
-            )
 
+    function filter(classname) {
 
+        const buttons = document.querySelectorAll('button');
 
+        if("${ssIsLogin}" === "true") {
 
+            buttons.forEach(button => {
 
+                if(button.classList.contains(classname)) {
 
+                    button.classList.toggle('active');
 
+                }
 
+            })
 
         } else {
 
             location.href = "/user/signin"
 
         }
 
@@ -41,6 +31,20 @@
 
             })
 
         }
 
 
+    const createComment = () => {
 
+        const req = {
 
+            userId: "${ssId}",
 
+            articleId: "${articleDetail.id}"
 
+            // content: 
+            // created: 
+        }
 
+        console.log(req.userId);
 
+        const options = {
 
+            method: 'POST'
 
+        }
 
+        fetch('/article/${articleDetal.id}/comment', options)
 
+    } 
+
 
     window.onload = () => {
 
         const tags = document.querySelector('.tag-list');
 
         const tagString = "${articleDetail.tags}"
 
@@ -73,7 +77,7 @@
 
                 <div class="article-meta">
 
                     <div class="metadata">
 
                         <a href="userpage-my.html" class="profile-link">
 
-                            <img src="img/avatar.jpg" alt="">
 
+                            <img src="/resources/images/avatar.png" alt="avatar">
 
                         </a>
 
                         <div class="article-info">
 
                             <a href="userpage-my.html" class="name">
 
@@ -95,10 +99,10 @@
 
                             </c:when>
 
                             <c:otherwise>
 
                                 <div class="buttons">
 
-                                    <button class="follow-btn btn-sm btn-meta" onclick="follow()">
 
-                                        <i class="fas fa-plus"></i>&nbsp;Follow Gerome
 
+                                    <button class="follow-btn btn-sm btn-meta" onclick="filter('follow-btn')">
 
+                                        <i class="fas fa-plus"></i>&nbsp;Follow <c:out value="${articleDetail.writerName}"></c:out>
 
                                     </button>
 
-                                    <button class="favorite-btn btn-sm btn-meta" onclick="favorite()">
 
+                                    <button class="favorite-btn btn-sm btn-meta" onclick="filter('favorite-btn')">
 
                                         <i class="fas fa-heart"></i>
 
                                         <span> Favorite Article </span> 
                                         <span class="count">(564)</span>
 
@@ -126,14 +130,14 @@
 
                 <div class="article-meta">
 
                     <div class="metadata">
 
                         <a href="userpage-my.html" class="profile-link">
 
-                            <img src="img/avatar.jpg" alt="">
 
+                            <img src="/resources/images/avatar.png" alt="avatar">
 
                         </a>
 
                         <div class="article-info">
 
                             <a href="userpage-my.html" class="name">
 
                                 <c:out value="${articleDetail.writerName}"></c:out>
 
                             </a>
 
                             <span class="date">
 
-                                <c:out value="${articleDetail.created}"></c:out>
 
+                                
                             </span>
 
                         </div>
 
                         <div class="buttons">
 
@@ -151,10 +155,10 @@
 
                             </c:when>
 
                             <c:otherwise>
 
                                 <div class="buttons">
 
-                                    <button class="follow-btn btn-sm btn-meta" onclick="follow()">
 
-                                        <i class="fas fa-plus"></i>&nbsp;Follow Gerome
 
+                                    <button class="follow-btn btn-sm btn-meta" onclick="filter('follow-btn')">
 
+                                        <i class="fas fa-plus"></i>&nbsp;Follow <c:out value="${articleDetail.writerName}"></c:out>
 
                                     </button>
 
-                                    <button class="favorite-btn btn-sm btn-meta" onclick="favorite()">
 
+                                    <button class="favorite-btn btn-sm btn-meta" onclick="filter('favorite-btn')">
 
                                         <i class="fas fa-heart"></i>
 
                                         <span> Favorite Article </span> 
                                         <span class="count">(564)</span>

+ 1 - 1
realworld/src/main/webapp/WEB-INF/jsp/include/header.jsp
View File 

@@ -45,7 +45,7 @@
 
                         href="...userpage.html"
 
                         class="link <c:if test="${ssPath eq '/...'}">active</c:if>"
 
                     >
 
-                        <!-- <img src="/resources/images/avatar.jpg" alt=""> -->
 
+                        <img src="/resources/images/avatar.png" alt=""> 
                         <c:out value="${ssUsername}"></c:out>님
 
                     </a>
 
                 </li>

+ 24 - 11
realworld/src/main/webapp/WEB-INF/jsp/main.jsp
View File 

@@ -18,7 +18,8 @@
 
     // 2. 태그를 클릭한 경우
 
     const filterArticle = (option) => {
 
         const { clickedTag, clickedFeed } = option;
 
-        const articles = window.document.querySelectorAll('.article-preview');
 
+        const articles = window.document.querySelectorAll('.article-preview'); 
+        const articleList = document.querySelector('#article-list');
 
 
         articles.forEach(article => {
 
             const writerName = article.querySelector('.name').textContent;
 
@@ -43,6 +44,10 @@
 
                 }
 
             }
 
 
+            // if ((targetFeed.id === 'global-feed' && display === 'none') || (targetFeed.id === 'your-feed' && display === 'none')) {
 
+            //     articleList.innerHTML = `<article class="noArticle">Feed not here yet.</article>`
 
+            // } 
+
 
             article.style.display = display;
 
         });
 
     };
 
@@ -89,6 +94,7 @@
 
         }, 2000);
 
     }
 
 
+
 
     function favoriteBtn(indexNumber) {
 
         const favBtn = document.querySelectorAll('.favorite-btn');
 
         if ("${ssIsLogin}" === "true") {
 
@@ -102,6 +108,7 @@
 
         }
 
     }
 
 
+
 
     window.onload = (event) => {
 
 
         ssIsLogin = "${ssIsLogin}";
 
@@ -131,7 +138,7 @@
 
 
                     console.log(JSON.stringify(article))
 
                     const domParser = new DOMParser();
 
-                    
+
 
                     //태그 배열 생성
 
                     const tagsArray = article.tags.split(',')
 
                     tagsArray.forEach(tag => {
 
@@ -144,6 +151,9 @@
 
                         `
 
                         <div class="article-meta">
 
                             <div class="metadata">
 
+                                <a href="#" class="profile-link">
 
+                                    <img src="/resources/images/avatar.png" alt="avatar">
 
+                                </a>
 
                                 <div class="article-info">
 
                                     <a href="#" class="name"></a>
 
                                     <span class="date"></span>
 
@@ -156,7 +166,7 @@
 
                                 </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();
 
@@ -174,12 +184,12 @@
 
                                 </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)) {
 
@@ -203,10 +213,10 @@
 
                         articlePreview.style.display = (username === article.writerName) ? 'block' : 'none';
 
                     }
 
 
-                    articleList.appendChild(articlePreview);
 
-                    console.log(articlePreview);
 
+                    articleList.appendChild(articlePreview); 
                 });
 
 
+                //태그 정렬
 
                 const tags = Array.from(tagSet);
 
                 const tagList = window.document.querySelector('#tag-list');
 
                 function getSortedArr(array) {
 
@@ -214,6 +224,7 @@
 
                         pv[cv] = (pv[cv] || 0) + 1;
 
                         return pv;
 
                     }, {});
 
+
 
                     const result = [];
 
                     for (let key in counts) {
 
                         result.push([key, counts[key]]);
 
@@ -222,21 +233,22 @@
 
                     result.sort((first, second) => {
 
                         return second[1] - first[1];
 
                     });
 
-                    return result;
 
+
 
+                    return result.slice(0, 10);
 
                 }
 
 
                 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);
 
+                    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
 
@@ -301,9 +313,10 @@
 
                         <article id="article-loading">
 
                             loading articles...
 
                         </article>
 
-                        
+
 
                         <!-- article list -->
 
                         <div id="article-list" style="display: none;">
 
+                            <!-- <article class="noArticle" style="display: none;">Feed not here yet.</article> -->
 
                         </div>
 
                     </div>
 
                 </div>

+ 14 - 13
realworld/src/main/webapp/resources/css/style.css
View File 

@@ -210,7 +210,7 @@ button {
 
 
 .toggle .nav {
 
     overflow: hidden;
 
-    border-bottom: 1px solid rgb(0, 0, 0, 0.2);
 
+    /* border-bottom: 1px solid rgb(0, 0, 0, 0.2); */
 
     margin-bottom: -1px;
 
 }
 
 
@@ -233,7 +233,7 @@ button {
 
     float: left;
 
     padding: 0.5rem 1rem;
 
     margin-bottom: -1px;
 
-    border-bottom: 2px solid var(--green-color);
 
+    border-bottom: 3px solid var(--green-color);
 
 }
 
 
 
@@ -252,7 +252,7 @@ button {
 
     clear: both;
 
 }
 
 
-.article-preview, #article-loading {
 
+.article-preview, #article-loading, .noArticle {
 
     border-top: 1px solid rgb(0, 0, 0, 0.2);
 
     padding: 1.5rem 0;
 
 }
 
@@ -361,13 +361,11 @@ img {
 
     padding: 5px 10px 10px 10px;
 
 }
 
 
-.home-page .aside .tag-list,
 
-.main-page .aside .tag-list {
 
+.home-page .aside .tag-list {
 
     display: inline-block;
 
 }
 
 
-.home-page .aside .tag-list .tag,
 
-.main-page .aside .tag-list .tag {
 
+.home-page .aside .tag-list .tag {
 
     color: var(--white-color);
 
     font-size: 0.8rem;
 
     padding-top: 0.1rem;
 
@@ -382,11 +380,13 @@ img {
 
     border: none;
 
 }
 
 
-.home-page .aside .tag-list .tag:hover,
 
-.main-page .aside .tag-list .tag:hover {
 
+.home-page .aside .tag-list .tag:hover, 
+.home-page .aside .tag-list .tag.active {
 
     background-color: #646d74;
 
 }
 
 
+
 
+
 
 /* Sign in & Sign up */
 
 .container .col-6 {
 
     text-align: center;
 
@@ -544,10 +544,6 @@ textarea {
 
     filter: none;
 
 }
 
 
-.article-page .btn-meta {
 
-     
-}
 
-
 
 .article-page .edit-article,
 
 .article-page .follow-btn {
 
     color: var(--light-grey-color);
 
@@ -710,6 +706,11 @@ textarea {
 
 
 .article-page .card .card-footer i {
 
     color: var(--grey-color);
 
+    cursor: pointer;
 
+}
 
+
 
+.article-page .card .card-footer i:hover {
 
+    color: rgba(0, 0, 0, 0.8);
 
 }
 
 
 .article-page .card .card-footer .user-info {

BIN
realworld/src/main/webapp/resources/images/avatar.jpg
View File


BIN
realworld/src/main/webapp/resources/images/avatar.png
View File