From 11c75a42d0bf6d30dbd9b73d255adbaab7b4cb70 Mon Sep 17 00:00:00 2001
From: minwucho <mauercho@gmail.com>
Date: Wed, 17 Jul 2024 13:04:17 +0900
Subject: [PATCH] =?UTF-8?q?[Front-end]=20feat:=20=ED=95=99=EC=83=9D?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=99=88=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../StudentHomeMainPage.jsx                   | 44 +++++++++++++++++++
 .../StudentHomeMainPage.module.css            |  9 ++++
 2 files changed, 53 insertions(+)
 create mode 100644 frontend/src/pages/StudentHomeMainPage/StudentHomeMainPage.jsx
 create mode 100644 frontend/src/pages/StudentHomeMainPage/StudentHomeMainPage.module.css

diff --git a/frontend/src/pages/StudentHomeMainPage/StudentHomeMainPage.jsx b/frontend/src/pages/StudentHomeMainPage/StudentHomeMainPage.jsx
new file mode 100644
index 0000000..5a9033f
--- /dev/null
+++ b/frontend/src/pages/StudentHomeMainPage/StudentHomeMainPage.jsx
@@ -0,0 +1,44 @@
+import { ClassCard } from '../../components/ClassCard';
+import { ClassGrid } from '../../components/ClassGrid';
+import styles from './StudentHomeMainPage.module.css';
+
+export default function StudentHomeMainPage() {
+  const onGoingClasses = [
+    { lecture_id: 1, title: '한국어' },
+    { lecture_id: 2, title: '영어' },
+    { lecture_id: 3, title: '일본어' },
+  ];
+
+  const allClasses = [
+    { lecture_id: 1, title: '한국어' },
+    { lecture_id: 2, title: '영어' },
+    { lecture_id: 3, title: '일본어' },
+    { lecture_id: 4, title: '중국어' },
+    { lecture_id: 5, title: '프랑스어' },
+    { lecture_id: 6, title: '스페인어' },
+  ];
+  return (
+    <div className={styles.lectures}>
+      <ClassGrid title="수강중인 강의">
+        {onGoingClasses.map((lecture) => (
+          <ClassCard
+            key={lecture.lecture_id}
+            path={`/class/${lecture.lecture_id}`}
+          >
+            {lecture.title}
+          </ClassCard>
+        ))}
+      </ClassGrid>
+      <ClassGrid title="전체 강의">
+        {allClasses.map((lecture) => (
+          <ClassCard
+            key={lecture.lecture_id}
+            path={`/class/${lecture.lecture_id}`}
+          >
+            {lecture.title}
+          </ClassCard>
+        ))}
+      </ClassGrid>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/StudentHomeMainPage/StudentHomeMainPage.module.css b/frontend/src/pages/StudentHomeMainPage/StudentHomeMainPage.module.css
new file mode 100644
index 0000000..ec0f8aa
--- /dev/null
+++ b/frontend/src/pages/StudentHomeMainPage/StudentHomeMainPage.module.css
@@ -0,0 +1,9 @@
+.lectures {
+  box-sizing: border-box;
+  margin: 0 auto;
+  max-width: 1320px;
+  padding: 0 40px;
+  gap: 40px;
+  display: flex;
+  flex-direction: column;
+}