From d3ae842d56fdc5d1965501b827da126be752bdc9 Mon Sep 17 00:00:00 2001
From: JongMany <blackberry1114@naver.com>
Date: Wed, 19 Jun 2024 15:16:10 +0900
Subject: [PATCH] =?UTF-8?q?feature:=20Helmet=20=EC=B6=94=EC=83=81=ED=99=94?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 be/package-lock.json                    | 16 ++++++++++++
 be/package.json                         |  1 +
 fe/src/components/meta/DetailHelmet.tsx | 34 +++++--------------------
 fe/src/pages/main/MainPage.tsx          | 30 +++++-----------------
 4 files changed, 31 insertions(+), 50 deletions(-)

diff --git a/be/package-lock.json b/be/package-lock.json
index 071d275..7beeb33 100644
--- a/be/package-lock.json
+++ b/be/package-lock.json
@@ -19,6 +19,7 @@
         "swagger-ui-express": "^5.0.1"
       },
       "devDependencies": {
+        "@types/node": "^20.14.5",
         "nodemon": "^3.1.3"
       }
     },
@@ -72,6 +73,15 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
     },
+    "node_modules/@types/node": {
+      "version": "20.14.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.5.tgz",
+      "integrity": "sha512-aoRR+fJkZT2l0aGOJhuA8frnCSoNX6W7U2mpNq63+BxBIj5BQFt8rHy627kijCmm63ijdSdwvGgpUsU6MBsZZA==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -1093,6 +1103,12 @@
       "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
       "dev": true
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/be/package.json b/be/package.json
index bdffcae..22f0955 100644
--- 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
index 3613d5b..bc62295 100644
--- 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
index 7f6305e..5b73b77 100644
--- 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: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>
     </>
   );