Merge branch 'main' into feat/table

packages/wow-icons/src/component/DoubleArrow.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from "react";
+import { color } from "wowds-tokens";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const DoubleArrow = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "20",
+      height = "20",
+      viewBox = "0 0 20 20",
+      stroke = "white",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="double-arrow icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <path
+          d="M6 4L11 10L6 16"
+          stroke={color[stroke]}
+          strokeLinejoin="bevel"
+          strokeWidth="1.4"
+        />
+        <path
+          d="M11 4L16 10L11 16"
+          stroke={color[stroke]}
+          strokeLinejoin="bevel"
+          strokeWidth="1.4"
+        />
+      </svg>
+    );
+  }
+);
+
+DoubleArrow.displayName = "DoubleArrow";
+export default DoubleArrow;

packages/wow-icons/src/component/index.ts

@@ -3,6 +3,7 @@ export { default as BlueAvatar } from "./BlueAvatar.tsx";
 export { default as Calendar } from "./Calendar.tsx";
 export { default as Check } from "./Check.tsx";
 export { default as Close } from "./Close.tsx";
+export { default as DoubleArrow } from "./DoubleArrow.tsx";
 export { default as DownArrow } from "./DownArrow.tsx";
 export { default as Edit } from "./Edit.tsx";
 export { default as GdscLogo } from "./GdscLogo.tsx";

packages/wow-ui/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import Button from "@/components/Button";
+import Pagination from "@/components/Pagination";
+
+const meta = {
+  title: "UI/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "페이지네이션 컴포넌트",
+    a11y: {
+      config: {
+        rules: [{ id: "color-contrast", enabled: false }],
+      },
+    },
+  },
+  argTypes: {
+    totalPages: {
+      description: "페이지의 총 개수입니다.",
+      table: {
+        type: { summary: "number" },
+      },
+      control: {
+        type: "number",
+      },
+    },
+    currentPage: {
+      description: "외부에서 주입할 수 있는 현재 페이지입니다.",
+      table: {
+        type: { summary: "number" },
+      },
+      control: {
+        type: "number",
+      },
+    },
+    defaultPage: {
+      description: "기본 페이지입니다.",
+      table: {
+        type: { summary: "number" },
+      },
+      control: {
+        type: "number",
+      },
+    },
+    onChange: {
+      description: "외부에서 페이지 값의 변화를 감지할 수 있는 함수입니다.",
+      table: {
+        type: { summary: "(page: number) => void" },
+      },
+    },
+    pageButtonBackgroundColor: {
+      description: "페이지네이션 컴포넌트 버튼 색을 변경합니다.",
+      table: {
+        type: { summary: "ColorToken" },
+      },
+    },
+    style: {
+      description:
+        "페이지네이션 컴포넌트에 커스텀하게 전달할 style입니다 배경색 등을 변경할 수 있습니다.",
+      table: {
+        type: { summary: "CSSProperties" },
+        defaultValue: { summary: "{}" },
+      },
+      control: false,
+    },
+    className: {
+      description:
+        "페이지네이션 컴포넌트에 전달하는 커스텀 클래스를 설정합니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: {
+        type: "text",
+      },
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    totalPages: 13,
+  },
+};
+
+export const DefaultPage: Story = {
+  args: {
+    totalPages: 13,
+    defaultPage: 6,
+  },
+};
+
+export const ChangeBackgroundColorPage: Story = {
+  args: {
+    totalPages: 15,
+    pageButtonBackgroundColor: "red50",
+  },
+};
+
+const ControlledPagination = () => {
+  const [selectedPage, setSelectedPage] = useState<number>(1);
+
+  const handleSelectionChange = () => {
+    if (selectedPage >= 15) {
+      setSelectedPage(15);
+    } else setSelectedPage(selectedPage + 3);
+  };
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      <Button onClick={() => handleSelectionChange()}>
+        3페이지씩 건너뛰기
+      </Button>
+      <Pagination currentPage={selectedPage} totalPages={15} />
+    </div>
+  );
+};
+
+export const ControlledState: Story = {
+  args: { totalPages: 15 },
+  render: () => <ControlledPagination />,
+};
+
+const WatchPageStatePagination = () => {
+  const [selectedPage, setSelectedPage] = useState<number>(1);
+
+  const handleSelectionChange = (page: number) => {
+    setSelectedPage(page);
+  };
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      <Pagination totalPages={15} onChange={handleSelectionChange} />
+      <div>선택된 페이지는 {selectedPage}입니다 </div>
+    </div>
+  );
+};
+
+export const WatchPageState: Story = {
+  args: { totalPages: 15 },
+  render: () => <WatchPageStatePagination />,
+};