Merge pull request #577 from woowacourse-teams/refactor/574-map-page-…

…loading

지도의 로딩중이라는 이미지를 로딩 컴포넌트로 수정한다.

client/src/pages/CafeMapPage.tsx

@@ -1,10 +1,19 @@
 import { Status, Wrapper } from '@googlemaps/react-wrapper';
 import { type ReactElement } from 'react';
+import styled from 'styled-components';
 import CafeMap from '../components/CafeMap';
+import LoadingBar from '../components/LoadingBar';
+import AppError from '../errors/AppError';
 
 const render = (status: Status): ReactElement => {
-  if (status === Status.FAILURE) return <div>에러입니다.</div>;
-  return <div>로딩중...</div>;
+  if (status === Status.FAILURE) {
+    throw new AppError('지도를 불러오는데 실패하였습니다. 잠시 후 다시 시도해주세요');
+  }
+  return (
+    <Container>
+      <LoadingBar />
+    </Container>
+  );
 };
 
 const CafeMapPage = () => {
@@ -16,3 +25,12 @@ const CafeMapPage = () => {
 };
 
 export default CafeMapPage;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+`;