#103 タグ補完

frontend/src/pages/posts/PostNewPage.tsx

@@ -3,22 +3,24 @@ import { useEffect, useState, useRef } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useNavigate } from 'react-router-dom'
 
+import PostFormTagsArea from '@/components/PostFormTagsArea'
 import Form from '@/components/common/Form'
 import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
-import TextArea from '@/components/common/TextArea'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
 import Forbidden from '@/pages/Forbidden'
 
+import type { FC } from 'react'
+
 import type { User } from '@/types'
 
 type Props = { user: User | null }
 
 
-export default ({ user }: Props) => {
+export default (({ user }: Props) => {
   if (!(['admin', 'member'].some (r => user?.role === r)))
     return <Forbidden/>
 
@@ -131,7 +133,7 @@ export default ({ user }: Props) => {
 	  {/* タイトル */}
 	  <div>
 	    <Label checkBox={{
-		label:	  '自動',
+		label:    '自動',
 		checked:  titleAutoFlg,
 		onChange: ev => setTitleAutoFlg (ev.target.checked)}}>
 	      タイトル
@@ -147,7 +149,7 @@ export default ({ user }: Props) => {
 	  {/* サムネール */}
 	  <div>
 	    <Label checkBox={{
-		label:	  '自動',
+		label:    '自動',
 		checked:  thumbnailAutoFlg,
 		onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}>
 	      サムネール
@@ -177,12 +179,7 @@ export default ({ user }: Props) => {
 	  </div>
 
 	  {/* タグ */}
-	  {/* TextArea で自由形式にする */}
-	  <div>
-	    <Label>タグ</Label>
-	    <TextArea value={tags}
-		      onChange={ev => setTags (ev.target.value)}/>
-	  </div>
+	  <PostFormTagsArea tags={tags} setTags={setTags}/>
 
 	  {/* 送信 */}
 	  <Button onClick={handleSubmit}
@@ -192,4 +189,4 @@ export default ({ user }: Props) => {
 	  </Button>
 	</Form>
       </MainArea>)
-}
+}) satisfies FC<Props>