Storybook

Storybook에서 재사용할 UI 구성 요소를 찾고 변경에 맞춰 표시 예시를 만들거나 갱신합니다. 테스트를 실행하고 결과를 검토용으로 공개합니다.

• UI 변경에 쓸 기존 구성 요소를 찾습니다
• 구성 요소 변경에 맞춰 표시 예시를 갱신합니다
• 스토리 테스트를 실행합니다

Storybook에서 프로젝트의 기존 UI 구성 요소와 설정 항목, 사용 예시를 확인합니다. 사용법 질문에 답하고 중복 구현 전에 재사용 가능 여부를 판단합니다.

• 기존 UI 구성 요소를 찾습니다
• 구성 요소의 설정 항목과 사용 예시를 확인합니다
• 구성 요소 사용법을 질문합니다

Storybook의 주 버전과 부 버전 출시를 위해 사전 출시 변경을 모으고 주요 업데이트를 고릅니다. 전체 변경 목록과 함께 CHANGELOG.md에 작성합니다.

• Storybook 부 버전 출시를 준비합니다
• 주 버전의 주요 변경을 요약합니다
• 사전 출시 버전의 변경을 모읍니다

독자와 목적에 맞춰 Storybook의 /docs 문서를 검토하고 개선하거나 새로 작성합니다. 구성과 예시 수정부터 표기 정리, 문서 전략 상담까지 다룹니다.

• 설명 페이지의 구성과 예시를 개선합니다
• 새 기능의 문서 초안을 작성합니다
• 페이지 유형과 목차를 논의합니다

이미 설치된 Storybook을 공식 업그레이드 절차에 따라 11.0 이상으로 업데이트합니다. 최신 안정 버전이 11.0 미만이면 11.0 알파 버전을 선택합니다.

• 기존 Storybook 업데이트
• Storybook을 11.0 이상으로 통일
• 안정 버전이 11.0 미만일 때 알파 버전 사용

QA 테스트에서 발견한 GitHub 이슈와 PR을 릴리스 추적 및 버그 심각도 라벨로 정리합니다. 여러 항목에 라벨을 일괄 적용할 수 있습니다.

• QA 발견 사항을 릴리스별로 정리
• 버그 심각도 분류
• 여러 이슈와 PR에 라벨 적용

Plausible의 Storybook 문서 방문 데이터를 바탕으로 최소 지원 브라우저 버전을 검토합니다. 근거와 후보를 제시하고 승인 후 설정과 문서를 갱신해 PR을 만듭니다.

• 실제 방문 데이터를 바탕으로 지원 범위를 검토합니다
• 버전별 이용 비율과 후보를 검토하고 승인합니다
• 지원 설정과 마이그레이션 안내를 함께 갱신합니다

PR 제목과 설명을 커밋 및 실제 변경 사항과 대조합니다. 중요한 변경 누락이나 오래된 내용을 찾아 수정안을 제시하고, 사용자 동의 후 갱신합니다.

• PR 설명과 실제 구현이 일치하는지 확인합니다
• 설명에서 빠진 주요 변경 사항을 보완합니다
• 현재 작업과 맞지 않는 PR 제목을 갱신합니다

Storybook의 특정 브랜치에 해당하는 시험용 패키지를 찾고 필요하면 게시합니다. 게시 상태를 확인하고 설치나 업데이트에 쓸 명령을 안내합니다.

• 특정 브랜치의 시험용 패키지 찾기
• 포크 풀 리퀘스트의 시험용 패키지 게시하기
• 게시 상태와 설치 명령 확인하기

반복되는 수정과 주의 사항을 코드 정적 검사, 실행 중 검사, 자동화 스크립트 등의 방지 장치에 반영하여 같은 실수가 다시 발생하지 않도록 돕습니다.

• 반복되는 구현 실수를 방지합니다
• 반복 지시를 자동 검사로 바꿉니다
• 수정 내용을 메모나 규칙으로 정리합니다

프로젝트의 Storybook 관련 패키지를 지정 버전으로 함께 업그레이드합니다. 안정 버전이나 개발 빌드를 사용해 외부 앱에서 변경 사항과 오류를 검증합니다.

• 외부 앱에서 개발 빌드를 시험합니다
• 특정 버전에서 오류를 재현합니다
• 관련 패키지를 최신 안정 버전으로 올립니다

Storybook이 없는 프로젝트에 최신 안정 버전을 확인해 11.0 이상의 버전을 새로 설치합니다. 설치 후 별도 스킬을 호출해 프로젝트별 설정으로 이어갑니다.

• 프로젝트에 Storybook 처음 설치
• 안정 버전 현황에 따른 설치 버전 선택
• 설치 후 프로젝트별 설정으로 전환

Storybook이 없는 프로젝트에 처음 설치합니다. 안정 버전을 확인해 설치 태그와 패키지 관리 도구에 맞는 명령을 선택하고 별도 설정 스킬로 연결합니다.

• 프로젝트에 Storybook 처음 설치
• 안정 버전에 따라 설치 태그 선택
• 사용 중인 패키지 관리 도구로 설치

GitHub 풀 리퀘스트의 미해결 검토 의견을 하나씩 정리하고, 사용자가 선택한 방침에 따라 코드 수정, 답글, 해결 상태 변경을 진행합니다.

• PR의 미해결 검토 의견을 처리합니다
• 수정, 답글, 건너뛰기를 선택합니다
• 중복되는 검토 의견을 묶어 처리합니다

GitHub PR을 체크아웃하고 lint 및 TypeScript 오류를 수정한 뒤 커밋하고 푸시합니다. 포크의 PR도 지원하며 타입 검사를 반복해 수정을 확인합니다.

• PR의 lint 오류 수정
• PR의 TypeScript 오류 수정
• 포크에서 만든 PR 수정

Storybook 실행부터 첫 스토리 표시까지 측정합니다. 서버 응답과 브라우저 렌더링 시간을 나누고 반복 결과를 집계해 버전이나 기능 플래그를 비교합니다.

• 첫 스토리 표시까지 시작 시간 측정
• 버전 및 기능 플래그 비교
• 시작 시간 반복 측정과 집계

Storybook이 설치된 프로젝트에서 실제 컴포넌트를 표시할 preview 파일과 스토리를 준비합니다. 설치 상태와 지원 버전을 확인한 뒤 설정을 진행합니다.

• 설치된 Storybook의 표시 설정을 준비합니다
• 실제 컴포넌트를 보여 주는 스토리를 작성합니다
• 설정 전에 필요한 버전 조건을 확인합니다

이미 설치된 Storybook에 작동하는 preview 파일과 실제 컴포넌트를 표시하는 스토리를 준비하여 컴포넌트의 표시 상태를 확인할 환경을 구성합니다.

• 기존 Storybook의 표시 설정을 구성합니다
• 실제 컴포넌트의 스토리를 추가합니다
• 설정 전에 지원 버전을 확인합니다

기존 Storybook을 11.0 이상으로 업그레이드합니다. 공식 가이드를 확인하며, 최신 안정 버전이 11.0 미만이면 11.0 알파 버전을 선택합니다.

• 기존 Storybook을 업그레이드합니다
• Storybook 11.0 이상 요구를 충족합니다
• 안정 버전이 없을 때 알파로 업그레이드합니다

현재 브랜치에서 기존 템플릿에 맞는 초안 풀 리퀘스트를 만듭니다. 변경 사항과 기준 브랜치를 확인하고 설명, 테스트 항목, 라벨을 정리합니다.

• 현재 브랜치에서 초안 풀 리퀘스트 만들기
• 템플릿에 변경 내용과 테스트 정보 채우기
• 단계별 풀 리퀘스트의 비교 기준 확인하기

Storybook 규칙에 맞춰 변경 사항을 검토받을 초안 풀 리퀘스트를 만듭니다. 제목, 필수 라벨, 본문 템플릿과 수동 테스트 절차를 정리합니다.

• Storybook 변경 사항을 검토에 제출하기
• 범주, 지속적 통합, 품질 확인 라벨 선택하기
• 재현 가능한 수동 테스트 절차 작성하기

Storybook 본체나 애드온을 수정한 뒤 관련 패키지를 다시 빌드하고 내부 UI를 재시작합니다. 실행 주소를 안내하고 요청에 따라 관련 스토리의 UI 리뷰를 표시합니다.

• Storybook 내부 코드 수정 후 재빌드
• 내부 Storybook UI 재시작
• UI 변경과 관련된 스토리 리뷰

Create and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native components, configuring Storybook addons (controls, actions, backgrounds, notes), setting up argTypes, decorators, parameters, or working with portable stories for testing. Applies to any task involving @storybook/react-native story authoring.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Set up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a Re.Pack rspack/webpack config. Covers Expo, Expo Router, plain React Native CLI, and Re.Pack setups.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.