diff --git a/src/App.css b/src/App.css index d40dd16..3e6578f 100644 --- 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 new file mode 100644 index 0000000..dad468d --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/src/Comment.jsx b/src/Comment.jsx new file mode 100644 index 0000000..aee0018 --- /dev/null +++ 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 ( +
+

{nickname}

+

{comment}

+ +
+ ); +} + +export default Comment diff --git a/src/CommentList.css b/src/CommentList.css new file mode 100644 index 0000000..32d8d33 --- /dev/null +++ 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); + } + \ No newline at end of file diff --git a/src/CommentList.jsx b/src/CommentList.jsx new file mode 100644 index 0000000..9397907 --- /dev/null +++ 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 ( +
+ {comments.length > 0 ? ( + comments.map((comment) => ( + + )) + ) : ( + <> + )} +
+ ); +} + +export default CommentList; \ No newline at end of file diff --git a/src/Post.css b/src/Post.css index 76d3766..86ecbe1 100644 --- a/src/Post.css +++ b/src/Post.css @@ -120,18 +120,26 @@ 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; @@ -139,20 +147,10 @@ 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 index 230e27b..2e06770 100644 --- 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 (
{isBinClicked?(
@@ -192,11 +226,12 @@ function Post({ sortURL, id, nickname, aptname, isLiked, likeCount, commentCount
+
-
- {/* {comment.map((comment, i) =>

익명{i + 1} {comment}

)} */} -
+ + +
} diff --git a/src/PostForm.css b/src/PostForm.css deleted file mode 100644 index 8ebbdf6..0000000 --- a/src/PostForm.css +++ /dev/null @@ -1,62 +0,0 @@ -#postForm{ - width: 100%; - height: 160px; - border-bottom: 0.5px solid white; -} -form{ - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} -#apt_name{ - margin-top: -60px; - width: 80%; - height: 36px; - font-size: 20px; - background-color: black; - color: white; - outline: none; - border: none; - border-bottom: 0.5px solid #8f8f8f; - padding: 10px; -} -#password_div{ - position: relative; - margin-top: 10px; - margin-bottom: -40px; - width: 80%; - height: 50px; - -} -#password_div p{ - - color: #c4c4c4; - padding-left: 2px; - margin: 5px 0 0 0; - font-size: 15px; -} -#password{ - width: 70%; - height: 36px; - background-color: black; - color: #c4c4c4; - outline: none; - border: none; - font-size: 20px; -} -#submit{ - border: none; - position: absolute; - top: 0; - right: 0; - width: 120px; - height: 50px; - border-radius: 10px; - color: white; - border: nones; - font-size: 18px; - background-color: #0984E3; -} \ No newline at end of file diff --git a/src/PostList.css b/src/PostList.css index fd9765e..b9162c4 100644 --- a/src/PostList.css +++ b/src/PostList.css @@ -1,7 +1,19 @@ #PostList_div{ width: 100%; - height: 100%; - + height: 80vh; + overflow-y: auto; + border-right: 1px solid#3e3e3e; + border-left: 1px solid#3e3e3e; + border-bottom: 1px solid#3e3e3e; +} +#PostList_div::-webkit-scrollbar{ + + width: 5px; + background-color: black; +} +#PostList_div::-webkit-scrollbar-thumb{ + + background-color: rgb(97, 97, 97); } #fixed-form-container { @@ -11,10 +23,10 @@ /* z-index: 1000; */ } #post-container{ - background-color: antiquewhite; + height: 70%; overflow-y: auto; - + background-color: antiquewhite; } /* .posts-container { diff --git a/src/PostList.jsx b/src/PostList.jsx index e35a511..7627e49 100644 --- a/src/PostList.jsx +++ b/src/PostList.jsx @@ -1,6 +1,6 @@ import React, {useState, useEffect} from 'react'; import Post from './Post'; -import PostForm from './PostForm'; + // import {useEffect} from 'react'; import './PostList.css'; import axios from 'axios'; @@ -96,7 +96,7 @@ function PostList({sortURL, postURL}) { //API URL을 app.jsx로부터 받아 }; fetchData(); - }, [sortURL]); //posts를 관찰! sortURL + }, [posts]); //posts를 관찰! sortURL // 게시물들을 렌더링 하는 하는 부분이다.