1. 전체 코드

• 사이드바 구현 코드

function SideBar({ isOpen, setIsOpen }) {
    const sideBarCloseHandle = () => {
        setIsOpen(false);
    };
    
    return (
        <>
            {isOpen ?
                <div className='back'>
                    <div className={`displayNone ${isOpen ? 'open' : null}`}>
                        <div className='closeSideBar'>
                            <button className='closeButton' onClick={sideBarCloseHandle}>
                                <FontAwesomeIcon className='icon' icon={faXmark} size="lg" />
                            </button>
                        </div>
                        <ul className='sideList'>
                            <li>
                                <Link to='/'>
                                    <FontAwesomeIcon className='icon' icon={faHouse} size="lg" />전체 할 일 보기
                                </Link>
                            </li>
                            <li>
                                <Link to='/today'>
                                    <FontAwesomeIcon className='icon' icon={faFileCircleExclamation} size="lg" />오늘 할 일 보기
                                </Link>
                            </li>
                            <li>
                                <Link to='/tomorrow'>
                                    <FontAwesomeIcon className='icon' icon={faFileCircleQuestion} size="lg" />내일 할 일 보기
                                </Link>
                            </li>
                            <li>
                                <Link to='/yesterday'>
                                    <FontAwesomeIcon className='icon' icon={faFileCircleCheck} size="lg" />어제 한 일 보기
                                </Link>
                            </li>
                        </ul>
                    </div>
                </div> : null}
        </>
    );
}

export default SideBar;

• CSS

.back {
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.displayNone {
    z-index: 5;
    background-color: white;
    height: 100%;
    width: 200px;
    right: -200px;
    position: fixed;
    transition: 0.2s ease;
    box-shadow: 0 0 20px rgba(0,0,0,0.19), 0 10px 10px rgba(0,0,0,0.10);
}

.open {
    right: 0;
    transition: 0.2s ease;
}

.closeButton {
    float: right;
    border: none;
    background-color: transparent;
    margin: 33.5px 10.5px 0 0;
    font-size: 20px;
}

.closeButton:hover {
    text-decoration: none;
}

.sideList {
    margin-top: 97px;
    list-style: none;
}

.sideList>li {
    padding-left: 15px;
    height: 50px;
    line-height: 50px;
    color: #282828;
}

.sideList>li:hover {
    background-color: lightgray;
}

a {
    display: block;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    padding-left: 5px;
}

.icon {
    margin-right: 15px;
}