[#134] ♻️ 타입 파일 디렉토리 구조 수정 (#135)

* [#99] ✨ add Pagination component

* [#99] ✨ add usePagination hook

* [#99] 💄 update chevron-right svg with currentColor attribute

* [#99] ♻️ refactor button from using label and icons props to children props

* [#99] ♻️ reflect changes in Clickable on module content component

* [#99] ✅ add Pagination stories

* [#99] ✨ add extended twMerge due to the issue with merging custom classes

* [#99] ♻️ apply extended twMerge in clickable to test if it works

* [#99] ♻️ separate resuable interface (UsePagination)

* [#99] ♻️ replace clsx with twMergeEx in Pagination component

* [#99] ♻️ add conditional className handling function in Pagination component'

* [#99] 🚚 rename UsePaginationReturn into PaginationState

* [#134] 🚚 rename api related type locations to types/api/...

* [#134] 🔧 update generate:types scripts with type saving path

* [#134] 🚚 reflect location change of type files on import lines

Author: KingNono1030

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"

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,

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 {

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'
 

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)

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'
 

src/stories/shared/pagination/Pagination.stories.tsx

@@ -2,28 +2,50 @@ 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 (
+    <div className='p-4'>
+      <Pagination {...paginationState} />
+      <div className='text-sm mt-4 text-gray-700'>
+        <p>
+          <strong>현재 페이지:</strong> {paginationState.currentPage}
+        </p>
+        <p>
+          <strong>현재 그룹:</strong>{' '}
+          {Math.ceil(paginationState.currentPage / buttonsPerPage)}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export const Default: StoryObj<UsePaginationProps> = {
   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 => <PaginationWrapper {...args} />,
 }