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

…nto feature/#92
CoolPeace-yanolza · Jan 24, 2024 · 3b3b17a · 3b3b17a
2 parents 2cd83c6 + 8c36675
commit 3b3b17a
Show file tree

Hide file tree

Showing 24 changed files with 725 additions and 41 deletions.
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)`

diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/index.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/index.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
+import theme from '@styles/theme';
 import CouponCounter from './CouponCounter';
 import CouponRate from './CouponRate';
 import titleIcon from '@assets/icons/ic-dashboard-downloadReport.svg';
@@ -26,19 +27,28 @@ const DownloadReport = () => {
         </HeaderDescription>
       </Header>
       <InnerContainer>
-        <CouponCounterSection>
-          <CouponCounter
-            type="download"
-            result={lastestData.download_count}
-          />
-          <CouponCounter
-            type="used"
-            result={lastestData.used_count}
-          />
-        </CouponCounterSection>
-        <CouponRateSection>
-          <CouponRate result={lastestData.conversion_rate * 0.1} />
-        </CouponRateSection>
+        <MobileHeader>
+          <MobileTitle>다운로드 리포트</MobileTitle>
+          <MobileHeaderDescription>
+            <ReloadIcon src={reloadIcon} />
+            매월 1일 00시 00분에 업데이트
+          </MobileHeaderDescription>
+        </MobileHeader>
+        <InnerWrapper>
+          <CouponCounterSection>
+            <CouponCounter
+              type="download"
+              result={lastestData.download_count}
+            />
+            <CouponCounter
+              type="used"
+              result={lastestData.used_count}
+            />
+          </CouponCounterSection>
+          <CouponRateSection>
+            <CouponRate result={lastestData.conversion_rate * 0.1} />
+          </CouponRateSection>
+        </InnerWrapper>
       </InnerContainer>
     </Container>
   );
@@ -59,10 +69,13 @@ const Header = styled.div`
 
   display: flex;
   align-items: center;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const Title = styled.span`
-  color: #484e59;
   font-size: 18px;
   font-weight: 700;
 `;
@@ -82,16 +95,36 @@ const InnerContainer = styled.div`
   width: 100%;
   height: 100%;
 
-  padding: 20px;
   border-radius: 20px;
 
+  display: flex;
+  flex-direction: column;
+
+  background-color: #fafafb;
+
+  ${theme.response.tablet} {
+    border-radius: 10px;
+  }
+`;
+
+const InnerWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+
+  padding: 20px;
+
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
 
-  background-color: #fafafb;
+  ${theme.response.tablet} {
+    padding: 20px 10px;
+
+    flex-direction: row;
+    gap: 10px;
+  }
 `;
 
 const CouponCounterSection = styled.div`
@@ -103,6 +136,13 @@ const CouponCounterSection = styled.div`
   justify-content: space-between;
   align-items: center;
   gap: 10px;
+
+  ${theme.response.tablet} {
+    height: 100%;
+
+    flex: 1;
+    flex-direction: column;
+  }
 `;
 
 const CouponRateSection = styled.div`
@@ -113,8 +153,44 @@ const CouponRateSection = styled.div`
 
 const TitleIcon = styled.img`
   padding-right: 5px;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const ReloadIcon = styled(TitleIcon)`
-  padding: 0px 3px 2px 0px;
+  padding-right: 3px;
+
+  ${theme.response.tablet} {
+    display: block;
+  }
+`;
+
+const MobileHeader = styled.div`
+  padding: 20px 10px 0px;
+
+  display: none;
+  align-items: center;
+  gap: 5px;
+
+  ${theme.response.tablet} {
+    display: flex;
+  }
+`;
+
+const MobileTitle = styled.span`
+  font-size: 15px;
+  font-weight: 700;
+`;
+
+const MobileHeaderDescription = styled.div`
+  padding: 0px;
+
+  display: flex;
+  align-items: flex-end;
+
+  color: #6c7072;
+  font-size: 10px;
+  font-weight: 400;
 `;
diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/graphOptions.ts b/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/graphOptions.ts
@@ -3,7 +3,7 @@ const graphOptions: any = {
   maintainAspectRatio: false,
   plugins: {
     legend: {
-      display: true
+      display: false
     }
   },
 

diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/index.loading.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/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>
@@ -22,6 +24,12 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 20px;
+
+  ${theme.response.tablet} {
+    border-radius: 10px;
+
+    background-color: #fafafb;
+  }
 `;
 
 const BaseSkeleton = styled(Skeleton)`
@@ -37,9 +45,17 @@ const BaseSkeleton = styled(Skeleton)`
 const TitleLoading = styled(BaseSkeleton)`
   width: 40%;
   height: 30px;
+
+  ${theme.response.tablet} {
+    height: 20px;
+  }
 `;
 
 const GraphLoading = styled(BaseSkeleton)`
   width: 100%;
   height: 340px;
+
+  ${theme.response.tablet} {
+    height: calc(100vw / 2);
+  }
 `;