52 lines
1.6 KiB
TypeScript
Executable File
52 lines
1.6 KiB
TypeScript
Executable File
|
|
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import Footer from '../../components/Footer';
|
|
|
|
interface DisplaySectionProps {
|
|
onStartClick?: () => void;
|
|
}
|
|
|
|
const DisplaySection: React.FC<DisplaySectionProps> = ({ onStartClick }) => {
|
|
const { t } = useTranslation();
|
|
// YouTube Shorts 영상 ID들
|
|
const videos = [
|
|
{ id: 1, videoId: 'OZJ8X4P82OA' },
|
|
{ id: 2, videoId: 'hNzMO21O40c' },
|
|
{ id: 3, videoId: 'dM8_d6Aud68' },
|
|
];
|
|
|
|
return (
|
|
<div className="display-section">
|
|
<div className="content-safe-area">
|
|
{/* Main visual frames container */}
|
|
<div className="display-frames">
|
|
{videos.map((video, index) => (
|
|
<div
|
|
key={video.id}
|
|
className={`display-frame ${index === 2 ? 'display-frame-hidden-mobile' : ''}`}
|
|
>
|
|
<iframe
|
|
src={`https://www.youtube.com/embed/${video.videoId}?autoplay=1&mute=1&loop=1&playlist=${video.videoId}&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1`}
|
|
title={`YouTube Shorts ${video.id}`}
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
className="display-video"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Action Button */}
|
|
<button onClick={onStartClick} className="display-button">
|
|
{t('landing.display.startButton')}
|
|
</button>
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DisplaySection;
|