Component

StatusFeedback

현재 상태와 해결 방법을 안내합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

메시지의 의미와 시각 상태

본문 크기와 여백

상황을 요약하는 제목

다음 행동을 설명하는 본문

함께 제공할 action 표시

Code

import { StatusFeedback } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<StatusFeedback action={{ label: '다시 시도' }} title={"변경사항이 저장되었습니다"} size={"md"} color={"success"}>
      {"모든 팀원에게 최신 설정이 적용됩니다."}
    </StatusFeedback>))
}

Props

import {
  StatusFeedback,
  StatusFeedbackTitle,
  StatusFeedbackDescription,
} from '@amineslab/ui'

`StatusFeedback`

HTML <div> 요소의 표준 속성을 그대로 받습니다.

Name	Type	Default	Description
`color`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	작업 결과의 의미, live region의 긴급도와 단색 배경을 정합니다.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Callout과 같은 크기 단계와 내부 여백을 사용합니다.
`title`	`ReactNode`	-	상황을 요약합니다. compound 조합에는 StatusFeedbackTitle을 사용합니다.
`icon`	`ReactNode`	-	제목 옆 아이콘 슬롯입니다. compound 사용 시 SVG 아이콘을 직접 자식으로 배치할 수도 있습니다.
`action`	`StatusFeedbackAction \| ReactNode`	-	설정 객체는 기본 primary 버튼과 모바일 full-width 배치를 제공합니다. ReactNode로 완전히 직접 구성할 수도 있습니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

아이콘·제목·본문 조합

아이콘은 제목 옆에, 설명은 제목 아래에 놓습니다. 제목과 설명은 서로의 슬롯에 중첩되지 않습니다.

확인할 사항

계속하기 전에 입력한 내용을 확인하세요.

import { StatusFeedback, StatusFeedbackTitle, StatusFeedbackDescription } from '@amineslab/ui'

import { Info } from '@amineslab/ui/icons'

export default function ExamplePreview() {
  return ((<StatusFeedback color="info">
          <Info aria-hidden="true"/>
          <StatusFeedbackTitle>확인할 사항</StatusFeedbackTitle>
          <StatusFeedbackDescription>
            계속하기 전에 입력한 내용을 확인하세요.
          </StatusFeedbackDescription>
        </StatusFeedback>))
}

크기와 여백

작업 결과와 다음 행동을 안내합니다.

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { StatusFeedback } from '@amineslab/ui'

function ExampleStack({ className, compact = false, fullWidth = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    compact?: boolean;
    fullWidth?: boolean;
}) {
    return (<div {...props} className={cn('grid', compact ? 'w-auto gap-2' : fullWidth ? 'w-full gap-4' : 'w-full max-w-[360px] gap-3', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleStack fullWidth>
          {(['sm', 'md', 'lg'] as const).map((size) => (<StatusFeedback key={size} size={size} title={size} color="info">
              작업 결과와 다음 행동을 안내합니다.
            </StatusFeedback>))}
        </ExampleStack>))
}

Colors

info

상황과 다음 행동을 씁니다.

success

상황과 다음 행동을 씁니다.

warning

상황과 다음 행동을 씁니다.

danger

상황과 다음 행동을 씁니다.

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { StatusFeedback } from '@amineslab/ui'

const statusFeedbackColors = ['info', 'success', 'warning', 'danger'] as const;

function ExampleStack({ className, compact = false, fullWidth = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    compact?: boolean;
    fullWidth?: boolean;
}) {
    return (<div {...props} className={cn('grid', compact ? 'w-auto gap-2' : fullWidth ? 'w-full gap-4' : 'w-full max-w-[360px] gap-3', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleStack>
          {statusFeedbackColors.map((color) => (<StatusFeedback key={color} title={color} color={color}>
              상황과 다음 행동을 씁니다.
            </StatusFeedback>))}
        </ExampleStack>))
}

Action 확장

설정 객체의 buttonProps로 버튼을 조정하거나 ReactNode를 전달해 여러 action을 직접 구성합니다.

처리가 완료되었습니다

결과를 검토한 뒤 다음 작업을 진행하세요.

추가 확인이 필요합니다

원하는 흐름에 맞게 여러 action을 직접 구성할 수 있습니다.

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { StatusFeedback, Button } from '@amineslab/ui'

function ExampleStack({ className, compact = false, fullWidth = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    compact?: boolean;
    fullWidth?: boolean;
}) {
    return (<div {...props} className={cn('grid', compact ? 'w-auto gap-2' : fullWidth ? 'w-full gap-4' : 'w-full max-w-[360px] gap-3', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleStack fullWidth>
          <StatusFeedback action={{
        label: '세부 정보',
        buttonProps: { color: 'brand', variant: 'secondary' },
    }} title="처리가 완료되었습니다" color="success">
            결과를 검토한 뒤 다음 작업을 진행하세요.
          </StatusFeedback>
          <StatusFeedback action={<div className="flex gap-2 max-md:w-full max-md:[&>*]:flex-1">
                <Button variant="ghost">닫기</Button>
                <Button>다시 실행</Button>
              </div>} title="추가 확인이 필요합니다" color="warning">
            원하는 흐름에 맞게 여러 action을 직접 구성할 수 있습니다.
          </StatusFeedback>
        </ExampleStack>))
}

사용 기준

권장하는 사용

제목에 상황을 요약하고 본문에 다음 행동을 적습니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

이 컴포넌트에는 별도의 키보드 조작이 필요하지 않습니다.