diff --git a/src/components/LectureListPage/TeacherProfileCard.jsx b/src/components/LectureListPage/TeacherProfileCard.jsx index ba00123..d6a4967 100644 --- a/src/components/LectureListPage/TeacherProfileCard.jsx +++ b/src/components/LectureListPage/TeacherProfileCard.jsx @@ -3,7 +3,14 @@ import styled from "styled-components"; import StarRating from "../../components/Common/StarRating"; import heartIcon from "../../assets/img/heart.svg"; -function TeacherProfileCard({ course }) { +function TeacherProfileCard({ teacher, course }) { + const possibleDisabilityTypes = course.possibleDisabilityType?.map( + (item) => item.disabilityType + ); + const disabilityTypesText = possibleDisabilityTypes?.join(", "); + + if (!teacher) return
강사 정보 불러오는 중 ...
; + return ( <> @@ -21,15 +28,14 @@ function TeacherProfileCard({ course }) { #{course.location} {course.sportType} - 7월 17일 - {course.name} - {course.disabilityType} + {teacher.name} + {disabilityTypesText} {course.price.toLocaleString()}원 - - (45) + + ({teacher.reviewCount}) diff --git a/src/components/LectureListPage/TeacherProfileModal.jsx b/src/components/LectureListPage/TeacherProfileModal.jsx index 4483eda..2c4178b 100644 --- a/src/components/LectureListPage/TeacherProfileModal.jsx +++ b/src/components/LectureListPage/TeacherProfileModal.jsx @@ -1,46 +1,35 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import styled from "styled-components"; -import defaultTeacherImg from "../../assets/img/defaultTeacherImg.svg"; +// import defaultTeacherImg from "../../assets/img/defaultTeacherImg.svg"; import closeBtn from "../../assets/img/CloseBtn.svg"; import star from "../../assets/img/star.svg"; -import { Link } from "react-router-dom"; +import { Link, useParams } from "react-router-dom"; import TeacherProfileCard from "./TeacherProfileCard"; +import axios from "axios"; function TeacherProfileModal({ toggleModal }) { - const data = [ - { - courseId: 1, - title: "하루 30분: 건강한 피트니스 루틴", - name: "이다빈 강사님", - sportType: "수영", - location: "경북 포항시 북구", - score: 3.5, - disabilityType: "뇌병변 / 시, 청각 장애 가능", - price: 30000, - likeCount: 100, - isLike: true, - isGroup: false, - teacherName: "이다빈 강사님", - imageURL: - "https://cdn.pixabay.com/photo/2019/07/01/10/44/water-4309678_1280.jpg", - }, - { - courseId: 2, - title: "유연한 몸: 요가와 스트레칭 클래스", - name: "김예지 강사님", - sportType: "수영", - location: "경북 포항시 북구", - score: 3.5, - disabilityType: "뇌병변 / 시, 청각 장애 가능", - price: 30000, - likeCount: 100, - isLike: true, - isGroup: false, - teacherName: "이다빈 강사님", - imageURL: - "https://cdn.pixabay.com/photo/2019/07/01/10/44/water-4309678_1280.jpg", - }, - ]; + const { courseId } = useParams(); + const [data, setData] = useState(); + + useEffect(() => { + axios + .get( + `${process.env.REACT_APP_HOST_URL}/api/course/detail?courseId=${courseId}`, + { + headers: { + Authorization: `Bearer ${localStorage.getItem("jwtToken")}`, + }, + } + ) + .then((response) => { + console.log(response.data); + setData(response.data); + }); + }, [courseId]); + + const careers = data?.teacher?.career?.split(",").map((item) => item.trim()); + + if (!data) return
강사 정보 불러오는 중 ...
; return ( @@ -49,33 +38,34 @@ function TeacherProfileModal({ toggleModal }) { - 기본 강사 이미지 + 기본 강사 이미지 - 최예라 + {data.teacher.name} 강사님 수강생 수 - 87 + {data.teacher.studentCount} 수강평수 - 12 + {data.teacher.reviewCount} 강의평점
별 이미지 - 5.0 + {data.teacher.score}
보유 자격증 - • 생활 체육 지도사 1급 - • 재활 치료사 + {careers?.map((career, index) => ( + • {career} + ))}
@@ -88,22 +78,22 @@ function TeacherProfileModal({ toggleModal }) { > - 자기소개란 + {data.teacher.description} - 최예라 강사님의 강좌 + {data.teacher.name} 강사님의 강좌 - {data.map((course) => ( + {data.teacher.courseList?.map((course) => ( - + ))} @@ -239,7 +229,9 @@ const CourseRate = styled.div` const Certificate = styled.div` /* border: 1px solid red; */ - margin-top: 58px; + margin-top: 50px; + height: 140px; + overflow-y: auto; `; const CertificateCategory = styled.div` @@ -285,10 +277,13 @@ const TeacherDiscription = styled.div` border-radius: 15px; margin-top: 30px; padding: 30px 28px; + overflow-y: auto; + /* border: 1px solid red; */ `; const Discription = styled.div` font-size: 14px; + /* border: 1px solid red; */ `; const AnotherCourse = styled.div` @@ -299,4 +294,8 @@ const AnotherCourse = styled.div` const CourseContainer = styled.div` /* border: 1px solid red; */ margin-top: 20px; + height: 300px; + width: 500px; + padding-right: 10px; + overflow-y: auto; `; diff --git a/src/pages/LoginRedirection.jsx b/src/pages/LoginRedirection.jsx index 618e1c3..c0b4f95 100644 --- a/src/pages/LoginRedirection.jsx +++ b/src/pages/LoginRedirection.jsx @@ -26,9 +26,7 @@ const LoginRedirection = () => { }, }) .then((response) => { - localStorage.setItem("kakaoId", response.data.kakaoId); // JWT 액세스 토큰을 로컬 스토리지에 저장 - localStorage.setItem("accessToken", response.data.accessToken); localStorage.setItem("jwtToken", response.data.token); navigate("/");