diff --git a/src/components/Common/OptionButton.tsx b/src/components/Common/OptionButton.tsx index bf76d89..40999d9 100644 --- a/src/components/Common/OptionButton.tsx +++ b/src/components/Common/OptionButton.tsx @@ -80,7 +80,7 @@ const CircleInner = styled.div<{ size: string }>` case "small": return tw`w-2 h-2 left-[4px] top-[4px]`; case "large": - return tw`w-3 h-3 left-[8px] top-[8px]`; + return tw`w-3 h-3 left-[9px] top-[9px]`; default: return tw`w-2.5 h-2.5 left-[6px] top-[6px]`; } diff --git a/src/components/WriteReview/UploadImageSection.tsx b/src/components/WriteReview/UploadImageSection.tsx index 20cbc0b..62ebdba 100644 --- a/src/components/WriteReview/UploadImageSection.tsx +++ b/src/components/WriteReview/UploadImageSection.tsx @@ -2,6 +2,7 @@ import tw from "twin.macro"; import styled from "styled-components"; import CameraSvg from "../../assets/images/camera.svg?react"; import { MdDeleteOutline } from "react-icons/md"; +import {useEffect, useMemo} from "react"; type UploadImageProps = { imageFiles: File[]; setImageFiles: React.Dispatch>; @@ -14,6 +15,8 @@ function UploadImageSection({ imageFiles, setImageFiles }: UploadImageProps) { const newFiles = [...prevFiles, ...filesArray]; return newFiles; }); + // 파일 선택 후 input의 값을 초기화하여 동일 파일 업로드 가능하게 만듦 + event.target.value = ""; } }; const handleImageDelete = (index: number) => { @@ -21,7 +24,19 @@ function UploadImageSection({ imageFiles, setImageFiles }: UploadImageProps) { const updatedFiles = imageFiles.filter((_, i) => i !== index); setImageFiles(updatedFiles); }; - + + // imageFiles가 변경될 때만 URL 생성 + const imageUrls = useMemo(() => { + return imageFiles.map((file) => URL.createObjectURL(file)); + }, [imageFiles]); + + // Blob URL 해제 + useEffect(() => { + return () => { + imageUrls.forEach((url) => URL.revokeObjectURL(url)); + }; + }, [imageUrls]); + return (