Merge pull request #20 from Likelion12-KNU/bring-comment-api

[Feat] Comment api 연동시켜 작성, 최신화, 삭제 구현
Likelion12-KNU · Jun 1, 2024 · c695732 · c695732
2 parents ec71e6e + 5bbf21b
commit c695732
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 103 deletions.
diff --git a/src/App.css b/src/App.css
@@ -30,9 +30,7 @@
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  border-bottom: 0.5px solid white;
-  border-left: 0.5px solid white;
-  border-right: 0.5px solid white;
+
 }
 #mid::-webkit-scrollbar{
   width: 0;
@@ -41,4 +39,5 @@
 
 #main_mapper {
   display: flex;
+
 }
diff --git a/src/Comment.css b/src/Comment.css
@@ -0,0 +1,27 @@
+#comment_content_div{
+    width: 100%;
+    height: 30px;
+    display: flex;
+
+    align-items: center;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    position: relative;
+    margin: 10px 0px;
+   border-bottom: 1px solid #3e3e3e;
+}
+#comment_name{
+    font-weight: 700;
+
+}
+#comment_content{
+    margin-left: 20px;
+
+}
+#comment_bin{
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    width: 15px;
+    cursor: pointer;
+  }
diff --git a/src/Comment.jsx b/src/Comment.jsx
@@ -0,0 +1,43 @@
+
+import React from "react";
+import'../src/Comment.css'
+import { useState } from "react";
+import axios from "axios";
+
+
+function Comment({key, id, nickname, comment}) {
+    const [isBinClicked,setIsBinClicked]=useState(false);
+    const onClickBin=()=>{
+      let data = JSON.stringify({
+        "password": "P@ssw0rd"
+      });
+
+      let config = {
+        method: 'delete',
+        maxBodyLength: Infinity,
+        url: `https://apt-api.blbt.app/v1/apartment/comments/${id}`,
+        headers: { 
+          'Content-Type': 'application/json'
+        },
+        data : data
+      };
+
+      axios.request(config)
+      .then((response) => {
+        console.log(JSON.stringify(response.data));
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+
+    }
+  return (
+    <div id="comment_content_div">
+        <p id="comment_name">{nickname}</p>
+        <p id="comment_content">{comment}</p>
+        <img id="comment_bin" src="src/assets/rubbish-bin-svgrepo-com.svg" onClick={onClickBin}></img>
+    </div>
+  );
+}
+
+export default Comment
diff --git a/src/CommentList.css b/src/CommentList.css
@@ -0,0 +1,19 @@
+#comment_list{
+    overflow-y: auto;
+    width: 100%;
+    height: 160px;
+    background-color: black;
+
+}
+
+
+  #comment_list::-webkit-scrollbar{
+
+    width: 5px;
+    background-color: black;
+  }
+  #comment_list::-webkit-scrollbar-thumb{
+
+    background-color: rgb(97, 97, 97);
+  }
+
diff --git a/src/CommentList.jsx b/src/CommentList.jsx
@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import Comment from './Comment';
+import '../src/CommentList.css'
+
+function CommentList({ _id }) {
+  const [comments, setComments] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const config = {
+          method: 'get',
+          url: `https://apt-api.blbt.app/v1/apartment/${_id}/comments`,
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        };
+
+        const response = await axios.request(config);
+
+        setComments(response.data.comments); // 올바르게 상태를 업데이트
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchData();
+  }, [comments]);
+
+
+  return (
+    <div id="comment_list">
+      {comments.length > 0 ? (
+        comments.map((comment) => (
+          <Comment
+            key={comment._id}
+            id={comment._id}
+            nickname={comment.nickname}
+            comment={comment.comment}
+          />
+        ))
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+}
+
+export default CommentList;
diff --git a/src/Post.css b/src/Post.css
@@ -120,39 +120,37 @@
     justify-content: center;
     align-items: center;
     margin-bottom: 20px;
-
+    
 }
 #input_comment_div button{
+  margin-top: 10px;
     width: 20%;
     height: 40px;
-    border-radius: 10px;
-    background-color: #0984E3;
+    border-radius: 8px;
+    background-color: #0d6efd;
     border: none;
     color: white;
+    font-size: 15px;
+    transition: 0.15s ease-in-out;
+}
+#input_comment_div button:hover{
+  background-color:#0c5fdb ;
 }
 #input_comment{
-    font-size: 20px;
+  margin-right: 10px;
+  margin-top: 10px;
+    font-size: 18px;
     color: white;
     outline: none;
     border: none;
     border-bottom: 0.5px solid white;
     background-color: black;
     height: 100%;
     width: 100%;
+    transition:  0.2s ease-in-out;
 
 }
-#comment_list{
-    overflow-y: auto;
-    width: 100%;
-    height: 150px;
-
+#input_comment:focus{
+  border-bottom: 0.5px solid orange;
 }
-#comment_list::-webkit-scrollbar{
-    width: 5px;
-    background-color: black;
-  }
- #comment_list::-webkit-scrollbar-thumb{
-    background-color: white;
-    border-radius: 20px;
-  }
 
diff --git a/src/Post.jsx b/src/Post.jsx
@@ -5,6 +5,8 @@ import chatIcon from "./assets/chat.svg"; // chat.svg 파일을 import
 import heartIcon from "./assets/heart.svg"; // heart.svg 파일을 import
 import fillHeartIcon from "./assets/fillHeart.svg"; // fillHeart.svg 파일을 import
 import axios from "axios";
+import './CommentList'
+import CommentList from "./CommentList";
 // import postData from "./JSON/post.json";
 
 /**
@@ -18,24 +20,24 @@ function Post({ sortURL, id, nickname, aptname, isLiked, likeCount, commentCount
   const [heartNum, setHeartNum] = useState(likeCount);     //좋아요 수 개수
 //처음 렌더링될 때 해당 게시글의 현재 좋아요 개수를 보여주기 위해 0에서 heart로 변경
   const [commentSelected, setCommentSelected] = useState(false);    //댓글 이모티콘이 선택 됐는지 아닌지
+
   const [inputValue, setInputValue] = useState(""); 
-  const inputCommentRef = useRef(null); 
-  const [commentText, setCommentText] = useState([]); 
+  const inputCommentRef = useRef(null);   //댓글 입력 창 관찰
+
   const [isBinClicked, setIsBinClicked]=useState(false);
 
 
   const [passwordInputValue,setPasswordInputValue]=useState("");  //비밀번호 입력 초기값
   const passwordInputRef = useRef(null); 
-
+ 
 
   useEffect(() => {
     fetch(`https://apt-api.blbt.app/v1/apartment/${id}/like`)
       .then((response) => response.json())
       .then((data) => {
-
+      
         setHeartNum(data.likes);
 
-
         fetch( `${sortURL}`)
 
           .then((response) => response.json())
@@ -92,17 +94,48 @@ function Post({ sortURL, id, nickname, aptname, isLiked, likeCount, commentCount
     setCommentSelected(!commentSelected);
   };
 
-  const onClickCommentAdd = () => {
+
+
+  const onClickCommentAdd = () => {             //댓글 입력 
     const newComment = inputCommentRef.current.value;
-    setCommentText([...commentText, newComment]);
+    setInputValue(newComment);
+
+
+    let data = JSON.stringify({
+      "nickname": `익명${commentCount+1}`,
+      "comment": `${newComment}`,
+      "password": "P@ssw0rd"
+    });
+
+    let config = {
+      method: 'post',
+      maxBodyLength: Infinity,
+      url: `https://apt-api.blbt.app/v1/apartment/${id}/comments`,
+      headers: { 
+        'Content-Type': 'application/json'
+      },
+      data : data
+    };
+
+    axios.request(config)
+    .then((response) => {
+      console.log(JSON.stringify(response.data));
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+
     inputCommentRef.current.value = "";
     setInputValue("");
   };
 
-  const onChangeInput = (e) => {
-    setPasswordInputValue(e.target.value);
+  const onChangeInput = (e) => {    //댓글입력창
+      setInputValue(e.target.value);
   };
 
+
+
+
   const onClickBin=()=>{        // 기존 post에서 쓰레기통 클릭-> 삭제칸, 삭제칸 아니요 클릭->기존 post
     if(isBinClicked==false){
       setIsBinClicked(true)
@@ -147,11 +180,12 @@ function Post({ sortURL, id, nickname, aptname, isLiked, likeCount, commentCount
 
     passwordInputRef.current.value=""
     setPasswordInputValue("");
-
-
-
   }
 
+
+
+
+
   return (
     <div id="post">
       {isBinClicked?(<div id="delete_div">
@@ -192,11 +226,12 @@ function Post({ sortURL, id, nickname, aptname, isLiked, likeCount, commentCount
           <div id="comment_div">
             <div id='input_comment_div'>
               <input ref={inputCommentRef} value={inputValue} onChange={onChangeInput} type='text' placeholder='댓글을 입력하세요.' id='input_comment'/>
+
               <button onClick={onClickCommentAdd} >댓글 추가</button>
             </div>
-            <div id='comment_list'>
-              {/* {comment.map((comment, i) => <p key={i} ><b>익명{i + 1} </b>{comment}</p>)} */}
-            </div>
+
+              <CommentList _id={id}  />
+
           </div>
 
         }