GitLab

<Nav className="justify-content-end"> 를 적용했는데 MainNav의 link들이 오른쪽 끝으로 가질 않아요..ㅜㅜ

import React, { useState, useEffect, useRef } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import logo from '../footprint.svg';
import cart from '../cart.svg';
import option from '../option.svg';

function MainNav() {
    function handleClick() {
        alert('로그아웃이 완료되었습니다.')
    }

    return (
        <Navbar fixed="top" style={{ position: "sticky", background: "#CDC5C2" }}>
            {/* <style type="text/css">
                {`
                .text-light:hover, .text-light:active {
                    color: #f8f9fa;
                }

                .nav-link:hover, .nav-link:active {
                    color: #f8f9fa;
                }
                `}
            </style> */}
            <Navbar.Brand href="/home" className="text-light">
                <img src={logo} width="24" height="24" />
                {' '}KU#
            </Navbar.Brand>
            <Nav className="justify-content-end">
                <Nav.Link className="text-light" href="/login">Login</Nav.Link>
                <Nav.Link className="text-light" href="/signup">Signup</Nav.Link>
                <Nav.Link href="/shoppingcart">
                    <img src={cart} width="30" height="30" />
                </Nav.Link>
                <Nav.Link className="text-light" onClick={() => handleClick()}>Logout</Nav.Link>
                <Nav.Link href="/admin/:id">
                    <img src={option} width="30" height="30" />
                </Nav.Link>
            </Nav>
        </Navbar>
    )
}

export default MainNav