design: 글쓰기 컴포넌트 디자인 수정
This commit is contained in:
parent
b82cfb51ae
commit
e8e95bef64
@ -1,27 +0,0 @@
|
||||
import styles from './ChatInput.module.css';
|
||||
import { useRef } from 'react';
|
||||
|
||||
export default function ChattingInput() {
|
||||
// TODO: 채팅이 넘어갈 시 줄바꿈이 되도록 수정
|
||||
// TODO: ㅁ 을 아이콘으로 변경
|
||||
const message = useRef('');
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
// TODO: 실제 메시지 전송 기능 추가
|
||||
console.log(message.current.value);
|
||||
message.current.value = '';
|
||||
};
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className={styles.chattingInput}
|
||||
>
|
||||
<input
|
||||
ref={message}
|
||||
className={styles.input}
|
||||
placeholder="메시지를 입력하세요"
|
||||
/>
|
||||
<div onClick={handleSubmit}>ㅁ</div>
|
||||
</form>
|
||||
);
|
||||
}
|
@ -1,25 +0,0 @@
|
||||
.chattingInput {
|
||||
border-radius: 9999px;
|
||||
background-color: var(--background);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.input {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: var(--text-color);
|
||||
border: 0;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: var(--text-color-tertiary);
|
||||
}
|
@ -1 +0,0 @@
|
||||
export { default as ChatInput } from './ChatInput';
|
@ -1,60 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
@ -1,67 +0,0 @@
|
||||
.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: var(--on-primary);
|
||||
gap: 8px;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.buttonText {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
}
|
@ -1 +0,0 @@
|
||||
export { default as CreateClass } from './CreateClass';
|
@ -60,7 +60,10 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
|
||||
</Link>
|
||||
<div className={styles.title}>{topic}</div>
|
||||
</header>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className={styles.form}
|
||||
>
|
||||
<div className={styles.inputField}>
|
||||
<label className={styles.label}>강의명</label>
|
||||
<input
|
||||
@ -89,16 +92,24 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
|
||||
</div>
|
||||
<div className={styles.inputField}>
|
||||
<label className={styles.label}>강의 기간</label>
|
||||
<div className={styles.dateWrapper}>
|
||||
<div className={styles.date}>
|
||||
<input
|
||||
className={styles.input}
|
||||
ref={startDateRef}
|
||||
type="date"
|
||||
/>
|
||||
<span className={styles.label}>부터</span>
|
||||
</div>
|
||||
<div className={styles.date}>
|
||||
<input
|
||||
className={styles.input}
|
||||
ref={endDateRef}
|
||||
type="date"
|
||||
/>
|
||||
<span className={styles.label}>까지</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.inputField}>
|
||||
<label className={styles.label}>수업 시간</label>
|
||||
@ -117,6 +128,7 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
|
||||
type="file"
|
||||
ref={imageFileRef}
|
||||
accept=".png, .jpg, .jpeg"
|
||||
className={styles.input}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
@ -32,6 +32,33 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.dateWrapper {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
|
||||
& > input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& > span {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.inputField {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -47,11 +74,11 @@
|
||||
|
||||
.input {
|
||||
background: var(--background-color);
|
||||
padding: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@ -60,7 +87,7 @@
|
||||
}
|
||||
|
||||
.textarea {
|
||||
padding: 20px;
|
||||
padding: 16px;
|
||||
height: 80px;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
|
Loading…
Reference in New Issue
Block a user