Skip to content
This repository has been archived by the owner on Jul 29, 2024. It is now read-only.

[FE] fix: HomeTable 페이지 인덱스 이슈 수정 #461

Merged
merged 2 commits into from
Sep 21, 2023
Merged

[FE] fix: HomeTable 페이지 인덱스 이슈 수정 #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c66eae
fix: `HomeTable` 페이지 인덱스 이슈 수정
jeonjeunghoon Sep 21, 2023
7dcff89
feat: 글 없을 경우 메시지 렌더링
jeonjeunghoon Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions frontend/src/components/@common/Pagination/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ type Props = {
};

const Pagination = ({ pageLength, activePage, changeActivePage }: Props) => {
const isShowPrevious = activePage > 1;
const isShowNext = activePage < pageLength;
const isShowPrevious = activePage > 0;
const isShowNext = activePage < pageLength - 1;

// 시작 페이지와 끝 페이지의 범위를 설정해주는 함수
const setPageRange = () => {
const isBetween1and4 = activePage < 5;
const isNearLast4Pages = activePage >= pageLength - 4;
const isBetween1and4 = activePage < 4;
const isNearLast4Pages = activePage >= pageLength - 5;

if (isBetween1and4) return [1, Math.min(9, pageLength)];
if (isBetween1and4) return [0, Math.min(8, pageLength - 1)];

if (isNearLast4Pages) return [Math.max(pageLength - 8, 1), pageLength];
if (isNearLast4Pages) return [Math.max(pageLength - 9, 0), pageLength - 1];

return [activePage - 4, activePage + 4];
};
Expand All @@ -38,7 +38,7 @@ const Pagination = ({ pageLength, activePage, changeActivePage }: Props) => {
$isActive={pageIndex === activePage}
onClick={() => changeActivePage(pageIndex)}
>
{pageIndex}
{pageIndex + 1}
</S.PageButton>
</li>
);
Expand Down
8 changes: 6 additions & 2 deletions frontend/src/components/HomeTable/HomeTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ type Props = {
initialPageIndex?: number;
};

const HomeTable = ({ initialPageIndex = 1 }: Props) => {
const HomeTable = ({ initialPageIndex = 0 }: Props) => {
const { content, totalPages, rowRef, activePage, changeActivePage } =
useHomeTable(initialPageIndex);
const { goWritingPage } = usePageNavigate();

if (!content || !totalPages) return null;
if (!content || !totalPages) return <S.AddWritingText>글을 추가해 주세요😊</S.AddWritingText>;

return (
<S.Container>
Expand Down Expand Up @@ -86,6 +86,10 @@ const S = {
gap: 50px;
`,

AddWritingText: styled.p`
font-size: 1.5rem;
`,

HomeTable: styled.table`
width: 100%;
text-align: left;
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/HomeTable/useHomeTable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ import { GetHomeWritingsResponse } from 'types/apis/writings';

export const useHomeTable = (initialPageIndex: number) => {
const [activePage, setActivePage] = useState(initialPageIndex);
const [fetchOption, setFetchOption] = useState(`?page=${activePage}&sort=createAt,desc`);
const [fetchOption, setFetchOption] = useState(`?page=${activePage}`);
const { data } = useQuery<GetHomeWritingsResponse>(['homeWritings', fetchOption], () =>
getHomeWritings(fetchOption),
);
const rowRef = useRef<HTMLTableRowElement>(null);

const changeActivePage = (pageIndex: number) => {
setFetchOption(`?page=${pageIndex}&sort=createAt,desc`);
setFetchOption(`?page=${pageIndex}`);
setActivePage(pageIndex);
};

Expand Down
152 changes: 151 additions & 1 deletion frontend/src/mocks/homeWritingMock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,156 @@ export const getHomeWritingMock = (): GetHomeWritingsResponse => {
},
],
},
{
id: 2,
title: '제목2',
category: {
id: 3,
categoryName: '기본',
},
createdAt: new Date('2023-07-11T06:55:46.922Z'),
publishedDetails: [
{
blogName: 'MEDIUM',
publishedAt: new Date('2023-07-11T06:55:46.922Z'),
},
],
},
{
id: 2,
title: '제목2',
category: {
id: 3,
categoryName: '기본',
},
createdAt: new Date('2023-07-11T06:55:46.922Z'),
publishedDetails: [
{
blogName: 'MEDIUM',
publishedAt: new Date('2023-07-11T06:55:46.922Z'),
},
],
},
{
id: 1,
title: '제목1',
category: {
id: 3,
categoryName: '기본',
},
createdAt: new Date('2023-07-11T06:55:46.922Z'),
publishedDetails: [
{
blogName: 'MEDIUM',
publishedAt: new Date('2023-07-11T06:55:46.922Z'),
},
],
},
{
id: 2,
title: '제목2',
category: {
id: 3,
categoryName: '기본',
},
createdAt: new Date('2023-07-11T06:55:46.922Z'),
publishedDetails: [
{
blogName: 'MEDIUM',
publishedAt: new Date('2023-07-11T06:55:46.922Z'),
},
],
},
{
id: 2,
title: '제목2',
category: {
id: 3,
categoryName: '기본',
},
createdAt: new Date('2023-07-11T06:55:46.922Z'),
publishedDetails: [
{
blogName: 'MEDIUM',
publishedAt: new Date('2023-07-11T06:55:46.922Z'),
},
],
},
{
id: 2,
title: '제목2',
category: {
id: 3,
categoryName: '기본',
},
createdAt: new Date('2023-07-11T06:55:46.922Z'),
publishedDetails: [
{
blogName: 'MEDIUM',
publishedAt: new Date('2023-07-11T06:55:46.922Z'),
},
],
},
{
id: 1,
title: '제목1',
category: {
id: 3,
categoryName: '기본',
},
createdAt: new Date('2023-07-11T06:55:46.922Z'),
publishedDetails: [
{
blogName: 'MEDIUM',
publishedAt: new Date('2023-07-11T06:55:46.922Z'),
},
],
},
{
id: 2,
title: '제목2',
category: {
id: 3,
categoryName: '기본',
},
createdAt: new Date('2023-07-11T06:55:46.922Z'),
publishedDetails: [
{
blogName: 'MEDIUM',
publishedAt: new Date('2023-07-11T06:55:46.922Z'),
},
],
},
{
id: 2,
title: '제목2',
category: {
id: 3,
categoryName: '기본',
},
createdAt: new Date('2023-07-11T06:55:46.922Z'),
publishedDetails: [
{
blogName: 'MEDIUM',
publishedAt: new Date('2023-07-11T06:55:46.922Z'),
},
],
},
{
id: 2,
title: '제목2',
category: {
id: 3,
categoryName: '기본',
},
createdAt: new Date('2023-07-11T06:55:46.922Z'),
publishedDetails: [
{
blogName: 'MEDIUM',
publishedAt: new Date('2023-07-11T06:55:46.922Z'),
},
],
},
],
pageable: {
sort: {
Expand All @@ -46,7 +196,7 @@ export const getHomeWritingMock = (): GetHomeWritingsResponse => {
paged: true,
unpaged: false,
},
totalPages: 1,
totalPages: 20,
totalElements: 20,
last: true,
size: 20,
Expand Down
Loading