udong09-react-components v0.1.0

Udong09 Components

목록

1. ThemeColors
2. Size
3. ThemeBorderRadius
4. Scaffold
5. Appbar
6. WText
7. Avatar
8. Button
9. Checkbox
10. Radio
11. Switch
12. Dialog
13. Toast
14. ExpansionTile
15. TabView
16. BottomSheet

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

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

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

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

ex)

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

Radio

ex)

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

Switch

ex)

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

Dialog

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

ex)

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

TabView

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