feat :: 게시판 좋아요 기능 추가

INVINCIBLE-DMS · Dec 6, 2023 · fab287c · fab287c
1 parent df0f989
commit fab287c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/src/Components/BoardPage/Post.jsx b/src/Components/BoardPage/Post.jsx
@@ -3,16 +3,24 @@ import { theme } from "../../styles/theme";
 import { Profile } from "./Profile";
 import { Link } from "react-router-dom";
 import { useEffect, useState } from "react";
-import { getPostDetail } from "../../apis/Board";
+import { getPostDetail, getPosts, postLike } from "../../apis/Board";
 
-export const Post = ({ title, content, img, metaData, profile }) => {
+export const Post = ({ title, content, img, metaData, profile, setPosts }) => {
   const [commentCnt, setCommentCnt] = useState(0);
 
   useEffect(() => {
     getPostDetail(metaData.id).then(res => {
       setCommentCnt(res.data.commentResponseList.length);
     })
   }, [])
+
+  const handleLikePost = () => {
+    postLike(metaData.id).then(() => {
+      getPosts().then(res => {
+        res.data && setPosts(res.data);
+      })
+    })
+  }
 
   return <Component>
     <Top>
@@ -28,12 +36,12 @@ export const Post = ({ title, content, img, metaData, profile }) => {
     </Middle>
     <Bottom>
       <div>
-        <Like src="/imgs/icons/Like.svg" alt="" $liked={metaData.liked}/>
-        <h1>{metaData.likes}개</h1>
+        <Like src="/imgs/icons/Like.svg" alt="" $liked={metaData.liked} onClick={handleLikePost}/>
+        <h1>{metaData.likes}</h1>
       </div>
       <div>
         <img src="/imgs/icons/Comment.svg" alt="" />
-        <h1>{commentCnt}개</h1>
+        <h1>{commentCnt}</h1>
       </div>
     </Bottom>
   </Component>
@@ -109,5 +117,6 @@ const Bottom = styled.div`
 `
 
 const Like = styled.img`
+  cursor: pointer;
   filter: ${({$liked}) => $liked && "invert(80%)"};
 `
diff --git a/src/Components/BoardPage/Posts.jsx b/src/Components/BoardPage/Posts.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Post } from "./Post";
 
-export const Posts = React.memo(({posts}) => {
+export const Posts = React.memo(({posts, setPosts}) => {
   return <>
     {
       posts
@@ -13,6 +13,7 @@ export const Posts = React.memo(({posts}) => {
           metaData={{ likes: i.likeCount, id: i.id, liked: i.liked }}
           key={i.id}
           profile={{ img: i.profileImgUrl ? i.profileImgUrl : "/imgs/icons/DefaultProfile.svg", name: i.username, date: i.createdAt.split("T")[0]}}
+          setPosts={setPosts}
         />
       })
       : <h5>불러오고 있습니다</h5>}

diff --git a/src/pages/BoardPage.jsx b/src/pages/BoardPage.jsx
@@ -1,13 +1,14 @@
-import { styled } from "styled-components";
 import { useEffect, useState } from "react";
+import { styled } from "styled-components";
 import { Icon } from "@iconify/react";
-import { theme } from "../styles/theme";
 import { getPosts, postImage, postPost } from "../apis/Board";
 import { Posts } from "../Components/BoardPage/Posts";
+import { theme } from "../styles/theme";
 
 export const BoardPage = () => {
   const [posts, setPosts] = useState(undefined);
   const [modal, setModal] = useState(false);
+  const [file, setFile] = useState(undefined);
   const [data, setData] = useState({
     title: "",
     content: "",
@@ -20,8 +21,6 @@ export const BoardPage = () => {
     })
   }, [])
 
-  const [file, setFile] = useState(undefined);
-
   const handleModalOpen = () => {
     document.body.style.overflow = "hidden";
     setModal(prev => !prev);
@@ -42,11 +41,9 @@ export const BoardPage = () => {
     const form = new FormData;
     form.append("image", e.target.files[0]);
     postImage(form).then(res => {
-      if(res.data){
-        setFile(e.target.files[0]);
-        setData(prev => { return {...prev, feedImgUrl: res.data.imageUrl} });
-      } 
-    })
+      setFile(e.target.files[0]);
+      setData(prev => { return {...prev, feedImgUrl: res.data.imageUrl} });
+    }).catch(() => {})
   }
 
   const handleChange = (e) => {
@@ -83,7 +80,7 @@ export const BoardPage = () => {
       </ModalWrapper>
     </Modal>
     <Wrapper>
-      <Posts posts={posts} />
+      <Posts posts={posts} setPosts={setPosts}/>
       <Button title="글 작성하기" onClick={handleModalOpen}>
         <Icon icon="uil:plus" width='40px' color='#FFFFFF' />
       </Button>