From 81aaa99151261c99d1d044c5a3903592f9a2ca8b Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 19:18:08 +0900 Subject: [PATCH 01/15] =?UTF-8?q?[#99]=20=E2=9C=A8=20add=20Pagination=20co?= =?UTF-8?q?mponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/pagination/Pagination.tsx | 66 +++++++++++++++++++ src/components/shared/pagination/index.ts | 3 + 2 files changed, 69 insertions(+) create mode 100644 src/components/shared/pagination/Pagination.tsx create mode 100644 src/components/shared/pagination/index.ts diff --git a/src/components/shared/pagination/Pagination.tsx b/src/components/shared/pagination/Pagination.tsx new file mode 100644 index 0000000..2764c6b --- /dev/null +++ b/src/components/shared/pagination/Pagination.tsx @@ -0,0 +1,66 @@ +import { IcChevronLeft, IcChevronRight } from '@/assets/IconList' +import clsx from 'clsx' + +import { Button } from '@/components/common/button' + +interface PaginationProps { + currentPage: number // 현재 페이지 + pageButtons: number[] // 현재 그룹의 버튼 목록 + hasNextPageGroup: boolean // 다음 페이지 그룹 존재 여부 + hasPreviousPageGroup: boolean // 이전 페이지 그룹 존재 여부 + goToPage: (page: number) => void // 특정 페이지로 이동 + goToNextPageGroup: () => void // 다음 페이지 그룹으로 이동 + goToPreviousPageGroup: () => void // 이전 페이지 그룹으로 이동 +} + +const baseStyle = + 'flex h-24 w-24 items-center justify-center bg-common-white p-0 text-body3 text-gray-600' +const defaultPageButtonClass = clsx(baseStyle, 'hover:bg-gray-100') +const currentPageButtonClass = clsx( + baseStyle, + 'bg-primary-normal text-common-white' +) +export const Pagination = ({ + currentPage, + pageButtons, + hasNextPageGroup, + hasPreviousPageGroup, + goToPage, + goToNextPageGroup, + goToPreviousPageGroup, +}: PaginationProps): JSX.Element => { + return ( +
+ + {pageButtons.map(page => ( + + ))} + +
+ ) +} diff --git a/src/components/shared/pagination/index.ts b/src/components/shared/pagination/index.ts new file mode 100644 index 0000000..8fe7412 --- /dev/null +++ b/src/components/shared/pagination/index.ts @@ -0,0 +1,3 @@ +import { Pagination } from './Pagination' + +export { Pagination } From 80eb871f19b1bbbe4b65a3c50aba721e033ac260 Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 19:18:47 +0900 Subject: [PATCH 02/15] =?UTF-8?q?[#99]=20=E2=9C=A8=20add=20usePagination?= =?UTF-8?q?=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/usePagination.ts | 79 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 src/hooks/usePagination.ts diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts new file mode 100644 index 0000000..dbc6a42 --- /dev/null +++ b/src/hooks/usePagination.ts @@ -0,0 +1,79 @@ +import { useState } from 'react' + +interface UsePaginationProps { + totalItems: number // 전체 아이템 수 + itemsPerPage: number // 페이지당 아이템 수 + buttonsPerPage?: number // 한 번에 보여줄 페이지네이션 버튼 수 (기본값: 10) +} + +interface UsePaginationReturn { + currentPage: number // 현재 페이지 + pageButtons: number[] // 현재 페이지 그룹의 버튼 목록 + hasNextPageGroup: boolean // 다음 페이지 그룹 존재 여부 + hasPreviousPageGroup: boolean // 이전 페이지 그룹 존재 여부 + goToPage: (page: number) => void // 특정 페이지로 이동 + goToNextPageGroup: () => void // 다음 페이지 그룹으로 이동 + goToPreviousPageGroup: () => void // 이전 페이지 그룹으로 이동 +} + +export function usePagination({ + totalItems, + itemsPerPage, + buttonsPerPage = 10, +}: UsePaginationProps): UsePaginationReturn { + if (totalItems <= 0 || itemsPerPage <= 0 || buttonsPerPage <= 0) { + throw new Error('All parameters must be greater than zero') + } + + const totalPages = Math.ceil(totalItems / itemsPerPage) // 총 페이지 수 + const totalGroups = Math.ceil(totalPages / buttonsPerPage) // 총 그룹 수 + const [currentPage, setCurrentPage] = useState(1) // 현재 페이지 + const [currentGroupIndex, setCurrentGroupIndex] = useState(0) // 현재 페이지 그룹 인덱스 + + const firstPageInGroup = currentGroupIndex * buttonsPerPage + 1 + const lastPageInGroup = Math.min( + firstPageInGroup + buttonsPerPage - 1, + totalPages + ) + + // 현재 그룹에 표시될 페이지 번호 계산 + const pageButtons = Array.from( + { length: lastPageInGroup - firstPageInGroup + 1 }, + (_, idx) => firstPageInGroup + idx + ) + + const hasNextPageGroup = currentGroupIndex < totalGroups - 1 + const hasPreviousPageGroup = currentGroupIndex > 0 + + const goToPage = (page: number) => { + if (page < 1 || page > totalPages) { + console.warn('Invalid page number') + return + } + setCurrentPage(page) + } + + const goToNextPageGroup = () => { + if (hasNextPageGroup) { + setCurrentGroupIndex(prev => prev + 1) + setCurrentPage((currentGroupIndex + 1) * buttonsPerPage + 1) + } + } + + const goToPreviousPageGroup = () => { + if (hasPreviousPageGroup) { + setCurrentGroupIndex(prev => prev - 1) + setCurrentPage((currentGroupIndex - 1) * buttonsPerPage + buttonsPerPage) + } + } + + return { + currentPage, + pageButtons, + hasNextPageGroup, + hasPreviousPageGroup, + goToPage, + goToNextPageGroup, + goToPreviousPageGroup, + } +} From a54d8ca37374600b8635393e3673e107d407e936 Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 19:19:44 +0900 Subject: [PATCH 03/15] =?UTF-8?q?[#99]=20=F0=9F=92=84=20update=20chevron-r?= =?UTF-8?q?ight=20svg=20with=20currentColor=20attribute?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ic-chevron-right.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/icons/ic-chevron-right.svg b/src/assets/icons/ic-chevron-right.svg index e79b3bf..6cc8223 100644 --- a/src/assets/icons/ic-chevron-right.svg +++ b/src/assets/icons/ic-chevron-right.svg @@ -1,3 +1,3 @@ - + From 35af466282908b188f886fd2608421d2000b49af Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 19:21:56 +0900 Subject: [PATCH 04/15] =?UTF-8?q?[#99]=20=E2=99=BB=EF=B8=8F=20refactor=20b?= =?UTF-8?q?utton=20from=20using=20label=20and=20icons=20props=20to=20child?= =?UTF-8?q?ren=20props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/Clickable.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/common/button/Clickable.tsx b/src/components/common/button/Clickable.tsx index 56032a1..2dd925d 100644 --- a/src/components/common/button/Clickable.tsx +++ b/src/components/common/button/Clickable.tsx @@ -1,14 +1,12 @@ import clsx from 'clsx' export interface ClickableProps { - label?: string + children?: React.ReactNode variant?: Variant size?: Size borderColor?: BorderColor backgroundColor?: BackgroundColor textColor?: TextColor - startIcon?: React.ReactElement - endIcon?: React.ReactElement fullWidth?: boolean leftAlign?: boolean disabled?: boolean @@ -19,7 +17,14 @@ type Variant = 'contained' | 'outlined' | 'text' type Size = 'sm' | 'md' | 'lg' | 'xl' type BorderColor = 'blue' | 'gray' type BackgroundColor = 'blue' | 'white' | 'gray' | 'transparentBlue' -type TextColor = 'blue' | 'white' | 'black' | 'gray400' | 'gray500' | 'gray600' +type TextColor = + | 'blue' + | 'white' + | 'black' + | 'gray400' + | 'gray500' + | 'gray600' + | 'gray800' const baseStyle = 'flex items-center justify-center gap-4 rounded-8 text-body1 font-medium' @@ -60,17 +65,16 @@ const styleByTextColor: Record = { gray400: 'text-gray-400', gray500: 'text-gray-500', gray600: 'text-gray-600', + gray800: 'text-gray-800', } export const Clickable = ({ - label = '', + children, variant = 'contained', size = 'md', borderColor, backgroundColor, textColor, - startIcon, - endIcon, fullWidth = false, leftAlign = false, disabled = false, @@ -99,9 +103,7 @@ export const Clickable = ({ return ( - {startIcon} - {label} - {endIcon} + {children} ) } From 380064646f9bbec2285490f1de6cb4ce12defc5a Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 19:22:40 +0900 Subject: [PATCH 05/15] =?UTF-8?q?[#99]=20=E2=99=BB=EF=B8=8F=20reflect=20ch?= =?UTF-8?q?anges=20in=20Clickable=20on=20module=20content=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/auth/SignUpSuccessModalContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/auth/SignUpSuccessModalContent.tsx b/src/components/auth/SignUpSuccessModalContent.tsx index e0dac44..f152878 100644 --- a/src/components/auth/SignUpSuccessModalContent.tsx +++ b/src/components/auth/SignUpSuccessModalContent.tsx @@ -22,7 +22,7 @@ export const SignUpSuccessModalContent = (): JSX.Element => { lastLabel={'에서 가능합니다.'} to={'/'} /> - + 로그인 바로가기 ) } From aa76d6e23b6c07468f21f169cf70ac95a6b2bf2a Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 19:23:05 +0900 Subject: [PATCH 06/15] =?UTF-8?q?[#99]=20=E2=9C=85=20add=20Pagination=20st?= =?UTF-8?q?ories?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/pagination/Pagination.stories.tsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/stories/shared/pagination/Pagination.stories.tsx diff --git a/src/stories/shared/pagination/Pagination.stories.tsx b/src/stories/shared/pagination/Pagination.stories.tsx new file mode 100644 index 0000000..0e5abeb --- /dev/null +++ b/src/stories/shared/pagination/Pagination.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react' + +import { Pagination } from '@/components/shared/pagination' + +import { usePagination } from '@/hooks/usePagination' + +export default { + title: 'Shared/Pagination/Pagination', + component: Pagination, + argTypes: { + currentPage: { control: { type: 'number', min: 1 }, defaultValue: 1 }, + totalPages: { control: { type: 'number', min: 1 }, defaultValue: 5 }, + hasNextPage: { control: 'boolean', defaultValue: true }, + hasPreviousPage: { control: 'boolean', defaultValue: false }, + }, +} as Meta + +export const Default: StoryObj = { + args: { + currentPage: 1, + pageButtons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], + totalPages: 5, + hasNextPageGroup: true, + hasPreviousPageGroup: true, + goToPage: (page: number) => alert(`Go to page: ${page}`), + goToNextPageGroup: () => alert('Next page'), + goToPreviousPageGroup: () => alert('Previous page'), + }, +} From beef83f4c66232dd7a3497b6f59b096434bc3192 Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 19:24:10 +0900 Subject: [PATCH 07/15] =?UTF-8?q?[#99]=20=E2=9C=A8=20add=20extended=20twMe?= =?UTF-8?q?rge=20due=20to=20the=20issue=20with=20merging=20custom=20classe?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/twMerge/index.ts | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/lib/twMerge/index.ts diff --git a/src/lib/twMerge/index.ts b/src/lib/twMerge/index.ts new file mode 100644 index 0000000..df085f1 --- /dev/null +++ b/src/lib/twMerge/index.ts @@ -0,0 +1,27 @@ +import { extendTailwindMerge } from 'tailwind-merge' + +export const twMergeEx = extendTailwindMerge({ + extend: { + classGroups: { + 'font-size': [ + { + text: [ + 'heading1', + 'heading2', + 'heading3', + 'heading4', + 'heading5', + 'title1', + 'title2', + 'body1', + 'body2', + 'body3', + 'caption1', + 'caption2', + 'inherit', + ], + }, + ], + }, + }, +}) From 879f6dd57b85f9b31c3651d4fe5c19634407af30 Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 19:25:52 +0900 Subject: [PATCH 08/15] =?UTF-8?q?[#99]=20=E2=99=BB=EF=B8=8F=20apply=20exte?= =?UTF-8?q?nded=20twMerge=20in=20clickable=20to=20test=20if=20it=20works?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/Clickable.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/common/button/Clickable.tsx b/src/components/common/button/Clickable.tsx index 2dd925d..cc9da6f 100644 --- a/src/components/common/button/Clickable.tsx +++ b/src/components/common/button/Clickable.tsx @@ -1,3 +1,4 @@ +import { twMergeEx } from '@/lib/twMerge' import clsx from 'clsx' export interface ClickableProps { @@ -86,18 +87,18 @@ export const Clickable = ({ : '' const textColorClass = textColor ? styleByTextColor[textColor] : '' - const clickableStyle = clsx( + const clickableStyle = twMergeEx( baseStyle, styleByVariant[variant], styleBySize[size], textColorClass, - { + clsx({ [borderColorClass]: variant === 'outlined', [backgroundColorClass]: variant !== 'text', [disabledStyle]: disabled, 'w-full': fullWidth, 'justify-start': leftAlign, - }, + }), className ) From 99d20a6a715ed1eda398275910c36e721d764db1 Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 19:59:10 +0900 Subject: [PATCH 09/15] =?UTF-8?q?[#99]=20=E2=99=BB=EF=B8=8F=20separate=20r?= =?UTF-8?q?esuable=20interface=20(UsePagination)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/pagination/Pagination.tsx | 13 ++----------- src/hooks/usePagination.ts | 14 +++----------- src/types/hooks/index.ts | 3 +++ src/types/hooks/usePagination.types.d.ts | 9 +++++++++ 4 files changed, 17 insertions(+), 22 deletions(-) create mode 100644 src/types/hooks/index.ts create mode 100644 src/types/hooks/usePagination.types.d.ts diff --git a/src/components/shared/pagination/Pagination.tsx b/src/components/shared/pagination/Pagination.tsx index 2764c6b..6f1cec3 100644 --- a/src/components/shared/pagination/Pagination.tsx +++ b/src/components/shared/pagination/Pagination.tsx @@ -1,18 +1,9 @@ import { IcChevronLeft, IcChevronRight } from '@/assets/IconList' +import type { UsePaginationReturn } from '@/types/hooks' import clsx from 'clsx' import { Button } from '@/components/common/button' -interface PaginationProps { - currentPage: number // 현재 페이지 - pageButtons: number[] // 현재 그룹의 버튼 목록 - hasNextPageGroup: boolean // 다음 페이지 그룹 존재 여부 - hasPreviousPageGroup: boolean // 이전 페이지 그룹 존재 여부 - goToPage: (page: number) => void // 특정 페이지로 이동 - goToNextPageGroup: () => void // 다음 페이지 그룹으로 이동 - goToPreviousPageGroup: () => void // 이전 페이지 그룹으로 이동 -} - const baseStyle = 'flex h-24 w-24 items-center justify-center bg-common-white p-0 text-body3 text-gray-600' const defaultPageButtonClass = clsx(baseStyle, 'hover:bg-gray-100') @@ -28,7 +19,7 @@ export const Pagination = ({ goToPage, goToNextPageGroup, goToPreviousPageGroup, -}: PaginationProps): JSX.Element => { +}: UsePaginationReturn): JSX.Element => { return (
From 7d1a3e1c925d690c070fcaf4b1e51c567dd4f62a Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 20:16:55 +0900 Subject: [PATCH 12/15] =?UTF-8?q?[#99]=20=F0=9F=9A=9A=20rename=20UsePagina?= =?UTF-8?q?tionReturn=20into=20PaginationState?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/pagination/Pagination.tsx | 6 ++++-- src/hooks/usePagination.ts | 4 ++-- ...{usePagination.types.d.ts => PaginationState.types.d.ts} | 2 +- src/types/hooks/index.ts | 4 ++-- 4 files changed, 9 insertions(+), 7 deletions(-) rename src/types/hooks/{usePagination.types.d.ts => PaginationState.types.d.ts} (92%) diff --git a/src/components/shared/pagination/Pagination.tsx b/src/components/shared/pagination/Pagination.tsx index b41d401..9081aba 100644 --- a/src/components/shared/pagination/Pagination.tsx +++ b/src/components/shared/pagination/Pagination.tsx @@ -1,6 +1,6 @@ import { IcChevronLeft, IcChevronRight } from '@/assets/IconList' import { twMergeEx } from '@/lib/twMerge' -import type { UsePaginationReturn } from '@/types/hooks' +import type { PaginationState } from '@/types/hooks' import { Button } from '@/components/common/button' @@ -23,7 +23,7 @@ export const Pagination = ({ goToPage, goToNextPageGroup, goToPreviousPageGroup, -}: UsePaginationReturn): JSX.Element => { +}: PaginationState): JSX.Element => { return (
diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts index caefec6..4c9b2ca 100644 --- a/src/hooks/usePagination.ts +++ b/src/hooks/usePagination.ts @@ -1,6 +1,6 @@ import { useState } from 'react' -import type { UsePaginationReturn } from '@/types/hooks' +import type { PaginationState } from '@/types/hooks' interface UsePaginationProps { totalItems: number // 전체 아이템 수 @@ -12,7 +12,7 @@ export function usePagination({ totalItems, itemsPerPage, buttonsPerPage = 10, -}: UsePaginationProps): UsePaginationReturn { +}: UsePaginationProps): PaginationState { if (totalItems <= 0 || itemsPerPage <= 0 || buttonsPerPage <= 0) { throw new Error('0보다 같거나 작은 페이지를 인자로 전달할 수 없습니다.') } diff --git a/src/types/hooks/usePagination.types.d.ts b/src/types/hooks/PaginationState.types.d.ts similarity index 92% rename from src/types/hooks/usePagination.types.d.ts rename to src/types/hooks/PaginationState.types.d.ts index 8e50046..8f8f3d0 100644 --- a/src/types/hooks/usePagination.types.d.ts +++ b/src/types/hooks/PaginationState.types.d.ts @@ -1,4 +1,4 @@ -export interface UsePaginationReturn { +export interface PaginationState { currentPage: number // 현재 페이지 pageButtons: number[] // 현재 페이지 그룹의 버튼 목록 hasNextPageGroup: boolean // 다음 페이지 그룹 존재 여부 diff --git a/src/types/hooks/index.ts b/src/types/hooks/index.ts index fd6408e..f8a153a 100644 --- a/src/types/hooks/index.ts +++ b/src/types/hooks/index.ts @@ -1,3 +1,3 @@ -import { UsePaginationReturn } from './usePagination.types' +import { PaginationState } from './PaginationState.types' -export type { UsePaginationReturn } +export type { PaginationState } From 6de651e5ed08d8e02741bcfee62d930196987cff Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 20:46:04 +0900 Subject: [PATCH 13/15] =?UTF-8?q?[#134]=20=F0=9F=9A=9A=20rename=20api=20re?= =?UTF-8?q?lated=20type=20locations=20to=20types/api/...?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/{ => api}/apiResponse.types.d.ts | 0 src/types/{ => api}/apiSchema.types.d.ts | 0 src/types/{ => api}/auth.types.d.ts | 0 src/types/{ => api}/community.types.d.ts | 0 src/types/{ => api}/global.types.d.ts | 0 src/types/{ => api}/portfolio.types.d.ts | 0 src/types/{ => api}/post.types.d.ts | 0 src/types/{ => api}/profile.types.d.ts | 0 src/types/{ => api}/svg.d.ts | 0 src/types/{ => api}/team.types.d.ts | 0 10 files changed, 0 insertions(+), 0 deletions(-) rename src/types/{ => api}/apiResponse.types.d.ts (100%) rename src/types/{ => api}/apiSchema.types.d.ts (100%) rename src/types/{ => api}/auth.types.d.ts (100%) rename src/types/{ => api}/community.types.d.ts (100%) rename src/types/{ => api}/global.types.d.ts (100%) rename src/types/{ => api}/portfolio.types.d.ts (100%) rename src/types/{ => api}/post.types.d.ts (100%) rename src/types/{ => api}/profile.types.d.ts (100%) rename src/types/{ => api}/svg.d.ts (100%) rename src/types/{ => api}/team.types.d.ts (100%) diff --git a/src/types/apiResponse.types.d.ts b/src/types/api/apiResponse.types.d.ts similarity index 100% rename from src/types/apiResponse.types.d.ts rename to src/types/api/apiResponse.types.d.ts diff --git a/src/types/apiSchema.types.d.ts b/src/types/api/apiSchema.types.d.ts similarity index 100% rename from src/types/apiSchema.types.d.ts rename to src/types/api/apiSchema.types.d.ts diff --git a/src/types/auth.types.d.ts b/src/types/api/auth.types.d.ts similarity index 100% rename from src/types/auth.types.d.ts rename to src/types/api/auth.types.d.ts diff --git a/src/types/community.types.d.ts b/src/types/api/community.types.d.ts similarity index 100% rename from src/types/community.types.d.ts rename to src/types/api/community.types.d.ts diff --git a/src/types/global.types.d.ts b/src/types/api/global.types.d.ts similarity index 100% rename from src/types/global.types.d.ts rename to src/types/api/global.types.d.ts diff --git a/src/types/portfolio.types.d.ts b/src/types/api/portfolio.types.d.ts similarity index 100% rename from src/types/portfolio.types.d.ts rename to src/types/api/portfolio.types.d.ts diff --git a/src/types/post.types.d.ts b/src/types/api/post.types.d.ts similarity index 100% rename from src/types/post.types.d.ts rename to src/types/api/post.types.d.ts diff --git a/src/types/profile.types.d.ts b/src/types/api/profile.types.d.ts similarity index 100% rename from src/types/profile.types.d.ts rename to src/types/api/profile.types.d.ts diff --git a/src/types/svg.d.ts b/src/types/api/svg.d.ts similarity index 100% rename from src/types/svg.d.ts rename to src/types/api/svg.d.ts diff --git a/src/types/team.types.d.ts b/src/types/api/team.types.d.ts similarity index 100% rename from src/types/team.types.d.ts rename to src/types/api/team.types.d.ts From 2dadded104951d14c525f9b18f89ea15ae9a4735 Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 20:46:40 +0900 Subject: [PATCH 14/15] =?UTF-8?q?[#134]=20=F0=9F=94=A7=20update=20generate?= =?UTF-8?q?:types=20scripts=20with=20type=20saving=20path?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c40d2e3..f779ea3 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "format": "prettier --write .", "test": "jest", "commit": "cz", - "generate:types": "openapi-typescript http://43.202.50.174:8080/v3/api-docs --output src/types/apiSchema.types.d.ts", + "generate:types": "openapi-typescript http://43.202.50.174:8080/v3/api-docs --output src/types/api/apiSchema.types.d.ts", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "chromatic": "npx chromatic" From 4987eff9582bfd34b5d8606dfd3a034a1ebe625e Mon Sep 17 00:00:00 2001 From: KingNono1030 Date: Thu, 28 Nov 2024 20:48:48 +0900 Subject: [PATCH 15/15] =?UTF-8?q?[#134]=20=F0=9F=9A=9A=20reflect=20locatio?= =?UTF-8?q?n=20change=20of=20type=20files=20on=20import=20lines?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(pages)/sign-in/page.tsx | 4 +- src/app/(pages)/sign-up/page.tsx | 2 +- src/app/api/auth/sign-in/route.ts | 2 +- src/hooks/usePagination.ts | 2 +- src/services/auth/auth.ts | 2 +- .../shared/pagination/Pagination.stories.tsx | 54 +++++++++++++------ 6 files changed, 44 insertions(+), 22 deletions(-) diff --git a/src/app/(pages)/sign-in/page.tsx b/src/app/(pages)/sign-in/page.tsx index 3f26f08..f242f55 100644 --- a/src/app/(pages)/sign-in/page.tsx +++ b/src/app/(pages)/sign-in/page.tsx @@ -2,12 +2,10 @@ import { SubmitHandler, useForm } from 'react-hook-form' -import { SignInRequest } from '@/types/auth.types' +import { SignInRequest } from '@/types/api/auth.types' import { useSignInMutation } from 'queries/useSignIn' - export default function LoginPage(): JSX.Element { - const { register, handleSubmit, diff --git a/src/app/(pages)/sign-up/page.tsx b/src/app/(pages)/sign-up/page.tsx index 593ce36..9f9af12 100644 --- a/src/app/(pages)/sign-up/page.tsx +++ b/src/app/(pages)/sign-up/page.tsx @@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation' import { SubmitHandler, useForm } from 'react-hook-form' -import { SignUpRequest } from '@/types/auth.types' +import { SignUpRequest } from '@/types/api/auth.types' import { useSignUpMutation } from 'queries/useSignUp' export default function SignUpPage(): JSX.Element { diff --git a/src/app/api/auth/sign-in/route.ts b/src/app/api/auth/sign-in/route.ts index 0fa2b46..8e2436f 100644 --- a/src/app/api/auth/sign-in/route.ts +++ b/src/app/api/auth/sign-in/route.ts @@ -1,6 +1,6 @@ import { NextResponse } from 'next/server' -import { SignInRequest, SignInResponseResult } from '@/types/auth.types' +import { SignInRequest, SignInResponseResult } from '@/types/api/auth.types' import { backendApi } from '@/services/api' diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts index 4c9b2ca..e6d73dd 100644 --- a/src/hooks/usePagination.ts +++ b/src/hooks/usePagination.ts @@ -2,7 +2,7 @@ import { useState } from 'react' import type { PaginationState } from '@/types/hooks' -interface UsePaginationProps { +export interface UsePaginationProps { totalItems: number // 전체 아이템 수 itemsPerPage: number // 페이지당 아이템 수 buttonsPerPage?: number // 한 번에 보여줄 페이지네이션 버튼 수 (기본값: 10) diff --git a/src/services/auth/auth.ts b/src/services/auth/auth.ts index 92ccea6..5b90719 100644 --- a/src/services/auth/auth.ts +++ b/src/services/auth/auth.ts @@ -1,4 +1,4 @@ -import { SignInRequest, SignUpRequest } from '@/types/auth.types' +import { SignInRequest, SignUpRequest } from '@/types/api/auth.types' import { backendApi, proxyApi } from '@/services/api' diff --git a/src/stories/shared/pagination/Pagination.stories.tsx b/src/stories/shared/pagination/Pagination.stories.tsx index 0e5abeb..051c74e 100644 --- a/src/stories/shared/pagination/Pagination.stories.tsx +++ b/src/stories/shared/pagination/Pagination.stories.tsx @@ -1,29 +1,53 @@ +import React from 'react' + import { Meta, StoryObj } from '@storybook/react' import { Pagination } from '@/components/shared/pagination' -import { usePagination } from '@/hooks/usePagination' +import { UsePaginationProps, usePagination } from '@/hooks/usePagination' export default { - title: 'Shared/Pagination/Pagination', + title: 'Shared/Pagination', component: Pagination, argTypes: { - currentPage: { control: { type: 'number', min: 1 }, defaultValue: 1 }, - totalPages: { control: { type: 'number', min: 1 }, defaultValue: 5 }, - hasNextPage: { control: 'boolean', defaultValue: true }, - hasPreviousPage: { control: 'boolean', defaultValue: false }, + totalItems: { control: 'number', defaultValue: 100 }, + itemsPerPage: { control: 'number', defaultValue: 6 }, + buttonsPerPage: { control: 'number', defaultValue: 10 }, }, } as Meta -export const Default: StoryObj = { +const PaginationWrapper = ({ + totalItems, + itemsPerPage, + buttonsPerPage = 10, +}: UsePaginationProps) => { + const paginationState = usePagination({ + totalItems, + itemsPerPage, + buttonsPerPage, + }) + + return ( +
+ +
+

+ 현재 페이지: {paginationState.currentPage} +

+

+ 현재 그룹:{' '} + {Math.ceil(paginationState.currentPage / buttonsPerPage)} +

+
+
+ ) +} + +export const Default: StoryObj = { args: { - currentPage: 1, - pageButtons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], - totalPages: 5, - hasNextPageGroup: true, - hasPreviousPageGroup: true, - goToPage: (page: number) => alert(`Go to page: ${page}`), - goToNextPageGroup: () => alert('Next page'), - goToPreviousPageGroup: () => alert('Previous page'), + totalItems: 100, + itemsPerPage: 6, + buttonsPerPage: 10, }, + render: args => , }