Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 326x 1x 1x 1x | import { forwardRef, type ReactNode } from 'react';
import { cn } from '@/lib/utils';
// 둘 다 없음
interface NoneIcons {
frontIcon?: undefined;
iconButton?: undefined;
}
// frontIcon만
interface OnlyFront {
frontIcon: ReactNode;
iconButton?: undefined;
}
// backIcon만
interface OnlyBack {
frontIcon?: undefined;
iconButton: ReactNode;
}
type InputProps = (NoneIcons | OnlyFront | OnlyBack) & React.InputHTMLAttributes<HTMLInputElement>;
export const Input = forwardRef<HTMLInputElement, InputProps>(
({ className, type, iconButton, frontIcon, ...props }, ref) => {
const hasIcon = !!iconButton;
const hasFrontIcon = !!frontIcon;
return (
<div className='relative w-full'>
{frontIcon}
<input
ref={ref}
className={cn(
'text-text-md-medium w-full px-4 py-4 text-gray-800 placeholder:text-gray-500 focus:outline-none',
hasIcon && 'pr-11',
hasFrontIcon && 'pl-11',
className,
)}
type={type}
{...props}
/>
{iconButton}
</div>
);
},
);
Input.displayName = 'Input';
|