Spnner 컴포넌트 (#16)

* chore: atom -> atoms로 변경

* chore: styles.ts plop 수정

* feat: Spinner 추가

plop_templates/component/{{upperCamel name}}.types.ts.hbs

@@ -1,3 +1,5 @@
-import { ComponentPropsWithInnerRef } from "@customTypes/utilType";
+import type { VariantProps } from "tailwind-variants";
+import type { ComponentPropsWithInnerRef } from "@customTypes/utilType";
+import { {{upperCamel name}}Variants } from "./{{upperCamel name}}.styles";
 
-export type {{upperCamel name}}Props = ComponentPropsWithInnerRef<"{{tag}}">;
+export type {{upperCamel name}}Props = ComponentPropsWithInnerRef<"{{tag}}"> & VariantProps<typeof {{upperCamel name}}Variants>;

src/components/atoms/Button/Button.stories.tsx

@@ -4,7 +4,7 @@ import Icon from "@atoms/Icon";
 import Button from "./Button";
 
 const meta = {
-  title: "Atom/Button/Button",
+  title: "atoms/Button/Button",
   component: Button,
   parameters: {
     layout: "centered",

src/components/atoms/Chip/Chip.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Chip from "./Chip";
 
 const meta = {
-  title: "Atom/Chip",
+  title: "atoms/Chip",
   component: Chip,
   parameters: {
     layout: "centered",

src/components/atoms/Divider/Divider.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Divider from "./Divider";
 
 const meta = {
-  title: "Atom/Divider",
+  title: "atoms/Divider",
   component: Divider,
   parameters: {
     layout: "centered",

src/components/atoms/ExpandTile/ExpandTile.stories.tsx

@@ -3,7 +3,7 @@ import { exceptProperty } from "@utils/exceptProperty";
 import ExpandTile from "../ExpandTile/ExpandTile";
 
 const meta = {
-  title: "Atom/Tile/ExpandTile",
+  title: "atoms/Tile/ExpandTile",
   component: ExpandTile,
   parameters: {
     layout: "centered",

src/components/atoms/FloatingButton/FlotingButton.stories.tsx → src/components/atoms/FloatingButton/FloatingButton.stories.tsx

@@ -3,7 +3,7 @@ import { exceptProperty } from "@utils/exceptProperty";
 import FloatingButton from "./FloatingButton";
 
 const meta = {
-  title: "Atom/Button/FloatingButton",
+  title: "atoms/Button/FloatingButton",
   component: FloatingButton,
   parameters: {
     layout: "centered",

src/components/atoms/Icon/Icon.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Icon from "./Icon";
 
 const meta = {
-  title: "Atom/Icon",
+  title: "atoms/Icon",
   component: Icon,
   parameters: {
     layout: "centered",

src/components/atoms/Image/Image.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Image from "./Image";
 
 const meta = {
-  title: "Atom/Image",
+  title: "atoms/Image",
   component: Image,
   parameters: {
     layout: "centered",

src/components/atoms/Label/Label.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Label from "./Label";
 
 const meta = {
-  title: "Atom/Label",
+  title: "atoms/Label",
   component: Label,
   parameters: {
     layout: "centered",

src/components/atoms/List/List.stories.tsx

@@ -4,7 +4,7 @@ import Divider from "@atoms/Divider/Divider";
 import List from "./List";
 
 const meta = {
-  title: "Atom/List",
+  title: "atoms/List",
   component: List,
   parameters: {
     layout: "centered",

src/components/atoms/Slot/Slot.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Slot from "./Slot";
 
 const meta = {
-  title: "Atom/Slot",
+  title: "atoms/Slot",
   component: Slot,
   parameters: {
     layout: "centered",

src/components/atoms/Spinner/Spinner.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Spinner from "./Spinner";
+
+const meta = {
+  title: "atoms/Spinner",
+  component: Spinner,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {
+  render: () => <Spinner />,
+};
+
+export const Size: Story = {
+  render: () => (
+    <div className="flex gap-md">
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+    </div>
+  ),
+};

src/components/atoms/Spinner/Spinner.styles.ts

@@ -0,0 +1,14 @@
+import { tv } from "@utils/customTV";
+
+export const SpinnerVariants = tv({
+  variants: {
+    size: {
+      sm: "w-[96rem]",
+      md: "w-[120rem]",
+      lg: "w-[148rem]",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

src/components/atoms/Spinner/Spinner.tsx

@@ -0,0 +1,36 @@
+import { SpinnerVariants } from "./Spinner.styles";
+import { SpinnerProps } from "./Spinner.types";
+
+const Spinner = ({ size, className, ...props }: SpinnerProps) => {
+  return (
+    <svg
+      width="200"
+      height="200"
+      strokeWidth={"24px"}
+      viewBox="0 0 400 400"
+      className={SpinnerVariants({ size, className })}
+      {...props}
+    >
+      <g className="animate-[spin_2s_linear_infinite] origin-center">
+        <path
+          d="M132.826 264.259C145.449 277.631 161.754 286.959 179.679 291.064C197.604 295.168 216.344 293.866 233.528 287.32C250.713 280.775 265.571 269.28 276.222 254.291C286.874 239.301 292.842 221.489 293.371 203.108C293.9 184.727 288.966 166.601 279.194 151.024C269.422 135.447 255.25 123.117 238.47 115.594C221.69 108.071 203.057 105.693 184.925 108.76C166.794 111.827 149.979 120.202 136.608 132.826"
+          strokeWidth="24"
+          strokeLinecap="round"
+          className="stroke-surface-on fill-none"
+        />
+        <circle cx="108.425" cy="200.773" r="21.5577" fill="#FFD465" />
+      </g>
+      <circle
+        cx="200.425"
+        cy="30.773"
+        r="21.5577"
+        className="fill-error origin-center animate-[spin_1.5s_ease-in-out_infinite]"
+      />
+      <g className="origin-center animate-[spin_1.5s_infinite] ease-[cubic-bezier(0.95,0.05,0.795,0.035)] ">
+        <circle cx="199.802" cy="30.15" r="12.9346" className="fill-primary" transform="rotate(25, 200, 200)" />
+      </g>
+    </svg>
+  );
+};
+
+export default Spinner;

src/components/atoms/Spinner/Spinner.types.ts

@@ -0,0 +1,5 @@
+import type { VariantProps } from "tailwind-variants";
+import type { ComponentPropsWithInnerRef } from "@customTypes/utilType";
+import { SpinnerVariants } from "./Spinner.styles";
+
+export type SpinnerProps = ComponentPropsWithInnerRef<"svg"> & VariantProps<typeof SpinnerVariants>;

src/components/atoms/Spinner/__test__/Spinner.test.tsx

@@ -0,0 +1,9 @@
+import { render } from "@testing-library/react";
+import Spinner from "../Spinner";
+
+describe("spinner", () => {
+  // eslint-disable-next-line jest/expect-expect
+  it("에러 없이 렌더링되어야 합니다.", () => {
+    render(<Spinner />);
+  });
+});

src/components/atoms/Spinner/index.ts

@@ -0,0 +1,9 @@
+import Spinner from "./Spinner";
+import { SpinnerVariants } from "./Spinner.styles";
+import type { SpinnerProps } from "./Spinner.types";
+
+export type { SpinnerProps };
+
+export { SpinnerVariants };
+
+export default Spinner

src/components/atoms/Tab/Tab.stories.tsx

@@ -3,7 +3,7 @@ import Icon from "@atoms/Icon";
 import Tab from "./Tab";
 
 const meta = {
-  title: "Atom/TabList",
+  title: "atoms/TabList",
   component: Tab,
   parameters: {
     layout: "centered",

src/components/atoms/TextField/TextField.stories.tsx

@@ -3,7 +3,7 @@ import Icon from "@atoms/Icon";
 import TextField from "./TextField";
 
 const meta = {
-  title: "Atom/TextField",
+  title: "atoms/TextField",
   component: TextField,
   parameters: {
     layout: "centered",

src/components/atoms/Tile/Tile.stories.tsx

@@ -3,7 +3,7 @@ import { exceptProperty } from "@utils/exceptProperty";
 import Tile from "../Tile/Tile";
 
 const meta = {
-  title: "Atom/Tile/Tile",
+  title: "atoms/Tile/Tile",
   component: Tile,
   parameters: {
     layout: "centered",

src/components/atoms/ToggleButton/ToggleButton.stories.tsx

@@ -3,7 +3,7 @@ import Icon from "@atoms/Icon";
 import ToggleButton from "./ToggleButton";
 
 const meta = {
-  title: "Atom/Button/ToggleButton",
+  title: "atoms/Button/ToggleButton",
   component: ToggleButton,
   parameters: {
     layout: "centered",

src/components/atoms/UpDownNumber/UpDownNumber.stories.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import UpDownNumber from "./UpDownNumber";
 
 const meta = {
-  title: "Atom/UpDownNumber",
+  title: "atoms/UpDownNumber",
   component: UpDownNumber,
   parameters: {
     layout: "centered",