type-error 해결 방법 질문
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가 들어갈 수 있는지 알고 싶습니다.
Answer 4
0
감사합니다! 일단 undefined 로 나눠지는거는 controls가 optional이기 때문인 것 같고, 자세한 구현은 제가 다음주쯤 한번 돌려보고 다시 공유드려볼게요!
0
에러가 reproduce가 되지 않아서 정확한 원인은 모르지만, 소스코드를 살펴보니 controls 가 optional이라서 type Control | undefined 가 되는 것 같습니다.
다만 깃헙 레포에는 type이 Control 이 아니라 ControlType 인걸로 되어있어서 내부 구현이 어떤식으로 구현되었는지는 파악이 안되네요 ㅠㅠ
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
컴포넌트를 어떻게 작성하셨는지도 올려주실 수 있나요?
1
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 섹션을 참조하거나, 스토리북 관련 커뮤니티 또는 질문&답변 포럼에서 유사한 문제를 경험한 다른 사용자들의 경험을 찾아보는 것도 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
스토리북에 대해서
0
57
1
Storybook 10에서 argTypes에 action 설정 시
0
74
1
storybook setup
0
86
2
실무 적용 관련해서 질문이 있습니다!
0
63
2
storybook 프로젝트 세팅 중 궁금한 점이 있습니다.
0
133
2
스토리북 테스트에 대한 질문
0
101
2
tailwind 4.x 버전 변경된 CSS 추출(?) 커맨드
1
207
2
스토리북 테마에 대해 질문 드립니다.
0
158
2
테일윈드를 안쓰고 스타일 컴포넌트만 사용하는 환경에서는요?
0
144
2
[질문 x 공유용] tailwind v4.0 으로 강의랑 다를 때 (import 다름, tailwind.config.js 없어짐 등)
6
484
2
react-toastify 를 storybook에 출력 시키기
0
181
1
react에서 modal & portal 사용시 에는 어떻게 작성해야될까요
0
374
3
tsconfig
0
180
1
vite 초기설정
0
344
2
스토리 내 args에서 에러가 발생합니다.
0
208
2
Nextjs에서 tailwind를 사용할 때
0
278
2
제공해주시는 Figma 색상 코드가 강의와 달라 글 남깁니다!
0
141
2
Visual Test
1
127
1
NavigationBar 배경색
0
129
1
defaultValue 질문 드립니다!
0
123
1
svg를 public 말고 src>assets안에 넣는다면 import를 어떻게해야하나요?
1
265
2
index.tsx 빌드 오류
0
371
2
tailwind css 코드 스플릿팅이 가능한가요?
0
279
1
StoryBook 관련 궁금 사항입니다.
1
260
1