feat: lectureCreatePage 기본 형태 완성 및 라우터 추가

frontend/src/Router.jsx

@@ -24,6 +24,7 @@ const PasswordResetPage = lazy(async () => await import('./pages/PasswordResetPa
 const MyInfoChangePage = lazy(async () => await import('./pages/MyInfoChangePage'));
 const PasswordChangePage = lazy(async () => await import('./pages/PasswordChangePage'));
 const LearningLecturesPage = lazy(async () => await import('./pages/LearningLecturesPage'));
+const LectureCreatePage = lazy(async () => await import('./pages/LectureCreatePage'));
 
 const router = createBrowserRouter([
   {
@@ -45,6 +46,10 @@ const router = createBrowserRouter([
         index: true,
         element: <HomePage />,
       },
+      {
+        path: 'lecture/create',
+        element: <LectureCreatePage />,
+      },
       {
         path: 'lecture/:lectureId/info',
         element: <LectureInfoPage />,

frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx

@@ -0,0 +1,88 @@
+import styles from './LectureCreatePage.module.css';
+import { useRef } from 'react';
+
+export default function LectureCreatePage() {
+  // TODO: 디자인 후 적용
+  const title = useRef('');
+  const description = useRef('');
+  const plan = useRef('');
+  const startDate = useRef('');
+  const endDate = useRef('');
+  const time = useRef('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const payload = {
+      title: title.current.value,
+      description: description.current.value,
+      plan: plan.current.value,
+      startDate: startDate.current.value,
+      endDate: endDate.current.value,
+      time: time.current.value,
+    };
+    console.log(payload);
+  };
+
+  return (
+    <form
+      className={styles.createClass}
+      onSubmit={handleSubmit}
+    >
+      <div className={styles.inputField}>
+        <label className={styles.label}>강의명</label>
+        <input
+          className={styles.input}
+          ref={title}
+          type="text"
+          placeholder="강의명을 입력하세요"
+        />
+      </div>
+      <div className={styles.inputField}>
+        <label className={styles.label}>설명</label>
+        <input
+          className={styles.input}
+          ref={description}
+          type="text"
+          placeholder="강의에 대한 설명을 입력하세요"
+        />
+      </div>
+      <div className={styles.inputField}>
+        <label className={styles.label}>강의 계획</label>
+        <textarea
+          ref={plan}
+          className={styles.textarea}
+          placeholder="강의 계획을 입력하세요"
+        ></textarea>
+      </div>
+      <div className={styles.inputField}>
+        <label className={styles.label}>강의 기간</label>
+        <input
+          className={styles.input}
+          ref={startDate}
+          type="date"
+        />
+        <input
+          className={styles.input}
+          ref={endDate}
+          type="date"
+        />
+      </div>
+      <div className={styles.inputField}>
+        <label className={styles.label}>수업 시간</label>
+        <input
+          type="text"
+          ref={time}
+          className={styles.textarea}
+          placeholder="계획된 수업시간을 입력하세요"
+        ></input>
+      </div>
+      <button
+        type="submit"
+        className={styles.button}
+      >
+        <div>ㅁ</div>
+        <div className={styles.buttonText}>강의 생성</div>
+      </button>
+    </form>
+  );
+}

frontend/src/pages/LectureCreatePage/LectureCreatePage.module.css

@@ -0,0 +1,69 @@
+.createClass {
+  background: var(--background-color);
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  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/pages/LectureCreatePage/index.js

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