File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
'use client';
import { useId, type ReactNode } from 'react';
import { FoxFormLabel } from '@fox/core/components/fox-form-label';
import { FoxPhoneNumber } from '@fox/core/components/fox-phone-number';
import { FoxSelect } from '@fox/core/components/fox-select';
import { ADMIN_ROLE_OPTIONS } from '@/lib/domain/admin-member';
import type { AdminMemberFormErrors } from '@/lib/domain/admin-member-form';
import { MOBILE_PHONE_PREFIXES } from '@/lib/domain/phone-number';
import styles from './admin-member-modal.module.scss';
interface AdminMemberFormFieldsProps {
phoneNumber: string;
onPhoneNumberChange: (phoneNumber: string) => void;
roleCode: string;
onRoleCodeChange: (roleCode: string) => void;
emailField: ReactNode;
errors: AdminMemberFormErrors;
}
export function AdminMemberFormFields({
phoneNumber,
onPhoneNumberChange,
roleCode,
onRoleCodeChange,
emailField,
errors,
}: AdminMemberFormFieldsProps) {
const phoneLabelId = useId();
return (
<>
<div className={styles.field} role="group" aria-labelledby={phoneLabelId}>
<FoxFormLabel as="span" id={phoneLabelId} requirement="required">
휴대전화 번호
</FoxFormLabel>
<FoxPhoneNumber
type="unit"
prefixOptions={[...MOBILE_PHONE_PREFIXES]}
value={phoneNumber}
onChange={onPhoneNumberChange}
message={errors.phoneNumber}
invalid={Boolean(errors.phoneNumber)}
/>
</div>
<input type="hidden" name="phoneNumber" value={phoneNumber} />
{emailField}
<FoxSelect
size="md"
label="역할 선택"
options={ADMIN_ROLE_OPTIONS.map((option) => ({
value: option.value,
label: option.label,
}))}
value={roleCode}
onValueChange={onRoleCodeChange}
error={Boolean(errors.roleCode)}
hint={errors.roleCode}
/>
<input type="hidden" name="roleCode" value={roleCode} />
</>
);
}