[FEAT] Pagination 컴포넌트, 스토리북 구현

src/shared/ui/Pagination/Pagination.stories.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Pagination } from './Pagination';
+
+const meta = {
+  title: 'components/common/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+
+export const Basic: Story = {
+  args: {
+    currentPage: 1,
+    totalPages: 2,
+    className: '',
+  },
+  argTypes: {
+    currentPage: { control: { type: 'number' } },
+    totalPages: { control: { type: 'number' } },
+    className: { control: { type: 'text' } },
+  },
+  render: (args) => {
+    const [currentPage, setCurrentPage] = useState<number>(1);
+
+    const handlePageChange = (page: number) => {
+      setCurrentPage(page);
+    };
+    return (
+      <Pagination
+        currentPage={currentPage}
+        totalPages={args.totalPages}
+        onPageChange={handlePageChange}
+      />
+    );
+  },
+};

src/shared/ui/Pagination/Pagination.tsx

@@ -0,0 +1,109 @@
+import { cn } from '@/shared/lib/core';
+
+import { Icon } from '../Icon';
+
+type WrapperProps = {
+  /**
+   * additional className.
+   */
+  className: string;
+} & React.HTMLAttributes<HTMLElement>;
+
+function PaginationWrapper({ className, ...props }: WrapperProps) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      className={cn('flex cursor-pointer items-center justify-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+type PaginationItemProps = {
+  /**
+   * page number.
+   */
+  page: number;
+  /**
+   * whether the page is active.
+   */
+  isActive: boolean;
+  /**
+   * function to be called when the page is clicked
+   */
+  onClick: () => void;
+};
+
+function PaginationItem({ page, isActive, onClick }: PaginationItemProps) {
+  return (
+    <button
+      onClickCapture={onClick}
+      className={`size-9 rounded px-3 py-1 font-semibold ${
+        isActive ? 'bg-primary-100 text-primary-300 shadow-sm' : 'hover:bg-gray-100'
+      }`}
+    >
+      {page}
+    </button>
+  );
+}
+
+type Props = {
+  /**
+   * current page number.
+   */
+  currentPage: number;
+  /**
+   * total page number.
+   */
+  totalPages: number;
+  /**
+   * function to be called when page is changed.
+   */
+  onPageChange: (page: number) => void;
+  /**
+   * additional className.
+   */
+  className?: string;
+};
+
+export function Pagination({ currentPage, totalPages, onPageChange, className = '' }: Props) {
+  const handlePrevious = () => {
+    if (currentPage > 1) onPageChange(currentPage - 1);
+  };
+
+  const handleNext = () => {
+    if (currentPage < totalPages) onPageChange(currentPage + 1);
+  };
+
+  return (
+    <PaginationWrapper className={className}>
+      {totalPages >= 3 && currentPage > 1 && (
+        <Icon
+          name="arrowLeft"
+          size={35}
+          className="size-9 rounded-md px-2 py-1 hover:bg-gray-100"
+          onClickCapture={handlePrevious}
+        />
+      )}
+
+      {Array.from({ length: totalPages }, (_, index) => (
+        <PaginationItem
+          key={index}
+          page={index + 1}
+          isActive={index + 1 === currentPage}
+          onClick={() => onPageChange(index + 1)}
+        />
+      ))}
+
+      {totalPages >= 3 && currentPage < totalPages && (
+        <Icon
+          name="arrowRight"
+          size={35}
+          className="size-9 rounded-md px-2 py-1 hover:bg-gray-100"
+          onClickCapture={handleNext}
+        />
+      )}
+    </PaginationWrapper>
+  );
+}

src/shared/ui/Pagination/index.ts

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

src/shared/ui/assets/index.tsx

@@ -1,5 +1,7 @@
 import Add from './add.svg';
 import ArrowDown from './arrow-down.svg';
+import ArrowLeft from './arrow-left.svg';
+import ArrowRight from './arrow-right.svg';
 import ArrowUp from './arrow-up.svg';
 import Check from './check.svg';
 import Close from './close.svg';
@@ -17,6 +19,8 @@ export const Icons = {
   add: Add,
   arrowDown: ArrowDown,
   arrowUp: ArrowUp,
+  arrowLeft: ArrowLeft,
+  arrowRight: ArrowRight,
   check: Check,
   close: Close,
   download: DownLoad,