#24

frontend/src/pages/NotFound.tsx

@@ -1,5 +1,6 @@
 import { Helmet } from 'react-helmet-async'
 
+import notFoundImg from '@/assets/images/not-found.gif'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 
@@ -7,12 +8,19 @@ import { SITE_TITLE } from '@/config'
 export default () => (
     <MainArea>
       <Helmet>
-        <meta name="robots" content="noindex" />
-        <title>ページないよ (笑) | {SITE_TITLE}</title>
+	<meta name="robots" content="noindex" />
+	<title>ページないよ (笑) | {SITE_TITLE}</title>
       </Helmet>
-      <div className="text-6xl font-bold italic text-transparent whitespace-nowrap
-                   bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
-                   bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_white]">
-        404<br />ページないよ（笑）
+      <div className="text-6xl font-bold text-transparent whitespace-nowrap
+		      bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
+		      bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]
+		      space-y-6 text-center flex flex-col justify-center items-center">
+	<p>404</p>
+	<div className="flex space-x-4">
+	  <p style={{ writingMode: 'vertical-rl' }}>帰れ！</p>
+	  <img src={notFoundImg} alt="404" />
+	  <p style={{ writingMode: 'vertical-rl' }}>帰れ！</p>
+	</div>
+	<p className="mr-[-.5em]">ページないよ（笑）</p>
       </div>
     </MainArea>)

frontend/src/pages/posts/PostDetailPage.tsx

@@ -13,6 +13,7 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
 import { cn } from '@/lib/utils'
+import NotFound from '@/pages/NotFound'
 
 import type { Post, User } from '@/types'
 
@@ -24,6 +25,7 @@ export default ({ user }: Props) => {
 
   const [post, setPost] = useState<Post | null> (null)
   const [editing, setEditing] = useState (true)
+  const [found, setFound] = useState (true)
 
   const changeViewedFlg = async () => {
     const url = `${ API_BASE_URL }/posts/${ id }/viewed`
@@ -57,7 +59,8 @@ export default ({ user }: Props) => {
       }
       catch (err)
       {
-	console.error ('うんち!', err)
+	if (err.status === 404)
+	  setFound (false)
       }
     }) ()
   }, [id])
@@ -71,6 +74,9 @@ export default ({ user }: Props) => {
       setEditing (true)
   }, [editing])
 
+  if (!(found))
+    return <NotFound />
+
   const url = post ? new URL (post.url) : null
   const nicoFlg = url?.hostname.split ('.').slice (-2).join ('.') === 'nicovideo.jp'
   const match = nicoFlg ? url.pathname.match (/(?<=\/watch\/)[a-zA-Z0-9]+?(?=\/|$)/) : null