const FileSelectButton = () => {
const [file, setFile] = useState<File | null>(null);
function handleFileSelectChange(e: React.ChangeEvent<HTMLInputElement>) {
const file = e.target.files?.[0];
if (file) {
setFile(file);
}
}
return (
<>
<FileSelectButton_Container>
<FileSelectButton_Label htmlFor="file">
<ImageRounded />
<Typography variant="caption">
최대 10MB 이하
<br />
.jpg, .png 첨부가능
</Typography>
</FileSelectButton_Label>
<FileSelectButton_Input type="file" id="file" onChange={onChange}></FileSelectButton_Input>
</FileSelectButton_Container>
</>
);
};
export const FileSelectButton_Container = styled("div")``;
export const FileSelectButton_Label = styled("label")`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 8px;
width: 100%;
height: 150px;
text-align: center;
background-color: ${({ theme }) => theme.palette.background.default};
border: 3px dashed ${({ theme }) => theme.palette.primary.main};
color: ${({ theme }) => theme.palette.primary.main};
border-radius: 16px;
`;
export const FileSelectButton_Input = styled("input")`
display: none; // 기존 버튼 숨기기
`;