Merge pull request #61 from Team-Remini/feat/#60

feat/#60/좋아요-api연동-랜더링문제해결
Team-Remini · Dec 17, 2023 · f583eb7 · f583eb7
2 parents 49deda7 + fc4c9e0
commit f583eb7
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 102 deletions.
diff --git a/src/components/CompleteWriting/KPT.tsx b/src/components/CompleteWriting/KPT.tsx
@@ -5,13 +5,9 @@ import CompleteImg from "../../img/UI/basicImage.png";
 import BasicProfile from "../../img/UI/basicProfile.png";
 import axios from "axios";
 import GuideLineTheeContent from "../../components/GuideLine/ThreeContent";
-import filledHeart from "../../img/UI/filledHeart.png";
-import emptyHeart from "../../img/UI/emptyHeart.png";
 
 type DataType = {
   createdDate: string;
-  liked: boolean;
-  likesCount: number;
   nickname: String;
   reminiImage: string;
 };
@@ -24,8 +20,6 @@ function CompleteWritingKPT() {
   const [retrospectiveData, setRetrospectiveData] = useState<DataType | null>(
     null
   );
-  const [isLiked, setIsLiked] = useState(false);
-  const [likesCount, setLikesCount] = useState(0);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -49,52 +43,7 @@ function CompleteWritingKPT() {
     if (id) {
       fetchData();
     }
-
-    if (retrospectiveData) {
-      setIsLiked(retrospectiveData.liked);
-      setLikesCount(retrospectiveData.likesCount);
-    }
-  }, [id, retrospectiveData]);
-
-  //좋아요
-  const handleLikeClick = async () => {
-    const accessToken = localStorage.getItem("accessToken");
-    if (!accessToken) {
-      console.log("로그인이 필요합니다.");
-      return;
-    }
-
-    try {
-      let response;
-      if (!isLiked) {
-        response = await axios.post(
-          `https://www.remini.store/api/remini/${id}/likes`,
-          {},
-          {
-            headers: {
-              Authorization: `Bearer ${accessToken}`,
-            },
-          }
-        );
-      } else {
-        response = await axios.delete(
-          `https://www.remini.store/api/remini/${id}/likes`,
-          {
-            headers: {
-              Authorization: `Bearer ${accessToken}`,
-            },
-          }
-        );
-      }
-
-      if (response.status === 200) {
-        setIsLiked(!isLiked);
-        setLikesCount(isLiked ? likesCount - 1 : likesCount + 1);
-      }
-    } catch (error) {
-      console.error("좋아요 처리 중 오류 발생:", error);
-    }
-  };
+  }, [id]);
 
   return (
     <>
@@ -124,18 +73,6 @@ function CompleteWritingKPT() {
               alt="CompleteImg"
               className="CompleteImg"
             />
-            <div className="likes" onClick={(e) => e.stopPropagation()}>
-              <img
-                src={isLiked ? filledHeart : emptyHeart}
-                alt="Heart"
-                onClick={handleLikeClick}
-              />
-              <p
-                style={{ color: isLiked ? "var(--primary-400, #79CD96)" : "" }}
-              >
-                {likesCount}
-              </p>
-            </div>
           </div>
         </div>
         <div className="mainContent-container">

diff --git a/src/components/Modal/ShareModal.tsx b/src/components/Modal/ShareModal.tsx
diff --git a/src/img/UI/Ic_Share.png b/src/img/UI/Ic_Share.png
diff --git a/src/pages/Complete/CompleteWriting.tsx b/src/pages/Complete/CompleteWriting.tsx
@@ -13,44 +13,54 @@ import Performance from "../../components/CompleteWriting/Performance";
 import Personal from "../../components/CompleteWriting/Personal";
 import TIL from "../../components/CompleteWriting/TIL";
 import YWT from "../../components/CompleteWriting/YWT";
+import filledHeart from "../../img/UI/filledHeart.png";
+import emptyHeart from "../../img/UI/emptyHeart.png";
+import sharebtn from "../../img/UI/Ic_Share.png";
 
 //작성완료 조회 페이지
 interface Retrospective {
   title: string;
   type: string;
+  liked: boolean;
+  likesCount: number;
 }
 
 function CompleteWriting() {
   const { id } = useParams();
   const [retrospective, setRetrospective] = useState<Retrospective | null>(
     null
   );
+  const [isLiked, setIsLiked] = useState(false);
+  const [likesCount, setLikesCount] = useState(0);
 
-  useEffect(() => {
-    console.log("Retrieved reminiId:", id);
-    const fetchRetrospective = async () => {
-      try {
-        if (id) {
-          const accessToken = localStorage.getItem("accessToken");
-          const response = await axios.get(
-            `https://www.remini.store/api/remini/${id}`,
-            {
-              headers: {
-                Authorization: `Bearer ${accessToken}`,
-              },
-            }
-          );
-          setRetrospective(response.data);
-          console.log(response.data);
-        }
-      } catch (error) {
-        console.error("Error fetching retrospective:", error);
+  const fetchRetrospective = async () => {
+    try {
+      if (id) {
+        const accessToken = localStorage.getItem("accessToken");
+        const response = await axios.get(
+          `https://www.remini.store/api/remini/${id}`,
+          {
+            headers: {
+              Authorization: `Bearer ${accessToken}`,
+            },
+          }
+        );
+        const data = response.data;
+        setRetrospective(data);
+        setIsLiked(data.liked);
+        setLikesCount(data.likesCount);
+        console.log(data);
       }
-    };
+    } catch (error) {
+      console.error("Error fetching retrospective:", error);
+    }
+  };
 
+  useEffect(() => {
     fetchRetrospective();
   }, [id]);
 
+  //type 값에 맞는 랜더링
   const renderContent = () => {
     if (!retrospective) {
       return <p>Loading...</p>;
@@ -82,6 +92,50 @@ function CompleteWriting() {
     }
   };
 
+  //좋아요
+  const handleLikeClick = async () => {
+    const currentIsLiked = isLiked;
+
+    const accessToken = localStorage.getItem("accessToken");
+
+    try {
+      let response;
+      if (!currentIsLiked) {
+        response = await axios.post(
+          `https://www.remini.store/api/remini/${id}/likes`,
+          {},
+          {
+            headers: {
+              Authorization: `Bearer ${accessToken}`,
+            },
+          }
+        );
+      } else {
+        response = await axios.delete(
+          `https://www.remini.store/api/remini/${id}/likes`,
+          {
+            headers: {
+              Authorization: `Bearer ${accessToken}`,
+            },
+          }
+        );
+      }
+
+      if (response.status !== 200) {
+        // 요청 실패 시 상태 되돌리기
+        setIsLiked(!currentIsLiked);
+        setLikesCount(currentIsLiked ? likesCount - 1 : likesCount + 1);
+      } else {
+        // 요청 성공 시
+        const likesCountResponse = await response.data;
+        setIsLiked(likesCountResponse.isLiked);
+        setLikesCount(likesCountResponse.likesCount);
+      }
+    } catch (error) {
+      console.error("좋아요 처리 중 오류 발생:", error);
+    }
+  };
+
   return (
     <>
       <CompleteWritingWrap>
@@ -90,11 +144,22 @@ function CompleteWriting() {
           <div className="title_content">
             {retrospective ? retrospective.title : "Loading..."}
           </div>
+          <div className="title-contnet-container">
+            <div className="likes" onClick={handleLikeClick}>
+              <img
+                src={isLiked ? filledHeart : emptyHeart}
+                alt={isLiked ? "좋아요 취소" : "좋아요"}
+              />
+              <p>{likesCount}</p>
+            </div>
+            <div className="sharebtn">
+              <img src={sharebtn} />
+            </div>
+          </div>
         </div>
         <div className="mainContent-container">{renderContent()}</div>
         <div className="completeButtom-contaner">
           {/*
-          <button className="shareBtn">공유</button>
           <button className="deleteBtn">삭제</button>
           <button className="editBtn">수정</button>
           */}
@@ -140,23 +205,6 @@ const CompleteWritingWrap = styled.div`
     justify-content: center;
     flex-direction: row;
   }
-  .shareBtn {
-    width: 92dp;
-    height: 45dp;
-    display: inline-flex;
-    padding: 13px 32px;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    border-radius: 16px;
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--text-high-emphasis, rgba(255, 255, 255, 0.87));
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    margin-left: 30dp;
-    border: none;
-  }
   .deleteBtn {
     width: 92dp;
     height: 45dp;
@@ -189,4 +237,30 @@ const CompleteWritingWrap = styled.div`
     font-weight: 600;
     border: none;
   }
+
+  .likes {
+    position: absolute;
+    top: 180px;
+    right: 320px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .likes p {
+    color: rgba(255, 255, 255, 0.87);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+  }
+
+  .sharebtn {
+    position: absolute;
+    top: 180px;
+    right: 280px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
 `;