[Next.js] css module로 다중 클래스명 지정하기

클래스명 2개 지정

아래 사진과 같이 클릭한 요소에만 색상을 진하게 설정할 때
기존 클래스명에 하나 더 추가해 다중 클래스 선택자로 클릭한
요소만 색상을 진하게 할 수 있다.

다중 클래스 지정하기

3가지 메뉴 중 하나씩 클릭 시 각각 해당 주소가 이동되도록 설정되어 있어
usePathname() 을 통해 이동된 주소와 동일하면 active 클래스명을 추가한다.

className = {${styles.description} ${styles.yellow}}

const Sidebar = () => {
  const sidebarMenus = [
    {
      id: 0,
      menu: '내 정보 관리',
    },
    {
      id: 1,
      menu: '캠핑장',
      url: 'reservation',
    },
    {
      id: 2,
      menu: '캠핑톡',
      url: 'community',
    },
  ];

  const { id: userId } = useParams();
  const pathName = usePathname();

  return (
    <ul className={styles.sidebar}>
      {sidebarMenus.map((item) => {
        const url = `/profile/${userId}/${item.url ? item.url : ''}`;
        return (
          <Link href={url}>
            <li
              key={item.id}
              className={`${styles['sidebar-item']} ${
                pathName === url ? styles.active : ''
              }`}
            >
              {item.menu}
            </li>
          </Link>
        );
      })}
    </ul>
  );
};

export default Sidebar;

클릭된 요소에만 다중 클래스 선택자를 통해 글자를 굵게 설정한다.

.sidebar-item.active {
  font-weight: bold;
}

참고한 사이트