feat: 関聯する Wiki がない TagLink 修正（#107） (#192)

#107

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #192

frontend/src/components/TagLink.tsx

@@ -1,5 +1,8 @@
+import axios from 'axios'
+import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 
+import { API_BASE_URL } from '@/config'
 import { LIGHT_COLOUR_SHADE, DARK_COLOUR_SHADE, TAG_COLOUR } from '@/consts'
 import { cn } from '@/lib/utils'
 
@@ -27,6 +30,27 @@ export default (({ tag,
 		   withWiki  = true,
 		   withCount = true,
 		   ...props }: Props) => {
+  const [havingWiki, setHavingWiki] = useState (true)
+
+  const wikiExists = async (tagName: string) => {
+    try
+    {
+      await axios.get (`${ API_BASE_URL }/wiki/title/${ encodeURIComponent (tagName) }/exists`)
+      setHavingWiki (true)
+    }
+    catch
+    {
+      setHavingWiki (false)
+    }
+  }
+
+  useEffect (() => {
+    if (!(linkFlg) || !(withWiki))
+      return
+
+    wikiExists (tag.name)
+  }, [tag.name, linkFlg, withWiki])
+
   const spanClass = cn (
       `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
       `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
@@ -39,10 +63,19 @@ export default (({ tag,
       <>
 	{(linkFlg && withWiki) && (
 	    <span className="mr-1">
-	      <Link to={`/wiki/${ encodeURIComponent (tag.name) }`}
-		    className={linkClass}>
-		?
-	      </Link>
+	      {havingWiki
+	       ? (
+		  <Link to={`/wiki/${ encodeURIComponent (tag.name) }`}
+			className={linkClass}>
+		    ?
+		  </Link>)
+	       : (
+		  <Link to={`/wiki/${ encodeURIComponent (tag.name) }`}
+			className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
+				   dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
+			title={`${ tag.name } Wiki が存在しません．`}>
+		    !
+		  </Link>)}
 	    </span>)}
 	{nestLevel > 0 && (
 	    <span

frontend/src/index.css

@@ -96,3 +96,15 @@ button:focus-visible
     background-color: #f9f9f9;
   }
 }
+
+@keyframes wiki-blink
+{
+  0%, 100% { color: #dc2626; }
+  50% { color: #2563eb; }
+}
+
+@keyframes wiki-blink-dark
+{
+  0%, 100% { color: #f87171; }
+  50% { color: #60a5fa; }
+}