2023.06.25(Sun.) <React 공용 컴포넌트에 관한 고찰 1 : Button>

제 코드가 어디선가 유출되고 있나 봅니다. 똑같군요.

1. 문제의 발단

• 디자이너님과 함께 정형화되지 않았던 스타일 가이드를 다시 고치고, 공용 스타일로 사용되지 않던 컴포넌트들을 다시 통일시키고 있다.
• 스타일도 통일 시키고, 그에 따라 필요한 인자들을 넘겨주어 정형화되고 완벽한 어디에도 사용할 수 있는 컴포넌트를 만드는 과정에서 깨달은 것들을 적어본다.

2. Button Size

• 가장 기본적으로 사이즈로 나눌수 있다.

width는 fit, height를 3가지 종류로 나눴다.

const Button = styled('button', {
  base: css`
    ${apply`border-1 rounded-[4px] px-4 bg-[#2ecc71] border-2 text-white bg-cyan-500 shadow-lg shadow-cyan-500/50`};
  `,
  variants: {
    size: {
      small: `h-[33px]`,
      medium: `h-[41px]`,
      large: `h-[49px]`,
    },
  },
  defaults: {
    size: 'large',
  },
});

export default function Projects() {
  return (
    <div className={tw`flex justify-center items-center gap-2 mt-[50vh]`}>
      <Button size='small'>Small</Button>
      <Button size='medium'>Medium</Button>
      <Button>Default Large</Button>
    </div>
  );
}

• 가장 기본적인 스타일만을 넣은 버튼이다.
• 대부분 2 ~ 3개 정도의 버튼 스타일을 쓴다.

3. outlined

import { styled } from '@twind/react';
import { apply, tw } from 'twind';
import { css } from 'twind/css';

const Button = styled('button', {
  base: css`
    ${apply`border-1 rounded-[4px] px-4 bg-[#2ecc71] border-2 text-white bg-cyan-500 shadow-lg shadow-cyan-500/50`};
  `,
  variants: {
    size: {
      small: `h-[33px]`,
      medium: `h-[41px]`,
      large: `h-[49px]`,
    },
    variant: {
      normal: ``,
      outlined: `border-[#2ecc71] text-[#2ecc71] bg-white`,
    },
  },
  defaults: {
    variant: 'normal',
    size: 'large',
  },
});

export default function Projects() {
  return (
    <div className={tw`flex justify-center items-center gap-2 mt-[50vh]`}>
      <Button>Normal</Button>
      <Button variant='outlined'>Outlined</Button>
    </div>
  );
}

• 색상 반전의 느낌으로 스타일링을 바꾼다.
• 기본값을 잘 넘겨줘야 한다.

4. hover

import { styled } from '@twind/react';
import { apply, tw } from 'twind';
import { css } from 'twind/css';

const Button = styled('button', {
  base: css`
    ${apply`border-1 rounded-[4px] px-4 bg-[#2ecc71] border-2 text-white bg-cyan-500 shadow-lg shadow-cyan-500/50`};
  `,
  variants: {
    size: {
      small: `h-[33px]`,
      medium: `h-[41px]`,
      large: `h-[49px]`,
    },
    variant: {
      normal: ``,
      outlined: `border-[#2ecc71] text-[#2ecc71] bg-white`,
      hover: `transition duration-150 ease-out hover:(ease-in bg-red-500)`,
    },
  },
  defaults: {
    variant: 'normal',
    size: 'large',
  },
});

export default function Projects() {
  return (
    <div className={tw`flex justify-center items-center gap-2 mt-[50vh]`}>
      <Button>Normal</Button>
      <Button variant='hover'>Hover</Button>
    </div>
  );
}

• hover를 넣어주고 똑같이 만들어 준다.
• outline에 hover도 가능하다.

import { styled } from '@twind/react';
import { apply, tw } from 'twind';
import { css } from 'twind/css';

const Button = styled('button', {
  base: css`
    ${apply`border-1 rounded-[4px] px-4 bg-[#2ecc71] border-2 text-white bg-cyan-500 shadow-lg shadow-cyan-500/50`};
  `,
  variants: {
    size: {
      small: `h-[33px]`,
      medium: `h-[41px]`,
      large: `h-[49px]`,
    },
    variant: {
      normal: ``,
      outlined: `border-[#2ecc71] text-[#2ecc71] bg-white`,
    },
    isHover: {
      normal: ``,
      true: `transition duration-150 ease-out hover:(ease-in bg-red-500)`,
    },
  },
  defaults: {
    variant: 'normal',
    size: 'large',
  },
});

export default function Projects() {
  return (
    <div className={tw`flex justify-center items-center gap-2 mt-[50vh]`}>
      <Button>Normal</Button>
      <Button variant='outlined' isHover>
        Hover
      </Button>
    </div>
  );
}

• props 종류를 2개로 찢은 다음에 2개 다 넣어준다.

5. 소감

• 생각해 보니 button에 스타일 제외, 다른 속성과 이벤트를 넣을 것이 없다..! (onClick이 전부 아닌가...?)
• 이후에 모달, 팝업, warring 등에는 다양한 인자를 props로 넘겨 사용할 수 있을 것이다.