refactor: useSiteMetadata 훅 적용

doputer · Feb 18, 2024 · 27bbfc5 · 27bbfc5
1 parent 0286ce5
commit 27bbfc5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 24 deletions.
diff --git a/src/components/comment.tsx b/src/components/comment.tsx
@@ -1,25 +1,11 @@
 import { useEffect, useState } from 'react';
 
 import Giscus from '@giscus/react';
-import { graphql, useStaticQuery } from 'gatsby';
+
+import useSiteMetadata from '@/hooks/useSiteMetadata';
 
 export default function Comment() {
-  const {
-    site: { siteMetadata },
-  } = useStaticQuery(graphql`
-    query {
-      site {
-        siteMetadata {
-          comment {
-            repo
-            repoId
-            category
-            categoryId
-          }
-        }
-      }
-    }
-  `);
+  const siteMetadata = useSiteMetadata();
   const [theme, setTheme] = useState('');
 
   useEffect(() => {

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -2,16 +2,18 @@ import { MoonIcon, SunIcon } from '@heroicons/react/24/solid';
 import { Link } from 'gatsby';
 
 import Menu from '@/components/menu';
+import useSiteMetadata from '@/hooks/useSiteMetadata';
 import useTheme from '@/hooks/useTheme';
 
 function Header() {
+  const siteMetadata = useSiteMetadata();
   const [toggleTheme] = useTheme();
   const links = ['About', 'Tags'];
 
   return (
     <header className="flex items-center justify-between">
       <Link to="/" className="text-xl font-bold tracking-tight">
-        Doputer
+        {siteMetadata.title}
       </Link>
       <nav className="flex gap-4">
         {links.map((link) => (

diff --git a/src/components/seo.tsx b/src/components/seo.tsx
@@ -6,16 +6,16 @@ interface SEOProps {
 }
 
 function SEO({ title, description }: SEOProps) {
-  const seo = useSiteMetadata();
+  const siteMetadata = useSiteMetadata();
 
   return (
     <>
       <html lang="ko" />
-      <title>{title || seo.title}</title>
-      <meta name="description" content={description || seo.description} />
-      <meta property="og:title" content={title || seo.title} />
-      <meta property="og:description" content={description || seo.description} />
-      <meta property="og:url" content={seo.siteUrl} />
+      <title>{title || siteMetadata.title}</title>
+      <meta name="description" content={description || siteMetadata.description} />
+      <meta property="og:title" content={title || siteMetadata.title} />
+      <meta property="og:description" content={description || siteMetadata.description} />
+      <meta property="og:url" content={siteMetadata.siteUrl} />
       <meta name="naver-site-verification" content="ed40bb9e56fd7384da54f573c6dd780015474e61" />
     </>
   );

diff --git a/src/hooks/useSiteMetadata.ts b/src/hooks/useSiteMetadata.ts
@@ -8,6 +8,12 @@ const useSiteMetadata = () => {
           title
           description
           siteUrl
+          comment {
+            repo
+            repoId
+            category
+            categoryId
+          }
         }
       }
     }