|
| 1 | +import React from 'react' |
| 2 | + |
1 | 3 | import { Meta, StoryObj } from '@storybook/react' |
2 | 4 |
|
3 | 5 | import { Pagination } from '@/components/shared/pagination' |
4 | 6 |
|
5 | | -import { usePagination } from '@/hooks/usePagination' |
| 7 | +import { UsePaginationProps, usePagination } from '@/hooks/usePagination' |
6 | 8 |
|
7 | 9 | export default { |
8 | | - title: 'Shared/Pagination/Pagination', |
| 10 | + title: 'Shared/Pagination', |
9 | 11 | component: Pagination, |
10 | 12 | argTypes: { |
11 | | - currentPage: { control: { type: 'number', min: 1 }, defaultValue: 1 }, |
12 | | - totalPages: { control: { type: 'number', min: 1 }, defaultValue: 5 }, |
13 | | - hasNextPage: { control: 'boolean', defaultValue: true }, |
14 | | - hasPreviousPage: { control: 'boolean', defaultValue: false }, |
| 13 | + totalItems: { control: 'number', defaultValue: 100 }, |
| 14 | + itemsPerPage: { control: 'number', defaultValue: 6 }, |
| 15 | + buttonsPerPage: { control: 'number', defaultValue: 10 }, |
15 | 16 | }, |
16 | 17 | } as Meta |
17 | 18 |
|
18 | | -export const Default: StoryObj = { |
| 19 | +const PaginationWrapper = ({ |
| 20 | + totalItems, |
| 21 | + itemsPerPage, |
| 22 | + buttonsPerPage = 10, |
| 23 | +}: UsePaginationProps) => { |
| 24 | + const paginationState = usePagination({ |
| 25 | + totalItems, |
| 26 | + itemsPerPage, |
| 27 | + buttonsPerPage, |
| 28 | + }) |
| 29 | + |
| 30 | + return ( |
| 31 | + <div className='p-4'> |
| 32 | + <Pagination {...paginationState} /> |
| 33 | + <div className='text-sm mt-4 text-gray-700'> |
| 34 | + <p> |
| 35 | + <strong>현재 페이지:</strong> {paginationState.currentPage} |
| 36 | + </p> |
| 37 | + <p> |
| 38 | + <strong>현재 그룹:</strong>{' '} |
| 39 | + {Math.ceil(paginationState.currentPage / buttonsPerPage)} |
| 40 | + </p> |
| 41 | + </div> |
| 42 | + </div> |
| 43 | + ) |
| 44 | +} |
| 45 | + |
| 46 | +export const Default: StoryObj<UsePaginationProps> = { |
19 | 47 | args: { |
20 | | - currentPage: 1, |
21 | | - pageButtons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], |
22 | | - totalPages: 5, |
23 | | - hasNextPageGroup: true, |
24 | | - hasPreviousPageGroup: true, |
25 | | - goToPage: (page: number) => alert(`Go to page: ${page}`), |
26 | | - goToNextPageGroup: () => alert('Next page'), |
27 | | - goToPreviousPageGroup: () => alert('Previous page'), |
| 48 | + totalItems: 100, |
| 49 | + itemsPerPage: 6, |
| 50 | + buttonsPerPage: 10, |
28 | 51 | }, |
| 52 | + render: args => <PaginationWrapper {...args} />, |
29 | 53 | } |
0 commit comments