#103 タグ補完

frontend/src/components/PostEditForm.tsx

@@ -2,7 +2,8 @@ import axios from 'axios'
 import toCamel from 'camelcase-keys'
 import { useState } from 'react'
 
-import TextArea from '@/components/common/TextArea'
+import PostFormTagsArea from '@/components/PostFormTagsArea'
+import Label from '@/components/common/Label'
 import { Button } from '@/components/ui/button'
 import { API_BASE_URL } from '@/config'
 
@@ -24,7 +25,7 @@ export default (({ post, onSave }: Props) => {
   const handleSubmit = async () => {
     const res = await axios.put (`${ API_BASE_URL }/posts/${ post.id }`, { title, tags },
 	{ headers: { 'Content-Type':     'multipart/form-data',
-		     'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } } )
+		     'X-Transfer-Code':  localStorage.getItem ('user_code') ?? '' } } )
     const data = toCamel (res.data as any, { deep: true }) as Post
     onSave ({ ...post,
 	      title:  data.title,
@@ -35,9 +36,7 @@ export default (({ post, onSave }: Props) => {
       <div className="max-w-xl pt-2 space-y-4">
 	{/* タイトル */}
 	<div>
-	  <div className="flex gap-2 mb-1">
-	    <label className="flex-1 block font-semibold">タイトル</label>
-	  </div>
+	  <Label>タイトル</Label>
 	  <input type="text"
 		 className="w-full border rounded p-2"
 		 value={title}
@@ -45,11 +44,7 @@ export default (({ post, onSave }: Props) => {
 	</div>
 
 	{/* タグ */}
-	<div>
-	  <label className="block font-semibold">タグ</label>
-	  <TextArea value={tags}
-		    onChange={ev => setTags (ev.target.value)}/>
-	</div>
+	<PostFormTagsArea tags={tags} setTags={setTags}/>
 
 	{/* 送信 */}
 	<Button onClick={handleSubmit}