Grid 컴포넌트 구현

src/components/Grid/Grid.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { grid } from "../../../styled-system/patterns";
+import { Grid } from "./Grid";
+import { css } from "../../../styled-system/css";
+import { spacing } from "../../tokens/spacing";
+
+const Item = ({ children }: { children: React.ReactNode }) => {};
+
+export default {
+  component: Grid,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Grid>;
+
+type Story = StoryObj<typeof Grid>;
+
+export const Default: Story = {};

src/components/Grid/Grid.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { Grid, GridItem, type GridProps } from "./Grid";
+import { type Spacing, spacing } from "../../tokens/spacing";
+describe("Grid 렌더링", () => {
+  test("자식 요소들을 렌더링한다", () => {
+    render(
+      <Grid>
+        <GridItem>그리드 아이템1</GridItem>
+      </Grid>,
+    );
+    expect(screen.getByText("아이템 1")).toBeInTheDocument();
+    expect(screen.getByText("아이템 2")).toBeInTheDocument();
+  });
+});

src/components/Grid/Grid.tsx

@@ -0,0 +1,21 @@
+import { grid, gridItem } from "../../../styled-system/patterns";
+import { type ReactNode, createContext, useContext } from "react";
+import { css, cva } from "../../../styled-system/css";
+
+export interface GridProps {
+  /**
+   * 그리드 컨테이너의 자식 요소들
+   */
+  children: ReactNode;
+}
+export const Grid = ({ children }: GridProps) => {
+  return (
+    <div className={grid({ gap: "8", gridTemplateColumns: "repeat(3, 1fr)" })}>
+      {children}
+    </div>
+  );
+};
+
+export const GridItem = ({ children }: { children: ReactNode }) => {
+  return <div className={gridItem()}>{children}</div>;
+};