feat: 유튜브 요약 API 연동

gs0428 · gs0428 · commit 90e306654697 · 2025-08-21T19:06:32.000+09:00
diff --git a/apps/extension/src/constants/content.ts b/apps/extension/src/constants/content.ts
diff --git a/apps/extension/src/lib/tanstack/mutation/content.ts b/apps/extension/src/lib/tanstack/mutation/content.ts
@@ -2,14 +2,17 @@ import { successToast } from "@/utils/toast";
 import { useMutation } from "@tanstack/react-query";
 
 import {
-  detailSaveContent,
-  finishDetailSaveContent,
-  quickSaveContent,
+  detailSaveWebContent,
+  detailSaveYoutubeContent,
+  finishDetailSaveWebContent,
+  finishDetailSaveYoutubeContent,
+  quickSaveWebContent,
+  quickSaveYoutubeContent,
 } from "../../../services/content";
 
 export const useQuickSaveContent = () => {
   return useMutation({
-    mutationFn: quickSaveContent,
+    mutationFn: quickSaveWebContent,
     onSuccess: (data) => {
       if (data.isSuccess) {
         successToast("저장에 성공했어요.");
@@ -21,9 +24,29 @@ export const useQuickSaveContent = () => {
   });
 };
 
+export const useQuickSaveYoutubeContent = () => {
+  return useMutation({
+    mutationFn: quickSaveYoutubeContent,
+    onSuccess: (data) => {
+      if (data.isSuccess) {
+        successToast("저장에 성공했어요.");
+      }
+    },
+  });
+};
+
 export const useDetailSaveContent = () => {
   return useMutation({
-    mutationFn: detailSaveContent,
+    mutationFn: detailSaveWebContent,
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+};
+
+export const useDetailSaveYoutubeContent = () => {
+  return useMutation({
+    mutationFn: detailSaveYoutubeContent,
     onError: (error) => {
       console.error(error);
     },
@@ -32,7 +55,16 @@ export const useDetailSaveContent = () => {
 
 export const useFinishDetailSaveContent = () => {
   return useMutation({
-    mutationFn: finishDetailSaveContent,
+    mutationFn: finishDetailSaveWebContent,
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+};
+
+export const useFinishDetailSaveYoutubeContent = () => {
+  return useMutation({
+    mutationFn: finishDetailSaveYoutubeContent,
     onError: (error) => {
       console.error(error);
     },
diff --git a/apps/extension/src/pages/create-content.tsx b/apps/extension/src/pages/create-content.tsx
@@ -4,7 +4,10 @@ import Logo from "@/assets/logo.svg?react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useReplaceNavigate } from "@/hooks/use-replace-navigate";
-import { useFinishDetailSaveContent } from "@/lib/tanstack/mutation/content";
+import {
+  useFinishDetailSaveContent,
+  useFinishDetailSaveYoutubeContent,
+} from "@/lib/tanstack/mutation/content";
 import { useGetCategories } from "@/lib/tanstack/query/category";
 import { contentSchema, type ContentSchemaType } from "@/schemas/content";
 import { infoToast, successToast } from "@/utils/toast";
@@ -24,7 +27,6 @@ interface CreateContentState {
   tags: string[];
   category: string;
   htmlFile: File;
-  type: string;
 }
 
 export default function CreateContent() {
@@ -41,7 +43,14 @@ export default function CreateContent() {
     setIsCategoryOpen(false);
   });
 
-  const { mutateAsync, isPending } = useFinishDetailSaveContent();
+  const {
+    mutateAsync: mutateFinishDetailSaveContent,
+    isPending: isPendingFinishDetailSaveContent,
+  } = useFinishDetailSaveContent();
+  const {
+    mutateAsync: mutateFinishDetailSaveYoutubeContent,
+    isPending: isPendingFinishDetailSaveYoutubeContent,
+  } = useFinishDetailSaveYoutubeContent();
 
   const { data: userCategories } = useGetCategories();
 
@@ -63,31 +72,53 @@ export default function CreateContent() {
   const categories = [state?.category || "", ...(userCategories || [])];
 
   const watchedTags = watch("tags");
+  const watchedCategory = watch("category");
+  const watchedThumbnail = watch("thumbnail");
+
+  const isYoutubeUrl = state.url.includes("youtube.com");
+  const isPending = isPendingFinishDetailSaveContent || isPendingFinishDetailSaveYoutubeContent;
 
   const onGoBack = () => {
     navigate("/search-content");
   };
 
   const onSave = handleSubmit(async (data) => {
-    const formData = new FormData();
-    formData.append("title", data.title);
-    formData.append("url", data.url);
-    formData.append("thumbnail", data.thumbnail || "");
-    formData.append("memo", data.memo || "");
-    formData.append("summary", data.summary || "");
-    formData.append("category", data.category);
-    for (const tag of data.tags) {
-      formData.append("tags", tag);
+    if (isYoutubeUrl) {
+      await mutateFinishDetailSaveYoutubeContent(
+        {
+          ...data,
+          memo: data.memo || "",
+          summary: data.summary || "",
+          transcript: "",
+          thumbnail: data.thumbnail || "",
+        },
+        {
+          onSuccess: () => {
+            successToast("저장에 성공했어요.");
+            navigate("/search-content");
+          },
+        }
+      );
+    } else {
+      const formData = new FormData();
+      formData.append("title", data.title);
+      formData.append("url", data.url);
+      formData.append("thumbnail", data.thumbnail || "");
+      formData.append("memo", data.memo || "");
+      formData.append("summary", data.summary || "");
+      formData.append("category", data.category);
+      for (const tag of data.tags) {
+        formData.append("tags", tag);
+      }
+      formData.append("htmlFile", htmlFile);
+
+      await mutateFinishDetailSaveContent(formData, {
+        onSuccess: () => {
+          successToast("저장에 성공했어요.");
+          navigate("/search-content");
+        },
+      });
     }
-    formData.append("htmlFile", htmlFile);
-    formData.append("type", state.type);
-
-    await mutateAsync(formData, {
-      onSuccess: () => {
-        successToast("저장에 성공했어요.");
-        navigate("/search-content");
-      },
-    });
   });
 
   const onAddTag = (e: React.FormEvent<HTMLFormElement>) => {
@@ -121,9 +152,6 @@ export default function CreateContent() {
     setIsCategoryOpen(false);
   };
 
-  const watchedCategory = watch("category");
-  const watchedThumbnail = watch("thumbnail");
-
   return (
     <>
       {/* 헤더 */}
diff --git a/apps/extension/src/pages/search-content.tsx b/apps/extension/src/pages/search-content.tsx
@@ -1,5 +1,4 @@
 import { Button } from "@/components/ui/button";
-import { CONTENT_TYPE } from "@/constants/content";
 import { useReplaceNavigate } from "@/hooks/use-replace-navigate";
 import { useTabStore } from "@/lib/zustand/tab";
 import { useUserStore } from "@/lib/zustand/user";
@@ -17,7 +16,12 @@ import {
 import { LogOut, Save, Sparkles } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
-import { useDetailSaveContent, useQuickSaveContent } from "../lib/tanstack/mutation/content";
+import {
+  useDetailSaveContent,
+  useDetailSaveYoutubeContent,
+  useQuickSaveContent,
+  useQuickSaveYoutubeContent,
+} from "../lib/tanstack/mutation/content";
 
 const getHtmlContent = async () => {
   const html = await getHtmlText();
@@ -79,61 +83,84 @@ export default function SearchContent() {
     useQuickSaveContent();
   const { mutateAsync: mutateDetailSaveContent, isPending: isPendingDetailSaveContent } =
     useDetailSaveContent();
+  const {
+    mutateAsync: mutateQuickSaveYoutubeContent,
+    isPending: isPendingQuickSaveYoutubeContent,
+  } = useQuickSaveYoutubeContent();
+  const {
+    mutateAsync: mutateDetailSaveYoutubeContent,
+    isPending: isPendingDetailSaveYoutubeContent,
+  } = useDetailSaveYoutubeContent();
 
   const saveDisabledd =
-    isFindingExistPath || isPendingQuickSaveContent || isPendingDetailSaveContent;
+    isFindingExistPath ||
+    isPendingQuickSaveContent ||
+    isPendingDetailSaveContent ||
+    isPendingQuickSaveYoutubeContent ||
+    isPendingDetailSaveYoutubeContent;
 
-  const currentContentType = currentTab.url.includes("youtube.com")
-    ? CONTENT_TYPE.YOUTUBE
-    : CONTENT_TYPE.WEB;
+  const isYoutubeUrl = currentTab.url.includes("youtube.com");
 
   const onSaveOnly = async () => {
-    const { htmlContent, thumbnail } = await getHtmlContent();
-    if (!htmlContent || !thumbnail) return;
+    if (isYoutubeUrl) {
+      await mutateQuickSaveYoutubeContent({
+        title: currentTab.title,
+        url: currentTab.url,
+      });
+    } else {
+      const { htmlContent, thumbnail } = await getHtmlContent();
+      if (!htmlContent || !thumbnail) return;
 
-    const htmlBlob = new Blob([htmlContent], { type: "text/html" });
-    const htmlFile = new File([htmlBlob], "content.html", { type: "text/html" });
+      const htmlBlob = new Blob([htmlContent], { type: "text/html" });
+      const htmlFile = new File([htmlBlob], "content.html", { type: "text/html" });
 
-    const formData = new FormData();
+      const formData = new FormData();
 
-    formData.append("htmlFile", htmlFile);
-    formData.append("title", currentTab.title);
-    formData.append("url", currentTab.url);
-    formData.append("thumbnail", thumbnail);
+      formData.append("htmlFile", htmlFile);
+      formData.append("title", currentTab.title);
+      formData.append("url", currentTab.url);
+      formData.append("thumbnail", thumbnail);
 
-    await mutateQuickSaveContent(formData);
+      await mutateQuickSaveContent(formData);
+    }
   };
 
   const onSaveWithSummary = async () => {
-    const { htmlContent, thumbnail } = await getHtmlContent();
-    if (!htmlContent || !thumbnail) return;
+    if (isYoutubeUrl) {
+      const res = await mutateDetailSaveYoutubeContent({
+        url: currentTab.url,
+      });
+      navigate("/create-content", {
+        state: {
+          ...res.result,
+          ...currentTab,
+          thumbnail: "",
+          transcript: "",
+        },
+      });
+    } else {
+      const { htmlContent, thumbnail } = await getHtmlContent();
+      if (!htmlContent || !thumbnail) return;
 
-    const htmlBlob = new Blob([htmlContent], { type: "text/html" });
-    const htmlFile = new File([htmlBlob], "content.html", { type: "text/html" });
+      const htmlBlob = new Blob([htmlContent], { type: "text/html" });
+      const htmlFile = new File([htmlBlob], "content.html", { type: "text/html" });
 
-    const formData = new FormData();
-    formData.append("htmlFile", htmlFile);
-    formData.append("type", currentContentType);
+      const formData = new FormData();
+      formData.append("htmlFile", htmlFile);
 
-    await mutateDetailSaveContent(
-      {
+      const res = await mutateDetailSaveContent({
         url: currentTab.url,
         formData,
-      },
-      {
-        onSuccess: (data) => {
-          navigate("/create-content", {
-            state: {
-              ...data.result,
-              ...currentTab,
-              thumbnail,
-              htmlFile,
-              type: currentContentType,
-            },
-          });
+      });
+      navigate("/create-content", {
+        state: {
+          ...res.result,
+          ...currentTab,
+          thumbnail,
+          htmlFile,
         },
-      }
-    );
+      });
+    }
   };
 
   return (
diff --git a/apps/extension/src/schemas/content.ts b/apps/extension/src/schemas/content.ts
@@ -3,7 +3,7 @@ import { z } from "zod";
 export const contentSchema = z.object({
   title: z.string().min(1, "제목을 입력해주세요."),
   url: z.string().min(1, "URL을 입력해주세요."),
-  thumbnail: z.string().min(1, "썸네일을 입력해주세요."),
+  thumbnail: z.string().optional(),
   category: z.string().min(1, "카테고리를 선택해주세요."),
   summary: z.string().optional(),
   memo: z.string().optional(),
diff --git a/apps/extension/src/services/content.ts b/apps/extension/src/services/content.ts
