From 94b39a44bd316457bdec2be7e4e8300e303eb8bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=84=B1=EA=B2=BD?= <skkim@o2o.kr>
Date: Mon, 24 Aug 2026 13:45:16 +0900
Subject: [PATCH] =?UTF-8?q?feat(ssulbox):=20=EC=8D=B0=EB=B0=95=EC=8A=A4=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=EC=97=90=20=EA=B3=B5=EC=8B=9D=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=20=EC=98=A4=EB=B2=84=EB=A0=88=EC=9D=B4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VideoDetailContent.tsx   | 11 +----
 src/pages/Ssulbox/SsulDetailContent.tsx | 57 +++++++++++++++++++------
 src/styles/contents-social.css          |  2 +-
 src/utils/api.ts                        |  2 +
 src/utils/url.ts                        | 15 +++++++
 5 files changed, 63 insertions(+), 24 deletions(-)
 create mode 100644 src/utils/url.ts

diff --git a/src/components/VideoDetailContent.tsx b/src/components/VideoDetailContent.tsx
index 10fa4d6..ced9e7b 100644
--- a/src/components/VideoDetailContent.tsx
+++ b/src/components/VideoDetailContent.tsx
@@ -13,16 +13,7 @@ import {
 import { VideoDetailItem, CommentItem, UserMeResponse } from '../types/api';
 import { buildVideoShareUrl, tryNativeShare } from '../utils/nativeShare';
 import LoginPromptModal from './LoginPromptModal';
-
-const isSafeHttpUrl = (url?: string | null): boolean => {
-  if (!url) return false;
-  try {
-    const parsed = new URL(url);
-    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
-  } catch {
-    return false;
-  }
-};
+import { isSafeHttpUrl } from '../utils/url';
 
 interface VideoDetailContentProps {
   videoId: string;
diff --git a/src/pages/Ssulbox/SsulDetailContent.tsx b/src/pages/Ssulbox/SsulDetailContent.tsx
index 2b60897..f3dc331 100644
--- a/src/pages/Ssulbox/SsulDetailContent.tsx
+++ b/src/pages/Ssulbox/SsulDetailContent.tsx
@@ -14,6 +14,7 @@ import type { SsulDetailItem } from '../../utils/api';
 import { CommentItem, UserMeResponse } from '../../types/api';
 import { buildContentShareUrl, tryNativeShare } from '../../utils/nativeShare';
 import LoginPromptModal from '../../components/LoginPromptModal';
+import { isSafeHttpUrl } from '../../utils/url';
 
 interface SsulDetailContentProps {
   contentId: string;
@@ -48,6 +49,7 @@ const SsulDetailContent: React.FC<SsulDetailContentProps> = ({
 
   const [copied, setCopied] = useState(false);
   const [isLandscape, setIsLandscape] = useState(false);
+  const [showSiteOverlay, setShowSiteOverlay] = useState(false);
   const [showLoginModal, setShowLoginModal] = useState(false);
 
   const [comments, setComments] = useState<CommentItem[]>([]);
@@ -86,6 +88,7 @@ const SsulDetailContent: React.FC<SsulDetailContentProps> = ({
     const fetchContent = async () => {
       setLoading(true);
       setError(null);
+      setShowSiteOverlay(false);
       try {
         const data = await getSsulContentById(contentId);
         setContent(data);
@@ -265,19 +268,47 @@ const SsulDetailContent: React.FC<SsulDetailContentProps> = ({
         <div className="ado2-contents-error"><p>{error}</p></div>
       ) : content ? (
         <div className={`video-detail-content ${isLandscape ? 'landscape' : ''}`}>
-          <video
-            src={content.video_url}
-            controls
-            autoPlay
-            playsInline
-            controlsList="nodownload"
-            onContextMenu={(e) => e.preventDefault()}
-            className="video-detail-player"
-            onLoadedMetadata={(e) => {
-              const v = e.currentTarget;
-              setIsLandscape(v.videoWidth > v.videoHeight);
-            }}
-          />
+          <div className="video-detail-player-wrap">
+            <video
+              src={content.video_url}
+              controls
+              autoPlay
+              playsInline
+              controlsList="nodownload"
+              onContextMenu={(e) => e.preventDefault()}
+              className="video-detail-player"
+              onLoadedMetadata={(e) => {
+                const v = e.currentTarget;
+                setIsLandscape(v.videoWidth > v.videoHeight);
+              }}
+              onTimeUpdate={(e) => {
+                if (!content.official_site_url) return;
+                const v = e.currentTarget;
+                // 영상 종료 3초 전부터 공식 홈페이지 오버레이 노출
+                setShowSiteOverlay(
+                  Number.isFinite(v.duration) && v.duration - v.currentTime <= 3
+                );
+              }}
+            />
+            {showSiteOverlay && isSafeHttpUrl(content.official_site_url) && (
+              <a
+                href={content.official_site_url as string}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="video-site-overlay"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <circle cx="12" cy="12" r="10"/>
+                  <line x1="2" y1="12" x2="22" y2="12"/>
+                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+                </svg>
+                <span className="video-site-overlay-text">
+                  <strong>{content.store_name}</strong>
+                  {t('videoDetail.siteOverlayLabel')}
+                </span>
+              </a>
+            )}
+          </div>
 
           <div className="video-detail-info">
             <h2 className="video-detail-store">
diff --git a/src/styles/contents-social.css b/src/styles/contents-social.css
index 438a96c..94e1d1e 100644
--- a/src/styles/contents-social.css
+++ b/src/styles/contents-social.css
@@ -800,7 +800,7 @@
 
 .video-detail-content {
   display: flex;
-  gap: 16px;
+  gap: 24px;
   flex-wrap: wrap;
   align-items: center;
   flex: 1;
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 04c7ebd..646b8e5 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -605,6 +605,8 @@ export interface SsulDetailItem {
   video_url: string;
   store_name: string | null;
   region: string | null;
+  /** 업체 공식 링크. 영상 종료 3초 전 오버레이에 쓰며, 미확보 시 null */
+  official_site_url?: string | null;
   created_at: string;
   like_count: number;
   is_liked_by_me: boolean;
diff --git a/src/utils/url.ts b/src/utils/url.ts
new file mode 100644
index 0000000..d2f7cb4
--- /dev/null
+++ b/src/utils/url.ts
@@ -0,0 +1,15 @@
+/**
+ * 사용자·크롤링에서 온 URL을 링크로 그리기 전에 검증한다.
+ *
+ * `official_site_url`은 업체가 직접 입력하거나 네이버 플레이스에서 긁어온 값이라
+ * `javascript:` 같은 스킴이 섞이면 href에 그대로 실려 XSS가 된다. http/https만 통과시킨다.
+ */
+export const isSafeHttpUrl = (url?: string | null): boolean => {
+  if (!url) return false;
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+  } catch {
+    return false;
+  }
+};