From 7b98c7cb56f88a23ced9340dcce549cbfb6abda2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Tue, 16 Jul 2024 17:12:19 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20CreateClass=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CreateClass/CreateClass.jsx    | 60 +++++++++++++++++
 .../CreateClass/CreateClass.module.css        | 67 +++++++++++++++++++
 frontend/src/components/CreateClass/index.js  |  1 +
 3 files changed, 128 insertions(+)
 create mode 100644 frontend/src/components/CreateClass/CreateClass.jsx
 create mode 100644 frontend/src/components/CreateClass/CreateClass.module.css
 create mode 100644 frontend/src/components/CreateClass/index.js

diff --git a/frontend/src/components/CreateClass/CreateClass.jsx b/frontend/src/components/CreateClass/CreateClass.jsx
new file mode 100644
index 0000000..5a948e4
--- /dev/null
+++ b/frontend/src/components/CreateClass/CreateClass.jsx
@@ -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>
+  );
+}
diff --git a/frontend/src/components/CreateClass/CreateClass.module.css b/frontend/src/components/CreateClass/CreateClass.module.css
new file mode 100644
index 0000000..5d5630a
--- /dev/null
+++ b/frontend/src/components/CreateClass/CreateClass.module.css
@@ -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;
+}
diff --git a/frontend/src/components/CreateClass/index.js b/frontend/src/components/CreateClass/index.js
new file mode 100644
index 0000000..6b11d39
--- /dev/null
+++ b/frontend/src/components/CreateClass/index.js
@@ -0,0 +1 @@
+export { default as CreateClass } from './CreateClass';
\ No newline at end of file