유튜브 클론코딩(추천 동영상편)

추천 동영상 부분 만들기 ( 2022 / 08 / 31 )

클론코딩 할 부분

오늘은 위 사진에 보이는 부분을 만들 것이다. 어제 만들었던 카테고리 아래에 있는 추천 동영상 부분이다. 영상 한개의 박스가 여러개가 있어서 아래로 스크롤이 가능한 형태이다. 위아래가 긴 웹페이지를 만들어보는 것도 경험이라 생각했기에 만들기 시작했다.

---

기능 확인

눈에 보이는 부분이 대부분이기 때문에 기능이라 할 부분이 거의 없다. 있는 한가지 기능은 각 영상의 썸네일부터 영상 정보 부분까지 한 박스인데, 이 박스에 마우스오버를 하면 위 사진과 같이 시간 아이콘과 플레이리스트 아이콘, 메뉴 아이콘이 생긴다. 이것을 생각하며 코딩을 시작했다.

---

NextJS 코드

const NextVideo = () => {
    const [isMouseOver, setIsMouseOver] = useState(false);
    const watch = 100
    const date = 7
    const name = 'Wiz Khalifa'
    return (
        <div 
            onMouseOver={ () => {setIsMouseOver(true)} } 
            onMouseLeave={ () => {setIsMouseOver(false)} }
            className={styles.Next_video}
        >
            <div className={styles.Thumbnail_box}>
                <img src='https://i.ytimg.com/vi/RgKAFK5djSk/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBhwpRCeR0BhQArxzwQO_lgrLV3jQ' />
                <div className={styles.Thumbnail_icons}>
                    {
                        isMouseOver && <div className={styles.Thumbnail_icon}>
                            <BiTimeFive color='white' />
                        </div>
                    }
                    {
                        isMouseOver && <div className={styles.Thumbnail_icon}>
                            <RiPlayList2Fill color='white' />
                        </div>
                    }
                    { !isMouseOver && <span className={styles.Video_time}>3:48</span> }
                    { isMouseOver && <span className={styles.Video_time_action}>3:48</span> }
                </div>
            </div>
            <div className={styles.Video_info}>
                <p>Wiz Khalifa - See You Again ft. Charlie Puth [Official Video]</p>
                <span>{name}</span>
                <span>조회수 {watch}회 • {date}년전</span>
            </div>
            {
                isMouseOver && <BiDotsVerticalRounded size='20' className={styles.Next_video_menu}/>
            }
        </div>
    )
}

임의로 한 영상을 선택해서 영상과 관련된 정보를 가져왔다. 그리고 마우스오버 함수와 마우스리브 함수를 사용해서 앞에서 말했던 기능을 구현했다. 조건부 렌더링을 사용했는데, isMouseOver라는 state를 만들어줘서 마우스오버가 될 때 참으로 만들어주고 마우스리브가 될 때 거짓으로 만들어주는 코드를 작성했다.

---

결과 화면

이것이 내가 만든 추천 동영상 부분이다. 디자인은 그냥 유튜브를 보고 따라 만들어서 화면 자체를 만드는 데는 오래 걸리지 않았다. 근데 마우스오버와 마우스리브 기능을 만드는 데는 시간이 조금 걸렸다.

---

마무리

이번에 새롭게 마우스오버 함수와 마우스리브 함수를 사용해보았다. 제대로 사용해본 적이 없어서 힘들 수도 있겠다고 생각했지만 실제로 사용해보니 생각보다 쉬웠다. 다음에는 영상 부분과 설명란까지 만들어봐야겠다.