[Error Handling] 새로고침시 지도가 사라지는 오류

### 어떤 에러인가요?
- 새로고침시 지도가 사라지며 main의 css가 적용되지 않는 오류

```
$ Error handling response: TypeError: Cannot read properties of undefined (reading 'always')
at chrome-extension://cnfngpgfjllafbghaimjcmailafcdhod/releaseDrag.js:90:49
$ Warning: Prop `className` did not match. Server: "sc-jrQzAO kuBjUu" Client: "sc-bdvvtL gTLpRt"
at div
at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19811)
at Map (webpack-internal:///./components/main/map.tsx:34:26)
at div
at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19811)
at main
at MyApp (webpack-internal:///./pages/_app.tsx:40:27)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:359:9)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:793:26)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:915:27)

See more info here: https://nextjs.org/docs/messages/react-hydration-error
```

### 에러 핸들링 방법
- 카카오 API 문제가 아니라 styled component의 문제이다.
- styled-component의 단점으로는 러닝 커브(Learning Curve), 새로운 의존성 발생, 별도의 라이브러리 설치에 따른 번들 크기 증대 및 CSS-in-CSS에 비해 느린 속도 등을 들 수 있다.
```
// 코드가 들어가도 좋아요!
```

### 에러 핸들링을 위해 참고한 레퍼런스 링크
[블로그](https://s-core.co.kr/insight/view/%EC%9B%B9-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81-%EA%B4%80%EB%A6%AC-css-in-js-vs-css-in-css/)