fix: 똑똑 누적 현황 에러 화면 최신 디자인으로 변경

CoolPeace-yanolza · Jan 23, 2024 · 6439c8b · 6439c8b
1 parent 07451d7
commit 6439c8b
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 2 deletions.
diff --git a/src/components/Report/LeftSection/index.error.tsx b/src/components/Report/LeftSection/index.error.tsx
@@ -1,5 +1,6 @@
 import { FallbackProps } from 'react-error-boundary';
 import styled from '@emotion/styled';
+
 import theme from '@styles/theme';
 import errorIcon from '@assets/icons/ic-error.svg';
 import reloadIcon from '@assets/icons/ic-reload.svg';

diff --git a/src/components/Report/RightSection/TotalReport/index.error.tsx b/src/components/Report/RightSection/TotalReport/index.error.tsx
@@ -2,12 +2,24 @@ import { FallbackProps } from 'react-error-boundary';
 import styled from '@emotion/styled';
 
 import theme from '@styles/theme';
+import errorIcon from '@assets/icons/ic-error.svg';
+import reloadIcon from '@assets/icons/ic-reload.svg';
 
 const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
   return (
     <Container>
-      <span>누적 똑똑 현황 에러 발생</span>
-      <button onClick={resetErrorBoundary}>다시 시도</button>
+      <ErrorIcon
+        src={errorIcon}
+        alt="에러 발생"
+      />
+      <ErrorWord>똑똑 누적 차트를 불러올 수 없습니다.</ErrorWord>
+      <ReLoadButton onClick={resetErrorBoundary}>
+        <ReloadIcon
+          src={reloadIcon}
+          alt="에러 발생"
+        />
+        다시 시도 하기
+      </ReLoadButton>
     </Container>
   );
 };
@@ -34,9 +46,69 @@ const Container = styled.div`
     width: 90%;
     max-height: 250px;
 
+    margin: 20px 0;
     padding: 15px 15px;
     border-radius: 10px;
 
+    gap: 15px;
+
     background-color: #f2f4f5;
   }
 `;
+
+const ErrorIcon = styled.img`
+  width: 35px;
+  height: 35px;
+
+  ${theme.response.tablet} {
+    width: 40px;
+    height: 40px;
+  }
+`;
+
+const ErrorWord = styled.span`
+  font-size: 14px;
+  font-weight: 500;
+
+  ${theme.response.tablet} {
+    font-size: 13px;
+  }
+`;
+
+const ReLoadButton = styled.button`
+  margin-top: 15px;
+  margin-left: 3px;
+  border: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: transparent;
+  font-size: 12px;
+  text-align: center;
+
+  transition: all 0.5s;
+
+  &:hover {
+    color: gray;
+  }
+
+  ${theme.response.tablet} {
+    margin: 0;
+
+    font-size: 10px;
+  }
+`;
+
+const ReloadIcon = styled.img`
+  width: 20px;
+  height: 20px;
+
+  margin-right: 10px;
+
+  ${theme.response.tablet} {
+    width: 15px;
+    height: 15px;
+  }
+`;