From 04e38180d60334f97bd9abeb13af911c6d74ef4c Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Mon, 15 Jul 2024 11:14:15 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B0=95=EC=9D=98=20=EC=B9=B4=EB=93=9C?=
 =?UTF-8?q?,=20=EA=B0=95=EC=9D=98=20=EB=AA=A9=EB=A1=9D=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ClassCard/ClassCard.jsx    | 14 ++++++++++++++
 .../components/ClassCard/ClassCard.module.css | 19 +++++++++++++++++++
 frontend/src/components/ClassCard/index.js    |  1 +
 .../src/components/ClassGrid/ClassGrid.jsx    | 10 ++++++++++
 .../components/ClassGrid/ClassGrid.module.css | 14 ++++++++++++++
 frontend/src/components/ClassGrid/index.js    |  1 +
 6 files changed, 59 insertions(+)
 create mode 100644 frontend/src/components/ClassCard/ClassCard.jsx
 create mode 100644 frontend/src/components/ClassCard/ClassCard.module.css
 create mode 100644 frontend/src/components/ClassCard/index.js
 create mode 100644 frontend/src/components/ClassGrid/ClassGrid.jsx
 create mode 100644 frontend/src/components/ClassGrid/ClassGrid.module.css
 create mode 100644 frontend/src/components/ClassGrid/index.js

diff --git a/frontend/src/components/ClassCard/ClassCard.jsx b/frontend/src/components/ClassCard/ClassCard.jsx
new file mode 100644
index 0000000..5aa5ac5
--- /dev/null
+++ b/frontend/src/components/ClassCard/ClassCard.jsx
@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+import styles from './ClassCard.module.css';
+
+export default function ClassCard({ path, children }) {
+  return (
+    <Link
+      to={path}
+      className={styles.card}
+    >
+      <div className={styles.thumbnail} />
+      <div>{children}</div>
+    </Link>
+  );
+}
diff --git a/frontend/src/components/ClassCard/ClassCard.module.css b/frontend/src/components/ClassCard/ClassCard.module.css
new file mode 100644
index 0000000..491867d
--- /dev/null
+++ b/frontend/src/components/ClassCard/ClassCard.module.css
@@ -0,0 +1,19 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 295px;
+  height: 295px;
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.thumbnail {
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  background-color: var(--background-secondary);
+  border: 1px solid var(--border-color);
+  box-sizing: border-box;
+}
diff --git a/frontend/src/components/ClassCard/index.js b/frontend/src/components/ClassCard/index.js
new file mode 100644
index 0000000..6208da0
--- /dev/null
+++ b/frontend/src/components/ClassCard/index.js
@@ -0,0 +1 @@
+export { default as ClassCard } from './ClassCard';
diff --git a/frontend/src/components/ClassGrid/ClassGrid.jsx b/frontend/src/components/ClassGrid/ClassGrid.jsx
new file mode 100644
index 0000000..710f201
--- /dev/null
+++ b/frontend/src/components/ClassGrid/ClassGrid.jsx
@@ -0,0 +1,10 @@
+import styles from './ClassGrid.module.css';
+
+export default function ClassGrid({ title, children }) {
+  return (
+    <section>
+      <h2 className={styles.title}>{title}</h2>
+      <div className={styles.grid}>{children}</div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/ClassGrid/ClassGrid.module.css b/frontend/src/components/ClassGrid/ClassGrid.module.css
new file mode 100644
index 0000000..7701b2b
--- /dev/null
+++ b/frontend/src/components/ClassGrid/ClassGrid.module.css
@@ -0,0 +1,14 @@
+.title {
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 700;
+  color: var(--text-color);
+  margin: 0 0 40px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(295px, auto));
+  gap: 20px;
+  justify-content: start;
+}
diff --git a/frontend/src/components/ClassGrid/index.js b/frontend/src/components/ClassGrid/index.js
new file mode 100644
index 0000000..0cb557e
--- /dev/null
+++ b/frontend/src/components/ClassGrid/index.js
@@ -0,0 +1 @@
+export { default as ClassGrid } from './ClassGrid';