[Youtube-clone 팀 프로젝트] React 활용한 유튜브 "메인 화면-드롭다운메뉴" 제작 및 회고 - 2

깃허브 주소

https://github.com/PrograMemo-Groom/youtube-clone

GitHub - PrograMemo-Groom/youtube-clone: [Team 1] prograMemo youtube-clone site

 

배포사이트 주소

https://programemo-youtube.netlify.app/

PrograMemo Youtube

 

---

이번 포스터에는 메인화면에 드롭다운메뉴에 대해 간단히 알아보겠습니다 ~

드롭다운메뉴는 제목옆에 동그라미 세개가 세로로 되어 있는 버튼을 누르면 영상 밑에 나타납니다.

---

드랍다운메뉴 사용하기

React에서는 하나의 컴포넌트를 별도 파일로 분리하고 이를 다른 컴포넌트에서 불러와 사용하는 방식으로 구조화된 애플리케이션을 설계합니다. 

그래서, 메인화면에서 DropdownMenu를 사용하기 위해 컴포넌트를 임포트 합니다.

import DropdownMenu from "../../dropdownMenu/DropdownMenu";

 

이후, 컴포넌트 렌더링을 합니다.

{openDropdown === video.videoId && (
    <DropdownMenu />
)}

 

DropdownMenu는 다른 파일에 작성된 React 컴포넌트이며, import를 통해 가져왔습니다.
조건부 렌더링을 사용해 특정 videoId에 대해 "더보기" 버튼을 클릭했을 때만 <DropdownMenu /> 컴포넌트를 렌더링합니다.

 

DropdownMenu.js

import React from 'react';
import styles from './DropdownMenu.module.css';

const DropdownMenu = () => {
    return (
        <div className={styles.dropdownMenu}>
            <ul>
                <li>
                    <img
                        src={`${process.env.PUBLIC_URL}/assets/videoMore/playlist.svg`}
                        alt="현재 재생목록에 추가"
                        className={styles.menuIcon}
                    />
                    현재 재생목록에 추가
                </li>
                <li>
                    <img
                        src={`${process.env.PUBLIC_URL}/assets/videoMore/clock.svg`}
                        alt="나중에 볼 동영상에 저장"
                        className={styles.menuIcon}
                    />
                    나중에 볼 동영상에 저장
                </li>
                <li>
                    <img
                        src={`${process.env.PUBLIC_URL}/assets/videoMore/bookmark.svg`}
                        alt="재생목록에 저장"
                        className={styles.menuIcon}
                    />
                    재생목록에 저장
                </li>
                <li>
                    <img
                        src={`${process.env.PUBLIC_URL}/assets/videoMore/download.svg`}
                        alt="오프라인 저장"
                        className={styles.menuIcon}
                    />
                    오프라인 저장
                </li>
                <li>
                    <img
                        src={`${process.env.PUBLIC_URL}/assets/videoMore/share.svg`}
                        alt="공유"
                        className={styles.menuIcon}
                    />
                    공유
                </li>
                <hr className={styles.menuDivider} />
                <li>
                    <img
                        src={`${process.env.PUBLIC_URL}/assets/videoMore/wrong.svg`}
                        alt="관심 없음"
                        className={styles.menuIcon}
                    />
                    관심 없음
                </li>
                <li>
                    <img
                        src={`${process.env.PUBLIC_URL}/assets/videoMore/no.svg`}
                        alt="채널 추천 안함"
                        className={styles.menuIcon}
                    />
                    채널 추천 안함
                </li>
                <li>
                    <img
                        src={`${process.env.PUBLIC_URL}/assets/videoMore/flag.svg`}
                        alt="신고"
                        className={styles.menuIcon}
                    />
                    신고
                </li>
            </ul>
        </div>
    );
};

export default DropdownMenu;

 

DropdownMenu.module.css

.dropdownMenu {
    position: absolute;
    top: 40px;
    right: 5px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 220px;
    z-index: 100;
    animation: fadeIn 0.3s ease-in-out;
}

.dropdownMenu ul {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.dropdownMenu li {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    color: #333;
}

.dropdownMenu li:hover {
    background-color: #f5f5f5;
}

.menuIcon {
    width: 20px;
    height: 20px;
    margin-right: 14px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menuDivider {
    border: 0;
    border-top: 1px solid #e1e1e1;
    margin: 5px 0;
}

 

---

드롭다운 주요 기능

위치와 스타일링

• position: absolute를 사용하여 부모 컴포넌트 기준으로 드롭다운 메뉴가 적절한 위치에 렌더링됩니다.
• 둥근 테두리와 그림자 효과를 사용하여 깔끔한 UI 제공.
• 메뉴가 화면에 부드럽게 나타나는 fadeIn 애니메이션이 적용되었습니다.

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

---

이처럼 이번 포스터에는 DropdownMenu 컴포넌트에 대해 알아봤습니다.
DropdownMenu 컴포넌트는 직관적이고 사용자 친화적인 디자인을 통해 동영상 관련 다양한 옵션을 제공하며, 애니메이션과 인터랙션을 통해 높은 수준의 사용자 경험을 제공합니다. 
재사용성과 확장성이 뛰어나 다양한 프로젝트에서 활용하면 좋을 것 같습니다. 😁