인프런 커뮤니티 질문&답변

'{ alt: string; iconPath: string; }' 형식은 'Partial<{ alt: string; iconPath: string; onClick: (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void; }> & { alt: string; iconPath: string; onClick: (e: MouseEvent<...>) => void; }' 형식에 할당할 수 없습니다.
'onClick' 속성이 '{ alt: string; iconPath: string; }' 형식에 없지만 '{ alt: string; iconPath: string; onClick: (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void; }' 형식에서 필수입니다.ts(2322)
이런 에러가 뜹니다!

IconButton컴포넌트 파일의 코드를 올려주실 수 있나요? 스토리북 깃헙 이슈에 보면 함수의 타입이 onClick을 optional 로 만드는데 영향을 미치는 것 같습니다.

https://github.com/storybookjs/storybook/issues/23068

위 thread를 한번 읽어보시고, maintainer가 작성한 아래 답변을 확인해주세요

https://github.com/storybookjs/storybook/issues/23068#issuecomment-1634240026

 onClick?: React.MouseEventHandler<HTMLButtonElement>;

버튼컴포넌트에서 인터페이스로 정의한 클릭이벤트를 옵셔널 타입으로 바꾸었더니 해결되었습니다!!

답변 달아주셔서 감사합니다.

진형님 안녕하세요!

다시보니 스토리북 버전 업그레이드때문에 발생하는 문제네요.

버튼에서 onClick 을 optional로 두면 이벤트 핸들링 기능이 없는 버튼이 될 가능성도 있어서 적합하지 않은 것 같습니다.

업데이트된 문서를 보면 버튼 컴포넌트의 스토리를 아래와 같이 정의합니다.

import { fn } from "@storybook/test";
import { Button } from "./Button";

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    backgroundColor: { control: "color" },
  },
  args: { onClick: fn() },
};

onClick 을 mocking해서 fn()으로 지정해주시면 개별 스토리에서 onClick을 선언하지 않으셔도 됩니다. 위처럼 진행하시는게 더 적합한 컴포넌트 디자인인 것 같네요

수정하고 잘 작동하는 것까지 확인했습니다.

뭔가 찜찜한 느낌이 있었는데 잘 해결된거 같아서 감사합니다!!