Merge pull request #40 from DaleStudy/37

Icon 컴포넌트

Author: DaleSeo

bun.lock

@@ -18,6 +18,7 @@
   "dependencies": {
     "axe-playwright": "^2.0.3",
     "chromatic": "^11.25.1",
+    "lucide-react": "^0.474.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -52,6 +53,7 @@
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.22.0",
     "vite": "^6.0.11",
+    "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.0.4"
   },
   "eslintConfig": {

package.json

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { vstack } from "../../../styled-system/patterns";
+import { Heading } from "../Heading/Heading";
+import { Text } from "../Text/Text";
+import { Icon } from "./Icon";
+
+export default {
+  component: Icon,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    name: "user",
+  },
+} satisfies Meta<typeof Icon>;
+
+export const Basic: StoryObj<typeof Icon> = {
+  args: {
+    tone: "accent",
+    muted: true,
+    size: "xl",
+  },
+};
+
+export const Sizes: StoryObj<typeof Icon> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "6" })}>
+        <Icon {...args} size="xs" />
+        <Icon {...args} size="sm" />
+        <Icon {...args} size="md" />
+        <Icon {...args} size="lg" />
+        <Icon {...args} size="xl" />
+      </div>
+    );
+  },
+  argTypes: {
+    size: {
+      control: false,
+    },
+  },
+  args: {
+    tone: "accent",
+    muted: true,
+  },
+};
+
+export const Tones: StoryObj<typeof Icon> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "6" })}>
+        <Icon {...args} tone="neutral" />
+        <Icon {...args} tone="accent" />
+        <Icon {...args} tone="danger" />
+        <Icon {...args} tone="warning" />
+      </div>
+    );
+  },
+  argTypes: {
+    tone: {
+      control: false,
+    },
+  },
+  args: {
+    muted: true,
+  },
+};
+
+export const Contrasts: StoryObj<typeof Icon> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "6" })}>
+        <Text {...args} muted>
+          낮은 <Icon name="moon" /> 명암비
+        </Text>
+        <Text {...args}>
+          높은 <Icon name="sun" /> 명암비
+        </Text>
+      </div>
+    );
+  },
+  argTypes: {
+    name: {
+      control: false,
+    },
+    muted: {
+      control: false,
+    },
+  },
+};
+
+export const WithHeading: StoryObj<typeof Icon> = {
+  render: (args) => {
+    return (
+      <Heading level={2}>
+        <Icon {...args} name="user" />
+        프로필
+      </Heading>
+    );
+  },
+  argTypes: {
+    name: {
+      control: false,
+    },
+  },
+};

src/assets/Discord.svg

@@ -0,0 +1,44 @@
+import { composeStories } from "@storybook/react";
+import { render } from "@testing-library/react";
+import { expect, test } from "vitest";
+import * as stories from "./Icon.stories";
+
+const { Basic } = composeStories(stories);
+
+test("renders an svg element", () => {
+  const { container } = render(<Basic />);
+
+  expect(container.querySelector("svg")).toBeInTheDocument();
+});
+
+test.each([
+  ["xs", "w_1em h_1em"],
+  ["sm", "w_1.25em h_1.25em"],
+  ["md", "w_1.5em h_1.5em"],
+  ["lg", "w_1.875em h_1.875em"],
+  ["xl", "w_2.25em h_2.25em"],
+] as const)('applies the correct class for size="%s"', (size, className) => {
+  const { container } = render(<Basic size={size} />);
+
+  expect(container.querySelector("svg")).toHaveClass(className);
+});
+
+test.each([
+  ["neutral", "c_text"],
+  ["accent", "c_text.accent"],
+  ["danger", "c_text.danger"],
+  ["warning", "c_text.warning"],
+] as const)('applies the correct class for tone="%s"', (tone, className) => {
+  const { container } = render(<Basic tone={tone} muted={false} />);
+
+  expect(container.querySelector("svg")).toHaveClass(className);
+});
+
+test.each([
+  [false, "c_text"],
+  [true, "c_text.muted"],
+] as const)("applies the correct class for muted={%s}", (muted, className) => {
+  const { container } = render(<Basic tone="neutral" muted={muted} />);
+
+  expect(container.querySelector("svg")).toHaveClass(className);
+});