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 (