Component
interface UploadProps extends InputHTMLAttributes<HTMLInputElement> {
children: React.ReactNode;
accept?: string;
}
const Upload = ({
children,
name,
accept,
value,
onChange,
disabled,
...props
}: UploadProps): ReactElement => {
const inputRef = useRef<HTMLInputElement | null>(null);
InputHTMLAttributes<HTMLInputElement> 사용하면 해당 태그에 속한 속성들의 대한 타입은 지정해주지 않아도 알아서 설정된다
```
styled component
const StyledInput = styled.input<InputProps>`
width: ${({ width }) => (typeof width === 'number' ? `${width}rem` : width)};
height: ${({ height }) =>
typeof height === 'number' ? `${height}rem` : height};
padding: 0.5rem;
font-size: 1rem;
border: 0.063rem solid ${theme.color.greyMedium};
border-radius: ${({ round }) => (round ? '0.2rem' : 'none')};
${({ focus }) =>
focus
? `
&:focus {
border: 0.063rem solid ${theme.color.main};
}
`
: null}
`;