Add og:title, og:description to preview page (#25)

* preview 페이지에서 입력한 title, description이 og에 적용되도록 변경

* Layout 위치 변경 및 title, description 기본값 변경

Author: hmu332233

components/Layout.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Head from 'next/head';
 import Header from 'components/Header';
 import Footer from 'components/Footer';
+import Adfit from 'components/Adfit';
 
 type Props = {
   children: React.ReactNode;
@@ -23,6 +24,7 @@ function Layout({ children }: Props) {
         <Header />
         <main className="container grow flex flex-col items-center gap-y-8">
           {children}
+          <Adfit />
         </main>
         <Footer />
       </div>

pages/_app.tsx

@@ -1,8 +1,14 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 
+import Layout from 'components/Layout';
+
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
 }
 
 export default MyApp;

pages/index.tsx

@@ -35,22 +35,19 @@ function Home() {
 
   return (
     <FormProvider>
-      <Layout>
-        <OgTags />
-        <p>SVG showing the Moon Phase for today.</p>
-        <Hits />
-        <a>
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={svgUrl} alt="moon.svg" />
-        </a>
-        <MoonForm onChange={handleFormChange} />
-        <CopyModal.Button id="copy-modal" />
-        <CopyModal.Modal
-          id="copy-modal"
-          text={`https://moon-svg.minung.dev${svgUrl}`}
-        />
-        <Adfit />
-      </Layout>
+      <OgTags />
+      <p>SVG showing the Moon Phase for today.</p>
+      <Hits />
+      <a>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={svgUrl} alt="moon.svg" />
+      </a>
+      <MoonForm onChange={handleFormChange} />
+      <CopyModal.Button id="copy-modal" />
+      <CopyModal.Modal
+        id="copy-modal"
+        text={`https://moon-svg.minung.dev${svgUrl}`}
+      />
     </FormProvider>
   );
 }

pages/preview.tsx

@@ -17,8 +17,8 @@ type Props = {
 function Preview({ query }: Props) {
   const [data, setData] = useState<FormValues>({
     ...query,
-    title: query.title || '기본값',
-    description: query.description || '기본값',
+    title: query.title,
+    description: query.description,
   });
 
   const queryString = objectToQueryString({
@@ -63,29 +63,34 @@ function Preview({ query }: Props) {
 
   return (
     <FormProvider defaultValues={defaultValues}>
-      <Layout>
-        <OgTags
-          url={`https://moon-svg.minung.dev/preview${queryString}`}
-          image={`https://moon-svg.minung.dev/moon.png${queryString}`}
-        />
-        <p>Share Moon&apos;s Phases with your friends!</p>
-        <LinkPreviewCard
-          image={`https://moon-svg.minung.dev/moon.png${queryString}`}
-          title={data.title!}
-          description={data.description!}
-        />
-        <MoonForm keys={PREVIEW_FORM_KEYS} onChange={handleFormChange} />
-      </Layout>
+      <OgTags
+        url={`https://moon-svg.minung.dev/preview${queryString}`}
+        image={`https://moon-svg.minung.dev/moon.png${queryString}`}
+        title={data.title}
+        description={data.description}
+      />
+      <p>Share Moon&apos;s Phases with your friends!</p>
+      <LinkPreviewCard
+        image={`https://moon-svg.minung.dev/moon.png${queryString}`}
+        title={data.title!}
+        description={data.description!}
+      />
+      <MoonForm keys={PREVIEW_FORM_KEYS} onChange={handleFormChange} />
     </FormProvider>
   );
 }
 
 export default Preview;
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
+  const dateString = new Date().toLocaleDateString();
   return {
     props: {
-      query: context.query,
+      query: {
+        title: 'Moon phase',
+        description: `Moon phase on ${dateString}`,
+        ...context.query,
+      },
     },
   };
 };