EmptyState

Foundation

빈 상태를 설명하는 안내 영역.

Usage

데이터/결과가 없을 때 안내 그래픽·설명·액션 제시

import

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

@mildang/design-system/EmptyState 는 아직 패키지로 배포되지 않는다 — 이 저장소 안에서만 import 할 수 있다.

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

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

API Reference

EmptyState Props

Prop

Type

Default

description

필수

ReactNode

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

containerClassName

string

지정 안 함

emptyImageType

box

errorText

string

지정 안 함

graphicSize

number

140

graphicType

"box" | "paper" | "symbols"

지정 안 함

hideBorder

boolean

false

showEmptyImage

boolean

false

variant

"default" | "educoreNoResult"

default

예제

기본 사용

그래픽과 설명 한 줄만 있는 기본형 — 목록·테이블에 표시할 데이터가 없을 때 씁니다.

코드

Open in Playground

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

export default function EmptyStateBasicExample() {
  return <EmptyState description="아직 등록된 학생이 없습니다" showEmptyImage />;
}

그래픽 종류

상황에 맞는 그래픽 네 종을 비교합니다. 검색 결과 없음·권한 없음처럼 맥락에 맞춰 고릅니다.

코드

Open in Playground

import { EmptyState, type EmptyImageType } from '@mildang/design-system/EmptyState';
import { Grid } from '@mildang/styled-system/jsx';

const types: { type: EmptyImageType; description: string }[] = [
  { type: 'box', description: '검색 결과가 없습니다' },
  { type: 'paper', description: '작성된 글이 없습니다' },
  { type: 'lock', description: '접근 권한이 없습니다' },
  { type: 'fallingAirplane', description: '연결이 끊어졌습니다' },
];

export default function EmptyStateGraphicTypesExample() {
  return (
    <Grid gridTemplateColumns="repeat(2, minmax(0, 1fr))" gap="4">
      {types.map(({ type, description }) => (
        <EmptyState key={type} emptyImageType={type} description={description} showEmptyImage />
      ))}
    </Grid>
  );
}

액션 포함

설명 아래 버튼을 children 으로 넣습니다. 빈 상태를 벗어날 다음 행동이 있을 때 씁니다.

코드

Open in Playground

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

export default function EmptyStateWithActionExample() {
  return (
    <EmptyState description="아직 등록된 학생이 없습니다" showEmptyImage>
      <Button variant="secondary" size="sm">
        학생 등록하기
      </Button>
    </EmptyState>
  );
}

오류 상태

errorText 로 실패 사유를 상단에 덧붙입니다. 데이터가 없는 게 아니라 로딩이 실패했을 때 씁니다.

코드

Open in Playground

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

export default function EmptyStateErrorExample() {
  return (
    <EmptyState
      description="목록을 불러오지 못했습니다"
      errorText="네트워크 연결을 확인해 주세요"
      showEmptyImage
      emptyImageType="barricade"
    />
  );
}

Variant

default 와 educoreNoResult 컨테이너 스타일을 비교합니다. educore 결과 없음 화면 전용 스타일입니다.

코드

Open in Playground

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

export default function EmptyStateVariantsExample() {
  return (
    <VStack alignItems="stretch" gap="6">
      <EmptyState variant="default" description="검색 결과가 없습니다" showEmptyImage />
      <EmptyState variant="educoreNoResult" description="결과가 없습니다" showEmptyImage />
    </VStack>
  );
}

EducoreNoResult

코드

Open in Playground

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

const STORY_DEFAULT_ARGS = { ...({
    description: 'Empty State Text',
    showEmptyImage: true,
    emptyImageType: 'box',
  }), ...({
    description: '결과 없음 메세지',
    showEmptyImage: true,
    variant: 'educoreNoResult',
  }) } as ComponentProps<typeof EmptyState>;

const EmptyStateEducoreNoResultExampleRender = (args: ComponentProps<typeof EmptyState>) => (
    <div style={{ width: 500, height: 500 }}>
      <EmptyState {...args} />
    </div>
  );

export default function EmptyStateEducoreNoResultExample(props: Partial<ComponentProps<typeof EmptyState>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof EmptyState>;
  return EmptyStateEducoreNoResultExampleRender(mergedProps);
}

AllGraphicTypes

코드

Open in Playground

import { Flex } from '@mildang/styled-system/jsx';
import { EmptyState, type EmptyImageType } from '@mildang/design-system/EmptyState';

const EMPTY_IMAGE_TYPES: EmptyImageType[] = [
  'box',
  'paper',
  'barricade',
  'lock',
  'rene',
  'symbols',
  'brokenPencil',
  'fallingAirplane',
];

const EmptyStateAllGraphicTypesExample = () => (
    <div>
      <Flex wrap="wrap" gap="16">
        {EMPTY_IMAGE_TYPES.map((type) => (
          <EmptyState key={type} showEmptyImage emptyImageType={type} description={type} />
        ))}
      </Flex>
    </div>
  );

export default EmptyStateAllGraphicTypesExample;

WithChildren

코드

Open in Playground

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

const STORY_DEFAULT_ARGS = { ...({
    description: 'Empty State Text',
    showEmptyImage: true,
    emptyImageType: 'box',
  }), ...({
    description: '추가 콘텐츠가 있는 빈 상태',
  }) } as ComponentProps<typeof EmptyState>;

const EmptyStateWithChildrenExampleRender = (args: ComponentProps<typeof EmptyState>) => (
    <EmptyState {...args}>
      <button
        onClick={() => alert('클릭!')}
        style={{
          padding: '8px 16px',
          borderRadius: '4px',
          border: '1px solid #ccc',
          backgroundColor: '#fff',
          cursor: 'pointer',
        }}
      >
        액션 버튼
      </button>
    </EmptyState>
  );

export default function EmptyStateWithChildrenExample(props: Partial<ComponentProps<typeof EmptyState>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof EmptyState>;
  return EmptyStateWithChildrenExampleRender(mergedProps);
}

Default

코드

Open in Playground

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

const STORY_DEFAULT_ARGS = { ...({
    description: 'Empty State Text',
    showEmptyImage: true,
    emptyImageType: 'box',
  }), ...({}) } as ComponentProps<typeof EmptyState>;

export default function EmptyStateDefaultExample(props: Partial<ComponentProps<typeof EmptyState>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof EmptyState>;
  return <EmptyState {...mergedProps} />;
}

TwoLines

코드

Open in Playground

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

const STORY_DEFAULT_ARGS = { ...({
    description: 'Empty State Text',
    showEmptyImage: true,
    emptyImageType: 'box',
  }), ...({
    description: (
      <>
        <span>긴 빈 상태 텍스트입니다</span>
        <br />
        <span>&nbsp;두 번째 줄입니다</span>
      </>
    ),
  }) } as ComponentProps<typeof EmptyState>;

export default function EmptyStateTwoLinesExample(props: Partial<ComponentProps<typeof EmptyState>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof EmptyState>;
  return <EmptyState {...mergedProps} />;
}