Tech Stack

Figma

• https://www.figma.com/
• 디자이너 메인 도구
• Assets, Components, UI Kits

React

• https://react.dev/
• UI Renderer
• 모든 프론트엔드 프레임워크에서 사용할 수 있는 Web Components를 깊게 고민하였으나 아직 생태계가 성숙하지 않아서 React로 선회함
  • https://github.com/DaleStudy/daleui/issues/2
• 만약에 React 구현이 잘 되면 Web Components, VueJS, Svelte도 지원하면 이상적일 것 같음

Panda

• https://panda-css.com/
• Styling engine
• RSC 호환되는 CSS-in-JS 라이브러리
• Tailwind, Vanila Extact, StyleX, React v19 CSS Scoping 등을 고려하였으나 Panda가 현대적인 디자인시스템 만들기 최적이라 판단함
  • https://github.com/DaleStudy/daleui/issues/5
  • https://github.com/DaleStudy/daleui/pull/7
  • https://github.com/DaleStudy/daleui/pull/8

Ark UI

• https://ark-ui.com/
• Headless UI components
• 웹 접근성 준수, Chakra UI 팀 지원, Panda와의 원활한 통합(seamless integration)

Storybook

• https://storybook.js.org/
• Stories, Docs, Playground

Chromatic

• https://storybook.js.org/
• UI Tests, UI Reviews
• 디자이너 개발자 간 협업

Vite

• https://vite.dev/
• Bundler

Vitest

• http://vitest.dev/
• Test Runner, Test Matcher

TestingLibrary

• UI Tests

HappyDom

• Headless DOM

ESLint

• Linter

Prettier

• Formatter

GitHub Actions

• CI/CD

Bun

• Runtime