[FEAT] 카드 뱃지 컴포넌트 추가

src/components/common/CardBadge/CardBadge.module.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: "GmarketSans";
+  font-weight: 700;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot");
+  src:
+    url("https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff2") format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff") format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.ttf") format("truetype");
+  font-display: swap;
+}
+
+.element {
+  font-family: "GmarketSans";
+  font-size: 10px;
+  color: black;
+}
+
+.container {
+  background-color: var(--color-primaryContainer);
+  border-radius: 5px;
+  display: inline-flex;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  height: 20px;
+  padding-left: 5px;
+  padding-right: 5px;
+}

src/components/common/CardBadge/CardBadge.story.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CardBadge } from "./CardBadge";
+
+const meta = {
+  title: "CardBadge",
+  component: CardBadge,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof CardBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Usage: Story = {
+  args: {
+    label: "Badge",
+    backgroundColor: "var(--color-primaryContainer)",
+  },
+};

src/components/common/CardBadge/CardBadge.test.tsx

@@ -0,0 +1,11 @@
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { CardBadge } from "./CardBadge";
+
+describe("CardBadge component", () => {
+  it("applies the color prop to the label text", () => {
+    const { getByText } = render(<CardBadge label="Badge" color="red" />);
+    const labelElement = getByText("Badge");
+    expect(labelElement).toHaveStyle("color: red");
+  });
+});

src/components/common/CardBadge/CardBadge.tsx

@@ -0,0 +1,22 @@
+import classes from "./CardBadge.module.css";
+
+interface CardBadgeProps {
+  label: string;
+  width?: string;
+  height?: string;
+  backgroundColor?: string;
+  color?: string;
+}
+
+export function CardBadge({ label, width, height, backgroundColor, color }: CardBadgeProps) {
+  return (
+    <div
+      className={classes.container}
+      style={{ width: width, height: height, backgroundColor: backgroundColor }}
+    >
+      <div className={classes.element} style={{ color: color }}>
+        {label}
+      </div>
+    </div>
+  );
+}

src/components/common/CardBadge/index.ts

@@ -0,0 +1 @@
+export { CardBadge } from "./CardBadge";