The place where all the components used in Oliveyoung's service are gathered

Oliveyoung began building a design system to increase work efficiency by reusing design patterns that follow common principles when operating its service. To this end, it set the goal of separating components into a dedicated repository and building guideline documentation that allows the structure and form of components to be checked independently.

For the tech stack, it adopted a Vite, React, TypeScript environment. It uses Storybook for component documentation, and manages styles using the @emotion/react package of Emotion, a CSS-in-JS library.

The main implementation details are as follows.

• Applying global styles: In the preview.tsx file, the Global component is used to manage global styles for CSS reset and mobile environment optimization.
• Structuring components: Modularized components are created by separating files such as index.ts and Radio.tsx.
• Dynamic styling: Emotion's css prop is used to flexibly apply conditional styling based on a component's state (props) such as disabled or checked.