udong09-react-components

v0.1.0

Published

2 years ago

## 목록 1. [ThemeColors](#themecolors-공통) 2. [Size](#size-공통) 4. [ThemeBorderRadius](#themeborderradius-공통) 5. [Scaffold](#scaffold) 6. [Appbar](#appbar) 7. [WText](#wtext) 8. [Avatar](#avatar) 9. [Button](#button) 10. [Checkbox](#checkbox) 11. [Radio](#rad

Downloads

0High
0Medium
0Low

sunjaeleee

Udong09 Components

ThemeColors - 공통

Figma에 정의된 색 정의를 colorScheme 이라는 param으로 각 컴포넌트에 적용합니다.

green, orange, black, white, purple, red 라는 이름으로 설정했습니다.

ex)

function App() {
  return <Button colorScheme={'black.80'}/>
}

reference: https://www.figma.com/file/2EQmMazTEVKDnz9D0DBhvk/%EC%9A%B0%EB%8F%99%EA%B3%B5%EA%B5%AC?node-id=96%3A1708

Size - 공통

ex)

function App() {
  return <Button size={'md'}/>
}

ThemeBorderRadius - 공통

ex)

function App() {
  return <Button borderRadius={'full'}/>
}

Scaffold

material UI의 Scaffold 와 동일합니다. 화면의 고정 앱바와 components들의 template의 역할을 합니다.

ex)

function App() {
  return <Scaffold
            appbar={
            <Appbar
            title="홈화면"
            action={
              <Button
                size="md"
                variant="ghost"
                text={"완료"}
                fontColor={WColors.gossamer}
                onClick={() => ref.current?.openDialog!()}
              />}
              enableBack
            />}
            body={
              <TabView />
            }
  />
}

Appbar

App Screenshot

ex)

function App(){   
        <Appbar
            title="홈화면"
            leading={[
            <Button
              size="sm"
              variant="ghost"
              text={"풍덕천동"}
              fontColor={WColors.black}
              leftIcon={<Icon name={icMap} size={"sm"} />}
              onClick={() => ref.current?.openDialog!()}
            />
            ]}
            action={[
            <Button
              size="md"
              variant="ghost"
              fontColor={WColors.gossamer}
              onClick={() => ref.current?.openDialog!()}
              leftIcon={<Icon name={icSearch} size={"md"} />}
            />,
             <Button
              size="md"
              variant="ghost"
              fontColor={WColors.gossamer}
              onClick={() => ref.current?.openDialog!()}
              leftIcon={<Icon name={icQRCode} size={"md"} />}
            />
            ]}
            enableBack={false}
        />}

TextTheme

| Parameter | Font Size | Font Weight | | :-------- | :--------- | :--------- | | text1 | 24px | 400 | | text2 | 22px | 400 | | text3 | 20px | 400 | | text4 | 18px | 400 | | text5 | 14px | 400 | | text6 | 12px | 400 | | title1 | 24px | 700 | | title2 | 22px | 700 | | title3 | 20px | 700 | | title4 | 18px | 700 | | title5 | 14px |700 | | title6 | 12px | 700 |

WText

ex)

function App() {
  return <WText text={"현금 영수증"} color={'green.100'} theme={"title4"} />;
}

Avatar

ex)

function App() {
  return <Avatar src="https://naver.com" size="lg" />;
}

Button

App Screenshot

ex)

function App() {
  return <Button
            size="md"
            variant="ghost"
            text={"BUTTON"}
            fontColor={WColors.gossamer}
            onClick={() => ref.current?.openDialog!()}
            leftIcon={<Icon name={icSearch} size={"md"} />}
          />;
}

Checkbox

App Screenshot

ex)

function App() {
  return <Checkbox
            label={"현금 영수증"}
            checked={checkbox}
            value={"checked"}
            onClick={(e) => setCheckbox(!checkbox)}
            size={"sm"}
            color={"green.80"}
          />
}

Radio

App Screenshot

ex)

function App() {
  return <Radio
            label={"신용카드"}
            checked={checkbox}
            value={"1"}
            onClick={(checked, value) => setValue(value)}
            size={"sm"}
            color={"green.80"}
            checked={value === "1"}
          />
}

Switch

App Screenshot

ex)

function App() {
  return <Switch
            onClick={() => setValue(value)}
            size={"sm"}
            color={"green.80"}
            checked={value === "1"}
          />
}

Dialog

App Screenshot

ex)

function App() {
  const ref = useRef<DialogType>(null);

  return <Dialog
            ref={ref}
            text="제출하시겠습니까? 우동공구 입니다. 수정하시려면 확인이 필요합니다."
            rightButtonColor={"green.100"}
            onConfirm={() => {}}
            children={
              <Scaffold 
                appbar={<Appbar
                  action={
                     <Button
                        size="md"
                        variant="ghost"
                        text={"완료"}
                        fontColor={WColors.gossamer}
                        onClick={() => ref.current?.openDialog!()}
                      />
                  }
                 />}
                body={<TabView />}
              />
            }
          />
}

Toast - Custom Hook

ex)

function App() {
  const { sendToast } = useToast();
  return <Button
            text={"TOAST"}
            onClick={() => sendToast("완료되었습니다.")}
            size={"sm"}
            color={"green.80"}
            checked={value === "1"}
          />
}

ExpansionTile

App Screenshot

ex)

function App() {
  return  <ExpansionTile
             title="매장 선택"
             items={option1, option2, option3]}
             label={(item) => item.name}
             checkedIndex={checkedIndex}
             onClickItem={(item, index) => setSelectedOption(index)}
          />
}

TabView

App Screenshot

BottomSheet

useBottomSheet 과 같이 선언하여 사용한다. BottomSheet Component에 useBottomSheet 의 isOpen과 onClose Prop을 넘긴다.

ex)

function App() {
  const { onOpen, isOpen, onClose } = useBottomSheet();

  return <BottomSheet isOpen={isOpen} onClose={onClose}>
                <Checkbox
                  label={"현금 영수증"}
                  checked={checkbox}
                  value={""}
                  onClick={(e) => setCheckbox(!checkbox)}
                  size={"sm"}
                  color={"green.80"}
                />
          </BottomSheet>
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Udong09 Components

목록

ThemeColors - 공통

Figma에 정의된 색 정의를 colorScheme 이라는 param으로 각 컴포넌트에 적용합니다.

reference: https://www.figma.com/file/2EQmMazTEVKDnz9D0DBhvk/%EC%9A%B0%EB%8F%99%EA%B3%B5%EA%B5%AC?node-id=96%3A1708

Size - 공통

ThemeBorderRadius - 공통

Scaffold

material UI의 Scaffold 와 동일합니다. 화면의 고정 앱바와 components들의 template의 역할을 합니다.

Appbar

TextTheme

WText

Avatar

Button

Checkbox

Radio

Switch

Dialog

Toast - Custom Hook

ExpansionTile

TabView

BottomSheet

useBottomSheet 과 같이 선언하여 사용한다. BottomSheet Component에 useBottomSheet 의 isOpen과 onClose Prop을 넘긴다.