Api(client): Dashboard article 전체 조회 API 연결

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

@@ -1,44 +1,63 @@
-import { REMIND_MOCK_DATA } from "@pages/remind/constants";
-import { Badge, Card } from "@pinback/design-system/ui";
-import { useState } from "react";
+import { Badge, Card } from '@pinback/design-system/ui';
+import { useState } from 'react';
+import {
+  useGetBookmarkArticles,
+  useGetBookmarkUnreadArticles,
+} from './apis/queries';
 
 const MyBookmark = () => {
-  const [activeBadge, setActiveBadge] = useState('all');
+  const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all');
 
-  const handleBadgeClick = (badgeType: string) => {
+  const { data: readArticles } = useGetBookmarkArticles(1, 10);
+  const { data: unreadArticles } = useGetBookmarkUnreadArticles(1, 10);
+
+  const handleBadgeClick = (badgeType: 'all' | 'notRead') => {
     setActiveBadge(badgeType);
   };
 
   return (
-    <div className="flex flex-col pl-[8rem] py-[5.2rem]">
+    <div className="flex flex-col py-[5.2rem] pl-[8rem]">
       <p className="head3">나의 북마크</p>
       <div className="mt-[3rem] flex gap-[2.4rem]">
         <Badge
           text="전체보기"
-          countNum={5}
+          countNum={readArticles?.totalArticle || 0}
           onClick={() => handleBadgeClick('all')}
           isActive={activeBadge === 'all'}
         />
         <Badge
           text="안 읽음"
-          countNum={10}
+          countNum={readArticles?.totalUnreadArticle || 0}
           onClick={() => handleBadgeClick('notRead')}
           isActive={activeBadge === 'notRead'}
         />
       </div>
 
-      <div className="scrollbar-hide mt-[2.6rem] flex flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth max-w-[104rem]">
+      <div className="scrollbar-hide mt-[2.6rem] flex max-w-[104rem] flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
         {/* TODO: API 연결 후 수정 */}
-        {REMIND_MOCK_DATA.map((data) => (
-          <Card
-            key={data.id}
-            type="bookmark"
-            title={data.title}
-            content={data.content}
-            category={data.category}
-            date="2024.08.15"
-          />
-        ))}
+        {activeBadge === 'all' &&
+          readArticles?.articles.map((article) => (
+            <Card
+              key={article.articleId}
+              type="bookmark"
+              title={article.url}
+              content={article.memo}
+              // category={article.category.categoryName}
+              date={new Date(article.createdAt).toLocaleDateString('ko-KR')}
+            />
+          ))}
+
+        {activeBadge === 'notRead' &&
+          unreadArticles?.articles.map((article) => (
+            <Card
+              key={article.articleId}
+              type="bookmark"
+              title={article.url}
+              content={article.memo}
+              // category={article.}
+              date={new Date(article.createdAt).toLocaleDateString('ko-KR')}
+            />
+          ))}
       </div>
     </div>
   );

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

@@ -0,0 +1,15 @@
+import apiRequest from '@shared/apis/setting/axiosInstance';
+
+export const getBookmarkArticles = async (page: number, size: number) => {
+  const { data } = await apiRequest.get(
+    `/api/v1/articles?page=${page}&size=${size}`
+  );
+  return data.data;
+};
+
+export const getBookmarkUnreadArticles = async (page: number, size: number) => {
+  const { data } = await apiRequest.get(
+    `/api/v1/articles/unread?page=${page}&size=${size}`
+  );
+  return data.data;
+};

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

@@ -0,0 +1,27 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { getBookmarkArticles, getBookmarkUnreadArticles } from './axios';
+import {
+  BookmarkArticleResponse,
+  UnreadBookmarkArticleResponse,
+} from '@pages/myBookmark/types/api';
+
+export const useGetBookmarkArticles = (
+  page: number,
+  size: number
+): UseQueryResult<BookmarkArticleResponse, AxiosError> => {
+  return useQuery({
+    queryKey: ['bookmarkReadArticles', page, size],
+    queryFn: () => getBookmarkArticles(page, size),
+  });
+};
+
+export const useGetBookmarkUnreadArticles = (
+  page: number,
+  size: number
+): UseQueryResult<UnreadBookmarkArticleResponse, AxiosError> => {
+  return useQuery({
+    queryKey: ['bookmarkUnreadArticles', page, size],
+    queryFn: () => getBookmarkUnreadArticles(page, size),
+  });
+};

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

@@ -0,0 +1,20 @@
+interface BookmarkArticle {
+  articleId: number;
+  url: string;
+  memo: string;
+  createdAt: string;
+  isRead: boolean;
+}
+
+// 북마크 전체 조회
+export interface BookmarkArticleResponse {
+  totalArticle: number;
+  totalUnreadArticle: number;
+  articles: BookmarkArticle[];
+}
+
+// 북마크 안 읽음 조회
+export interface UnreadBookmarkArticleResponse {
+  totalUnreadArticle: number;
+  articles: BookmarkArticle[];
+}

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

@@ -1,42 +1,51 @@
 import { Badge, Card } from '@pinback/design-system/ui';
 import { useState } from 'react';
-import { REMIND_MOCK_DATA } from './constants';
+import { useGetRemindArticles } from './apis/queries';
+import { formatLocalDateTime } from '@shared/utils/formatDateTime';
 
 const Remind = () => {
   const [activeBadge, setActiveBadge] = useState('notRead');
+  const formattedDate = formatLocalDateTime();
+
+  const { data } = useGetRemindArticles(
+    formattedDate,
+    activeBadge === 'read',
+    1,
+    10
+  );
 
   const handleBadgeClick = (badgeType: string) => {
     setActiveBadge(badgeType);
   };
 
   return (
-    <div className="flex flex-col pl-[8rem] py-[5.2rem]">
+    <div className="flex flex-col py-[5.2rem] pl-[8rem]">
       <p className="head3">리마인드</p>
       <div className="mt-[3rem] flex gap-[2.4rem]">
         <Badge
           text="안 읽음"
-          countNum={5}
+          countNum={data?.unreadArticleCount || 0}
           onClick={() => handleBadgeClick('notRead')}
           isActive={activeBadge === 'notRead'}
         />
         <Badge
           text="읽음"
-          countNum={10}
+          countNum={data?.readArticleCount || 0}
           onClick={() => handleBadgeClick('read')}
           isActive={activeBadge === 'read'}
         />
       </div>
 
-      <div className="scrollbar-hide mt-[2.6rem] flex flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth max-w-[104rem]">
+      <div className="scrollbar-hide mt-[2.6rem] flex max-w-[104rem] flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
         {/* TODO: API 연결 후 수정 */}
-        {REMIND_MOCK_DATA.map((data) => (
+        {data?.articles?.map((article) => (
           <Card
-            key={data.id}
+            key={article.articleId}
             type="remind"
-            title={data.title}
-            content={data.content}
-            timeRemaining={data.timeRemaining}
-            category={data.category}
+            title={article.url}
+            content={article.memo}
+            timeRemaining={article.remindAt}
+            category={article.category.categoryName}
           />
         ))}
       </div>

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

@@ -0,0 +1,13 @@
+import apiRequest from '@shared/apis/setting/axiosInstance';
+
+export const getRemindArticles = async (
+  nowDate: string,
+  readStatus: boolean,
+  page: number,
+  size: number
+) => {
+  const { data } = await apiRequest.get(
+    `/api/v1/articles/remind?now=${nowDate}&readStatus=${readStatus}&page=${page}&size=${size}`
+  );
+  return data.data;
+};

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

@@ -0,0 +1,16 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { getRemindArticles } from './axios';
+import { ArticleListResponse } from '@pages/remind/types/api';
+
+export const useGetRemindArticles = (
+  nowDate: string,
+  readStatus: boolean,
+  page: number,
+  size: number
+): UseQueryResult<ArticleListResponse, AxiosError> => {
+  return useQuery({
+    queryKey: ['remindArticles', nowDate, readStatus, page, size],
+    queryFn: () => getRemindArticles(nowDate, readStatus, page, size),
+  });
+};

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

@@ -0,0 +1,22 @@
+// 리마인드 전체 조회
+interface Category {
+  categoryId: number;
+  categoryName: string;
+  categoryColor: string;
+}
+
+interface ArticleWithCategory {
+  articleId: number;
+  url: string;
+  memo: string;
+  createdAt: string;
+  isRead: boolean;
+  remindAt: string;
+  category: Category;
+}
+
+export interface ArticleListResponse {
+  readArticleCount: number;
+  unreadArticleCount: number;
+  articles: ArticleWithCategory[];
+}