정방형 썸네일 메이커 제작기 - 3

개선점 리스트
1. 리셋 버튼 클릭시 초기값이 value에도 들어감
2. 이미지 저장 버튼이 없음
3. 스타일을 조금 더 컴포넌트화 할 것

1. 리셋버튼 클릭시 개선
   리셋버튼 클릭 값이 들어가는 점은 클릭/더블클릭으로 수정하기로 하였다.

2. 이미지 저장
   리액트가 없다면 html2canvas를 사용하는 경우가 많았는데 리액트는 패키지 설치로 끝낼 수 있었다.
   react-component-export-image를 설치하였고 Demo 파일을 참고하여 useRef로 변환한 뒤 사용해 빠르게 적용할 수 있었다.

문제점
화면에 띄워진 이미지 사이즈를 기준으로 만들기 때문에 원래 예상한 800*800 사이즈는 화면을 가득 채워 400*400 사이즈로 변환.
수정이 필요하다.

3. 스타일 컴포넌트화
   styled.js로 분리하여
   import * as style from './Styled'; 로 연결
   폰트 사이즈는 제각각 달라 props를 받아 적용되게 했다.

버튼의 경우 마우스를 올려도 변화하지 않아 &: hover { cursor: pointer } 로 커서의 모양이 변하도록 했다.

그리하여 어느정도 기본적인 기능이 다 들어가 배포하게 된 정방형 썸네일 메이커

➡ Demo