From 822cab3143b653e2d766e006016d5ec65e856fcb Mon Sep 17 00:00:00 2001
From: YearaChoi <22200750@handong.ac.kr>
Date: Sat, 3 Aug 2024 23:43:42 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=B0=9C=ED=95=9C=20=EA=B0=95=EC=A2=8C=20=EB=B3=B4?=
 =?UTF-8?q?=EC=97=AC=EC=A3=BC=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

---
 src/components/Common/CourseCard.jsx          | 14 +++++++---
 .../LectureListPage/LectureDetailContent.jsx  |  2 +-
 .../UserPage/UserSavedLectureContent.jsx      | 28 +++++++++++++++----
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/components/Common/CourseCard.jsx b/src/components/Common/CourseCard.jsx
index d333001..e58894b 100644
--- a/src/components/Common/CourseCard.jsx
+++ b/src/components/Common/CourseCard.jsx
@@ -2,12 +2,18 @@ import React from "react";
 import styled from "styled-components";
 import StarRating from "./StarRating";
 import heartIcon from "../../assets/img/heart.svg";
+import defaultImg from "../../assets/img/defaultImg.jpg";
 
 function CourseCard({ course }) {
+  const possibleDisabilityTypes = course.possibleDisabilityType?.map(
+    (item) => item.disabilityType
+  );
+  const disabilityTypesText = possibleDisabilityTypes?.join(", ");
+
   return (
     <Card>
       <CourseImg>
-        <img src={course.imageURL} alt="기본 강좌 이미지"></img>
+        <img src={defaultImg} alt="기본 강좌 이미지" />
       </CourseImg>
       <InfoSection>
         <Top>
@@ -22,13 +28,13 @@ function CourseCard({ course }) {
           <Tag>{course.sportType}</Tag>
           <Tag>7월 17일</Tag>
         </Tags>
-        <Teacher>{course.name}</Teacher>
-        <DisabailityType>{course.disabilityType}</DisabailityType>
+        <Teacher>{course.teacherName}</Teacher>
+        <DisabailityType>{disabilityTypesText}</DisabailityType>
         <Bottom>
           <Price>{course.price.toLocaleString()}원</Price>
           <Score>
             <StarRating score={course.score} />
-            <StarRate>(45)</StarRate>
+            <StarRate>({course.reviewCount})</StarRate>
           </Score>
         </Bottom>
       </InfoSection>
diff --git a/src/components/LectureListPage/LectureDetailContent.jsx b/src/components/LectureListPage/LectureDetailContent.jsx
index 15d5b9a..9f59d2e 100644
--- a/src/components/LectureListPage/LectureDetailContent.jsx
+++ b/src/components/LectureListPage/LectureDetailContent.jsx
@@ -61,7 +61,7 @@ function LectureDetailContent() {
   const navigate = useNavigate();
 
   const handleCourseApplyBtnClick = () => {
-    navigate("/lecture/:courseId/:courseBlockId");
+    navigate(`/lecture/${courseId}/:courseBlockId`);
   };
 
   const toggleTeacherProfileModal = () => {
diff --git a/src/components/UserPage/UserSavedLectureContent.jsx b/src/components/UserPage/UserSavedLectureContent.jsx
index 56bb41b..f5bece7 100644
--- a/src/components/UserPage/UserSavedLectureContent.jsx
+++ b/src/components/UserPage/UserSavedLectureContent.jsx
@@ -1,18 +1,36 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import CourseCard from "../Common/CourseCard";
 import CourseDivideLine from "../Common/CourseDivideLine";
-import data from "../../components/Common/CourseDummyData";
+import axios from "axios";
+// import data from "../../components/Common/CourseDummyData";
 
 function UserSavedLectureContent() {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    axios
+      .get(`${process.env.REACT_APP_HOST_URL}/api/mypage/like`, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
+        },
+      })
+      .then((response) => {
+        console.log(response.data);
+        setData(response.data);
+      });
+  }, []);
+
+  if (!data) return <div>Loading...</div>;
+
   return (
     <Wrapper>
       <Content>
         <Title>최예라 님! 찜한 강의들이에요</Title>
         <CourseContainer>
-          {data.map((course, index) => (
-            <React.Fragment key={course.courseId}>
-              <CourseCard course={course} />
+          {data?.map((data, index) => (
+            <React.Fragment key={data.courseId}>
+              <CourseCard course={data} />
               {index % 2 === 0 && <CourseDivideLine />}
             </React.Fragment>
           ))}