From c8bd7813812eafbc528841c05ed2c5919dd7e559 Mon Sep 17 00:00:00 2001 From: jhynsoo Date: Thu, 8 Aug 2024 10:14:25 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=8D=B8=EB=84=A4=EC=9D=BC=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95,=20=ED=81=AC=EA=B8=B0?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ClassCard/ClassCard.module.css | 12 +++++------- .../src/components/ClassGrid/ClassGrid.module.css | 2 +- .../LectureHeader/LectureHeader.module.css | 7 +++++-- .../src/components/QuizForm/QuizCard.module.css | 1 + .../QuizsetDetail/QuizsetDetail.module.css | 2 ++ .../LearningLecturesPage/LearningLecturesPage.jsx | 14 +++++++++++++- .../LearningLecturesPage.module.css | 11 +++++++++-- 7 files changed, 36 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/ClassCard/ClassCard.module.css b/frontend/src/components/ClassCard/ClassCard.module.css index d27cc22..518aff7 100644 --- a/frontend/src/components/ClassCard/ClassCard.module.css +++ b/frontend/src/components/ClassCard/ClassCard.module.css @@ -12,14 +12,12 @@ display: flex; justify-content: center; align-items: center; - width: 295px; - height: 220px; + width: 100%; + 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); -} diff --git a/frontend/src/components/ClassGrid/ClassGrid.module.css b/frontend/src/components/ClassGrid/ClassGrid.module.css index b0de2c6..484e9b6 100644 --- a/frontend/src/components/ClassGrid/ClassGrid.module.css +++ b/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; diff --git a/frontend/src/components/LectureHeader/LectureHeader.module.css b/frontend/src/components/LectureHeader/LectureHeader.module.css index ee0889b..e98c683 100644 --- a/frontend/src/components/LectureHeader/LectureHeader.module.css +++ b/frontend/src/components/LectureHeader/LectureHeader.module.css @@ -26,8 +26,10 @@ width: 120px; height: 120px; border-radius: 16px; - stroke: var(--text-color); - border: 1px solid var(--border-color); + stroke: var(--text-color-secondary); + 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); } diff --git a/frontend/src/components/QuizForm/QuizCard.module.css b/frontend/src/components/QuizForm/QuizCard.module.css index 05cbd09..48abeb7 100644 --- a/frontend/src/components/QuizForm/QuizCard.module.css +++ b/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; } diff --git a/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css b/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css index 08ded4d..033c587 100644 --- a/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css +++ b/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 { diff --git a/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx b/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx index 3034291..2b6be71 100644 --- a/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx +++ b/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} > -
+ {lecture.image ? ( + {lecture.title} + ) : ( +
+ +
+ )}
{lecture.title}
)) diff --git a/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.module.css b/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.module.css index d2e9e98..06a22b5 100644 --- a/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.module.css +++ b/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; }