Merge pull request #24 from osohyun0224/master

[Feat/FE] 카테고리를 기준으로 수강 이미지 랜더링 구현 / login-api.js를 활용해 로그인 임시 연결 완료

src/components/CourseCard.jsx

@@ -13,15 +13,12 @@ const CourseCardContainer = styled.div`
   font-family: "SUIT Variable";
 `;
 
-const CourseImage = styled.div`
+const CourseImage = styled.img`
   height: 150px;
-  background-color: grey; 
+  width: 100%;
   border-radius: 10px 10px 0 0;
-  background-image: url(${props => props.image});
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
-`;
+  object-fit: cover; 
+`
 
 const CourseInfo = styled.div`
   height: 150px;
@@ -99,11 +96,11 @@ const CourseCard = ({ id, image, title, description, time, tags }) => {
   return (
     <LinkedCourseCardContainer to={`/coursedetail/${id}`}>
       <CourseCardContainer>
-        <CourseImage src={image}></CourseImage>
+        <CourseImage src={image} alt={title}></CourseImage>
         <CourseInfo>
           <CourseTitle>{title}</CourseTitle>
           <CourseDescription>{description}</CourseDescription>
-          <CourseTime>{time / 60} 분</CourseTime>
+          <CourseTime>{time / 60} 초</CourseTime>
           <HorizontalLine />
           <TagContainer>
             {tags && tags.map((tag, index) => (
@@ -115,7 +112,6 @@ const CourseCard = ({ id, image, title, description, time, tags }) => {
     </LinkedCourseCardContainer>
   );
 };
-
 CourseCard.propTypes = {
   id: PropTypes.number.isRequired,
   image: PropTypes.string,

src/librarys/exercise-api.js

@@ -1,36 +1,39 @@
-import CourseImagePlaceholder from "../assets/images/course-placeholder.jpg";
+import arms from "../assets/images/arms-up.webp";
+import knee from "../assets/images/knee.webp";
+import shoulder from "../assets/images/shoulder-up.webp";
+import thigh from "../assets/images/thigh.webp";
 
 const courseList = [
     {
         id: 1,
         title: "거북목 탈출코스",
         description: "이 코스는 목과 어깨의 근육을 이완시켜주는 운동을 포함하고 있습니다.",
         time: 900,
-        image: CourseImagePlaceholder,
-        tags: ["목", "어깨", "앉은 자세"]
+        image: shoulder,
+        tags: ["어깨", "앉은 자세"]
     },
     {
         id: 2,
         title: "코어 강화 코스",
         description: "코어 근육을 강화하는데 초점을 둔 운동을 학습합니다.",
         time: 900,
-        image: CourseImagePlaceholder,
+        image: arms,
         tags: ["팔", "선 자세"]
     },
     { 
       id: 3,
       title: "하체 강화 코스",
       description: "다리와 엉덩이 근육을 강화하는 운동을 진행합니다.",
       time: 900,
-      image: CourseImagePlaceholder,
+      image: thigh,
       tags: ["허벅지", "선 자세"]
     },
     { 
       id: 4,
       title: "유연성 향상 코스",
       description: "몸의 유연성을 높이는 스트레칭 운동을 포함하고 있습니다.",
       time: 900,
-      image: CourseImagePlaceholder,
+      image: shoulder,
       tags: ["어깨", "앉은 자세"]
     },
 
@@ -39,32 +42,32 @@ const courseList = [
       title: "유산소 운동 코스",
       description: "심장 건강과 체력 향상을 위한 유산소 운동을 합니다.",
       time: 900,
-      image: CourseImagePlaceholder,
+      image: shoulder,
       tags: ["어깨", "선 자세"]
     },
     { 
       id: 6,
       title: "근력 운동 코스",
       description: "체중을 이용한 근력 운동을 중점적으로 합니다.",
       time:  900,
-      image: CourseImagePlaceholder,
+      image: thigh,
       tags: ["허벅지", "선 자세", "앉은 자세"]
     },
     { 
       id: 7,
       title: "밸런스 트레이닝",
       description: "몸의 균형 능력을 향상시키기 위한 운동 코스입니다.",
       time:  900,
-      image: CourseImagePlaceholder,
+      image: shoulder,
       tags: ["어깨", "앉은 자세"]
     },
     { 
       id: 8,
       title: "포스쳐 교정 코스",
       description: "올바른 자세를 유지하기 위한 교정 운동을 포함하고 있습니다.",
       time: 900,
-      image: CourseImagePlaceholder,
-      tags: ["목", "선 자세"]
+      image: knee,
+      tags: ["무릎", "선 자세"]
     },
   ];
 

src/pages/CourseDetail.jsx

@@ -32,13 +32,16 @@ const ExerciseTitle = styled.h1`
   top: 40px;
   font-weight: bold;
   font-family: "SUIT Variable";
+  font-size: 25px;
 `;
 
 const ExerciseDescription = styled.p`
   position: absolute;
   left: 500px;
   top: 70px;
   font-family: "SUIT Variable";
+  font-size: 20px;
+  margin-top: 10px;
 `;
 
 const Tag = styled.div`
@@ -181,7 +184,7 @@ const CourseDetail = () => {
           onClick={() => setIsChecked((prev) => !prev)}
         />
         <ActionName>{course.title}</ActionName>
-        <ActionTime>{course.time}</ActionTime>
+        <ActionTime>{course.time / 60} 초</ActionTime>
         <PlayerButton onClick={() => {}} />
       </CourseInfoContainer>
       <DividerLine />

src/pages/MainPage.jsx

@@ -31,6 +31,7 @@ const ProgramText = styled.p`
   bottom: 20px;
   left: 118px;
   font-family: "SUIT Variable";
+  font-weight: bold;
 `;
 
 const CategoryText = styled.div`
@@ -104,7 +105,7 @@ const MainPage = () => {
       </Background>
       <CategoryText>
         <Label>카테고리별</Label>
-        {["팔", "어깨", "목", "허벅지"].map((category) => (
+        {["팔", "어깨", "무릎", "허벅지"].map((category) => (
           <FilterButton
             key={category}
             selected={selectedCategory === category}

src/pages/MyCourse.jsx

@@ -1,14 +1,16 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 import { getAllCourses } from "../librarys/exercise-api.js";
 
 import Header from "../components/Header";
-import styled from 'styled-components';
+import styled from "styled-components";
 import dumbbell from "../assets/images/dumbbell.png";
 
 import CourseCard from "../components/CourseCard";
+import { useSelector } from "react-redux";
+import { selectName } from "../redux/userSlice.js";
 
 const PageWrapper = styled.div`
-  background-color: #ACEAFF;
+  background-color: #aceaff;
   min-height: 100vh;
   position: absolute;
   top: 0;
@@ -50,6 +52,8 @@ const CardContainer = styled.div`
 
 const MyCourse = () => {
   const [courses, setCourses] = useState([]);
+  const userName = useSelector(selectName);
+
 
   useEffect(() => {
     async function fetchData() {
@@ -65,8 +69,9 @@ const MyCourse = () => {
       <Greeting>
         안녕하세요,
         <br />
-        오소현님.
+        {userName}님.
       </Greeting>
+
       <DumbbellImage src={dumbbell} alt="dumbbell image" />
       <ExerciseTitle>진행한 운동</ExerciseTitle>
       <CardContainer>
@@ -86,4 +91,4 @@ const MyCourse = () => {
   );
 };
 
-export default MyCourse;
+export default MyCourse;