Skip to content

Latest commit

 

History

History
364 lines (254 loc) · 13.9 KB

README.md

File metadata and controls

364 lines (254 loc) · 13.9 KB
Raw

🥄 펀잇팀 디자인시스템 🎨

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('실패');