From 9038d86308754c1d2bec4a85e39ec72eb1d30e4a Mon Sep 17 00:00:00 2001
From: hyejj19 <hyejj19@naver.com>
Date: Thu, 26 Mar 2026 10:30:10 +0900
Subject: [PATCH 1/5] =?UTF-8?q?[feat]=20=EB=B0=B0=EB=84=88=20=EB=AF=B8?=
 =?UTF-8?q?=EB=94=94=EC=96=B4=20=ED=83=80=EC=9E=85=20=EC=A7=80=EC=9B=90=20?=
 =?UTF-8?q?(IMAGE/VIDEO)=20=EB=B0=8F=20=EB=8F=99=EC=98=81=EC=83=81=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

배너 API에 추가된 mediaType 필드를 프론트엔드 전 계층에 반영하고,
동영상(MP4) 업로드 및 미리보기 기능을 구현한다.

- types: MediaType 타입, presigned URL contentType 파라미터 추가
- schema: 폼 스키마에 mediaType 필드 추가 (기본값: IMAGE)
- service: S3 presigned URL 요청 시 contentType 전달
- form: 파일 업로드 시 file.type 기반 mediaType 자동 판별
- ImageUpload: 이미지/동영상 accept, 거부 콜백, 미리보기 분기
- BannerImageCard: 허용 외 파일 에러 토스트, mediaType 자동 설정
- BannerPreviewCard: form.mediaType 기반 비디오 미리보기
- fix: blob URL에서 useEffect가 isVideo를 덮어쓰는 버그 수정
- test: 유틸/컴포넌트/서비스/훅/E2E 테스트 51개 추가 (총 129개)

Refs: bottle-note/workspace#205

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 e2e/fixtures/test-video.mp4                   | Bin 0 -> 36 bytes
 e2e/pages/banner-detail.page.ts               |  20 +-
 e2e/specs/banners.spec.ts                     |  30 ++
 src/components/common/ImageUpload.tsx         |  84 ++++-
 .../common/__tests__/ImageUpload.test.tsx     | 331 ++++++++++++++++++
 src/hooks/__tests__/useBanners.test.ts        |  73 ++++
 src/pages/banners/BannerDetail.tsx            |   8 +
 .../__tests__/BannerImageCard.test.tsx        | 143 ++++++++
 .../banners/__tests__/banner.schema.test.ts   |  55 +++
 src/pages/banners/banner.schema.ts            |   6 +-
 .../banners/components/BannerImageCard.tsx    |  40 ++-
 .../banners/components/BannerPreviewCard.tsx  |  21 +-
 src/pages/banners/useBannerDetailForm.ts      |   2 +
 src/services/__tests__/s3.service.test.ts     | 155 ++++++++
 src/services/s3.service.ts                    |   3 +-
 src/test/mocks/data.ts                        |   3 +
 src/types/api/banner.api.ts                   |  20 ++
 src/types/api/s3.api.ts                       |   2 +
 18 files changed, 971 insertions(+), 25 deletions(-)
 create mode 100644 e2e/fixtures/test-video.mp4
 create mode 100644 src/components/common/__tests__/ImageUpload.test.tsx
 create mode 100644 src/pages/banners/__tests__/BannerImageCard.test.tsx
 create mode 100644 src/pages/banners/__tests__/banner.schema.test.ts
 create mode 100644 src/services/__tests__/s3.service.test.ts

diff --git a/e2e/fixtures/test-video.mp4 b/e2e/fixtures/test-video.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..eec7adcaefa750b4b9a83d5c93ffb2cb9853f135
GIT binary patch
literal 36
ncmZQzV30{GsVvAW&d+6FU}6B#Kx~v-U}DI?z`&84pI-(5uK5Yt

literal 0
HcmV?d00001

diff --git a/e2e/pages/banner-detail.page.ts b/e2e/pages/banner-detail.page.ts
index 41c1a58..cdc065d 100644
--- a/e2e/pages/banner-detail.page.ts
+++ b/e2e/pages/banner-detail.page.ts
@@ -56,10 +56,14 @@ export class BannerDetailPage extends BasePage {
 
   readonly endDateInput = () => this.page.locator('input#endDate');
 
-  readonly imageFileInput = () => this.page.locator('input[type="file"][accept="image/*"]');
+  readonly mediaFileInput = () => this.page.locator('input[type="file"]');
 
   readonly uploadedImage = () => this.page.locator('img[alt="업로드된 이미지"]');
 
+  readonly uploadedVideo = () => this.page.locator('video');
+
+  readonly uploadedMedia = () => this.page.locator('img[alt="업로드된 이미지"], video');
+
   readonly deleteDialog = () => this.page.getByRole('alertdialog');
 
   readonly confirmDeleteButton = () => this.deleteDialog().getByRole('button', { name: '삭제' });
@@ -148,13 +152,19 @@ export class BannerDetailPage extends BasePage {
 
   async uploadTestImage() {
     const testImagePath = path.resolve(__dirname, '../fixtures/test-image.png');
-    await this.imageFileInput().setInputFiles(testImagePath);
-    await this.uploadedImage().waitFor({ state: 'visible', timeout: 10000 });
+    await this.mediaFileInput().setInputFiles(testImagePath);
+    await this.uploadedMedia().waitFor({ state: 'visible', timeout: 10000 });
+  }
+
+  async uploadTestVideo() {
+    const testVideoPath = path.resolve(__dirname, '../fixtures/test-video.mp4');
+    await this.mediaFileInput().setInputFiles(testVideoPath);
+    await this.uploadedVideo().waitFor({ state: 'visible', timeout: 10000 });
   }
 
   async ensureImage() {
-    const hasImage = await this.uploadedImage().isVisible().catch(() => false);
-    if (!hasImage) {
+    const hasMedia = await this.uploadedMedia().isVisible().catch(() => false);
+    if (!hasMedia) {
       await this.uploadTestImage();
     }
   }
diff --git a/e2e/specs/banners.spec.ts b/e2e/specs/banners.spec.ts
index da3c433..8a3bc97 100644
--- a/e2e/specs/banners.spec.ts
+++ b/e2e/specs/banners.spec.ts
@@ -232,6 +232,36 @@ test.describe('배너 CRUD 플로우', () => {
   });
 });
 
+test.describe('배너 동영상 업로드', () => {
+  test('동영상 파일 업로드 시 비디오 미리보기가 표시된다', async ({ page }) => {
+    const detailPage = new BannerDetailPage(page);
+
+    await detailPage.gotoNew();
+
+    // 동영상 업로드
+    await detailPage.uploadTestVideo();
+
+    // <video> 태그로 미리보기가 표시되는지 확인
+    await expect(detailPage.uploadedVideo()).toBeVisible();
+    // <img> 태그는 표시되지 않아야 함
+    await expect(detailPage.uploadedImage()).not.toBeVisible();
+  });
+
+  test('이미지 파일 업로드 시 이미지 미리보기가 표시된다', async ({ page }) => {
+    const detailPage = new BannerDetailPage(page);
+
+    await detailPage.gotoNew();
+
+    // 이미지 업로드
+    await detailPage.uploadTestImage();
+
+    // <img> 태그로 미리보기가 표시되는지 확인
+    await expect(detailPage.uploadedImage()).toBeVisible();
+    // <video> 태그는 표시되지 않아야 함
+    await expect(detailPage.uploadedVideo()).not.toBeVisible();
+  });
+});
+
 test.describe('배너 순서 변경', () => {
   let listPage: BannerListPage;
 
diff --git a/src/components/common/ImageUpload.tsx b/src/components/common/ImageUpload.tsx
index fcfa4f6..70ce099 100644
--- a/src/components/common/ImageUpload.tsx
+++ b/src/components/common/ImageUpload.tsx
@@ -9,38 +9,92 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { Upload, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
+/** 허용 파일 타입 */
+const DEFAULT_ACCEPT = 'image/*';
+
+/**
+ * 파일 MIME 타입이 허용 목록에 포함되는지 확인
+ * @param fileType - 파일의 MIME 타입 (예: 'image/webp', 'video/mp4')
+ * @param accept - accept 속성 문자열 (예: 'image/*,video/mp4')
+ */
+export function isFileTypeAllowed(fileType: string, accept: string): boolean {
+  return accept.split(',').some((pattern) => {
+    const trimmed = pattern.trim();
+    if (trimmed.endsWith('/*')) {
+      return fileType.startsWith(trimmed.replace('/*', '/'));
+    }
+    return fileType === trimmed;
+  });
+}
+
+/** 파일이 비디오 타입인지 확인 */
+export function isVideoFile(file: File | null): boolean;
+export function isVideoFile(url: string | null): boolean;
+export function isVideoFile(input: File | string | null): boolean {
+  if (!input) return false;
+  if (typeof input === 'string') {
+    return input.match(/\.(mp4|webm|mov)(\?|$)/i) !== null;
+  }
+  return input.type.startsWith('video/');
+}
+
 /**
  * ImageUpload 컴포넌트의 props
- * @param imageUrl - 현재 이미지 URL (초기값 또는 서버에서 로드된 값)
- * @param onImageChange - 이미지 변경 시 호출되는 콜백
+ * @param imageUrl - 현재 미디어 URL (초기값 또는 서버에서 로드된 값)
+ * @param onImageChange - 미디어 변경 시 호출되는 콜백
  * @param minHeight - 최소 높이 (기본: 200px)
+ * @param accept - 허용 파일 타입 (기본: 'image/*')
+ * @param onFileRejected - 허용되지 않은 파일 업로드 시 콜백
+ * @param description - 업로드 영역 안내 텍스트
+ * @param supportText - 지원 포맷 안내 텍스트
  */
 export interface ImageUploadProps {
   imageUrl: string | null;
   onImageChange: (file: File | null, previewUrl: string | null) => void;
   minHeight?: number;
+  accept?: string;
+  onFileRejected?: (file: File) => void;
+  description?: string;
+  supportText?: string;
 }
 
-export function ImageUpload({ imageUrl, onImageChange, minHeight = 200 }: ImageUploadProps) {
+export function ImageUpload({
+  imageUrl,
+  onImageChange,
+  minHeight = 200,
+  accept = DEFAULT_ACCEPT,
+  onFileRejected,
+  description = '이미지를 드래그하거나 클릭하여 업로드',
+  supportText = 'PNG, JPG, WEBP 지원',
+}: ImageUploadProps) {
   const [isDragging, setIsDragging] = useState(false);
   const [previewUrl, setPreviewUrl] = useState<string | null>(imageUrl);
+  const [isVideo, setIsVideo] = useState(() => isVideoFile(imageUrl));
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     setPreviewUrl(imageUrl);
+    if (!imageUrl) {
+      setIsVideo(false);
+    } else if (!imageUrl.startsWith('blob:')) {
+      // CDN URL은 확장자로 판별, blob URL은 handleFile에서 설정한 값을 유지
+      setIsVideo(isVideoFile(imageUrl));
+    }
   }, [imageUrl]);
 
   const handleFile = useCallback(
     (file: File) => {
-      if (!file.type.startsWith('image/')) {
+      if (!isFileTypeAllowed(file.type, accept)) {
+        onFileRejected?.(file);
         return;
       }
 
+      setIsVideo(file.type.startsWith('video/'));
       const url = URL.createObjectURL(file);
       setPreviewUrl(url);
       onImageChange(file, url);
     },
-    [onImageChange]
+    [accept, onFileRejected, onImageChange]
   );
 
   const handleDragOver = (e: React.DragEvent) => {
@@ -72,6 +126,7 @@ export function ImageUpload({ imageUrl, onImageChange, minHeight = 200 }: ImageU
 
   const handleRemove = () => {
     setPreviewUrl(null);
+    setIsVideo(false);
     onImageChange(null, null);
     if (fileInputRef.current) {
       fileInputRef.current.value = '';
@@ -82,7 +137,18 @@ export function ImageUpload({ imageUrl, onImageChange, minHeight = 200 }: ImageU
     <div className="space-y-4">
       {previewUrl ? (
         <div className="relative">
-          <img src={previewUrl} alt="업로드된 이미지" className="w-full rounded-lg border" />
+          {isVideo ? (
+            <video
+              src={previewUrl}
+              className="w-full rounded-lg border"
+              controls
+              muted
+              loop
+              playsInline
+            />
+          ) : (
+            <img src={previewUrl} alt="업로드된 이미지" className="w-full rounded-lg border" />
+          )}
           <Button
             type="button"
             variant="destructive"
@@ -107,14 +173,14 @@ export function ImageUpload({ imageUrl, onImageChange, minHeight = 200 }: ImageU
           onClick={() => fileInputRef.current?.click()}
         >
           <Upload className="mb-2 h-10 w-10 text-muted-foreground" />
-          <p className="text-sm text-muted-foreground">이미지를 드래그하거나 클릭하여 업로드</p>
-          <p className="mt-1 text-xs text-muted-foreground">PNG, JPG, WEBP 지원</p>
+          <p className="text-sm text-muted-foreground">{description}</p>
+          <p className="mt-1 text-xs text-muted-foreground">{supportText}</p>
         </div>
       )}
       <input
         ref={fileInputRef}
         type="file"
-        accept="image/*"
+        accept={accept}
         className="hidden"
         onChange={handleFileSelect}
       />
diff --git a/src/components/common/__tests__/ImageUpload.test.tsx b/src/components/common/__tests__/ImageUpload.test.tsx
new file mode 100644
index 0000000..9810efe
--- /dev/null
+++ b/src/components/common/__tests__/ImageUpload.test.tsx
@@ -0,0 +1,331 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { isFileTypeAllowed, isVideoFile, ImageUpload } from '../ImageUpload';
+
+// ============================================
+// 1. 파일 검증 유틸리티 테스트
+// ============================================
+
+describe('isFileTypeAllowed', () => {
+  describe('와일드카드 매칭 (image/*)', () => {
+    const accept = 'image/*';
+
+    it('image/jpeg → 허용', () => {
+      expect(isFileTypeAllowed('image/jpeg', accept)).toBe(true);
+    });
+
+    it('image/png → 허용', () => {
+      expect(isFileTypeAllowed('image/png', accept)).toBe(true);
+    });
+
+    it('image/webp → 허용', () => {
+      expect(isFileTypeAllowed('image/webp', accept)).toBe(true);
+    });
+
+    it('image/svg+xml → 허용', () => {
+      expect(isFileTypeAllowed('image/svg+xml', accept)).toBe(true);
+    });
+
+    it('video/mp4 → 거부', () => {
+      expect(isFileTypeAllowed('video/mp4', accept)).toBe(false);
+    });
+
+    it('application/pdf → 거부', () => {
+      expect(isFileTypeAllowed('application/pdf', accept)).toBe(false);
+    });
+  });
+
+  describe('복합 accept (image/*,video/mp4)', () => {
+    const accept = 'image/*,video/mp4';
+
+    it('image/jpeg → 허용', () => {
+      expect(isFileTypeAllowed('image/jpeg', accept)).toBe(true);
+    });
+
+    it('video/mp4 → 허용', () => {
+      expect(isFileTypeAllowed('video/mp4', accept)).toBe(true);
+    });
+
+    it('video/webm → 거부', () => {
+      expect(isFileTypeAllowed('video/webm', accept)).toBe(false);
+    });
+
+    it('application/exe → 거부', () => {
+      expect(isFileTypeAllowed('application/x-msdownload', accept)).toBe(false);
+    });
+  });
+
+  describe('공백 포함 패턴', () => {
+    it('쉼표 뒤 공백이 있어도 정상 동작한다', () => {
+      expect(isFileTypeAllowed('video/mp4', 'image/*, video/mp4')).toBe(true);
+    });
+  });
+
+  describe('빈 타입', () => {
+    it('빈 문자열 MIME 타입은 거부된다', () => {
+      expect(isFileTypeAllowed('', 'image/*')).toBe(false);
+    });
+  });
+});
+
+describe('isVideoFile', () => {
+  describe('File 오버로드', () => {
+    it('video/mp4 File → true', () => {
+      const file = new File([''], 'test.mp4', { type: 'video/mp4' });
+      expect(isVideoFile(file)).toBe(true);
+    });
+
+    it('video/webm File → true', () => {
+      const file = new File([''], 'test.webm', { type: 'video/webm' });
+      expect(isVideoFile(file)).toBe(true);
+    });
+
+    it('image/png File → false', () => {
+      const file = new File([''], 'test.png', { type: 'image/png' });
+      expect(isVideoFile(file)).toBe(false);
+    });
+
+    it('null → false', () => {
+      expect(isVideoFile(null as unknown as File)).toBe(false);
+    });
+  });
+
+  describe('URL 오버로드', () => {
+    it('.mp4 확장자 → true', () => {
+      expect(isVideoFile('https://cdn.example.com/banner.mp4')).toBe(true);
+    });
+
+    it('.webm 확장자 → true', () => {
+      expect(isVideoFile('https://cdn.example.com/banner.webm')).toBe(true);
+    });
+
+    it('.mov 확장자 → true', () => {
+      expect(isVideoFile('https://cdn.example.com/banner.mov')).toBe(true);
+    });
+
+    it('쿼리 파라미터가 붙어도 정상 판별한다', () => {
+      expect(isVideoFile('https://cdn.example.com/banner.mp4?token=abc123')).toBe(true);
+    });
+
+    it('대소문자 무관하게 판별한다', () => {
+      expect(isVideoFile('https://cdn.example.com/banner.MP4')).toBe(true);
+    });
+
+    it('.jpg 확장자 → false', () => {
+      expect(isVideoFile('https://cdn.example.com/banner.jpg')).toBe(false);
+    });
+
+    it('확장자 없는 URL → false', () => {
+      expect(isVideoFile('https://cdn.example.com/banner')).toBe(false);
+    });
+
+    it('blob URL → false (확장자 없음)', () => {
+      expect(isVideoFile('blob:http://localhost:5173/abc-123-def')).toBe(false);
+    });
+
+    it('null → false', () => {
+      expect(isVideoFile(null as unknown as string)).toBe(false);
+    });
+  });
+});
+
+// ============================================
+// 3. 파일 거부 + 4. 미리보기 렌더링 분기
+// ============================================
+
+describe('ImageUpload 컴포넌트', () => {
+  const createFile = (name: string, type: string) =>
+    new File(['test'], name, { type });
+
+  describe('파일 거부 시 콜백', () => {
+    it('허용되지 않은 파일은 onFileRejected를 호출한다', () => {
+      const onImageChange = vi.fn();
+      const onFileRejected = vi.fn();
+
+      render(
+        <ImageUpload
+          imageUrl={null}
+          onImageChange={onImageChange}
+          accept="image/*"
+          onFileRejected={onFileRejected}
+        />
+      );
+
+      const input = document.querySelector('input[type="file"]')!;
+      const pdfFile = createFile('test.pdf', 'application/pdf');
+
+      fireEvent.change(input, { target: { files: [pdfFile] } });
+
+      expect(onFileRejected).toHaveBeenCalledWith(pdfFile);
+      expect(onImageChange).not.toHaveBeenCalled();
+    });
+
+    it('허용된 파일은 onImageChange를 호출한다', () => {
+      const onImageChange = vi.fn();
+      const onFileRejected = vi.fn();
+
+      render(
+        <ImageUpload
+          imageUrl={null}
+          onImageChange={onImageChange}
+          accept="image/*,video/mp4"
+          onFileRejected={onFileRejected}
+        />
+      );
+
+      const input = document.querySelector('input[type="file"]')!;
+      const imgFile = createFile('test.jpg', 'image/jpeg');
+
+      fireEvent.change(input, { target: { files: [imgFile] } });
+
+      expect(onFileRejected).not.toHaveBeenCalled();
+      expect(onImageChange).toHaveBeenCalledWith(imgFile, expect.any(String));
+    });
+  });
+
+  describe('미리보기 렌더링 분기', () => {
+    it('이미지 URL이면 <img> 태그를 렌더링한다', () => {
+      render(
+        <ImageUpload
+          imageUrl="https://cdn.example.com/banner.jpg"
+          onImageChange={vi.fn()}
+        />
+      );
+
+      expect(screen.getByAltText('업로드된 이미지')).toBeInTheDocument();
+      expect(document.querySelector('video')).toBeNull();
+    });
+
+    it('비디오 CDN URL이면 <video> 태그를 렌더링한다', () => {
+      render(
+        <ImageUpload
+          imageUrl="https://cdn.example.com/banner.mp4"
+          onImageChange={vi.fn()}
+        />
+      );
+
+      const video = document.querySelector('video') as HTMLVideoElement;
+      expect(video).toBeInTheDocument();
+      expect(video.getAttribute('src')).toBe('https://cdn.example.com/banner.mp4');
+      expect(video.hasAttribute('controls')).toBe(true);
+      expect(video.loop).toBe(true);
+      // muted는 React에서 DOM property로 설정됨 (hasAttribute로 확인 불가)
+      expect(video.muted).toBe(true);
+    });
+
+    it('비디오 파일 업로드 시 blob URL이어도 <video> 태그를 렌더링한다', () => {
+      const onImageChange = vi.fn();
+
+      render(
+        <ImageUpload
+          imageUrl={null}
+          onImageChange={onImageChange}
+          accept="image/*,video/mp4"
+        />
+      );
+
+      const input = document.querySelector('input[type="file"]')!;
+      const mp4File = createFile('banner.mp4', 'video/mp4');
+
+      fireEvent.change(input, { target: { files: [mp4File] } });
+
+      const video = document.querySelector('video');
+      expect(video).toBeInTheDocument();
+      expect(screen.queryByAltText('업로드된 이미지')).toBeNull();
+    });
+
+    it('비디오 파일 업로드 후 imageUrl prop이 blob URL로 변경되어도 <video>를 유지한다', () => {
+      const onImageChange = vi.fn();
+
+      const { rerender } = render(
+        <ImageUpload
+          imageUrl={null}
+          onImageChange={onImageChange}
+          accept="image/*,video/mp4"
+        />
+      );
+
+      // 1. 비디오 파일 업로드
+      const input = document.querySelector('input[type="file"]')!;
+      const mp4File = createFile('banner.mp4', 'video/mp4');
+      fireEvent.change(input, { target: { files: [mp4File] } });
+
+      // 2. handleFile에서 blob URL이 생성되어 onImageChange로 전달됨
+      const blobUrl = onImageChange.mock.calls[0][1] as string;
+      expect(blobUrl).toMatch(/^blob:/);
+
+      // 3. 부모가 imageUrl prop을 blob URL로 다시 내려줌 (실제 앱 동작)
+      rerender(
+        <ImageUpload
+          imageUrl={blobUrl}
+          onImageChange={onImageChange}
+          accept="image/*,video/mp4"
+        />
+      );
+
+      // 4. <video>가 유지되어야 함 (<img>로 바뀌면 엑박)
+      expect(document.querySelector('video')).toBeInTheDocument();
+      expect(screen.queryByAltText('업로드된 이미지')).toBeNull();
+    });
+
+    it('이미지 파일 업로드 시 <img> 태그를 렌더링한다', () => {
+      const onImageChange = vi.fn();
+
+      render(
+        <ImageUpload
+          imageUrl={null}
+          onImageChange={onImageChange}
+          accept="image/*,video/mp4"
+        />
+      );
+
+      const input = document.querySelector('input[type="file"]')!;
+      const jpgFile = createFile('banner.jpg', 'image/jpeg');
+
+      fireEvent.change(input, { target: { files: [jpgFile] } });
+
+      expect(screen.getByAltText('업로드된 이미지')).toBeInTheDocument();
+      expect(document.querySelector('video')).toBeNull();
+    });
+  });
+
+  describe('accept 속성', () => {
+    it('기본값은 image/*', () => {
+      render(
+        <ImageUpload imageUrl={null} onImageChange={vi.fn()} />
+      );
+
+      const input = document.querySelector('input[type="file"]');
+      expect(input?.getAttribute('accept')).toBe('image/*');
+    });
+
+    it('커스텀 accept가 반영된다', () => {
+      render(
+        <ImageUpload
+          imageUrl={null}
+          onImageChange={vi.fn()}
+          accept="image/*,video/mp4"
+        />
+      );
+
+      const input = document.querySelector('input[type="file"]');
+      expect(input?.getAttribute('accept')).toBe('image/*,video/mp4');
+    });
+  });
+
+  describe('커스텀 텍스트', () => {
+    it('description과 supportText가 반영된다', () => {
+      render(
+        <ImageUpload
+          imageUrl={null}
+          onImageChange={vi.fn()}
+          description="파일을 드래그하세요"
+          supportText="MP4, PNG 지원"
+        />
+      );
+
+      expect(screen.getByText('파일을 드래그하세요')).toBeInTheDocument();
+      expect(screen.getByText('MP4, PNG 지원')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/hooks/__tests__/useBanners.test.ts b/src/hooks/__tests__/useBanners.test.ts
index fe1e39e..2beb908 100644
--- a/src/hooks/__tests__/useBanners.test.ts
+++ b/src/hooks/__tests__/useBanners.test.ts
@@ -30,6 +30,17 @@ describe('useBanners hooks', () => {
       expect(result.current.data!.meta.totalElements).toBeGreaterThan(0);
     });
 
+    it('목록 응답에 mediaType이 포함된다', async () => {
+      const { result } = renderHook(() => useBannerList());
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+      result.current.data!.items.forEach((item) => {
+        expect(item.mediaType).toBeDefined();
+        expect(['IMAGE', 'VIDEO']).toContain(item.mediaType);
+      });
+    });
+
     it('keyword로 필터링한다', async () => {
       const { result } = renderHook(() => useBannerList({ keyword: '큐레이션' }));
 
@@ -73,6 +84,14 @@ describe('useBanners hooks', () => {
       expect(result.current.data!.textPosition).toBe('RT');
     });
 
+    it('상세 응답에 mediaType이 포함된다', async () => {
+      const { result } = renderHook(() => useBannerDetail(1));
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+      expect(result.current.data!.mediaType).toBe('IMAGE');
+    });
+
     it('존재하지 않는 ID는 에러 상태가 된다', async () => {
       const { result } = renderHook(() => useBannerDetail(9999));
 
@@ -108,6 +127,31 @@ describe('useBanners hooks', () => {
       expect(onSuccess).toHaveBeenCalled();
     });
 
+    it('mediaType: VIDEO로 생성할 수 있다', async () => {
+      const onSuccess = vi.fn();
+      const { result } = renderHook(() => useBannerCreate({ onSuccess }));
+
+      result.current.mutate({
+        name: '동영상 배너',
+        nameFontColor: '#ffffff',
+        descriptionA: '설명A',
+        descriptionB: '설명B',
+        descriptionFontColor: '#ffffff',
+        imageUrl: 'https://example.com/banner.mp4',
+        textPosition: 'CENTER',
+        targetUrl: '/test',
+        isExternalUrl: false,
+        bannerType: 'AD',
+        isActive: true,
+        startDate: null,
+        endDate: null,
+        mediaType: 'VIDEO',
+      });
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+      expect(onSuccess).toHaveBeenCalled();
+    });
+
     it('에러 시 에러 상태가 된다', async () => {
       server.use(
         http.post(BASE, () => {
@@ -171,6 +215,35 @@ describe('useBanners hooks', () => {
       await waitFor(() => expect(result.current.isSuccess).toBe(true));
       expect(onSuccess).toHaveBeenCalled();
     });
+
+    it('mediaType을 VIDEO로 변경할 수 있다', async () => {
+      const onSuccess = vi.fn();
+      const { result } = renderHook(() => useBannerUpdate({ onSuccess }));
+
+      result.current.mutate({
+        id: 1,
+        data: {
+          name: '동영상 배너',
+          nameFontColor: '#000000',
+          descriptionA: '수정A',
+          descriptionB: '수정B',
+          descriptionFontColor: '#000000',
+          imageUrl: 'https://example.com/updated.mp4',
+          textPosition: 'LB',
+          targetUrl: '/updated',
+          isExternalUrl: false,
+          bannerType: 'CURATION',
+          sortOrder: 0,
+          startDate: null,
+          endDate: null,
+          isActive: true,
+          mediaType: 'VIDEO',
+        },
+      });
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+      expect(onSuccess).toHaveBeenCalled();
+    });
   });
 
   // ==========================================
diff --git a/src/pages/banners/BannerDetail.tsx b/src/pages/banners/BannerDetail.tsx
index cd10cc2..0778d57 100644
--- a/src/pages/banners/BannerDetail.tsx
+++ b/src/pages/banners/BannerDetail.tsx
@@ -59,9 +59,16 @@ export function BannerDetailPage() {
       }
     } else {
       form.setValue('imageUrl', previewUrl ?? '');
+      if (!previewUrl) {
+        form.setValue('mediaType', 'IMAGE');
+      }
     }
   };
 
+  const handleMediaTypeChange = (mediaType: 'IMAGE' | 'VIDEO') => {
+    form.setValue('mediaType', mediaType);
+  };
+
   const handleSubmit = form.handleSubmit(
     (data) => {
       onSubmit(data, { imagePreviewUrl });
@@ -112,6 +119,7 @@ export function BannerDetailPage() {
             <BannerImageCard
               imagePreviewUrl={imagePreviewUrl}
               onImageChange={handleImageChange}
+              onMediaTypeChange={handleMediaTypeChange}
               isUploading={isImageUploading}
               error={form.formState.errors.imageUrl?.message}
             />
diff --git a/src/pages/banners/__tests__/BannerImageCard.test.tsx b/src/pages/banners/__tests__/BannerImageCard.test.tsx
new file mode 100644
index 0000000..62eb929
--- /dev/null
+++ b/src/pages/banners/__tests__/BannerImageCard.test.tsx
@@ -0,0 +1,143 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { BannerImageCard } from '../components/BannerImageCard';
+import { ToastContext, useToastState } from '@/hooks/useToast';
+import type { MediaType } from '@/types/api';
+
+// BannerImageCard는 useToast를 사용하므로 ToastProvider 래핑 필요
+function Wrapper({ children }: { children: React.ReactNode }) {
+  const toastState = useToastState();
+  return (
+    <ToastContext.Provider value={toastState}>
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+function renderWithToast(ui: React.ReactElement) {
+  return render(ui, { wrapper: Wrapper });
+}
+
+// ============================================
+// 2. mediaType 자동 판별 테스트
+// ============================================
+
+describe('BannerImageCard', () => {
+  const createFile = (name: string, type: string) =>
+    new File(['test'], name, { type });
+
+  const defaultProps = {
+    imagePreviewUrl: null,
+    onImageChange: vi.fn(),
+    onMediaTypeChange: vi.fn(),
+    isUploading: false,
+  };
+
+  describe('mediaType 자동 판별', () => {
+    it('이미지 파일 업로드 시 onMediaTypeChange("IMAGE")가 호출된다', () => {
+      const onMediaTypeChange = vi.fn<(mediaType: MediaType) => void>();
+
+      renderWithToast(
+        <BannerImageCard
+          {...defaultProps}
+          onMediaTypeChange={onMediaTypeChange}
+        />
+      );
+
+      const input = document.querySelector('input[type="file"]')!;
+      const imgFile = createFile('test.jpg', 'image/jpeg');
+      fireEvent.change(input, { target: { files: [imgFile] } });
+
+      expect(onMediaTypeChange).toHaveBeenCalledWith('IMAGE');
+    });
+
+    it('동영상 파일 업로드 시 onMediaTypeChange("VIDEO")가 호출된다', () => {
+      const onMediaTypeChange = vi.fn<(mediaType: MediaType) => void>();
+
+      renderWithToast(
+        <BannerImageCard
+          {...defaultProps}
+          onMediaTypeChange={onMediaTypeChange}
+        />
+      );
+
+      const input = document.querySelector('input[type="file"]')!;
+      const mp4File = createFile('banner.mp4', 'video/mp4');
+      fireEvent.change(input, { target: { files: [mp4File] } });
+
+      expect(onMediaTypeChange).toHaveBeenCalledWith('VIDEO');
+    });
+
+    it('WebP 파일 업로드 시 onMediaTypeChange("IMAGE")가 호출된다', () => {
+      const onMediaTypeChange = vi.fn<(mediaType: MediaType) => void>();
+
+      renderWithToast(
+        <BannerImageCard
+          {...defaultProps}
+          onMediaTypeChange={onMediaTypeChange}
+        />
+      );
+
+      const input = document.querySelector('input[type="file"]')!;
+      const webpFile = createFile('banner.webp', 'image/webp');
+      fireEvent.change(input, { target: { files: [webpFile] } });
+
+      expect(onMediaTypeChange).toHaveBeenCalledWith('IMAGE');
+    });
+  });
+
+  describe('파일 거부', () => {
+    it('허용되지 않은 파일은 업로드되지 않는다', () => {
+      const onImageChange = vi.fn();
+      const onMediaTypeChange = vi.fn();
+
+      renderWithToast(
+        <BannerImageCard
+          {...defaultProps}
+          onImageChange={onImageChange}
+          onMediaTypeChange={onMediaTypeChange}
+        />
+      );
+
+      const input = document.querySelector('input[type="file"]')!;
+      const pdfFile = createFile('document.pdf', 'application/pdf');
+      fireEvent.change(input, { target: { files: [pdfFile] } });
+
+      expect(onImageChange).not.toHaveBeenCalled();
+      expect(onMediaTypeChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('accept 속성', () => {
+    it('이미지와 video/mp4를 허용한다', () => {
+      renderWithToast(<BannerImageCard {...defaultProps} />);
+
+      const input = document.querySelector('input[type="file"]');
+      expect(input?.getAttribute('accept')).toBe('image/*,video/mp4');
+    });
+  });
+
+  describe('UI 상태', () => {
+    it('업로드 중 상태를 표시한다', () => {
+      renderWithToast(
+        <BannerImageCard {...defaultProps} isUploading={true} />
+      );
+
+      expect(screen.getByText('파일 업로드 중...')).toBeInTheDocument();
+    });
+
+    it('에러 메시지를 표시한다', () => {
+      renderWithToast(
+        <BannerImageCard {...defaultProps} error="미디어 파일을 업로드해주세요" />
+      );
+
+      expect(screen.getByText('미디어 파일을 업로드해주세요')).toBeInTheDocument();
+    });
+
+    it('카드 타이틀이 "배너 미디어"로 표시된다', () => {
+      renderWithToast(<BannerImageCard {...defaultProps} />);
+
+      expect(screen.getByText('배너 미디어 *')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/pages/banners/__tests__/banner.schema.test.ts b/src/pages/banners/__tests__/banner.schema.test.ts
new file mode 100644
index 0000000..df4f7c6
--- /dev/null
+++ b/src/pages/banners/__tests__/banner.schema.test.ts
@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import { bannerFormSchema, DEFAULT_BANNER_FORM } from '../banner.schema';
+
+describe('bannerFormSchema', () => {
+  it('기본값으로 유효성 검사를 통과하지 못한다 (필수값 누락)', () => {
+    const result = bannerFormSchema.safeParse(DEFAULT_BANNER_FORM);
+    expect(result.success).toBe(false);
+  });
+
+  it('모든 필수값을 채우면 통과한다', () => {
+    const validData = {
+      ...DEFAULT_BANNER_FORM,
+      name: '테스트 배너',
+      imageUrl: 'https://example.com/test.jpg',
+      startDate: '2024-01-01T00:00:00',
+      endDate: '2024-12-31T23:59:59',
+      targetUrl: '/test',
+      curationId: 1,
+    };
+
+    const result = bannerFormSchema.safeParse(validData);
+    expect(result.success).toBe(true);
+  });
+
+  describe('mediaType 필드', () => {
+    const validBase = {
+      ...DEFAULT_BANNER_FORM,
+      name: '테스트 배너',
+      imageUrl: 'https://example.com/test.jpg',
+      startDate: '2024-01-01T00:00:00',
+      endDate: '2024-12-31T23:59:59',
+      targetUrl: '/test',
+      curationId: 1,
+    };
+
+    it('mediaType이 IMAGE이면 통과한다', () => {
+      const result = bannerFormSchema.safeParse({ ...validBase, mediaType: 'IMAGE' });
+      expect(result.success).toBe(true);
+    });
+
+    it('mediaType이 VIDEO이면 통과한다', () => {
+      const result = bannerFormSchema.safeParse({ ...validBase, mediaType: 'VIDEO' });
+      expect(result.success).toBe(true);
+    });
+
+    it('mediaType 기본값은 IMAGE이다', () => {
+      expect(DEFAULT_BANNER_FORM.mediaType).toBe('IMAGE');
+    });
+
+    it('잘못된 mediaType 값은 통과하지 못한다', () => {
+      const result = bannerFormSchema.safeParse({ ...validBase, mediaType: 'INVALID' });
+      expect(result.success).toBe(false);
+    });
+  });
+});
diff --git a/src/pages/banners/banner.schema.ts b/src/pages/banners/banner.schema.ts
index 96f98b6..3dca1ed 100644
--- a/src/pages/banners/banner.schema.ts
+++ b/src/pages/banners/banner.schema.ts
@@ -47,7 +47,10 @@ export const bannerFormSchema = z.object({
     message: '배너 타입을 선택해주세요',
   }),
   isActive: z.boolean(),
-  imageUrl: z.string().min(1, '이미지를 업로드해주세요'),
+  mediaType: z.enum(['IMAGE', 'VIDEO'], {
+    message: '미디어 유형을 선택해주세요',
+  }),
+  imageUrl: z.string().min(1, '미디어 파일을 업로드해주세요'),
   descriptionA: z.string(),
   descriptionB: z.string(),
   textPosition: z.enum(['LT', 'LB', 'RT', 'RB', 'CENTER'], {
@@ -84,6 +87,7 @@ export const DEFAULT_BANNER_FORM: BannerFormValues = {
   name: '',
   bannerType: 'CURATION',
   isActive: true,
+  mediaType: 'IMAGE',
   imageUrl: '',
   descriptionA: '',
   descriptionB: '',
diff --git a/src/pages/banners/components/BannerImageCard.tsx b/src/pages/banners/components/BannerImageCard.tsx
index 1f4eabc..e0766fe 100644
--- a/src/pages/banners/components/BannerImageCard.tsx
+++ b/src/pages/banners/components/BannerImageCard.tsx
@@ -1,23 +1,55 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ImageUpload } from '@/components/common/ImageUpload';
+import { useToast } from '@/hooks/useToast';
+import type { MediaType } from '@/types/api';
+
+/** 배너에서 허용하는 파일 타입 */
+const BANNER_ACCEPT = 'image/*,video/mp4';
 
 interface BannerImageCardProps {
   imagePreviewUrl: string | null;
   onImageChange: (file: File | null, previewUrl: string | null) => void;
+  onMediaTypeChange: (mediaType: MediaType) => void;
   isUploading: boolean;
   error?: string;
 }
 
-export function BannerImageCard({ imagePreviewUrl, onImageChange, isUploading, error }: BannerImageCardProps) {
+export function BannerImageCard({
+  imagePreviewUrl,
+  onImageChange,
+  onMediaTypeChange,
+  isUploading,
+  error,
+}: BannerImageCardProps) {
+  const { showToast } = useToast();
+
+  const handleImageChange = (file: File | null, previewUrl: string | null) => {
+    if (file) {
+      onMediaTypeChange(file.type.startsWith('video/') ? 'VIDEO' : 'IMAGE');
+    }
+    onImageChange(file, previewUrl);
+  };
+
+  const handleFileRejected = (file: File) => {
+    showToast({
+      type: 'error',
+      message: `지원하지 않는 파일 형식입니다: ${file.name}. 이미지(PNG, JPG, WEBP) 또는 동영상(MP4)만 업로드 가능합니다.`,
+    });
+  };
+
   return (
     <Card>
       <CardHeader>
-        <CardTitle>배너 이미지 *</CardTitle>
+        <CardTitle>배너 미디어 *</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
         <ImageUpload
           imageUrl={imagePreviewUrl}
-          onImageChange={onImageChange}
+          onImageChange={handleImageChange}
+          onFileRejected={handleFileRejected}
+          accept={BANNER_ACCEPT}
+          description="파일을 드래그하거나 클릭하여 업로드"
+          supportText="이미지(PNG, JPG, WEBP) 또는 동영상(MP4) 지원"
           minHeight={200}
         />
         <p className="text-sm text-muted-foreground">
@@ -27,7 +59,7 @@ export function BannerImageCard({ imagePreviewUrl, onImageChange, isUploading, e
           <p className="text-sm text-destructive">{error}</p>
         )}
         {isUploading && (
-          <p className="text-sm text-muted-foreground">이미지 업로드 중...</p>
+          <p className="text-sm text-muted-foreground">파일 업로드 중...</p>
         )}
       </CardContent>
     </Card>
diff --git a/src/pages/banners/components/BannerPreviewCard.tsx b/src/pages/banners/components/BannerPreviewCard.tsx
index 7beae0b..5357d7e 100644
--- a/src/pages/banners/components/BannerPreviewCard.tsx
+++ b/src/pages/banners/components/BannerPreviewCard.tsx
@@ -54,11 +54,22 @@ export function BannerPreviewCard({ form, imagePreviewUrl }: BannerPreviewCardPr
             className="relative overflow-hidden"
             style={{ width: selectedWidth, height: BANNER_HEIGHT }}
           >
-            <img
-              src={imagePreviewUrl}
-              alt="배너 미리보기"
-              className="h-full w-full object-cover"
-            />
+            {form.watch('mediaType') === 'VIDEO' ? (
+              <video
+                src={imagePreviewUrl}
+                className="h-full w-full object-cover"
+                autoPlay
+                muted
+                loop
+                playsInline
+              />
+            ) : (
+              <img
+                src={imagePreviewUrl}
+                alt="배너 미리보기"
+                className="h-full w-full object-cover"
+              />
+            )}
             <BannerTextOverlay
               name={form.watch('name')}
               descriptionA={form.watch('descriptionA')}
diff --git a/src/pages/banners/useBannerDetailForm.ts b/src/pages/banners/useBannerDetailForm.ts
index 32fd6a2..859a932 100644
--- a/src/pages/banners/useBannerDetailForm.ts
+++ b/src/pages/banners/useBannerDetailForm.ts
@@ -103,6 +103,7 @@ export function useBannerDetailForm(id: string | undefined): UseBannerDetailForm
         name: bannerData.name ?? '',
         bannerType: bannerData.bannerType,
         isActive: bannerData.isActive,
+        mediaType: bannerData.mediaType ?? 'IMAGE',
         imageUrl: bannerData.imageUrl ?? '',
         descriptionA: bannerData.descriptionA ?? '',
         descriptionB: bannerData.descriptionB ?? '',
@@ -127,6 +128,7 @@ export function useBannerDetailForm(id: string | undefined): UseBannerDetailForm
       name: data.name,
       bannerType: data.bannerType,
       isActive: data.isActive,
+      mediaType: data.mediaType,
       imageUrl: data.imageUrl || options?.imagePreviewUrl || '',
       descriptionA: data.descriptionA ?? '',
       descriptionB: data.descriptionB ?? '',
diff --git a/src/services/__tests__/s3.service.test.ts b/src/services/__tests__/s3.service.test.ts
new file mode 100644
index 0000000..b9e5b28
--- /dev/null
+++ b/src/services/__tests__/s3.service.test.ts
@@ -0,0 +1,155 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { server } from '@/test/mocks/server';
+import { s3Service } from '../s3.service';
+
+// ============================================
+// 5. S3 presigned URL contentType 전달 테스트
+// ============================================
+
+const S3_ENDPOINT = '/admin/api/v1/s3/presign-url';
+
+const mockPresignResponse = {
+  success: true,
+  code: 200,
+  data: {
+    bucketName: 'test-bucket',
+    expiryTime: 15,
+    uploadSize: 1,
+    imageUploadInfo: [
+      {
+        order: 0,
+        viewUrl: 'https://cdn.example.com/admin/banner/test-uuid.jpg',
+        uploadUrl: 'https://s3.amazonaws.com/test-bucket/admin/banner/test-uuid.jpg?presigned=true',
+      },
+    ],
+  },
+  errors: [],
+  meta: {},
+};
+
+describe('s3Service', () => {
+  describe('getPresignedUrls', () => {
+    it('contentType 파라미터를 전달한다', async () => {
+      let capturedContentType: string | null = null;
+
+      server.use(
+        http.get(S3_ENDPOINT, ({ request }) => {
+          const url = new URL(request.url);
+          capturedContentType = url.searchParams.get('contentType');
+          return HttpResponse.json(mockPresignResponse);
+        })
+      );
+
+      await s3Service.getPresignedUrls({
+        rootPath: 'admin/banner',
+        uploadSize: 1,
+        contentType: 'video/mp4',
+      });
+
+      expect(capturedContentType).toBe('video/mp4');
+    });
+
+    it('contentType 미지정 시 파라미터가 전달되지 않는다', async () => {
+      let capturedContentType: string | null = 'should-be-null';
+
+      server.use(
+        http.get(S3_ENDPOINT, ({ request }) => {
+          const url = new URL(request.url);
+          capturedContentType = url.searchParams.get('contentType');
+          return HttpResponse.json(mockPresignResponse);
+        })
+      );
+
+      await s3Service.getPresignedUrls({
+        rootPath: 'admin/banner',
+        uploadSize: 1,
+      });
+
+      expect(capturedContentType).toBeNull();
+    });
+  });
+
+  describe('uploadImage', () => {
+    let capturedContentType: string | null;
+    let capturedUploadContentType: string | null;
+
+    beforeEach(() => {
+      capturedContentType = null;
+      capturedUploadContentType = null;
+
+      // presigned URL 발급 핸들러
+      server.use(
+        http.get(S3_ENDPOINT, ({ request }) => {
+          const url = new URL(request.url);
+          capturedContentType = url.searchParams.get('contentType');
+          return HttpResponse.json(mockPresignResponse);
+        })
+      );
+
+      // S3 업로드 핸들러 (fetch 사용)
+      server.use(
+        http.put('https://s3.amazonaws.com/*', ({ request }) => {
+          capturedUploadContentType = request.headers.get('Content-Type');
+          return new HttpResponse(null, { status: 200 });
+        })
+      );
+    });
+
+    it('이미지 파일 업로드 시 file.type이 contentType으로 전달된다', async () => {
+      const file = new File(['test'], 'banner.webp', { type: 'image/webp' });
+
+      await s3Service.uploadImage(file, 'admin/banner');
+
+      expect(capturedContentType).toBe('image/webp');
+    });
+
+    it('동영상 파일 업로드 시 file.type이 contentType으로 전달된다', async () => {
+      const file = new File(['test'], 'banner.mp4', { type: 'video/mp4' });
+
+      await s3Service.uploadImage(file, 'admin/banner');
+
+      expect(capturedContentType).toBe('video/mp4');
+    });
+
+    it('명시적 contentType이 file.type보다 우선한다', async () => {
+      const file = new File(['test'], 'banner.mp4', { type: 'video/mp4' });
+
+      await s3Service.uploadImage(file, 'admin/banner', 'video/webm');
+
+      expect(capturedContentType).toBe('video/webm');
+    });
+
+    it('S3 PUT 요청에 올바른 Content-Type 헤더가 포함된다', async () => {
+      const file = new File(['test'], 'banner.mp4', { type: 'video/mp4' });
+
+      await s3Service.uploadImage(file, 'admin/banner');
+
+      expect(capturedUploadContentType).toBe('video/mp4');
+    });
+
+    it('업로드 성공 시 viewUrl을 반환한다', async () => {
+      const file = new File(['test'], 'banner.jpg', { type: 'image/jpeg' });
+
+      const viewUrl = await s3Service.uploadImage(file, 'admin/banner');
+
+      expect(viewUrl).toBe('https://cdn.example.com/admin/banner/test-uuid.jpg');
+    });
+  });
+
+  describe('uploadToS3', () => {
+    it('업로드 실패 시 에러를 던진다', async () => {
+      server.use(
+        http.put('https://s3.amazonaws.com/*', () => {
+          return new HttpResponse(null, { status: 403, statusText: 'Forbidden' });
+        })
+      );
+
+      const file = new File(['test'], 'banner.mp4', { type: 'video/mp4' });
+
+      await expect(
+        s3Service.uploadToS3('https://s3.amazonaws.com/test-bucket/test.mp4?presigned=true', file)
+      ).rejects.toThrow('S3 업로드 실패');
+    });
+  });
+});
diff --git a/src/services/s3.service.ts b/src/services/s3.service.ts
index 5ec0081..ee841a5 100644
--- a/src/services/s3.service.ts
+++ b/src/services/s3.service.ts
@@ -57,11 +57,12 @@ export const s3Service = {
    * @param rootPath - 업로드 경로
    * @returns CDN 조회 URL (viewUrl)
    */
-  uploadImage: async (file: File, rootPath: string): Promise<string> => {
+  uploadImage: async (file: File, rootPath: string, contentType?: string): Promise<string> => {
     // 1. Presigned URL 발급
     const presignResponse = await s3Service.getPresignedUrls({
       rootPath,
       uploadSize: 1,
+      contentType: contentType ?? file.type,
     });
 
     const uploadInfo = presignResponse.imageUploadInfo[0];
diff --git a/src/test/mocks/data.ts b/src/test/mocks/data.ts
index f7abbef..4929f2c 100644
--- a/src/test/mocks/data.ts
+++ b/src/test/mocks/data.ts
@@ -172,6 +172,7 @@ export const mockBannerListItems: BannerListItem[] = [
     startDate: '2024-01-01T00:00:00',
     endDate: '2024-01-31T23:59:59',
     isActive: true,
+    mediaType: 'IMAGE',
     createdAt: '2024-01-01T00:00:00',
     updatedAt: '2024-01-01T00:00:00',
   },
@@ -184,6 +185,7 @@ export const mockBannerListItems: BannerListItem[] = [
     startDate: null,
     endDate: null,
     isActive: false,
+    mediaType: 'IMAGE',
     createdAt: '2024-02-01T00:00:00',
     updatedAt: '2024-02-01T00:00:00',
   },
@@ -205,6 +207,7 @@ export const mockBannerDetail: BannerDetail = {
   startDate: '2024-01-01T00:00:00',
   endDate: '2024-01-31T23:59:59',
   isActive: true,
+  mediaType: 'IMAGE',
   createdAt: '2024-01-01T00:00:00',
   updatedAt: '2024-01-01T00:00:00',
 };
diff --git a/src/types/api/banner.api.ts b/src/types/api/banner.api.ts
index abca18c..46828c1 100644
--- a/src/types/api/banner.api.ts
+++ b/src/types/api/banner.api.ts
@@ -61,6 +61,18 @@ export type BannerType = 'SURVEY' | 'CURATION' | 'AD' | 'PARTNERSHIP' | 'ETC';
  */
 export type TextPosition = 'LT' | 'LB' | 'RT' | 'RB' | 'CENTER';
 
+/**
+ * 미디어 유형
+ * @description 배너 미디어의 유형 구분 (이미지 또는 동영상)
+ */
+export type MediaType = 'IMAGE' | 'VIDEO';
+
+/** 미디어 유형 레이블 매핑 */
+export const MEDIA_TYPE_LABELS: Record<MediaType, string> = {
+  IMAGE: '이미지',
+  VIDEO: '동영상',
+};
+
 /** 배너 타입 레이블 매핑 */
 export const BANNER_TYPE_LABELS: Record<BannerType, string> = {
   SURVEY: '설문조사',
@@ -117,6 +129,8 @@ export interface BannerApiTypes {
       endDate: string | null;
       /** 활성화 상태 */
       isActive: boolean;
+      /** 미디어 유형 (IMAGE | VIDEO) */
+      mediaType: MediaType;
       /** 생성일시 */
       createdAt: string;
       /** 수정일시 */
@@ -170,6 +184,8 @@ export interface BannerApiTypes {
       endDate: string | null;
       /** 활성화 상태 */
       isActive: boolean;
+      /** 미디어 유형 (IMAGE | VIDEO) */
+      mediaType: MediaType;
       /** 생성일시 */
       createdAt: string;
       /** 수정일시 */
@@ -208,6 +224,8 @@ export interface BannerApiTypes {
       endDate: string | null;
       /** 활성화 상태 */
       isActive: boolean;
+      /** 미디어 유형 (기본값: IMAGE) */
+      mediaType?: MediaType;
     };
     /** 응답 데이터 */
     response: {
@@ -253,6 +271,8 @@ export interface BannerApiTypes {
       endDate: string | null;
       /** 활성화 상태 */
       isActive: boolean;
+      /** 미디어 유형 (미입력 시 기존 값 유지) */
+      mediaType?: MediaType;
     };
     /** 응답 데이터 */
     response: {
diff --git a/src/types/api/s3.api.ts b/src/types/api/s3.api.ts
index f7e121c..45bc5fa 100644
--- a/src/types/api/s3.api.ts
+++ b/src/types/api/s3.api.ts
@@ -27,6 +27,8 @@ export const S3Api = {
 export interface PresignUrlParams {
   rootPath: string;
   uploadSize: number;
+  /** Content-Type (기본값: image/jpeg). 예: 'image/webp', 'video/mp4' */
+  contentType?: string;
 }
 
 /**

From 9bf359e897b1c76c7eea7f3e613013f14e9f241d Mon Sep 17 00:00:00 2001
From: hyejj19 <hyejj19@naver.com>
Date: Thu, 26 Mar 2026 10:52:10 +0900
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20S3=20PUT=20Content-Type=EC=9D=84=20p?=
 =?UTF-8?q?resign=20=EC=84=9C=EB=AA=85=EA=B3=BC=20=EC=9D=BC=EC=B9=98?=
 =?UTF-8?q?=EC=8B=9C=ED=82=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

uploadToS3에 contentType 파라미터를 추가하여 presigned URL 서명 조건과
S3 PUT 헤더가 항상 동일하도록 보장한다.

Addresses review comment by @Copilot on src/services/s3.service.ts:66.
PR: #38

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/services/__tests__/s3.service.test.ts | 9 +++++++++
 src/services/s3.service.ts                | 9 +++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/services/__tests__/s3.service.test.ts b/src/services/__tests__/s3.service.test.ts
index b9e5b28..c202674 100644
--- a/src/services/__tests__/s3.service.test.ts
+++ b/src/services/__tests__/s3.service.test.ts
@@ -128,6 +128,15 @@ describe('s3Service', () => {
       expect(capturedUploadContentType).toBe('video/mp4');
     });
 
+    it('명시적 contentType이 presign과 S3 PUT 양쪽에 일치하게 전달된다', async () => {
+      const file = new File(['test'], 'banner.mp4', { type: 'video/mp4' });
+
+      await s3Service.uploadImage(file, 'admin/banner', 'video/webm');
+
+      expect(capturedContentType).toBe('video/webm');
+      expect(capturedUploadContentType).toBe('video/webm');
+    });
+
     it('업로드 성공 시 viewUrl을 반환한다', async () => {
       const file = new File(['test'], 'banner.jpg', { type: 'image/jpeg' });
 
diff --git a/src/services/s3.service.ts b/src/services/s3.service.ts
index ee841a5..3cb0754 100644
--- a/src/services/s3.service.ts
+++ b/src/services/s3.service.ts
@@ -35,12 +35,12 @@ export const s3Service = {
    * @param file - 업로드할 파일
    * @throws 업로드 실패 시 에러
    */
-  uploadToS3: async (uploadUrl: string, file: File): Promise<void> => {
+  uploadToS3: async (uploadUrl: string, file: File, contentType?: string): Promise<void> => {
     const response = await fetch(uploadUrl, {
       method: 'PUT',
       body: file,
       headers: {
-        'Content-Type': file.type,
+        'Content-Type': contentType ?? file.type,
       },
     });
 
@@ -70,8 +70,9 @@ export const s3Service = {
       throw new Error('Presigned URL 발급 실패');
     }
 
-    // 2. S3에 업로드
-    await s3Service.uploadToS3(uploadInfo.uploadUrl, file);
+    // 2. S3에 업로드 (presign 서명과 동일한 contentType 사용)
+    const resolvedContentType = contentType ?? file.type;
+    await s3Service.uploadToS3(uploadInfo.uploadUrl, file, resolvedContentType);
 
     // 3. CDN URL 반환
     return uploadInfo.viewUrl;

From e07e49f81217575a897b0671cf42feb6a8f0f6af Mon Sep 17 00:00:00 2001
From: hyejj19 <hyejj19@naver.com>
Date: Thu, 26 Mar 2026 10:52:16 +0900
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20blob=20URL=20=EB=A9=94=EB=AA=A8?=
 =?UTF-8?q?=EB=A6=AC=20=EB=88=84=EC=88=98=20=EB=B0=A9=EC=A7=80=20(revokeOb?=
 =?UTF-8?q?jectURL)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

파일 교체/삭제 시 이전 blob URL을 revokeObjectURL로 정리하여
메모리 누적을 방지한다. 빌드 에러 수정 포함.

Addresses review comment by @Copilot on src/components/common/ImageUpload.tsx:95.
PR: #38

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/common/ImageUpload.tsx                | 9 +++++++++
 src/components/common/__tests__/ImageUpload.test.tsx | 4 +++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/common/ImageUpload.tsx b/src/components/common/ImageUpload.tsx
index 70ce099..c43e452 100644
--- a/src/components/common/ImageUpload.tsx
+++ b/src/components/common/ImageUpload.tsx
@@ -71,6 +71,7 @@ export function ImageUpload({
   const [previewUrl, setPreviewUrl] = useState<string | null>(imageUrl);
   const [isVideo, setIsVideo] = useState(() => isVideoFile(imageUrl));
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const blobUrlRef = useRef<string | null>(null);
 
   useEffect(() => {
     setPreviewUrl(imageUrl);
@@ -89,8 +90,12 @@ export function ImageUpload({
         return;
       }
 
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+      }
       setIsVideo(file.type.startsWith('video/'));
       const url = URL.createObjectURL(file);
+      blobUrlRef.current = url;
       setPreviewUrl(url);
       onImageChange(file, url);
     },
@@ -125,6 +130,10 @@ export function ImageUpload({
   };
 
   const handleRemove = () => {
+    if (blobUrlRef.current) {
+      URL.revokeObjectURL(blobUrlRef.current);
+      blobUrlRef.current = null;
+    }
     setPreviewUrl(null);
     setIsVideo(false);
     onImageChange(null, null);
diff --git a/src/components/common/__tests__/ImageUpload.test.tsx b/src/components/common/__tests__/ImageUpload.test.tsx
index 9810efe..be48b7c 100644
--- a/src/components/common/__tests__/ImageUpload.test.tsx
+++ b/src/components/common/__tests__/ImageUpload.test.tsx
@@ -251,7 +251,9 @@ describe('ImageUpload 컴포넌트', () => {
       fireEvent.change(input, { target: { files: [mp4File] } });
 
       // 2. handleFile에서 blob URL이 생성되어 onImageChange로 전달됨
-      const blobUrl = onImageChange.mock.calls[0][1] as string;
+      const call = onImageChange.mock.calls[0];
+      expect(call).toBeDefined();
+      const blobUrl = call![1] as string;
       expect(blobUrl).toMatch(/^blob:/);
 
       // 3. 부모가 imageUrl prop을 blob URL로 다시 내려줌 (실제 앱 동작)

From bcf586c5cc82e2ab92b4d31227e79f2a4eda6608 Mon Sep 17 00:00:00 2001
From: hyejj19 <hyejj19@naver.com>
Date: Thu, 26 Mar 2026 10:52:20 +0900
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=ED=94=84=EB=A1=9C=EB=8D=95=EC=85=98?=
 =?UTF-8?q?=20console.log=20=EB=94=94=EB=B2=84=EA=B7=B8=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

폼 validation 에러 핸들러의 console.log를 제거한다.

Addresses review comment by @Copilot on src/pages/banners/BannerDetail.tsx:70.
PR: #38

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/banners/BannerDetail.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/pages/banners/BannerDetail.tsx b/src/pages/banners/BannerDetail.tsx
index 0778d57..c551a3a 100644
--- a/src/pages/banners/BannerDetail.tsx
+++ b/src/pages/banners/BannerDetail.tsx
@@ -69,14 +69,9 @@ export function BannerDetailPage() {
     form.setValue('mediaType', mediaType);
   };
 
-  const handleSubmit = form.handleSubmit(
-    (data) => {
-      onSubmit(data, { imagePreviewUrl });
-    },
-    (errors) => {
-      console.log('[DEBUG] Form validation errors:', errors);
-    }
-  );
+  const handleSubmit = form.handleSubmit((data) => {
+    onSubmit(data, { imagePreviewUrl });
+  });
 
   const handleDeleteConfirm = () => {
     handleDelete();

From b44daccc119e2a880643187b4f27d39e618a93c9 Mon Sep 17 00:00:00 2001
From: Hyejung Park <hyejj19@naver.com>
Date: Sat, 28 Mar 2026 00:07:27 +0900
Subject: [PATCH 5/5] Bump version from 1.1.6 to 1.2.6

---
 VERSION | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/VERSION b/VERSION
index 0664a8f..3c43790 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-1.1.6
+1.2.6