10/23

tab컴포넌트

• scss함수 사용하기 import { rgba } from 'polished

• 색을 확장하려는데 투명도도 자동으로 상대적으로 지정하고 싶다 - scss rgb함수 사용

• 변하는 사이즈만큼 이동하고 싶다.. width값을 기준으로 하지 말고 좌표값으로 해야할듯
  =>transform translate 100%사용

• props을 관리하는 게 너무 어렵다. 확장성을 얼마나 ?

storybook

디폴트값 엘리먼트에 넣어주면 control이 안된다

import Tab from '@components/domain/Tab';
import { Common } from '../../../style/common';

export default {
  title: 'Component/Tab',
  component: Tab,
  argTypes: {
    backgroundColor: {
      defaultValue: Common.colors.background_menu,
      control: { type: 'color' },
    },
    pointColor: {
      defaultValue: Common.colors.primary,
      control: { type: 'color' },
    },
    shadowStyle: {
      defaultValue: Common.shadow.menu,
      control: { type: 'text' },
    },
  },
};

export const Default = args => {
  return (
    <Tab {...args}>
      <Tab.Item title="오늘의 카드" index="0"></Tab.Item>
      <Tab.Item title="나의 카드" index="1"></Tab.Item>
      <Tab.Item title="즐겨찾기" index="2"></Tab.Item>
    </Tab>
  );
};

propTypes

Tab.propTypes = {
  children: PropTypes.node.isRequired, // 필수 값일 때 isRequired붙여준다
  active: PropTypes.bool,
  backgroundColor: PropTypes.string.isRequired,
  pointColor: PropTypes.string.isRequired,
  shadowStyle: PropTypes.string,
};

// 둘 중 하나일 때
PropTypes.oneOfType([PropTypes.number, PropTypes.string])

defaultProp

// props을 넣어주지 않아도 자동으로 props에 속하게 하고 싶을 때 사용

TabItem.defaultProps = {
  __TYPE: 'Tab.Item',
};

수치 속성

// 수치 속성은 이렇게 텍스트로 들어올 때와 숫자로 들어올 때 모두 처리해줘야한다

width: ${({ width }) => {
    return typeof width === 'number' ? `${width}px` : width;
  }};
  height: ${({ height }) => {
    return typeof height === 'number' ? `${height}px` : height;
  }};
  padding: 8px 6px;
  font-size: ${({ fontsize }) => {
    return typeof fontsize === 'number' ? `${fontsize}px` : fontsize;
  }};