From f7ec23480895466c85e8323222c3ff0a89d80b6a Mon Sep 17 00:00:00 2001
From: YearaChoi <22200750@handong.ac.kr>
Date: Sat, 3 Aug 2024 23:01:50 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B0=95=EC=A2=8C=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B0=9C?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0=20api=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LectureListPage/LectureDetailContent.jsx  | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/LectureListPage/LectureDetailContent.jsx b/src/components/LectureListPage/LectureDetailContent.jsx
index b89866d..15d5b9a 100644
--- a/src/components/LectureListPage/LectureDetailContent.jsx
+++ b/src/components/LectureListPage/LectureDetailContent.jsx
@@ -20,7 +20,6 @@ function LectureDetailContent() {
     useState(false);
 
   const [data, setData] = useState();
-
   const [isLike, setIsLike] = useState(false);
 
   useEffect(() => {
@@ -36,6 +35,7 @@ function LectureDetailContent() {
       .then((response) => {
         console.log(response.data);
         setData(response.data);
+        setIsLike(response.data.like);
       });
   }, [courseId]);
 
@@ -69,10 +69,31 @@ function LectureDetailContent() {
   };
 
   const handleHeartIconClick = () => {
-    setIsLike((prevState) => !prevState);
-    if (isLike === false) {
-      alert("찜한 강좌에 저장되었습니다.");
-    }
+    const newLikeState = !isLike;
+    setIsLike(newLikeState);
+
+    axios
+      .post(
+        `${process.env.REACT_APP_HOST_URL}/api/course/like?courseId=${courseId}`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
+          },
+        }
+      )
+      .then((response) => {
+        console.log(response.data);
+        if (newLikeState) {
+          alert("찜한 강좌에 저장되었습니다.");
+        } else {
+          alert("찜한 강좌에서 제거되었습니다.");
+        }
+      })
+      .catch((error) => {
+        console.error("Error updating like status:", error);
+        setIsLike(!newLikeState); // 실패시 상태 롤백
+      });
   };
 
   useEffect(() => {