Fallback view

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

Design

Web

iOS

Android

Basic fallback view

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

이미지를 추가할 땐 FallbackViewImage로 감싸서 사용합니다.

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

import { FallbackView, FallbackViewImage, FallbackViewContent, FallbackViewText, FallbackViewButton } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FallbackView sx={{ margin: 'auto' }}>
      <FallbackViewImage>
        <img
          src="https://static.wanted.co.kr/images/ghost.png"
          alt="Example image"
        />
      </FallbackViewImage>
      <FallbackViewContent>
        <FallbackViewText
          title="타이틀이 들어가요." 
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewButton>텍스트</FallbackViewButton>
      </FallbackViewContent>
    </FallbackView>
  )
}

export default Demo;

Anatomy

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

<FallbackView>
  <FallbackViewImage>
    <img />
  </FallbackViewImage>

  <FallbackViewContent>
    <FallbackViewText />

    <FallbackViewButton />
  </FallbackViewContent>
</FallbackView>

Platform

platform에 따라 이미지, 글자, 버튼 크기가 달라집니다.

mobile
desktop (default)

Desktop

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

import { FallbackView, FallbackViewContent, FallbackViewText, FallbackViewButton, FallbackViewImage } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FallbackView width="100%">
      <FallbackViewImage>
        <img
          src="https://static.wanted.co.kr/images/ghost.png"
          alt="Example image"
        />
      </FallbackViewImage>      
      <FallbackViewContent>
        <FallbackViewText
          title="platform: desktop" 
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewButton>텍스트</FallbackViewButton>
      </FallbackViewContent>
    </FallbackView>
  )
}

export default Demo;

Mobile

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

import { FallbackView, FallbackViewContent, FallbackViewText, FallbackViewButton, FallbackViewImage } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FallbackView platform="mobile" width="100%">
      <FallbackViewImage>
        <img
          src="https://static.wanted.co.kr/images/ghost.png"
          alt="Example image"
        />
      </FallbackViewImage>      
      <FallbackViewContent>
        <FallbackViewText
          title="platform: mobile" 
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewButton>텍스트</FallbackViewButton>
      </FallbackViewContent>
    </FallbackView>
  )
}

export default Demo;

Padding

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

normal (default)
compact

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

Normal

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

import { FallbackView, FallbackViewContent, FallbackViewText, FallbackViewButton, FallbackViewImage } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FallbackView padding="normal">
      <FallbackViewImage>
        <img
          src="https://static.wanted.co.kr/images/ghost.png"
          alt="Example image"
        />
      </FallbackViewImage>
      <FallbackViewContent>
        <FallbackViewText
          title="padding: normal"
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewButton>텍스트</FallbackViewButton>
      </FallbackViewContent>
    </FallbackView>
  )
}

export default Demo;

Compact

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

import { FallbackView, FallbackViewContent, FallbackViewText, FallbackViewButton, FallbackViewImage } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FallbackView padding="compact">
      <FallbackViewImage>
        <img
          src="https://static.wanted.co.kr/images/ghost.png"
          alt="Example image"
        />
      </FallbackViewImage>
      <FallbackViewContent>
        <FallbackViewText
          title="padding: compact"
          description={
            <>
              상황에 대한 설명이 들어가요.
              <br />
              설명은 최대 두 줄로 작성해요.
            </>
          }
        />
        <FallbackViewButton>텍스트</FallbackViewButton>
      </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`	`-`

FallbackViewImage

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`	`-`

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" \| "body1-reading" \| "body2" \| "body2-reading" \| "label1" \| "label1-reading" \| "label2" \| "caption1" \| "caption2"`	`-`
`weight`	`"medium" \| "regular" \| "bold"`	`-`
`align`	`Property.TextAlign \| undefined`	`-`
`noWrap`	`boolean`	`-`
`display`	`Property.Display \| undefined`	`-`

FallbackViewButton

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

Name	Types	defaultValue
`as`	`ElementType`	`-`
`size`	`"small" \| "medium" \| "large"`	`-`
`disabled`	`boolean`	`-`
`disableInteraction`	`boolean`	`-`
`variant`	`"solid" \| "outlined"`	`-`
`color`	`"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`	`-`