Api(client): 아티클 수정 API 연결 (#97)

* feat: 아티클 수정 api axios, query 함수 작성

* feat: 아티클 상세 조회 api axios, query 함수 작성

* feat: article detail 조회 useMutation으로 변경

* fix: read status 바뀐 naming 반영

* feat: tsconfig lib 추가

* feat: og meta data fetch utils & hook 구현

* feat: update date, time utils 추가

* feat: 아티클 수정용 조회 api 연결

* feat: ogimage object cover 추가

* feat: 카테고리 조회 API 연결

* api: 아티클 수정 api 연결

* feat: 카테고리 수정 invalidate query 추가

Author: constantly-dev

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

@@ -14,7 +14,10 @@ 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';
+import {
+  useGetArticleDetail,
+  usePutArticleReadStatus,
+} from '@shared/apis/queries';
 
 const MyBookmark = () => {
   const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all');
@@ -29,9 +32,13 @@ const MyBookmark = () => {
   const { data: unreadArticles } = useGetBookmarkUnreadArticles(0, 20);
   const { data: categoryArticles } = useGetCategoryBookmarkArticles(
     categoryId,
+    activeBadge === 'all',
     1,
     10
   );
+  const { mutate: getArticleDetail, data: articleDetail } =
+    useGetArticleDetail();
+
   const { mutate: updateToReadStatus } = usePutArticleReadStatus();
 
   const {
@@ -119,9 +126,10 @@ const MyBookmark = () => {
                   },
                 });
               }}
-              onOptionsClick={(e) =>
-                openMenu(article.articleId, e.currentTarget)
-              }
+              onOptionsClick={(e) => {
+                e.stopPropagation();
+                openMenu(article.articleId, e.currentTarget);
+              }}
             />
           ))}
         </div>
@@ -135,7 +143,8 @@ const MyBookmark = () => {
         containerRef={containerRef}
         categoryId={menu.categoryId}
         getCategoryName={getBookmarkTitle}
-        onEdit={() => {
+        onEdit={(id) => {
+          getArticleDetail(id);
           setIsEditOpen(true);
           closeMenu();
         }}
@@ -153,7 +162,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)}
+              prevData={articleDetail}
+            />
           </div>
         </div>
       )}

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

@@ -16,11 +16,12 @@ export const getBookmarkUnreadArticles = async (page: number, size: number) => {
 
 export const getCategoryBookmarkArticles = async (
   categoryId: string | null,
+  readStatus: boolean,
   page: number,
   size: number
 ) => {
   const { data } = await apiRequest.get(
-    `/api/v1/articles/category?categoryId=${categoryId}&page=${page}&size=${size}`
+    `/api/v1/articles/category?categoryId=${categoryId}&read-status=${readStatus}&page=${page}&size=${size}`
   );
   return data.data;
 };

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

@@ -33,12 +33,14 @@ export const useGetBookmarkUnreadArticles = (
 
 export const useGetCategoryBookmarkArticles = (
   categoryId: string | null,
+  readStatus: boolean,
   page: number,
   size: number
 ): UseQueryResult<CategoryBookmarkArticleResponse, AxiosError> => {
   return useQuery({
     queryKey: ['categoryBookmarkArticles', categoryId, page, size],
-    queryFn: () => getCategoryBookmarkArticles(categoryId, page, size),
+    queryFn: () =>
+      getCategoryBookmarkArticles(categoryId, readStatus, page, size),
     enabled: !!categoryId,
   });
 };

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

@@ -9,7 +9,10 @@ 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 {
+  usePutArticleReadStatus,
+  useGetArticleDetail,
+} from '@shared/apis/queries';
 import { useQueryClient } from '@tanstack/react-query';
 
 const Remind = () => {
@@ -37,6 +40,8 @@ const Remind = () => {
 
   const getItemTitle = (id: number | null) =>
     id == null ? '' : (REMIND_MOCK_DATA.find((d) => d.id === id)?.title ?? '');
+  const { mutate: getArticleDetail, data: articleDetail } =
+    useGetArticleDetail();
 
   const handleBadgeClick = (badgeType: 'read' | 'notRead') => {
     setActiveBadge(badgeType);
@@ -104,7 +109,8 @@ const Remind = () => {
         containerRef={containerRef}
         categoryId={menu.categoryId}
         getCategoryName={getItemTitle}
-        onEdit={() => {
+        onEdit={(id) => {
+          getArticleDetail(id);
           setIsEditOpen(true);
           closeMenu();
         }}
@@ -122,7 +128,10 @@ const Remind = () => {
             onClick={() => setIsEditOpen(false)}
           />
           <div className="absolute inset-0 flex items-center justify-center p-4">
-            <CardEditModal onClose={() => setIsEditOpen(false)} />
+            <CardEditModal
+              onClose={() => setIsEditOpen(false)}
+              prevData={articleDetail}
+            />
           </div>
         </div>
       )}

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

@@ -1,4 +1,5 @@
 import apiRequest from '@shared/apis/setting/axiosInstance';
+import { EditArticleRequest } from '@shared/types/api';
 import { formatLocalDateTime } from '@shared/utils/formatDateTime';
 
 export const getDashboardCategories = async () => {
@@ -46,6 +47,21 @@ export const putArticleReadStatus = async (articleId: number) => {
   return data;
 };
 
+export const getArticleDetail = async (articleId: number) => {
+  const { data } = await apiRequest.get(`/api/v1/articles/${articleId}`);
+  return data.data;
+};
+
+export const putEditArticle = async (
+  articleId: number,
+  editArticleData: EditArticleRequest
+) => {
+  const response = await apiRequest.put(`/api/v1/articles/${articleId}`, {
+    ...editArticleData,
+  });
+  return response;
+};
+
 export const deleteCategory = async (id: number) => {
   const response = await apiRequest.delete(`/api/v1/categories/${id}`);
   return response;

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

@@ -10,15 +10,19 @@ import {
   postCategory,
   postSignUp,
   postSignUpRequest,
+  putEditArticle,
   putCategory,
-  getAcorns,
   putArticleReadStatus,
+  getArticleDetail,
+  getAcorns,
 } from '@shared/apis/axios';
 import { AxiosError } from 'axios';
 import {
   DashboardCategoriesResponse,
   AcornsResponse,
+  EditArticleRequest,
   ArticleReadStatusResponse,
+  ArticleDetailResponse,
 } from '@shared/types/api';
 
 export const useGetDashboardCategories = (): UseQueryResult<
@@ -83,3 +87,25 @@ export const usePutArticleReadStatus = (): UseMutationResult<
     mutationFn: (articleId: number) => putArticleReadStatus(articleId),
   });
 };
+
+export const useGetArticleDetail = (): UseMutationResult<
+  ArticleDetailResponse,
+  AxiosError,
+  number
+> => {
+  return useMutation({
+    mutationFn: (articleId: number) => getArticleDetail(articleId),
+  });
+};
+
+export const usePutEditArticle = () => {
+  return useMutation({
+    mutationFn: ({
+      articleId,
+      editArticleData,
+    }: {
+      articleId: number;
+      editArticleData: EditArticleRequest;
+    }) => putEditArticle(articleId, editArticleData),
+  });
+};

apps/client/src/shared/components/cardEditModal/CardEditModal.tsx

@@ -13,22 +13,38 @@ import {
   validateTime,
 } from '@pinback/design-system/ui';
 import { cn } from '@pinback/design-system/utils';
-import { useState } from 'react';
+import {
+  useGetDashboardCategories,
+  usePutEditArticle,
+} from '@shared/apis/queries';
+import { usePageMeta } from '@shared/hooks/usePageMeta';
+import { ArticleDetailResponse, EditArticleRequest } from '@shared/types/api';
+import { updateDate, updateTime } from '@shared/utils/formatDateTime';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 
 export interface CardEditModalProps {
   onClose: () => void;
+  prevData: ArticleDetailResponse | undefined;
 }
 
-export default function CardEditModal({ onClose }: CardEditModalProps) {
-  const [isRemindOn, setIsRemindOn] = useState(true);
-  const [selected, setSelected] = useState<string | null>(null);
+export default function CardEditModal({
+  onClose,
+  prevData,
+}: CardEditModalProps) {
+  const { meta } = usePageMeta(
+    'https://www.notion.so/PinBack-23927450eb1c8080a5a1f84a9d483aa9'
+  );
+  const { data: category } = useGetDashboardCategories();
+  const { mutate: editArticle } = usePutEditArticle();
+  const queryClient = useQueryClient();
+
+  const [isRemindOn, setIsRemindOn] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [isPopupOpen, setIsPopupOpen] = useState(false);
 
   // 입력 필드 상태: 서버에서 받아올 데이터
-  const [title] = useState('');
-  const [source] = useState('');
   const [memo, setMemo] = useState('');
-  const [categories] = useState<string[]>([]);
   const [categoryTitle, setCategoryTitle] = useState('');
   const [date, setDate] = useState('');
   const [time, setTime] = useState('');
@@ -62,6 +78,64 @@ export default function CardEditModal({ onClose }: CardEditModalProps) {
     setIsRemindOn(checked);
   };
 
+  const saveData = () => {
+    if (!prevData?.id) {
+      console.error('Article ID is missing, cannot save.');
+      setToastIsOpen(true);
+      return;
+    }
+
+    const editArticleData: EditArticleRequest = {
+      memo,
+      categoryId:
+        category?.categories.find((cat) => cat.name === selectedCategory)?.id ||
+        -1,
+      now: new Date().toISOString(),
+      remindTime: isRemindOn ? `${date}T${time}` : null,
+    };
+
+    editArticle(
+      {
+        articleId: prevData?.id,
+        editArticleData,
+      },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({
+            queryKey: ['remindArticles'],
+          });
+          queryClient.invalidateQueries({
+            queryKey: ['bookmarkReadArticles'],
+          });
+          queryClient.invalidateQueries({
+            queryKey: ['bookmarkUnreadArticles'],
+          });
+          queryClient.invalidateQueries({
+            queryKey: ['categoryBookmarkArticles'],
+          });
+          onClose();
+        },
+        onError: () => {
+          setToastIsOpen(true);
+        },
+      }
+    );
+  };
+
+  useEffect(() => {
+    if (prevData) {
+      setMemo(prevData.memo || '');
+      setSelectedCategory(prevData.categoryResponse.categoryName || null);
+
+      if (prevData.remindAt) {
+        const [rawDate, rawTime] = prevData.remindAt.split('T');
+        setDate(updateDate(rawDate));
+        setTime(updateTime(rawTime));
+        setIsRemindOn(true);
+      }
+    }
+  }, [prevData]);
+
   return (
     <div className="flex flex-col">
       <div
@@ -101,16 +175,21 @@ export default function CardEditModal({ onClose }: CardEditModalProps) {
           </button>
         </header>
 
-        <InfoBox title={title} source={source} />
+        <InfoBox
+          title={meta.title}
+          source={meta.description}
+          imgUrl={meta.imgUrl}
+        />
 
         <section className="flex flex-col gap-[0.8rem]">
           <p className="caption1-sb text-font-black-1">카테고리</p>
           <Dropdown
-            options={categories}
-            selectedValue={selected}
-            onChange={(value) => setSelected(value)}
+            options={
+              category?.categories.map((category) => category.name) || []
+            }
+            selectedValue={selectedCategory}
+            onChange={(value) => setSelectedCategory(value)}
             placeholder="선택해주세요"
-            onAddItem={() => setIsPopupOpen(true)}
             addItemLabel="추가하기"
           />
         </section>
@@ -151,7 +230,7 @@ export default function CardEditModal({ onClose }: CardEditModalProps) {
           {timeError && <p className="body3-r text-error">{timeError}</p>}
         </section>
         {/* TODO: onClick 추후  저장 api 연결후 실패/성공 연결 */}
-        <Button onClick={() => setToastIsOpen(true)}>저장하기</Button>
+        <Button onClick={saveData}>저장하기</Button>
       </div>
       {toastIsOpen && (
         <div className="absolute bottom-[2.4rem] left-1/2 -translate-x-1/2">