게시글 수정 페이지 오류 수정

realworld/src/main/java/com/dbs/realworld/controller/ArticleController.java

@@ -158,6 +158,8 @@ public class ArticleController {
         }
 
         model.addAttribute("article", finded);
+        model.addAttribute("editPage", true);
+        
         return Views.ARTICLE_FORM;
     }
 

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

@@ -4,55 +4,37 @@
 <%@ 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" %>
+<% pageContext.setAttribute("LF", "\n" ); %>
+
 
 <jsp:include page="/WEB-INF/jsp/include/head.jsp"></jsp:include>
 <script>
-
     const tagSet = new Set();
     let editForm = null;
     let tagInputArea = null;
     let tagList = null;
-    let isEditPage = false;
-
-    // 아티클 수정 페이지로 왔을 때 사용되는 객체
-    const originArticle = {};
 
     window.onload = () => {
         editForm = window.document.querySelector('#editor-form');
         tagInputArea = window.document.querySelector('#tag-input-area');
         tagList = window.document.querySelector('.tag-list');
 
-        const article = "${article}";
-
-        if (article !== "") {
-            isEditPage = true;
-            originArticle['id'] = parseInt("${article.id}");
-            originArticle['title'] = "${article.title}";
-            originArticle['subtitle'] = "${article.subtitle}";
-            originArticle['content'] = "${article.content}";
-            originArticle['tags'] = "${article.tags}";
-            originArticle['created'] = "${article.created}";
-            originArticle['writerId'] = parseInt("${article.writerId}");
-
-            editForm['article-title'].value = "${article.title}";
-            editForm['subtitle'].value = "${article.subtitle}";
-            editForm['article-body'].value = "${article.content}";
-            // const strTags = "${article.tags}";
+        // 게시물 수정 페이지일 경우
+        if ("${editPage}" === "true") {
             "${article.tags}".split(',').forEach(tag => {
                 if (tag !== '') {
                     addTag(tag);
                 }
             });
-
-            console.log(originArticle);
         }
     }
 
-    function enterKey(){
+    // 엔터키 입력시 태그 생성
+    function enterKey() {
         const target = event.target;
 
         if (event.keyCode === 13) {
-            event.preventDefault();
+            event.preventDefault(); // 새로고침 막아줌
             const inputValue = tagInputArea.value.trim();
             if (inputValue !== '') {
                 addTag(tagInputArea.value.trim());
@@ -60,6 +42,7 @@
         }
     }
 
+    // 태그 표시
     const addTag = (tag) => {
         if (!tagSet.has(tag)) {
             const spanTag = window.document.createElement('span');
@@ -76,8 +59,6 @@
 
             spanTag.append(btnDelete);
 
-            console.log(spanTag);
-
             tagList.append(spanTag);
             tagSet.add(tag);
             tagInputArea.value = "";
@@ -86,63 +67,58 @@
 
     const submitForm = () => {
         if (!validateForm()) {
-            return ;
+            return;
         }
-
         const json = {};
 
-        if (isEditPage) {
-            // 게시물 수정
-            let isEdit = false;
-            if (editForm['article-title'].value !== originArticle.title) {
+        // 게시글 수정페이지일 경우
+        if ("${editPage}" === "true") {
+
+            if (editForm['article-title'].value !== "${article.title}") {
                 json['title'] = editForm['article-title'].value;
-                isEdit = true;
             }
-            if (editForm['subtitle'].value !== originArticle.subtitle) {
-                json['subtitle'] = editForm['subtitle'].value;        
-                isEdit = true;
+
+            if (editForm['subtitle'].value !== "${article.subtitle}") {
+                json['subtitle'] = editForm['subtitle'].value;
             }
-            if (editForm['article-body'].value !== originArticle.content) {
+
+            if (editForm['article-body'].value.replace(/\n/g, '<br>') !== "${fn:replace(article.content, LF, '<br>')}") {
                 json['content'] = editForm['article-body'].value;
-                isEdit = true;
             }
-            if (Array.from(tagSet).join(',') !== originArticle.tags) {
+
+            if (Array.from(tagSet).join(',') !== "${article.tags}") {
                 json['tags'] = Array.from(tagSet).join(',');
-                isEdit = true;
             }
 
-            if (isEdit) {
-                // json['id'] = originArticle.id; // 게시물 아이디는 url에 포함
-                json['writerId'] = originArticle.writerId;
-                // json['writerEmail'] = originArticle.writerEmail;
+            // 게시글 수정
+            json['writerId'] = "${ssId}";
 
-                const options = {
-                    body: JSON.stringify(json),
-                    method: 'PATCH',
-                    headers: {
-                        "Content-Type": "application/json"
-                    }
-                };
-                
-                fetch('/article/' + originArticle.id, options)
-                    .then(response => {
-                        if (response.status === 200) {
-                            return response.json();
-                        }
-                    })
-                    .then(json => {
-                        location.href = "/article/" + json.id;
-                    });
-            }
+            const options = {
+                body: JSON.stringify(json),
+                method: 'PATCH',
+                headers: {
+                    "Content-Type": "application/json"
+                }
+            };
 
+            fetch('/article/${article.id}', options)
+                .then(response => {
+                    if (response.status === 200) {
+                        console.log(response);
+                        return response.json();
+                    }
+                })
+                .then(json => {
+                    location.href = "/article/" + json.id;
+                });
         } else {
-            // 첫 게시물 생성
+            // 첫 게시글 생성
             json['title'] = editForm['article-title'].value;
             json['subtitle'] = editForm['subtitle'].value;
             json['content'] = editForm['article-body'].value;
             json['tags'] = Array.from(tagSet).join(',');
             json['created'] = new Date();
-    
+
             const options = {
                 body: JSON.stringify(json),
                 method: "POST",
@@ -150,7 +126,7 @@
                     "Content-Type": "application/json"
                 }
             };
-    
+
             fetch("/article", options)
                 .then(response => {
                     if (response.status === 201) {
@@ -163,6 +139,7 @@
         }
     }
 
+    // 공백 체크
     const validateForm = () => {
         const articleTitle = editForm['article-title'].value;
         if (articleTitle === null || articleTitle === "") {
@@ -197,26 +174,31 @@
                     <!-- onsubmit="return validateForm()" -->
                     <div class="form-data">
                         <input type="text" class="form-control" name="article-title"
-                            placeholder="Article Title" autocomplete="off">
+                            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">
+                        <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"
                             name="article-body"
-                            placeholder="Write your article (in markdown)"></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()">
+                            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>