[Next.js] 파일 제출 버튼 스타일링 예시 코드

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; // 기존 버튼 숨기기
`;