From 783897916198cd23a1e69d4efbdf0742cece4296 Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Mon, 4 Aug 2025 14:52:01 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20[#240]=20Refactor:=20P?= =?UTF-8?q?rofileIMageInput=EC=97=90=EC=84=9C=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=EB=A5=BC=20=ED=86=A0=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EB=A9=94=EC=8B=9C=EC=A7=80=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ProfileImageInput.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/design-system/src/components/ProfileImageInput.tsx b/packages/design-system/src/components/ProfileImageInput.tsx index bbc43e7f..7f309113 100644 --- a/packages/design-system/src/components/ProfileImageInput.tsx +++ b/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(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; } From 83ce7a9fd30d46fd4c3f2273d47163c56cf5add4 Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Mon, 4 Aug 2025 14:52:37 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=90=9B=20[#240]=20Fix:=20=EC=B2=B4?= =?UTF-8?q?=ED=97=98=20=EB=93=B1=EB=A1=9D=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EB=93=B1=EB=A1=9D=EC=8B=9C=20=ED=8C=8C=EC=9D=BC=20=EC=9A=A9?= =?UTF-8?q?=EB=9F=89=EC=9D=84=205MB=EB=A1=9C=20=EC=A0=9C=ED=95=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/experiences/ImageInput.tsx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/apps/what-today/src/components/experiences/ImageInput.tsx b/apps/what-today/src/components/experiences/ImageInput.tsx index ecb5b245..854965f4 100644 --- a/apps/what-today/src/components/experiences/ImageInput.tsx +++ b/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(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) { From a11fac2d397f479d32d0247625b6e5e8ae083db5 Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Mon, 4 Aug 2025 14:58:09 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=90=9B=20[#240]=20Fix:=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0?= =?UTF-8?q?=EC=9D=98=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EC=9D=84=20auto?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/what-today/src/components/experiences/ImageInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/what-today/src/components/experiences/ImageInput.tsx b/apps/what-today/src/components/experiences/ImageInput.tsx index 854965f4..b0cf4a4d 100644 --- a/apps/what-today/src/components/experiences/ImageInput.tsx +++ b/apps/what-today/src/components/experiences/ImageInput.tsx @@ -100,7 +100,7 @@ export default function ImageInput({ value, onChange, max, className }: ImageInp {/* 미리보기 이미지들 */} -
+
{urls.map((preview, i) => (