Fallback view

화면에 표시할 데이터가 없을 때 사용자에게 현재 상황을 알려주는 요소입니다. 단순히 비어있음을 알리는 것을 넘어, 다음에 무엇을 해야 할지 안내하는 메시지와 액션 버튼을 함께 제공하여 사용 흐름이 끊기지 않도록 돕습니다.

Design

Web

iOS

Android

Basic fallback view

콘텐츠가 비어있거나 오류가난 상황에 사용합니다.

타이틀이 들어가요.상황에 대한 설명이 들어가요.
설명은 최대 두 줄로 작성해요.

import { FallbackView, FallbackViewContent, FallbackViewText, FallbackViewActionArea, FallbackViewActionAreaButton } from '@montage-ui/core';

const Demo = () => {
  return (
    <FallbackView sx={{ margin: 'auto' }}>
      <FallbackViewContent>
        <FallbackViewText
          title="타이틀이 들어가요."
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewActionArea>
          <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
        </FallbackViewActionArea>
      </FallbackViewContent>
    </FallbackView>
  )
}

export default Demo;

Anatomy

아래와 같이 조합하여 사용합니다.

<FallbackView>
  <FallbackViewContent>
    <FallbackViewText />

    <FallbackViewActionArea>
      <FallbackViewActionAreaButton />
    </FallbackViewActionArea>
  </FallbackViewContent>
</FallbackView>

버튼은 항상 FallbackViewActionArea로 감싸서 사용합니다. 버튼 배치는 FallbackViewActionArea의 variant로 지정합니다.

Action area

FallbackViewActionArea의 variant에 따라 버튼 레이아웃이 달라집니다.

single (default)
horizontal
vertical

Single

버튼을 하나만 배치할 때 사용합니다.

variant: single상황에 대한 설명이 들어가요.
설명은 최대 두 줄로 작성해요.

import { FallbackView, FallbackViewContent, FallbackViewText, FallbackViewActionArea, FallbackViewActionAreaButton } from '@montage-ui/core';

const Demo = () => {
  return (
    <FallbackView padding="compact">
      <FallbackViewContent>
        <FallbackViewText
          title="variant: single"
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewActionArea variant="single">
          <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
        </FallbackViewActionArea>
      </FallbackViewContent>
    </FallbackView>
  )
}

export default Demo;

Horizontal

버튼 두 개를 가로로 나란히 배치합니다.

variant: horizontal상황에 대한 설명이 들어가요.
설명은 최대 두 줄로 작성해요.

import { FallbackView, FallbackViewContent, FallbackViewText, FallbackViewActionArea, FallbackViewActionAreaButton } from '@montage-ui/core';

const Demo = () => {
  return (
    <FallbackView padding="compact">
      <FallbackViewContent>
        <FallbackViewText
          title="variant: horizontal"
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewActionArea variant="horizontal">
          <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
          <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
        </FallbackViewActionArea>
      </FallbackViewContent>
    </FallbackView>
  )
}

export default Demo;

Vertical

버튼 두 개를 세로로 쌓아 배치합니다.

variant: vertical상황에 대한 설명이 들어가요.
설명은 최대 두 줄로 작성해요.

import { FallbackView, FallbackViewContent, FallbackViewText, FallbackViewActionArea, FallbackViewActionAreaButton } from '@montage-ui/core';

const Demo = () => {
  return (
    <FallbackView padding="compact">
      <FallbackViewContent>
        <FallbackViewText
          title="variant: vertical"
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewActionArea variant="vertical">
          <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
          <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
        </FallbackViewActionArea>
      </FallbackViewContent>
    </FallbackView>
  )
}

export default Demo;

Platform

platform에 따라 글자, 버튼 크기, action area 간격이 달라집니다.

mobile
desktop (default)

Desktop

SingleHorizontalVertical

platform: desktop / variant: single상황에 대한 설명이 들어가요.
설명은 최대 두 줄로 작성해요.

import { FlexBox, SegmentedControl, SegmentedControlItem, FallbackView, FallbackViewContent, FallbackViewText, FallbackViewActionArea, FallbackViewActionAreaButton } from '@montage-ui/core';
import { useState } from 'react';

const Demo = () => {
const [variant, setVariant] = useState('single');

return (
  <FlexBox flexDirection="column" alignItems="center" gap="40px" sx={{ width: '100%' }}>
    <SegmentedControl value={variant} onValueChange={setVariant} sx={{ width: '100%', maxWidth: 320 }}>
      <SegmentedControlItem value="single">Single</SegmentedControlItem>
      <SegmentedControlItem value="horizontal">Horizontal</SegmentedControlItem>
      <SegmentedControlItem value="vertical">Vertical</SegmentedControlItem>
    </SegmentedControl>

    <FallbackView platform="desktop">
      <FallbackViewContent>
        <FallbackViewText
          title={`platform: desktop / variant: ${variant}`}
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewActionArea variant={variant}>
          <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
          {variant !== 'single' && (
            <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
          )}
        </FallbackViewActionArea>
      </FallbackViewContent>
    </FallbackView>
  </FlexBox>
)
}

export default Demo;

Mobile

SingleHorizontalVertical

platform: mobile / variant: single상황에 대한 설명이 들어가요.
설명은 최대 두 줄로 작성해요.

import { FlexBox, SegmentedControl, SegmentedControlItem, FallbackView, FallbackViewContent, FallbackViewText, FallbackViewActionArea, FallbackViewActionAreaButton } from '@montage-ui/core';
import { useState } from 'react';

const Demo = () => {
const [variant, setVariant] = useState('single');

return (
  <FlexBox flexDirection="column" alignItems="center" gap="40px" sx={{ width: '100%' }}>
    <SegmentedControl value={variant} onValueChange={setVariant} sx={{ width: '100%', maxWidth: 320 }}>
      <SegmentedControlItem value="single">Single</SegmentedControlItem>
      <SegmentedControlItem value="horizontal">Horizontal</SegmentedControlItem>
      <SegmentedControlItem value="vertical">Vertical</SegmentedControlItem>
    </SegmentedControl>

    <FallbackView platform="mobile">
      <FallbackViewContent>
        <FallbackViewText
          title={`platform: mobile / variant: ${variant}`}
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewActionArea variant={variant}>
          <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
          {variant !== 'single' && (
            <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
          )}
        </FallbackViewActionArea>
      </FallbackViewContent>
    </FallbackView>
  </FlexBox>
)
}

export default Demo;

Padding

padding 옵션에 따라 상/하 패딩이 달라집니다.

normal (default)
compact

flex 레이아웃을 이용한 center 배치 보단, padding을 이용한 배치를 권장합니다.

Normal

padding: normal상황에 대한 설명이 들어가요.
설명은 최대 두 줄로 작성해요.

import { FallbackView, FallbackViewContent, FallbackViewText, FallbackViewActionArea, FallbackViewActionAreaButton } from '@montage-ui/core';

const Demo = () => {
  return (
    <FallbackView padding="normal">
      <FallbackViewContent>
        <FallbackViewText
          title="padding: normal"
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewActionArea>
          <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
        </FallbackViewActionArea>
      </FallbackViewContent>
    </FallbackView>
  )
}

export default Demo;

Compact

padding: compact상황에 대한 설명이 들어가요.
설명은 최대 두 줄로 작성해요.

import { FallbackView, FallbackViewContent, FallbackViewText, FallbackViewActionArea, FallbackViewActionAreaButton } from '@montage-ui/core';

const Demo = () => {
  return (
    <FallbackView padding="compact">
      <FallbackViewContent>
        <FallbackViewText
          title="padding: compact"
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewActionArea>
          <FallbackViewActionAreaButton>텍스트</FallbackViewActionAreaButton>
        </FallbackViewActionArea>
      </FallbackViewContent>
    </FallbackView>
  )
}

export default Demo;

API

FallbackView

정해진 breakpoint에 따라 아래 옵션을 override 할 수 있습니다.

platform
padding
width

Name	Types	defaultValue
`as`	`ElementType`	`-`
`platform`	`"desktop" \| "mobile"`	`"desktop"`
`padding`	`"normal" \| "compact"`	`"normal"`
`width`	`Property.Width<string \| number> \| undefined`	`-`
`children`	`ReactNode`	`-`
`sx`	`SxProp`	`-`
`xl`	`Merge<Pick<FallbackViewDefaultProps, "platform" \| "width" \| "padding">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`lg`	`Merge<Pick<FallbackViewDefaultProps, "platform" \| "width" \| "padding">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`md`	`Merge<Pick<FallbackViewDefaultProps, "platform" \| "width" \| "padding">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`sm`	`Merge<Pick<FallbackViewDefaultProps, "platform" \| "width" \| "padding">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`xs`	`Merge<Pick<FallbackViewDefaultProps, "platform" \| "width" \| "padding">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`flexDirection`	`Property.FlexDirection \| undefined`	`-`
`flexWrap`	`Property.FlexWrap \| undefined`	`-`
`justifyContent`	`Property.JustifyContent \| undefined`	`-`
`alignItems`	`Property.AlignItems \| undefined`	`-`
`alignContent`	`Property.AlignContent \| undefined`	`-`
`order`	`Property.Order \| undefined`	`-`
`flex`	`Property.Flex<string \| number> \| undefined`	`-`
`flexGrow`	`Property.FlexGrow \| undefined`	`-`
`flexShrink`	`Property.FlexShrink \| undefined`	`-`
`flexBasis`	`Property.FlexBasis<string \| number> \| undefined`	`-`
`alignSelf`	`Property.AlignSelf \| undefined`	`-`
`gap`	`Property.Gap<string \| number> \| undefined`	`-`
`rowGap`	`Property.RowGap<string \| number> \| undefined`	`-`
`columnGap`	`Property.ColumnGap<string \| number> \| undefined`	`-`

FallbackViewContent

FlexBox와 동일한 props를 사용합니다.

Name	Types	defaultValue
`flexDirection`	`Property.FlexDirection \| undefined`	`-`
`flexWrap`	`Property.FlexWrap \| undefined`	`-`
`justifyContent`	`Property.JustifyContent \| undefined`	`-`
`alignItems`	`Property.AlignItems \| undefined`	`-`
`alignContent`	`Property.AlignContent \| undefined`	`-`
`order`	`Property.Order \| undefined`	`-`
`flex`	`Property.Flex<string \| number> \| undefined`	`-`
`flexGrow`	`Property.FlexGrow \| undefined`	`-`
`flexShrink`	`Property.FlexShrink \| undefined`	`-`
`flexBasis`	`Property.FlexBasis<string \| number> \| undefined`	`-`
`alignSelf`	`Property.AlignSelf \| undefined`	`-`
`gap`	`Property.Gap<string \| number> \| undefined`	`-`
`rowGap`	`Property.RowGap<string \| number> \| undefined`	`-`
`columnGap`	`Property.ColumnGap<string \| number> \| undefined`	`-`
`children`	`ReactNode`	`-`
`sx`	`SxProp`	`-`
`xl`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`lg`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`md`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`sm`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`xs`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`

FallbackViewText

Name	Types	defaultValue
`title`	`ReactNode`	`-`
`description *`	`ReactNode`	`-`
`children`	`ReactNode`	`-`
`sx`	`SxProp`	`-`
`color`	`ThemeColorsToken`	`-`
`xl`	`Merge<Pick<TypographyDefaultProps, "variant" \| "weight" \| "align">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`lg`	`Merge<Pick<TypographyDefaultProps, "variant" \| "weight" \| "align">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`md`	`Merge<Pick<TypographyDefaultProps, "variant" \| "weight" \| "align">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`sm`	`Merge<Pick<TypographyDefaultProps, "variant" \| "weight" \| "align">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`xs`	`Merge<Pick<TypographyDefaultProps, "variant" \| "weight" \| "align">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`variant`	`"display1" \| "display2" \| "display3" \| "title1" \| "title2" \| "title3" \| "heading1" \| "heading2" \| "headline1" \| "headline2" \| "body1" \| "body2" \| "label1" \| "label2" \| "caption1" \| "caption2" \| "body1-reading" \| "body2-reading" \| "label1-reading"`	`-`
`weight`	`"medium" \| "regular" \| "bold"`	`-`
`align`	`Property.TextAlign \| undefined`	`-`
`noWrap`	`boolean`	`-`
`display`	`Property.Display \| undefined`	`-`

FallbackViewActionArea

variant 외에는 FlexBox와 동일한 props를 사용합니다.

Name	Types	defaultValue
`variant`	`"horizontal" \| "vertical" \| "single"`	`"single"`
`children`	`ReactNode`	`-`
`sx`	`SxProp`	`-`
`xl`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`lg`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`md`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`sm`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`xs`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`flexDirection`	`Property.FlexDirection \| undefined`	`-`
`flexWrap`	`Property.FlexWrap \| undefined`	`-`
`justifyContent`	`Property.JustifyContent \| undefined`	`-`
`alignItems`	`Property.AlignItems \| undefined`	`-`
`alignContent`	`Property.AlignContent \| undefined`	`-`
`order`	`Property.Order \| undefined`	`-`
`flex`	`Property.Flex<string \| number> \| undefined`	`-`
`flexGrow`	`Property.FlexGrow \| undefined`	`-`
`flexShrink`	`Property.FlexShrink \| undefined`	`-`
`flexBasis`	`Property.FlexBasis<string \| number> \| undefined`	`-`
`alignSelf`	`Property.AlignSelf \| undefined`	`-`
`gap`	`Property.Gap<string \| number> \| undefined`	`-`
`rowGap`	`Property.RowGap<string \| number> \| undefined`	`-`
`columnGap`	`Property.ColumnGap<string \| number> \| undefined`	`-`

FallbackViewActionAreaButton

Button과 동일한 props를 사용합니다.

Name	Types	defaultValue
`as`	`ElementType`	`-`
`size`	`"small" \| "medium" \| "large" \| "xsmall"`	`-`
`disabled`	`boolean`	`-`
`disableInteraction`	`boolean`	`-`
`variant`	`"solid" \| "outlined"`	`-`
`color`	`"negative" \| "primary" \| "assistive"`	`-`
`fullWidth`	`boolean`	`-`
`leadingContent`	`ReactNode`	`-`
`trailingContent`	`ReactNode`	`-`
`iconOnly`	`boolean`	`-`
`children`	`ReactNode`	`-`
`loading`	`boolean`	`-`
`disableLoadingPreventEvents`	`boolean`	`-`
`sx`	`SxProp`	`-`
`xl`	`Merge<Pick<ButtonDefaultProps, "size" \| "fullWidth">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`lg`	`Merge<Pick<ButtonDefaultProps, "size" \| "fullWidth">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`md`	`Merge<Pick<ButtonDefaultProps, "size" \| "fullWidth">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`sm`	`Merge<Pick<ButtonDefaultProps, "size" \| "fullWidth">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`xs`	`Merge<Pick<ButtonDefaultProps, "size" \| "fullWidth">, { sx?: CSSInterpolation; }> \| undefined`	`-`