From ef82d6d1a46413cc757bff045b812f171549080c Mon Sep 17 00:00:00 2001
From: imnyang <imnyang@pm.me>
Date: Sat, 23 May 2026 22:33:39 +0900
Subject: [PATCH] feat: apply media proxy to thumbnail URLs in detail and home
 pages

---
 apps/frontend/src/app/detail/[id]/page.tsx | 3 ++-
 apps/frontend/src/app/page.tsx             | 7 ++++---
 apps/frontend/src/lib/media.ts             | 5 -----
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/app/detail/[id]/page.tsx b/apps/frontend/src/app/detail/[id]/page.tsx
index 4635df3..a633aa7 100644
--- a/apps/frontend/src/app/detail/[id]/page.tsx
+++ b/apps/frontend/src/app/detail/[id]/page.tsx
@@ -4,6 +4,7 @@ import { notFound } from "next/navigation";
 import type { Metadata } from "next";
 import Header from "@/components/header";
 import DetailRawPanel from "@/components/detail-raw-panel";
+import { proxyMediaUrl } from "@/lib/media";
 
 type SourceType = "twitter" | "pixiv";
 
@@ -248,7 +249,7 @@ export default async function DetailPage({ params }: { params: Promise<{ id: str
                             {post.mediaType === "video" ? (
                                 <video
                                     src={post.mediaUrl}
-                                    poster={post.thumbnailUrl}
+                                    poster={proxyMediaUrl(post.thumbnailUrl)}
                                     controls
                                     loop
                                     muted
diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx
index 589790c..e5f8937 100644
--- a/apps/frontend/src/app/page.tsx
+++ b/apps/frontend/src/app/page.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { MasonryPhotoAlbum } from "react-photo-album";
 import Header from "../components/header";
+import { proxyMediaUrl } from "../lib/media";
 
 type Upload = {
   _id: string;
@@ -439,7 +440,7 @@ export default function App() {
           (upload) =>
             new Promise<GalleryPhoto | null>((resolve) => {
               const image = new Image();
-              const srcToLoad = (upload.mediaType === "video" && upload.thumbnailUrl) ? upload.thumbnailUrl : upload.mediaUrl;
+              const srcToLoad = (upload.mediaType === "video" && upload.thumbnailUrl) ? proxyMediaUrl(upload.thumbnailUrl) : upload.mediaUrl;
               image.src = srcToLoad;
               image.onload = () => {
                 resolve({
@@ -451,7 +452,7 @@ export default function App() {
                   author: upload.author?.trim() || "unknown",
                   source: upload.tweet?.url || "",
                   mediaType: upload.mediaType,
-                  thumbnailUrl: upload.thumbnailUrl,
+                  thumbnailUrl: proxyMediaUrl(upload.thumbnailUrl),
                 });
               };
               image.onerror = () => {
@@ -464,7 +465,7 @@ export default function App() {
                   author: upload.author?.trim() || "unknown",
                   source: upload.tweet?.url || "",
                   mediaType: upload.mediaType,
-                  thumbnailUrl: upload.thumbnailUrl,
+                  thumbnailUrl: proxyMediaUrl(upload.thumbnailUrl),
                 });
               };
             }),
diff --git a/apps/frontend/src/lib/media.ts b/apps/frontend/src/lib/media.ts
index 5458182..56f43a6 100644
--- a/apps/frontend/src/lib/media.ts
+++ b/apps/frontend/src/lib/media.ts
@@ -1,7 +1,3 @@
-/**
- * pbs.twimg.com 등 트위터 미디어 URL을 백엔드 프록시 경로로 변환합니다.
- * 트래킹 보호나 방화벽으로 인해 직접 접근이 막힐 수 있기 때문입니다.
- */
 const PROXIED_HOSTS = [
   "pbs.twimg.com",
   "video.twimg.com",
@@ -18,7 +14,6 @@ export function proxyMediaUrl(url: string | undefined | null): string {
       return `/api/proxy/image?url=${encodeURIComponent(url)}`;
     }
   } catch {
-    // 유효하지 않은 URL이면 그대로 반환
   }
 
   return url;