Skip to content

Commit 261135c

Browse files
constantly-devconstantly-dev
authored
Api(client): Dashboard article 전체 조회 API 연결 (#82)
* feat: remind card 전체 조회 schema 작성 * feat: Bookmark card 전체 조회 schema 작성 * feat: remind card axios, query함수 작성 * feat: bookmark card axios, query함수 작성 * api: remind article 전체 조회 api 연결 * api: mybookmark articles 전체 조회 & unread 조회 api 연결
1 parent 1efc42f commit 261135c

File tree

8 files changed

+171
-30
lines changed

8 files changed

+171
-30
lines changed

‎apps/client/src/pages/myBookmark/MyBookmark.tsx‎

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,63 @@
1-
import { REMIND_MOCK_DATA } from "@pages/remind/constants";
2-
import { Badge, Card } from "@pinback/design-system/ui";
3-
import { useState } from "react";
1+
import { Badge, Card } from '@pinback/design-system/ui';
2+
import { useState } from 'react';
3+
import {
4+
useGetBookmarkArticles,
5+
useGetBookmarkUnreadArticles,
6+
} from './apis/queries';
47

58
const MyBookmark = () => {
6-
const [activeBadge, setActiveBadge] = useState('all');
9+
const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all');
710

8-
const handleBadgeClick = (badgeType: string) => {
11+
const { data: readArticles } = useGetBookmarkArticles(1, 10);
12+
const { data: unreadArticles } = useGetBookmarkUnreadArticles(1, 10);
13+
14+
const handleBadgeClick = (badgeType: 'all' | 'notRead') => {
915
setActiveBadge(badgeType);
1016
};
1117

1218
return (
13-
<div className="flex flex-col pl-[8rem] py-[5.2rem]">
19+
<div className="flex flex-col py-[5.2rem] pl-[8rem]">
1420
<p className="head3">나의 북마크</p>
1521
<div className="mt-[3rem] flex gap-[2.4rem]">
1622
<Badge
1723
text="전체보기"
18-
countNum={5}
24+
countNum={readArticles?.totalArticle || 0}
1925
onClick={() => handleBadgeClick('all')}
2026
isActive={activeBadge === 'all'}
2127
/>
2228
<Badge
2329
text="안 읽음"
24-
countNum={10}
30+
countNum={readArticles?.totalUnreadArticle || 0}
2531
onClick={() => handleBadgeClick('notRead')}
2632
isActive={activeBadge === 'notRead'}
2733
/>
2834
</div>
2935

30-
<div className="scrollbar-hide mt-[2.6rem] flex flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth max-w-[104rem]">
36+
<div className="scrollbar-hide mt-[2.6rem] flex max-w-[104rem] flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
3137
{/* TODO: API 연결 후 수정 */}
32-
{REMIND_MOCK_DATA.map((data) => (
33-
<Card
34-
key={data.id}
35-
type="bookmark"
36-
title={data.title}
37-
content={data.content}
38-
category={data.category}
39-
date="2024.08.15"
40-
/>
41-
))}
38+
{activeBadge === 'all' &&
39+
readArticles?.articles.map((article) => (
40+
<Card
41+
key={article.articleId}
42+
type="bookmark"
43+
title={article.url}
44+
content={article.memo}
45+
// category={article.category.categoryName}
46+
date={new Date(article.createdAt).toLocaleDateString('ko-KR')}
47+
/>
48+
))}
49+
50+
{activeBadge === 'notRead' &&
51+
unreadArticles?.articles.map((article) => (
52+
<Card
53+
key={article.articleId}
54+
type="bookmark"
55+
title={article.url}
56+
content={article.memo}
57+
// category={article.}
58+
date={new Date(article.createdAt).toLocaleDateString('ko-KR')}
59+
/>
60+
))}
4261
</div>
4362
</div>
4463
);

‎apps/client/src/pages/myBookmark/apis/axios.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import apiRequest from '@shared/apis/setting/axiosInstance';
2+
3+
export const getBookmarkArticles = async (page: number, size: number) => {
4+
const { data } = await apiRequest.get(
5+
`/api/v1/articles?page=${page}&size=${size}`
6+
);
7+
return data.data;
8+
};
9+
10+
export const getBookmarkUnreadArticles = async (page: number, size: number) => {
11+
const { data } = await apiRequest.get(
12+
`/api/v1/articles/unread?page=${page}&size=${size}`
13+
);
14+
return data.data;
15+
};

‎apps/client/src/pages/myBookmark/apis/queries.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useQuery, UseQueryResult } from '@tanstack/react-query';
2+
import { AxiosError } from 'axios';
3+
import { getBookmarkArticles, getBookmarkUnreadArticles } from './axios';
4+
import {
5+
BookmarkArticleResponse,
6+
UnreadBookmarkArticleResponse,
7+
} from '@pages/myBookmark/types/api';
8+
9+
export const useGetBookmarkArticles = (
10+
page: number,
11+
size: number
12+
): UseQueryResult<BookmarkArticleResponse, AxiosError> => {
13+
return useQuery({
14+
queryKey: ['bookmarkReadArticles', page, size],
15+
queryFn: () => getBookmarkArticles(page, size),
16+
});
17+
};
18+
19+
export const useGetBookmarkUnreadArticles = (
20+
page: number,
21+
size: number
22+
): UseQueryResult<UnreadBookmarkArticleResponse, AxiosError> => {
23+
return useQuery({
24+
queryKey: ['bookmarkUnreadArticles', page, size],
25+
queryFn: () => getBookmarkUnreadArticles(page, size),
26+
});
27+
};

‎apps/client/src/pages/myBookmark/types/api.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
interface BookmarkArticle {
2+
articleId: number;
3+
url: string;
4+
memo: string;
5+
createdAt: string;
6+
isRead: boolean;
7+
}
8+
9+
// 북마크 전체 조회
10+
export interface BookmarkArticleResponse {
11+
totalArticle: number;
12+
totalUnreadArticle: number;
13+
articles: BookmarkArticle[];
14+
}
15+
16+
// 북마크 안 읽음 조회
17+
export interface UnreadBookmarkArticleResponse {
18+
totalUnreadArticle: number;
19+
articles: BookmarkArticle[];
20+
}

‎apps/client/src/pages/remind/Remind.tsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,51 @@
11
import { Badge, Card } from '@pinback/design-system/ui';
22
import { useState } from 'react';
3-
import { REMIND_MOCK_DATA } from './constants';
3+
import { useGetRemindArticles } from './apis/queries';
4+
import { formatLocalDateTime } from '@shared/utils/formatDateTime';
45

56
const Remind = () => {
67
const [activeBadge, setActiveBadge] = useState('notRead');
8+
const formattedDate = formatLocalDateTime();
9+
10+
const { data } = useGetRemindArticles(
11+
formattedDate,
12+
activeBadge === 'read',
13+
1,
14+
10
15+
);
716

817
const handleBadgeClick = (badgeType: string) => {
918
setActiveBadge(badgeType);
1019
};
1120

1221
return (
13-
<div className="flex flex-col pl-[8rem] py-[5.2rem]">
22+
<div className="flex flex-col py-[5.2rem] pl-[8rem]">
1423
<p className="head3">리마인드</p>
1524
<div className="mt-[3rem] flex gap-[2.4rem]">
1625
<Badge
1726
text="안 읽음"
18-
countNum={5}
27+
countNum={data?.unreadArticleCount || 0}
1928
onClick={() => handleBadgeClick('notRead')}
2029
isActive={activeBadge === 'notRead'}
2130
/>
2231
<Badge
2332
text="읽음"
24-
countNum={10}
33+
countNum={data?.readArticleCount || 0}
2534
onClick={() => handleBadgeClick('read')}
2635
isActive={activeBadge === 'read'}
2736
/>
2837
</div>
2938

30-
<div className="scrollbar-hide mt-[2.6rem] flex flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth max-w-[104rem]">
39+
<div className="scrollbar-hide mt-[2.6rem] flex max-w-[104rem] flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
3140
{/* TODO: API 연결 후 수정 */}
32-
{REMIND_MOCK_DATA.map((data) => (
41+
{data?.articles?.map((article) => (
3342
<Card
34-
key={data.id}
43+
key={article.articleId}
3544
type="remind"
36-
title={data.title}
37-
content={data.content}
38-
timeRemaining={data.timeRemaining}
39-
category={data.category}
45+
title={article.url}
46+
content={article.memo}
47+
timeRemaining={article.remindAt}
48+
category={article.category.categoryName}
4049
/>
4150
))}
4251
</div>

‎apps/client/src/pages/remind/apis/axios.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import apiRequest from '@shared/apis/setting/axiosInstance';
2+
3+
export const getRemindArticles = async (
4+
nowDate: string,
5+
readStatus: boolean,
6+
page: number,
7+
size: number
8+
) => {
9+
const { data } = await apiRequest.get(
10+
`/api/v1/articles/remind?now=${nowDate}&readStatus=${readStatus}&page=${page}&size=${size}`
11+
);
12+
return data.data;
13+
};

‎apps/client/src/pages/remind/apis/queries.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { useQuery, UseQueryResult } from '@tanstack/react-query';
2+
import { AxiosError } from 'axios';
3+
import { getRemindArticles } from './axios';
4+
import { ArticleListResponse } from '@pages/remind/types/api';
5+
6+
export const useGetRemindArticles = (
7+
nowDate: string,
8+
readStatus: boolean,
9+
page: number,
10+
size: number
11+
): UseQueryResult<ArticleListResponse, AxiosError> => {
12+
return useQuery({
13+
queryKey: ['remindArticles', nowDate, readStatus, page, size],
14+
queryFn: () => getRemindArticles(nowDate, readStatus, page, size),
15+
});
16+
};

‎apps/client/src/pages/remind/types/api.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// 리마인드 전체 조회
2+
interface Category {
3+
categoryId: number;
4+
categoryName: string;
5+
categoryColor: string;
6+
}
7+
8+
interface ArticleWithCategory {
9+
articleId: number;
10+
url: string;
11+
memo: string;
12+
createdAt: string;
13+
isRead: boolean;
14+
remindAt: string;
15+
category: Category;
16+
}
17+
18+
export interface ArticleListResponse {
19+
readArticleCount: number;
20+
unreadArticleCount: number;
21+
articles: ArticleWithCategory[];
22+
}

0 commit comments

Comments
 (0)