Merge branch 'fe/thumbnail' into 'frontend'

[Front-End] feat: 썸네일 스타일 수정, 크기 변경

See merge request s11-webmobile1-sub2/S11P12A701!100

frontend/src/components/ClassCard/ClassCard.module.css

@@ -12,14 +12,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 295px;
+  width: 100%;
-  height: 220px;
+  aspect-ratio: 4/3;
   border-radius: 20px;
   background-color: var(--background-secondary);
-  stroke: var(--text-color);
+  border: 1px solid var(--background-secondary);
+  object-fit: contain;
+  stroke: var(--text-color-secondary);
   box-sizing: border-box;
 }
-
-img.thumbnail {
-  border: 1px solid var(--border-color);
-}

frontend/src/components/ClassGrid/ClassGrid.module.css

@@ -8,7 +8,7 @@
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(295px, auto));
+  grid-template-columns: repeat(5, 1fr);
   gap: 20px;
   justify-content: start;
   margin-bottom: 40px;

frontend/src/components/LectureHeader/LectureHeader.module.css

@@ -26,8 +26,10 @@
   width: 120px;
   height: 120px;
   border-radius: 16px;
-  stroke: var(--text-color);
+  stroke: var(--text-color-secondary);
-  border: 1px solid var(--border-color);
+  object-fit: contain;
+  background-color: var(--background-secondary);
+  border: 1px solid var(--background-secondary);
 }
 
 .info {
@@ -63,6 +65,7 @@
   width: 48px;
   height: 48px;
   border-radius: 50%;
+  object-fit: cover;
   stroke: var(--text-color-secondary);
   border: 1px solid var(--border-color);
 }

frontend/src/components/QuizForm/QuizCard.module.css

@@ -37,6 +37,7 @@
   margin: 10px auto;
   border-radius: 8px;
   background-color: var(--background-secondary);
+  object-fit: contain;
   cursor: pointer;
 }
 

frontend/src/components/QuizsetDetail/QuizsetDetail.module.css

@@ -40,7 +40,9 @@
   height: 220px;
   margin: 10px auto;
   border-radius: 8px;
+  object-fit: contain;
   background-color: var(--background-secondary);
+  border: 1px solid var(--background-secondary);
 }
 
 .grid {

frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx

@@ -1,6 +1,8 @@
 import styles from './LearningLecturesPage.module.css';
 import { Link } from 'react-router-dom';
 import { useMyLectures } from '../../hooks/api/useMyLectures';
+import CompassIcon from '/src/assets/icons/compass.svg?react';
+import { STATIC_URL } from '../../constants';
 
 export default function LearningLecturesPage() {
   const { data } = useMyLectures();
@@ -18,7 +20,17 @@ export default function LearningLecturesPage() {
               to={`/lecture/${lecture.id}`}
               className={styles.card}
             >
-              <div className={styles.thumbnail} />
+              {lecture.image ? (
+                <img
+                  src={`${STATIC_URL}${lecture.image}`}
+                  alt={lecture.title}
+                  className={styles.thumbnail}
+                />
+              ) : (
+                <div className={styles.thumbnail}>
+                  <CompassIcon />
+                </div>
+              )}
               <div>{lecture.title}</div>
             </Link>
           ))

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

@@ -8,7 +8,7 @@
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(285px, auto));
+  grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   justify-content: start;
   margin-bottom: 40px;
@@ -25,8 +25,15 @@
 }
 
 .thumbnail {
-  height: 220px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  aspect-ratio: 4/3;
   border-radius: 20px;
   background-color: var(--background-secondary);
+  border: 1px solid var(--background-secondary);
+  object-fit: contain;
+  stroke: var(--text-color-secondary);
   box-sizing: border-box;
 }