[241002-2] Next.js 동영상 배경 + 이미지

1. public 폴더에 동영상 파일을 넣는다. (mp4)
2. types폴더에 video.d.ts 파일 생성

clare module '*.mp4' {
    const src: string;
    export default src;
}

    3. components 폴더에 VideoComponent.tsx 파일 생성

'use client';

import { Box } from '@mui/material';
import BkVideo from '../public/LoginPage_video.mp4';

const VideoComponent = () => {
    return (
        <Box
            component={'div'}
            position={'fixed'}
            zIndex={-1}
            width={'100vw'}
            height={'100vh'}
            top={0}
            left={0}
        >
            <video
                autoPlay
                playsInline
                loop
                muted
                width={'100%'}
                height={'100%'}
                preload="none"
                src={BkVideo}
                style={{
                    objectFit: 'cover',
                }}
            />
        </Box>
    );
};

export default VideoComponent;

    4. 로그인 페이지에 적용

'use client';
import React from 'react';
import { Container, Box, Typography, Paper } from '@mui/material';
import VideoComponent from '@/components/VideoComponent';
import LoginForm from '@/components/LoginForm';

export default function LoginPage() {
    return (
        <Container
            component="main"
            maxWidth="xs"
            sx={{
                height: '100vh',
                display: 'flex',
                alignItems: 'center',
            }}
        >
            <Paper elevation={3} sx={{ padding: 4, width: '100%' }}>
                <Box
                    sx={{
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                    }}
                >
                    <Typography component="h1" variant="h5" sx={{ mb: 2 }}>
                        FMS 5.6
                    </Typography>
                    <LoginForm />
                </Box>
            </Paper>
            <VideoComponent />
        </Container>
    );
}

 

---

public폴더에 이미지를 넣고 다음과 같이 작성

body {
    background-image: url('../public/bkground.jpg');
    /* background-size: cover;
    background-position: center; */
}