[ETC] ImageUpload 이미지 허용 파일 범위 문제

[SEMINSEMINSEMIN]

문제 상황

ImageUpload.jsx

import React from "react";
import { ImgUploadIcon } from "./imageUpload.style";

export default function ImageUpload({ btnStyle, onChangeByUpper }) {
    const handleFileChange = (event) => {
        const selectedFile = [...event.target.files];
        const fileReader = new FileReader();

        onChangeByUpper(selectedFile, fileReader);
    };

    return (
        <ImgUploadIcon className={btnStyle}>
            <span className="ir">이미지 첨부</span>
            <input
                className="ir"
                type="file"
                accept="image/*"
                onChange={handleFileChange}
            />
        </ImgUploadIcon>
    );
}

webp와 같은 서버에서 처리 불가능한 이미지 등록시 이미지가 서버에 제대로 등록이 안 됨 => 이미지가 서버에 제대로 등록은 안 됐는데 게시글 등록은 됨 => 나중에 게시글 이미지가 깨지는 현상

해결

• [x] 등록되는 이미지 제한

• [x] 이미지 서버에서 제대로 등록 안 될 경우 게시글 등록도 안 되게 에러 핸들링 필요: 등록되는 이미지 제한을 이미 해서, 이 외의 경우는 catch에 다 걸려서 잘 되는거 같음!

  try {
  const res = await fetch(
      "https://mandarin.api.weniv.co.kr/image/uploadfile",
      {
          method: "POST",
          body: submitData.current.imageBeforeSubmit,
      }
  );
  const json = await res.json();
  
  submitData.current["image"] =
      "https://mandarin.api.weniv.co.kr/" + json.filename;
  submitData.current["username"] = accountName.current.value;
  submitData.current["accountname"] = accountId.current.value;
  submitData.current["intro"] = about.current.value;
  onSubmitByUpper(submitData);
  console.log("회원가입 성공 - 1");
  } catch (err) {
  console.log(err);
  }

• [x] 스타일: 이미지 등록 아이콘 네브바 생길 때 더 위로 올려야 함

[github-actions[bot]]

Branch bug/issue-198 created for issue: [ETC] ImageUpload 이미지 허용 파일 범위 문제