강의

멘토링

로드맵

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

yho79555님의 프로필 이미지
yho79555

작성한 질문수

실무에 바로 적용하는 스토리북과 UI 테스트

TextField의 IconButton 컴포넌트와 .svg 관리방법

svg를 public 말고 src>assets안에 넣는다면 import를 어떻게해야하나요?

해결된 질문

작성

·

265

1

현재는 public에서 아이콘을 가져오는데 assets에 가져올때는 어떻게 하나요?

 

 

import type { Meta, StoryObj } from "@storybook/react";
import { IconButton } from "../../components/IconButton";
const meta = {
  title: "Buttons/IconButton",
  component: IconButton,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    alt: { control: "text", description: "아이콘의 대체 텍스트" },
    iconPath: {
      control: "text",
      description: "아이콘의 경로",
      defaultValue: "",
    },
    onClick: { action: "clicked", description: "아이콘 클릭 시 호출되는 함수" },
  },
} satisfies Meta<typeof IconButton>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    alt: "아이콘",
    iconPath: "ic-delete-dark.svg",
    onClick: () => {},
  },
};

 

퀴즈

61%나 틀려요. 한번 도전해보세요!

누적 레이아웃 이동(CLS)은 무엇이며 왜 최소화하는 것이 중요할까요?

코드 스타일을 유지하는 기준일까요?

컴포넌트 로딩 속도를 향상시키는 기법일까요?

예상치 못한 레이아웃 변경을 측정하며, 시각 안정성 및 SEO에 영향을 줄까요?

라이브러리 간 호환성을 확보하는 방법일까요?

답변 2

1

yho79555님의 프로필 이미지
yho79555
질문자

강의에 있었네요

0

제이쓴님의 프로필 이미지
제이쓴
지식공유자

확인 감사합니다!

yho79555님의 프로필 이미지
yho79555

작성한 질문수

질문하기