Merge pull request #50 from LikeLionHGU/#43/ConnectSignInAPI-최예라

feat: 유저페이지 찜한 강좌 보여주기 api 연결
LikeLionHGU · Aug 3, 2024 · 38216cc · 38216cc
2 parents 719b24e + 822cab3
commit 38216cc
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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>
           ))}