diff --git a/frontend/src/Router.jsx b/frontend/src/Router.jsx
index 39e36df..8868ec1 100644
--- a/frontend/src/Router.jsx
+++ b/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: ,
},
+ {
+ path: 'lecture/create',
+ element: ,
+ },
{
path: 'lecture/:lectureId/info',
element: ,
diff --git a/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx b/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx
new file mode 100644
index 0000000..6ce73d2
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/frontend/src/pages/LectureCreatePage/LectureCreatePage.module.css b/frontend/src/pages/LectureCreatePage/LectureCreatePage.module.css
new file mode 100644
index 0000000..54ce505
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/pages/LectureCreatePage/index.js b/frontend/src/pages/LectureCreatePage/index.js
new file mode 100644
index 0000000..70d624d
--- /dev/null
+++ b/frontend/src/pages/LectureCreatePage/index.js
@@ -0,0 +1 @@
+export { default } from './LectureCreatePage';