feature: Helmet 추상화 컴포넌트 추가

JongMany · Jun 19, 2024 · d3ae842 · d3ae842
1 parent aeb2ffb
commit d3ae842
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 50 deletions.
diff --git a/be/package-lock.json b/be/package-lock.json
diff --git a/be/package.json b/be/package.json
@@ -18,6 +18,7 @@
     "swagger-ui-express": "^5.0.1"
   },
   "devDependencies": {
+    "@types/node": "^20.14.5",
     "nodemon": "^3.1.3"
   }
 }
diff --git a/fe/src/components/meta/DetailHelmet.tsx b/fe/src/components/meta/DetailHelmet.tsx
@@ -1,42 +1,23 @@
 import { Helmet } from "react-helmet-async";
 type Props = {
   title: string;
-  architect: string;
   pageTitle: string;
   url: string;
-  web3D_link: string;
-  long_description: string;
-  thumbnail: string;
+  shortDesc: string;
 };
 
-export const DetailHelmet = ({
-  title,
-  architect,
-  pageTitle,
-  url,
-}: // web3D_link,
-// long_description,
-// thumbnail,
-Props) => {
+export const DetailHelmet = ({ title, pageTitle, url, shortDesc }: Props) => {
   return (
     <Helmet>
-      {title && architect && <title>{pageTitle}</title>}
+      {<title>{pageTitle}</title>}
       <meta property="og:title" content={pageTitle} />
       <meta name="twitter:title" content={pageTitle} />
       <meta property="og:url" content={url} />
       <meta property="twitter:url" content={url} />
-      {/* <meta name="description" content={short_desc} />
-      <meta property="og:description" content={short_desc} />
-      <meta name="twitter:description" content={short_desc} /> */}
-      <meta
-        name="subject"
-        content={
-          "Architecture, Web 3d contents, VR supported, " +
-          title +
-          ", " +
-          architect
-        }
-      />
+      <meta name="description" content={shortDesc} />
+      <meta property="og:description" content={shortDesc} />
+      <meta name="twitter:description" content={shortDesc} />
+      <meta name="subject" content={"방구석 코딩쟁이" + title} />
       <meta property="og:image" content={"../../og_image.webp"} />
       <meta property="og:image:alt" content="Logo of Web 3d architrip" />
       <meta name="twitter:image" content={"../../og_image.webp"} />
@@ -49,7 +30,6 @@ Props) => {
             "url": "${url}",
             "name": "${pageTitle}",
             "about": { "@id": "${url}#contents" },
-            "description": "Step into the iconic '${title}' designed by the renowned architect ${architect} ...",
             "breadcrumb": { "@id": "${url}#breadcrumb" },
             "inLanguage": "en",
             "mainContentOfPage": "${url}#contents",

diff --git a/fe/src/pages/main/MainPage.tsx b/fe/src/pages/main/MainPage.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Helmet } from "react-helmet-async";
+import { DetailHelmet } from "../../components/meta/DetailHelmet";
 
 export default function MainPage() {
   console.log(import.meta.env);
@@ -12,28 +12,12 @@ export default function MainPage() {
 
   return (
     <>
-      <Helmet>
-        <title>메인화면</title>
-        <meta name="description" content="방구석 코딩쟁이" />
-        {/* Open Graph */}
-        <meta property="og:title" content="방구석 코딩쟁이" />
-        <meta property="og:description" content="방구석 코딩쟁이 포트폴리오" />
-        <meta property="og:image" content="https://via.placeholder.com/1200" />
-        <meta property="og:url" content="https://www.google.com" />
-        <meta property="og:type" content="website" />
-
-        {/* Twitter */}
-        <meta property="twitter:title" content="SEO 최적화 테스트" />
-        <meta
-          property="twitter:description"
-          content="SEO 최적화 테스트 연습입니다."
-        />
-        <meta
-          property="twitter:image"
-          content="https://via.placeholder.com/1200"
-        />
-        <meta property="twitter:card" content="summary_large_image" />
-      </Helmet>
+      <DetailHelmet
+        title="메인"
+        pageTitle="방구석 코딩쟁이의 코딩 일대기"
+        url={import.meta.env.VITE_BASE_URL + "/main"}
+        shortDesc="방구석 코딩쟁이의 포트폴리오를 소개합니다."
+      />
       <main>메인화면</main>
     </>
   );