From 4d00b09ca4c60268afbc8e5d32e00cadf50218e0 Mon Sep 17 00:00:00 2001
From: jeongwusi <jeongwusi@gmail.com>
Date: Thu, 12 Oct 2023 17:13:24 +0900
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=EC=A7=80=EB=8F=84=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=9D=98=20=EC=97=90=EB=9F=AC=20UI=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/CafeMapPage.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/CafeMapPage.tsx b/client/src/pages/CafeMapPage.tsx
index 417fe891..f7e61bbd 100644
--- a/client/src/pages/CafeMapPage.tsx
+++ b/client/src/pages/CafeMapPage.tsx
@@ -1,9 +1,12 @@
 import { Status, Wrapper } from '@googlemaps/react-wrapper';
 import { type ReactElement } from 'react';
 import CafeMap from '../components/CafeMap';
+import AppError from '../errors/AppError';
 
 const render = (status: Status): ReactElement => {
-  if (status === Status.FAILURE) return <div>에러입니다.</div>;
+  if (status === Status.FAILURE) {
+    throw new AppError('지도를 불러오는데 실패하였습니다. 잠시 후 다시 시도해주세요');
+  }
   return <div>로딩중...</div>;
 };
 

From 81c8c39511aab4c7e89eeca70d7b8d4fa68cecae Mon Sep 17 00:00:00 2001
From: jeongwusi <jeongwusi@gmail.com>
Date: Thu, 12 Oct 2023 17:19:41 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=EB=A1=9C=EB=94=A9=20=EC=A4=91?=
 =?UTF-8?q?=20UI=EB=A5=BC=20=EB=A1=9C=EB=94=A9=EB=B0=94=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/CafeMapPage.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/CafeMapPage.tsx b/client/src/pages/CafeMapPage.tsx
index f7e61bbd..8d5ff331 100644
--- a/client/src/pages/CafeMapPage.tsx
+++ b/client/src/pages/CafeMapPage.tsx
@@ -1,13 +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) {
     throw new AppError('지도를 불러오는데 실패하였습니다. 잠시 후 다시 시도해주세요');
   }
-  return <div>로딩중...</div>;
+  return (
+    <Container>
+      <LoadingBar />
+    </Container>
+  );
 };
 
 const CafeMapPage = () => {
@@ -19,3 +25,12 @@ const CafeMapPage = () => {
 };
 
 export default CafeMapPage;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+`;