File name
Commit message
Commit date
File name
Commit message
Commit date
09-03
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} />
</>
);
}