6. 비디오 디테일 페이지 만들기 - 유튜브 클론 코딩

1.Components - views - VideoDetailPage 폴더생성 - VideoDetailPage.js 파일생성

2. App.js에 VideoDetailPage에 접속할 수있는 라우터생성하기

 <Route exact path="/video/:videoId"component={Auth(VideoDetailPage, null)} />

3.VideoDetailPage 코딩(Axios로 서버에 데이터요청까지 포함)

import React, { useState, useEffect } from 'react';
import { Row, Col, Avatar, List } from 'antd';
import Axios from 'axios';

function VideoDetailPage(props) {
  const videoId = props.match.params.videoId;
  //랜딩페이지에서 주소창뒤에 videoId를 보내주고있기때문에가능
  const variable = { videoId: videoId };
  const [VideoDetail, setVideoDetail] = useState([]);

  useEffect(() => {
    Axios.post('/api/video/getVideoDetail', variable).then((response) => {
      if (response.data.success) {
        console.log(response.data);
        setVideoDetail(response.data.videoDetail);
      } else {
        alert('비디오 정보를 가져오길 실패했습니다.');
      }
    });
  }, []);

  if (VideoDetail.writer) {
    //witer를 서버에서 가져오기전에 페이지를 렌더링 할려고해서
    //VideoDetail.writer.image 부분에서 type error가 발생한다.
    return (
      <Row gutter={(16, 16)}>
        <Col lg={18} xs={24}>
          <div style={{ width: '100%', padding: '3rem 4rem' }}>
            <video
              style={{ width: '100%' }}
              src={`http://localhost:5000/${VideoDetail.filePath}`}
              controls
            />
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar src={VideoDetail.writer.image} />}
                title={VideoDetail.writer.name}
                description={VideoDetail.description}
              />
            </List.Item>
            {/* comment*/}
          </div>
        </Col>

        <Col lg={6} xs={24}>
          Side Videos
        </Col>
      </Row>
    );
  } else {
    return <div>...loding</div>;
  }
}

export default VideoDetailPage;

*props로 VideoId를 받을 수있는 이유는 랜딩페이지에서 VideoDetailPage로 넘어올시 해당 VideoId를 주소에 인자로 전달하고 있기때문이다.

 <a href={`/video/${video._id}`}>
            <img style={{ width: '100%' }}
              ..이하생략

* Row,Col ,등등 CSS는 https://ant.design/

Ant Design - The world's second most popular React UI framework

사이트 이용

4.서버에서 비디오 데이터 보내기(몽고DB)

router.post("/getVideoDetail", (req, res) => {
  Video.findOne({ _id: req.body.videoId })
    .populate("writer")
    .exec((err, videoDetail) => {
      if (err) return res.status(400).send(err);
      return res.status(200).json({ success: true, videoDetail });
    });
});

5. 페이지 실행

 

*해당강의