Add: 대댓글 달기, Fix: 모바일 댓글 간격

BSSM-BSM · Dec 19, 2021 · 8f0c55d · 8f0c55d
1 parent ecb6924
commit 8f0c55d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/public/css/etc/board.css b/public/css/etc/board.css
@@ -196,6 +196,7 @@
   text-align:left;
   transition:.25s;
   border-radius:1rem;
+  cursor:pointer;
 }
 .comment_item_wrap:hover{
   box-shadow:var(--shadow);
@@ -291,7 +292,7 @@
   .post_menu{
     padding:5rem 3%;
   }
-  .comment{
+  .comment_list{
     padding:0;
   }
   .comment_write{
@@ -301,9 +302,6 @@
     padding:1.5rem 3%;
   }
   .comment_child{
-    margin-left:1.5rem;
-  }
-  .comment_menu{
-    padding:0 3%;
+    padding-left:2rem;
   }
 }
diff --git a/public/js/etc/board/post.js b/public/js/etc/board/post.js
@@ -179,6 +179,7 @@ const commentDelete = commentIndex => {
 
 const comment_write = (depth, parentIdx) => {
     $$('.loading')[0].classList.add("on");
+    depth = parseInt(depth)+1;
     $.ajax({
         type:'POST',
         data:{

diff --git a/views/pages/board.ejs b/views/pages/board.ejs
@@ -64,7 +64,7 @@
                     </div>
                     <div class="comment_list">
                         <div class="comment_item" v-for="item in commentTree">
-                            <div class="comment_item_wrap">
+                            <div class="comment_item_wrap" :onClick="`postView.commentFocus=${item.idx};`">
                                 <div class="comment_item_info_wrap">
                                     <div class="left_wrap">
                                         <img :src="`/resource/member/profile_images/profile_${item.memberCode}.png`" onerror="this.src='/resource/member/profile_images/profile_default.png'" alt="" class="user_profile">
@@ -79,6 +79,11 @@
                                 </div>
                                 <div class="comment_item_content">{{item.comment}}</div>
                             </div>
+                            <form v-if="commentFocus==item.idx" class="comment_write" method="post" autocomplete="off" :onsubmit="`comment_write(${item.depth}, ${item.idx});return false;`">
+                                <textarea placeholder="댓글" class="post_comment" style="width:100%;height:10rem;" required></textarea>
+                                <br><br>
+                                <input type="submit" name="" value="댓글작성" class="button">
+                            </form>
                             <tree-item
                                 v-if="isParent"
                                 class="comment_child"
@@ -157,7 +162,7 @@
                 <script type="text/x-template" id="comment_item_template">
                     <div class="comment_item">
                         <div class="comment_item_wrap">
-                            <div class="comment_item_info_wrap">
+                            <div class="comment_item_info_wrap" :onClick="`postView.commentFocus=${item.idx};`">
                                 <div class="left_wrap">
                                     <img :src="`/resource/member/profile_images/profile_${item.memberCode}.png`" onerror="this.src='/resource/member/profile_images/profile_default.png'" alt="" class="user_profile">
                                 </div>
@@ -171,6 +176,11 @@
                             </div>
                             <div class="comment_item_content">{{item.comment}}</div>
                         </div>
+                        <form v-if="`${postView.commentFocus}`==item.idx" class="comment_write" method="post" autocomplete="off" :onsubmit="`comment_write(${item.depth}, ${item.idx});return false;`">
+                            <textarea placeholder="댓글" class="post_comment" style="width:100%;height:10rem;" required></textarea>
+                            <br><br>
+                            <input type="submit" name="" value="댓글작성" class="button">
+                        </form>
                         <tree-item
                             v-if="isParent"
                             class="comment_child"