[Tailwind CSS] group-hover

문제 상황

• 아이콘 컴포넌트에 호버 스타일을 적용 했음에도 드롭박스에 마우스를 올렸을 때 hover 효과가 아이콘에 적용되지 않았다.

• 드롭다운 박스에 호버 한 것은 부모 요소에 호버한 것이지 아이콘에 호버한 것이 아니기 때문!

• Tailwind CSS 의 group-hover를 사용하여 이를 해결해보자.

Tailwind CSS group-hover

• Tailwind CSS의 group-hover 클래스는 그룹화된 요소에 호버 상태일 때 스타일을 적용할 수 있는 기능을 제공한다.
• 이 기능을 사용하면 특정 요소의 부모 요소에 호버 상태가 적용될 때 자식 요소에 스타일을 적용할 수 있다.

사용 방법

1. 그룹 요소를 생성하고 group 클래스를 추가한다.
2. 그룹 안에 호버 상태에 따라 스타일을 적용할 자식 요소를 포함시킨다.
3. 자식 요소에 group-hover: 접두사를 사용하여 부모 요소인 그룹 요소가 호버 상태일 때 해당 요소에 스타일을 적용한다.

<div class="group">
  <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Hover me</button>
  <p class="text-blue-500 opacity-0 group-hover:opacity-100">This text appears on hover</p>
</div>

코드 수정

• 드롭다운 그룹 요소에 group 클래스 추가

  return (
    <div className="flex flex-col gap-2 group" ref={ref}>
      ...
      {icon()}
			...
    </div>
  );

• 아이콘 컴포넌트에 group-hover 적용

  const icon = () => {
    if (isOpen) {
      return <Icon name="mdi:chevron-up" size={16} color="primary-500" />;
    } else {
      return (
        <Icon
          name="mdi:chevron-down"
          size={16}
          color="primary-400"
          className="group-hover:text-primary-500 transition-colors"
        />
      );
    }
  };

결과

해결 ~