[feat] 페이지네이션 기능

dhkim511 commented 6 days ago

PaginationFooter 추가

Sourcery에 의한 요약

페이지 탐색을 개선하기 위해 새로운 PaginationFooter 컴포넌트를 추가합니다. 기존의 페이지 매김 로직을 더 모듈화되고 유연하게 리팩토링합니다. 추가 속성과 변형으로 Title 컴포넌트를 향상시킵니다. 더 명확하게 하기 위해 컴포넌트와 파일의 이름을 변경하고 재구성합니다.

새로운 기능:

페이지 매김된 콘텐츠를 통해 탐색을 개선하기 위해 새로운 페이지 매김 컴포넌트인 PaginationFooter를 도입합니다.

개선 사항:

더 모듈화되고 유연한 구조를 사용하도록 페이지 매김 컴포넌트를 리팩토링하여 더 쉬운 사용자 정의 및 유지보수가 가능하도록 합니다.
Title 컴포넌트를 다양한 변형과 설명과 같은 추가 속성을 지원하도록 업데이트하여 다재다능함을 향상시킵니다.

잡일:

ProjectTitle을 Title로, ProjectMainContents를 MainContents로 이름을 변경하는 등 더 명확하고 체계적인 구성을 위해 여러 컴포넌트와 파일의 이름을 변경하고 재구성합니다.

Original summary in English

## Summary by Sourcery Add a new PaginationFooter component to improve pagination navigation. Refactor the existing pagination logic to be more modular and flexible. Enhance the Title component with additional properties and variants. Rename and reorganize components and files for better clarity. New Features: - Introduce a new pagination component, PaginationFooter, to enhance navigation through paginated content. Enhancements: - Refactor the pagination component to use a more modular and flexible structure, allowing for easier customization and maintenance. - Update the Title component to support different variants and additional properties like description, improving its versatility. Chores: - Rename and restructure several components and files for better clarity and organization, such as renaming ProjectTitle to Title and ProjectMainContents to MainContents.

sourcery-ai[bot] commented 6 days ago

리뷰어 가이드 by Sourcery

이 PR은 포괄적인 페이지네이션 시스템을 구현하고 프로젝트 구조를 재조직합니다. 변경 사항에는 고급 탐색 기능을 갖춘 새로운 페이지네이션 구성 요소, 재구성된 콘텐츠 구성 요소 및 업데이트된 페이지 라우팅이 포함됩니다. 구현은 재사용 가능한 구성 요소와 훅을 통해 사용자 탐색 및 콘텐츠 조직을 개선하는 데 중점을 둡니다.

ProjectListTableItem 변경 사항에 대한 ER 다이어그램

erDiagram
    ProjectListTableItem {
        string id
        string order
        string projectName
        string fileName
        string content
        string type
        string status
        string createdAt
    }

업데이트된 페이지네이션 구성 요소에 대한 클래스 다이어그램

classDiagram
    class Pagination {
        +displayName: string
    }
    class PaginationContent {
        +displayName: string
    }
    class PaginationItem {
        +displayName: string
    }
    class PaginationLink {
        +isActive: boolean
        +size: string
        +displayName: string
    }
    class PaginationPrevious {
        +displayName: string
    }
    class PaginationNext {
        +displayName: string
    }
    class PaginationEllipsis {
        +displayName: string
    }
    class PaginationFooter {
        +currentPage: number
        +totalPages: number
        +onPageChange(page: number): void
    }
    PaginationFooter --> Pagination
    PaginationFooter --> PaginationContent
    PaginationFooter --> PaginationItem
    PaginationFooter --> PaginationLink
    PaginationFooter --> PaginationPrevious
    PaginationFooter --> PaginationNext
    PaginationFooter --> PaginationEllipsis

업데이트된 Title 및 MainContents 구성 요소에 대한 클래스 다이어그램

classDiagram
    class Title {
        +variant: string
        +type: string
        +projectTitle: string
        +title: string
        +description: string
        +onSave(): void
        +onClose(): void
        +onProjectNameChange(newName: string): void
    }
    class MainContents {
        +type: string
        +items: MainContentsItem[]
        +isAllSelected: boolean
        +showAlert: boolean
        +onCloseAlert(): void
        +onSelectAll(checked: boolean): void
        +onSelectionChange(id: string): void
        +onTextChange(id: string, newText: string): void
        +onDelete(): void
        +onAdd(newItems: TableItem[]): void
        +onRegenerateItem(id: string): void
        +onDownloadItem(id: string): void
        +onPlay(id: string): void
        +onPause(id: string): void
        +onReorder(newItems: MainContentsItem[]): void
        +currentPlayingId: string
        +itemCount: number
        +selectedItemsCount: number
        +onSearch(searchTerm: string): void
        +onFilter(): void
    }

파일 수준 변경 사항

변경 사항	세부 사항	파일
고급 탐색 기능을 갖춘 새로운 페이지네이션 시스템 구현	첫/마지막 페이지 탐색 기능을 갖춘 새로운 페이지네이션 구성 요소 생성 큰 페이지 범위에 대한 생략 부호와 함께 페이지 번호 표시 추가 이전/다음 페이지 탐색 버튼 구현 활성 및 비활성 페이지네이션 상태에 대한 스타일 추가	`src/components/ui/pagination.tsx` `src/components/section/footer/PaginationFooter.tsx`
더 나은 조직을 위한 콘텐츠 구성 요소 재구성	다양한 콘텐츠 유형을 처리하기 위한 통합 MainContents 구성 요소 생성 프로젝트 및 히스토리 콘텐츠 표시 지원 추가 프로젝트 및 최근 변형을 갖춘 Title 구성 요소 구현 테이블 선택 및 페이지네이션 기능 추가	`src/components/section/contents/MainContents.tsx` `src/components/section/contents/Title.tsx`
페이지네이션 및 테이블 선택을 위한 사용자 정의 훅 추가	페이지 상태 및 탐색 관리를 위한 usePagination 훅 생성 항목 선택 처리를 위한 useTableSelection 훅 구현 다중 페이지 선택 관리 지원 추가	`src/hooks/usePagination.ts` `src/hooks/useTableSelection.ts`
페이지 라우팅 및 레이아웃 구조 업데이트	페이지 구성 요소 이름 변경 및 재구성 일관성을 위한 경로 경로 업데이트 레이아웃에 페이지네이션 푸터 지원 추가	`src/routes/router.tsx` `src/layouts/PageLayout.tsx` `src/pages/ProjectPage.tsx` `src/pages/HistoryPage.tsx`

관련 문제일 가능성 있음

#1: PR은 문제의 페이지네이션 푸터 요구 사항과 관련된 PaginationFooter 구성 요소를 추가합니다.

팁 및 명령어

#### Sourcery와 상호작용하기 - **새 리뷰 트리거:** 풀 리퀘스트에 `@sourcery-ai review`라고 댓글을 남깁니다. - **토론 계속하기:** Sourcery의 리뷰 댓글에 직접 답장합니다. - **리뷰 댓글에서 GitHub 이슈 생성:** 리뷰 댓글에서 이슈를 생성하도록 Sourcery에 요청합니다. - **풀 리퀘스트 제목 생성:** 풀 리퀘스트 제목 어디에나 `@sourcery-ai`를 작성하여 언제든지 제목을 생성합니다. - **풀 리퀘스트 요약 생성:** 풀 리퀘스트 본문 어디에나 `@sourcery-ai summary`를 작성하여 언제든지 PR 요약을 생성합니다. 이 명령을 사용하여 요약을 삽입할 위치를 지정할 수도 있습니다. #### 경험 맞춤화 [대시보드](https://app.sourcery.ai)에 액세스하여: - Sourcery가 생성한 풀 리퀘스트 요약, 리뷰어 가이드 등과 같은 리뷰 기능을 활성화하거나 비활성화합니다. - 리뷰 언어를 변경합니다. - 사용자 정의 리뷰 지침을 추가, 제거 또는 편집합니다. - 기타 리뷰 설정을 조정합니다. #### 도움 받기 - 질문이나 피드백이 있는 경우 [지원 팀에 문의](mailto:support@sourcery.ai)하세요. - 자세한 가이드와 정보를 보려면 [문서](https://docs.sourcery.ai)를 방문하세요. - [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) 또는 [GitHub](https://github.com/sourcery-ai)에서 Sourcery 팀을 팔로우하여 소식을 받아보세요.

Original review guide in English

## Reviewer's Guide by Sourcery This PR implements a comprehensive pagination system and reorganizes the project structure. The changes include a new pagination component with advanced navigation features, restructured content components, and updated page routing. The implementation focuses on improving user navigation and content organization through reusable components and hooks. #### ER diagram for ProjectListTableItem changes ```mermaid erDiagram ProjectListTableItem { string id string order string projectName string fileName string content string type string status string createdAt } ``` #### Class diagram for updated pagination components ```mermaid classDiagram class Pagination { +displayName: string } class PaginationContent { +displayName: string } class PaginationItem { +displayName: string } class PaginationLink { +isActive: boolean +size: string +displayName: string } class PaginationPrevious { +displayName: string } class PaginationNext { +displayName: string } class PaginationEllipsis { +displayName: string } class PaginationFooter { +currentPage: number +totalPages: number +onPageChange(page: number): void } PaginationFooter --> Pagination PaginationFooter --> PaginationContent PaginationFooter --> PaginationItem PaginationFooter --> PaginationLink PaginationFooter --> PaginationPrevious PaginationFooter --> PaginationNext PaginationFooter --> PaginationEllipsis ``` #### Class diagram for updated Title and MainContents components ```mermaid classDiagram class Title { +variant: string +type: string +projectTitle: string +title: string +description: string +onSave(): void +onClose(): void +onProjectNameChange(newName: string): void } class MainContents { +type: string +items: MainContentsItem[] +isAllSelected: boolean +showAlert: boolean +onCloseAlert(): void +onSelectAll(checked: boolean): void +onSelectionChange(id: string): void +onTextChange(id: string, newText: string): void +onDelete(): void +onAdd(newItems: TableItem[]): void +onRegenerateItem(id: string): void +onDownloadItem(id: string): void +onPlay(id: string): void +onPause(id: string): void +onReorder(newItems: MainContentsItem[]): void +currentPlayingId: string +itemCount: number +selectedItemsCount: number +onSearch(searchTerm: string): void +onFilter(): void } ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Implemented a new pagination system with advanced navigation features |

Created a new pagination component with first/last page navigation
Added page number display with ellipsis for large page ranges
Implemented previous/next page navigation buttons
Added styling for active and disabled pagination states

| `src/components/ui/pagination.tsx`
`src/components/section/footer/PaginationFooter.tsx` | | Restructured content components for better organization |

Created a unified MainContents component to handle different content types
Added support for project and history content display
Implemented Title component with project and recent variants
Added table selection and pagination functionality

| `src/components/section/contents/MainContents.tsx`
`src/components/section/contents/Title.tsx` | | Added custom hooks for pagination and table selection |

Created usePagination hook for managing page state and navigation
Implemented useTableSelection hook for handling item selection
Added support for multi-page selection management

| `src/hooks/usePagination.ts`
`src/hooks/useTableSelection.ts` | | Updated page routing and layout structure |

Renamed and restructured page components
Updated route paths for consistency
Added support for pagination footer in layout

| `src/routes/router.tsx`
`src/layouts/PageLayout.tsx`
`src/pages/ProjectPage.tsx`
`src/pages/HistoryPage.tsx` | ### Possibly linked issues - **#1**: PR adds PaginationFooter component related to issue's pagination footer requirement. ---

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a title at any time. - **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

github-actions[bot] commented 6 days ago

Visit the preview URL for this PR (updated for commit bc40e0f):

https://aipark-four-t--215-z3ph86l4.web.app

_{(expires Sun, 01 Dec 2024 01:31:30 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 0a4b3ef6ecc2c695a6a0d6ade46651e032870a9f}

FC-DEV-FinalProject / final-fe-team4