68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
export interface InquiryFormData {
|
|
category: string
|
|
title: string
|
|
content: string
|
|
file: File[]
|
|
}
|
|
|
|
export default function InquiryWriteForm() {
|
|
const router = useRouter()
|
|
const [formData, setFormData] = useState<InquiryFormData>({
|
|
category: 'A',
|
|
title: '',
|
|
content: '',
|
|
file: [],
|
|
})
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = Array.from(e.target.files || [])
|
|
setFormData({ ...formData, file: [...formData.file, ...file] })
|
|
}
|
|
const handleSubmit = () => {
|
|
console.log('submit: ', formData)
|
|
// router.push(`/inquiry`)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div>
|
|
<label htmlFor="category">category</label>
|
|
<select id="category" onChange={(e) => setFormData({ ...formData, category: e.target.value })}>
|
|
<option value="A">A</option>
|
|
<option value="B">B</option>
|
|
<option value="C">C</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="title">title</label>
|
|
<input type="text" id="title" onChange={(e) => setFormData({ ...formData, title: e.target.value })} />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="content">content</label>
|
|
<textarea id="content" onChange={(e) => setFormData({ ...formData, content: e.target.value })} />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="file">file</label>
|
|
<input type="file" id="file" accept="image/*" capture="environment" onChange={handleFileChange} />
|
|
<div>
|
|
<p>file count: {formData.file.length}</p>
|
|
{formData.file.map((f) => (
|
|
<div key={f.name}>
|
|
<div>{f.name}</div>
|
|
<div>
|
|
<button>delete</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<button onClick={handleSubmit}>submit</button>
|
|
</div>
|
|
)
|
|
}
|