💅 style: add dummy stories for chromatic build

.storybook/preview.tsx

@@ -1,10 +1,8 @@
 import type { Preview } from "@storybook/react";
 import React from "react";
 
-import { Pretendard } from "../src/app/fonts/index";
 import "../src/styles/globals.css";
 import "../src/styles/theme.css";
-import { cn } from "../src/utils/cn";
 
 const preview: Preview = {
   parameters: {

src/components/button/SquareTabButton.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import SquareTabButton from "./SquareTabButton";
+
+const meta: Meta<typeof SquareTabButton> = {
+  title: "SquareTabButton",
+  component: SquareTabButton,
+  parameters: {
+    layout: "centered",
+  },
+
+  argTypes: {
+    active: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Typographys: Story = {
+  args: {
+    active: false,
+  },
+};

src/components/button/SquareTabButton.tsx

@@ -0,0 +1,25 @@
+import { Button, ButtonProps } from "@radix-ui/themes";
+import { FC } from "react";
+
+import { cn } from "@/utils/cn";
+
+export interface Props extends ButtonProps {
+  active: boolean;
+}
+
+const SquareTabButton: FC<Props> = ({ active = false, ...props }) => {
+  return (
+    <Button
+      className={cn(
+        "w-[108px] h-[108px] duration-300",
+        active ? "bg-primary-01" : "bg-primary-04",
+        props.className,
+      )}
+      {...props}
+    >
+      {props.children}
+    </Button>
+  );
+};
+
+export default SquareTabButton;