storybook

최신 Component Story Format 3.0 사용. 더 간결하고 타입 안전. 컴포넌트 Props를 Args로 정의하여 Controls 패널에서 인터랙티브하게 조작 가능. title 을 문자열로 직접 명시하면 타입 안전하지 않고, 컴포넌트 이름/경로 변경 시 싱크가 깨지기 쉬움. Storybook은 파일 경로에서 사이드바 계층을 자동 추론하므로 title 생략. satisfies 키워드로 타입 체크와 타입 추론 동시 활용. 공통 래퍼나 Provider를 Decorator로 적용. Storybook은 컴포넌트 함수의 TypeScript 타입에서 최적의 argType을 자동 적용함. 수동으로 덮어쓰면 컴포넌트 타입 변경 시마다 argType 싱크를 맞춰야 하므로 타당한 이유 없이 argType을 직접 지정하지 않음 . 수동 지정이 타당한 경우: 원칙: 대부분의 argType은 Storybook이 컴포넌트 타입에서 자동 추론. 아래는 자동 추론이 부적절할 때만 사용. 기본값은 argTypes.defaultValue 가 아닌 args 에서 선언. - 기본값은 args 에서 선언 (❌ argTypes.defaultValue 사용 금지). Meta의 args 에 기본값을 두면 Controls 패널에서 자동으로 해당 값이 선택됨 - 여러 스토리에 공통으로 필요한 args는 Meta(컴포넌트) 수준에서 선언 하고, 개별 스토리에서는 차이점만 오버라이드 - ReactNode 타입인데 Controls에서 텍스트 입력이 필요할 때 → control: 'text' - Compound pattern (컴포넌트를 여러 개 export) → argTypes로 명시 - 특정 스토리에서 항상 고정되어야 하는 prop → control: false