fix: controlled 방식으로 변경

Author: yougyung

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MediaUpload, Props } from './MediaUpload';
@@ -11,6 +12,25 @@ const meta = {
 export default meta;
 type Story = StoryObj<Props>;
 
+function MediaUploadStoryWrapper(args: Props & { serverResponseUrl?: string[] }) {
+  const [previewUrls, setPreviewUrls] = useState<string[]>(args.serverResponseUrl ?? []);
+  const [previewFiles, setPreviewFiles] = useState<File[]>([]);
+
+  const handleFileChange = (files: File[] | null, urls: string[]) => {
+    setPreviewFiles(files || []);
+    setPreviewUrls(urls);
+  };
+
+  return (
+    <MediaUpload
+      {...args}
+      previewUrls={previewUrls}
+      previewFiles={previewFiles}
+      onFileChange={handleFileChange}
+    />
+  );
+}
+
 export const Basic: Story = {
   argTypes: {
     label: { control: { type: 'text' } },
@@ -19,7 +39,7 @@ export const Basic: Story = {
     maxSize: { control: { type: 'number', min: 1, step: 1 } },
     acceptedFormats: { control: 'text' },
   },
-  render: (args) => <MediaUpload {...args} />,
+  render: (args) => <MediaUploadStoryWrapper {...args} />,
 };
 
 export const UploadFormats: Story = {
@@ -29,26 +49,30 @@ export const UploadFormats: Story = {
     maxSize: 3,
     acceptedFormats: ['image/*', 'video/*'],
   },
+  render: (args) => <MediaUploadStoryWrapper {...args} />,
 };
 
 export const WithTopAffix: Story = {
   args: {
     topAffix: '제목처럼 추가할 수 있어요',
   },
+  render: (args) => <MediaUploadStoryWrapper {...args} />,
 };
 
 export const MultipleMode: Story = {
   args: {
     multiple: true,
   },
+  render: (args) => <MediaUploadStoryWrapper {...args} />,
 };
 
 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')],
-  },
+  render: (args) => (
+    <MediaUploadStoryWrapper
+      {...args}
+      serverResponseUrl={[
+        'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop',
+      ]}
+    />
+  ),
 };

src/shared/ui/MediaUpload/MediaUpload.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, useId, useState } from 'react';
+import { ComponentProps, useId } from 'react';
 
 import { MediaPreview } from './MediaUploadPreview';
 
@@ -46,44 +46,43 @@ export type Props = {
    */
   multiple?: boolean;
   /**
-   * initial preview urls for edit mode (e.g., existing uploaded image urls)
+   * Array of preview URLs to display existing media
    */
-  initialPreviewUrls?: string[];
+  previewUrls?: string[];
   /**
-   * initial files for edit mode (if available).
+   * Array of preview File objects for new uploads
    */
-  initialFiles?: File[];
+  previewFiles?: File[] | null;
+  /**
+   * Callback function called when files are selected, removed, or reset
+   */
+  onFileChange?: (files: File[] | null, previewUrls: string[]) => void;
 } & Omit<ComponentProps<'input'>, 'id'>;
 
 const GB = 1024 * 1024 * 1024;
 
 export function MediaUpload({
   topAffix,
-  onFileUpload,
   id,
   label = '파일을 업로드해주세요. (jpg, jpeg, png)',
   description = '* 파일은 5GB까지 업로드 가능합니다.',
   maxSize = 5,
   acceptedFormats = ['image/*'],
   multiple = false,
-  initialPreviewUrls,
-  initialFiles,
+  previewFiles = [],
+  previewUrls = [],
+  onFileChange,
   ...props
 }: Props) {
   const generatedId = useId();
   const inputId = id || generatedId;
-
-  const [selectedFiles, setSelectedFiles] = useState<File[]>(initialFiles || []);
-  const [previewUrls, setPreviewUrls] = useState<string[]>(initialPreviewUrls || []);
-  const isSelected = selectedFiles.length > 0;
+  const isSelected = previewUrls.length > 0;
 
   const handleReset = () => {
     previewUrls.forEach((url) => {
       if (url.startsWith('blob:')) URL.revokeObjectURL(url);
     });
-    setSelectedFiles([]);
-    setPreviewUrls([]);
-    onFileUpload?.(null);
+    onFileChange?.(null, []);
   };
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -97,23 +96,18 @@ export function MediaUpload({
     }
 
     const validatedFiles = multiple ? files : [files[0]];
-    setSelectedFiles(validatedFiles);
     const urls = validatedFiles.map((file) => URL.createObjectURL(file));
-    setPreviewUrls(urls);
-    onFileUpload?.(validatedFiles);
+    onFileChange?.(validatedFiles, urls);
   };
 
   const handleRemoveFile = (index: number) => {
     const urlToRemove = previewUrls[index];
-    if (urlToRemove?.startsWith('blob:')) {
-      URL.revokeObjectURL(urlToRemove);
-    }
-    const newFiles = selectedFiles.filter((_, i) => i !== index);
+    if (urlToRemove?.startsWith('blob:')) URL.revokeObjectURL(urlToRemove);
+
+    const newFiles = previewFiles?.filter((_, i) => i !== index) ?? null;
     const newUrls = previewUrls.filter((_, i) => i !== index);
 
-    setSelectedFiles(newFiles);
-    setPreviewUrls(newUrls);
-    onFileUpload?.(newFiles.length > 0 ? newFiles : null);
+    onFileChange?.(newFiles, newUrls);
   };
 
   return (
@@ -126,7 +120,7 @@ export function MediaUpload({
         <UploadBox id={inputId} label={label} description={description} />
       ) : (
         <MediaPreview
-          files={selectedFiles}
+          files={previewFiles}
           previewUrls={previewUrls}
           onRemoveFile={handleRemoveFile}
           multiple={multiple}
@@ -178,7 +172,7 @@ function RefreshButton({ handleReset, isSelected }: RefreshButtonProp) {
     <Flex
       as="button"
       onClick={(e) => {
-        e.stopPropagation();
+        e.preventDefault();
         if (isSelected) handleReset();
       }}
       alignItems="center"

src/shared/ui/MediaUpload/MediaUploadPreview.tsx

@@ -1,22 +1,24 @@
+import { useState, useEffect } from 'react';
+
 import { Flex } from '../Flex';
 import { Icon } from '../Icon';
 
 type Props = {
-  files: File[];
+  files: File[] | null;
   previewUrls: string[];
   onRemoveFile: (index: number) => void;
   multiple: boolean;
 };
 
 export function MediaPreview({ files, previewUrls, onRemoveFile, multiple }: Props) {
   if (!multiple) {
-    return <MediaPreviewItem file={files[0]} previewUrl={previewUrls[0]} />;
+    return <MediaPreviewItem file={files?.[0]} previewUrl={previewUrls[0]} />;
   }
   return (
     <div className="grid grid-cols-2 gap-2 md:grid-cols-3 md:gap-4">
-      {files?.map((file, index) => (
+      {previewUrls?.map((previewUrl, index) => (
         <div key={index} className="relative aspect-square">
-          <MediaPreviewItem file={file} previewUrl={previewUrls[index]} />
+          <MediaPreviewItem file={files?.[index]} previewUrl={previewUrl} />
           <button
             type="button"
             onClick={() => onRemoveFile(index)}
@@ -31,17 +33,27 @@ export function MediaPreview({ files, previewUrls, onRemoveFile, multiple }: Pro
 }
 
 type MediaPreviewItemProps = {
-  file: File;
+  file?: File;
   previewUrl: string;
 };
 function MediaPreviewItem({ file, previewUrl }: MediaPreviewItemProps) {
+  const [isVideo, setIsVideo] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (file) return setIsVideo(file.type.startsWith('video/'));
+    getMimeType(previewUrl).then((type) => {
+      if (type) setIsVideo(type.startsWith('video/'));
+      else setIsVideo(false);
+    });
+  }, [file, previewUrl]);
+
   return (
     <Flex
       justifyContent="center"
       alignItems="center"
       className="relative h-full w-full rounded-xl border border-gray-200 bg-gray-50"
     >
-      {file.type.startsWith('video/') ? (
+      {isVideo ? (
         <video
           src={previewUrl}
           controls
@@ -50,10 +62,19 @@ function MediaPreviewItem({ file, previewUrl }: MediaPreviewItemProps) {
       ) : (
         <img
           src={previewUrl}
-          alt={`미리보기 ${file.name}`}
+          alt={file ? `미리보기 ${file.name}` : '미리보기 이미지'}
           className="h-full max-h-[500px] w-full max-w-[500px] object-contain"
         />
       )}
     </Flex>
   );
 }
+
+async function getMimeType(url: string): Promise<string | null> {
+  try {
+    const res = await fetch(url, { method: 'HEAD' });
+    return res.headers.get('Content-Type');
+  } catch {
+    return null;
+  }
+}