feat: optimize SEO

.env

@@ -1 +1,2 @@
-NEXT_PUBLIC_API_URL=https://pnu-mail-badara-cookiya.koyeb.app
+NEXT_PUBLIC_API_URL=https://pnu-mail-badara-cookiya.koyeb.app
+NEXT_PUBLIC_APP_URL=https://not-pnu.github.io/mailbadara

next.config.mjs

@@ -1,6 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     reactStrictMode: false,
+    output: 'export',
+    basePath: "/mailbadara",
+    images: {
+        unoptimized: true,
+    },
 };
 
 export default nextConfig;

public/sitemap.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+        <loc>https://not-pnu.github.io/mailbadara</loc>
+        <lastmod>2024-08-12T00:42:40.525Z</lastmod>
+        <changefreq>yearly</changefreq>
+        <priority>1</priority>
+    </url>
+</urlset>

src/app/_component/DescriptionSection.tsx

@@ -2,7 +2,6 @@
 
 import { useSubscribeFormStore } from '@/stores/useSubscribeFormStore';
 import { EDescription } from '@/enums/subscribe';
-import { useSearchParams } from 'next/navigation';
 import { cls } from '@/utils/tailwind';
 
 export default function DescriptionSection() {

src/app/_component/SubscribeForm.tsx

@@ -6,6 +6,7 @@ import { getDepartmentNameList, postSubscribe } from '@/api/subscribe';
 import { cls } from '@/utils/tailwind';
 import { useSubscribeFormStore } from '@/stores/useSubscribeFormStore';
 import { EDescription } from '@/enums/subscribe';
+import { isEmail } from '@/utils/regex';
 
 export default function SubscribeForm() {
     const [departmentList, setDepartmentList] = useState<IDepartmentName>({ cse: '정보컴퓨터공학부' });
@@ -46,7 +47,7 @@ export default function SubscribeForm() {
             }
             onNextStep();
         } else if (step === 2) {
-            if (!inputEmail || inputEmail.length === 0) {
+            if (!inputEmail || inputEmail.length === 0 || !isEmail(inputEmail)) {
                 setDescriptionType(EDescription.WARNING);
                 return;
             }

src/app/layout.tsx

@@ -3,7 +3,26 @@ import '@/styles/globals.css';
 
 export const metadata: Metadata = {
     title: '메일바다라',
-    description: 'Generated by KimCookieYa',
+    description: '부산대학교 메일을 뉴스레터로. 매일매일 메일을 받을 수 있다.',
+    keywords: '부산대학교, 뉴스레터, 메일바다라, 메일받아라, KimCookieYa, 김쿠키야, 부산대아님, mailbadara, MailBadara',
+    openGraph: {
+        title: '메일바다라',
+        description: '부산대학교 메일을 뉴스레터로! 매일매일 메일을 받을 수 있어요!',
+        siteName: '메일바다라',
+        url: process.env.NEXT_PUBLIC_APP_URL,
+        type: 'website',
+        images: [
+            {
+                url: process.env.NEXT_PUBLIC_APP_URL + '/image/not-pnu-logo.png',
+                width: 500,
+                height: 500,
+            },
+        ],
+    },
+    robots: {
+        index: true,
+        follow: true,
+    },
 };
 
 export default function RootLayout({

src/app/robots.ts

@@ -0,0 +1,13 @@
+import type { MetadataRoute } from 'next';
+
+export default function robots(): MetadataRoute.Robots {
+    return {
+        rules: [
+            {
+                userAgent: '*',
+                allow: ['/'],
+            },
+        ],
+        sitemap: process.env.NEXT_PUBLIC_APP_URL + '/sitemap.xml',
+    };
+}

src/app/validation/_component/SuccessSubscribe.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+export default function SuccessSubscribe() {
+    const searchParams = useSearchParams();
+    const email = searchParams.get('email') || '';
+
+    if (!email) {
+        return (
+            <p className={'flex h-240 flex-col items-center justify-center font-NanumMyeongjo md:text-18'}>
+                이메일 주소를 찾을 수 없다.
+            </p>
+        );
+    }
+
+    return (
+        <p className={'flex h-240 flex-col items-center justify-center font-NanumMyeongjo md:text-18'}>
+            {email}
+            <br />
+            <br />
+            구독을 성공적으로 완료한 것을 축하한다.
+        </p>
+    );
+}

src/app/validation/page.tsx

@@ -1,10 +1,10 @@
-export default function ValidationEmailPage({ searchParams: { email } }: { searchParams: { email: string } }) {
+import { Suspense } from 'react';
+import SuccessSubscribe from '@/app/validation/_component/SuccessSubscribe';
+
+export default function ValidationEmailPage() {
     return (
-        <p className={'flex h-240 flex-col items-center justify-center font-NanumMyeongjo md:text-18'}>
-            {email}
-            <br />
-            <br />
-            구독을 성공적으로 완료한 것을 축하한다.
-        </p>
+        <Suspense>
+            <SuccessSubscribe />
+        </Suspense>
     );
 }

src/utils/regex.ts

@@ -0,0 +1,5 @@
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function isEmail(email: string) {
+    return emailRegex.test(email);
+}