비디오 디테일 페이지에서 사이드 비디오 생성하기

순서는 사이드 비디오 부분의 레이아웃 템플릿을 만들고

 

한개의 카드 템플릿을 만들어서 반복시키고 

 

디비에서 모든 비디오 데이터를 불러와서 화면에 출력하는 식으로 진행 하겠습니다. 

 

우선 위에와 같이 VideoDetailPage폴더에 

Sections 폴더를 생성하고 

그 안에 SideVideo.js 파일을 생성합니다. 

 

VideoDetailPage/Sections/SideVideo.js 

이런 패스를 가지면 되겠죠?

 

rfce 해서 function 컴포넌트를 만들고

 

그리고 디테일 페이지로 가서  방금만든것을 임폴트 시켜줍니다. 

 

import SideVideo from './Sections/SideVideo';

 

이것을 해주고

 

다시 SideVideo 컴포넌트로 가서 

 

 

import React from 'react'

function SideVideo() {
    return (
        <div style ={{display:'felx', marginBotton: '1rem', padding: '0 2rem'}}>
            <div style ={{width:'40%', marginBottom: '1rem'}}>
                <a href>
                    <img style ={{width: '100%'}} src alt/>
                </a>
            </div>
        </div>
    )
}

export default SideVideo

 

우선 이렇게 하면 사이드바에서 오른쪽에 이미지 넣는것 구현한것이고 

import React from 'react'

function SideVideo() {
    return (
        <div style ={{display:'felx', marginBotton: '1rem', padding: '0 2rem'}}>
            <div style ={{width:'40%', marginBottom: '1rem'}}>
                <a href>
                    <img style ={{width: '100%'}} src alt/>
                </a>
            </div>

            <div style={{width:'50%'}}>
                <a href>
                    <span style = {{fontSize : '1rem',color:'black'}}>videoTitle</span><br/>
                    <span>videoWriterName</span><br/>
                    <span>videoView</span><br/>
                    <span>time</span>
                </a>
            </div>


        </div>
    )
}

export default SideVideo

 

 

그리고 위에 처럼 아래 부분 채워주고 왼쪽에 설명이 들어가는것이다. 

들어가면 아직 그림이 없어서 그렇지 저렇게 표시된것이 보인다. 디테일 페이지에 

아까 만든 컴포넌트를 저렇게 쓰면 된다. 

 

그리고 디비에 비디오 정보를 불러올 것 입니다. 

 

그러기 위해서 useEffect를 사용하면 되구요.

import React,{useEffect,useState} from 'react'

function SideVideo() {
    const [sideVideos, setsideVideos] = useState(initialState)
    useEffect(() => {
        Axios.get('/api/video/getVideos')
        .then(respones=>{
            if(respones.data.success){
               setVideo(respones.data.videos)
            }else{
                alert('비디오 가져오기를 실패 했습니다.')
            }
        })
       }, [])

하고 우리는 여러개가 필요하니까 map메소드를 이용하자. 

그래서 

최종적으로

import React,{useEffect,useState} from 'react'
import Axios from 'axios'
function SideVideo() {
    const [sideVideos, setsideVideos] = useState([])
    useEffect(() => {
        Axios.get('/api/video/getVideos')
        .then(respones=>{
            if(respones.data.success){
               setsideVideos(respones.data.videos)
            }else{
                alert('비디오 가져오기를 실패 했습니다.')
            }
        })
       }, [])

     const renderSideVideo = sideVideos.map((video,index)=>{

        var minutes= Math.floor(video.duration/60);
        var seconds = Math.floor((video.duration-(minutes*60)));

        return (
            <div
                key={index}
                style={{ display: 'flex', marginBotton: '1rem', padding: '0 2rem' }}
            >
        <div style ={{width:'40%', marginRight: '1rem'}}>
            <a href ={`/video/${video.id}`} style={{color:'gray'}}>
            <img
              style={{ width: "100%", height: "100%" }}src={`http://localhost:5000/${video.thumbnail}`}alt="thumbnail" />            
            </a>
        </div>

        <div style={{width:'50%'}}>
            <a href ={`/video/${video.id}`} style={{color : 'gray'}}>
                <span style = {{fontSize : '1rem',color:'black'}}>{video.title}</span><br/>
                <span>{video.writer.name}</span><br/>
                <span>{video.views} views</span><br/>
                <span>{minutes} : {seconds}</span>
            </a>
        </div>
    </div>
     )
     })

    return (
        <React.Fragment>
            <div style={{marginTop:'3rem'}}/>
            {renderSideVideo}
        </React.Fragment>
    )
}

export default SideVideo

 

 

이렇게 나온다면 성공입니다.