Merge pull request #212 from side-peek/refactor/#211/performance

[refactor/#211/performance] - 메타태그 오류 수정
side-peek · Apr 8, 2024 · 9f2a0ce · 9f2a0ce
2 parents cd358fe + 5ec1b20
commit 9f2a0ce
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 114 deletions.
diff --git a/index.html b/index.html
@@ -20,6 +20,22 @@
     <meta
       name="google-site-verification"
       content="G9-vlZUKpRFQ-pX9B2JO77P4Oc2ZCAbWeNPRfBpnQe8" />
+    <title>사이드픽(SidePeek)</title>
+    <meta
+      name="description"
+      content="사이드 프로젝트를 공유하고 구경해보세요!" />
+    <meta
+      property="og:title"
+      content="사이드픽 - 사이드 프로젝트를 공유하고 구경해보세요!" />
+    <meta
+      property="og:image"
+      content="https://i.postimg.cc/3N44wNn6/logo.png" />
+    <meta
+      property="og:type"
+      content="website" />
+    <meta
+      property="og:url"
+      content="{`${window.location.origin}${location.pathname}`}" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.50.1",
     "react-intersection-observer": "^9.8.1",
     "react-router-dom": "^6.22.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,4 @@
 import { Suspense } from "react"
-import { HelmetProvider } from "react-helmet-async"
 import { RouterProvider } from "react-router-dom"
 
 import { ChakraProvider, ColorModeScript } from "@chakra-ui/react"
@@ -35,9 +34,7 @@ const App = () => {
         <ColorModeScript initialColorMode="light" />
         <ErrorBoundaries>
           <Suspense fallback={<FullScreenSpinner />}>
-            <HelmetProvider>
-              <RouterProvider router={router} />
-            </HelmetProvider>
+            <RouterProvider router={router} />
           </Suspense>
         </ErrorBoundaries>
       </ChakraProvider>

diff --git a/src/components/ MetaData/MetaData.tsx b/src/components/ MetaData/MetaData.tsx
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -1,7 +1,5 @@
 import { Fade, Skeleton } from "@chakra-ui/react"
 
-import { HomePageMetaData } from "@components/ MetaData/MetaData"
-
 import Banner from "./components/Banner/Banner"
 import ProjectListSection from "./components/ProjectListSection/ProjectListSection"
 import { useBannerProjectQuery } from "./hooks/queries/useBannerProjectQuery"
@@ -11,7 +9,6 @@ const HomePage = () => {
 
   return (
     <Fade in={true}>
-      <HomePageMetaData />
       {isBannerLoading ? (
         <Skeleton height="35rem" />
       ) : (

diff --git a/src/pages/ProjectDetailPage/ProjectDetailPage.tsx b/src/pages/ProjectDetailPage/ProjectDetailPage.tsx
@@ -2,7 +2,6 @@ import { Box, Fade, Flex } from "@chakra-ui/react"
 
 import FullScreenSpinner from "@components/LoadingComponents/FullScreenSpinner"
 
-import { ProjectDetailPageMetaData } from "../../components/ MetaData/MetaData"
 import Comments from "./components/Comments/Comments"
 import Content from "./components/Content/Content"
 import { ProjectIdProps, withProjectId } from "./components/Hoc/withProjectId"
@@ -18,7 +17,6 @@ const ProjectDetailPage = ({ projectId }: ProjectIdProps) => {
 
   return (
     <Fade in={true}>
-      <ProjectDetailPageMetaData />
       <Box w="100%">
         <Summary projectDetailInfo={projectDetailInfo} />
         <Flex

diff --git a/src/pages/ProjectDetailPage/components/Content/TechStacks/TechStacks.tsx b/src/pages/ProjectDetailPage/components/Content/TechStacks/TechStacks.tsx
@@ -39,26 +39,21 @@ const TechStacks = ({ techStacks }: TechStacksProps) => {
                 <HStack
                   spacing="1rem"
                   flexWrap="wrap">
-                  {skillList.map((skill, index) => {
-                    console.log(
-                      skill.iconImageUrl?.split(/\//).at(-1)?.split(/\./)[0],
-                    )
-                    return (
-                      <CommonTag
-                        leftElement={
-                          <Image
-                            src={skill.iconImageUrl}
-                            alt=""
-                            w="2rem"
-                          />
-                        }
-                        cursor="default"
-                        label={skill.name}
-                        key={`${skill.id}-${index}`}
-                        fontSize="lg"
-                      />
-                    )
-                  })}
+                  {skillList.map((skill, index) => (
+                    <CommonTag
+                      leftElement={
+                        <Image
+                          src={skill.iconImageUrl}
+                          alt=""
+                          w="2rem"
+                        />
+                      }
+                      cursor="default"
+                      label={skill.name}
+                      key={`${skill.id}-${index}`}
+                      fontSize="lg"
+                    />
+                  ))}
                 </HStack>
               </Stack>
             )

diff --git a/src/routes/layouts/DefaultLayout.tsx b/src/routes/layouts/DefaultLayout.tsx
@@ -2,7 +2,6 @@ import { Outlet } from "react-router"
 
 import { Box, Flex, Spacer } from "@chakra-ui/react"
 
-import { DefaultMetaData } from "@components/ MetaData/MetaData"
 import Footer from "@components/Footer/Footer"
 import Header from "@components/Header/Header"
 import Prefetcher from "@components/PreFetcher/Prefetcher"
@@ -12,7 +11,6 @@ import ScrollToTop from "../ScrollToTop/ScrollToTop"
 const DefaultLayout = () => {
   return (
     <Prefetcher>
-      <DefaultMetaData />
       <Flex
         direction="column"
         minHeight="100vh">