오늘은 유튜브 영상 썸네일 컴포넌트를 만들어봤다.
기초적인 레이아웃을 잡는 건 어렵지 않았지만, 컴포넌트를 hover했을 때 배경색이 생기는 애니메이션을 구현하는 데 애를 먹었다.
이 과정에서 chakra ui의 새로운 group이라는 클래스를 알게되었다.
group 클래스와 _groupHover 속성
나는 이번에 썸네일 컴포넌트를 hover하면 컴포넌트 배경에 있는 투명한 박스의 배경색과 패딩을 변경하려고 했다.
배경 박스는 z-index가 전면 요소들보다 낮기 때문에 마우스를 아무리 올려봐도 배경 박스엔 hover가 적용되지 않았다.
대상 요소에 직접 마우스를 올려야 hover가 활성화되는 것 같다.
그래서 gemini에게 물어보니 group이라는 class를 알려주었다.
이 클래스를 부모 요소에 추가하면 부모 요소가 hover됐을 때, _groupHover속성이 활성화되어 직접 hover되지 않은 자식 요소에 hover 효과를 부여할 수 있다고 한다.
적용 코드 예시
작성한 코드의 일부다.
맨 위, 부모 Flex 요소에 className='group'을 설정했다.
자식 Box 요소엔 _groupHover 로 패딩과 bg를 조절하는 코드가 있다.
이렇게 설정하면 결과적으로 Flex의 자식 요소 전체 중 일부를 hover 했을 때 _groupHover가 활성화되어 padding과 bg가 변한다.
이 내용은 chakra ui mcp 서버를 통해 가져온 정보라 공식 문서에서 자세한 내용을 직접 확인하고 싶었다.
하지만 chakra ui 공식문서를 찾아봐도 class에 대한 정보는 찾을 수 없었다.
이에 관해 gemini는 chakra ui가 내부적으로 panda css 엔진을 채택해서 사용하기 때문에 class를 통한 스타일링을 지원한다라고 알려줬다.
일단 그냥 쓰다가 더 공부가 필요하면 그때 찾아보려고 한다.
추가로, _groupHover 외에도 다양한 속성이 있어서 나중에 활용해보면 좋을 것 같다.
