From 3519e1307b8b59258b8e6dd23969168e508c0543 Mon Sep 17 00:00:00 2001
From: imnyang <imnyang@pm.me>
Date: Thu, 23 Apr 2026 19:23:01 +0900
Subject: [PATCH] feat: replace video placeholder icons with interactive video
 elements in preview components

---
 apps/frontend/src/app/add/page.tsx | 30 ++++++++++++++++-------------
 apps/frontend/src/app/page.tsx     | 31 +++++++++++++++++-------------
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/apps/frontend/src/app/add/page.tsx b/apps/frontend/src/app/add/page.tsx
index 605c9a9..6c97cb5 100644
--- a/apps/frontend/src/app/add/page.tsx
+++ b/apps/frontend/src/app/add/page.tsx
@@ -466,19 +466,23 @@ export default function AddPage() {
                                             key={`${item.url}-${index}`}
                                             className={`group relative block cursor-pointer overflow-hidden border bg-white/20 transition ${selected[index] ? "border-foreground/35" : "border-border"}`}
                                         >
-                                            <img
-                                                src={item.url}
-                                                alt={`preview ${index + 1}`}
-                                                loading="lazy"
-                                                decoding="async"
-                                                className={`aspect-4/5 w-full object-cover transition ${selected[index] ? "opacity-100" : "opacity-35 grayscale-20"}`}
-                                            />
-                                            {item.type === "video" && (
-                                                <div className="absolute inset-0 flex items-center justify-center bg-black/10">
-                                                    <svg className="h-10 w-10 text-white/80 drop-shadow-md" fill="currentColor" viewBox="0 0 20 20">
-                                                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
-                                                    </svg>
-                                                </div>
+                                            {item.type === "video" ? (
+                                                <video
+                                                    src={item.url}
+                                                    autoPlay
+                                                    muted
+                                                    loop
+                                                    playsInline
+                                                    className={`aspect-4/5 w-full object-cover transition ${selected[index] ? "opacity-100" : "opacity-35 grayscale-20"}`}
+                                                />
+                                            ) : (
+                                                <img
+                                                    src={item.url}
+                                                    alt={`preview ${index + 1}`}
+                                                    loading="lazy"
+                                                    decoding="async"
+                                                    className={`aspect-4/5 w-full object-cover transition ${selected[index] ? "opacity-100" : "opacity-35 grayscale-20"}`}
+                                                />
                                             )}
                                             <div className="absolute left-2 top-2 border border-border/60 bg-background/80 px-2 py-1 text-xs backdrop-blur">
                                                 <input
diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx
index 078f754..589790c 100644
--- a/apps/frontend/src/app/page.tsx
+++ b/apps/frontend/src/app/page.tsx
@@ -549,19 +549,24 @@ export default function App() {
                     className="group relative block overflow-hidden image-scale"
                     title={`작가 ${photo.author}`}
                   >
-                    <img
-                      src={photo.src}
-                      alt={photo.alt}
-                      loading="lazy"
-                      decoding="async"
-                      className="block w-full"
-                    />
-                    {photo.mediaType === "video" && (
-                      <div className="absolute right-2 top-2 rounded-full bg-black/40 p-1.5 text-white backdrop-blur-sm">
-                        <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20">
-                          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
-                        </svg>
-                      </div>
+                    {photo.mediaType === "video" ? (
+                      <video
+                        src={photo.src}
+                        poster={photo.thumbnailUrl}
+                        autoPlay
+                        muted
+                        loop
+                        playsInline
+                        className="block w-full"
+                      />
+                    ) : (
+                      <img
+                        src={photo.src}
+                        alt={photo.alt}
+                        loading="lazy"
+                        decoding="async"
+                        className="block w-full"
+                      />
                     )}
                     <div className="absolute inset-x-3 bottom-3 translate-y-3 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100">
                       <button