69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
'use client'
|
|
import { useState } from "react"
|
|
import { SurveyDetailRequest } from "@/types/Survey"
|
|
|
|
interface EtcCheckboxProps {
|
|
formName: keyof SurveyDetailRequest
|
|
label: string
|
|
detailInfoForm: SurveyDetailRequest
|
|
setDetailInfoForm: (form: SurveyDetailRequest) => void
|
|
}
|
|
|
|
export default function EtcCheckbox({ formName, label, detailInfoForm, setDetailInfoForm }: EtcCheckboxProps) {
|
|
const [showEtcInput, setShowEtcInput] = useState(false)
|
|
const etcFieldName = `${formName}_etc` as keyof SurveyDetailRequest
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<label htmlFor={formName} className="block font-medium">{label}</label>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
id={formName}
|
|
checked={detailInfoForm[formName] === 1}
|
|
onChange={(e) => setDetailInfoForm({
|
|
...detailInfoForm,
|
|
[formName]: e.target.checked ? 1 : 0
|
|
})}
|
|
/>
|
|
<label htmlFor={formName}>있음</label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
id={`${formName}_etc_check`}
|
|
checked={showEtcInput}
|
|
onChange={(e) => {
|
|
setShowEtcInput(e.target.checked)
|
|
if (!e.target.checked) {
|
|
setDetailInfoForm({
|
|
...detailInfoForm,
|
|
[etcFieldName]: ''
|
|
})
|
|
}
|
|
}}
|
|
/>
|
|
<label htmlFor={`${formName}_etc_check`}>기타</label>
|
|
|
|
{showEtcInput && (
|
|
<input
|
|
type="text"
|
|
id={`${formName}_etc`}
|
|
value={(detailInfoForm[etcFieldName] as string | null) ?? ''}
|
|
placeholder="기타 사항을 입력하세요"
|
|
onChange={(e) => setDetailInfoForm({
|
|
...detailInfoForm,
|
|
[etcFieldName]: e.target.value
|
|
})}
|
|
className="border rounded px-2 py-1 ml-2"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|