Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…

…nto feature/#102
CoolPeace-yanolza · Jan 24, 2024 · afd49b3 · afd49b3
2 parents 352e214 + 6178511
commit afd49b3
Show file tree

Hide file tree

Showing 30 changed files with 830 additions and 57 deletions.
diff --git a/src/App.error.tsx b/src/App.error.tsx
@@ -1,11 +1,25 @@
 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>App 전체 에러 발생</span>
-      <button onClick={resetErrorBoundary}>다시 시도</button>
+      <ErrorIcon
+        src={errorIcon}
+        alt="에러 발생"
+      />
+      <ErrorWord>서비스를 이용할 수 없습니다.</ErrorWord>
+      <ReLoadButton onClick={resetErrorBoundary}>
+        <ReloadIcon
+          src={reloadIcon}
+          alt="에러 발생"
+        />
+        다시 시도 하기
+      </ReLoadButton>
     </Container>
   );
 };
@@ -24,3 +38,60 @@ const Container = styled.div`
   align-items: center;
   gap: 10px;
 `;
+
+const ErrorIcon = styled.img`
+  width: 80px;
+  height: 80px;
+
+  ${theme.response.tablet} {
+    width: 50px;
+    height: 50px;
+  }
+`;
+
+const ErrorWord = styled.span`
+  font-size: 20px;
+  font-weight: 500;
+
+  ${theme.response.tablet} {
+    font-size: 15px;
+  }
+`;
+
+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: 15px;
+  text-align: center;
+
+  transition: all 0.5s;
+
+  &:hover {
+    color: gray;
+  }
+
+  ${theme.response.tablet} {
+    margin-top: 10px;
+
+    font-size: 13px;
+  }
+`;
+
+const ReloadIcon = styled.img`
+  width: 25px;
+  height: 25px;
+
+  margin-right: 10px;
+
+  ${theme.response.tablet} {
+    width: 20px;
+    height: 20px;
+  }
+`;
diff --git a/src/App.loading.tsx b/src/App.loading.tsx
@@ -82,6 +82,7 @@ const Header = styled(BaseSkeleton)`
   width: 100%;
   height: 85px;
 
+  margin-top: 25px;
   border-radius: 20px;
 
   display: flex;
@@ -91,14 +92,15 @@ const Header = styled(BaseSkeleton)`
   ${theme.response.tablet} {
     height: 65px;
 
+    margin-top: 15px;
     border-radius: 10px;
   }
 `;
 
 const OutletLayout = styled(BaseSkeleton)`
   width: 100%;
-  height: 85vh;
-  max-height: 85vh;
+  height: 83vh;
+  max-height: 83vh;
 
   margin-top: 16px;
   border-radius: 20px;

diff --git a/...onents/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponCounter/index.tsx b/...onents/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponCounter/index.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 
 import { CouponCounterProps, CouponCounterStyleProps } from '@/types/dashboard';
 import { getStatusToLocaleString } from '@utils/index';
+
 import theme from '@styles/theme';
 
 const CouponCounter = ({ type, result }: CouponCounterProps) => {
@@ -31,6 +32,16 @@ const Container = styled.div<CouponCounterStyleProps>`
     props.$type === 'download' ? '#fff' : '#022C79'};
 
   color: ${props => (props.$type === 'download' ? '#404446' : '#fff')};
+
+  ${theme.response.tablet} {
+    width: 100%;
+
+    padding: 10px 0px;
+    border-radius: 7px;
+
+    align-items: center;
+    justify-content: space-between;
+  }
 `;
 
 const Header = styled.div`
@@ -44,6 +55,14 @@ const Header = styled.div`
   font-weight: 700;
 
   white-space: nowrap;
+
+  ${theme.response.tablet} {
+    padding: 0px 10px 5px;
+
+    text-align: center;
+
+    font-size: 11px;
+  }
 `;
 
 const ResultContainer = styled.div<CouponCounterStyleProps>`
@@ -63,4 +82,17 @@ const ResultContainer = styled.div<CouponCounterStyleProps>`
   font-weight: 700;
 
   box-shadow: ${theme.shadow.medium};
+
+  ${theme.response.tablet} {
+    width: 85%;
+
+    padding: 10px 0px;
+    border-radius: 6px;
+
+    align-self: center;
+
+    font-size: 11px;
+
+    white-space: nowrap;
+  }
 `;
diff --git a/...omponents/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponRate/index.tsx b/...omponents/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponRate/index.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import reportIcon from '/images/ic-dashboard-couponRate.png';
 import { CouponRateResult } from '@/types/dashboard';
 import '@components/Dashboard/dashboardKeyframes.css';
+import theme from '@styles/theme';
 
 const CouponRate = ({ result }: CouponRateResult) => {
   return (
@@ -38,12 +39,23 @@ const Container = styled.div`
   box-shadow:
     0px 17.525px 21.907px 0px rgba(0, 0, 0, 0.05),
     -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset;
+
+  ${theme.response.tablet} {
+    height: 100%;
+
+    padding: 10px;
+    border-radius: 10px;
+  }
 `;
 
 const Icon = styled.img`
   position: absolute;
   top: 0;
   right: 20px;
+
+  ${theme.response.tablet} {
+    width: 80px;
+  }
 `;
 
 const Title = styled.div`
@@ -52,13 +64,21 @@ const Title = styled.div`
   color: #202325;
   font-size: 17px;
   font-weight: 700;
+
+  ${theme.response.tablet} {
+    font-size: 12px;
+  }
 `;
 
 const Description = styled.p`
   color: #415574;
   font-size: 13px;
   font-weight: 700;
   line-height: 1.4;
+
+  ${theme.response.tablet} {
+    font-size: 10px;
+  }
 `;
 
 const ResultContainer = styled.div`
@@ -79,4 +99,12 @@ const ResultContainer = styled.div`
   font-weight: 700;
 
   animation: fadeUp 0.5s;
+
+  ${theme.response.tablet} {
+    margin: 10px 0px;
+
+    font-size: 12px;
+
+    white-space: nowrap;
+  }
 `;
diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/index.loading.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/index.loading.tsx
@@ -2,6 +2,8 @@ import styled from '@emotion/styled';
 import Skeleton from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
 
+import theme from '@styles/theme';
+
 const Loading = () => {
   return (
     <Container>
@@ -28,6 +30,15 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 20px;
+
+  ${theme.response.tablet} {
+    padding: 10px;
+    border-radius: 10px;
+
+    gap: 10px;
+
+    background-color: #fafafb;
+  }
 `;
 
 const BaseSkeleton = styled(Skeleton)`
@@ -54,6 +65,10 @@ const InnerContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 15px;
+
+  ${theme.response.tablet} {
+    height: auto;
+  }
 `;
 
 const StatusLoadingWrapper = styled.div`
@@ -63,6 +78,10 @@ const StatusLoadingWrapper = styled.div`
   display: flex;
   justify-content: center;
   gap: 15px;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const StatusItemLoading = styled(BaseSkeleton)`