storybook
-
7. 디자인시스템 - svg 및 alias 설정Project/Figma+Storybook 2023. 11. 24. 11:29
1. svg 설정 (Component 형태로 사용가능하게) 1.1. storybook 설정 사전설치 $ yarn add --dev @svgr/webpack $ yarn add --dev url-loader main.ts # .storybook/main.ts import type { StorybookConfig } from '@storybook/react-webpack5'; import path from 'path'; ... const config: StorybookConfig = { ... // webpackFinal을 통해 Webpack 설정을 변경 webpackFinal: async (config) => { if (!config.module || !config.module.rules) { return..
-
6. 디자인시스템 - 샘플 Component 제작Project/Figma+Storybook 2023. 11. 20. 16:53
이제 본격적으로 컴포넌트를 제작해 보자! Figma에 생성된 Component를 Storybook으로 옮기는 과정을 정리해 둔다. 좀더 좋을 방법이 있다면 계속 개선해 나갈 예정이다. 1. 공통 scss 작성 _variables.scss : css 변수 모음 ... $color-global-mint90: #003B40 !default; $color-global-mint80: #004C53 !default; $color-global-mint70: #006D78 !default; ... 2. Figma -> Storybook Compoent 작성 2.1. Figma Code -> Anima Figma to Code 플러그인 중에서 필자가 구성한 Storybook에서는 Anima가 제일 유사하여 선택하고 진행..
-
4. 디자인시스템 - Storybook 및 Rollup scss 설정Project/Figma+Storybook 2023. 11. 15. 16:48
1. storybook에 scss 설정 Storybook은 Sass를 기본적으로 지원하지 않는고 실행 하거나 스크립트를 작성할 때 webpack을 사용하여 모든 코드를 묶는다. sass를 추가하려면 몇 가지 패키지를 추가하고 webpack 구성을 확장해야한다. 1.1. Sass 지원 추가를 위한 개발 종속성 추가 (참고) $ yarn add --dev css-loader style-loader resolve-url-loader sass sass-loader 1.2. addon-styling-webpack 추가 (참고) $ yarn add --dev @storybook/addon-styling-webpack 1.3. main.ts 설정 import type { StorybookConfig } from "@..
-
2. 디자인시스템 - Storybook chromatic 배포 및 git 연동Project/Figma+Storybook 2023. 11. 13. 10:30
1. GitHub에 소스 배포 (참고) 1.1. 원격저장소 만들기 1.2. 로컬 저장소 -> 원격 저장소 푸시 # gitignore 파일 생성 $ npx add-gitignore storybookjs,react,yarn # 저장소 초기화 $ git init # git이 관리할 대상으로 파일 등록 $ git add . # 파일상태 확인 $ git status # 변경 내역에 대한 메모와 함께 커밋 $ git commit -m "init commit" # 원격 저장소 추가 $ git remote add origin [원격저장소 주소] # 연결된 저장소 확인 $ git remote -v # 현재 브랜치 이름 확인 $ git branch # 원격 저장소 origin에 master 브랜치를 푸시한다. $ git ..
-
1. 디자인시스템 - Rollup을 사용하여 Storybook npm 배포 및 사용Project/Figma+Storybook 2023. 11. 10. 10:27
이번분기 최대 목표는 디자인 시스템을 어떻게 만들것이가? 개발 및 디자인팀과의 협업을 어떻게 할것인가에 대한 프로토타입 정도가 목적임으로 방향을성을 찾기위한 테스트 정도록만 작업하도록 해보겠다. 작업방향 및 고려사항 npm에 올려 사용할 목적임으로 번들을 최소화 (Create React App 미사용) Storybook을 컴포넌트 관리 및 chromatic 사용 검토 (Storybook 전용 서버 검토) TypeScript 기반의 React 개발환경 구축 및 TypeScript가 아닌것도 사용 가능하도록 Atomic 하게 만들되 각 프로젝트에서는 어떤식으로 사용할 것인가 Page별 Component들은 어떤식으로 관리할 것인가? Figma에서 수작업이 아닌 자동으로 컴포넌트를 쉽게 가져올수 있는 방법 c..
-
리액트 & 스토리북 설치Project/Figma+Storybook 2023. 10. 26. 15:05
https://storybook.js.org/docs/react/get-started/install?ref=chromaticblog.ghost.io Install Storybook Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org 리액트 프로젝트 생성 $ npx create-react-app test-design-system --template ko 스토리북 등록 $ cd test-design-sy..
-
디자인 시스템 & 스토리북 & 피그마란?Project/Figma+Storybook 2023. 10. 25. 17:16
제일 많이 쓰이는 `스토리북`+`피그마` 조합으로 리액트 컴포넌트용 디자인 시스템 구축 과정을 기록해 보자! 아자아자! Bard. 디자인 시스템 디자인 시스템은 재사용 가능한 UI 컴포넌트, 스타일 가이드, 디자인 원칙 등을 포함하는 시스템입니다. 디자인 시스템을 사용하면 개발자는 일관되고 품질이 높은 사용자 인터페이스를 보다 쉽게 구축할 수 있습니다. Bard. 스토리북 https://storybook.js.org/ Storybook: Frontend workshop for UI development Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for ..