💅 style: 컬러팔레트 및 타이포그래피 스토리 작성 #8

src/components/ColorPalette/ColorPalette.stories.ts

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { COLORS } from "@/styles/theme/color";
+
 import ColorPalette from "./ColorPalette";
 
 const meta: Meta<typeof ColorPalette> = {
@@ -8,83 +10,21 @@ const meta: Meta<typeof ColorPalette> = {
   parameters: {
     layout: "centered",
   },
+
+  argTypes: {
+    intent: {
+      options: Object.keys(COLORS),
+      control: { type: "select" },
+    },
+  },
   tags: ["autodocs"],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const colors = [
-  { name: "Primary 01", className: "bg-primary-color-01", hex: "#8478ff" },
-  { name: "Primary 02", className: "bg-primary-color-02", hex: "#9b91fa" },
-  { name: "Primary 03", className: "bg-primary-color-03", hex: "#9b91fa" },
-  { name: "Primary 04", className: "bg-primary-color-04", hex: "#e4e1ff" },
-  { name: "Primary 05", className: "bg-primary-color-05", hex: "#edebfe" },
-  { name: "Gray 0", className: "bg-gray-scale-0", hex: "#ffffff" },
-  { name: "Gray 50", className: "bg-gray-scale-50", hex: "#fafafa" },
-  { name: "Gray 100", className: "bg-gray-scale-100", hex: "#f5f5f5" },
-  { name: "Gray 200", className: "bg-gray-scale-200", hex: "#e5e5e5" },
-  { name: "Gray 300", className: "bg-gray-scale-300", hex: "#d4d4d4" },
-  { name: "Gray 400", className: "bg-gray-scale-400", hex: "#a3a3a3" },
-  { name: "Gray 500", className: "bg-gray-scale-500", hex: "#737373" },
-  { name: "Gray 600", className: "bg-gray-scale-600", hex: "#525252" },
-  { name: "Gray 700", className: "bg-gray-scale-700", hex: "#404040" },
-  { name: "Gray 800", className: "bg-gray-scale-800", hex: "#262626" },
-  { name: "Gray 900", className: "bg-gray-scale-900", hex: "#171717" },
-  {
-    name: "Secondary Pink",
-    className: "bg-secondary-color-pink",
-    hex: "#ffafed",
-  },
-  {
-    name: "Secondary Orange",
-    className: "bg-secondary-color-orange",
-    hex: "#ff7e6a",
-  },
-  {
-    name: "Secondary Yellow",
-    className: "bg-secondary-color-yellow",
-    hex: "#ffe88a",
-  },
-  {
-    name: "Secondary Green",
-    className: "bg-secondary-color-green",
-    hex: "#aafacf",
-  },
-  {
-    name: "Secondary Blue",
-    className: "bg-secondary-color-blue",
-    hex: "#a1ddff",
-  },
-  {
-    name: "Secondary Pink BG",
-    className: "bg-secondary-color-pink-bg",
-    hex: "#ffeffb",
-  },
-  {
-    name: "Secondary Orange BG",
-    className: "bg-secondary-color-orange-bg",
-    hex: "#fff1ef",
-  },
-  {
-    name: "Secondary Yellow BG",
-    className: "bg-secondary-color-yellow-bg",
-    hex: "#fffcee",
-  },
-  {
-    name: "Secondary Green BG",
-    className: "bg-secondary-color-green-bg",
-    hex: "#e2ffef",
-  },
-  {
-    name: "Secondary Blue BG",
-    className: "bg-secondary-color-blue-bg",
-    hex: "#e5f4fe",
-  },
-];
-
 export const AllColors: Story = {
   args: {
-    colors,
+    intent: "PRIMARY_01",
   },
 };

src/components/ColorPalette/ColorPalette.tsx

@@ -1,31 +1,48 @@
-import { Box, Flex } from "@radix-ui/themes";
-import { BoxOwnProps } from "@radix-ui/themes/props";
+import { cva, VariantProps } from "class-variance-authority";
 import { FC } from "react";
 
-import { cn } from "@/utils/cn";
+const paletteStyles = cva(`h-[100px] w-[100px] rounded-[12px]`, {
+  variants: {
+    intent: {
+      PRIMARY_01: "bg-primary-01",
+      PRIMARY_02: "bg-primary-02",
+      PRIMARY_03: "bg-primary-03",
+      PRIMARY_04: "bg-primary-04",
+      PRIMARY_05: "bg-primary-05",
+      GRAY_SCALE_0: "bg-gray-scale-0",
+      GRAY_SCALE_50: "bg-gray-scale-50",
+      GRAY_SCALE_100: "bg-gray-scale-100",
+      GRAY_SCALE_200: "bg-gray-scale-200",
+      GRAY_SCALE_300: "bg-gray-scale-300",
+      GRAY_SCALE_400: "bg-gray-scale-400",
+      GRAY_SCALE_500: "bg-gray-scale-500",
+      GRAY_SCALE_600: "bg-gray-scale-600",
+      GRAY_SCALE_700: "bg-gray-scale-700",
+      GRAY_SCALE_800: "bg-gray-scale-800",
+      GRAY_SCALE_900: "bg-gray-scale-900",
+      SECONDARY_PINK: "bg-secondary-pink",
+      SECONDARY_ORANGE: "bg-secondary-orange",
+      SECONDARY_YELLOW: "bg-secondary-yellow",
+      SECONDARY_GREEN: "bg-secondary-green",
+      SECONDARY_BLUE: "bg-secondary-blue",
+      SECONDARY_PINK_BG: "bg-secondary-pink-bg",
+      SECONDARY_ORANGE_BG: "bg-secondary-orange-bg",
+      SECONDARY_YELLOW_BG: "bg-secondary-yellow-bg",
+      SECONDARY_GREEN_BG: "bg-secondary-green-bg",
+      SECONDARY_BLUE_BG: "bg-secondary-blue-bg",
+    },
+  },
+  defaultVariants: {
+    intent: "PRIMARY_01",
+  },
+});
 
-interface PalleteProps extends Omit<BoxOwnProps, "className"> {
-  colors: { name: string; className: string; hex: string }[];
-  className?: string;
-}
+export interface Props
+  extends React.HTMLProps<HTMLDivElement>,
+    VariantProps<typeof paletteStyles> {}
 
-const ColorPalette: FC<PalleteProps> = ({ colors, className, ...props }) => {
-  return (
-    <div className={cn("grid grid-cols-5 gap-4", className)} {...props}>
-      {colors.map((color) => (
-        <Flex key={color.name} className="flex-col">
-          <Box
-            className={cn(
-              "w-[100px] h-[100px] rounded-[12px]",
-              color.className,
-            )}
-          />
-          <div className="text-start text-sm">{color.name}</div>
-          <code className="text-start text-sm">{color.hex}</code>
-        </Flex>
-      ))}
-    </div>
-  );
+const ColorPalette: FC<Props> = ({ intent, ...props }) => {
+  return <div className={paletteStyles({ intent })} {...props} />;
 };
 
 export default ColorPalette;

src/components/Typography/Typography.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TYPOGRAPHY } from "@/styles/theme/typography";
+
+import Typography from "./Typography";
+
+const meta: Meta<typeof Typography> = {
+  title: "Typography",
+  component: Typography,
+  parameters: {
+    layout: "centered",
+  },
+
+  argTypes: {
+    intent: {
+      options: Object.keys(TYPOGRAPHY),
+      control: { type: "select" },
+    },
+    label: {
+      control: "text",
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Typographys: Story = {
+  args: {
+    intent: "LABEL_SEMIBOLD",
+    label: "The quick brown fox jumps over the lazy dog",
+  },
+};

src/components/Typography/Typography.tsx

@@ -0,0 +1,48 @@
+import { cva, VariantProps } from "class-variance-authority";
+import { FC } from "react";
+
+const typographyStyles = cva(`w-full font-pretendard`, {
+  variants: {
+    intent: {
+      LABEL_SEMIBOLD: "text-label-semi",
+      TITLE_BOLD: "text-title-bold",
+      SUBTITLE_BOLD: "text-subtitle-bold",
+      SUBTITLE_SEMIBOLD: "text-subtitle-semi",
+      SUBTITLE_MEDIUM: "text-subtitle-medium",
+      BODY1_MEDIUM: "text-body1-medium",
+      BODY1_REGULAR: "text-body1-regular",
+      BODY2_MEDIUM: "text-body2-medium",
+      BODY2_REGULAR: "text-body2-regular",
+      BODY2_SEMIBOLD: "text-body2-semi",
+      BODY2_BOLD: "text-body2-bold",
+      CAPTION1_REGULAR: "text-caption1-regular",
+      CAPTION1_MEDIUM: "text-caption1-medium",
+      CAPTION1_MEDIUM_NAV: "text-caption1-medium-nav",
+      CAPTION1_MEDIUM_SMALL: "text-caption1-medium-small",
+      CAPTION2_REGULAR: "text-caption2-regular",
+      CAPTION2_MEDIUM: "text-caption2-medium",
+      BUTTON1_SEMIBOLD: "text-button1-semi",
+      BUTTON2_MEDIUM: "text-button2-medium",
+      BUTTON2_REGULAR: "text-button2-regular",
+    },
+  },
+  defaultVariants: {
+    intent: "LABEL_SEMIBOLD",
+  },
+});
+
+export interface Props
+  extends React.HTMLProps<HTMLParagraphElement>,
+    VariantProps<typeof typographyStyles> {
+  label: string;
+}
+
+const Typography: FC<Props> = ({ intent, label, ...props }) => {
+  return (
+    <p className={typographyStyles({ intent })} {...props}>
+      {label}
+    </p>
+  );
+};
+
+export default Typography;