Card | Notion

카드.gif

본 컴포넌트는 다형성을 지원하는 **as prop**을 통해 다양한 시맨틱 태그로 변환이 가능하며, 클라이언트 사이드의 로딩 상태와 호버 인터랙션을 통합 관리하는 공통 UI 컴포넌트이다.

✅ 컴포넌트 구조

파일명	유형	주요 역할
Card.tsx	Client	다형성(as) 지원 및 로딩 상태, 호버 그림자 효과(shadow-card)를 관리하는 핵심 컴포넌트

다형성 지원: div 뿐만 아니라 article, section, li 등 상황에 맞는 시맨틱 태그로 렌더링하여 SEO와 접근성을 높입니다.
인터랙션 최적화: Tailwind의 shadow-card와 hover:shadow-card-hover를 통해 일관된 호버 피드백을 제공하며, transition-all을 통해 부드러운 상태 변화를 지원합니다.
상태 제어: isLoading 활성화 시 클릭 이벤트가 차단(pointer-events-none)되며 내부적으로 로딩 전용 UI가 노출됩니다.

✅ CardProps (공통 속성)

표준 HTML 속성(React.HTMLAttributes<HTMLElement>)을 모두 상속받으며, 아래의 커스텀 속성을 지원한다.

속성명	타입	기본값	설명
`as`	`ElementType`	`"div"`	카드를 렌더링할 HTML 태그 또는 컴포넌트를 지정합니다.
`isLoading`	`boolean`	`false`	로딩 상태 여부입니다. 활성화 시 불투명도 조절 및 로딩 UI가 노출됩니다.
`className`	`string`	`-`	추가적인 스타일 커스텀이나 레이아웃 보정을 위한 Tailwind 클래스입니다.
`children`	`ReactNode`	`-`	카드 내부에 렌더링될 콘텐츠입니다.

✅ 사용 예시

1. 일반적인 사용 (Server/Client 공통)

가장 기본적인 카드 사용 방법이다. 단순한 정보 나열이나 섹션 구분 시 권장한다.

import Card from "@/shared/ui/card";

export default function Page() {
  return (
    <Card padding="large" shadow="md">
      <h2 className="text-xl font-bold">정보</h2>
      <p>내용</p>
    </Card>
  );
}

2. 다형성 활용 (li 태그 렌더링)

목록 형태의 UI를 구성할 때 as 속성을 사용하여 시맨틱한 마크업을 유지할 수 있다.