[FE] Dev -> release (#615)

foody-moody · Mar 18, 2024 · b1703e0 · b1703e0
2 parents ce7b827 + 6f64131
commit b1703e0
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 2 deletions.
diff --git a/fe/package-lock.json b/fe/package-lock.json
diff --git a/fe/package.json b/fe/package.json
@@ -23,6 +23,7 @@
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.49.2",
     "react-loading-skeleton": "^3.3.1",
     "react-router-dom": "^6.16.0",

diff --git a/fe/src/App.tsx b/fe/src/App.tsx
@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { RouteContainer } from 'RouteContainer';
+import { HelmetProvider } from 'react-helmet-async';
 // import { RouterProvider } from 'react-router-dom';
 import { RecoilRoot, RecoilEnv } from 'recoil';
 import { ThemeProvider } from 'styled-components';
@@ -19,6 +20,8 @@ export const queryClient = new QueryClient({
   },
 });
 
+const helmetContext = {};
+
 function App() {
   RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false;
 
@@ -32,7 +35,9 @@ function App() {
             <GlobalModals />
             <GlobalToasts />
             {/* <RouterProvider router={router} /> */}
-            <RouteContainer />
+            <HelmetProvider context={helmetContext}>
+              <RouteContainer />
+            </HelmetProvider>
           </RecoilRoot>
         </ThemeProvider>
       </QueryClientProvider>

diff --git a/fe/src/components/common/helmet/Helmet.tsx b/fe/src/components/common/helmet/Helmet.tsx
@@ -0,0 +1,40 @@
+import { Helmet } from 'react-helmet-async';
+
+export type Props = {
+  children?: React.ReactNode;
+  title?: string | null;
+  meta?: any; // TODO: 타입 정의
+};
+
+export const CustomHelmet = (props: Props) => {
+  console.log('CustomHelmet', props);
+
+  return (
+    <Helmet>
+      {props.title && <title>푸디무디 - {props.title}</title>}
+      <meta name="keywords" content={props.meta?.keywords} />
+      <meta name="description" content={props.meta?.description} />
+      <meta property="og:title" content={`푸디무디 - ${props.meta?.ogTitle}`} />
+      <meta property="og:description" content={props.meta?.ogDescription} />
+      <meta property="og:image" content={props.meta?.ogImage} />
+      <meta property="og:image:width" content="1200" />
+      <meta property="og:image:height" content="630" />
+      <meta property="og:url" content={props.meta?.ogUrl} />
+      <meta property="og:type" content={props.meta?.ogType} />
+      <meta property="og:site_name" content={props.meta?.ogSiteName} />
+      <meta property="og:locale" content={props.meta?.ogLocale} />
+
+      <meta name="twitter:title" content={props.meta?.twitterTitle} />
+      <meta
+        name="twitter:description"
+        content={props.meta?.twitterDescription}
+      />
+      <meta name="twitter:image" content={props.meta?.twitterImage} />
+      <meta name="twitter:url" content={props.meta?.twitterUrl} />
+
+      {props.meta?.canonical && (
+        <link rel="canonical" href={props.meta?.canonical} />
+      )}
+    </Helmet>
+  );
+};
diff --git a/fe/src/pages/DetailFeedPage.tsx b/fe/src/pages/DetailFeedPage.tsx
@@ -13,6 +13,7 @@ import { Carousel } from 'components/common/carousel/Carousel';
 import { Dim } from 'components/common/dim/Dim';
 import { FeedAction } from 'components/common/feedAction/FeedAction';
 import { FeedUserInfo } from 'components/common/feedUserInfo/FeedUserInfo';
+import { CustomHelmet } from 'components/common/helmet/Helmet';
 import { useModal } from 'components/common/modal/useModal';
 import { CommentSkeleton } from 'components/common/skeleton/CommentSkeleton';
 import { DeferredComponent } from 'components/common/skeleton/DeferredComponent';
@@ -69,6 +70,29 @@ export const DetailFeedModalPage = () => {
 
   return (
     <>
+      {feed && (
+        <CustomHelmet
+          title={`${feed?.store?.name} 리뷰`}
+          meta={{
+            description: feed?.review,
+            keywords: `${feed?.store?.name}, 맛집, 리뷰, 후기, 푸디무디, 푸디모디, 포디모디, 포디무디, foodymoody, 음식, 식당, 맛집추천, 맛집리뷰, 맛집탐방, 맛집투어, 내돈내산, 진짜, 존맛, 위치, ${feed?.store?.name} 위치, 주차, ${feed?.store?.name} 예약`,
+            ogTitle: `${feed?.store?.name} 리뷰`,
+            ogDescription: `${feed?.review} '진짜'만 모은 맛잘알들의 맛집 컬렉션! 푸디무디에서 ${feed?.member.nickname}님의 맛집 리뷰를 확인하세요!`,
+            ogImage: feed?.images[0]?.image.url,
+            ogUrl: `https://foodymoody.site/detail/feed/${feed?.id}`,
+            ogType: 'website',
+            ogSiteName: '푸디무디',
+            ogLocale: 'ko_KR',
+            twitterTitle: `푸디무디 - ${feed?.store?.name} 리뷰`,
+            twitterDescription: feed?.review,
+            twitterImage: feed?.images[0]?.image.url,
+            twitterUrl: `https://foodymoody.site/detail/feed/${feed?.id}`,
+            canonical: `https://foodymoody.site/detail/feed/${feed?.id}
+            `,
+          }}
+        />
+      )}
+
       <Dim
         onClick={() => {
           handleNavigateToBack();

diff --git a/fe/src/pages/HomePage.tsx b/fe/src/pages/HomePage.tsx
@@ -2,23 +2,51 @@ import loadable from '@loadable/component';
 import { Suspense } from 'react';
 import { useLocation } from 'react-router-dom';
 import { styled } from 'styled-components';
+import { CustomHelmet } from 'components/common/helmet/Helmet';
 import { DeferredComponent } from 'components/common/skeleton/DeferredComponent';
 import { FeedSkeleton } from 'components/common/skeleton/FeedSkeleton';
 import { FeedMainList } from 'components/feedMain/FeedMainList';
+
 // import { DetailFeedModalPage } from './DetailFeedPage';
-import { NewFeedModalPage } from './NewFeedPage';
+// import { NewFeedModalPage } from './NewFeedPage';
 
 const DetailFeedModalPage = loadable(() =>
   import('./DetailFeedPage').then((module) => module.DetailFeedModalPage)
 );
 
+const NewFeedModalPage = loadable(() =>
+  import('./NewFeedPage').then((module) => module.NewFeedModalPage)
+);
+
 export const HomePage = () => {
   const location = useLocation();
   const background = location.state && location.state.background;
   const isDetailFeedUrl = location.pathname.includes('/detail/feed');
 
   return (
     <Wrapper>
+      <CustomHelmet
+        meta={{
+          keywords:
+            '푸디무디, 푸디무디 홈, 푸디무디 메인, 푸디무디 피드, 맛집, 리뷰, 후기, 푸디무디, 푸디모디, 포디모디, 포디무디, foodymoody, 음식, 식당, 맛집추천, 맛집리뷰, 맛집탐방, 맛집투어, 내돈내산, 진짜, 존맛,  위치, 주차, 예약',
+          description: `'진짜'만 모은 맛잘알들의 맛집 컬렉션!
+          맛집 컬렉터들의 '진짜' 맛집 후기를 모아보고, 나만의 맛집 컬렉션을 만들어보세요!`,
+          ogTitle: '푸디무디 - 홈',
+          ogDescription: `여기를 눌러 링크를 확인하세요`,
+          ogImage:
+            'https://foodymoody-test.s3.ap-northeast-2.amazonaws.com/images/fm-logo-with-text.png',
+          ogUrl: 'https://foodymoody.site',
+          ogType: 'website',
+          ogSiteName: '푸디무디',
+          ogLocale: 'ko_KR',
+          twitterTitle: '푸디무디 - 홈',
+          twitterDescription: `'진짜'만 모은 맛잘알들의 맛집 컬렉션!
+          맛집 컬렉터들의 '진짜' 맛집 후기를 모아보고, 나만의 맛집 컬렉션을 만들어보세요!`,
+          twitterImage:
+            'https://foodymoody-test.s3.ap-northeast-2.amazonaws.com/images/fm-logo-with-text.png',
+          twitterUrl: 'https://foodymoody.site',
+        }}
+      />
       <Suspense
         fallback={
           <DeferredComponent>