feat: MediaUpload 기존 이미지가 있는 경우 대응

Author: keemsebin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ddingdong-design-system",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "keywords": [
     "react",

src/shared/ui/MediaUpload/MediaUpload.stories.tsx

@@ -42,3 +42,13 @@ export const MultipleMode: Story = {
     multiple: true,
   },
 };
+
+export const EditMode: Story = {
+  args: {
+    multiple: true,
+    initialPreviewUrls: [
+      'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop',
+    ],
+    initialFiles: [new File([], 'test.jpg')],
+  },
+};

src/shared/ui/MediaUpload/MediaUpload.tsx

@@ -45,6 +45,14 @@ export type Props = {
    * @default false
    */
   multiple?: boolean;
+  /**
+   * initial preview urls for edit mode (e.g., existing uploaded image urls)
+   */
+  initialPreviewUrls?: string[];
+  /**
+   * initial files for edit mode (if available).
+   */
+  initialFiles?: File[];
 } & Omit<ComponentProps<'input'>, 'id'>;
 
 const GB = 1024 * 1024 * 1024;
@@ -58,17 +66,21 @@ export function MediaUpload({
   maxSize = 5,
   acceptedFormats = ['image/*'],
   multiple = false,
+  initialPreviewUrls,
+  initialFiles,
   ...props
 }: Props) {
   const generatedId = useId();
   const inputId = id || generatedId;
 
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-  const [previewUrls, setPreviewUrls] = useState<string[]>([]);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>(initialFiles || []);
+  const [previewUrls, setPreviewUrls] = useState<string[]>(initialPreviewUrls || []);
   const isSelected = selectedFiles.length > 0;
 
   const handleReset = () => {
-    previewUrls.forEach((url) => URL.revokeObjectURL(url));
+    previewUrls.forEach((url) => {
+      if (url.startsWith('blob:')) URL.revokeObjectURL(url);
+    });
     setSelectedFiles([]);
     setPreviewUrls([]);
     onFileUpload?.(null);
@@ -92,7 +104,10 @@ export function MediaUpload({
   };
 
   const handleRemoveFile = (index: number) => {
-    URL.revokeObjectURL(previewUrls[index]);
+    const urlToRemove = previewUrls[index];
+    if (urlToRemove?.startsWith('blob:')) {
+      URL.revokeObjectURL(urlToRemove);
+    }
     const newFiles = selectedFiles.filter((_, i) => i !== index);
     const newUrls = previewUrls.filter((_, i) => i !== index);
 
@@ -162,7 +177,10 @@ function RefreshButton({ handleReset, isSelected }: RefreshButtonProp) {
   return (
     <Flex
       as="button"
-      onClick={isSelected ? handleReset : undefined}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (isSelected) handleReset();
+      }}
       alignItems="center"
       className={`text-primary-300 justify-end ${isSelected ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'}`}
       aria-label="초기화"

src/shared/ui/MediaUpload/MediaUploadPreview.tsx

@@ -20,7 +20,7 @@ export function MediaPreview({ files, previewUrls, onRemoveFile, multiple }: Pro
           <button
             type="button"
             onClick={() => onRemoveFile(index)}
-            className="absolute top-2 right-2 rounded-full bg-white/75 p-1"
+            className="absolute top-2 right-2 cursor-pointer rounded-full bg-white/75 p-1"
           >
             <Icon name="close" size={14} />
           </button>