Test Project
-
7. 디자인시스템 - svg 및 alias 설정Test 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 제작Test 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가 제일 유사하여 선택하고 진행..
-
5. 디자인시스템 - ESLint와 Prettier 설정Test Project/Figma+Storybook 2023. 11. 17. 16:46
중복되는 글인듯 하여 링크로 대체한다. https://dchkang83.tistory.com/226 ESLint와 Prettier 설정하기 1. ESLint 설치 및 사용방법 1.1. ESLint 설치 $ yarn add -D \ eslint \ @typescript-eslint/eslint-plugin \ @typescript-eslint/parser \ eslint-config-airbnb \ eslint-plugin-import \ eslint-plugin-jsx-a11y \ eslint-plugin-react \ eslint-plugin-react-ho dchkang83.tistory.com
-
4. 디자인시스템 - Storybook 및 Rollup scss 설정Test 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 "@..
-
3. 디자인시스템 - npm에서 받아서 활용해보기Test Project/Figma+Storybook 2023. 11. 13. 10:46
앞서 설정한 디자인 시스템의 npm을 storybook 문서를 활용하여 테스트를 진행해 보자. 1. 디자인시스템 - Rollup을 사용하여 Storybook npm 배포 및 사용 2. 디자인시스템 - Storybook chromatic 배포 및 git 연동 3. 디자인시스템 - npm에서 받아서 활용해보기 3.1. 리액트 설치 $ npx create-react-app design-system-test-app --template typescript $ yarn create react-app design-system-test-app --template typescript 3.2. npm 라이브러리 설치 $ yarn add @djgundam/react-storybook-rollup-starter 3.3. 확인..
-
2. 디자인시스템 - Storybook chromatic 배포 및 git 연동Test 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 배포 및 사용Test Project/Figma+Storybook 2023. 11. 10. 10:27
이번분기 최대 목표는 디자인 시스템을 어떻게 만들것이가? 개발 및 디자인팀과의 협업을 어떻게 할것인가에 대한 프로토타입 정도가 목적임으로 방향을성을 찾기위한 테스트 정도록만 작업하도록 해보겠다. 작업방향 및 고려사항 npm에 올려 사용할 목적임으로 번들을 최소화 (Create React App 미사용) Storybook을 컴포넌트 관리 및 chromatic 사용 검토 (Storybook 전용 서버 검토) TypeScript 기반의 React 개발환경 구축 및 TypeScript가 아닌것도 사용 가능하도록 Atomic 하게 만들되 각 프로젝트에서는 어떤식으로 사용할 것인가 Page별 Component들은 어떤식으로 관리할 것인가? Figma에서 수작업이 아닌 자동으로 컴포넌트를 쉽게 가져올수 있는 방법 c..
-
yarn storybook error const stringWidth = require('string-width')Test Project/Figma+Storybook 2023. 11. 9. 17:47
react에 rollup.js를 설정하고 storybook을 설치하고 $ yarn storybook 했더니 에러가 발생하였고, 해결방식을 정리해 본다. 이슈 URL https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092 [Bug]: string-width dependency stops storybook from executing · Issue #22431 · storybookjs/storybook Describe the bug I am using Storybook 7 with the automatically generated vite-react setup. When installing Storybook 7, yarn yi..