FileUploader 버그 해결하기

[NamJwong]

⛓ Related Issues

• close FileUploader 버그 해결하기 #191

📋 작업 내용

• 버그 원인 파악
• 원인이 되는 조건문 삭제 및 분기 처리 조건 수정

📌 PR Point

어떤 버그인가!

파일 선택 창에서 파일을 선택하지 않고 취소를 눌렀을 때 뜨는 '이미지 파일을 첨부해주세요' 토스트가 뜨는 경우에 대한 일관성이 없습니다

input 클릭(파일 선택 창 띄우기) -> 사진 선택 -> 확인 -> input 클릭(파일 선택 창 띄우기) -> 취소

이미지 파일을 선택한 상태에서 재선택을 위해 파일 선택 창을 열었다가 선택하지 않고 취소를 누른 경우인데요
이 과정을 실행했을 때 '이미지 파일을 첨부해주세요'라는 토스트가 뜹니다

그런데 이이후에

input 클릭(파일 선택 창 띄우기) -> 취소

위 과정을 재실행하면 토스트가 뜨지 않습니다
이미지가 선택된 상태에서 최초 1회에만 파일 선택 시도 후 선택하지 않을 시 토스트가 뜨는 것입니다

또한 아예 뷰에 첫접속 시 파일 선택 창을 열었다가 취소 시에는 토스트가 뜨지 않습니다

기존 코드를 보니!

const fileInputHandler = async (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    if (e.target.files !== null) {
      const file = e.target.files[0];
      if (!file) return fireToast({ content: '이미지 파일을 첨부해주세요' }); // 여기
      if (file.name.match(imgFileForm)) {
        if (checkBrowser('Internet Explorer')) {
          setNewFile(file);
          setFileThumbnail(URL.createObjectURL(file));
        } else {
          const { imageBlob, resizedImageFile } = await resizeImage(file, 500);
          setNewFile(resizedImageFile);
          setFileThumbnail(URL.createObjectURL(imageBlob));
        }
      } else {
        fireToast({ content: '이미지 파일을 첨부해주세요' });
      }
    }
  };

이 버그에서 다루고 있는 토스트는 '여기'라고 주석 달은 부분에서 띄워줍니다

제가 봤을 때 저 조건문의 의도는 파일 선택 창에서 파일을 선택하지 않은 경우에 토스트를 띄워주려는 것 같은데
그게 맞다면 onChange 이벤트로는 완벽하게 처리를 못할 것 같아요

왜냐하면 직접 테스트 해보니 애초에 file 타입 input의 onChange가 실행되는 조건이 아래와 같기 때문이에요

1. 파일 선택 창에서 파일 선택 후 확인을 눌렀을 때
2. 1.을 실행한 뒤 최초 1회에 한하여 파일 선택 창에서 취소 버튼을 눌렀을 때

이러한 이유로 토스트가 일관성 없이 떴었던 것이었습니다

만약 이 의도대로 하려면 onClick 이벤트를 넣어서 처리해줘야 할 것 같은데,
저는 애초에 굳이 파일 선택 창에서 파일을 선택하지 않았다고 토스트를 띄우지 않아도 된다고 생각이 돼서 그냥 이 조건문 자체를 지워버렸습니다! (혹시 다른 생각이라면 코멘트 남겨주세요!)
대신 위의 2번 경우에서 e.target.files가 빈 배열이기 때문에 가장 바깥 조건문에 e.target.files의 길이를 검사하는 조건을 추가했습니다

👀 스크린샷 / GIF / 링크

https://naegasogaeseo-dev.kro.kr/team/register

[SeojinSeojin]

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

[SeojinSeojin]

생각했던 과정들 다 이해 잘 되게 적어주셔서 감사혀유~!!

언니가 한 방법처럼 토스트를 띄우지 말고 파일 없는 경우만 걸러주는게 좋을 것 같네유!

[100Gyeon]

PR 꼼꼼하게 적어줘서 이해하기 좋네용 ㅎㅎ 👍🏻

[100Gyeon]

import React, { useEffect, useRef, useState } from 'react';
import { useToast } from '@hooks/useToast';
import { checkBrowser } from '@utils/browser';
import { resizeImage } from '@utils/image';
import { StImgPreview, StFileUpload, StUploadBtn } from './style';

전에 회의했던 대로 import 구문 순서만 요렇게 같이 수정해서 머지하면 더 좋을 것 같아용 ~~

[NamJwong]

import React, { useEffect, useRef, useState } from 'react';
import { useToast } from '@hooks/useToast';
import { checkBrowser } from '@utils/browser';
import { resizeImage } from '@utils/image';
import { StImgPreview, StFileUpload, StUploadBtn } from './style';

전에 회의했던 대로 import 구문 순서만 요렇게 같이 수정해서 머지하면 더 좋을 것 같아용 ~~

냅!

[SeojinSeojin]

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~