🥄 펀잇팀 디자인시스템 🎨

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

| props | value | description | | --------- | -------------------------------------- | -------------------------------------------- | | element | p, span(default: span) | Badge 컴포넌트의 element 타입입니다. | | color | CSSProperties['color'] | Badge 컴포넌트 내부 색상입니다. | | textColor | CSSProperties['color'] | Badge 컴포넌트에 들어갈 텍스트의 색상입니다. | | size? | xs, sm, md, lg, xl (default: sm) | Badge 컴포넌트에 들어갈 텍스트의 크기입니다. | | css? | CSSProp | Badge 컴포넌트에 적용할 CSS 스타일입니다. |

Example

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

BottomSheet

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

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

Props

| props | value | description | | --------- | -------- | ---------------------------------------------- | | maxWidth? | string | BottomSheet 컴포넌트의 최대 폭입니다. | | isClosing | boolean | BottomSheet 컴포넌트가 닫히는지 여부입니다. | | close() | function | BottomSheet 컴포넌트를 닫는 함수를 전달합니다. |

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

| props | value | description | | ------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | customWidth? | string (default: 120px) | Button 컴포넌트의 넓이입니다. | | customHeight? | string (default: 40px) | Button 컴포넌트의 높이입니다. | | color? | color (default: primary) | Button 컴포넌트의 색상입니다. | | textColor? | color (default: default) | Button 컴포넌트의 텍스트 색상입니다. | | size? | xs, sm, md, lg, xl (default: md) | Button 컴포넌트의 폰트 크기입니다. | | weight? | light, regular, bold (default: bold) | Button 컴포넌트의 폰트 가중치입니다. | | variant? | outlined, filled, transparent (default: filled) | Button 컴포넌트의 스타일로 배경색 없이 아웃라인이 있는지, 배경색이 있고 아웃라인이 없는지, 투명 배경인지 설정할 수 있습니다. | | css? | CSSProp | Button 컴포넌트에 적용할 CSS 스타일입니다. |

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

| props | value | description | | --------- | ------------------------------------------ | ---------------------------------------- | | size? | xs, sm, md, lg, xl (default: md) | Checkbox 컴포넌트의 체크박스 크기입니다. | | fontSize? | xs, sm, md, lg, xl (default: md) | Checkbox 컴포넌트의 폰트 크기입니다. | | weight? | light, regular, bold (default: bold) | Checkbox 컴포넌트의 폰트 가중치입니다. | | tabIndex? | -1, 0, 1 | Checkbox 컴포넌트의 tabIndex입니다. |

Example

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

Divider

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

Props

| props | value | description | | ------------- | ---------------------------------------------------- | ----------------------------------------------------------- | | variant? | default , strong , disabled (default: default) | Divider 컴포넌트의 종류입니다. 강조의 정도 차이가 있습니다. | | customWidth? | string (default: 100%) | Divider 컴포넌트의 길이입니다. | | customHeight? | string (default: 1px) | Divider 컴포넌트의 두께입니다. | | css? | CSSProp | Divider 컴포넌트에 적용할 CSS 스타일입니다. |

Example

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

Heading

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

Props

| props | value | description | | --------- | ----------------------------- | ------------------------------------------- | | children? | ReactNode | Heading 컴포넌트의 자식 컴포넌트입니다. | | as? | h1 ,h2, h3(default: h1) | Heading 컴포넌트의 HTML 태그입니다. | | size? | xs, sm, md, lg, xl | Heading 컴포넌트의 폰트 크기입니다. | | weight? | light, regular, bold | Heading 컴포넌트의 폰트 가중치입니다. | | css? | CSSProp | Heading 컴포넌트에 적용할 CSS 스타일입니다. |

Example

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

Input

인풋 컴포넌트입니다.

Props

| props | value | description | | ------------- | --------- | --------------------------------------------- | | customWidth? | string | Input 컴포넌트의 너비값입니다. | | minWidth? | string | Input 컴포넌트의 최소 너비값입니다. | | isError? | boolean | Input value에 에러가 있는지 여부입니다. | | rightIcon? | ReactNode | Input 컴포넌트 오른쪽에 위치할 아이콘입니다. | | errorMessage? | string | isError가 true일 때 보여줄 에러 메시지입니다. |

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

| props | value | description | | ----------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | | as? | a, Link(react-router-dom의 Link), NavLink(react-router-dom의 NavLink) (default: a) | Link 컴포넌트로 사용할 HTML 태그 또는 외부 링크 컴포넌트입니다. | | isExternal? | boolean (default: false) | Link 컴포넌트의 링크 클릭 시 새로운 탭으로 열도록 선택할 수 있습니다. | | block | boolean (default: false) | Link 컴포넌트의 디스플레이 속성이 block인지 선택할 수 있습니다. | | css? | CSSProp | Link 컴포넌트에 적용할 CSS 스타일입니다. |

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

| props | value | description | | ------- | --------------- | --------------------------------- | | width? | string , number | Skeleton 컴포넌트의 너비값입니다. | | height? | string , number | Skeleton 컴포넌트의 높이값입니다. |

Example

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

Spacing

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

Props

| props | value | description | | ---------- | ---------------------------------------------- | ------------------------------ | | direction? | vertical, horizontal (default: vertical) | Spacing 컴포넌트의 방향입니다. | | size | number | Spacing 컴포넌트의 크기입니다. |

Example

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

Text

텍스트 컴포넌트입니다.

Props

| props | value | description | | ----------- | ------------------------------------------------- | ---------------------------------------- | | children? | ReactNode | Text 컴포넌트의 자식 컴포넌트입니다. | | as? | p, span (default: p) | Text 컴포넌트의 HTML 태그입니다. | | size? | xs, sm, md, lg, xl (default: md) | Text 컴포넌트의 폰트 크기입니다. | | weight? | light, regular, bold(default: regular) | Text 컴포넌트의 폰트 가중치입니다. | | lineHeight? | xs, sm, md, lg, xl(default: md) | Text 컴포넌트의 텍스트 높이입니다. | | color? | CSSProperties['color'] (default: ‘#232527’) | Text 컴포넌트의 텍스트 색상입니다. | | align? | left, center, right (default: left) | Text 컴포넌트의 텍스트 정렬입니다. | | css? | CSSProp | Text 컴포넌트에 적용할 CSS 스타일입니다. |

Example

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

Textarea

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

Props

| props | value | description | | ------------- | ------------------------------------------------------ | ------------------------------------------------ | | resize? | both, horizontal, vertical, none (default: both) | Textarea 컴포넌트의 크기 재조정 방향 설정입니다. | | errorMessage? | string | Textarea 컴포넌트의 에러 메시지입니다. |

Example

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

Toast

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

Example

const { toast } = useToastActionContext();

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