Feat: #80 프로필 이미지 URL 해제 코드 적용

GU-99 · Aug 26, 2024 · 9966f54 · 9966f54
1 parent b0ecc30
commit 9966f54
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/src/components/user/auth-form/ProfileImageContainer.tsx b/src/components/user/auth-form/ProfileImageContainer.tsx
@@ -4,6 +4,7 @@ import { useFormContext } from 'react-hook-form';
 import { convertBytesToString } from '@utils/converter';
 import { USER_SETTINGS } from '@constants/settings';
 import useToast from '@hooks/useToast';
+import { useEffect, useRef } from 'react';
 
 type ProfileImageContainerProps = {
   imageUrl: string;
@@ -13,8 +14,15 @@ type ProfileImageContainerProps = {
 export default function ProfileImageContainer({ imageUrl, setImageUrl }: ProfileImageContainerProps) {
   const { setValue } = useFormContext();
   const { toastWarn } = useToast();
+  const imageRef = useRef<string | null>(null);
+
+  // 컴포넌트 언마운트 시 이미지 URL 해제
+  useEffect(() => {
+    return () => {
+      if (imageRef.current) URL.revokeObjectURL(imageRef.current);
+    };
+  }, []);
 
-  // 이미지 관련 코드
   const handleChangeImg = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
 
@@ -29,9 +37,15 @@ export default function ProfileImageContainer({ imageUrl, setImageUrl }: Profile
     const image = URL.createObjectURL(file);
     setImageUrl(image);
     setValue('profileUrl', image);
+    imageRef.current = image;
   };
 
   const handleRemoveImg = () => {
+    if (imageRef.current) {
+      URL.revokeObjectURL(imageRef.current);
+      imageRef.current = null;
+    }
+
     setImageUrl('');
     setValue('profileUrl', '');
   };