모바일 곡 상세: YouTube 전체화면 시 자동 가로 회전 시도

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]">