From 1c01dab74873a5e25bae0389fd498e1f67a9f74c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=84=B1=EA=B2=BD?= <skkim@o2o.kr>
Date: Tue, 11 Aug 2026 14:57:35 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=98=81=EC=83=81=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=EC=9D=84=20social-posting-modal=20?=
 =?UTF-8?q?=EA=B5=AC=EC=A1=B0=EB=A1=9C=20=ED=86=B5=EC=9D=BC=ED=95=98?=
 =?UTF-8?q?=EA=B3=A0=20video=20=EC=82=90=EC=A0=B8=EB=82=98=EC=98=B4=20?=
 =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VideoDetailContent.tsx   |  3 +
 src/components/VideoDetailModal.tsx     | 25 +-------
 src/pages/Ssulbox/SsulDetailContent.tsx |  3 +
 src/pages/Ssulbox/SsulViewerModal.tsx   | 25 +-------
 src/styles/contents-social.css          | 78 ++++++++++++++++++++++---
 5 files changed, 81 insertions(+), 53 deletions(-)

diff --git a/src/components/VideoDetailContent.tsx b/src/components/VideoDetailContent.tsx
index 97244b0..4021ddf 100644
--- a/src/components/VideoDetailContent.tsx
+++ b/src/components/VideoDetailContent.tsx
@@ -249,6 +249,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
         )}
       </div>
 
+      <div className="video-detail-body">
       {loading ? (
         <div className="ado2-contents-loading">
           <div className="loading-spinner"></div>
@@ -262,6 +263,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
             src={video.result_movie_url}
             controls
             autoPlay
+            playsInline
             controlsList="nodownload"
             onContextMenu={(e) => e.preventDefault()}
             className="video-detail-player"
@@ -477,6 +479,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
           </div>
         </div>
       ) : null}
+      </div>
 
       {showLoginModal && (
         <LoginPromptModal onClose={() => setShowLoginModal(false)} />
diff --git a/src/components/VideoDetailModal.tsx b/src/components/VideoDetailModal.tsx
index 21ad059..2b09e54 100644
--- a/src/components/VideoDetailModal.tsx
+++ b/src/components/VideoDetailModal.tsx
@@ -27,29 +27,8 @@ const VideoDetailModal: React.FC<VideoDetailModalProps> = ({ videoId, onClose })
   const overlayCloseHandlers = useOverlayClose(onClose);
 
   return (
-    <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        background: 'rgba(0, 0, 0, 0.85)',
-        zIndex: 2000,
-        display: 'flex',
-        overflowY: 'auto',
-        padding: '24px 16px',
-      }}
-      {...overlayCloseHandlers}
-    >
-      <div
-        style={{
-          background: '#01282A',
-          borderRadius: '16px',
-          width: '100%',
-          maxWidth: '800px',
-          margin: 'auto',
-          position: 'relative',
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
+    <div className="video-detail-overlay" {...overlayCloseHandlers}>
+      <div className="video-detail-modal-box" onClick={(e) => e.stopPropagation()}>
         <VideoDetailContent videoId={videoId} isModal={true} onClose={onClose} />
       </div>
     </div>
diff --git a/src/pages/Ssulbox/SsulDetailContent.tsx b/src/pages/Ssulbox/SsulDetailContent.tsx
index a6ec8e4..82d8ca1 100644
--- a/src/pages/Ssulbox/SsulDetailContent.tsx
+++ b/src/pages/Ssulbox/SsulDetailContent.tsx
@@ -290,6 +290,7 @@ const SsulDetailContent: React.FC<SsulDetailContentProps> = ({
         )}
       </div>
 
+      <div className="video-detail-body">
       {loading ? (
         <div className="ado2-contents-loading">
           <div className="loading-spinner"></div>
@@ -303,6 +304,7 @@ const SsulDetailContent: React.FC<SsulDetailContentProps> = ({
             src={content.video_url}
             controls
             autoPlay
+            playsInline
             controlsList="nodownload"
             onContextMenu={(e) => e.preventDefault()}
             className="video-detail-player"
@@ -513,6 +515,7 @@ const SsulDetailContent: React.FC<SsulDetailContentProps> = ({
           </div>
         </div>
       ) : null}
+      </div>
 
       {showLoginModal && (
         <LoginPromptModal onClose={() => setShowLoginModal(false)} />
diff --git a/src/pages/Ssulbox/SsulViewerModal.tsx b/src/pages/Ssulbox/SsulViewerModal.tsx
index 034835e..805241c 100644
--- a/src/pages/Ssulbox/SsulViewerModal.tsx
+++ b/src/pages/Ssulbox/SsulViewerModal.tsx
@@ -39,29 +39,8 @@ const SsulViewerModal: React.FC<SsulViewerModalProps> = ({ item, onClose }) => {
   if (!item) return null;
 
   return (
-    <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        background: 'rgba(0, 0, 0, 0.85)',
-        zIndex: 2000,
-        display: 'flex',
-        overflowY: 'auto',
-        padding: '24px 16px',
-      }}
-      {...overlayCloseHandlers}
-    >
-      <div
-        style={{
-          background: '#01282A',
-          borderRadius: '16px',
-          width: '100%',
-          maxWidth: '800px',
-          margin: 'auto',
-          position: 'relative',
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
+    <div className="video-detail-overlay" {...overlayCloseHandlers}>
+      <div className="video-detail-modal-box" onClick={(e) => e.stopPropagation()}>
         <SsulDetailContent
           contentId={String(item.video_id)}
           isModal={true}
diff --git a/src/styles/contents-social.css b/src/styles/contents-social.css
index b69de52..46040a4 100644
--- a/src/styles/contents-social.css
+++ b/src/styles/contents-social.css
@@ -646,10 +646,56 @@
 
 /* ── VideoDetailPage / VideoDetailModal ─────────────────────────── */
 
-/* 모달 내부 콘텐츠 (풀페이지의 video-detail-page와 동일 스타일, 배경 제외) */
+/* social-posting-overlay 와 동일한 구조: 배경 + 중앙 정렬 + 내부 스크롤 박스 */
+.video-detail-overlay {
+  position: fixed;
+  inset: 0;
+  text-align: left;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  padding: 1rem;
+}
+
+/* social-posting-modal 과 동일한 박스 스타일: 헤더 고정 + 본문만 스크롤 */
+.video-detail-modal-box {
+  width: 100%;
+  max-width: 800px;
+  max-height: 90vh;
+  background-color: #01282A;
+  border-radius: 16px;
+  border: 1px solid rgba(166, 255, 234, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  /* 일부 모바일 브라우저는 video 를 별도 하드웨어 컴포지팅 레이어로 그려
+     overflow:hidden + border-radius 클리핑을 무시하고 밖으로 삐져나온다.
+     contain:paint 로 이 박스 밖에는 절대 그려지지 않도록 강제한다. */
+  contain: paint;
+}
+
+/* 모달 내부 콘텐츠 (풀페이지의 video-detail-page와 동일 스타일, 배경 제외).
+   헤더는 여기의 일반 흐름 자식(스크롤 없음)이고, .video-detail-body 만 스크롤된다.
+   과거엔 헤더에 position:sticky 를 써서 흉내냈으나, 자동재생 <video> 와 같은
+   스크롤 컨테이너 안에 sticky 요소가 있으면 iOS Safari 에서 video 가 별도
+   레이어로 떨어져나가 모달 밖으로 삐져나오는 버그가 있어 구조 자체를 분리했다. */
 .video-detail-modal-content {
   color: #fff;
-  padding: 24px 32px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* social-posting-content 에 대응하는 스크롤 영역 */
+.video-detail-modal-content > .video-detail-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 32px 24px;
 }
 
 .video-detail-page-content {
@@ -690,13 +736,15 @@
 }
 
 .video-detail-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .video-detail-modal-title {
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 600;
   color: #FFFFFF;
   margin: 0;
@@ -737,6 +785,7 @@
   display: block;
   width: 100%;
   height: auto;
+  padding: 1rem;
   max-width: 360px;
   border-radius: 12px;
   flex-shrink: 0;
@@ -752,7 +801,7 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding-top: 8px;
+  padding-top: 1rem;
   align-self: flex-start;
 }
 
@@ -1183,6 +1232,21 @@
   }
 }
 
+/* social-posting-modal 의 Mobile Adjustments 와 동일한 기준(768px) */
+@media (max-width: 768px) {
+  .video-detail-modal-box {
+    max-height: 95vh;
+  }
+
+  .video-detail-modal-content > .video-detail-header {
+    padding: 1rem;
+  }
+
+  .video-detail-modal-content > .video-detail-body {
+    padding: 0 1rem 1rem;
+  }
+}
+
 .pagination-info {
   color: #9BCACC;
   font-size: 14px;