design: LearningLecturesPage 카드 크기 수정

frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx

@@ -1,5 +1,5 @@
-import { ClassCard } from '../../components/ClassCard';
+import styles from './LearningLecturesPage.module.css';
-import { ClassGrid } from '../../components/ClassGrid';
+import { Link } from 'react-router-dom';
 
 export default function LearningLecturesPage() {
   const { data: onGoingClasses } = {
@@ -11,15 +11,20 @@ export default function LearningLecturesPage() {
   };
 
   return (
-    <ClassGrid title="수강중인 강의">
+    <section>
-      {onGoingClasses.map((lecture) => (
+      <h2 className={styles.title}>수강중인 강의</h2>
-        <ClassCard
+      <div className={styles.grid}>
-          key={lecture.lecture_id}
+        {onGoingClasses.map((lecture) => (
-          path={`/lecture/${lecture.lecture_id}`}
+          <Link
-        >
+            key={lecture.lecture_id}
-          {lecture.title}
+            to={`/lecture/${lecture.lecture_id}`}
-        </ClassCard>
+            className={styles.card}
-      ))}
+          >
-    </ClassGrid>
+            <div className={styles.thumbnail} />
+            <div>{lecture.title}</div>
+          </Link>
+        ))}
+      </div>
+    </section>
   );
 }

frontend/src/pages/LearningLecturesPage/LearningLecturesPage.module.css

@@ -0,0 +1,32 @@
+.title {
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 700;
+  color: var(--text-color);
+  margin: 0 0 20px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(285px, auto));
+  gap: 20px;
+  justify-content: start;
+  margin-bottom: 40px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+.thumbnail {
+  width: 286.66px;
+  height: 220px;
+  border-radius: 20px;
+  background-color: var(--background-secondary);
+  box-sizing: border-box;
+}