[React style] chakra-ui theme 설정

Chakra-ui로 스타일링하기

0. Tailwind CSS vs Chakra UI

- Tailwind CSS

Tailwind는 유틸리티 클래스를 제공하여, HTML 내에서 직접 스타일을 적용할 수 있게 해줍니다. 이는 빠르게 프로토타이핑을 할 수 있게 해주며, CSS 파일을 별도로 관리할 필요가 없습니다.

- Chakra UI

Chakra UI는 컴포넌트를 제공하여, 컴포넌트를 사용해 스타일을 적용할 수 있게 해줍니다. 이는 컴포넌트를 사용해 스타일을 적용할 수 있어, 컴포넌트를 재사용하기 용이하며, 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다.

- Tailwind CSS와 Chakra UI를 함께 사용

Tailwind CSS와 Chakra UI를 함께 사용하여, Tailwind CSS의 유틸리티 클래스를 사용하고, Chakra UI의 컴포넌트를 사용할 수 있습니다.

- 일반적인 회사에서 사용하기 쉬운 라이브러리 선택

일반적인 회사에서 사용하기에 적합한 라이브러리를 선택할 때 고려해야 할 요소는 다음과 같습니다:

• 프로젝트의 규모와 복잡성: 작고 간단한 프로젝트에는 Tailwind CSS와 같은 유틸리티 우선의 접근법이 더 효과적일 수 있습니다. 반면, 대규모 프로젝트나 애플리케이션에는 Chakra UI와 같은 컴포넌트 기반 라이브러리가 더 적합할 수 있습니다.

• 팀의 경험과 선호도: 팀 구성원들이 컴포넌트 기반의 개발에 익숙하다면 Chakra UI가 더 적합할 수 있으며, 유틸리티 클래스와 직접적인 스타일링에 익숙하다면 Tailwind CSS가 더 나을 수 있습니다.

• 맞춤 디자인 시스템의 필요성: 프로젝트가 매우 특정한 디자인 시스템이나 광범위한 맞춤 스타일링을 필요로 한다면, Tailwind CSS가 더 유연한 선택이 될 수 있습니다.

결론적으로, 각 회사의 프로젝트 요구사항, 팀의 스킬셋, 그리고 개발 속도와 유지 보수의 용이성에 따라 적합한 라이브러리를 선택해야 합니다.

1. Chakra UI 란?

Chakra UI는 React용 디자인 시스템을 제공하는 라이브러리입니다. Chakra UI는 컴포넌트 기반의 스타일링을 제공하며, 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다.

Chakra UI의 주요 특징은 다음과 같습니다:

• 컴포넌트 기반 스타일링: Chakra UI는 다양한 컴포넌트를 제공하며, 이를 사용해 스타일을 적용할 수 있습니다.
• 테마 설정: Chakra UI는 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다.
• 반응형 디자인: Chakra UI는 반응형 디자인을 지원하며, 다양한 디바이스에 대응할 수 있습니다.
• 접근성: Chakra UI는 접근성을 고려한 컴포넌트를 제공하며, 웹 접근성을 향상시킬 수 있습니다.

1. Chakra-ui 설치

• Chakra-ui는 React용 디자인 시스템을 제공하는 라이브러리이다.

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. Chakra-ui 테마 설정

• Chakra-ui의 테마를 설정할 수 있다.
  https://v2.chakra-ui.com/docs/styled-system/customize-theme

• foundations (디자인 시스템의 기반 요소들을 담당)

  • 색상(Color): 프로젝트 전체에서 사용되는 색상 팔레트를 정의합니다.
  • 타이포그래피(Typography): 글꼴, 글자 크기, 줄 높이 등의 기본 텍스트 스타일을 설정합니다.
  • 공간(Spacing): 마진, 패딩 등의 공간을 일관되게 관리할 수 있는 공간 체계를 정의합니다.
  • 경계선 스타일(Border Styles): 예를 들어 borders.js에서는 테두리의 두께, 스타일, 색상 등을 정의할 수 있습니다.

• components (특정 UI 컴포넌트의 스타일을 정의하는데 사용)

  • Button: button.js 파일에서는 버튼 컴포넌트의 모양, 크기, 색상 변형 등을 정의하고 조정할 수 있습니다.
  • Input, Card, Modal 등 다른 컴포넌트들도 각각의 파일에서 커스텀 스타일을 지정할 수 있습니다.

- theme 디렉토리 생성

• src 디렉토리에 theme 디렉토리를 생성한다.

|-- theme
    |-- index.js
    |-- styles.js
    |-- foundations
        |-- borders.js
    |-- components
        |-- button.js

- index.js

import { extendTheme } from '@chakra-ui/react';
import { styles } from './styles';
import { buttonStyles } from './components/button';
import { breakpoints } from './foundations/breakpoints';

export default extendTheme(
    styles, 
    buttonStyles, 
    { breakpoints }
);

- styles.js

// theme/chakraStyles.js
import { mode } from '@chakra-ui/theme-tools';
import { lighten } from 'polished';

export const variablesC = {
  $maxW: '1280px',
};

export const globalStyles = {
  colors: {
    primary: '#422afb',
    pirmaryLight: lighten(0.1, '#422AFB'),
    secondary: '#83D9FB',
    secondaryLight: lighten(0.1, '#83D9FB'),
    tertiary: '#22C55F',
    tertiaryLight: lighten(0.1, '#22C55F'),

    bgDefault: '#F5F7FF',

    lineDefault: '#E5E7EB',

    white: '#FFF',
    black: '#000',

    gray: {
      50: '#F9FAFB',
      100: '#F3F4F6',
      200: '#E5E7EB',
      300: '#D1D5DB',
      400: '#9CA3AF',
      500: '#6B7280',
      600: '#4B5563',
      700: '#374151',
      800: '#1F2937',
      900: '#111827',
    },
  },
  radii: {
    none: '0',
    sm: '8px',
    md: '12px',
    lg: '16px',
    xl: '20px',
    full: '9999px',
  },
  styles: {
    global: (props) => ({
      'body, html': {
        minW: '330px',
        fontFamily: '"DM Sans", "sans-serif"',
        letterSpacing: '-0.5px',
        fontSize: '16px',
        fontWeight: '400',
        lineHeight: '1.5',
        color: mode('gray.900', 'white')(props),
        bg: mode('bgDefault', 'navy.900')(props),
      },
      input: {
        color: 'gray.700',
      },
      'ul > li': {
        listStyle: 'none',
      },
      '.blind': {
        position: 'absolute',
        width: 0,
        height: 0,
        margin: -1,
        padding: 0,
        overflow: 'hidden',
        clip: 'rect(0, 0, 0, 0)',
        border: 0,
        lineHeight: 0,
      },
    }),
  },
};

ButtonStyles.js

// theme/components/button.js
import { mode } from '@chakra-ui/theme-tools';
export const buttonStyles = {
  components: {
    Button: {
      baseStyle: {
        borderRadius: '0',
        boxShadow: '45px 76px 113px 7px rgba(112, 144, 176, 0.08)',
        transition: '.25s all ease',
        boxSizing: 'border-box',
        _focus: {
          boxShadow: 'none',
        },
        _active: {
          boxShadow: 'none',
        },
      },
      variants: {
        icon: () => ({
          w: '45px',
          h: '45px',
          minW: 'none',
          bg: 'transparent',
          color: 'gray.500',
          borderRadius: '50%',
          _focus: {
            bg: 'gray.100',
          },
          _active: {
            bg: 'gray.100',
          },
          _hover: {
            bg: 'gray.100',
          },
        }),
      },
    },
  },
};

3. Chakra-ui App 적용

• src 디렉토리에 App.jsx 파일에 ChakraProvider를 적용하고 위에서 만든 테마를 적용한다.

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { BrowserRouter as Router } from 'react-router-dom';
import Routers from './Routers';
import theme from './theme/theme';

const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <Router>
        <Routers />
      </Router>
    </ChakraProvider>
  );
};

export default App;

4. Chakra-ui 컴포넌트 적용

• src/views/home/Home.jsx 파일을 수정한다.

import React from 'react';
import { Box, Button, Heading } from '@chakra-ui/react';

const Home = () => {
  return (
    <Box>
      <Heading>Home</Heading>
      <Button>Button</Button>
    </Box>
  );
};