프론트엔드 UI 작성 노트

해당 파트의 UI를 작성하고 있는데 tailwind를 이용한 모바일의 UI를 작성해보는 중 입니다.

이미지를 첨부해서 넣으면 이미지를 통한 결과 값을 받는 웹 브라우저이며

간단한 입력 화면이며 파일을 선택하여 이미지를 넣어주면

해당 이미지에 대한 미리보기가 나오고

이미지가 아닌 다른 형식의 파일을 업로드시

오류 메세지가 나오며 이미지 파일을 업로드 해달라는 메세지가 나옵니다.

만들어줘 입력 버튼을 누르면 변환중이라는 메세지와 함께 진행 spinner가 돌아가는 식으로 되어 있으며
이 단계에서 이미지를 서버로 넘기고 이미지에 대한 변환 데이터를 받아 변경하는 식으로 되어 있습니다.

보완점 : 이미지 파일이외에 다른 파일을 넣으면 오류 메세지가 나오지만 만들어줘 버튼을 눌러도 동작이 되기 때문에 해당 부분에 대한 예외 처리가 들어가야 할 것으로 생각이 됩니다.