[feat] 이미지 업로드 파일 크기 제한 상향#136

[Han-Joon-Hyeok]

개요

게시물 업로드 이미지와 프로필 업로드 이미지 파일의 크기 제한을 상향합니다.
최신 기종 스마트폰의 사진 품질이 높아서 모바일에서 이미지를 업로드 하지 못하는 문제를 해결하기 위한 방안입니다. (10MB 넘는 경우도 있음)

게시물 업로드 이미지

	1개당 용량	개수	총 용량
기존	1MB	5개	5MB
변경	10MB	5개	50MB

프로필 업로드 이미지

	1개당 용량	개수	총 용량
기존	1MB	1개	1MB
변경	10MB	1개	10MB

작업 내용

1. MAX_FILE_SIZE 상수 추가

가독성 향상을 위해 이미지 최대 크기를 constant.ts 파일에 MAX_FILE_SIZE 상수로 설정했습니다.

기존 코드

// constant.ts
export const MB = 1024 * 1024;

// page.tsx
if (file.size > 1 * MB) {
  // ...
}

변경 코드

// constant.ts
export const MB = 1024 * 1024;
export const MAX_FILE_SIZE = 10 * MB;

// page.tsx
if (file.size > MAX_FILE_SIZE) {
  // ...
}

2. 이미지 유효성 검사 메서드 추출

이미지 유효성을 검사하는 조건문과 배열 순회 메서드에서 사용하는 콜백 메서드를 별도의 메서드로 추출하였습니다.

기존 코드

// page.tsx
if (!fileList.every((file) => validImageExtensions.includes(file.type))) {
  // ...
}

변경 코드

// imageUploadUtils.ts
export const isValidImageExtension = (image: File): boolean => {
  return SUPPORTED_IMAGE_EXTENSIONS.includes(image.type);
};

// page.tsx
if (!fileList.every(isValidImageExtension)) {
  // ...
}

3. 하드 코딩 에러 메세지 enum 변수로 대체

이미지 유효성 검사 시 표시하는 하드 코딩 되어 있던 오류 메세지를 일관성 향상을 위해 enum에 선언한 값으로 변경했습니다.

기존 코드

// page.tsx
setToastPopup({
    message: "지원되는 파일 형식은 JPEG, JPG, PNG, GIF입니다.",
    top: false,
    success: false,
  });
  setError("photos", {
    message: "지원되는 파일 형식은 JPEG, JPG, PNG, GIF입니다.",
  });
  return;
}

변경 코드

// page.tsx
setToastPopup({
  message: PopupErrorMessage.UnsupportedFileType,
  top: false,
  success: false,
});
setError("photos", {
  message: PopupErrorMessage.UnsupportedFileType,
});
return;

4. enum을 객체로 변경

기존에 enum으로 선언되어 있던 PopupErrorMessage를 객체로 변경했습니다.
객체로 변경한 이유는 constant.ts 파일에 선언한 이미지 확장자와 이미지 파일 최대 크기를 동적으로 가져와서 문자열을 생성하기 위함입니다.
enum은 컴파일 시점에 리터럴 값으로 존재해야 하지만, 지원하는 이미지 형식 문자열을 map() 메서드를 이용해서 생성하다보니 런타임 시점에서 생성되어야 한다고 합니다.

기존 코드

// popupMessage.ts
export enum PopupErrorMessage {
  ReLoginRequired = "다시 로그인 해 주세요",
  UnsupportedFileType = "지원되는 파일 형식은 JPEG, JPG, PNG, GIF입니다.",
  FileSizeExceeded = "파일 크기는 1MB를 초과할 수 없습니다.",
}

변경 코드

// popupMessage.ts
import {
  MAX_FILE_SIZE,
  MB,
  SUPPORTED_IMAGE_EXTENSIONS,
} from "@/libs/constants";

const supportedFileTypes = SUPPORTED_IMAGE_EXTENSIONS.map(
  (type) => type.split("/")[1]
).join(", ");

export const PopupErrorMessage = {
  ReLoginRequired: "다시 로그인 해 주세요",
  UnsupportedFileType: `지원되는 파일 형식은 ${supportedFileTypes} 입니다.`,
  FileSizeExceeded: `파일 크기는 ${MAX_FILE_SIZE / MB}MB를 초과할 수 없습니다.`,
} as const;

[404yonara]

파일확장자와 파일크기 동적으로 하는거가 맞는것같네요. 수고많으셨습니다.

[404yonara]

이런경우에는 제가 풀리퀘스트를 눌러도 되는건가유?

[Han-Joon-Hyeok]

네네 풀리퀘 눌러주셔도 됩니당