From 3cd7e73839cc649ee50285cd14f74ff7b9515580 Mon Sep 17 00:00:00 2001 From: akariyan Date: Wed, 16 Feb 2022 13:18:01 +0900 Subject: [PATCH] =?UTF-8?q?feat(Feed):=20Pagination=20Component=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20-=20Common:=20paging=20model=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20-=20Feed:=20MSW=20Mock=EC=97=90=20error=20=EB=8C=80?= =?UTF-8?q?=EC=9D=91=20=EC=B6=94=EA=B0=80=20Ref=20#54?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/Pagination.tsx | 81 +++++++++++++++++++++++ components/common/index.ts | 1 + data/services/services.model.ts | 18 +++--- hooks/usePagination.tsx | 15 +++++ mocks/handlers.ts | 5 -- pages/myfeed.tsx | 106 ++++++++++++++++++++++++++++--- shared/constants/pagination.ts | 2 - 7 files changed, 204 insertions(+), 24 deletions(-) create mode 100644 components/common/Pagination.tsx create mode 100644 components/common/index.ts create mode 100644 hooks/usePagination.tsx diff --git a/components/common/Pagination.tsx b/components/common/Pagination.tsx new file mode 100644 index 0000000..cf46702 --- /dev/null +++ b/components/common/Pagination.tsx @@ -0,0 +1,81 @@ +import { styled } from '@nolmungshemung/ui-kits'; + +type PaginationProps = { + totalPages: number; + displayAmount: number; + currentPage: number; + setPage: (page: number) => void; +}; + +const StyledPageButton = styled('button', { + '&.currentPage': { + fontWeight: 'bold', + }, +}); + +export function Pagination({ + totalPages, + displayAmount, + currentPage, + setPage, +}: PaginationProps) { + const pagesStart = + Math.floor((currentPage - 1) / displayAmount) * displayAmount + 1; + + const pagesArray = () => { + if ( + Math.floor(totalPages / displayAmount) === + Math.floor((currentPage - 1) / displayAmount) + ) { + const lastArraySize = Math.floor(totalPages % displayAmount); + return [ + ...Array(lastArraySize) + .fill(0) + .map((_, i) => pagesStart + i), + ]; + } else { + return [ + ...Array(displayAmount) + .fill(0) + .map((_, i) => pagesStart + i), + ]; + } + }; + + return ( + <> + + + ); +} diff --git a/components/common/index.ts b/components/common/index.ts new file mode 100644 index 0000000..e016c96 --- /dev/null +++ b/components/common/index.ts @@ -0,0 +1 @@ +export * from './Pagination'; diff --git a/data/services/services.model.ts b/data/services/services.model.ts index 5040050..d6d2b18 100644 --- a/data/services/services.model.ts +++ b/data/services/services.model.ts @@ -18,19 +18,20 @@ export interface Contents { transitionNum: number; } -export interface MainPagingInfo { +export interface PagingInfo { isLast: boolean; start: number; + totalPages: number; } export interface MainContentsResponse { mainContentsList: Contents[]; - paging: MainPagingInfo; + paging: PagingInfo; } export interface MainWritersResponse { mainWriterList: Writer[]; - paging: MainPagingInfo; + paging: PagingInfo; } export interface ContentsSearchParams { @@ -50,20 +51,19 @@ export interface TranslatingContentsData extends Contents { contents: string; } -export interface FeedParams { - writerId: string; - count: number; +export interface PagingParams { page: number; } -export interface FeedPagingInfo extends MainPagingInfo { - totalPages: number; +export interface FeedParams extends PagingParams { + writerId: string; + count: number; } export interface FeedContentsData { writer: Writer; feedContentsList: Contents[]; - paging: FeedPagingInfo; + paging: PagingInfo; } export interface WritingContentsRequest { diff --git a/hooks/usePagination.tsx b/hooks/usePagination.tsx new file mode 100644 index 0000000..07b4755 --- /dev/null +++ b/hooks/usePagination.tsx @@ -0,0 +1,15 @@ +import { useState } from 'react'; +import { PagingParams } from '~/data/services/services.model'; + +export function usePagination(initialState: T) { + const [page, setPage] = useState(initialState); + const handleSetPage = (_page: number) => { + if (_page !== page.page) { + setPage((prev) => ({ ...prev, page: _page })); + } + }; + return { + page, + handleSetPage, + }; +} diff --git a/mocks/handlers.ts b/mocks/handlers.ts index 1a8a7e5..8b9c922 100644 --- a/mocks/handlers.ts +++ b/mocks/handlers.ts @@ -8,10 +8,6 @@ import { WriterFactory, } from './factories'; import { camelizeKeys } from 'humps'; -import { - DEFAULT_FEED_COUNT, - DEFAULT_START_PAGE, -} from '~/shared/constants/pagination'; export const handlers = [ rest.get(`${API_URL}/services/main_contents`, (req, res, ctx) => { @@ -124,7 +120,6 @@ export const handlers = [ `${API_URL}/user/name_registration`, (req: RestRequest, res, ctx) => { const userData = camelizeKeys(req.body) as UserData; - console.log(userData); if (userData.userId === '') { const errorResponse = ErrorResponseFactory.build(); diff --git a/pages/myfeed.tsx b/pages/myfeed.tsx index 5373591..ca99dde 100644 --- a/pages/myfeed.tsx +++ b/pages/myfeed.tsx @@ -1,31 +1,121 @@ +import { Box, Button } from '@nolmungshemung/ui-kits'; import { GetServerSidePropsContext, PreviewData } from 'next'; import { NextSeo } from 'next-seo'; +import Router from 'next/router'; import { ParsedUrlQuery } from 'querystring'; -import { useState } from 'react'; import { dehydrate, QueryClient } from 'react-query'; +import { Pagination } from '~/components/common'; +import Card from '~/components/Main/Card'; +import { SkeletonCard } from '~/components/Skeleton'; import { getFeedContents } from '~/data/services/services.api'; import { useFeedContents } from '~/data/services/services.hooks'; import { FeedParams } from '~/data/services/services.model'; -import { - DEFAULT_FEED_COUNT, - DEFAULT_START_PAGE, -} from '~/shared/constants/pagination'; +import { usePagination } from '~/hooks/usePagination'; +import { DEFAULT_START_PAGE } from '~/shared/constants/pagination'; interface MyFeedProps { feedParams: FeedParams; dehydratedState: any; } -const MyFeed = function ({ feedParams: initFeedParams }: MyFeedProps) { - const [feedParams, setFeedParams] = useState(initFeedParams); +const DEFAULT_SHOW_FEED_COUNT = 8; +const DEFAULT_SHOW_PAGENATION_COUNT = 10; + +const MyFeed = function ({ feedParams }: MyFeedProps) { + const { page, handleSetPage } = usePagination(feedParams); const { data, isLoading } = useFeedContents(feedParams); + const onCardClick = (contentsId: number) => { + Router.push({ + pathname: '/contents', + query: { contentsId }, + }); + }; + + const onWritingClick = () => { + Router.push({ + pathname: '/writing', + }); + }; + return ( <> + + + + {data?.data.writer.writerName ?? 'XXX'} 작가님의 피드입니다 + + + + + {isLoading ? ( + + ) : ( + data?.data.feedContentsList.map((contents) => ( + onCardClick(contents.contentsId)} + /> + )) + )} + + + + + ); }; @@ -42,7 +132,7 @@ export async function getServerSideProps( const writerId = context.query.writerId as string; const feedParams: FeedParams = { writerId: writerId, - count: DEFAULT_FEED_COUNT, + count: DEFAULT_SHOW_FEED_COUNT, page: DEFAULT_START_PAGE, }; const queryClient = new QueryClient(); diff --git a/shared/constants/pagination.ts b/shared/constants/pagination.ts index 30baa1e..5542a06 100644 --- a/shared/constants/pagination.ts +++ b/shared/constants/pagination.ts @@ -1,4 +1,2 @@ export const DEFAULT_SEARCH_RANGE = 20; -export const DEFAULT_FEED_COUNT = 8; -export const GRID_COLUMN_COUNT = 4; export const DEFAULT_START_PAGE = 1;