04. Ambassador.js

대학교 다니면서 대외활동 한 것 중에 한 가지 페이지를 작성했다.
해당 부분은 유튜브에 영상도 올라와 있어 유튜브 영상을 페이지 안에 넣고 싶었다.
또한, 스크롤 내리기가 귀찮아서 velog 처럼 오른쪽 글씨를 클릭하면 해당 내용으로 스크롤이 자동으로 이동하게 하고 싶었다.

css 부분 및 유튜브 영상 부분은 제거했다.
css 부분은 사람마다 하는 방법이 다르기 때문이며, 유튜브 영상은 velog에다가 쓰기에는 창피하기 때문이다 ㅎ..

4-1.Ambassador.js

import React from 'react';
import ReactPlayer from 'react-player/youtube';
import styled from 'styled-components';

const AmbassadorVideo = styled.div`

.first{

}
`;
const AmbassadorSubject = styled.p`

`;
const Contents = styled.p`

`

const Ambassador = () => {
    return (
        <AmbassadorVideo>
        <AmbassadorSubject>홍보대사를 시작하게 된 계기</AmbassadorSubject>
        <Contents> asd</Contents>
            <AmbassadorSubject id='2'>방구석 꽃놀이</AmbassadorSubject>
            <ReactPlayer
            className="first"
            url="유튜브 링크" 
            controls 
            >
            </ReactPlayer>
        </AmbassadorVideo>
    );
};

export default Ambassador;

<AmbassadorVideo>, <AmbassadorSubject>, <Contents> 해당 부분은 styled-components 를 사용했다.

styled-components 은 JavaScript에서 css를 사용할 수 있도록 도와주는 스타일링 프레임워크이다.

React Component에 특정 스타일링을 할 수 있기에 재사용성을 높일 수 있고,
JavaScript에 영향 받는 스타일링을 간편하게 구현 할 수 있다는 장점이 있다.

설치 방법은 yarn add styled-components 를 입력하면 된다.

여기서, 추가로 VS code를 사용한다면 마켓 플레이스에서 vscode-styled-components를 검색해서 설치하는 것이 코드를 입력하기에 훨씬 편하다.

react-player

유튜브 영상을 첨부하고 싶어서 react-player라는 React.js 기반 라이브러리를 사용했다.

설치 방법은 다음과 같다.

yarn add react-player 를 입력하면 된다.

Ambassador.js - ReactPlayer

import ReactPlayer from 'react-player/youtube';

<ReactPlayer
className="first"
url="유튜브 링크" 
controls 
volume={null}
playing={true}
>
</ReactPlayer>

홍보대사 관련 영상은 대략 4가지이다. (추가 될 수도 있다.)
지금에서야 생각이 든건데 이 부분은 map함수로 축약 할 계획이다. 03.22 12:07

• controls을 입력해주면 우리가 흔히 유튜브에서 조작할 수 있는 옵션이 나온다.

• volume은 0과 1사이로 볼륨을 설정하지만, {null}을 통해 모든 플레이어에서 기본 볼륨을 사용하도록 한다.

• 제일 상단에 있는 영상은 홍보대사 페이지로 이동할 경우 자동으로 재생이 되도록 playing={true}로 설정해두었다.

  playing은 기본값은 false로 재생이 되지 않는다.

더 많은 속성 목록들을 보려면 아래 링크를 클릭해서 볼 수 있다.
react-player 속성 목록

import React from 'react';
import styled from 'styled-components';
import Ambassador from './Ambassador';
import Side from './Side';

const Main = styled.div`

`

const MainContents = styled.div`
`
const AmbassadorMain = () => {
    return (
        <Main>
            <MainContents>
                <Ambassador />
                <Side />
            </MainContents>
        </Main>
    );
};

export default AmbassadorMain;

import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-scroll';
import { sideListData } from './SideList';

const Movement = styled.div`

div{
    
}
`
const StyleLink = styled(Link)`
text-decoration: none;
color: white;
margin-bottom: 10px;
`
const Side = () => {
    return (
        <Movement>
            <div>
        {sideListData.map(({ no, title}) => (
          <StyleLink to={no} spy={true}>
              <span>{title}</span> 
          </StyleLink>
        ))}
            </div>
        </Movement>
        );
};

export default Side;

export const sideListData =[
    {
        no : '1',
        title : ''
    },
    {
        no : '2',
        title : ''
    },
    {
        no : '3',
        title : ''
    },
    {
        no : '4',
        title : ''
    },
]