19 lines
1.6 KiB
TypeScript
19 lines
1.6 KiB
TypeScript
import { useId, useRef, useState } from "react"
|
|
import { Card, CardContent, Button, Label, Input, Textarea, Checkbox } from "@hm-design/ui"
|
|
import { Heading } from "./Heading"
|
|
|
|
export function RequestForm() {
|
|
const id = useId()
|
|
const ref = useRef<HTMLInputElement>(null)
|
|
const [name, setName] = useState("")
|
|
const [description, setDescription] = useState("")
|
|
const [agreed, setAgreed] = useState(false)
|
|
const [status, setStatus] = useState("")
|
|
return <><Heading title="업무 요청" description="필수 이름과 동의를 확인한 뒤 제출합니다."/><Card><CardContent><form className="quality-fields" noValidate onSubmit={e => { e.preventDefault(); if (!name.trim()) { setStatus("이름을 입력하세요."); ref.current?.focus(); return } if (!agreed) { setStatus("동의가 필요합니다."); document.getElementById(`${id}-agree`)?.focus(); return } setStatus("요청이 제출되었습니다.") }}>
|
|
<Label htmlFor={`${id}-name`}>요청자 이름</Label><Input id={`${id}-name`} ref={ref} required aria-invalid={status === "이름을 입력하세요."} aria-describedby={`${id}-status`} value={name} onChange={e => setName(e.target.value)}/>
|
|
<Label htmlFor={`${id}-description`}>요청 내용</Label><Textarea id={`${id}-description`} value={description} onChange={e => setDescription(e.target.value)}/>
|
|
<div className="flex items-center gap-2"><Checkbox id={`${id}-agree`} checked={agreed} onCheckedChange={v => setAgreed(v === true)}/><Label htmlFor={`${id}-agree`}>처리에 동의합니다</Label></div>
|
|
<p id={`${id}-status`} role="status">{status}</p><Button type="submit">제출</Button>
|
|
</form></CardContent></Card></>
|
|
}
|