[Error] 모바일 환경일 때, JSX 태그에 변화 주기

## 어떤 에러가 발생했나요?
- 웹 환경에서는 병렬로 [문구]-[일러스트] / [일러스트] - [문구] / [문구] - [일러스트] 이런식으로 생성했다
- 그런데 모바일 환경으로 들어가 보니 [문구] / [일러스트] / [일러스트] / [문구] / [문구] / [일러스트] 이런식으로 수직으로 쌓였다
- 수직으로 쌓다보니 모바일 화면에서는 UI 가 통일되지 않은 모습을 보여 주지 못했다

### 에러가 발생한 폴더
- client > src > pages > mainPage.jsx

### 에러 원인
- 태그의 위치에 따른 문제였다

### 에러 해결 방법
```jsx
const isMobile = window.matchMedia('screen and (max-width: 768px)').matches;
```
- 위의 코드로 모바일 화면의 width 인지를 추적해서 true, false 값으로 넣어주었다.
- 나머지는 분기처리를 한다