From 603fd6200ff411dc0555f77a8ff313a237aee5e5 Mon Sep 17 00:00:00 2001
From: Ryo Takeuchi <develop@r09i.me>
Date: Fri, 30 Jun 2023 08:24:17 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20Tags=20=E3=83=9A=E3=83=BC=E3=82=B8?=
 =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0=20(#106)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/frontend/src/app/tags/[...slug]/page.tsx | 44 +++++++++++++++++++
 .../features/blog/components/HeroImage.tsx    |  2 +-
 apps/frontend/src/lib/router/PagePath.ts      |  4 +-
 3 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 apps/frontend/src/app/tags/[...slug]/page.tsx

diff --git a/apps/frontend/src/app/tags/[...slug]/page.tsx b/apps/frontend/src/app/tags/[...slug]/page.tsx
new file mode 100644
index 00000000..2c76eeca
--- /dev/null
+++ b/apps/frontend/src/app/tags/[...slug]/page.tsx
@@ -0,0 +1,44 @@
+import { Metadata, NextPage } from 'next';
+import { ContentsLayout } from '@/components/Layout';
+import { PagePath } from '@/lib/router';
+import clsx from 'clsx';
+import Link from 'next/link';
+
+export const metadata: Metadata = {
+  title: 'Tags | tatsutakein.jp',
+  description: 'Ryo Takeuchi のポートフォリオサイトです。',
+};
+
+interface PageProps {
+  params: { slug: string[] };
+  searchParams: { [key: string]: string | string[] | undefined };
+}
+
+const Tags: NextPage<PageProps> = ({ params: { slug } }) => {
+  const tags = slug;
+
+  return (
+    <ContentsLayout
+      description=''
+      pageType='blog'
+      pageUrl={PagePath.tagResult(tags, true)}
+    >
+      <h1 className={clsx('text-4xl')}>Tags</h1>
+
+      {/* Tags */}
+      <div className={clsx('flex flex-wrap gap-4 text-sm', tags.length && 'mt-3')}>
+        {tags.map((tag) => (
+          <Link
+            key={tag}
+            href={PagePath.tagResult([tag])}
+            className='cursor-pointer hover:opacity-50'
+          >
+            # {tag}
+          </Link>
+        ))}
+      </div>
+    </ContentsLayout>
+  );
+};
+
+export default Tags;
diff --git a/apps/frontend/src/features/blog/components/HeroImage.tsx b/apps/frontend/src/features/blog/components/HeroImage.tsx
index c36fe895..b3f9adbe 100644
--- a/apps/frontend/src/features/blog/components/HeroImage.tsx
+++ b/apps/frontend/src/features/blog/components/HeroImage.tsx
@@ -74,7 +74,7 @@ export const HeroImage = ({
             {tags.map((tag) => (
               <Link
                 key={tag}
-                href={PagePath.tagResult(tag)}
+                href={PagePath.tagResult([tag])}
                 className='cursor-pointer hover:opacity-50'
               >
                 # {tag}
diff --git a/apps/frontend/src/lib/router/PagePath.ts b/apps/frontend/src/lib/router/PagePath.ts
index ebaf2eb6..e40d42b6 100644
--- a/apps/frontend/src/lib/router/PagePath.ts
+++ b/apps/frontend/src/lib/router/PagePath.ts
@@ -28,8 +28,8 @@ export const PagePath = {
   /**
    * タグ検索結果ページ
    */
-  tagResult(tag: string, withOrigin?: boolean): string {
-    const path = `/tag/${tag}`;
+  tagResult(tags: string[], withOrigin?: boolean): string {
+    const path = `/tags/${tags.join('/')}`;
     return withOrigin ? PagePath.withOrigin(path) : path;
   },