@fun-eat/design-system v0.4.3

🥄 펀잇팀 디자인시스템 🎨

Install

npm

npm install @fun-eat/design-system

yarn

yarn add @fun-eat/design-system

FunEatProvider

@fun-eat/design-system 컴포넌트를 사용하기 위해서는 FunEatProvider로 감싸줘야합니다.

//index.tsx

import FunEatProvider from '@fun-eat/design-system';

<FunEatProvider>
  <App />
</FunEatProvider>;

Components

Badge

작은 크기의 뱃지 컴포넌트입니다.

Props

Example

<Badge color="#000" textColor="#fff" size="md">뱃지</Badge>
<Badge color="#000" textColor="#fff">뱃지</Badge>

BottomSheet

아래에서 위로 올라오는 바텀시트 컴포넌트입니다.

@fun-eat/design-system에서 제공하는 useBottomSheet와 사용해야 합니다.

Props

Example

import { useBottomSheet } from '@fun-eat/design-system';

const Parent = () => {
  const { ref, isClosing, handleOpenBottomSheet, handleCloseBottomSheet } = useBottomSheet();

  return (
    <>
      <button type="button" onClick={handleOpenBottomSheet}>
        바텀시트 열기
      </button>
      <BottomSheet ref={ref} isClosing={isClosing} close={handleCloseBottomSheet}>
        <div>바텀시트 컴포넌트</div>
      </BottomSheet>
    </>
  );
};

Button

버튼 컴포넌트입니다.

Props

Example

<Button width="100%" height="20px" color="#000" textColor="#fff" size="sm" weight="regular" variant="filled">버튼</Button>
<Button>버튼</Button>

Carousel

캐러셀 컴포넌트입니다.

Example

const carouselList = [0, 1, 2].map((index) => ({
  id: index,
  children: <div>{index}</div>,
}));

<Carousel carouselList={carouselList} />;

Checkbox

체크박스 컴포넌트입니다.

Props

Example

<Checkbox />
<Checkbox size="xs">재구매 의사가 있으신가요?</Checkbox>
<Checkbox size="xl" fontSize="xl" weight="bold">재구매 의사가 있으신가요?</Checkbox>

Divider

화면 구역을 나누는 선 컴포넌트입니다.

Props

Example

<Divider variant="strong" customWidth="50%" customHeight='4px' />
<Divider />

Heading

HTML heading 태그를 사용하는 컴포넌트입니다.

Props

Example

<Heading>로망오우타해황</Heading>
<Heading as="h2">로망오우타해황</Heading>
<Heading as="h3" size="xl" weight='regular'>로망오우타해황</Heading>
<Heading as="h3" css='color: red;'>로망오우타해황</Heading>

Input

인풋 컴포넌트입니다.

Props

Example

<Input
  customWidth="100%"
  onChange={modifyNickname}
/>
<Input
	customWidth="100%"
	rightIcon={
	  <Button customHeight="36px" color="white">
	    <SvgIcon variant="search" />
	  </Button>
	}
/>

Link

다른 URL로 연결하는 컴포넌트입니다. react-router-dom과 함께 사용할 수 있습니다.

Props

Example

<Link href='#'>링크로 이동합니다.</Link>
<Link href='#' isExternal></Link>
<Link href='#' isExternal block>링크로 이동합니다.</Link>

// react-router-dom을 사용한 예시
import {Link as RouterLink, NavLink} from 'react-router-dom'

<Link as={RouterLink} to='/'>링크로 이동합니다.</Link>
<Link as={NavLink} to='/' isExternal>링크로 이동합니다.</Link>

Skeleton

로딩 상태를 시각적으로 나타내는 컴포넌트입니다.

Props

Example

<Skeleton width={90} height={90} />

Spacing

화면 구역을 나누는 여백 컴포넌트입니다.

Props

Example

<Spacing size={10} />
<Spacing direction="horizontal" size={10} />

Text

텍스트 컴포넌트입니다.

Props

Example

<Text>로망오우타해황</Text>
<Text as="span">로망오우타해황</Text>
<Text weight="bold" size="xl">로망오우타해황</Text>
<Text css="color: red;">로망오우타해황</Text>

Textarea

멀티라인 텍스트 입력 컴포넌트입니다.

Props

Example

<Textarea />
<Textarea resize="vertical" rows={10} placeholder="값을 입력해주세요."/>

Toast

알람을 띄우는 토스트 컴포넌트입니다.

Example

const { toast } = useToastActionContext();

toast.success('성공');
toast.error('실패');