해결된 질문
24.07.18 17:11 작성
·
130
1
import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import TagList from "../components/TagList";
// 버튼 컴포넌트의 메타 정보를 나타냄
const meta = {
// 경로
title: "List/TagList",
component: TagList,
parameters: {
layout: "centered",
},
tags: ["autodocs"],
argTypes: {
tagList: {
control: "array",
description: "태그 리스트",
docs: ["tag1", "tag2", "tag3"],
},
onTagClick: {
action: "clicked",
description: "버튼 클릭 이벤트",
},
},
args: {
onTagClick: fn(),
},
} satisfies Meta<typeof TagList>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
tagList: ["tag1", "tag2", "tag3"],
},
};
위와 같이 코드를 작성했을 떄, tagList의 control 부분에서 타입 에러가 발생합니다.
TS2322: Type "array" is not assignable to type Control | undefined
어쨰서 undefined가 들어갈 수 있는지 알고 싶습니다.
답변 4
0
2024. 07. 21. 22:21
감사합니다! 일단 undefined
로 나눠지는거는 controls
가 optional이기 때문인 것 같고, 자세한 구현은 제가 다음주쯤 한번 돌려보고 다시 공유드려볼게요!
0
2024. 07. 20. 16:15
"@chromatic-com/storybook": "^1.6.1",
"@storybook/addon-a11y": "^8.2.4",
"@storybook/addon-essentials": "^8.2.4",
"@storybook/addon-interactions": "^8.2.5",
"@storybook/addon-links": "^8.2.4",
"@storybook/addon-onboarding": "^8.2.4",
"@storybook/blocks": "^8.2.4",
"@storybook/builder-vite": "^8.2.4",
"@storybook/react": "^8.2.4",
"@storybook/react-vite": "^8.2.4",
"@storybook/test": "^8.2.5",
"@storybook/test-runner": "^0.19.1",
스토리북 관련 버전은 위와 같습니다!
0
2024. 07. 19. 04:39
import TagButton from "./TagButton.tsx";
import { useState } from "react";
// TagList가 제네릭이긴한데 항상 string이어야 한다는 것.
interface ITagListProps<T extends string> {
tagList: T[];
// selectedTag: string;
onTagClick: (tag: T) => void;
}
export default function TagList<T extends string>({
tagList,
// selectedTag,
onTagClick,
}: ITagListProps<T>) {
const [selectedTag, setSelectedTag] = useState<T>(tagList[0]);
return (
// event bubling 자식 태그에서 이벤트가 발생했을떄 부모태그가 알 수 있게해줌. tagButton이 받아오는 이벤트를 div태그에서 받아오게 처리
<div
className="flex gap-x-4"
onClick={(event) => {
const eventTarget = event.target as HTMLButtonElement;
const tag = eventTarget.textContent as T;
onTagClick(tag);
}}
>
{tagList.map((tag) => (
<TagButton
key={tag}
isChecked={tag === selectedTag}
onClick={() => setSelectedTag(tag)}
>
{tag}
</TagButton>
))}
</div>
);
}
이렇게 작성했습니다!!
0
안녕하세요, 인프런 AI 인턴입니다.
김용민님의 질문에 대한 답변으로, 유사한 질문의 답변을 찾았으며 이는 스토리북에서 argTypes
의 control
프로퍼티를 정의하면서 발생하는 타입 에러와 관련있는 내용입니다. 질문의 내용과 정확히 일치하는 내용을 찾지는 못했으나, 스토리북의 control
타입과 관련된 설정에 오류가 발생한 경우를 대비한 답변을 찾았습니다.
해당 에러(TS2322: Type "array" is not assignable to type Control | undefined
)는 argTypes
의 control
속성에 대해 array
타입으로 할당하려 할 때 타입스크립트에서 예상하는 Control
타입이나 undefined
와 일치하지 않기 때문에 발생합니다. control
속성에 사용할 수 있는 올바른 타입을 명시하거나, 구성 방식을 조정하여 이 문제를 해결할 수 있습니다.
질문에서 언급한 구체적인 타입 에러 해결 방안에 대해서는 아래의 링크에서 해결 방법이 제시되어 있을 수 있습니다. 스토리북에서 argTypes
의 구성 시 발생할 수 있는 일반적인 문제와 해결 방안을 검토해 보시는 것이 좋습니다.
argTypes
설정과 이벤트 핸들러 등 스토리의 작성시 발생할 수 있는 일반적인 질문과 답변을 포함하고 있습니다. 이 문서는 직접적으로 control
의 타입에 관해 다루지 않지만, argTypes
및 스토리북 설정에 관해 전반적인 이해를 돕습니다.해당 정보가 질문의 해결에 완전히 일치하지 않을 수 있으므로, 추가적인 구체적인 해결 방안을 찾기 위해서는 스토리북 공식 문서의 argTypes
섹션을 참조하거나, 스토리북 관련 커뮤니티 또는 질문&답변 포럼에서 유사한 문제를 경험한 다른 사용자들의 경험을 찾아보는 것도 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
2024. 07. 21. 22:28
친절한 답변 감사합니다!!!!