Merge pull request #117 from tatsutakein/feature/#106

✨ Tags ページを追加

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;

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}

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;
   },