04. Ambassador.js

大学時代の対外活動に1ページ書いた.
この部分はYouTubeにも動画がアップされているので、유튜브 영상을 페이지 안에を入れたいと思います.
また、転がるのがおっくうなので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コードを使用してMarketplace上でvscode-styled-componentsを検索してインストールすると、入力コードがより便利になります.

react-player

YouTube動画を添付するために、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と入力します.通常はYouTubeで操作できるオプションです.

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 : ''
    },
]