feat: ClassInfo 추가

This commit is contained in:
정기영 2024-07-16 12:12:08 +09:00
parent dbf1031c55
commit f119d0cb70
3 changed files with 81 additions and 0 deletions

View File

@ -0,0 +1,22 @@
import styles from './ClassInfo.module.css';
export default function ClassInfo({ classTerm, classTime }) {
return (
<div className={styles.classInfo}>
<div className={styles.title}>수업정보</div>
<div className={styles.info}>
<div className={styles.textGroup}>
<div className={styles.subtitle}>수업 기간</div>
<div className={styles.content}>{classTerm}</div>
</div>
<div className={styles.textGroup}>
<div className={styles.subtitle}>수업시간</div>
<div className={styles.content}>{classTime}</div>
</div>
</div>
<button className={styles.button}>
<div className={styles.buttonText}>수강신청</div>
</button>
</div>
);
}

View File

@ -0,0 +1,58 @@
.classInfo {
width: 100%;
padding: 20px;
border-radius: 20px;
background-color: var(--background);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 20px;
}
.title {
font-size: 24px;
font-weight: 700;
line-height: 1.2;
}
.info {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.textGroup {
width: 100%;
height: 100%;
}
.subtitle {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
margin-bottom: 2px;
}
.content {
font-size: 14px;
font-weight: 300;
line-height: 1.4;
color: var(--text-color-secondary);
}
.button {
border: 0;
border-radius: 8px;
background-color: var(--greyOpacity900);
text-align: center;
padding: 12px;
}
.buttonText {
font-size: 16px;
font-weight: 700;
line-height: 1.4;
color: var(--whiteOpacity900);
}

View File

@ -0,0 +1 @@
export { default as ClassInfo } from './ClassInfo';