[Add] Comment and multer+S3

+import axios from "axios";
+const addCommentForm = document.getElementById("jsAddComment");
+const commentList = document.getElementById("jsCommentList");
+const commentNumber = document.getElementById("jsCommentNumber");
+
+const increaseNumber = () => {
+  commentNumber.innerHTML = parseInt(commentNumber.innerHTML, 10) + 1;
+};
+
+const addComment = (comment) => {
+  const li = document.createElement("li");
+  const span = document.createElement("span");
+  span.innerHTML = comment;
+  li.appendChild(span);
+  commentList.prepend(li);
+  increaseNumber();
+};
+
+const sendComment = async (comment) => {
+  const id = window.location.href.split("/videos/")[1];
+  const response = await axios({
+    url: `/api/${id}/comment`,
+    method: "POST",
+    data: {
+      comment, // videoDetail template의 input form's name
+    },
+  });
+  // console.log(response);
+  if (response.status === 200) {
+    addComment(comment);
+  }
+};
+
+const handleSubmit = (event) => {
+  event.preventDefault(); // 새로고침 막기
+  const commentInput = addCommentForm.querySelector("input");
+  const comment = commentInput.value;
+  sendComment(comment);
+  commentInput.value = "";
+};
+
+function init() {
+  addCommentForm.addEventListener("submit", handleSubmit);
+}
+if (addCommentForm) {
+  init();
+}

 import "../scss/styles.scss";
 import "./videoPlayer";
 import "./videoRecorder";
+import "./addComment";

@@ -8,7 +8,8 @@ const totalTime = document.getElementById("totalTime");
 const volumeRange = document.getElementById("jsVolume");
 
 const registerView = () => {
-  fetch(`/api/${window.location.href.split("/videos/")[1]}/view`, {
+  const id = window.location.href.split("/videos/")[1];
+  fetch(`/api/${id}/view`, {
     method: "POST",
   });
 };

@@ -34,8 +34,29 @@
   }
   .video__comments {
     margin-top: 25px;
+    text-align: center;
     .video__comment-number {
       font-size: 18px;
     }
+    .add__comment {
+      margin-top: 25px;
+      width: 100%;
+      input {
+        width: 100%;
+      }
+    }
+    .video__comments-list {
+      margin-top: 50px;
+      li {
+        background-color: #3498db;
+        color: white;
+        padding: 15px;
+        border-radius: 20px;
+        border-bottom-left-radius: 0px;
+        &:not(:last-child) {
+          margin-bottom: 15px;
+        }
+      }
+    }
   }
 }

@@ -21,6 +21,7 @@
     "@babel/polyfill": "^7.10.1",
     "@babel/preset-env": "^7.9.6",
     "autoprefixer": "^9.8.0",
+    "aws-sdk": "^2.702.0",
     "axios": "^0.19.2",
     "babel-loader": "^8.1.0",
     "body-parser": "^1.19.0",
@@ -35,6 +36,7 @@
     "mongoose": "^5.9.15",
     "morgan": "^1.10.0",
     "multer": "^1.4.2",
+    "multer-s3": "^2.9.0",
     "ngrok": "^3.2.7",
     "node-sass": "^4.14.1",
     "passport": "^0.4.1",

@@ -553,9 +553,29 @@ input[type="submit"] {
     .video-detail__container .video__info .video__description {
       font-size: 16px; }
   .video-detail__container .video__comments {
-    margin-top: 25px; }
+    margin-top: 25px;
+    text-align: center; }
     .video-detail__container .video__comments .video__comment-number {
       font-size: 18px; }
+    .video-detail__container .video__comments .add__comment {
+      margin-top: 25px;
+      width: 100%; }
+      .video-detail__container .video__comments .add__comment input {
+        width: 100%; }
+    .video-detail__container .video__comments .video__comments-list {
+      margin-top: 50px; }
+      .video-detail__container .video__comments .video__comments-list li {
+        background-color: #3498db;
+        color: white;
+        padding: 15px;
+        -webkit-border-radius: 20px;
+           -moz-border-radius: 20px;
+                border-radius: 20px;
+        -webkit-border-bottom-left-radius: 0px;
+           -moz-border-radius-bottomleft: 0px;
+                border-bottom-left-radius: 0px; }
+        .video-detail__container .video__comments .video__comments-list li:not(:last-child) {
+          margin-bottom: 15px; }
 
 .user-profile {
   width: 100%;

@@ -19,13 +19,18 @@ block content
             .video__author
                 |Uploaded by 
                 a(href=routes.userDetail(video.creator.id))=video.creator.name
-        .video__comment
+        .video__comments
             if video.comments.length === 1
-                span.video__comment-number 1 comment
+                span.video__comment-number
+                    span#jsCommentNumber 1 
+                    |  comment
             else
-                span.video__comment-number #{video.comments.length} comments
+                span.video__comment-number
+                    span#jsCommentNumber=video.comments.length 
+                    |  comments
             form.add__comment#jsAddComment
                 input(type="text", placeholder="Add a comment", name="comment")
-            ul.video__comments-list
-                each comment in video.comments
-                    span comment.text
\ No newline at end of file
+            ul.video__comments-list#jsCommentList
+                each comment in video.comments.reverse()
+                    li
+                        span=comment.text
\ No newline at end of file