feat: 익스텐션 이미 저장한 콘텐츠면 수정 모드 진입하도록 구현

Author: gs0428

apps/extension/src/components/layout/check-token.tsx

@@ -0,0 +1,7 @@
+import { useCheckToken } from "@/hooks/use-check-token";
+
+export default function CheckToken() {
+  useCheckToken();
+
+  return null;
+}

apps/extension/src/components/layout/index.tsx

@@ -1,18 +1,18 @@
-import { useCheckToken } from "@/hooks/use-check-token";
 import { useDetectPath } from "@/hooks/use-detect-path";
 import { queryClient } from "@/lib/tanstack";
 import { QueryClientProvider } from "@tanstack/react-query";
 
 import { Outlet } from "react-router-dom";
 
+import CheckToken from "./check-token";
 import { Toaster } from "../ui/sonner";
 
 function Layout() {
   useDetectPath();
-  useCheckToken();
 
   return (
     <QueryClientProvider client={queryClient}>
+      <CheckToken />
       <Outlet />
       <Toaster position="top-center" duration={3000} closeButton />
     </QueryClientProvider>

apps/extension/src/constants/content.ts

@@ -0,0 +1,4 @@
+export const CONTENT = {
+  GET_ALL_CONTENTS: "get-all-contents",
+  GET_CONTENT_BY_ID: "get-content-by-id",
+};

apps/extension/src/hooks/use-check-token.ts

@@ -1,12 +1,14 @@
 import { useEffect } from "react";
 
+import { useGetAllContents } from "@/lib/tanstack/mutation/content";
 import { useUserStore } from "@/lib/zustand/user";
 import { getCookie } from "@/utils/cookie";
 
 import { useReplaceNavigate } from "./use-replace-navigate";
 
 export function useCheckToken() {
-  const { isLoggedIn, setIsLoggedIn } = useUserStore();
+  const { isLoggedIn, setIsLoggedIn, setContents } = useUserStore();
+  const { mutateAsync: getAllContents } = useGetAllContents();
 
   const navigate = useReplaceNavigate();
 
@@ -19,6 +21,8 @@ export function useCheckToken() {
           return navigate("/");
         } else {
           setIsLoggedIn(true);
+          const res = await getAllContents();
+          setContents(res.result.content);
           return navigate("/search-content");
         }
       };

apps/extension/src/hooks/use-detect-path.ts

@@ -1,11 +1,21 @@
 import { useEffect } from "react";
 
 import { useTabStore } from "@/lib/zustand/tab";
+import { useUserStore } from "@/lib/zustand/user";
 import { ChromeTabChangeInfoProps } from "@/types/chrome";
 import { updateCurrentTab } from "@/utils/chrome";
 
+import { useLocation } from "react-router-dom";
+
+import { useReplaceNavigate } from "./use-replace-navigate";
+
 export function useDetectPath() {
   const { currentTab, setCurrentTab, setIsFindingExistPath } = useTabStore();
+  const { isLoggedIn, contents } = useUserStore();
+
+  const navigate = useReplaceNavigate();
+  const { pathname } = useLocation();
+  const isCreateContentPage = pathname.includes("/create-content");
 
   useEffect(() => {
     updateCurrentTab(setCurrentTab);
@@ -32,8 +42,23 @@ export function useDetectPath() {
   }, []);
 
   useEffect(() => {
+    if (isCreateContentPage) return;
+
+    if (!isLoggedIn) {
+      return navigate("/");
+    }
+
+    const findContent = contents.find(
+      (content) => decodeURI(content.url) === decodeURI(currentTab.url)
+    );
+
+    if (findContent) {
+      navigate(`/create-content?id=${findContent.id}`);
+    } else {
+      navigate("/search-content");
+    }
     setIsFindingExistPath(false);
-  }, [currentTab]);
+  }, [currentTab, contents, isLoggedIn, isCreateContentPage]);
 
   return { currentTab };
 }

apps/extension/src/lib/tanstack/mutation/content.ts

@@ -1,14 +1,16 @@
-import { successToast } from "@/utils/toast";
-import { useMutation } from "@tanstack/react-query";
-
+import { CONTENT } from "@/constants/content";
 import {
   detailSaveWebContent,
   detailSaveYoutubeContent,
   finishDetailSaveWebContent,
   finishDetailSaveYoutubeContent,
+  getAllContents,
   quickSaveWebContent,
   quickSaveYoutubeContent,
-} from "../../../services/content";
+  updateContent,
+} from "@/services/content";
+import { successToast } from "@/utils/toast";
+import { useMutation } from "@tanstack/react-query";
 
 export const useQuickSaveContent = () => {
   return useMutation({
@@ -70,3 +72,22 @@ export const useFinishDetailSaveYoutubeContent = () => {
     },
   });
 };
+
+export const useGetAllContents = () => {
+  return useMutation({
+    mutationKey: [CONTENT.GET_ALL_CONTENTS],
+    mutationFn: getAllContents,
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+};
+
+export const useUpdateContent = () => {
+  return useMutation({
+    mutationFn: updateContent,
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+};

apps/extension/src/lib/tanstack/query/content.ts

@@ -0,0 +1,11 @@
+import { CONTENT } from "@/constants/content";
+import { getContentById } from "@/services/content";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetContentById = (id: string | null) => {
+  return useQuery({
+    queryKey: [CONTENT.GET_CONTENT_BY_ID, id],
+    queryFn: async () => await getContentById(id as string),
+    enabled: !!id,
+  });
+};

apps/extension/src/lib/zustand/user.ts

@@ -1,11 +1,17 @@
+import type { CategoryContentDTO } from "@repo/types";
+
 import { create } from "zustand";
 
 interface UserStoreprops {
   isLoggedIn: boolean;
+  contents: CategoryContentDTO[];
   setIsLoggedIn: (isLoggedIn: boolean) => void;
+  setContents: (contents: CategoryContentDTO[]) => void;
 }
 
 export const useUserStore = create<UserStoreprops>((set) => ({
   isLoggedIn: false,
+  contents: [],
   setIsLoggedIn: (isLoggedIn) => set({ isLoggedIn }),
+  setContents: (contents) => set({ contents }),
 }));

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

@@ -1,22 +1,26 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import Logo from "@/assets/logo.svg?react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { CONTENT } from "@/constants/content";
 import { useReplaceNavigate } from "@/hooks/use-replace-navigate";
+import { invalidateQueries } from "@/lib/tanstack";
 import {
   useFinishDetailSaveContent,
   useFinishDetailSaveYoutubeContent,
+  useUpdateContent,
 } from "@/lib/tanstack/mutation/content";
 import { useGetCategories } from "@/lib/tanstack/query/category";
+import { useGetContentById } from "@/lib/tanstack/query/content";
 import { contentSchema, type ContentSchemaType } from "@/schemas/content";
 import { infoToast, successToast } from "@/utils/toast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useOutsideClick } from "@repo/ui/hooks/use-outside-click";
 
 import { ArrowLeft, ChevronDown, Plus, Save, X } from "lucide-react";
 import { useForm } from "react-hook-form";
-import { Navigate, useLocation } from "react-router-dom";
+import { Navigate, useLocation, useSearchParams } from "react-router-dom";
 
 interface CreateContentState {
   thumbnail: string;
@@ -29,11 +33,24 @@ interface CreateContentState {
   htmlFile: File;
 }
 
+const DEFAULT_STATE: CreateContentState = {
+  thumbnail: "",
+  title: "",
+  url: "",
+  summary: "",
+  memo: "",
+  tags: [],
+  category: "",
+  htmlFile: new File([], ""),
+};
+
 export default function CreateContent() {
   const [isCategoryOpen, setIsCategoryOpen] = useState<boolean>(false);
 
   const { state } = useLocation() as { state: CreateContentState };
-  const { htmlFile, ...restState } = state;
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get("id");
+  const { data: content, isLoading, isRefetching } = useGetContentById(id);
 
   const tagInputRef = useRef<HTMLInputElement>(null);
 
@@ -51,21 +68,47 @@ export default function CreateContent() {
     mutateAsync: mutateFinishDetailSaveYoutubeContent,
     isPending: isPendingFinishDetailSaveYoutubeContent,
   } = useFinishDetailSaveYoutubeContent();
+  const { mutateAsync: mutateUpdateContent, isPending: isPendingUpdateContent } =
+    useUpdateContent();
 
   const { data: userCategories } = useGetCategories();
 
+  const isBadRequest = !id && !state;
+
+  // 기본값을 미리 계산
+  const defaultValues = (() => {
+    if (isBadRequest || isLoading) {
+      return { ...DEFAULT_STATE, memo: "" };
+    }
+
+    if (id && !isLoading && content?.result) {
+      return content.result;
+    }
+
+    return { ...state, memo: "" };
+  })();
+
   const {
     register,
     handleSubmit,
     watch,
     setValue,
+    reset,
     formState: { errors },
   } = useForm<ContentSchemaType>({
     resolver: zodResolver(contentSchema),
-    defaultValues: { ...restState, memo: "" },
+    defaultValues,
   });
 
-  if (!state) {
+  // defaultValues가 변경될 때 폼 값 업데이트
+  useEffect(() => {
+    if (!isLoading && !isRefetching) {
+      reset(defaultValues);
+    }
+  }, [isLoading, isRefetching]);
+
+  // state가 없으면 리다이렉트
+  if (isBadRequest) {
     return <Navigate to="/bad-request" replace />;
   }
 
@@ -75,14 +118,36 @@ export default function CreateContent() {
   const watchedCategory = watch("category");
   const watchedThumbnail = watch("thumbnail");
 
-  const isYoutubeUrl = state.url.includes("youtube.com");
-  const isPending = isPendingFinishDetailSaveContent || isPendingFinishDetailSaveYoutubeContent;
+  const isYoutubeUrl = watch("url").includes("youtube.com");
+  const isPending =
+    isPendingFinishDetailSaveContent ||
+    isPendingFinishDetailSaveYoutubeContent ||
+    isPendingUpdateContent;
 
   const onGoBack = () => {
     navigate("/search-content");
   };
 
   const onSave = handleSubmit(async (data) => {
+    if (id) {
+      await mutateUpdateContent(
+        {
+          id: id as string,
+          ...data,
+          thumbnail: data.thumbnail || "",
+          summary: data.summary || "",
+          memo: data.memo || "",
+        },
+        {
+          onSuccess: () => {
+            successToast("저장에 성공했어요.");
+            navigate("/search-content");
+            invalidateQueries([CONTENT.GET_CONTENT_BY_ID, id]);
+          },
+        }
+      );
+      return;
+    }
     if (isYoutubeUrl) {
       await mutateFinishDetailSaveYoutubeContent(
         {
@@ -110,7 +175,7 @@ export default function CreateContent() {
       for (const tag of data.tags) {
         formData.append("tags", tag);
       }
-      formData.append("htmlFile", htmlFile);
+      formData.append("htmlFile", state.htmlFile);
 
       await mutateFinishDetailSaveContent(formData, {
         onSuccess: () => {

apps/extension/src/pages/search-content.tsx

@@ -76,6 +76,7 @@ function LogoutDialogContent() {
 
 export default function SearchContent() {
   const { currentTab, isFindingExistPath } = useTabStore();
+  const { contents } = useUserStore();
 
   const navigate = useNavigate();