editor page

realworld/src/main/java/com/dbs/realworld/common/RealWorldInterceptor.java

@@ -8,9 +8,6 @@ import org.springframework.stereotype.Component;
 import org.springframework.web.servlet.HandlerInterceptor;
 import org.springframework.web.servlet.ModelAndView;
 
-import lombok.extern.slf4j.Slf4j;
-
-@Slf4j
 @Component
 public class RealWorldInterceptor implements HandlerInterceptor {
     @Override
@@ -37,6 +34,4 @@ public class RealWorldInterceptor implements HandlerInterceptor {
 
         return HandlerInterceptor.super.preHandle(request, response, handler);
     }
-    
-    
 }

realworld/src/main/resources/application.properties

@@ -1,4 +1,4 @@
-# spring.profiles.active=local
+spring.profiles.active=local
 
 server.port=8080
 

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

@@ -25,16 +25,16 @@
             <c:if test="${ssIsLogin eq true}">
                 <li class="nav-item">
                     <a 
-                        href="...editor.html" 
-                        class="link <c:if test="${ssPath eq '/...'}">active</c:if>"
+                        href="/user/editor" 
+                        class="link <c:if test="${ssPath eq '/user/editor'}">active</c:if>"
                     >
                         <i class="fas fa-edit"></i> New Article
                     </a>
                 </li>
                 <li class="nav-item">
                     <a
-                        href="...settings.html"
-                        class="link <c:if test="${ssPath eq '/...'}">active</c:if>" 
+                        href="/user/settings"
+                        class="link <c:if test="${ssPath eq '/user/settings'}">active</c:if>" 
                     >
                         <i class="fas fa-cog"></i> Settings
                     </a>

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

@@ -34,6 +34,8 @@
     };
 
     window.onload = (event) => {
+        setTimeout(() => {
+            
         loadingTag = window.document.querySelector('#tag-loading');
         loadingArticle = window.document.querySelector('#article-loading');
         articleList = window.document.querySelector('#article-list');
@@ -48,7 +50,7 @@
             .then(json => {
                 const { articles } = json;
                 const tagSet = new Set();
-
+                
                 articles.forEach(article => {
                     const domParser = new DOMParser();
 
@@ -62,7 +64,7 @@
                                 </div>
                             </div>
                             <div>
-                                <button class="favorite-btn">
+                                <button class="favorite-btn" >
                                     <i class="fas fa-heart"></i>
                                     <span class="count">564</span>
                                 </button>
@@ -137,7 +139,12 @@
                 } else {
                     tagList.style.display = 'block';
                 }
+
+                
             });
+
+        }, 3000);
+        
     } 
 </script>
 <style>
@@ -167,11 +174,11 @@
                         <ul class="nav">
                             <!-- 로그인 상태인 경우에만 your feed on -->
                             <c:if test="${ssIsLogin eq true}">
-                                <li class="nav-item ">
+                                <li class="nav-item active">
                                     <a href="#">Your Feed</a>
                                 </li>
                             </c:if>
-                            <li class="nav-item active">
+                            <li class="nav-item">
                                 <a href="#">Global Feed</a>
                             </li>
                             <!-- <li style="display: none" class="nav-item">
@@ -217,6 +224,4 @@
         </div>
     </div>
 </body>
-</html>
-
-
+</html>

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

@@ -0,0 +1,126 @@
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<%@ 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" %>
+<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
+
+<jsp:include page="/WEB-INF/jsp/include/head.jsp"></jsp:include>
+<script>
+    const validateForm = () => {
+        // client side validation
+        const editorForm = window.document.forms['editorForm'];
+        const articleTitle = editorForm['articleTitle'].value;
+        console.log(articleTitle);
+        if(articleTitle === null || articleTitle === ""){
+            alert("제목을 입력해주세요.");
+            return false;
+        } 
+        const subtitle = editorForm['subtitle'].value;
+        if(subtitle === null || subtitle === ""){
+            alert("부제목을 입력해주세요.");
+            return false;
+        }
+        const articleBody = editorForm['article-body'].value;
+        if(articleBody === null || articleBody === ""){
+            alert("내용을 입력해주세요.");
+            return false;
+        }       
+    }
+
+    let tagList = [];
+    let index = 0;
+    
+    // 엔터키 누를 시 태그 추가됨
+    function enterKey() {
+        if(window.event.keyCode === 13) {
+            let tag = event.target.value;
+            tagList.push(tag);
+            //태그 중복제거
+            let tags = tagList.filter((val, idx) => {
+                return tagList.indexOf(val) === idx;
+            });                                        
+            event.preventDefault();
+            document.querySelector('.tag-list').innerHTML = tags.map((item, index) => 
+                `<span class="tag">
+                    <i class="fas fa-times deleteBtn" 
+                      data-value=\${item}  
+                      onclick="delBtn()">&nbsp</i>
+                    \${item}
+                </span>`
+            ).join("");
+            event.target.value = "";
+        }
+    }
+
+    // 태그 삭제
+    function delBtn(){
+        event.target.parentElement.remove();
+
+        let delList = document.querySelectorAll( ".deleteBtn" );
+        tagList = []
+        delList.forEach((val , idx) => {
+            tagList.push(val.dataset.value);
+        });
+    }  
+</script>
+</head>
+<body>
+    <jsp:include page="/WEB-INF/jsp/include/header.jsp"></jsp:include>
+
+    <!-- Editor -->
+    <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="/" 
+                    onsubmit="return validateForm()"> 
+                    <div class="form-data">
+                        <input 
+                            type="text" 
+                            class="form-control" 
+                            name="articleTitle" 
+                            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"
+                            >
+                    </div>
+                    <div class="form-data">
+                        <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 
+                        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">Publish Article</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

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

@@ -0,0 +1,74 @@
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<%@ 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" %>
+<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
+
+<jsp:include page="/WEB-INF/jsp/include/head.jsp"></jsp:include>
+<script>
+
+</script>
+</head>
+<body>
+    <jsp:include page="/WEB-INF/jsp/include/header.jsp"></jsp:include>
+
+    <div class="container main">
+        <div class="row">
+            <div class="col-6">
+                <h1 class="sign-in-title">Your Settings</h1>
+                <form 
+                    name="settingForm"
+                    id="setting-form"
+                    class="form-group"
+                    method="post"
+                    action="/user/settings">
+                    <div class="form-data">
+                        <input 
+                            type="text" 
+                            class="form-control form-control-sm" 
+                            placeholder ="URL of profile picture" 
+                            autocomplete="off"
+                            value="<c:out value='${profileImg}'/>">
+                    </div>
+                    <div class="form-data">
+                        <input 
+                            type="text" 
+                            class="form-control" 
+                            placeholder ="Username" 
+                            autocomplete="off"
+                            value="<c:out value='${username}'/>">
+                    </div>
+                    <div class="form-data">
+                        <textarea 
+                            class="form-control" 
+                            rows="8" 
+                            name="article-body" 
+                            placeholder="Short bio about you"
+                            value="<c:out value='${userBio}'/>"></textarea>
+                    </div>
+                    <div class="form-data">
+                        <input 
+                            type="email" 
+                            class="form-control" 
+                            placeholder ="Email" 
+                            autocomplete="off"
+                            value="<c:out value='${email}'/>">
+                    </div>
+                    <div class="form-data">
+                        <input 
+                            type="password" 
+                            class="form-control" 
+                            placeholder="New Password" 
+                            autocomplete="off">
+                    </div>
+                    <button class="btn-settings">Update Settings</button>
+                </div>
+                <hr>
+                <button type="button" class="btn-logout" onclick="location.href='/'">Or click here to logout.</button>
+            </form>
+        </div>
+    </div>
+</body>
+</html>
+</body>

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

@@ -285,6 +285,11 @@ img {
     background-color: var(--green-color);
 }
 
+.favorete-btn.active {
+    color: var(--white-color);
+    background-color: var(--green-color);
+}
+
 .preview-link h1{
     color: var(--black-color);
     line-height: 1.1;
@@ -453,6 +458,32 @@ textarea {
     font-family: 'Source Sans Pro', sans-serif;
 }
 
+.editor-page .tag-list { 
+    /* margin-top: 0.5rem; */
+    flex-wrap: wrap;
+}
+
+.editor-page .tag-list .tag {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.2rem;
+    margin-right: 3px;
+    margin-left: 0;
+    padding-top: 0.1rem;
+    background-color: #818a92;
+    color: var(--white-color);
+    font-weight: normal;
+    border: none;
+}
+
+.editor-page .tag-list .tag i:hover {
+    cursor: pointer;
+}
+
+.editor-page .form-data .tag-form {
+    margin-bottom: 0.2rem;
+}
+
 /* Article Banner */
 .article-page .banner {
     background-color: var(--black-color);