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 { FoxChip } from '@fox/core/components/fox-chip';
import { FoxChipArea } from '@fox/core/components/fox-chip-area';
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_MENU_OPTIONS,
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;
menuCodes: string[];
onMenuCodesChange: (menuCodes: string[]) => void;
emailField: ReactNode;
errors: AdminMemberFormErrors;
}
export function AdminMemberFormFields({
phoneNumber,
onPhoneNumberChange,
roleCode,
onRoleCodeChange,
menuCodes,
onMenuCodesChange,
emailField,
errors,
}: AdminMemberFormFieldsProps) {
const phoneLabelId = useId();
const menuLabelId = useId();
const allMenuValues = ADMIN_MENU_OPTIONS.map((option) => option.value);
const isAllSelected = menuCodes.length === allMenuValues.length;
function toggleMenu(value: string) {
onMenuCodesChange(
menuCodes.includes(value)
? menuCodes.filter((code) => code !== value)
: [...menuCodes, value]
);
}
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} />
<div className={styles.field} role="group" aria-labelledby={menuLabelId}>
<FoxFormLabel as="span" id={menuLabelId} requirement="required">
메뉴 선택
</FoxFormLabel>
<FoxChipArea size="md" wrap labelledBy={menuLabelId}>
<FoxChip
type="check"
label="전체"
checked={isAllSelected}
onCheckedChange={(checked) =>
onMenuCodesChange(checked ? allMenuValues : [])
}
/>
{ADMIN_MENU_OPTIONS.map((option) => (
<FoxChip
key={option.value}
type="check"
label={option.label}
checked={menuCodes.includes(option.value)}
onCheckedChange={() => toggleMenu(option.value)}
/>
))}
</FoxChipArea>
</div>
{menuCodes.map((code) => (
<input key={code} type="hidden" name="menuCodes" value={code} />
))}
</>
);
}