feat: 강의 카드, 강의 목록 추가
This commit is contained in:
parent
f3cac4ac25
commit
04e38180d6
14
frontend/src/components/ClassCard/ClassCard.jsx
Normal file
14
frontend/src/components/ClassCard/ClassCard.jsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import styles from './ClassCard.module.css';
|
||||||
|
|
||||||
|
export default function ClassCard({ path, children }) {
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
to={path}
|
||||||
|
className={styles.card}
|
||||||
|
>
|
||||||
|
<div className={styles.thumbnail} />
|
||||||
|
<div>{children}</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
19
frontend/src/components/ClassCard/ClassCard.module.css
Normal file
19
frontend/src/components/ClassCard/ClassCard.module.css
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
width: 295px;
|
||||||
|
height: 295px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.2;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: var(--background-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
1
frontend/src/components/ClassCard/index.js
Normal file
1
frontend/src/components/ClassCard/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default as ClassCard } from './ClassCard';
|
10
frontend/src/components/ClassGrid/ClassGrid.jsx
Normal file
10
frontend/src/components/ClassGrid/ClassGrid.jsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import styles from './ClassGrid.module.css';
|
||||||
|
|
||||||
|
export default function ClassGrid({ title, children }) {
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<h2 className={styles.title}>{title}</h2>
|
||||||
|
<div className={styles.grid}>{children}</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
14
frontend/src/components/ClassGrid/ClassGrid.module.css
Normal file
14
frontend/src/components/ClassGrid/ClassGrid.module.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
.title {
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 1.2;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-color);
|
||||||
|
margin: 0 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(295px, auto));
|
||||||
|
gap: 20px;
|
||||||
|
justify-content: start;
|
||||||
|
}
|
1
frontend/src/components/ClassGrid/index.js
Normal file
1
frontend/src/components/ClassGrid/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default as ClassGrid } from './ClassGrid';
|
Loading…
Reference in New Issue
Block a user