기타 수정

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

@@ -156,7 +156,6 @@
             alert("내용을 입력해주세요.");
             return false;
         }
-
         return true;
     }
 </script>
@@ -169,36 +168,57 @@
     <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">
-                    <!-- onsubmit="return validateForm()" -->
+                <form 
+                    name="editorForm" 
+                    id="editor-form" 
+                    class="form-group" 
+                    method="post"
+                    action="/article" 
+                    onsubmit="return false"
+                    >
                     <div class="form-data">
-                        <input type="text" class="form-control" name="article-title"
-                            placeholder="Article Title" autocomplete="off"
-                            value="<c:if test="${editPage eq true}"><c:out value="${article.subtitle}" />
-                        </c:if>">
+                        <input 
+                            type="text" 
+                            class="form-control" 
+                            name="article-title"
+                            placeholder="Article Title" 
+                            autocomplete="off"
+                            value="<c:if test="${editPage eq true}"><c:out value="${article.subtitle}" /></c:if>"
+                        >
                     </div>
                     <div class="form-data">
-                        <input type="text" class="form-control form-control-sm"
-                            name="subtitle" placeholder="What's this article about?"
-                            autocomplete="off" value="<c:if test="${editPage eq true}"><c:out value="${article.subtitle}"/></c:if>">
+                        <input 
+                            type="text" 
+                            class="form-control form-control-sm"
+                            name="subtitle" 
+                            placeholder="What's this article about?"
+                            autocomplete="off" 
+                            value="<c:if test="${editPage eq true}"><c:out value="${article.subtitle}"/></c:if>"
+                        >
                     </div>
                     <div class="form-data">
-                        <textarea class="form-control form-control-sm" rows="8"
+                        <textarea 
+                            class="form-control form-control-sm" 
+                            rows="8"
                             name="article-body"
-                            placeholder="Write your article (in markdown)"><c:if test="${editPage eq true}"><c:out value="${article.content}"/></c:if></textarea>
+                            placeholder="Write your article (in markdown)"
+                        ><c:if test="${editPage eq true}"><c:out value="${article.content}"/></c:if></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>
                     </div>
-                    <button class="btn-signUp" onclick="submitForm()">Publish
-                        Article</button>
+                    <button class="btn-signUp" onclick="submitForm()">Publish Article</button>
                 </form>
             </div>
         </div>

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

@@ -12,7 +12,6 @@
     let articleList = null;
     let ssIsLogin = null;
     let targetFeed = null;
-    let username = null;
     const options = {
         method: 'GET'
     };
@@ -47,7 +46,7 @@
             // display 기본 값은 none이고 값이 block으로 변경되는 경우만 조건으로 건다
             if (clickedFeed === 'global-feed') {
                 display = 'block';
-            } else if (clickedFeed === 'your-feed' && username === writerName) {
+            } else if (clickedFeed === 'your-feed' && "${ssUsername}" === writerName) {
                 display = 'block';
             } else if (clickedTag !== undefined) { // 태그가 클릭된 경우
                 const tags = article.querySelectorAll('.tag');
@@ -129,6 +128,9 @@
 
         // 태그와 게시글 초기화
         tagArray = [];
+        while(tagList.firstChild) {
+            tagList.firstChild.remove();
+        }
         articleList = document.querySelector('#article-list');
         while (articleList.firstChild) {
             articleList.firstChild.remove();
@@ -149,8 +151,7 @@
                 const {
                     articles,
                     paging
-                } = json;
-                username = "${ssUsername}";
+                } = json;               
 
                 loadArticle(articles);
                 nextPageLoad(articles, paging);
@@ -322,7 +323,7 @@
             articlePreview.appendChild(aPreviewLink);
 
             if (targetFeed.id === 'your-feed') {
-                articlePreview.style.display = (username === article.writerName) ? 'block' : 'none';
+                articlePreview.style.display = ("${ssUsername}" === article.writerName) ? 'block' : 'none';
             }
 
             articleList.appendChild(articlePreview);
@@ -420,7 +421,6 @@
                             articles,
                             paging
                         } = json;
-                        username = "${ssUsername}";
                         setTimeout(() => {
                             articleList.removeChild(loading);
                             loadArticle(articles);
@@ -431,8 +431,7 @@
         }
     }
 
-    window.onload = (event) => {
-
+    window.onload = (event) => {       
         ssIsLogin = "${ssIsLogin}";
 
         targetFeed = (ssIsLogin === "true") ? window.document.querySelector('#your-feed') : window.document
@@ -454,7 +453,6 @@
                     articles,
                     paging
                 } = json;
-                username = "${ssUsername}";
 
                 loadArticle(articles);
                 nextPageLoad(articles, paging);

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

@@ -36,20 +36,6 @@
                 <p>
                     <a href="/user/signin">Have an account?</a>
                 </p>
-
-                <!-- <form:form id="signup-form" class="form-group" action="/user/signup" method="post" modelAttribute="userDTO">
-                    <div class="form-data">
-                        <form:input type="text" class="form-control" path="username" name="username" placeholder="Username" autocomplete="off" />
-                    </div>
-                    <div class="form-data">
-                        <form:input type="email" class="form-control" path="email" name="email" placeholder="Email" autocomplete="off" />
-                    </div>
-                    <div class="form-data">
-                        <form:input type="password" class="form-control" path="password" name="password" placeholder="Password" autocomplete="off" />
-                    </div>
-                    <form:button class="btn-signUp">Sign up</form:button>
-                </form:form> -->
-
                 <!-- onsubmit="return false"의 경우 action이 발생하지 않는다 -->
                 <form 
                     name="signupForm"

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

@@ -8,14 +8,9 @@
 <jsp:include page="/WEB-INF/jsp/include/head.jsp"></jsp:include>
 <script>
     let targetFeed = null;
-    let params = {
-        articleId: -1,
-        feed: 'your-feed'
-    };
-    let query = Object.keys(params)
-                .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
-                .join('&');
-    let url = '/article/page/users/${user.id}?' + query;
+    let params = {};
+    let query = null;
+    let url = null;
     let loadingArticles = null;
     let articleList = null;
     const tagSet = new Set();
@@ -23,22 +18,6 @@
     const follow = 'Follow ' + "${user.username}";
     const unfollow = 'Unfollow ' + "${user.username}";
 
-    // feed를 바꾼 경우
-    const filterArticle = (option) => {
-        const { clickedFeed } = option;
-        const articles = document.querySelectorAll('.article-preview');
-
-        articles.forEach(article => {
-            let display = 'none';
-
-            // display 기본 값은 none이고 값이 block으로 변경되는 경우만 조건으로 건다.
-            if(clickedFeed === 'favorite-feed') {
-                display = 'block';
-            } else if(clickedFeed === 'your-feed') {
-                display = 'block';
-            }
-        });
-    }
     // 게시글 목록 로딩
     const setLoading = (type) => {
         let loadingDisplay = null;
@@ -56,7 +35,7 @@
         articleList.style.display = contentDisplay;
     }
 
-    // 자신의 게시글이 없는 경우
+    // 게시글이 없는 경우
     const noContent = () => {
         if(articleList.firstChild === null) {
             const p = document.createElement('p');
@@ -82,7 +61,8 @@
         // targetFeed 초기화
         targetFeed = currentFeed;
         setLoading('on');
-
+        console.log(targetFeed)
+        console.log(articleList.firstChild)
         // 게시글 초기화
         while(articleList.firstChild) {
             articleList.firstChild.remove();
@@ -91,7 +71,7 @@
         params = {
             articleId: -1,
             feed: targetFeed.id
-        }
+        };
         query = Object.keys(params)
                 .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
                 .join('&');
@@ -105,12 +85,14 @@
 
                 displayArticles(articles);
                 nextPageLoad(articles, paging);
+                console.log(articleList.firstChild)
+
+                setTimeout(() => {
+                    setLoading('off');
+                    noContent();
+                }, 1000)
             })
-        filterArticle({ 'clickedFeed': currentFeed.id });
-        setTimeout(() => {
-            setLoading('off');
-            noContent();
-        }, 1000);
+
     }
 
     // 좋아요 버튼
@@ -161,15 +143,16 @@
     // 사용자 팔로우
     const userFollow = () => {
         const followBtn = document.querySelector('.follow-btn');
+        const req = {
+            fromUser: "${ssId}",
+            toUser: "${user.id}"
+        };
 
         if("${ssIsLogin}" === "true") { // 로그인한 경우에만 팔로우 기능 사용 가능
             if(followBtn.classList.contains('active')) { // 팔로우 취소
                 followBtn.querySelector('.follow').textContent = follow;
                 fetch("/user/unfollow", {
-                    body: JSON.stringify({
-                        fromUser: "${ssId}",
-                        toUser: "${user.id}"
-                    }),
+                    body: JSON.stringify(req),
                     method: 'DELETE',
                     headers: {
                         "Content-Type": "application/json"
@@ -183,10 +166,7 @@
             } else { // 팔로우하기
                 followBtn.querySelector('.follow').textContent = unfollow;
                 fetch("/user/follow", {
-                    body: JSON.stringify({
-                        fromUser: "${ssId}",
-                        toUser: "${user.id}"
-                    }),
+                    body: JSON.stringify(req),
                     method: 'POST',
                     headers: {
                         "Content-Type": 'application/json'
@@ -271,7 +251,6 @@
             const articlePreview = document.createElement('article');
             articlePreview.classList.add('article-preview');
             articlePreview.append(divArticleMeta, aPreviewLink);
-            articlePreview.style.display = 'block';
             articleList.appendChild(articlePreview);
         })
     }
@@ -280,7 +259,6 @@
         // 더 조회될 수 있는 게시글이 있는지 여부
         if(paging.isNext) {
             const moreButton = document.createElement('button');
-            const articleList = document.querySelector('#article-list');
             const loading = document.createElement('div');
 
             moreButton.textContent = '더보기';
@@ -294,7 +272,7 @@
                 articleList.appendChild(loading); // 로딩 생성
 
                 // 현재 페이지의 마지막 게시글 id
-                params['articleId'] = articles[articles.length - 1].id;
+                params.articleId = articles[articles.length - 1].id;
                 query = Object.keys(params)
                         .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
                         .join('&');
@@ -317,11 +295,21 @@
             }
         }
     }
+    
     window.onload = () => {
         targetFeed = document.querySelector('.nav-item.active');
         loadingArticles = window.document.querySelector('#article-loading');
         articleList = document.querySelector('#article-list');
+        params = {
+            articleId: -1,
+            feed: 'your-feed'
+        };
+        query = Object.keys(params)
+                    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
+                    .join('&');
+        url = '/article/page/users/${user.id}?' + query;
 
+        // 팔로우 하고 있는 경우
         const followString = document.querySelector('.follow-btn');
         if("${isFollow}" === "true"){
             followString.classList.add('active');

realworld/src/main/webapp/resources/css/style.css

@@ -1,3 +1,4 @@
+/* 기본 설정 */
 :root {
     --green-color: #5CB85C;
     --white-color: #ffffff;
@@ -9,6 +10,7 @@
     --dark-green-color: #3c8a3c;
 }
 
+/* columns */
 .col-1 {
     width: 8.33%;
     padding-left: 15px;
@@ -111,22 +113,25 @@ button {
     padding-left: 1rem;
     padding-right: 1rem;
 }
-    @media (min-width: 544px) {
-        .container {
-            max-width: 576px; } 
-    }
-    @media (min-width: 768px) {
-        .container {max-width: 720px; } 
-    }
-    @media (min-width: 992px) {
-        .container {
-            max-width: 940px; }
-    }
-    @media (min-width: 1200px) {
-        .container {
-            max-width: 1140px; }   
-    }
 
+@media (min-width: 544px) {
+    .container {
+        max-width: 576px; } 
+}
+@media (min-width: 768px) {
+    .container {
+        max-width: 720px; } 
+}
+@media (min-width: 992px) {
+    .container {
+        max-width: 940px; }
+}
+@media (min-width: 1200px) {
+    .container {
+        max-width: 1140px; }   
+}
+
+/* header */
 .navbar {
     padding: 0.5rem 1rem;
 }
@@ -172,7 +177,7 @@ button {
     font-size: 0.85rem;
 }
 
-/* banner */
+/* main-page banner */
 .home-page .banner {
     background-color: var(--green-color);
     padding: 2rem;
@@ -194,7 +199,6 @@ button {
 
 }
 
-/* article */
 .container.main {
     margin-top: 1.5rem;
 }
@@ -206,6 +210,7 @@ button {
     margin-right: -15px;
 }
 
+/* article toggle button */
 .toggle .nav {
     overflow: hidden;
     margin-bottom: -1px;
@@ -222,13 +227,7 @@ button {
     color: var(--light-grey-color);
 }
 
-/* 추가 */
-.toggle .nav .nav-item div {
-    color: var(--light-grey-color);
-}
-
 .toggle .nav .nav-item.active {
-    float: left;
     padding: 0.5rem 1rem;
     margin-bottom: -1px;
     border-bottom: 3px solid var(--green-color);
@@ -249,10 +248,7 @@ button {
     color: var(--green-color);
 }
 
-.article {
-    clear: both;
-}
-
+/* article */
 .article-preview, #article-loading {
     border-top: 1px solid rgb(0, 0, 0, 0.2);
     padding: 1.5rem 0;
@@ -298,6 +294,22 @@ img {
     color: var(--light-grey-color);
 }
 
+.preview-link h1{
+    color: var(--black-color);
+    line-height: 1.1;
+    font-weight: 600;
+    font-size: 1.5rem;
+    margin-bottom: 0.2rem;
+}
+
+.preview-link p {
+    color: var(--grey-color);
+    font-weight: 300;
+    margin-bottom: 1rem;
+    line-height: 1.3;
+}
+
+/* 좋아요 버튼 */
 .favorite-btn {
     color: var(--green-color);
     font-weight: normal;
@@ -325,21 +337,7 @@ img {
     pointer-events: none;
 }
 
-.preview-link h1{
-    color: var(--black-color);
-    line-height: 1.1;
-    font-weight: 600;
-    font-size: 1.5rem;
-    margin-bottom: 0.2rem;
-}
-
-.preview-link p {
-    color: var(--grey-color);
-    font-weight: 300;
-    margin-bottom: 1rem;
-    line-height: 1.3;
-}
-
+/* article tags */
 .tag-data {
     display: flex;
     justify-content: space-between;
@@ -358,6 +356,7 @@ img {
     margin-left: 3px;
 }
 
+/* main-page */
 .aside {
     background-color: #f2f2f2;
     border-radius: 3px;
@@ -392,6 +391,7 @@ img {
     text-decoration: underline;
 }
 
+/* 다음 페이지 더보기 */
 .more-button {
     float: right;
     margin-top: 0.6rem;
@@ -510,7 +510,7 @@ button:last-child {
     vertical-align: middle;
 }
 
-/* editor */
+/* 게시글 생성, 수정 */
 .container .col-10 {
     text-align: center;
     float: none;
@@ -531,8 +531,7 @@ textarea {
     font-family: 'Source Sans Pro', sans-serif;
 }
 
-.editor-page .tag-list { 
-    /* margin-top: 0.5rem; */
+.editor-page .tag-list {
     flex-wrap: wrap;
 }