Merge pull request #23 from TeamBNBN/fe/CreateClass

[Front-End] feat: CreateClass 추가
This commit is contained in:
Jo Hyeonsoo 2024-07-16 17:15:07 +09:00 committed by GitHub
commit f4d24062e3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 128 additions and 0 deletions

View File

@ -0,0 +1,60 @@
import styles from './CreateClass.module.css';
import { useRef } from 'react';
export default function CreateClass() {
// TODO:
const classTime = useRef('');
const numOfLecture = useRef('');
const significant = useRef('');
const handleSubmit = () => {
// TODO :
const payload = {
classTime: classTime.current.value,
numOfLecture: numOfLecture.current.value,
significant: significant.current.value,
};
alert(`특이사항 : ${payload.significant}`);
};
return (
<form
className={styles.createClass}
onSubmit={handleSubmit}
>
<div className={styles.inputField}>
<label className={styles.label}>수업 시간</label>
<input
className={styles.input}
ref={classTime}
type="text"
placeholder="수업 시간을 입력하세요"
/>
</div>
<div className={styles.inputField}>
<label className={styles.label}>강의 </label>
<input
className={styles.input}
ref={numOfLecture}
type="text"
placeholder="총 강의 수를 입력하세요"
/>
</div>
<div className={styles.inputField}>
<label className={styles.label}>특이사항</label>
<textarea
ref={significant}
className={styles.textarea}
placeholder="이 수업만의 특이사항이 있다면 입력하세요"
></textarea>
</div>
<button
type="submit"
className={styles.button}
>
<div></div>
<div className={styles.buttonText}> 쓰기</div>
</button>
</form>
);
}

View File

@ -0,0 +1,67 @@
.createClass {
background: var(--background-color);
width: 100%;
display: flex;
flex-direction: column;
gap: 40px;
}
.inputField {
display: flex;
flex-direction: column;
gap: 8px;
}
.label {
color: var(--text-color);
font-size: 16px;
font-weight: 400;
line-height: 1.4;
}
.input {
background: var(--background-color);
padding: 20px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 20px;
line-height: 1.2;
font-weight: 400;
}
.input::placeholder {
color: var(--text-color-tertiary);
}
.textarea {
padding: 20px;
height: 150px;
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 16px;
line-height: 1.4;
font-weight: 400;
}
.textarea::placeholder {
color: var(--text-color-tertiary);
}
.button {
display: flex;
flex-direction: row;
padding: 16px 24px;
border-radius: 8px;
border: 1px solid var(--primary-color);
background-color: var(--primary-color);
color: white;
gap: 8px;
align-self: end;
}
.buttonText {
font-size: 16px;
line-height: 1.4;
font-weight: 700;
}

View File

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