Refactor: ImageUploadModal에 있는 버튼을 ui에 있는 버튼으로 변경

Button 제거하고 ui 버튼을 상속받는 Progress 버튼을 만들고 프로그레스 기능 유지

frontend/src/components/ImageUploadModal/Button.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-interface ButtonProps {
-  isActive: boolean;
-  text: string;
-  onClick: () => void;
-  progress?: number;
-}
-
-export default function Button({ isActive, text, onClick, progress = 0 }: ButtonProps): JSX.Element {
-  const buttonText = progress === 100 ? '업로드 완료' : text;
-
-  return (
-    <button
-      className={cn(
-        'relative flex h-12 w-full items-center justify-center rounded-lg border-2 px-5 py-2.5 transition-all duration-300',
-        isActive
-          ? 'cursor-pointer border-primary bg-primary text-white'
-          : 'cursor-not-allowed border-gray-200 bg-gray-100 text-gray-500'
-      )}
-      disabled={!isActive}
-      onClick={isActive ? onClick : undefined}
-      style={{ '--progress-width': `${progress}%` } as React.CSSProperties}
-    >
-      <span className="relative z-10 font-sans text-base font-bold leading-6">{buttonText}</span>
-      <div
-        className="transition-width absolute left-0 top-0 z-0 h-full bg-white bg-opacity-20 duration-300"
-        style={{ width: `var(--progress-width, 0%)` }}
-      ></div>
-    </button>
-  );
-}

frontend/src/components/ImageUploadModal/ProgressButton.tsx

@@ -0,0 +1,39 @@
+import { cn } from '@/lib/utils';
+import { Button as BaseButton, ButtonProps as BaseButtonProps } from '@/components/ui/button';
+
+interface ProgressButtonProps extends BaseButtonProps {
+  isActive: boolean;
+  progress?: number;
+  text: string;
+}
+
+export default function ProgressButton({
+  isActive,
+  text,
+  progress = 0,
+  variant,
+  size,
+  className,
+  ...props
+}: ProgressButtonProps): JSX.Element {
+  const buttonText = progress === 100 ? '업로드 완료' : text;
+
+  return (
+    <BaseButton
+      className={cn('relative w-full overflow-hidden', className)}
+      variant={variant}
+      size={size}
+      disabled={!isActive}
+      {...props}
+    >
+      {progress > 0 && (
+        <div
+          className="absolute left-0 top-0 h-full bg-primary transition-all duration-300"
+          style={{ width: `${progress}%` }}
+        ></div>
+      )}
+
+      <span className={cn('relative z-10', progress > 0 && 'text-white')}>{buttonText}</span>
+    </BaseButton>
+  );
+}

frontend/src/components/ImageUploadModal/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import CloseButton from './CloseButton';
-import Button from './Button';
+import ProgressButton from './ProgressButton';
 import FileList from './FileList';
 import { uploadFiles } from '@/api/upload';
 
@@ -103,11 +103,13 @@ export default function ImageUploadModal({ title, buttonText, onClose }: ImageUp
         )}
       </div>
       <div className="flex justify-center">
-        <Button
+        <ProgressButton
           isActive={files.length > 0 && !isUploading}
           text={isUploading ? `업로드 중... (${uploadProgress}%)` : buttonText}
           onClick={handleUpload}
           progress={uploadProgress}
+          type="submit"
+          variant="outlinePrimary"
         />
       </div>
     </div>