[Team Grid] hover하면 소셜 링크가 떠오르는 팀 소개 카드

제작 과정

한 줄 요약 멤버 카드를 격자로 두고, 마우스를 올리면 카드가 떠오르며 숨겨둔 소셜 링크가 슬라이드업합니다.

이럴 때 필요해요

회사팀 소개 페이지에서 멤버를 깔끔히 보여주되, 연락 링크는 평소엔 감춰 정돈된 인상을 주고 싶을 때 씁니다. 정보는 다 담되 화면은 어수선하지 않게 하는 방법입니다.

어떻게 동작하나

카드는 평소 이름과 직함만 보여줍니다.
hover나 포커스가 들어오면 group-hover/group-focus-within으로 소셜 아이콘 행이 translateY+opacity로 떠오릅니다.
동시에 카드도 살짝 위로 떠오르며(lift) 그림자가 짙어져 "선택됨"을 표현합니다.

핵심은 이거예요

부모에 group, 자식에 group-hover:/group-focus-within:을 걸면 JavaScript 없이 부모의 hover 상태를 자식들에게 전파할 수 있다는 것입니다.

놓치기 쉬운 것

hover만 쓰면 터치키보드 사용자에게는 안 열립니다 focus-within을 함께 걸어야 합니다.
아이콘 링크에는 aria-label이 필수입니다(스크린리더가 "링크"로만 읽으면 무용).
모바일 1열부터 시작하는 mobile-first 그리드로 짜야 작은 화면에서 깨지지 않습니다.

이런 곳에 써요

about 페이지의 팀 소개 섹션
컨퍼런스이벤트의 연사 소개

import type { Metadata } from 'next'; import TeamGridDemo from './-components/TeamGridDemo'; export const metadata: Metadata = { title: '팀 소개 그리드 섹션', description: 'hover 시 소셜 링크가 슬라이드업되는 팀 멤버 카드 그리드 섹션', robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="bg-white"> <TeamGridDemo /> </main> ); }