diff --git a/src/drawer/components/OverviewImage/OverviewFileUpload/OverviewFileUpload.style.ts b/src/drawer/components/OverviewImage/OverviewFileUpload/OverviewFileUpload.style.ts index 6b78c0ef..b5d872e5 100644 --- a/src/drawer/components/OverviewImage/OverviewFileUpload/OverviewFileUpload.style.ts +++ b/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; diff --git a/src/drawer/components/OverviewImage/OverviewFileUpload/OverviewFileUpload.tsx b/src/drawer/components/OverviewImage/OverviewFileUpload/OverviewFileUpload.tsx index 51b45d5f..4e2494e3 100644 --- a/src/drawer/components/OverviewImage/OverviewFileUpload/OverviewFileUpload.tsx +++ b/src/drawer/components/OverviewImage/OverviewFileUpload/OverviewFileUpload.tsx @@ -30,7 +30,7 @@ export const OverviewFileUpload = ({ handleInputChange(e, index)} /> diff --git a/src/drawer/components/OverviewImage/OverviewImage.tsx b/src/drawer/components/OverviewImage/OverviewImage.tsx index 49b49b2e..5e29abb0 100644 --- a/src/drawer/components/OverviewImage/OverviewImage.tsx +++ b/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; }); diff --git a/src/drawer/components/ThumbnailInput/ThumbnailInput.tsx b/src/drawer/components/ThumbnailInput/ThumbnailInput.tsx index 46a38bd3..60ec9944 100644 --- a/src/drawer/components/ThumbnailInput/ThumbnailInput.tsx +++ b/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) => { 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) => { { handleChangeImg(event); onChange(event); diff --git a/src/drawer/constants/image.constant.ts b/src/drawer/constants/image.constant.ts new file mode 100644 index 00000000..6cd0f2f2 --- /dev/null +++ b/src/drawer/constants/image.constant.ts @@ -0,0 +1 @@ +export const ALLOWED_IMAGE_TYPE = ['image/jpeg', 'image/png', 'image/gif'];