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';