gangstarr-point-styler v1.0.1

Team Gangstarr

🗂️ 프로젝트 소개

웅진X스나이퍼 팩토리 일경험 프로젝트의 일환으로 통증관리시스템 디자인 라이브러리 제작하였습니다.

🌕 팀소개

설치 방법

npm i gangstarr-point-styler

정상적인 스타일을 위해서는 Provider를 적용해야해요!

import { PoinTStyleProvider } from 'gangstarr-point-styler';

...

return (
  <PoinTStyleProvider>
  </PoinTStyleProvider>
)

...

사용법

color와 font

import후 color.gray100와 같은 형태로 사용해요.

import { color, font } from "gangstarr-point-styler";

...

const Component = styled.div`
  color: ${color.gray100}
`

...

AppBar

디테일 페이지에서 사용하는 AppBar입니다.

예시 코드

import { AppBar } from 'gangstarr-point-styler';
...
<AppBar title='페이지 이름' size='full' icon={[{iconName: 'add', func: () => {console.log('클릭')}}]} />
...

Banner

사용자가 원하는 사진과 제목, 설명을 노출합니다.

예시 코드

...
import { Banners } from 'gangstarr-point-styler';
...

  <Banners title='title' description='description' imageUrl='imageUrl' />

...

Button

각 속성의 값에 따라 스타일링된 버튼을 노출합니다.

예시 코드

...
import { Button } from 'gangstarr-point-styler';
...

  <Button size='large' fill='contained' mode='normal'>
	버튼
  </Button>

...

Button_FAB

페이지 하단에서 페이지 상단으로 이동하거나 추가버튼을 사용하는 버튼입니다.

예시 코드

import { ButtonFab } from 'gangstarr-point-styler';
...
 <ButtonFab mode={'add'} func={()=>{console.log("클릭")}} position={'center'}/>
...

Card

CardCalendarData

속성 값에 따라 회원 정보와 일정 등을 노출합니다.

예시 코드

...
import { CardCalendarData } from 'gangstarr-point-styler';
...

  <CardCalendarData
    period={'이번 달'}
    name={'박환자'}
    totalSchedule={'100'}
    cancelSchedule={'100'}
    percent={'100'}
  />

...

CardLinkLarge

카드에 대한 이미지와 제목, 설명을 노출합니다. 텍스트가 3줄 이상이 되면 말 줄임 표를 노출합니다.

예시 코드

...
import { CardLinkLarge } from 'gangstarr-point-styler';
...

  <CardLinkLarge
    imageUrl={'imageUrl'}
    title={'Title'}
    description={'Description'}
  />

...

CardLinkMedium

카드에 대한 이미지와 설명을 노출합니다. 설명이 일정 글자 이상이 되면 말 줄임 표를 노출합니다.

예시 코드

...
import { CardLinkMedium } from 'gangstarr-point-styler';
...

  <CardLinkMedium
    imageUrl={'imageUrl'}
    description={'Description'}
    isDelete={false}
  />

...

CardOption

예시 코드

...
import { CardOption } from 'gangstarr-point-styler';
...

  <CardOption
    title={'Title'}
    description={'Description'}
    isActive={false}
  />

...

Dialog

사용자에게 정보를 제공하는 Dialog 창을 노출합니다. 경우에 따라 확인, 취소 버튼의 사용이 가능합니다.

예시 코드

...
import { Dialog } from 'gangstarr-point-styler';
...

  const [isShow, setIsShow] = useState(false);

  ...

  <Dialog
    isShow={isShow}
    onHanndleShow={() => setIsShow(false)}
    title='Title'
    description='Description'
    grayButtonName='취소'
    onClickGrayButton={() => {
      return;
    }}
    primaryButtonName='확인'
    onClickPrimaryButton={() => {
      return;
    }}
  />

...

Dropdown

DropdownTextfield

각 속성값에 따라 Select 박스를 나타냅니다.

예시 코드

...
import { DropdownTextfield } from 'gangstarr-point-styler';
...
  const menuList = [
    { id: 1, menu: 'List1' },
    { id: 2, menu: 'List2' },
    { id: 3, menu: 'List3' },
  ];

  <DropdownTextfield menuList={menuList} />
...

DropdownSingle

각 속성값에 따라 Select 박스를 나타냅니다. Select 박스의 길이, 활성화 여부를 정합니다.

예시 코드

...
import { DropdownSingle } from 'gangstarr-point-styler';
...
  const menuList = [
    { id: 1, menu: '월' },
    { id: 2, menu: '주' },
    { id: 3, menu: '일' },
  ];

  <DropdownSingle
    menuList={menuList}
    state='inactive'
    calendar={true}
  />
...

DropdownDouble

각 속성값에 따라 Select 박스를 나타냅니다.

예시 코드

...
import { DropdownDouble } from 'gangstarr-point-styler';
...
  const menuList = [
    { id: 1, menu: 'List1' },
    { id: 2, menu: 'List2' },
    { id: 3, menu: 'List3' },
  ];

  <DropdownDouble menuList={menuList}/>
...

Icon

다양한 아이콘을 표현하기 위한 컴포넌트입니다.

예시 코드

import { Icon } from 'gangstarr-point-styler';
...
<Icon name={'add'} />
...

Item

ItemMember1

각 속성값에 따라 테두리, 이름, 트레이너명, 성별, 날짜를 나타냅니다.

예시 코드

...
import { ItemMember1 } from 'gangstarr-point-styler';
...
<ItemMember1
    fill='contained'
    name='김아무개'
    trainer='홍길동'
    gender='남'
    date='2023-00-00'
/>

ItemMember3

각 속성값에 따라 테두리, 이름, 연락처, 트레이너명, 날짜를 나타냅니다.

예시 코드

...
import { ItemMember3 } from 'gangstarr-point-styler';
...
<ItemMember3
    fill='contained'
    name='김아무개'
    phone='010-1234-5678'
    trainer='홍길동'
    date='2023-00-00'
/>

ItemStaff1

각 속성값에 따라 테두리, 이름, 연락처, 메모를 나타냅니다.

예시 코드

...
import { ItemStaff1 } from 'gangstarr-point-styler';
...
<ItemStaff1
    fill='contained'
    name='김아무개'
    phone='010-1234-5678'
    memo='메모 내용이 표시됩니다.'
/>

ItemRecord

각 속성값에 따라 테두리, 이름, 연락처, 메모를 나타냅니다.

예시 코드

...
import { ItemRecord } from 'gangstarr-point-styler';
...
<ItemRecord
    fill='contained'
    date='2023-00-00'
    memo='메모 내용이 표시됩니다.'
    trainer='홍길동'
/>

ItemTherapyCenter

각 속성값에 따라 테두리, 날짜, 설명을 나타냅니다.

예시 코드

...
import { ItemTherapyCenter } from 'gangstarr-point-styler';
...
<ItemTherapyCenter
    fill='contained'
    date='2023-00-00'
    description='운동 수행 영상'
/>

ItemMessage

각 속성값에 따라 테두리, 알림메시지, 날짜를 나타냅니다.

예시 코드

...
import { ItemMessage } from 'gangstarr-point-styler';
...
<ItemMessage
    fill='contained'
    memo='메모한 내용이 나타납니다'
    date='2023-00-00'
/>

Label

각 속성의 값에 따라 스타일링된 라벨을 노출합니다.

예시 코드

...
import { Label } from 'gangstarr-point-styler';
...

  <Label shape='rectangle' background='blue' color='green'>
    제니는 갱스타
  </Label>

...

Navigation

TopNavigation

통증 관리 시스템 상단에서 페이지 이동을 담당하는 NavigationBar 입니다.

예시 코드

import { TopNavigationBar } from 'gangstarr-point-styler';
...
 <TopNavigationBar
        tapMenuLists={[
          { tapName: '수강관리', path: 'about' },
          { tapName: '수강관리2', path: 'about2' },
          { tapName: '수강관리3', path: 'about3' },
          { tapName: '수강관리4', path: 'about4' },
          { tapName: '수강관리5', path: 'about5' },
        ]}
        userData={{ name: '최동환', label: '플랜이용중' }}
      />
...

BotNavigation

통증 관리 시스템 하단에서 페이지 이동을 담당하는 NavigationBar 입니다.

예시 코드

import { BotNavigationBar } from 'gangstarr-point-styler';
...
<BottomNavigationBar
        tabNameLists={{
          home: 'home',
          reservation: 'reservation',
          patient: 'patient',
          center: 'center',
          mypage: 'mypage',
        }}
        onClickHome={() => navigate('/home')}
        onClickReservation={() => navigate('/reserve')}
        onClickPatient={() => navigate('/partiend')}
        onClickCenter={() => navigate('/center')}
        onClickMypage={() => navigate('/mypage')}
      />
...

Picker

DatePicker

달력을 노출하고 사용자로 하여금 선택된 날짜를 YYYY.M.D 형식으로 저장합니다.

예시 코드

...
import { DatePicker } from 'gangstarr-point-style';
...

  const [isSelectedDate, setIsSelectDate] = useState<string>('');
  const [isShow, setIsShow] = useState<boolean>(false);

  ...

    <Button onClick={() => setIsShow(true)}>열기</Button>
    <>
      {isShow && (
        <DatePicker
          size='large'
          prevSelected={isSelectedDate}
          onClickConfirm={setIsSelectDate}
          onClosePicker={() => setIsShow(false)}
        />
      )}
    </>

...

TimePicker

모바일 스타일의 TimePicker를 노출하고, 사용자로 하여금 선택된 시간을 {hour: number, minute: number} 형식으로 저장합니다.

예시 코드

...
import { TimePicker } from 'gangstarr-point-style';
...

  const [selectTime, setSelectTime] = useState<IselectedTimeTypes | undefined>();
  const [isShow, setIsShow] = useState(false);

  ...

    <button onClick={() => setIsShow(true)}>열기</button>
    <>
      {isShow && (
        <TimePicker
          prevSelectedTime={selectTime}
          onClickConfirm={setSelectTime}
          onClosePicker={() => setIsShow(false)}
        />
      )}
    </>

...

PopupMenu

통증 관리 시스템 이용중 보여질 PopupMenu 입니다.

예시 코드

...
import PopupMenu from 'gangstarr-point-styler';
...
const menuName = [
  {
    id: 1,
    menu: '메뉴1',
    link: 'link1',
  },
  {
    id: 2,
    menu: '메뉴메뉴메뉴메뉴메뉴메뉴메뉴',
    link: 'link2',
  },
  {
    id: 3,
    menu: '메뉴3',
    link: 'link3',
  },
];

const [isVisible, setIsVisible] = useState(false);

const handlePopup = () => {
  return setIsVisible(true);
};
...
<Button onClick={handlePopup}>팝업 토글</Button>
<>
    {isVisible && (
      <PopupMenu
        menuLists={menuName}
        isVisible={isVisible}
        onClosePopup={() => setIsVisible(false)}
      />
    )}
</>

Tabs

최대 10개의 Tabs를 노출합니다. tabLists의 요소가 10개를 초과한다면 0 ~ 9번 인덱스의 요소를 노출합니다.

예시 코드

...
import { Tabs } from 'gangstarr-point-style';
...

  const tabLists = [
    { path: 'tab1', name: 'tab1', callback: () => { setCurrentTab('tab1') } },
    { path: 'tab2', name: 'tab2', callback: () => { setCurrentTab('tab2') } },
    { path: 'tab3', name: 'tab3', callback: () => { setCurrentTab('tab3') }  },
    { path: 'tab4', name: 'tab4', callback: () => { setCurrentTab('tab4') }  },
    { path: 'tab5', name: 'tab5', callback: () => { setCurrentTab('tab5') }  },
  ];
  const [currentTab, setCurrentTab] = useState('tab1');

  ...

    <Tabs tabLists={tabLists} currentTab={currentTab} />

  ...

TextField

사용자로부터 입력을 받을 수 있는 input 컴포넌트입니다. 필요에 따라 입력받은 값에 대해 validation을 해줄 수 있습니다. 그리고 validation 결과에 따른 메세지를 보여줄 수도 있습니다.

예시 코드

...
import { TextField } from 'gangstarr-point-style';
...

  const [inputValue, setInputValue] = useState('');
  const [isError, setIsError] = useState(false);

  {/* 유효성 검증 함수*/}
  const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
    if (e.target.value.length < 5) setIsError(true);  {/* 유효성 검증 조건*/}
    else setIsError(false);
  };

  ...

    <TextField
      id='textfield'
      title='타이틀'
      placeholder={'값을 입력해주세요.'}
      onChange={onChangeInput}
      value={inputValue}
      validate={true}
      isError={isError}
      customErrorMessage='에러 메시지'
      customSuccessMessage='성공 메시지'
      customInactiveMessage='인액티브 메시지'
    />

    ...

Thumbnails

비디오 또는 이미지의 썸네일을 보여주는 컴포넌트입니다.

예시 코드

...
import { Thumbnails } from 'gangstarr-point-styler';
...

  <Thumbnails
    src={이미지 주소}
    type='image'
    runningTime='12:30'
    state='delete'
    />

...

Typography

상황에 따라 사용하고 싶은 타이포 템플릿을 가져옵니다. font-family는 한글은 Pretendard, 영어는 Roboto를 기준으로 작성되었습니다.

예시 코드

<Headline>헤드라인</Headline>
<Title1>타이틀1</Title1>
<Title2>타이틀2</Title2>
<Title3>타이틀3</Title3>
<Title4>타이틀4</Title4>
<Title5>타이틀5</Title5>
<Title6>타이틀6</Title6>
<Body1>바디1</Body1>
<Body2>바디2</Body2>
<Body3>바디3</Body3>
<Body4>바디4</Body4>
<Caption1>캡션1</Caption1>
<Caption2>캡션2</Caption2>

SnackBar

통증 관리 시스템 이용중 보여질 SnackBar 입니다.

예시 코드 올바른 사용을 위해 반드시 아래의 형태로 작성해주시기 바랍니다.

import { SnackBar } from 'gangstarr-point-styler';
...
 const [snackbarMessage, setSnackbarMessage] = useState('');
...
<>
    {snackbarMessage && (
      <SnackBar
        description={snackbarMessage}
        time={3000}
        setSnackbarMessage={setSnackbarMessage}></SnackBar>
    )}
</>
...

Demo

데모사이트