fix: 프로덕트 이미지 등록 조건 서버와 통일하기 (#226)

* fix: input accept 포맷 제한

- 이미지 중에서도 일부 포맷만 허용함

* design: `파일 첨부` 버튼 커서 모양 지정

* fix: 이미지 type 검사 조건 변경

src/drawer/components/OverviewImage/OverviewFileUpload/OverviewFileUpload.style.ts

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { Z_INDEX } from '@/constants/zIndex.constant';
 
 export const StyledFileUploadLabel = styled.label`
+  cursor: pointer;
   position: absolute;
   padding: 0.48rem 1.56rem;
   border-radius: 0.5rem;

src/drawer/components/OverviewImage/OverviewFileUpload/OverviewFileUpload.tsx

@@ -30,7 +30,7 @@ export const OverviewFileUpload = ({
       <input
         id={`overviewFile${index}`}
         type="file"
-        accept="image/*"
+        accept=".jpg, .jpeg, .png, .gif"
         style={{ display: 'none' }}
         onChange={(e) => handleInputChange(e, index)}
       />

src/drawer/components/OverviewImage/OverviewImage.tsx

@@ -2,6 +2,8 @@ import { ChangeEvent, useState, useEffect, useRef } from 'react';
 
 import { useFormContext } from 'react-hook-form';
 
+import { ALLOWED_IMAGE_TYPE } from '@/drawer/constants/image.constant';
+
 import { OverviewFileUpload } from './OverviewFileUpload/OverviewFileUpload';
 import {
   StyledImageUpload,
@@ -24,10 +26,10 @@ export const OverviewImage = () => {
   const handleFileChange = (file: File | undefined, index: number) => {
     setFiles((prevFiles) => {
       const newFiles = [...prevFiles];
-      if (file && file.type.substring(0, 5) === 'image') {
+      if (file && ALLOWED_IMAGE_TYPE.includes(file.type)) {
         newFiles[index] = file;
       } else {
-        alert('이미지 파일을 첨부해주세요.');
+        alert('이미지 포맷은 jpg, jpeg, png, gif 중 하나여야 합니다.');
       }
       return newFiles;
     });

src/drawer/components/ThumbnailInput/ThumbnailInput.tsx

@@ -4,6 +4,8 @@ import { IcPlusLine, IconContext } from '@yourssu/design-system-react';
 import { useFormContext } from 'react-hook-form';
 import { useTheme } from 'styled-components';
 
+import { ALLOWED_IMAGE_TYPE } from '@/drawer/constants/image.constant';
+
 import {
   StyledThumbnailContainer,
   StyledThumbnailDescription,
@@ -30,10 +32,10 @@ export const ThumbnailInput = ({ name }: StyledThumbnailProps) => {
   const handleChangeImg = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files !== null) {
       const file = event.target.files[0];
-      if (file && file.type.substring(0, 5) === 'image') {
+      if (file && ALLOWED_IMAGE_TYPE.includes(file.type)) {
         setPostImg(file);
       } else {
-        alert('이미지 파일을 첨부해주세요.');
+        alert('이미지 포맷은 jpg, jpeg, png, gif 중 하나여야 합니다.');
         setValue(name, null);
         setPostImg(null);
       }
@@ -67,7 +69,7 @@ export const ThumbnailInput = ({ name }: StyledThumbnailProps) => {
       <input
         id="inputFile"
         type="file"
-        accept="image/*"
+        accept=".jpg, .jpeg, .png, .gif"
         onChange={(event) => {
           handleChangeImg(event);
           onChange(event);

src/drawer/constants/image.constant.ts

@@ -0,0 +1 @@
+export const ALLOWED_IMAGE_TYPE = ['image/jpeg', 'image/png', 'image/gif'];