Api(client): 아티클 읽음 상태 변경 API 연결 (#96)

* feat: card onClick interface 추가 및 연결

* feat: 아티클 읽음 상태 변경 API axios 및 query 함수 작성

* api: 아티클 읽음 상태 변경 API 연결

Author: constantly-dev

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

@@ -13,13 +13,26 @@ import { useAnchoredMenu } from '@shared/hooks/useAnchoredMenu';
 import { belowOf } from '@shared/utils/anchorPosition';
 import NoArticles from '@pages/myBookmark/components/NoArticles/NoArticles';
 import { Icon } from '@pinback/design-system/icons';
+import { useQueryClient } from '@tanstack/react-query';
+import { usePutArticleReadStatus } from '@shared/apis/queries';
 
 const MyBookmark = () => {
   const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all');
+  const [isEditOpen, setIsEditOpen] = useState(false);
+
   const [searchParams] = useSearchParams();
   const category = searchParams.get('category');
   const categoryId = searchParams.get('id');
-  const [isEditOpen, setIsEditOpen] = useState(false);
+
+  const queryClient = useQueryClient();
+  const { data: articles } = useGetBookmarkArticles(0, 20);
+  const { data: unreadArticles } = useGetBookmarkUnreadArticles(0, 20);
+  const { data: categoryArticles } = useGetCategoryBookmarkArticles(
+    categoryId,
+    1,
+    10
+  );
+  const { mutate: updateToReadStatus } = usePutArticleReadStatus();
 
   const {
     state: menu,
@@ -32,14 +45,6 @@ const MyBookmark = () => {
   const getBookmarkTitle = (id: number | null) =>
     id == null ? '' : (REMIND_MOCK_DATA.find((d) => d.id === id)?.title ?? '');
 
-  const { data: articles } = useGetBookmarkArticles(0, 20);
-  const { data: unreadArticles } = useGetBookmarkUnreadArticles(0, 20);
-  const { data: categoryArticles } = useGetCategoryBookmarkArticles(
-    categoryId,
-    1,
-    10
-  );
-
   const articlesToDisplay =
     activeBadge === 'all' ? articles?.articles : unreadArticles?.articles;
 
@@ -93,7 +98,27 @@ const MyBookmark = () => {
               content={article.memo}
               category={article.category.categoryName}
               date={new Date(article.createdAt).toLocaleDateString('ko-KR')}
-              onClick={() => {}}
+              onClick={() => {
+                window.open(article.url, '_blank');
+
+                updateToReadStatus(article.articleId, {
+                  onSuccess: () => {
+                    // TODO: 쿼리키 팩토리 패턴 적용
+                    queryClient.invalidateQueries({
+                      queryKey: ['bookmarkReadArticles'],
+                    });
+                    queryClient.invalidateQueries({
+                      queryKey: ['bookmarkUnreadArticles'],
+                    });
+                    queryClient.invalidateQueries({
+                      queryKey: ['categoryBookmarkArticles'],
+                    });
+                  },
+                  onError: (error) => {
+                    console.error(error);
+                  },
+                });
+              }}
               onOptionsClick={(e) =>
                 openMenu(article.articleId, e.currentTarget)
               }

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

@@ -9,9 +9,23 @@ import { useGetRemindArticles } from '@pages/remind/apis/queries';
 import { formatLocalDateTime } from '@shared/utils/formatDateTime';
 import NoReadArticles from '@pages/remind/components/noReadArticles/NoReadArticles';
 import NoUnreadArticles from '@pages/remind/components/noUnreadArticles/NoUnreadArticles';
+import { usePutArticleReadStatus } from '@shared/apis/queries';
+import { useQueryClient } from '@tanstack/react-query';
 
 const Remind = () => {
   const [isEditOpen, setIsEditOpen] = useState(false);
+  const [activeBadge, setActiveBadge] = useState<'read' | 'notRead'>('notRead');
+  const formattedDate = formatLocalDateTime();
+
+  const queryClient = useQueryClient();
+
+  const { mutate: updateToReadStatus } = usePutArticleReadStatus();
+  const { data } = useGetRemindArticles(
+    formattedDate,
+    activeBadge === 'read',
+    1,
+    10
+  );
 
   const {
     state: menu,
@@ -23,15 +37,6 @@ const Remind = () => {
 
   const getItemTitle = (id: number | null) =>
     id == null ? '' : (REMIND_MOCK_DATA.find((d) => d.id === id)?.title ?? '');
-  const [activeBadge, setActiveBadge] = useState<'read' | 'notRead'>('notRead');
-  const formattedDate = formatLocalDateTime();
-
-  const { data } = useGetRemindArticles(
-    formattedDate,
-    activeBadge === 'read',
-    1,
-    10
-  );
 
   const handleBadgeClick = (badgeType: 'read' | 'notRead') => {
     setActiveBadge(badgeType);
@@ -72,6 +77,20 @@ const Remind = () => {
                 onOptionsClick: (e) =>
                   openMenu(article.category.categoryId, e.currentTarget),
               })}
+              onClick={() => {
+                window.open(article.url, '_blank');
+
+                updateToReadStatus(article.articleId, {
+                  onSuccess: () => {
+                    queryClient.invalidateQueries({
+                      queryKey: ['remindArticles'],
+                    });
+                  },
+                  onError: (error) => {
+                    console.error(error);
+                  },
+                });
+              }}
             />
           ))}
         </div>

apps/client/src/shared/apis/axios.ts

@@ -39,6 +39,13 @@ export const postSignUp = async (responsedata: postSignUpRequest) => {
   return data;
 };
 
+export const putArticleReadStatus = async (articleId: number) => {
+  const { data } = await apiRequest.put(
+    `/api/v1/articles/${articleId}/readStatus`
+  );
+  return data;
+};
+
 export const deleteCategory = async (id: number) => {
   const response = await apiRequest.delete(`/api/v1/categories/${id}`);
   return response;

apps/client/src/shared/apis/queries.ts

@@ -1,15 +1,25 @@
-import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
+import {
+  useMutation,
+  UseMutationResult,
+  useQuery,
+  UseQueryResult,
+} from '@tanstack/react-query';
 import {
   deleteCategory,
   getDashboardCategories,
   postCategory,
   postSignUp,
   postSignUpRequest,
   putCategory,
+  getAcorns,
+  putArticleReadStatus,
 } from '@shared/apis/axios';
 import { AxiosError } from 'axios';
-import { DashboardCategoriesResponse, AcornsResponse } from '@shared/types/api';
-import { getAcorns } from './axios';
+import {
+  DashboardCategoriesResponse,
+  AcornsResponse,
+  ArticleReadStatusResponse,
+} from '@shared/types/api';
 
 export const useGetDashboardCategories = (): UseQueryResult<
   DashboardCategoriesResponse,
@@ -63,3 +73,13 @@ export const usePostSignUp = () => {
     },
   });
 };
+
+export const usePutArticleReadStatus = (): UseMutationResult<
+  ArticleReadStatusResponse,
+  AxiosError,
+  number
+> => {
+  return useMutation({
+    mutationFn: (articleId: number) => putArticleReadStatus(articleId),
+  });
+};

apps/client/src/shared/types/api.ts

@@ -12,3 +12,8 @@ export type AcornsResponse = {
   acornCount: number;
   remindDateTime: string;
 };
+
+export interface ArticleReadStatusResponse {
+  acornCount: number;
+  acornCollected: boolean;
+}

packages/design-system/src/components/card/BaseCard.tsx

@@ -1,10 +1,14 @@
 interface BaseCardProps {
+  onClick?: () => void;
   children: React.ReactNode;
 }
 
-const BaseCard = ({ children }: BaseCardProps) => {
+const BaseCard = ({ children, onClick }: BaseCardProps) => {
   return (
-    <div className="border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white">
+    <div
+      onClick={onClick}
+      className="border-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] border bg-white"
+    >
       {children}
     </div>
   );

packages/design-system/src/components/card/MyBookmarkCard.tsx

@@ -18,10 +18,11 @@ const MyBookmarkCard = ({
   category,
   imageUrl,
   date,
+  onClick,
   onOptionsClick,
 }: MyBookmarkCardProps) => {
   return (
-    <BaseCard>
+    <BaseCard onClick={onClick}>
       <div className="flex h-[12rem] w-full items-center justify-center overflow-hidden bg-[#F8F8FA]">
         {imageUrl ? (
           <img src={imageUrl} className="h-full w-full object-cover" />

packages/design-system/src/components/card/RemindCard.tsx

@@ -18,10 +18,11 @@ const RemindCard = ({
   category,
   imageUrl,
   timeRemaining,
+  onClick,
   onOptionsClick,
 }: RemindCardProps) => {
   return (
-    <BaseCard>
+    <BaseCard onClick={onClick}>
       <div className="bg-gray900 flex items-center gap-[0.4rem] py-[1.2rem] pl-[1.6rem] text-sm text-white">
         <Icon name="ic_clock_active" />
         <span className="body2-m text-main400 mr-[0.2rem]">