인프런 커뮤니티 질문&답변
작성한 질문수
type-error 해결 방법 질문
해결된 질문
작성
·
377
2
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
감사합니다! 일단 undefined 로 나눠지는거는 controls가 optional이기 때문인 것 같고, 자세한 구현은 제가 다음주쯤 한번 돌려보고 다시 공유드려볼게요!
0
"@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
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 섹션을 참조하거나, 스토리북 관련 커뮤니티 또는 질문&답변 포럼에서 유사한 문제를 경험한 다른 사용자들의 경험을 찾아보는 것도 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
친절한 답변 감사합니다!!!!