refactor(community): 연구실 소개 페이지 디자인 토큰 적용 및 스타일 수정

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>
     </>
   );
 }

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',
   },
 });

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

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