From d7fb5bc07556562c39c8134aa84796dee60ce60b Mon Sep 17 00:00:00 2001
From: SA K <sakang07@gmail.com>
Date: Tue, 13 Dec 2022 15:01:11 +0900
Subject: [PATCH] [FE-share] Add error handling

---
 .idea/modules.xml                             |  1 +
 frontend-web/frontend-web.iml                 |  5 ++-
 .../src/widget/wrapper/WidgetViewer.tsx       | 33 +++++++++++++++++--
 .../src/widget/wrapper/WidgetWrapper.tsx      |  8 ++++-
 4 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/.idea/modules.xml b/.idea/modules.xml
index 95aac13..bb51568 100644
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -4,6 +4,7 @@
     <modules>
       <module fileurl="file://$PROJECT_DIR$/backend-api/backend-api.iml" filepath="$PROJECT_DIR$/backend-api/backend-api.iml" />
       <module fileurl="file://$PROJECT_DIR$/backend-libs-lambda-layer/backend-libs-lambda-layer.iml" filepath="$PROJECT_DIR$/backend-libs-lambda-layer/backend-libs-lambda-layer.iml" />
+      <module fileurl="file://$PROJECT_DIR$/frontend-web/frontend-web.iml" filepath="$PROJECT_DIR$/frontend-web/frontend-web.iml" />
       <module fileurl="file://$PROJECT_DIR$/landing-page/landing-page.iml" filepath="$PROJECT_DIR$/landing-page/landing-page.iml" />
       <module fileurl="file://$PROJECT_DIR$/.idea/vanillameta.iml" filepath="$PROJECT_DIR$/.idea/vanillameta.iml" />
     </modules>
diff --git a/frontend-web/frontend-web.iml b/frontend-web/frontend-web.iml
index 277b2cc..8021953 100644
--- a/frontend-web/frontend-web.iml
+++ b/frontend-web/frontend-web.iml
@@ -2,9 +2,8 @@
 <module type="WEB_MODULE" version="4">
   <component name="NewModuleRootManager" inherit-compiler-output="true">
     <exclude-output />
-    <content url="file://$MODULE_DIR$">
-      <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
-    </content>
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
 </module>
\ No newline at end of file
diff --git a/frontend-web/src/widget/wrapper/WidgetViewer.tsx b/frontend-web/src/widget/wrapper/WidgetViewer.tsx
index 41091ec..92f886f 100644
--- a/frontend-web/src/widget/wrapper/WidgetViewer.tsx
+++ b/frontend-web/src/widget/wrapper/WidgetViewer.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 import { WIDGET_TYPE } from '@/constant';
 import LineChart from '@/widget/modules/linechart/LineChart';
 import PieChart from '@/widget/modules/piechart/PieChart';
@@ -25,6 +25,35 @@ import MixedLineStackedBarChart from '@/widget/modules/mixedchart/MixedLineStack
 import FunnelChart from '@/widget/modules/funnelchart/FunnelChart';
 import { LoadingContext } from '@/contexts/LoadingContext';
 
+export const WidgetEmpty = () => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+        borderRadius: '6px',
+      }}
+    >
+      <Typography
+        sx={{
+          margin: '200px auto',
+          fontSize: '14px',
+          fontWeight: 600,
+          textAlign: 'center',
+          lineHeight: '1.6',
+          color: '#333',
+        }}
+      >
+        위젯 조회에 실패했습니다.
+        <br />
+        다시 시도해 주세요.
+      </Typography>
+    </Box>
+  );
+};
+
 const WidgetViewer = props => {
   const { title, widgetType, widgetOption, dataSet } = props;
   const { showLoading, hideLoading } = useContext(LoadingContext);
@@ -488,7 +517,7 @@ const WidgetViewer = props => {
           padding: '10px 40px 48px 40px',
         }}
       >
-        {module}
+        {module ? module : <WidgetEmpty />}
         {/*<ReactECharts*/}
         {/*  option={componentOption}*/}
         {/*  style={{ height: '100%', maxHeight: '600px', width: '100%' }}*/}
diff --git a/frontend-web/src/widget/wrapper/WidgetWrapper.tsx b/frontend-web/src/widget/wrapper/WidgetWrapper.tsx
index 7e3560a..40611e0 100644
--- a/frontend-web/src/widget/wrapper/WidgetWrapper.tsx
+++ b/frontend-web/src/widget/wrapper/WidgetWrapper.tsx
@@ -1,14 +1,16 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { get } from '@/helpers/apiHelper';
 import WidgetViewer from '@/widget/wrapper/WidgetViewer';
 import DatabaseService from '@/api/databaseService';
 import { STATUS } from '@/constant';
 import { LoadingContext } from '@/contexts/LoadingContext';
+import { useAlert } from 'react-alert';
+import { SnackbarContext } from '@/contexts/AlertContext';
 
 const WidgetWrapper = props => {
   const { widgetOption, dataSetId } = props;
   const { showLoading, hideLoading } = useContext(LoadingContext);
   const [dataset, setDataset] = useState(null);
+  const snackbar = useAlert(SnackbarContext);
 
   useEffect(() => {
     // console.log('WidgetWrapper widgetOption', widgetOption);
@@ -32,6 +34,10 @@ const WidgetWrapper = props => {
           setDataset(response.data.data.datas);
         }
       })
+      .catch(error => {
+        snackbar.error('데이터베이스 조회에 실패했습니다.');
+        console.log('error', error);
+      })
       .finally(() => {
         hideLoading();
       });