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

@@ -16,39 +16,35 @@
     window.onload = () => {
         editForm = window.document.querySelector('#editor-form');
         tagInputArea = window.document.querySelector('#tag-input-area');
-        tagList = window.document.querySelector('#tag-list');
+        tagList = window.document.querySelector('.tag-list');
     }
 
-    window.addEventListener('keypress', (event) => {
+    function enterKey(){
         const target = event.target;
 
-        if (event.keyCode === 13 && target.tagName !== 'TEXTAREA') {
+        if (event.keyCode === 13) {
             event.preventDefault();
-            if (target.id === 'tag-input-area') {
-                const inputValue = tagInputArea.value.trim();
-                if (inputValue !== '') {
-                    addTag(tagInputArea.value.trim());
-                }
+            const inputValue = tagInputArea.value.trim();
+            if (inputValue !== '') {
+                addTag(tagInputArea.value.trim());
             }
         }
-    });
-
+    }
+    
     const addTag = (tag) => {
         if (!tagSet.has(tag)) {
             const spanTag = window.document.createElement('span');
+            spanTag.classList.add('tag');          
             spanTag.textContent = tag;
-            spanTag.style.border = 'solid';
-            spanTag.style.borderColor = 'black';
-            spanTag.style.borderRadius = '0.2rem';
-            spanTag.style.marginRight = '2px';
 
-            const btnDelete = window.document.createElement('button');
-            btnDelete.textContent = 'X';
-            btnDelete.style.color = 'red'
+            const btnDelete = window.document.createElement('i');
+            btnDelete.classList.add('fas');
+            btnDelete.classList.add('fa-times');
             btnDelete.onclick = (event) => {
                 tagList.removeChild(spanTag); // 엘리먼트 제거
                 tagSet.delete(tag); // 태그 집합에서 태그 제거
             }
+
             spanTag.append(btnDelete);
             tagList.append(spanTag);
             tagSet.add(tag);
@@ -57,8 +53,6 @@
     }
 
     const editFormSubmit = () => {
-        event.preventDefault();
-
         if (validateForm()) {
             const json = {};
 
@@ -104,7 +98,7 @@
             return false;
         } 
 
-        return true;
+    return true;
     }
 </script>
 </head>
@@ -112,7 +106,7 @@
     <jsp:include page="/WEB-INF/jsp/include/header.jsp"></jsp:include>
 
     <!-- Editor -->
-    <div class="container main">
+    <div class="container main editor-page">
         <div class="row">
             <div class="col-10">
                 <form 
@@ -121,6 +115,7 @@
                     class="form-group"
                     method="post"
                     action="/article"
+                    onsubmit="return false"
                 >
                     <!-- onsubmit="return validateForm()" -->
                     <div class="form-data">
@@ -153,14 +148,17 @@
                         <input 
                             id="tag-input-area"
                             type="text" 
-                            class="form-control form-control-sm" 
+                            class="form-control form-control-sm tag-form" 
                             name="tags" 
                             placeholder="Enter tags" 
                             autocomplete="off"
+                            onkeydown="enterKey()"
                         >
+                        <div class="tag-list">
+
+                        </div>
                     </div>
-                    <div id="tag-list"></div>
-                    <button class="btn-signUp" onclick="editFormSubmit()">Publish Article</button>
+                    <button class="btn-signUp"  onclick="editFormSubmit()">Publish Article</button>
                 </form>
             </div>
         </div>

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

@@ -0,0 +1,131 @@
+<%@ 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="article-page">
+        <!-- Article Banner -->
+        <section class="banner">
+            <div class="container">
+                <h1 class="article-banner-title">Article Title</h1>
+                <div class="article-meta">
+                    <div class="metadata">
+                        <a href="userpage-my.html" class="profile-link">
+                            <img src="img/avatar.jpg" alt="">
+                        </a>
+                        <div class="article-info">
+                            <a href="userpage-my.html" class="name">Username</a>
+                            <span class="date">November 24, 2021</span>
+                        </div>
+                        <div class="buttons">
+                            <a href="editor.html" class="edit-article btn-sm">
+                                <i class="fas fa-pencil-alt"> Edit Article</i>
+                            </a>
+                            <button class="delete-article btn-sm">
+                                <i class="fas fa-trash-alt"> Delete Article</i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    
+        <div class="container main">
+            <div class="article-content">
+                <div class="col-12">
+                    <p>Article content</p>
+                    <ul class="tag-list">
+                        <li class="tag">welcome</li>
+                        <li class="tag">welcome</li>
+                    </ul>
+                </div>
+            </div>
+            <hr>
+            <div class="article-actions">
+                <div class="article-meta">
+                    <div class="metadata">
+                        <a href="userpage-my.html" class="profile-link">
+                            <img src="img/avatar.jpg" alt="">
+                        </a>
+                        <div class="article-info">
+                            <a href="userpage-my.html" class="name">Username</a>
+                            <span class=date>November 24, 2021</span>
+                        </div>
+                        <div class="buttons">
+                            <a class="edit-article btn-sm" href="editor.html">
+                                <i class="fas fa-pencil-alt"> Edit Article</i>
+                            </a>
+                            <button class="delete-article btn-sm">
+                                <i class="fas fa-trash-alt"> Delete Article</i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- comment -->
+            <div class="row">
+                <div class="col-8">
+                    <div class="card comment-form">
+                        <div class="card-block">
+                            <textarea class="form-control" placeholder="Write a comment..." rows="3"></textarea>
+                        </div>
+                        <div class="card-footer">
+                            <img class="comment-img" src="img/avatar.jpg" alt="">
+                            <button class="btn btn-card btn-sm">Post Comment</button>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="card-block">
+                            <p class="card-text">
+                                While most "todo" demos provide an excellent cursory glance at a framework's capabilities,
+                                they typically don't convey the knowledge & perspective required to actually build real
+                                applications with it.
+                            </p>
+                        </div>
+                        <div class="card-footer">
+                            <div class="user-info">
+                                <a href="userpage-others.html" class="comment-author">
+                                    <img class="comment-img" src="img/avatar.jpg" alt="">
+                                </a>
+                                <a href="userpage-others.html" class="comment-author">Gerome</a>
+                                <span class="date-posted">November 24, 2021</span>
+                            </div>
+                            <i style="display: none" class="fas fa-trash-alt"></i>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="card-block">
+                            <p class="card-text">
+                                RealWorld solves this by allowing you to choose any frontend (React, Angular, & more) and
+                                any backend (Node, Django, & more) and see how they power a real-world, beautifully designed
+                                full-stack app called Conduit.
+                            </p>
+                        </div>
+                        <div class="card-footer">
+                            <div class="user-info">
+                                <a href="userpage-my.html" class="comment-author">
+                                    <img class="comment-img " src="img/avatar.jpg" alt="">
+                                </a>
+                                <a href="userpage-my.html" class="comment-author">username</a>
+                                <span class="date-posted">posting date</span>
+                            </div>
+                            <i class="fas fa-trash-alt"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

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

@@ -1,126 +0,0 @@
-<%@ 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/resources/css/style.css

@@ -501,6 +501,10 @@ textarea {
     border: none;
 }
 
+.editor-page .tag-list .tag i {
+    margin-left: 3px;
+}
+
 .editor-page .tag-list .tag i:hover {
     cursor: pointer;
 }