From db6949d53e787933f5ed2c71d912cf1ed1b69af2 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Mon, 12 Jan 2026 18:58:06 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EA=B3=A1=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8:=20YouTube=20=EC=A0=84=EC=B2=B4=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EC=8B=9C=20=EC=9E=90=EB=8F=99=20=EA=B0=80=EB=A1=9C?=
 =?UTF-8?q?=20=ED=9A=8C=EC=A0=84=20=EC=8B=9C=EB=8F=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/mobile/public/TrackDetail.jsx   | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/mobile/public/TrackDetail.jsx b/frontend/src/pages/mobile/public/TrackDetail.jsx
index 6ee9411..cf0c48c 100644
--- a/frontend/src/pages/mobile/public/TrackDetail.jsx
+++ b/frontend/src/pages/mobile/public/TrackDetail.jsx
@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { motion } from 'framer-motion';
@@ -43,6 +43,42 @@ function TrackDetail() {
     // 가사 펼침 상태
     const [showFullLyrics, setShowFullLyrics] = useState(false);
 
+    // 전체화면 시 자동 가로 회전 처리
+    useEffect(() => {
+        const handleFullscreenChange = async () => {
+            const isFullscreen = !!document.fullscreenElement;
+            
+            if (isFullscreen) {
+                // 전체화면 진입 시 가로 모드로 전환 시도
+                try {
+                    if (screen.orientation && screen.orientation.lock) {
+                        await screen.orientation.lock('landscape');
+                    }
+                } catch (e) {
+                    // 지원하지 않는 브라우저이거나 권한이 없는 경우 무시
+                    console.log('Screen orientation lock not supported');
+                }
+            } else {
+                // 전체화면 종료 시 세로 모드로 복귀
+                try {
+                    if (screen.orientation && screen.orientation.unlock) {
+                        screen.orientation.unlock();
+                    }
+                } catch (e) {
+                    // 무시
+                }
+            }
+        };
+
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+        
+        return () => {
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+            document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+        };
+    }, []);
+
     if (loading) {
         return (
             <div className="flex justify-center items-center min-h-[60vh]">