[React - Error Handling] Storybook 적용 버튼에 onClick 이벤트가 적용되지 않는 이슈 🛠

👀 Error

styled-components만을 활용하여 만든 버튼 컴포넌트와 스토리북을 적용한 별도의 Button.stories.js 파일을 연결한 후, 부모 컴포넌트에서 이 버튼 컴포넌트에 onClick 이벤트를 적용하려 했지만 이벤트가 아예 적용되지 않는 현상이 발생했다,,

storybook을 적용하지 않은 기존의 버튼 컴포넌트에 onClick 이벤트를 적용했을 땐 따로 설정해주지 않아도 이벤트가 잘 적용되어서 storybook 적용 버튼 컴포넌트에 따로 뭘 설정해줄 생각을 하지 않아서 발생한 에러였다.

🤹‍♀️ Solving

기존의 버튼 컴포넌트에서 .stories 파일로 내보낼 때 onClick 이벤트도 함께 내보내주면 해결 가능한거였음,, so 간단,,😵‍💫

// Button.js
import styled from "styled-components";

export const ButtonPrimary = styled.button`
  color: ${(props) => props.color || "#000000"};
  background: ${(props) => props.bgc || "#ffffff"};
  width: ${(props) => props.width || "auto"};
  margin: ${(props) => props.margin || "none"};

  &:hover {
    background-color: ${(props) => props.hoverbgc || "#e5e5e5"};
  }
`;

const Button = ({ text, color, bgc, width, margin, hoverbgc, onClick }) => {
  return (
    <ButtonPrimary
      color={color}
      bgc={bgc}
      width={width}
      margin={margin}
      hoverbgc={hoverbgc}
      onClick={onClick} // <- here!!
    >
      {text}
    </ButtonPrimary>
  );
};

export default Button;

// Button.stories.js
import Button from "../components/atoms/Button";

export default {
  title: "atoms/Button",
  component: Button,

  argTypes: {
    color: { control: "color" },
    bgc: { control: "color" },
    width: { control: { type: "text" } },
		margin: { control: "text" },
    hoverbgc: { control: "color" },
		text: { control: "text" },
    onClick: { action: "clicked" }, // <- here!!
  },
};

export const StorybookButton = (args) => <Button {...args} />;