feat: Card 컴포넌트 UI 구현

src/app/page.tsx

@@ -1,3 +1,4 @@
+import Card from '@/components/Layouts/Card/Card';
 import Header from '@/components/Layouts/Header/Header';
 import Search from '@/components/Layouts/Search/Search';
 import * as styles from '@/styles/rootStyles.css';
@@ -7,6 +8,7 @@ export default function RootPage() {
     <div className={styles.wrapper}>
       <Header />
       <Search />
+      <Card />
     </div>
   );
 }

src/components/Layouts/Card/Card.css.ts

@@ -0,0 +1,77 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+
+  marginTop: '60px',
+  maxWidth: '1200px',
+  gap: '66px',
+});
+
+export const cardWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+
+  width: '250px',
+  height: '320px',
+  borderRadius: '12px',
+
+  backgroundColor: '#6A6868',
+});
+
+export const cardImageWrapper = style({
+  width: '250px',
+  height: '130px',
+});
+
+export const bottomWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+
+  padding: '20px',
+});
+
+export const tagWrapper = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+
+  gap: '10px',
+});
+
+export const tag = style({
+  padding: '4px 8px',
+
+  borderRadius: '50px',
+  fontSize: '12px',
+
+  backgroundColor: '#fff',
+  color: '#000',
+});
+
+export const title = style({
+  fontSize: '18px',
+});
+
+export const infoWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const textWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+});
+
+export const company = style({
+  marginRight: '4px',
+  fontSize: '14px',
+});
+
+export const date = style({
+  fontSize: '12px',
+});

src/components/Layouts/Card/Card.tsx

@@ -0,0 +1,41 @@
+import Image from 'next/image';
+import * as styles from './Card.css';
+
+const data = Array.from({ length: 20 }, (_, index) => ({
+  id: index,
+  title: '이벤트 루프는 무엇인가..? 넌 알고 있었니?',
+  tags: ['react', 'type', 'next.js', 'javascript', '리액트'],
+  date: '2024.01.02',
+  company: 'Toss',
+}));
+
+export default function Card() {
+  return (
+    <section className={styles.wrapper}>
+      {data.map((item) => (
+        <article key={item.id} className={styles.cardWrapper}>
+          <Image src="/images/example/image1.png" alt="card" width={250} height={130} />
+          <div className={styles.bottomWrapper}>
+            <div className={styles.tagWrapper}>
+              {item.tags.map((tag) => (
+                <span key={tag} className={styles.tag}>
+                  {tag}
+                </span>
+              ))}
+            </div>
+            <h2 className={styles.title}>{item.title}</h2>
+            <footer className={styles.infoWrapper}>
+              <div className={styles.textWrapper}>
+                <p className={styles.company}>{item.company}</p>
+                <time className={styles.date} dateTime={item.date}>
+                  {item.date}
+                </time>
+              </div>
+              <Image alt="copy" src="/images/buttons/copy.png" width={22} height={22} />
+            </footer>
+          </div>
+        </article>
+      ))}
+    </section>
+  );
+}

src/styles/rootStyles.css.ts

@@ -4,6 +4,5 @@ export const wrapper = style({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  flexDirection: 'row',
   justifyContent: 'center',
 });