フォームのバリデーションとニコ連携の画面変更 (#090) (#355)

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

frontend/src/pages/wiki/WikiSearchPage.tsx

@@ -2,11 +2,12 @@ import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 
 import PrefetchLink from '@/components/PrefetchLink'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { apiGet } from '@/lib/api'
-import { dateString } from '@/lib/utils'
+import { dateString, inputClass } from '@/lib/utils'
 
 import type { FormEvent , FC } from 'react'
 
@@ -43,22 +44,22 @@ const WikiSearchPage: FC = () => {
 	  <PageTitle>Wiki</PageTitle>
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* タイトル */}
-	    <div>
-	      <label>タイトル：</label><br />
-	      <input type="text"
-		     value={title}
-		     onChange={e => setTitle (e.target.value)}
-		     className="border p-1 w-full" />
-	    </div>
+	    <FormField label="タイトル">
+	      {({ invalid }) => (
+		  <input type="text"
+			 value={title}
+			 onChange={e => setTitle (e.target.value)}
+			 className={inputClass (invalid)}/>)}
+	    </FormField>
 
 	    {/* 内容 */}
-	    <div>
-	      <label>内容：</label><br />
-	      <input type="text"
-		     value={text}
-		     onChange={e => setText (e.target.value)}
-		     className="border p-1 w-full" />
-	    </div>
+	    <FormField label="内容">
+	      {({ invalid }) => (
+		  <input type="text"
+			 value={text}
+			 onChange={e => setText (e.target.value)}
+			 className={inputClass (invalid)}/>)}
+	    </FormField>
 
 	    {/* 検索 */}
 	    <div className="py-3">