Merge pull request #246 from What-Today-FE/fix/mongdiwoo/240

체험 등록의 이미지 등록시 파일 크기 제한

Author: MyungJiwoo

apps/what-today/src/components/experiences/ImageInput.tsx

@@ -1,4 +1,4 @@
-import { Button, DeleteIcon, PlusIcon } from '@what-today/design-system';
+import { Button, DeleteIcon, PlusIcon, useToast } from '@what-today/design-system';
 import { useId, useRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -17,6 +17,7 @@ type ImageInputProps =
     };
 
 export default function ImageInput({ value, onChange, max, className }: ImageInputProps) {
+  const { toast } = useToast();
   const inputRef = useRef<HTMLInputElement>(null);
   const id = useId();
   let urls: string[] = [];
@@ -31,6 +32,25 @@ export default function ImageInput({ value, onChange, max, className }: ImageInp
     const file = e.target.files?.[0];
     if (!file) return;
 
+    const MAX_FILE_SIZE = 5 * 1024 * 1024; // 파일 최대 크기 5MB
+    if (file.size > MAX_FILE_SIZE) {
+      toast({
+        title: '이미지 업로드 오류',
+        description: '파일 크기는 5MB 이하여야 합니다',
+        type: 'error',
+      });
+      return;
+    }
+
+    if (!file.type.startsWith('image/')) {
+      toast({
+        title: '이미지 업로드 오류',
+        description: '이미지 파일만 업로드 가능합니다',
+        type: 'error',
+      });
+      return;
+    }
+
     const url = URL.createObjectURL(file);
 
     if (max === 1) {
@@ -80,7 +100,7 @@ export default function ImageInput({ value, onChange, max, className }: ImageInp
       </label>
 
       {/* 미리보기 이미지들 */}
-      <div className='flex w-full gap-12 overflow-x-scroll'>
+      <div className='flex w-full gap-12 overflow-x-auto'>
         {urls.map((preview, i) => (
           <div key={i} className='relative'>
             <div className='size-80 overflow-hidden rounded-xl border border-gray-100 bg-white md:size-100'>

packages/design-system/src/components/ProfileImageInput.tsx

@@ -1,6 +1,7 @@
 import Button from '@components/button';
 import { DeleteIcon } from '@components/icons';
 import { ProfileLogo } from '@components/logos';
+import { useToast } from '@components/Toast';
 import { useCallback, useEffect, useState } from 'react';
 
 interface ProfileImageInputProps {
@@ -70,6 +71,7 @@ export function DeleteButton({ onDelete }: { onDelete: () => void }) {
  * @param {(value: string) => void} onChange - 이미지가 변경되었을 때 호출되는 콜백 함수. base64 string 또는 URL을 인자로 받습니다.
  */
 export default function ProfileImageInput({ src, initial = src, onChange }: ProfileImageInputProps) {
+  const { toast } = useToast();
   const [initialSrc, setInitialSrc] = useState(initial);
   const [previewUrl, setPreviewUrl] = useState<string>(src);
 
@@ -88,12 +90,20 @@ export default function ProfileImageInput({ src, initial = src, onChange }: Prof
 
     const MAX_FILE_SIZE = 5 * 1024 * 1024; // 파일 최대 크기 5MB
     if (file.size > MAX_FILE_SIZE) {
-      alert('파일 크기는 5MB 이하여야 합니다.');
+      toast({
+        title: '이미지 업로드 오류',
+        description: '파일 크기는 5MB 이하여야 합니다',
+        type: 'error',
+      });
       return;
     }
 
     if (!file.type.startsWith('image/')) {
-      alert('이미지 파일만 업로드 가능합니다.');
+      toast({
+        title: '이미지 업로드 오류',
+        description: '이미지 파일만 업로드 가능합니다',
+        type: 'error',
+      });
       return;
     }