Feat: 좋아요 확인 및 좋아요 API연결

GDSC-StreetReview · Jun 2, 2024 · 264ee94 · 264ee94
1 parent 62fb1bc
commit 264ee94
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 15 deletions.
diff --git a/src/components/Board/components/BoardItem.tsx b/src/components/Board/components/BoardItem.tsx
@@ -1,7 +1,10 @@
+import { useEffect } from "react";
 import { BackgroundImg } from "src/components/Atom/backgroundImg/BackgroundImg";
 import { Text } from "src/components/Atom/text/Text";
 import { IMAGES } from "src/constants/images";
 import { RequestStreetData, ReviewDetail } from "src/constants/interface";
+import useGetUserLikeToReview from "src/hook/useGetUserLikeToReview";
+import { useLikeReview } from "src/hook/useLikeReview";
 import { TruncatedContent } from "src/utils/TruncatedContent";
 import { ReactComponent as IconHeart } from "../../../assets/images/ic_heartWhite.svg";
 import { MAX_CONTENT_LENGTH } from "../constants/Constants";
@@ -27,17 +30,27 @@ const BoardItem = ({
   onClick,
   onClose,
 }: contentItem) => {
+  const { like, getUserLikeToReview } = useGetUserLikeToReview();
   const content = TruncatedContent({
     maxContentLength: MAX_CONTENT_LENGTH,
     content: reviewItem.content,
   });
+  const { handleLikeReview } = useLikeReview();
+  const handleLikeClick = () => {
+    handleLikeReview(reviewItem.reviewId);
+  };
+  // getUserLikeToReview
+  useEffect(() => {
+    getUserLikeToReview(reviewItem.reviewId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return (
     <>
       <BackgroundImg
         img={reviewItem.photoList?.[0] || IMAGES.basicColorImg}
         className="board-item-back-box"
       >
-        <div className="board-item-back-box-front"/>
+        <div className="board-item-back-box-front" />
         <div className="board-item-top">
           <img src={IMAGES.moreLeft} alt="back" onClick={onClose} />
         </div>
@@ -47,7 +60,12 @@ const BoardItem = ({
             <Text fontWeight="400">{content}</Text>
           </div>
           <div className="board-item-menu-box">
-            <IconHeart fill="#DFF5FF" stroke="#DFF5FF" style={IconStyle} />
+            <IconHeart
+              fill={like ? "#DFF5FF" : "#FFF"}
+              stroke="#DFF5FF"
+              style={IconStyle}
+              onClick={handleLikeClick}
+            />
             <img src={IMAGES.addLocation} alt="add" style={IconStyle} />
             <img src={IMAGES.myCommentWhite} alt="comment" style={IconStyle} />
           </div>

diff --git a/src/components/Board/components/BoardItemDetail.css b/src/components/Board/components/BoardItemDetail.css
@@ -37,6 +37,17 @@
   height: 3.125rem;
   border-radius: 50%;
 }
+.board-item-detail-user-info-mid-box-delet {
+  width: 5.3125rem;
+  height: 1.875rem;
+  border-radius: 0.625rem;
+  background: #EA4335;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  margin-top: 0.5rem;
+}
 .board-item-detail-user-info-mid-box-report {
   width: 3.125rem;
   height: 3.125rem;
@@ -66,13 +77,13 @@
   margin-top: 1rem;
 }
 
-.board-item-detail-comment-box{
+.board-item-detail-comment-box {
   margin-top: 2rem;
   padding: 0 1rem;
 }
 
 .comment-input-wrapper {
-  border-top: 1px solid #D9D9D9;
+  border-top: 1px solid #d9d9d9;
   padding: 0 4rem;
 }
 .comment-input-box {

diff --git a/src/components/Board/components/BoradItemDetail.tsx b/src/components/Board/components/BoradItemDetail.tsx
@@ -3,6 +3,8 @@ import { useSelector } from "react-redux";
 import { ImageModal } from "src/components/Atom/ImageModal/ImageModal";
 import { BackgroundImg } from "src/components/Atom/backgroundImg/BackgroundImg";
 import CommentBox from "src/components/Atom/commentBox/CommentBox";
+import DeleteModal from "src/components/Atom/customModal/deleteModal/DeleteModal";
+import ReportModal from "src/components/Atom/customModal/reportModal/ReportModal";
 import { Text } from "src/components/Atom/text/Text";
 import { IMAGES } from "src/constants/images";
 import { StoreState } from "src/constants/interface";
@@ -11,19 +13,26 @@ import useGetCommentList from "src/hook/useGetCommentList";
 import { contentItem } from "./BoardItem";
 import "./BoardItemDetail.css";
 
-const BoardItemDetail = ({ streetItem, reviewItem, onClose }: contentItem) => {
+const BoardItemDetail = ({ streetItem, reviewItem }: contentItem) => {
   const [comment, setComment] = useState<string>("");
   const { commentList, getCommentList } = useGetCommentList(
     reviewItem.reviewId
   );
   const { fetchComment } = useFetchComment();
   const { coordinates } = useSelector((state: StoreState) => state.map); //현재위치 정보
-
+  const [openModal, setOpenModal] = useState<boolean>(false);
+  const MyEamil = localStorage.getItem("userEmail");
+  const Writer = reviewItem.member.email === MyEamil;
   useEffect(() => {
     getCommentList(reviewItem.reviewId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
+  const hanldeOpenModal = () => {
+    setOpenModal(true);
+  };
+  const handleCloseModal = () => {
+    setOpenModal(false);
+  };
   const handleFetchCommentData = async () => {
     const commentItem = {
       reviewId: reviewItem.reviewId,
@@ -68,12 +77,25 @@ const BoardItemDetail = ({ streetItem, reviewItem, onClose }: contentItem) => {
                 좋아요 {reviewItem.likey}
               </Text>
             </div>
-            <img
-              onClick={onClose}
-              src={IMAGES.report}
-              alt="report"
-              className="board-item-detail-user-info-mid-box-report"
-            />
+            <>
+              {Writer ? (
+                <div
+                  className="board-item-detail-user-info-mid-box-delet"
+                  onClick={hanldeOpenModal}
+                >
+                  <Text color="#fff" fontSize="0.75rem" fontWeight="700">
+                    삭제
+                  </Text>
+                </div>
+              ) : (
+                <img
+                  src={IMAGES.report}
+                  alt="report"
+                    className="board-item-detail-user-info-mid-box-report"
+                    onClick={hanldeOpenModal}
+                />
+              )}
+            </>
           </div>
           <div className="board-item-detail-content-box">
             {/* 내용 */}
@@ -127,6 +149,20 @@ const BoardItemDetail = ({ streetItem, reviewItem, onClose }: contentItem) => {
           </div>
         </div>
       </div>
+      {openModal &&
+        (Writer ? (
+          <DeleteModal
+            target="리뷰"
+            targetId={reviewItem.reviewId}
+            onClose={handleCloseModal}
+          />
+        ) : (
+          <ReportModal
+            target="리뷰"
+            targetId={reviewItem.reviewId}
+            onClose={handleCloseModal}
+          />
+        ))}
     </section>
   );
 };

diff --git a/src/hook/useGetAllStreetList.tsx b/src/hook/useGetAllStreetList.tsx
@@ -1,11 +1,13 @@
 import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "src/store/rootReducer";
 import { RequestStreetData } from "../constants/interface";
 import commonApis from "../utils/commonApis";
 
 const useGetAllStreetList = () => {
   const [loading, setLoading] = useState(true);
   const [streetAllList, setStreetAllList] = useState<RequestStreetData[]>([]);
-
+  const { isSwipe } = useSelector((state: RootState) => state.swipe);
   useEffect(() => {
     const fetchStreetData = async () => {
       try {
@@ -19,7 +21,7 @@ const useGetAllStreetList = () => {
     };
 
     fetchStreetData();
-  }, []);
+  }, [isSwipe]);
 
   return { streetAllList, loading };
 };

diff --git a/src/hook/useGetUserLikeToReview.ts b/src/hook/useGetUserLikeToReview.ts
@@ -0,0 +1,25 @@
+import { useState } from "react";
+import commonApis from "src/utils/commonApis";
+
+// 이것도 바꾸기
+const useGetUserLikeToReview = () => {
+  const [like, setLike] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const getUserLikeToReview = async (reviewId: number) => {
+    setIsLoading(true);
+    try {
+      const response = await commonApis.get(`reviews/isLike/${reviewId}`);
+      if (response.data.statusCode === 200) {
+        setLike(response.data.data);
+      } else {
+        throw new Error("좋아요 실패");
+      }
+    } catch (error) {
+      console.error("좋아요 실패", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return { like, isLoading, getUserLikeToReview };
+};
+export default useGetUserLikeToReview;
diff --git a/src/hook/useLikeReview.tsx b/src/hook/useLikeReview.tsx
@@ -0,0 +1,15 @@
+import commonApis from "../utils/commonApis";
+export const useLikeReview = () => {
+  const handleLikeReview = async (reviewId: number) => {
+    try {
+      const res = await commonApis.post(`/reviews/${reviewId}/like`);
+      console.log(res);
+    } catch (error: any) {
+      const errorLog = error.response.data;
+      if (errorLog.statusCode === 400) {
+        window.alert(errorLog.message);
+      }
+    }
+  };
+  return { handleLikeReview };
+};