SCRUM-210-변경된 스타 등록 로직 적용 (#33)

Author: gs0428

apps/extension/src/services/api.ts apps/extension/src/apis/api-v1.tsapps/extension/src/services/api.ts renamed to apps/extension/src/apis/api-v1.ts

@@ -2,12 +2,12 @@ import axios from "axios";
 
 const baseURL = import.meta.env.VITE_BASE_URL;
 
-export const api = axios.create({
+export const apiV1 = axios.create({
   baseURL,
   withCredentials: true,
 });
 
-api.interceptors.response.use(
+apiV1.interceptors.response.use(
   (response) => response,
   async (error) => {
     const originalRequest = error.config;
@@ -21,7 +21,7 @@ api.interceptors.response.use(
       originalRequest._retry = true;
 
       try {
-        const { data } = await api.get("/oauth/reissue", {
+        const { data } = await apiV1.get("/oauth/reissue", {
           withCredentials: true,
         });
 
@@ -33,7 +33,7 @@ api.interceptors.response.use(
           httpOnly: true,
         });
 
-        return api(originalRequest);
+        return apiV1(originalRequest);
       } catch (refreshError) {
         return Promise.reject(refreshError);
       }

apps/extension/src/apis/api-v2.ts

@@ -0,0 +1,43 @@
+import axios from "axios";
+
+const baseURL = import.meta.env.VITE_BASE_URL_V2;
+
+export const apiV2 = axios.create({
+  baseURL,
+  withCredentials: true,
+});
+
+apiV2.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    if (
+      error.response &&
+      error.response.data &&
+      error.response.data.code === "TOKEN4001" &&
+      !originalRequest._retry
+    ) {
+      originalRequest._retry = true;
+
+      try {
+        const { data } = await apiV2.get("/oauth/reissue", {
+          withCredentials: true,
+        });
+
+        await chrome.cookies.set({
+          url: baseURL,
+          name: "accessToken",
+          value: data.result.accessToken,
+          path: "/",
+          httpOnly: true,
+        });
+
+        return apiV2(originalRequest);
+      } catch (refreshError) {
+        return Promise.reject(refreshError);
+      }
+    }
+    return Promise.reject(error);
+  }
+);

apps/extension/src/models/star.ts

@@ -1,9 +1,10 @@
 export interface SummarizeStarDTO {
-  starId: string;
   title: string;
   siteUrl: string;
   thumbnailUrl: string;
+  faviconUrl: string;
   keywords: string[];
+  s3key: string;
 }
 
 export interface CompleteSummarizeStarDTO {

apps/extension/src/pages/bookmark.tsx

@@ -47,17 +47,17 @@ const Bookmark = () => {
     });
   };
 
-  // useEffect(() => {
-  //   updateCurrentTab(setCurrentTab);
-  //   chrome.tabs.onActivated.addListener(() => {
-  //     updateCurrentTab(setCurrentTab);
-  //   });
-  //   chrome.tabs.onUpdated.addListener((_, changeInfo) => {
-  //     if (changeInfo.status === "complete") {
-  //       updateCurrentTab(setCurrentTab);
-  //     }
-  //   });
-  // }, []);
+  useEffect(() => {
+    updateCurrentTab(setCurrentTab);
+    chrome.tabs.onActivated.addListener(() => {
+      updateCurrentTab(setCurrentTab);
+    });
+    chrome.tabs.onUpdated.addListener((_, changeInfo) => {
+      if (changeInfo.status === "complete") {
+        updateCurrentTab(setCurrentTab);
+      }
+    });
+  }, []);
 
   return (
     <Loading title="페이지를 요약하고 있어요!">

apps/extension/src/pages/create-bookmark.tsx

@@ -8,23 +8,30 @@ import { useCreateCategory } from "@/state/mutation/category";
 import { useCompleteCreateStar } from "@/state/mutation/star";
 import { useGetKeywords } from "@/state/query/keyword";
 import { CategoryListProps } from "@/types/category";
-import { BookmarkProps } from "@repo/types";
+import { CompleteSummarizeStarProps } from "@/types/star";
 import { Keyword, RectangleButton, Textarea } from "@repo/ui";
 
 import { Navigate, useLocation } from "react-router-dom";
 
 const DEFAULT_BOOKMARK = {
   categoryName: "",
   categories: [],
-  summary: "",
-  memo: "",
+  summaryAI: "",
+  userMemo: "",
   keyword: "",
 };
 
+interface StateProps extends CompleteSummarizeStarProps {
+  categoryName: string;
+  categories: CategoryListProps[];
+  keyword: string;
+  keywords: string[];
+}
+
 const CreateBookmark = () => {
   const { state } = useLocation();
 
-  const [bookmark, setBookmark] = useState<BookmarkProps>(Object.assign(DEFAULT_BOOKMARK, state));
+  const [bookmark, setBookmark] = useState<StateProps>(Object.assign(DEFAULT_BOOKMARK, state));
 
   const { mutateAsync } = useCompleteCreateStar();
   const { mutateAsync: mutateAsyncCategory, isPending } = useCreateCategory();
@@ -86,19 +93,13 @@ const CreateBookmark = () => {
     if (!categoryName) {
       return;
     }
+
     const body = {
-      thumbnailUrl: state.thumbnailUrl,
-      summaryAI: bookmark.summary,
-      userMemo: bookmark.memo,
-      categoryName,
+      ...bookmark,
       keywordList: bookmark.keywords,
-      faviconUrl: state.faviconUrl,
     };
 
-    await mutateAsync({
-      starId: state.starId,
-      body,
-    });
+    await mutateAsync(body);
   };
 
   return (
@@ -126,16 +127,16 @@ const CreateBookmark = () => {
         />
         <section>
           <Textarea
-            id="summary"
+            id="summaryAI"
             label="요약"
-            value={bookmark.summary}
+            value={bookmark.summaryAI}
             onChange={onChangeText}
             placeholder="북마크에 대한 요약을 작성할 수 있어요."
           />
           <Textarea
-            id="memo"
+            id="userMemo"
             label="메모"
-            value={bookmark.memo}
+            value={bookmark.userMemo}
             onChange={onChangeText}
             placeholder="북마크에 대한 메모를 작성할 수 있어요."
           />

apps/extension/src/services/category.ts

@@ -1,12 +1,12 @@
 import { BaseResponseDTO } from "@/models";
 import { CreateCategoryDTO, GetCategoryDTO } from "@/models/category";
 
-import { api } from "./api";
+import { apiV1 } from "../apis/api-v1";
 
 export const getCategories = async (): Promise<BaseResponseDTO<GetCategoryDTO>> => {
-  return (await api.get("/stars/categories")).data;
+  return (await apiV1.get("/stars/categories")).data;
 };
 
 export const createCategory = async (name: string): Promise<BaseResponseDTO<CreateCategoryDTO>> => {
-  return (await api.post("/stars/categories", { name })).data;
+  return (await apiV1.post("/stars/categories", { name })).data;
 };

apps/extension/src/services/keyword.ts

@@ -1,7 +1,7 @@
 import { BaseResponseDTO } from "@/models";
 
-import { api } from "./api";
+import { apiV1 } from "../apis/api-v1";
 
 export const getKeywords = async (): Promise<BaseResponseDTO<string[]>> => {
-  return (await api.get("/keywords")).data;
+  return (await apiV1.get("/keywords")).data;
 };

apps/extension/src/services/star.ts

@@ -2,22 +2,18 @@ import { BaseResponseDTO } from "@/models";
 import { CompleteSummarizeStarDTO, SummarizeStarDTO } from "@/models/star";
 import { CompleteSummarizeStarProps, SummarizeStarProps } from "@/types/star";
 
-import { api } from "./api";
+import { apiV2 } from "../apis/api-v2";
 
 export const createStar = async ({
   title,
   siteUrl,
   htmlFile,
 }: SummarizeStarProps): Promise<BaseResponseDTO<SummarizeStarDTO>> => {
-  return (await api.post(`/stars?title=${title}&siteUrl=${siteUrl}`, htmlFile)).data;
+  return (await apiV2.post(`/stars?title=${title}&siteUrl=${siteUrl}`, htmlFile)).data;
 };
 
-export const completeCreateStar = async ({
-  starId,
-  body,
-}: {
-  starId: string;
-  body: CompleteSummarizeStarProps;
-}): Promise<BaseResponseDTO<CompleteSummarizeStarDTO>> => {
-  return (await api.patch(`/stars/complete/${starId}`, body)).data;
+export const completeCreateStar = async (
+  body: CompleteSummarizeStarProps
+): Promise<BaseResponseDTO<CompleteSummarizeStarDTO>> => {
+  return (await apiV2.post("/stars/save", body)).data;
 };

apps/extension/src/types/star.ts

@@ -5,9 +5,13 @@ export interface SummarizeStarProps {
 }
 
 export interface CompleteSummarizeStarProps {
+  title: string;
+  siteUrl: string;
+  faviconUrl: string;
   thumbnailUrl: string;
   summaryAI: string;
   userMemo: string;
   categoryName: string;
   keywordList: string[];
+  s3key: string;
 }