CalloutBox

Feedback & Status

본문 흐름 안에 놓는 인라인 안내 박스.

Usage

본문 흐름 안에 끼워 넣는 상태 안내(info/success/warning/error). 입력 아래 검증 문구는 HelpText, 잠깐 뜨고 사라지는 알림은 toast

import

import { CalloutBox } from '@mildang/design-system/CalloutBox';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

CalloutBox Props

Prop

Type

Default

status

필수

"error" | "warning" | "success" | "info" | "basic"

지정 안 함

className

string

지정 안 함

message

string

지정 안 함

showIcon

boolean

지정 안 함

title

string

지정 안 함

예제

기본 사용

아이콘·제목·본문을 모두 갖춘 기본형 — 본문 흐름 중간에 상태를 알릴 때의 출발점입니다.

코드

Open in Playground

import { CalloutBox } from '@mildang/design-system/CalloutBox';

export default function CalloutBoxBasicExample() {
  return (
    <CalloutBox
      status="info"
      showIcon
      title="변경 사항이 저장되지 않았습니다"
      message="페이지를 벗어나면 입력한 내용이 사라집니다."
    />
  );
}

상태

info·success·warning·error·basic 다섯 상태를 비교합니다. 안내 성격에 맞는 색을 고릅니다.

코드

Open in Playground

import { CalloutBox } from '@mildang/design-system/CalloutBox';
import { VStack } from '@mildang/styled-system/jsx';

const statuses = [
  { status: 'info', message: '수업은 매주 월요일에 시작합니다.' },
  { status: 'success', message: '변경 사항이 저장되었습니다.' },
  { status: 'warning', message: '마감이 하루 남았습니다.' },
  { status: 'error', message: '제출에 실패했습니다.' },
  { status: 'basic', message: '공지사항이 등록되었습니다.' },
] as const;

export default function CalloutBoxStatusesExample() {
  return (
    <VStack alignItems="stretch" gap="3">
      {statuses.map(({ status, message }) => (
        <CalloutBox key={status} status={status} showIcon message={message} />
      ))}
    </VStack>
  );
}

제목 유무

message 만 있는 한 줄 안내와 title 이 함께 있는 형태를 비교합니다. 문맥이 길면 title 을 더합니다.

코드

Open in Playground

import { CalloutBox } from '@mildang/design-system/CalloutBox';
import { VStack } from '@mildang/styled-system/jsx';

export default function CalloutBoxTitleMessageExample() {
  return (
    <VStack alignItems="stretch" gap="3">
      <CalloutBox status="warning" showIcon message="한 줄 안내만 필요할 때는 message 만 넣습니다." />
      <CalloutBox
        status="warning"
        showIcon
        title="정기 점검 안내"
        message="매주 화요일 새벽 2시~4시에는 서비스 접속이 제한됩니다."
      />
    </VStack>
  );
}

아이콘 생략

showIcon 없이 문구만 둔 형태입니다. 상태 아이콘이 과할 만큼 가벼운 안내에 씁니다.

코드

Open in Playground

import { CalloutBox } from '@mildang/design-system/CalloutBox';

export default function CalloutBoxNoIconExample() {
  return <CalloutBox status="info" message="아이콘 없이 문구만 강조하고 싶을 때는 showIcon 을 생략합니다." />;
}

Demo

코드

Open in Playground

import type { ComponentProps } from 'react';
import { CalloutBox as CalloutBox } from '@mildang/design-system/CalloutBox';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    status: 'info',
    title: '타이틀',
    message: '메시지 내용을 입력해주세요',
    showIcon: true,
  }) } as ComponentProps<typeof CalloutBox>;

const CalloutBoxDemoExampleRender = (args: ComponentProps<typeof CalloutBox>) => <CalloutBox {...args} />;

export default function CalloutBoxDemoExample(props: Partial<ComponentProps<typeof CalloutBox>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof CalloutBox>;
  return CalloutBoxDemoExampleRender(mergedProps);
}

All Statuses

코드

Open in Playground

import { VStack } from '@mildang/styled-system/jsx';
import { CalloutBox as CalloutBox } from '@mildang/design-system/CalloutBox';
import { NoticeStatus } from '@mildang/design-system/NoticeBase';

type CalloutBoxStatus = NoticeStatus;

const calloutBoxStatusValues: CalloutBoxStatus[] = ['error', 'warning', 'success', 'info', 'basic'];

const statusLabels: Record<CalloutBoxStatus, string> = {
  error: '에러 (error)',
  warning: '경고 (warning)',
  success: '성공 (success)',
  info: '정보 (info)',
  basic: '기본 (basic)',
};

const CalloutBoxAllStatusesExample = () => (
    <VStack gap="24" alignItems="stretch" width="400px">
      <VStack gap="12" alignItems="stretch">
        {calloutBoxStatusValues.map((status) => (
          <CalloutBox
            key={`title-${status}`}
            status={status}
            title={statusLabels[status]}
            message="메시지 내용을 입력해주세요"
            showIcon
          />
        ))}
      </VStack>
      <VStack gap="12" alignItems="stretch">
        {calloutBoxStatusValues.map((status) => (
          <CalloutBox
            key={`no-title-${status}`}
            status={status}
            message={`${statusLabels[status]} — 제목 없이 메시지만`}
            showIcon
          />
        ))}
      </VStack>
    </VStack>
  );

export default CalloutBoxAllStatusesExample;