댓글 생성 및 삭제 기능 추가

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

@@ -29,14 +29,15 @@
                     location.href = "/";
                 }
             })
-        }
+    }
 
-    const createComment = () => {
+    const postComments = () => {
+        const commentInputArea = document.querySelector('#comment-input');
         const req = {
             userId: "${ssId}",
-            articleId: "${articleDetail.id}"
-            // content: 
-            // created: 
+            articleId: "${articleDetail.id}",
+            content: commentInputArea.value,
+            created: new Date()
         }
 
         const postOptions = {
@@ -46,30 +47,76 @@
                 "Content-Type": "application/json"
             }
         };
-
-        const getOptions = {
-            method: 'GET'
+        
+        if(commentInputArea.value !== ''){
+            fetch('/article/${articleDetail.id}/comment', postOptions)
+                .then(response => {
+                    if(response.status === 201) {
+                        return displayComments();
+                    }
+                })
         }
+        commentInputArea.value = '';
+    }
+
+    function deleteComment(targetCommentId) {
+        fetch("/article/${articleDetail.id}/comment/" + targetCommentId, { method: 'DELETE' })
+            .then(response => {
+                if(response.status === 200) {
+                    return displayComments();
+                }
+            })
+    }
 
-        fetch('/article/${articleDetail.id}/comment', postOptions)
+    function displayComments() {
+        fetch('/article/${articleDetail.id}/comment/all', { method: 'GET' })
             .then(response => {
-                if(response.status === 201) {
-                    return ;
+                if (response.status === 200) {
+                    return response.json();
                 }
             })
-            .then(() => {
-                fetch('/article/${articleDetail.id}/comment/all', getOptions)
-                    .then(response => {
-                        if(response.status === 200) {
-                            return response.json();
+            .then(json => {
+                const { comments } = json;           
+                const container = document.querySelector('.comments');
+
+                while (container.firstChild) {
+                    container.firstChild.remove();
+                }
+
+                comments.forEach(comment => {
+                    const domParser = new DOMParser();
+                    const domStrComment =
+                        `<div class="card">
+                            <div class="card-block">
+                                <p class="card-text">
+                                    \${comment.content}
+                                </p>
+                            </div>
+                            <div class="card-footer comment-footer">
+                                <div class="user-info">
+                                    <a href="userpage-others.html" class="comment-author">
+                                        <img class="comment-img" src="/resources/images/avatar.png" alt="">
+                                    </a>
+                                    <a href="userpage-others.html" class="comment-author">\${comment.username}</a>
+                                    <span class="date-posted"></span>
+                                </div>
+                                <i style="display: none" class="fas fa-trash-alt" onclick="deleteComment('\${comment.id}')"></i>
+                            </div>
+                        </div>`;
+
+                    const divComment = domParser.parseFromString(domStrComment, 'text/html').body.firstChild;
+                    divComment.querySelector('.date-posted').textContent = new Date(comment.created).toLocaleString();
+                    container.appendChild(divComment);
+                    const icons = document.querySelectorAll('.fa-trash-alt');
+                    icons.forEach(icon => {
+                        if (comment.userId == "${ssId}") {
+                            icon.style.display = 'block';
                         }
                     })
-                    .then(json => {
-                        const { comments } = json;
-                        
-                    })
+                })
             })
-    } 
+        
+    }
 
     window.onload = () => {
         const tags = document.querySelector('.tag-list');
@@ -81,11 +128,12 @@
             ).join('');
         }
 
-        
         const date = "${articleDetail.created}"
         document.querySelectorAll('.date').forEach(value => 
             value.textContent = new Date(date).toLocaleString()
         )
+
+        displayComments();
     }
     
 </script>
@@ -200,50 +248,15 @@
                 <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" onclick="createComment()">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>
+                            <textarea id="comment-input" class="form-control" placeholder="Write a comment..." rows="3"></textarea>
                         </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>
+                            <img class="comment-img" src="/resources/images/avatar.png" alt="">
+                            <button class="btn btn-card btn-sm" onclick="postComments()">Post Comment</button>
                         </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 class="comments">
+
                     </div>
                 </div>
             </div>