From c9471e11060a23493ed8edb88380c26b2534002e Mon Sep 17 00:00:00 2001
From: Minha Kang <118591632+m2na7@users.noreply.github.com>
Date: Mon, 16 Dec 2024 21:55:19 +0900
Subject: [PATCH 1/2] feat(community): add LabList component

---
 apps/community/src/components/lab/lab-list.css.ts | 14 ++++++++++++++
 apps/community/src/components/lab/lab-list.tsx    | 11 +++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 apps/community/src/components/lab/lab-list.css.ts
 create mode 100644 apps/community/src/components/lab/lab-list.tsx

diff --git a/apps/community/src/components/lab/lab-list.css.ts b/apps/community/src/components/lab/lab-list.css.ts
new file mode 100644
index 0000000..2137343
--- /dev/null
+++ b/apps/community/src/components/lab/lab-list.css.ts
@@ -0,0 +1,14 @@
+import { screen, themeVars } from '@aics-client/design-system/styles';
+import { style } from '@vanilla-extract/css';
+
+const labList = style([
+  screen.xl({
+    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+  }),
+  {
+    display: 'grid',
+    gap: themeVars.spacing.md,
+  },
+]);
+
+export { labList };
diff --git a/apps/community/src/components/lab/lab-list.tsx b/apps/community/src/components/lab/lab-list.tsx
new file mode 100644
index 0000000..a1ff5f1
--- /dev/null
+++ b/apps/community/src/components/lab/lab-list.tsx
@@ -0,0 +1,11 @@
+import * as styles from '~/components/lab/lab-list.css';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+function LabList({ children }: Props) {
+  return <div className={styles.labList}>{children}</div>;
+}
+
+export { LabList };

From cfc70fc3a1c1c2f75a024396fe51731a8b2aa418 Mon Sep 17 00:00:00 2001
From: Minha Kang <118591632+m2na7@users.noreply.github.com>
Date: Mon, 16 Dec 2024 21:56:16 +0900
Subject: [PATCH 2/2] feat(community): update styles with design-system token

---
 apps/community/src/app/lab/page.css.ts        | 15 -------------
 apps/community/src/app/lab/page.tsx           |  6 ++---
 .../src/components/lab/lab-card.css.ts        | 22 +++++++++++--------
 3 files changed, 16 insertions(+), 27 deletions(-)
 delete mode 100644 apps/community/src/app/lab/page.css.ts

diff --git a/apps/community/src/app/lab/page.css.ts b/apps/community/src/app/lab/page.css.ts
deleted file mode 100644
index dedc567..0000000
--- a/apps/community/src/app/lab/page.css.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-const cardContainer = style({
-  display: 'grid',
-  padding: '2rem 0',
-  gap: '1rem',
-
-  '@media': {
-    'screen and (min-width: 1024px)': {
-      gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-    },
-  },
-});
-
-export { cardContainer };
diff --git a/apps/community/src/app/lab/page.tsx b/apps/community/src/app/lab/page.tsx
index 7bc5f45..31acadf 100644
--- a/apps/community/src/app/lab/page.tsx
+++ b/apps/community/src/app/lab/page.tsx
@@ -1,6 +1,6 @@
-import * as styles from '~/app/lab/page.css';
 import { getLabs } from '~/app/lab/remotes';
 import { LabCard } from '~/components/lab/lab-card';
+import { LabList } from '~/components/lab/lab-list';
 import { PageHeader } from '~/components/page-header';
 
 //** TODO: for mocking */
@@ -15,11 +15,11 @@ export default async function LabPage() {
         title="연구실 소개"
         description="경기대학교 AI컴퓨터공학부의 다양한 연구실을 소개해요."
       />
-      <section className={styles.cardContainer}>
+      <LabList>
         {data.map((lab) => (
           <LabCard key={`lab-${lab.id}`} lab={lab} />
         ))}
-      </section>
+      </LabList>
     </>
   );
 }
diff --git a/apps/community/src/components/lab/lab-card.css.ts b/apps/community/src/components/lab/lab-card.css.ts
index d6620f6..7a65753 100644
--- a/apps/community/src/components/lab/lab-card.css.ts
+++ b/apps/community/src/components/lab/lab-card.css.ts
@@ -1,13 +1,14 @@
+import { themeVars } from '@aics-client/design-system/styles';
 import { style } from '@vanilla-extract/css';
 
 const cardWrapper = style({
   display: 'flex',
   alignItems: 'center',
-  padding: '1rem 3rem',
+  padding: '2rem 1rem 2rem 3rem',
   gap: '3rem',
-  border: '1px solid rgba(0, 0, 0, 0.1)',
-  borderRadius: '0.5rem',
-  boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+  border: `1px solid ${themeVars.color.gray300}`,
+  borderRadius: themeVars.borderRadius.lg,
+  boxShadow: themeVars.boxShadow.md,
 });
 
 const image = style({
@@ -16,7 +17,7 @@ const image = style({
 
 const divider = style({
   width: 1,
-  height: '90%',
+  height: '100%',
   backgroundImage:
     'repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 3px)',
   opacity: 0.5,
@@ -26,18 +27,21 @@ const infoWrapper = style({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
-  paddingBottom: '1rem',
+  gap: themeVars.spacing.md,
 });
 
 const title = style({
-  fontSize: '1.25rem',
+  marginBottom: themeVars.spacing.lg,
+  fontSize: themeVars.fontSize.xl,
+  fontWeight: themeVars.fontWeight.semibold,
   color: '#333D4B',
 });
 
 const link = style({
-  color: 'black',
+  textDecoration: 'underline',
+
   ':hover': {
-    color: 'blue',
+    color: themeVars.color.primary,
     transition: 'color 0.3s',
   },
 });