Card 카드

제목, 내용, 하단 작업을 담는 정보 컨테이너입니다. 카드 전체를 클릭할 수 있고(button 키보드 의미 내장), 로딩 자리표시자와 sx 빠른 레이아웃을 지원합니다.

기본 사용법

기본 사용법

빗방울이 파초를 두드리고

창을 사이로 밤비가 오는 줄 알았으니, 파초잎이 먼저 소리를 내누나.

<script setup lang="ts">
</script>

<template>
  <LhCard title="빗방울이 파초를 두드리고">
    창을 사이로 밤비가 오는 줄 알았으니, 파초잎이 먼저 소리를 내누나.
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard title="빗방울이 파초를 두드리고">
    창을 사이로 밤비가 오는 줄 알았으니, 파초잎이 먼저 소리를 내누나.
  </LhCard>
</template>

shadow로 그림자 표시 시점을 제어합니다: always(기본값) / hover(마우스 오버 시) / never.

그림자 시점

hover 그림자

마우스 오버 시 그림자가 나타납니다.

그림자 없음

항상 그림자가 없습니다.

<script setup lang="ts">
</script>

<template>
  <LhCard shadow="hover" title="hover 그림자">마우스 오버 시 그림자가 나타납니다.</LhCard>
  <LhCard shadow="never" title="그림자 없음">항상 그림자가 없습니다.</LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard shadow="hover" title="hover 그림자">마우스 오버 시 그림자가 나타납니다.</LhCard>
  <LhCard shadow="never" title="그림자 없음">항상 그림자가 없습니다.</LhCard>
</template>

헤더 슬롯과 extra

커스텀 헤더

커스텀 헤더작업

header 슬롯으로 제목 영역을 완전히 대체할 수 있습니다.

<script setup lang="ts">
</script>

<template>
  <LhCard>
    <template #header><span>커스텀 헤더</span></template>
    <template #extra>작업</template>
    …
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard>
    <template #header><span>커스텀 헤더</span></template>
    <template #extra>작업</template>
    …
  </LhCard>
</template>

표지와 하단

표지와 하단

표지 영역

본문 내용……

<script setup lang="ts">
</script>

<template>
  <!-- 표지와 하단 -->
  <LhCard>
    <template #cover>…</template>
    …
    <template #footer>
      <LhButton size="small">즐겨찾기</LhButton>
    </template>
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <!-- 표지와 하단 -->
  <LhCard>
    <template #cover>…</template>
    …
    <template #footer>
      <LhButton size="small">즐겨찾기</LhButton>
    </template>
  </LhCard>
</template>

카드 전체 클릭

clickable이면 카드 전체가 button 의미를 담당합니다. Tab으로 포커스할 수 있고(:focus-visible 포커스 링), Enter / Space로 click을 발생시킵니다.

클릭 가능한 카드

나를 클릭하세요

카드 전체를 클릭할 수 있습니다. 키보드 Tab으로 포커스한 뒤 Enter를 눌러 보세요.

<script setup lang="ts">
function onCardClick() {
  console.log('card clicked')
}
</script>

<template>
  <!-- 클릭 가능한 카드 -->
  <LhCard clickable title="나를 클릭하세요" @click="onCardClick">…</LhCard>
</template>

<script>
export default {
  methods: {
    onCardClick() {
      console.log('card clicked')
    },
  },
}
</script>

<template>
  <!-- 클릭 가능한 카드 -->
  <LhCard clickable title="나를 클릭하세요" @click="onCardClick">…</LhCard>
</template>

로딩 상태

로딩 상태

로딩 중

<script setup lang="ts">
</script>

<template>
  <LhCard title="로딩 중" loading />
</template>

<script>
export default {}
</script>

<template>
  <LhCard title="로딩 중" loading />
</template>

Card API

Props

속성	설명	타입	기본값
title	카드 제목(header 슬롯으로도 사용 가능)	string	—
shadow	그림자 표시 시점	"always" | "hover" | "never"	'always'
clickable	카드 전체 클릭 가능(button 키보드 의미 담당)	boolean	false
loading	로딩 상태: 내용 영역을 스켈레톤 자리표시자로 대체	boolean	false
themeVars	컴포넌트 수준 테마 변수(키에 --lh- 접두사 자동 추가)	{ [x: string]: string; }	—
bgPattern	배경 문양 URL(예: var(--lh-pattern-willow)), 전역 화이트리스트 제한을 받지 않음	string	—
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Events

이벤트	설명	매개변수
click	클릭 가능한 카드가 클릭될 때(마우스 또는 키보드 Enter/Space로 발생)	(e: Event) => void

테마 변수

다음 CSS 변수는 .lh-card에 기본값이 정의되어 있으며, themeVars로 전역 또는 컴포넌트 수준에서 덮어쓸 수 있습니다:

변수	설명	기본값
--lh-card-border-radius	모서리 둥글기	border-radius-base + 2px
--lh-card-bg	배경색	--lh-bg-color
--lh-card-border-color	테두리색	--lh-border-color-light
--lh-card-header-padding / --lh-card-body-padding / --lh-card-footer-padding	세 영역의 안쪽 여백	14px 20px / 18px 20px / 12px 20px
--lh-card-shadow / --lh-card-shadow-hover	기본/마우스 오버 그림자	따뜻한 먹색의 부드러운 이중 그림자
--lh-card-loading-bg / --lh-card-loading-highlight	로딩 자리표시자 배경색 / 흐름 하이라이트	--lh-border-color-light / 종이 색으로 밝아지는 혼합색

Slots

슬롯	설명
header	커스텀 제목 영역
extra	제목 영역 오른쪽 부가 내용
cover	표지
default	본문 내용
footer	하단

접근성

• 클릭 가능한 카드: role="button" + tabindex="0" + Enter/Space 활성화(APG button pattern)
• 로딩 상태: 컨테이너 aria-busy="true", 자리표시자 그래픽은 스크린 리더에서 숨김
• 키보드 포커스 링은 :focus-visible을 사용하고 마우스 클릭 시 표시하지 않습니다

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/card/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhCardProps

export interface LhCardProps {
  /** 카드 제목(header 슬롯으로도 사용 가능) */
  title?: string
  /** 그림자 표시 시점 */
  shadow?: LhCardShadow
  /** 카드 전체 클릭 가능(button 키보드 의미 담당) */
  clickable?: boolean
  /** 로딩 상태: 내용 영역을 스켈레톤 자리표시자로 대체 */
  loading?: boolean
  /** 컴포넌트 수준 테마 변수(키에 --lh- 접두사 자동 추가) */
  themeVars?: Record<string, string>
  /** 배경 문양 URL(예: var(--lh-pattern-willow)), 전역 화이트리스트 제한을 받지 않음 */
  bgPattern?: string
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhCardShadow _{(@lh-ui/share/core/card에서 가져옴)}

/** 카드 그림자 표시 시점 */
export type LhCardShadow = 'always' | 'hover' | 'never'