Spoiler

Spoiler

긴 콘텐츠 구간을 스포일러 아래 숨기는 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

Spoiler을 사용해 긴 콘텐츠 구간을 숨겨요. maxHeight prop으로 콘텐츠가 스포일러 아래 숨겨지고 보이기/숨기기 컨트롤이 나타나는 지점을 제어해요. 콘텐츠 높이가 maxHeight보다 작으면 스포일러는 children만 렌더링해요.

hideLabel과 showLabel prop은 필수예요. 각 상태에서 스포일러 토글 버튼 라벨로 사용돼요.

import { Spoiler } from '@mantine/core';

function Demo() {
  return (
    <Spoiler maxHeight={120} showLabel="Show more" hideLabel="Hide">
      {/* Content here */}
    </Spoiler>
  );
}

펼침 상태 제어 (Control expanded state)

펼침 상태를 제어하려면 expanded와 onExpandedChange prop을 사용해요. 콘텐츠 높이가 주어진 maxHeight보다 작으면 expanded prop은 스포일러 시각 효과에 영향을 주지 않아요.

import { useState } from 'react';
import { Spoiler } from '@mantine/core';

function Demo() {
  const [expanded, setExpanded] = useState(false);

  return (
    <Spoiler
      maxHeight={120}
      showLabel="Show more"
      hideLabel="Hide"
      expanded={expanded}
      onExpandedChange={setExpanded}
    >
      {/* Spoiler content */}
    </Spoiler>
  );
}

펼침 상태 변경 구독 (Subscribe to expanded state changes)

onExpandedChange를 사용해 펼침 상태 변경을 구독할 수 있어요.

import { Spoiler } from '@mantine/core';

function Demo() {
  return (
    <Spoiler onExpandedChange={(expanded) => console.log(expanded)}>
      {/* Spoiler content */}
    </Spoiler>
  );
}

전환 지속 시간 (Transition duration)

transitionDuration prop(밀리초 단위의 transition-duration CSS 속성)으로 전환 지속 시간을 제어해요. 애니메이션을 비활성화하려면 transitionDuration={0}을 설정해요.

import { Spoiler } from '@mantine/core';

function Demo() {
  return (
    <Spoiler maxHeight={120} showLabel="Show more" hideLabel="Hide" transitionDuration={0}>
      {/* Content here */}
    </Spoiler>
  );
}

제어 ref 가져오기 (Get control ref)

import { useRef } from 'react';
import { Spoiler } from '@mantine/core';

function Demo() {
  const spoilerControlRef = useRef<HTMLButtonElement>(null);
  return (
    <Spoiler showLabel="Show more" hideLabel="Hide" controlRef={spoilerControlRef}>
      {/* Content */}
    </Spoiler>
  );
}

접근성 (Accessibility)

Spoiler 컴포넌트는 스크린 리더 지원을 위한 적절한 ARIA 속성을 구현해요.

• 토글 버튼에는 펼침/접힘 상태를 나타내는 aria-expanded가 있어요
• 콘텐츠 영역에는 role="region"이 있고 aria-controls로 버튼과 연결돼요
• 키보드 지원: 버튼이 포커스된 상태에서 Space 또는 Enter 키로 스포일러를 토글할 수 있어요

라벨 텍스트 모범 사례 (Best practices for label text)

동작을 명확히 나타내는 설명적인 라벨을 showLabel과 hideLabel prop에 제공해요.

// Good - clear, descriptive labels
<Spoiler showLabel="Show more details" hideLabel="Hide details" />

// Avoid vague labels
<Spoiler showLabel="More" hideLabel="Less" />

커스텀 접근성 라벨 (Custom accessibility labels)

버튼 라벨이 스크린 리더 사용자에게 동작을 명확히 설명하지 못한다면 showAriaLabel과 hideAriaLabel prop으로 커스텀 ARIA 라벨을 제공해요.

import { Spoiler } from '@mantine/core';

function Demo() {
  return (
    <Spoiler
      maxHeight={120}
      showLabel="Show"
      hideLabel="Hide"
      showAriaLabel="Show comments"
      hideAriaLabel="Hide comments"
    >
      {/* Comments content */}
    </Spoiler>
  );
}

더 알아보기 (Learn more)

• RollingNumber
• ThemeIcon