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'];