Result

Result 컴포넌트는 특정 작업의 결과를 시각적으로 보여주는 페이지 컴포넌트예요. 주로 사용자가 작업을 성공했을 때나 에러가 발생했을 때 결과를 알리고, 다양한 메시지나 액션을 제공하는 데 사용해요. 이 컴포넌트를 사용하면 텍스트, 버튼, 이미지 같은 요소들을 손쉽게 배치할 수 있어요.

다시 시도해주세요

시스템에 잠깐 문제가 생겨 화면을 불러오지 못했어요.

다시 시도하기

사용법

요소 추가하기

figure 속성을 사용하면 제목 상단에 다양한 시각적 요소를 추가할 수 있어요. Asset 컴포넌트를 활용해 아이콘, 로띠, 이미지 등의 리소스를 손쉽게 표현할 수 있어요. 이렇게 시각적 요소를 활용하면 사용자에게 메시지를 직관적으로 전달할 수 있어요.

<Result
  figure={
    <Asset.Image src="https://static.toss.im/2d-emojis/png/4x/u1F4FA.png" frameShape={Asset.frameShape.CleanH60} />
  }
  title="라이브 쇼핑 준비 중"
  description="요금이 나오면 알림을 보내드릴게요."
/>

버튼 추가하기

button 속성을 사용하면 설명 아래에 액션 버튼을 추가할 수 있어요. Result.Button 컴포넌트를 활용해서 다시 시도하기, 홈으로 돌아가기 등의 동작을 쉽게 구현할 수 있어요. 사용자는 이 버튼으로 필요한 액션을 바로 수행할 수 있어요.

<Result
  figure={<Asset.Icon name="icn-info-line" frameShape={Asset.frameShape.CleanH24} />}
  title="다시 접속해주세요"
  description={`페이지를 불러올 수 없습니다\n다시 시도해주세요`}
  button={<Result.Button>재시도</Result.Button>}
/>

접근성

Result 컴포넌트는 기본적으로 접근성을 지원하기 위해 여러 속성을 포함하고 있어요. 이러한 속성을 사용하면 스크린 리더 사용자들이 에러 메시지 확인 및 추가 액션을 쉽게 수행할 수 있어요.

접근성 속성 적용 예시

접근성 속성이 적용되는 방법은 아래 예시를 통해 확인해 보세요.

<Result
  figure={<Asset.Image src="example.png" />} // alt=""가 자동 적용돼요
  title="다시 시도해 주세요" // <h5> 태그로 자동 변환돼요
  description="시스템에 잠깐 문제가 생겨 화면을 불러오지 못했어요."
  button={
    <Result.Button> // <button> 태그로 자동 변환돼요
      다시 시도하기
    </Result.Button>
  }
/>

이러한 방법으로 Result 컴포넌트는 추가적인 접근성 설정 없이도 기본적인 접근성을 지원하도록 설계되었어요.

인터페이스

ResultProps