> For the complete documentation index, see [llms.txt](https://toktokhan.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://toktokhan.gitbook.io/docs/basic-guides/foundation/1.-container/1-1.-breakpoint.md).

# 중단점(Breakpoint) 설정하기

프로젝트별로 중단점을 설정하는 방법을 알아봅니다.

프로젝트를 시작하기 전에는 디바이스 별 중단점(Breakpoints)을 먼저 설정해야 합니다. 일반적으로는 Mobile, Tablet, PC 별로 중단점을 설정하지만 Laptop, Small PC, Large PC 등에 대한 반응형 디자인도 고려해야 합니다. 이 경우에는 기획 및 디자인 과정에서 컨펌을 받고 진행하는 것이 좋습니다.

\*\* 복잡한 UI, Interaction design인 경우에는 적응형 웹을 고려할 수 있습니다. [eg. Naver](https://www.naver.com/)

### Examples

Large PC / PC / Tablet / Mobile 세 버전의 디바이스에 대한 셋팅 값입니다. 각 프로젝트별로 디자인되어있는 반응형 디바이스 width 기준으로 분기처리를 해주어야 합니다.

<figure><img src="https://1168173052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9A2Jt7XcUkiyMXRHBecz%2Fuploads%2F2bSsQzWVGPPllzNexcYK%2FScreen%20Shot%202023-03-08%20at%205.05.38%20PM.png?alt=media&amp;token=1cb40d2f-65a6-4785-9953-e2471b7df788" alt=""><figcaption><p>Container width by devices</p></figcaption></figure>

Breakpoints는 미디어 쿼리 min-width를 기준으로 설정되므로, Device width ≥ '1480px' 인 경우는 breakpoints\['lg']에 해당됩니다.&#x20;

\* 반응형 적용은 배열 혹은 오브젝트 방식으로 적용할 수 있습니다. Use Cases 에서 확인해주세요.

{% tabs %}
{% tab title="Basic Setting" %}

```typescript
//styles/theme/foundations/breakpoints.ts
const breakpoints = {
  // base <780px
  base: '0px',
  sm: '780px', // ≥780px
  md: '980px', // ≥980px
  lg: '1280px', // ≥1280px
  xl: '1480px', // ≥1480px
  '2xl': '1920px', // ≥1920px
};
```

{% endtab %}

{% tab title="New Setting" %}

```javascript
// 예시의 프로젝트에서는 Width : '980px' 의 컨테이너를 지원하지 않고 있기 때문에 
// medium breakpoint를 '1280px'로 설정해주었습니다.  
const breakpoints = {
  // base <780px
  base: '0px',
  sm: '780px', // ≥780px
  md: '1280px', // ≥1280px
  lg: '1480px', // ≥1480px
  xl: '1480px', // 
  '2xl': '1480px, // 
};

```

{% hint style="danger" %}
**Breakpoints** 와 **Container**를 배열로 적용하기 위해서는 \
\[base, sm, md, lg, xl, '2xl'] 모든 키값을 입력해주어야합니다.
{% endhint %}
{% endtab %}

{% tab title="Use Case 1 (Array Syntax)" %}

```javascript
// 배열로 적용하기
  <Box
    w={[
      '10px', // base <780px
      '30px', // sm ≥780px
      '48px', // md ≥1280px
      '62px', // lg ≥1480px
    ]}
  >
    This is a responsive box
  </Box>
  
```

{% hint style="danger" %}
**Breakpoints** 와 **Container**를 배열로 적용하기 위해서는 \
\[base, sm, md, lg, xl, '2xl'] 모든 키값을 입력해주어야합니다.
{% endhint %}
{% endtab %}

{% tab title="Use Case 1 (Object Syntax)" %}

```javascript
// 오브젝트로 적용하기
  <Box
    w={{
        base:'5px', // base <780px
        sm:'10px',  // sm ≥780px
        md:'20px'   // md ≥1280px
        lg:'30px'   // lg ≥1480px
      }}
  >
    This is a responsive box
  </Box>  
  
```

{% endtab %}
{% endtabs %}

{% hint style="danger" %}
**Breakpoints** 와 **Container**를 배열로 적용하기 위해서는 \[base, sm, md, lg, xl, '2xl'] 모든 키 값을 입력해주어야합니다.
{% endhint %}