fix: resolve infinite loop in useScheme and dependency warning

Author: Minseo Kim

src/hooks/useScheme.ts

@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { getCookie, setCookie } from "cookies-next"
-import { useEffect } from "react"
+import { useEffect, useCallback } from "react"
 import { CONFIG } from "site.config"
 import { queryKey } from "src/constants/queryKey"
 import { SchemeType } from "src/types"
@@ -19,11 +19,13 @@ const useScheme = (): [SchemeType, SetScheme] => {
       : (CONFIG.blog.scheme as SchemeType),
   })
 
-  const setScheme = (scheme: SchemeType) => {
-    setCookie("scheme", scheme)
-
-    queryClient.setQueryData(queryKey.scheme(), scheme)
-  }
+  const setScheme = useCallback(
+    (scheme: SchemeType) => {
+      setCookie("scheme", scheme)
+      queryClient.setQueryData(queryKey.scheme(), scheme)
+    },
+    [queryClient]
+  )
 
   useEffect(() => {
     if (!window) return

src/routes/Detail/PageDetail/index.tsx

@@ -17,7 +17,7 @@ const PageDetail: React.FC<Props> = () => {
       .replace(/^Daily\s*$/m, "")
       .replace(/^\[View Resume\]\(.*\)$/m, "")
       .trim()
-  }, [data?.content, data?.slug])
+  }, [data])
 
   if (!data) return null
 
@@ -53,7 +53,7 @@ const StyledWrapper = styled.div`
     padding: 3rem 1.5rem;
     border-radius: 1.5rem;
     background-color: ${({ theme }) =>
-      theme.scheme === "light" ? "white" : theme.colors.gray4};
+    theme.scheme === "light" ? "white" : theme.colors.gray4};
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
       0 2px 4px -1px rgba(0, 0, 0, 0.06);
     margin: 0 auto;