feat: article detail 조회 useMutation으로 변경

Author: constantly-dev

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

@@ -13,6 +13,7 @@ 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 { useGetArticleDetail } from '@shared/apis/queries';
 
 const MyBookmark = () => {
   const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all');
@@ -39,12 +40,14 @@ const MyBookmark = () => {
     1,
     10
   );
+  const { mutate: getArticleDetail, data: articleDetail } =
+    useGetArticleDetail();
 
   const articlesToDisplay =
     activeBadge === 'all' ? articles?.articles : unreadArticles?.articles;
 
   // 임시 콘솔
-  console.log('categoryArticles', categoryArticles);
+  // console.log('categoryArticles', categoryArticles);
 
   const handleBadgeClick = (badgeType: 'all' | 'notRead') => {
     setActiveBadge(badgeType);
@@ -110,7 +113,8 @@ const MyBookmark = () => {
         containerRef={containerRef}
         categoryId={menu.categoryId}
         getCategoryName={getBookmarkTitle}
-        onEdit={() => {
+        onEdit={(id) => {
+          getArticleDetail(id);
           setIsEditOpen(true);
           closeMenu();
         }}
@@ -128,7 +132,10 @@ const MyBookmark = () => {
             onClick={() => setIsEditOpen(false)}
           />
           <div className="absolute inset-0 flex items-center justify-center p-4">
-            <CardEditModal onClose={() => setIsEditOpen(false)} />
+            <CardEditModal
+              onClose={() => setIsEditOpen(false)}
+              // data={articleDetail}
+            />
           </div>
         </div>
       )}

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

@@ -9,6 +9,7 @@ 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 { useGetArticleDetail } from '@shared/apis/queries';
 
 const Remind = () => {
   const [isEditOpen, setIsEditOpen] = useState(false);
@@ -32,6 +33,7 @@ const Remind = () => {
     1,
     10
   );
+  const { mutate: getArticleDetail } = useGetArticleDetail();
 
   const handleBadgeClick = (badgeType: 'read' | 'notRead') => {
     setActiveBadge(badgeType);
@@ -85,7 +87,8 @@ const Remind = () => {
         containerRef={containerRef}
         categoryId={menu.categoryId}
         getCategoryName={getItemTitle}
-        onEdit={() => {
+        onEdit={(id) => {
+          getArticleDetail(id);
           setIsEditOpen(true);
           closeMenu();
         }}

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

@@ -1,4 +1,9 @@
-import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
+import {
+  useMutation,
+  UseMutationResult,
+  useQuery,
+  UseQueryResult,
+} from '@tanstack/react-query';
 import {
   getDashboardCategories,
   postCategory,
@@ -64,13 +69,13 @@ export const usePostSignUp = () => {
   });
 };
 
-export const useGetArticleDetail = (
-  articleId: number
-): UseQueryResult<ArticleDetailResponse, AxiosError> => {
-  return useQuery({
-    queryKey: ['articleDetail', articleId],
-    queryFn: () => getArticleDetail(articleId),
-    enabled: !!articleId,
+export const useGetArticleDetail = (): UseMutationResult<
+  ArticleDetailResponse,
+  AxiosError,
+  number
+> => {
+  return useMutation({
+    mutationFn: (articleId: number) => getArticleDetail(articleId),
   });
 };