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

frontend/src/components/ChatInput/ChatInput.jsx

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

frontend/src/components/ChatInput/ChatInput.module.css

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

frontend/src/components/ChatInput/index.js

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

frontend/src/components/CreateClass/CreateClass.jsx

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

frontend/src/components/CreateClass/CreateClass.module.css

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

frontend/src/components/CreateClass/index.js

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

frontend/src/components/LectureForm/LectureForm.jsx

@@ -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>
-          <input
+          <div className={styles.dateWrapper}>
-            className={styles.input}
+            <div className={styles.date}>
-            ref={startDateRef}
+              <input
-            type="date"
+                className={styles.input}
-          />
+                ref={startDateRef}
-          <input
+                type="date"
-            className={styles.input}
+              />
-            ref={endDateRef}
+              <span className={styles.label}>부터</span>
-            type="date"
+            </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>
         )}

frontend/src/components/LectureForm/LectureForm.module.css

@@ -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;
+  font-size: 16px;
-  line-height: 1.2;
+  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);