비디오 에디터 - 1 (UI 구현, 업로드 기능)

비디오 업로드
비디오 재생
비디오 편집
비디오 추출

4가지 기능이 있는 비디오 에디터를 만들게 됐다.

UI 구현 및 업로드 기능

그냥 간단하게 ui 기능과 업로드 기능을 만들었다

새롭게 배운 부분은

<input
	type="file"
	id="fileInput"
	accept="video/*"
	style={{ display: 'none' }}
	onChange={handleFileChange}
/>

업로드를 할 때 input 태그를 이용해서 파일을 불러올 수 있는데

input태그는 스타일링의 어려움이 있다

그래서 나는 label태그와 for (jsx에서는 htmlFor) 속성을 이용해서

const UploadButton = styled.label`
`

<UploadButton htmlFor="fileInput">Upload Video</UploadButton>

이런 식으로 id를 참조해서 label이 클릭되면 자동으로 input이 눌리게끔 설정했다