not found page デザイン

Author: kuramapommel

sample/src/pages/404.stories.tsx

@@ -0,0 +1,30 @@
+import NotFoundPage from '@/pages/404'
+import type { Meta, StoryObj } from '@storybook/react'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+
+const meta: Meta<typeof NotFoundPage> = {
+  title: 'pages/404',
+  component: NotFoundPage,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof NotFoundPage>
+
+/**
+ * 標準フッター
+ */
+export const Default: Story = {
+  render: () => (
+    <MemoryRouter initialEntries={['/']}>
+      <Routes>
+        <Route path="/" element={<NotFoundPage />} />
+      </Routes>
+    </MemoryRouter>
+  ),
+}

sample/src/pages/404.tsx

@@ -1,11 +1,18 @@
 import { Link } from 'react-router-dom'
 
 const NotFoundPage = () => (
-  <>
-    <h1>404 NOT FOUND</h1>
-    <p>お探しのページは見つかりませんでした。</p>
-    <Link to="/">戻る</Link>
-  </>
+  <div className="container flex flex-col">
+    <h1 className="text-3xl m-auto mt-5">404 NOT FOUND</h1>
+    <p className="text-base text-red-600 mx-auto mt-5">
+      お探しのページは見つかりませんでした。
+    </p>
+    <Link
+      to="/"
+      className="border-2 w-28 h-9 text-center rounded-md bg-blue-400 text-white mx-auto my-5 p-1"
+    >
+      戻る
+    </Link>
+  </div>
 )
 
 export default NotFoundPage