# 예제

{% tabs %}
{% tab title="Breakpoints" %}

```javascript
import { ComponentSingleStyleConfig } from '@chakra-ui/react';

const breakpoints = {
  base: '0px',
  sm: '390px',
  md: '600px',
  lg: '1200px',
  xl: '1920px',
  '2xl': '1920px',
};

export default breakpoints;
```

{% endtab %}

{% tab title="Container" %}

```javascript
// src/styles/theme/components/single/Container.ts
import { ComponentSingleStyleConfig } from '@chakra-ui/react';

export const Container: ComponentSingleStyleConfig = {
  baseStyle: {
    w: '100%',
    px: 0,
  },
  defaultProps: {},
  sizes: {},
  variants: {
    auth_default: {
      position: 'relative',
      bgColor: 'white',
      maxW: ['300px', '450px', '783px'],
      borderRadius: '10px',
      h: '585px',
      boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)',
    },
  },
};
```

{% endtab %}
{% endtabs %}