Merge pull request #31 from UIverse-Team/feature/pagination

feature: feature/pagination

Author: rondido

next.config.ts

@@ -1,7 +1,15 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
   /* config options here */
-};
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    })
 
-export default nextConfig;
+    return config
+  },
+}
+
+export default nextConfig

package.json

@@ -32,6 +32,7 @@
     "dotenv": "^16.4.5",
     "msw": "^2.7.1",
     "next": "15.1.7",
+    "next-plugin-svgr": "^1.1.12",
     "next-themes": "^0.4.4",
     "pretendard": "^1.3.9",
     "react": "^18.3.1",
@@ -58,6 +59,7 @@
     "@storybook/nextjs": "8.5.8",
     "@storybook/react": "^8.5.8",
     "@storybook/test": "8.5.8",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

public/leftarrow.svg

@@ -1,8 +1,18 @@
+'use client'
+import Pagination from '@/components/common/pagination/Pagination'
 import BreakpointTest from '@/components/design-system/BreakpointTest'
 import ColorPalette from '@/components/design-system/ColorPalette'
 import TypoSystem from '@/components/design-system/TypoSystem'
+import { useState } from 'react'
 
 export default function Home() {
+  //현재 페이지
+  const [currentPage, setCurrentPage] = useState(1)
+  //보여줄 데이터의 갯수
+  const limit = 5
+  const totlepages = 30
+  const offset = (currentPage - 1) * limit
+  console.log(offset)
   return (
     // 임시 메인 페이지
     // 추후 메인페이지 작업 시 수정해도 됨
@@ -14,6 +24,12 @@ export default function Home() {
       <ColorPalette />
 
       <TypoSystem />
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totlepages}
+        onPageChange={setCurrentPage}
+        limit={limit}
+      />
     </div>
   )
 }

public/rightarrow.svg

@@ -0,0 +1,72 @@
+import {
+  PaginationContainer,
+  PaginationContent,
+  // PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination-container'
+
+//totalpage 전체rottn
+//currentPage 현재 페이지
+//Page 다음 혹은 이전으로 옮길 때 사용하는 이벤트 함수.
+//onPageChange: 변경 될 Page를 만드는 useState함수
+//limit 보여줄 데이터 갯수
+interface PaginationProps {
+  totalPages: number
+  currentPage: number
+  onPageChange: (page: number) => void
+  limit: number
+}
+
+const Pagination = ({ totalPages, currentPage, onPageChange, limit }: PaginationProps) => {
+  const numPages = Math.ceil(totalPages / limit)
+  const handlePrev = () => {
+    if (currentPage > 1) onPageChange(currentPage - 1)
+  }
+
+  const handleNext = () => {
+    if (currentPage < totalPages) onPageChange(currentPage + 1)
+  }
+  // item 하나당 하나의 숫자가 들어 가야한다.
+  // Link는 페이지션을 직접적으로 클릭했을 때 이동하는 숫자
+  // Previous는 이전 값
+  // nextvious는 다음 값
+
+  // 페이지네이션이 1개만 존재한다면 페이지네이션을 보여주지 않음.
+  if (totalPages <= 1) {
+    return
+  }
+  return (
+    <PaginationContainer>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" onClick={() => handlePrev()} />
+        </PaginationItem>
+        {Array(numPages)
+          .fill(0)
+          .map((_, i) => (
+            <PaginationLink
+              key={i + 1}
+              onClick={() => onPageChange(i + 1)}
+              aria-current={currentPage === i + 1 ? 'page' : undefined}
+              href="#"
+              className={`border-none rounded-lg p-2 m-0 bg-black text-secondary text-base hover:bg-red-500 hover:cursor-pointer hover:-translate-y-0.5 ${
+                currentPage === i + 1
+                  ? 'bg-primary font-bold cursor-not-allowed transform-none w-[38px] h-[38px] rounded-4xl text-white'
+                  : ''
+              }`}
+            >
+              {i + 1}
+            </PaginationLink>
+          ))}
+        <PaginationItem>
+          <PaginationNext href="#" onClick={() => handleNext()} />
+        </PaginationItem>
+      </PaginationContent>
+    </PaginationContainer>
+  )
+}
+
+export default Pagination

src/app/page.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Breadcrumb } from './breadcrumb'
+
+const meta = {
+  component: Breadcrumb,
+} satisfies Meta<typeof Breadcrumb>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

src/components/common/pagination/Pagination.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
-import { ChevronRight, MoreHorizontal } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
 
@@ -62,17 +61,15 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
   )
 }
 
-function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
+function BreadcrumbSeparator({ className, ...props }: React.ComponentProps<'li'>) {
   return (
     <li
       data-slot="breadcrumb-separator"
       role="presentation"
       aria-hidden="true"
       className={cn('[&>svg]:size-3.5', className)}
       {...props}
-    >
-      {children ?? <ChevronRight />}
-    </li>
+    ></li>
   )
 }
 
@@ -85,7 +82,6 @@ function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'
       className={cn('flex size-9 items-center justify-center', className)}
       {...props}
     >
-      <MoreHorizontal className="size-4" />
       <span className="sr-only">More</span>
     </span>
   )

src/components/ui/breadcrumb.stories.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

src/components/ui/breadcrumb.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'
+import RightArrowIcon from '../../../public/rightarrow.svg'
+import LeftArrowIcon from '../../../public/leftarrow.svg'
 
 import { cn } from '@/lib/utils'
 import { Button, buttonVariants } from '@/components/ui/button'
 
-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+function PaginationContainer({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
     <nav
       role="navigation"
@@ -61,7 +62,7 @@ function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof
       className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
       {...props}
     >
-      <ChevronLeftIcon />
+      <LeftArrowIcon />
       <span className="hidden sm:block">Previous</span>
     </PaginationLink>
   )
@@ -75,8 +76,8 @@ function PaginationNext({ className, ...props }: React.ComponentProps<typeof Pag
       className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
       {...props}
     >
+      <RightArrowIcon />
       <span className="hidden sm:block">Next</span>
-      <ChevronRightIcon />
     </PaginationLink>
   )
 }
@@ -89,14 +90,13 @@ function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'
       className={cn('flex size-9 items-center justify-center', className)}
       {...props}
     >
-      <MoreHorizontalIcon className="size-4" />
       <span className="sr-only">More pages</span>
     </span>
   )
 }
 
 export {
-  Pagination,
+  PaginationContainer,
   PaginationContent,
   PaginationLink,
   PaginationItem,