design: 글쓰기 컴포넌트 디자인 수정

This commit is contained in:
jhynsoo 2024-08-11 23:45:31 +09:00
parent b82cfb51ae
commit e8e95bef64
8 changed files with 54 additions and 196 deletions

View File

@ -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>
);
}

View File

@ -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);
}

View File

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

View File

@ -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>
);
}

View File

@ -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;
}

View File

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

View File

@ -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>
)}

View File

@ -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);