Fix(estension): extension api v3 update및 edit error 해결 (#302)

* Feat: check_circle 및 notsave_circle 아이콘 추가

* Feat: Toast 컴포넌트에 아이콘 추가 및 props 수정

* Feat: 아티클 상세 조회 기능 추가 및 MainPop 컴포넌트 수정

* chore: console.log 제거

* chore: 주석제거

* Feat: MainPop에서 아티클 저장 후 토스트 반영후에 창 닫기 기능 추가

* feat: 위치 디테일 수정

Author: jjangminii

apps/extension/src/App.tsx

@@ -1,13 +1,16 @@
+import { useGetArticleDetail, useGetArticleSaved } from '@apis/query/queries';
+import { useEffect, useState } from 'react';
 import './App.css';
-import DuplicatePop from './pages/DuplicatePop';
-import MainPop from './pages/MainPop';
-import { useState, useEffect } from 'react';
-import { useGetArticleSaved } from '@apis/query/queries';
 import { usePageMeta } from './hooks/usePageMeta';
+import DuplicatePop from './pages/DuplicatePop';
 import LogOutPop from './pages/LogOutPop';
+import MainPop from './pages/MainPop';
+
 const App = () => {
   const { url } = usePageMeta();
-  const { data: isSaved } = useGetArticleSaved(url);
+  const { data: savedArticle } = useGetArticleSaved(url);
+  const articleId = savedArticle?.data?.id;
+  const { data: articleDetail } = useGetArticleDetail(articleId!);
 
   const [isDuplicatePop, setIsDuplicatePop] = useState(false);
   const [mainPopType, setMainPopType] = useState<'add' | 'edit'>('add');
@@ -18,11 +21,13 @@ const App = () => {
       setIsToken(!!result.token);
     });
   }, []);
+
+  // 이미 저장된 아티클이면 DuplicatePop 표시
   useEffect(() => {
-    if (isSaved?.data) {
+    if (savedArticle?.data) {
       setIsDuplicatePop(true);
     }
-  }, [isSaved]);
+  }, [savedArticle]);
 
   const handleDuplicateLeftClick = () => {
     setIsDuplicatePop(false);
@@ -42,7 +47,7 @@ const App = () => {
             onRightClick={handleDuplicateRightClick}
           />
         ) : (
-          <MainPop type={mainPopType} />
+          <MainPop type={mainPopType} savedData={articleDetail} />
         )
       ) : (
         <LogOutPop />

apps/extension/src/apis/axios.ts

@@ -65,6 +65,13 @@ export const putArticle = async (
   articleId: number,
   data: PutArticleRequest
 ) => {
-  const response = await apiRequest.put(`/api/v1/articles/${articleId}`, data);
-  return response.data;
+  const response = await apiRequest.put(`/api/v1/articles/${articleId}`, {
+    ...data,
+  });
+  return response;
+};
+
+export const getArticleDetail = async (articleId: number) => {
+  const response = await apiRequest.get(`/api/v3/articles/${articleId}`);
+  return response.data.data;
 };

apps/extension/src/apis/query/queries.ts

@@ -1,4 +1,5 @@
 import {
+  getArticleDetail,
   getArticleSaved,
   getCategoriesExtension,
   getRemindTime,
@@ -61,3 +62,11 @@ export const usePutArticle = () => {
     }) => putArticle(articleId, data),
   });
 };
+
+export const useGetArticleDetail = (articleId?: number) => {
+  return useQuery({
+    queryKey: ['articleDetail', articleId],
+    queryFn: () => getArticleDetail(articleId!),
+    enabled: !!articleId,
+  });
+};

apps/extension/src/pages/MainPop.tsx

@@ -8,6 +8,7 @@ import thumbImg from '@assets/extension_thumb.svg';
 import { useCategoryManager } from '@hooks/useCategoryManager';
 import { usePageMeta } from '@hooks/usePageMeta';
 import { useSaveBookmark } from '@hooks/useSaveBookmarks';
+import { Icon } from '@pinback/design-system/icons';
 import {
   AutoDismissToast,
   Button,
@@ -111,7 +112,7 @@ const MainPop = ({ type, savedData }: MainPopProps) => {
       categoryData?.data?.categories?.length
     ) {
       setMemo(savedData.memo ?? '');
-      setIsArticleId(savedData.id ?? 0);
+      setIsArticleId(savedData.articleId ?? 0);
 
       if (savedData.remindAt) {
         const [rawDate, rawTime] = savedData.remindAt.split('T');
@@ -121,9 +122,10 @@ const MainPop = ({ type, savedData }: MainPopProps) => {
       } else {
         setIsRemindOn(false);
       }
+
       if (savedData.categoryResponse) {
-        setSelected(savedData.categoryResponse?.categoryId.toString());
-        setSelectedCategoryName(savedData.categoryResponse?.categoryName);
+        setSelected(savedData.categoryResponse.categoryId.toString());
+        setSelectedCategoryName(savedData.categoryResponse.categoryName);
       }
     }
   }, [type, savedData, categoryData?.data?.categories?.length]);
@@ -243,7 +245,9 @@ const MainPop = ({ type, savedData }: MainPopProps) => {
         },
         {
           onSuccess: () => {
-            window.close();
+            setTimeout(() => {
+              window.close();
+            }, 2000);
           },
         }
       );
@@ -254,13 +258,15 @@ const MainPop = ({ type, savedData }: MainPopProps) => {
     <div className="App">
       <div className="relative flex h-[56.8rem] w-[31.2rem] items-center justify-center">
         {toastIsOpen && (
-          <div className="absolute bottom-[5rem] left-1/2 -translate-x-1/2">
+          <div className="absolute bottom-[8rem] left-1/2 -translate-x-1/2">
             <AutoDismissToast
               duration={1000}
               fadeMs={1000}
               onClose={() => setToastIsOpen(false)}
             >
-              <Toast text={`수정내용을 저장했어요`} />
+              <Toast text={`수정내용을 저장했어요`}>
+                <Icon name="check_circle" size={20} />
+              </Toast>
             </AutoDismissToast>
           </div>
         )}

apps/extension/src/types/types.ts

@@ -6,15 +6,16 @@ export interface CategoryResponse {
 
 export interface ArticleResponse {
   id: number;
+  articleId: number;
   url: string;
   memo: string;
-  remindAt: string | null;  
+  remindAt: string | null;
   categoryResponse: CategoryResponse;
-  createdAt: string;       
+  createdAt: string;
 }
 
 export interface Category {
-    categoryId: number;
-    categoryName: string;
-    categoryColor:string;
-  }
+  categoryId: number;
+  categoryName: string;
+  categoryColor: string;
+}

packages/design-system/src/components/toast/Toast.tsx

@@ -1,10 +1,11 @@
 import { cn } from '../../lib/utils';
 
 export interface ToastProps {
-  text: string;
+  text?: string;
+  children?: React.ReactNode;
 }
 
-export default function Toast({ text }: ToastProps) {
+export default function Toast({ text, children }: ToastProps) {
   return (
     <div
       role="alert"
@@ -15,7 +16,10 @@ export default function Toast({ text }: ToastProps) {
         'common-shadow'
       )}
     >
-      <p className="caption2-sb whitespace-pre-line">{text}</p>
+      <div className="flex items-center gap-[0.4rem]">
+        {children}
+        {text && <p className="caption2-sb whitespace-nowrap">{text}</p>}
+      </div>
     </div>
   );
 }

packages/design-system/src/icons/iconNames.ts

@@ -1,5 +1,6 @@
 // 이 파일은 자동 생성 파일입니다. (직접 수정 금지)
 export const iconNames = [
+  'check_circle',
   'chippi_profile',
   'dotori',
   'ext_home1',
@@ -28,6 +29,7 @@ export const iconNames = [
   'logout_chippi.2512',
   'main_header_logo',
   'main_logo',
+  'notsave_circle',
   'palms',
   'saved',
   'tooltip_1',