From d2a1de127fae613ce7d89b3a1334d6f894367819 Mon Sep 17 00:00:00 2001 From: TeukHee Date: Tue, 23 Jan 2024 22:43:14 +0900 Subject: [PATCH 1/8] =?UTF-8?q?design:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EC=9A=B0=EC=B8=A1=EC=84=B9=EC=85=98=20=EB=AA=A8?= =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponStatusSection/StatusItem/index.tsx | 23 +++++++++++++ .../CouponStatusSection/index.tsx | 23 ++++++++++++- .../GetMatchedReport/index.tsx | 33 +++++++++++++++++++ .../DailyReportSection/index.tsx | 19 +++++++++++ src/pages/Dashboard/index.tsx | 7 ++++ 5 files changed, 104 insertions(+), 1 deletion(-) diff --git a/src/components/Dashboard/DashboardRightSection/CouponStatusSection/StatusItem/index.tsx b/src/components/Dashboard/DashboardRightSection/CouponStatusSection/StatusItem/index.tsx index 2f53305b..ae2ef834 100644 --- a/src/components/Dashboard/DashboardRightSection/CouponStatusSection/StatusItem/index.tsx +++ b/src/components/Dashboard/DashboardRightSection/CouponStatusSection/StatusItem/index.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; +import theme from '@styles/theme'; import { StatusItemProps, StatusItemStyleProps } from '@/types/dashboard'; const StatusItem = ({ title, result, index }: StatusItemProps) => { @@ -25,6 +26,14 @@ const Container = styled.div` justify-content: center; background-color: #fafafb; + + ${theme.response.tablet} { + min-width: 105px; + height: auto; + + padding: 8px; + border-radius: 8px; + } `; const Header = styled.div` @@ -33,6 +42,11 @@ const Header = styled.div` color: #484e59; font-size: 13px; font-weight: 700; + + ${theme.response.tablet} { + text-align: center; + font-size: 10px; + } `; const ResultContainer = styled.div` @@ -51,4 +65,13 @@ const ResultContainer = 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} { + padding: 5px 10px; + border-radius: 8px; + + font-size: 13px; + + white-space: nowrap; + } `; diff --git a/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.tsx b/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.tsx index cf0a5bb4..834f7ca2 100644 --- a/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.tsx +++ b/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; +import theme from '@styles/theme'; import StatusItem from './StatusItem'; import { useGetMonthStatus } from '@hooks/index'; import { getStatusToLocaleString } from '@utils/index'; @@ -23,7 +24,7 @@ const CouponStatusSection = () => { /> img { + width: 130px; + } + } `; const AlarmContainer = styled.div` @@ -146,6 +162,15 @@ const AlarmContainer = styled.div` align-items: center; background-color: #fafafb; + + ${theme.response.tablet} { + height: 120px; + min-height: auto; + + margin: 0; + + flex: 2; + } `; const AlarmInnerContainer = styled.div` @@ -175,6 +200,10 @@ const AlarmHeaderText = styled.div` font-size: 15px; font-weight: 700; line-height: 1.4; + + ${theme.response.tablet} { + font-size: 11px; + } `; const AlarmSubText = styled.div` @@ -183,6 +212,10 @@ const AlarmSubText = styled.div` font-size: 14px; font-weight: 500; line-height: 1.4; + + ${theme.response.tablet} { + font-size: 10px; + } `; const AlarmColoredText = styled.span` diff --git a/src/components/Dashboard/DashboardRightSection/DailyReportSection/index.tsx b/src/components/Dashboard/DashboardRightSection/DailyReportSection/index.tsx index 74c3db67..db8dbdda 100644 --- a/src/components/Dashboard/DashboardRightSection/DailyReportSection/index.tsx +++ b/src/components/Dashboard/DashboardRightSection/DailyReportSection/index.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; +import theme from '@styles/theme'; import GetMatchedReport from './GetMatchedReport'; import { useGetDailyReport } from '@hooks/index'; import { headerAccommodationState } from '@recoil/index'; @@ -32,11 +33,25 @@ const Container = styled.div` flex-direction: column; background-color: white; + + ${theme.response.tablet} { + height: auto; + min-height: auto; + + margin: 5px 10px; + padding: 15px; + + background-color: #fafafb; + } `; const Title = styled.div` font-size: 17px; font-weight: 700; + + ${theme.response.tablet} { + font-size: 15px; + } `; const Description = styled.div` @@ -45,4 +60,8 @@ const Description = styled.div` color: #6c7072; font-size: 13.005px; font-weight: 700; + + ${theme.response.tablet} { + font-size: 10px; + } `; diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx index 6cfe6e82..a1b643f8 100644 --- a/src/pages/Dashboard/index.tsx +++ b/src/pages/Dashboard/index.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; +import theme from '@styles/theme'; import { DashboardLeftSection, DashboardRightSection @@ -23,4 +24,10 @@ const Container = styled.div` display: flex; justify-content: space-between; gap: 25px; + + ${theme.response.tablet} { + height: auto; + + flex-direction: column-reverse; + } `; From 6003cf5ec561f896bdc9f68711b5c57fa142b721 Mon Sep 17 00:00:00 2001 From: TeukHee Date: Wed, 24 Jan 2024 01:50:50 +0900 Subject: [PATCH 2/8] =?UTF-8?q?design:=20=EC=9B=94=EB=B3=84=EC=B0=A8?= =?UTF-8?q?=ED=8A=B8=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GraphContainer/graphOptions.ts | 2 +- .../GraphSection/GraphContainer/index.tsx | 61 +++++++++++++++++++ .../GraphSection/index.tsx | 13 ++++ .../Dashboard/DashboardLeftSection/index.tsx | 6 ++ src/pages/Dashboard/index.tsx | 1 + 5 files changed, 82 insertions(+), 1 deletion(-) diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/graphOptions.ts b/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/graphOptions.ts index 86874d13..e586b651 100644 --- 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.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/index.tsx index fb270dde..527e106b 100644 --- a/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/index.tsx @@ -16,6 +16,7 @@ import { import { Chart } from 'react-chartjs-2'; import { useRecoilValue } from 'recoil'; +import theme from '@styles/theme'; import { GraphHeaderTag } from '@/types/dashboard'; import graphOptions from './graphOptions'; import { getUpdatedDate } from '@utils/index'; @@ -113,6 +114,13 @@ const GraphContainer = () => { + + 월별 차트 + + 프로모션 적용 이후 예약 현황을 알려드립니다.{' '} + ({getUpdatedDate()} 업데이트) + + ` font-weight: 700; cursor: pointer; + + ${theme.response.tablet} { + margin-right: 5px; + + font-size: 10px; + } `; const GraphInnerWrapper = styled.div` @@ -224,4 +247,42 @@ const GraphInnerWrapper = styled.div` border-radius: 20px; background-color: white; + + ${theme.response.tablet} { + height: calc(100vw / 2); + min-height: calc(100vw / 2); + } +`; + +const MobileHeader = styled.div` + display: none; + + ${theme.response.tablet} { + padding-bottom: 20px; + + align-self: flex-start; + display: flex; + align-items: flex-end; + gap: 3px; + } +`; + +const MobileTitle = styled.span` + font-size: 15px; + font-weight: 700; + line-height: 100%; +`; + +const MobileHeaderDescription = styled.div` + padding-bottom: 2px; + + color: #5e5e5e; + font-size: 9px; + font-weight: 700; + + & > span { + color: #8e8e8e; + font-size: 8px; + font-weight: 500; + } `; diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/index.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/index.tsx index 9e33bd98..883f5d85 100644 --- a/src/components/Dashboard/DashboardLeftSection/GraphSection/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/GraphSection/index.tsx @@ -3,6 +3,7 @@ import React, { Suspense } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; import { useQueryErrorResetBoundary } from '@tanstack/react-query'; +import theme from '@styles/theme'; import { DashboardHeader } from '@components/common'; const GraphContainer = React.lazy(() => import('./GraphContainer')); import GraphContainerErrorFallback from './GraphContainer/index.error'; @@ -56,6 +57,10 @@ const Container = styled.div` flex: 6; background-color: white; + + ${theme.response.tablet} { + padding: 10px; + } `; const InnerContainer = styled.div` @@ -65,12 +70,20 @@ const InnerContainer = styled.div` display: flex; justify-content: space-between; gap: 12px; + + ${theme.response.tablet} { + flex-direction: column; + } `; const LeftSection = styled.div` height: 98%; flex: 1; + + ${theme.response.tablet} { + width: 100%; + } `; const RightSection = styled.div` diff --git a/src/components/Dashboard/DashboardLeftSection/index.tsx b/src/components/Dashboard/DashboardLeftSection/index.tsx index ec866999..c61e16f3 100644 --- a/src/components/Dashboard/DashboardLeftSection/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/index.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; +import theme from '@styles/theme'; import GraphSection from './GraphSection'; import LocalInformationSection from './LocalInformationSection'; @@ -21,4 +22,9 @@ const Container = styled.div` display: flex; flex-direction: column; flex: 2; + + ${theme.response.tablet} { + width: 100%; + min-width: 100%; + } `; diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx index a1b643f8..f8ec1d77 100644 --- a/src/pages/Dashboard/index.tsx +++ b/src/pages/Dashboard/index.tsx @@ -29,5 +29,6 @@ const Container = styled.div` height: auto; flex-direction: column-reverse; + gap: 5px; } `; From 897c206161a94bbc566e96c7207ac4931c6202c2 Mon Sep 17 00:00:00 2001 From: TeukHee Date: Wed, 24 Jan 2024 03:20:16 +0900 Subject: [PATCH 3/8] =?UTF-8?q?design:=20=EB=8B=A4=EC=9A=B4=EB=A1=9C?= =?UTF-8?q?=EB=93=9C=EB=A6=AC=ED=8F=AC=ED=8A=B8=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=20=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DownloadReport/CouponCounter/index.tsx | 32 +++++ .../DownloadReport/CouponRate/index.tsx | 28 +++++ .../GraphSection/DownloadReport/index.tsx | 110 +++++++++++++++--- .../GraphSection/index.tsx | 4 + 4 files changed, 158 insertions(+), 16 deletions(-) diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponCounter/index.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponCounter/index.tsx index c3cbf4c7..1d74b2ca 100644 --- a/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponCounter/index.tsx +++ b/src/components/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` 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 10px; + + align-self: center; + + font-size: 12px; + } `; const ResultContainer = styled.div` @@ -63,4 +82,17 @@ const ResultContainer = styled.div` font-weight: 700; box-shadow: ${theme.shadow.medium}; + + ${theme.response.tablet} { + width: 80%; + + padding: 10px 0px; + border-radius: 6px; + + align-self: center; + + font-size: 12px; + + white-space: nowrap; + } `; diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponRate/index.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponRate/index.tsx index d0b98491..7fa91361 100644 --- a/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponRate/index.tsx +++ b/src/components/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,6 +64,10 @@ const Title = styled.div` color: #202325; font-size: 17px; font-weight: 700; + + ${theme.response.tablet} { + font-size: 12px; + } `; const Description = styled.p` @@ -59,6 +75,10 @@ const Description = styled.p` 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.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/index.tsx index d292146d..55475efd 100644 --- 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 = () => { - - - - - - - + + 다운로드 리포트 + + + 매월 1일 00시 00분에 업데이트 + + + + + + + + + + + ); @@ -59,6 +69,10 @@ const Header = styled.div` display: flex; align-items: center; + + ${theme.response.tablet} { + display: none; + } `; const Title = styled.span` @@ -82,16 +96,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 +137,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 +154,45 @@ 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` + color: #484e59; + 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/index.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/index.tsx index 883f5d85..21929d31 100644 --- a/src/components/Dashboard/DashboardLeftSection/GraphSection/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/GraphSection/index.tsx @@ -89,4 +89,8 @@ const LeftSection = styled.div` const RightSection = styled.div` width: 350px; height: 100%; + + ${theme.response.tablet} { + width: 100%; + } `; From f36c461c3968d39544f1eb2cf23288d074292844 Mon Sep 17 00:00:00 2001 From: TeukHee Date: Wed, 24 Jan 2024 13:49:42 +0900 Subject: [PATCH 4/8] =?UTF-8?q?design:=20=EC=A7=80=EC=97=AD=20=EC=88=99?= =?UTF-8?q?=EC=86=8C=20=EC=BF=A0=ED=8F=B0=20=ED=98=84=ED=99=A9=20=EC=84=B9?= =?UTF-8?q?=EC=85=98=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LocalCouponUsage/index.tsx | 101 ++++++++++++++++++ .../LocalInformationSection/index.tsx | 16 +++ 2 files changed, 117 insertions(+) diff --git a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/index.tsx b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/index.tsx index 965cbaf7..37cbf3c2 100644 --- a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/index.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; +import theme from '@styles/theme'; import { useGetLocalCouponUsage } from '@hooks/index'; import { headerAccommodationState } from '@recoil/index'; import reloadIcon from '@assets/icons/ic-dashboard-reload.svg'; @@ -33,6 +34,24 @@ const LocalCouponUsage = () => { 매월 1일 00시 00분에 업데이트 + + 우리 지역 숙소의 쿠폰 현황 + + ｜ + + {data.address} 기준 + + + + + 매월 1일 00시 00분에 업데이트 + span { + font-size: 11px; + } + } `; const MainInformation = styled.div` @@ -168,6 +211,10 @@ const MainInformation = styled.div` font-weight: 700; animation: fadeUp 0.5s; + + ${theme.response.tablet} { + font-size: 11px; + } `; const LocationIcon = styled.img` @@ -187,8 +234,62 @@ const BigLocationIcon = styled.img` height: 130px; z-index: 10; + + ${theme.response.tablet} { + right: 10px; + bottom: 0; + + width: 65px; + } `; const GpsIcon = styled.img` padding: 1px 1px 1px 3px; `; + +const MobileHeader = styled.div` + align-self: flex-start; + display: none; + align-items: center; + + ${theme.response.tablet} { + display: flex; + } +`; + +const MobileTitle = styled.div` + font-size: 15px; + font-weight: 700; +`; + +const MobileLocation = styled.div` + display: flex; + align-items: center; + + font-size: 10px; + font-weight: 700; + + & > img { + width: 15px; + + padding: 0px; + } +`; + +const MobileUpdateAlarm = styled.span` + padding: 5px 0px; + + align-self: flex-start; + display: flex; + align-items: center; + + color: #6c7072; + font-size: 8px; + font-weight: 400; + + & > img { + width: 14px; + + padding-bottom: 0px; + } +`; diff --git a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/index.tsx b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/index.tsx index 412bd973..50d7bacd 100644 --- a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/index.tsx @@ -9,6 +9,7 @@ import Top3CouponRankingLoading from './Top3Coupons/index.loading'; const LocalCouponUsage = React.lazy(() => import('./LocalCouponUsage')); import LocalUsageErrorFallback from './LocalCouponUsage/index.error'; import LocalUsageLoading from './LocalCouponUsage/index.loading'; +import theme from '@styles/theme'; const LocalInformationSection = () => { const { reset } = useQueryErrorResetBoundary(); @@ -55,15 +56,30 @@ const Container = styled.div` gap: 12px; background-color: white; + + ${theme.response.tablet} { + margin-top: 0; + padding: 10px; + + flex-direction: column; + } `; const LeftSection = styled.div` height: 100%; flex: 1; + + ${theme.response.tablet} { + width: 100%; + } `; const RightSection = styled.div` width: 410px; height: 100%; + + ${theme.response.tablet} { + width: 100%; + } `; From a7b28cde266975bfa66e9b9566e2a416c3ab2c7f Mon Sep 17 00:00:00 2001 From: TeukHee Date: Wed, 24 Jan 2024 14:17:04 +0900 Subject: [PATCH 5/8] =?UTF-8?q?design:=20=EC=A7=80=EC=97=AD=EA=B5=AC=20top?= =?UTF-8?q?3=20=EC=BF=A0=ED=8F=B0=20=EC=84=B9=EC=85=98=20=EB=AA=A8?= =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Top3Coupons/RankingBox/index.tsx | 9 +++++++++ .../Top3Coupons/index.tsx | 19 +++++++++++++++++++ .../LocalInformationSection/index.tsx | 1 + 3 files changed, 29 insertions(+) diff --git a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/RankingBox/index.tsx b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/RankingBox/index.tsx index b77817a8..3cd5151a 100644 --- a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/RankingBox/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/RankingBox/index.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { RankingBoxProps, RankingBoxStyleProps } from '@/types/dashboard'; +import theme from '@styles/theme'; const RankingBox = ({ children, rank }: RankingBoxProps) => { return ( @@ -34,6 +35,10 @@ const Container = styled.div` font-weight: 700; background-color: #fff; + + ${theme.response.tablet} { + font-size: 11px; + } `; const RankingBadge = styled.div` @@ -56,6 +61,10 @@ const RankingBadge = styled.div` return '#00D39B'; } }}; + + ${theme.response.tablet} { + font-size: 10px; + } `; const RankingContent = styled.div` diff --git a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/index.tsx b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/index.tsx index fc1b0600..474059a0 100644 --- a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/index.tsx @@ -5,6 +5,7 @@ import arrowIcon from '@assets/icons/ic-dashboard-arrow.svg'; import RankingBox from './RankingBox'; import { useGetCouponRanking } from '@hooks/index'; import { headerAccommodationState } from '@recoil/index'; +import theme from '@styles/theme'; const LocalTop3Coupons = () => { const headerSelectState = useRecoilValue(headerAccommodationState); @@ -83,6 +84,10 @@ const RankingSection = styled.div` justify-content: center; gap: 10px; flex: 1; + + ${theme.response.tablet} { + padding: 10px 0px; + } `; const InformationSection = styled.div` @@ -106,6 +111,10 @@ const InformationHeader = styled.div` color: #415574; font-size: 17px; + + ${theme.response.tablet} { + font-size: 13px; + } `; const InformationLabel = styled.div` @@ -125,6 +134,10 @@ const InformationLabel = styled.div` & > span { color: #4777f0; } + + ${theme.response.tablet} { + font-size: 13px; + } `; const InformationSubText = styled.div` @@ -134,6 +147,12 @@ const InformationSubText = styled.div` font-size: 13.005px; text-align: end; line-height: 1.4; + + ${theme.response.tablet} { + padding: 10px 0px 0px 0px; + + font-size: 10px; + } `; const ArrowIcon = styled.img` diff --git a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/index.tsx b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/index.tsx index 50d7bacd..07e7c1ed 100644 --- a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/index.tsx @@ -62,6 +62,7 @@ const Container = styled.div` padding: 10px; flex-direction: column; + gap: 20px; } `; From 18ebff59874c93ae4d5826e40d10b54363367131 Mon Sep 17 00:00:00 2001 From: TeukHee Date: Wed, 24 Jan 2024 18:02:03 +0900 Subject: [PATCH 6/8] =?UTF-8?q?design:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=B4=EC=99=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DownloadReport/CouponCounter/index.tsx | 10 +++++----- .../GraphSection/DownloadReport/index.tsx | 2 -- .../DashboardLeftSection/GraphSection/index.tsx | 1 + .../LocalCouponUsage/index.tsx | 11 +++++++---- .../LocalInformationSection/Top3Coupons/index.tsx | 8 ++++++++ .../DailyReportSection/index.tsx | 1 + 6 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponCounter/index.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponCounter/index.tsx index 1d74b2ca..46cb1d12 100644 --- a/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponCounter/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/CouponCounter/index.tsx @@ -57,11 +57,11 @@ const Header = styled.div` white-space: nowrap; ${theme.response.tablet} { - padding: 0px 10px 10px; + padding: 0px 10px 5px; - align-self: center; + text-align: center; - font-size: 12px; + font-size: 11px; } `; @@ -84,14 +84,14 @@ const ResultContainer = styled.div` box-shadow: ${theme.shadow.medium}; ${theme.response.tablet} { - width: 80%; + width: 85%; padding: 10px 0px; border-radius: 6px; align-self: center; - font-size: 12px; + font-size: 11px; white-space: nowrap; } diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/index.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/index.tsx index 55475efd..f9b7ea7b 100644 --- a/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/index.tsx @@ -76,7 +76,6 @@ const Header = styled.div` `; const Title = styled.span` - color: #484e59; font-size: 18px; font-weight: 700; `; @@ -181,7 +180,6 @@ const MobileHeader = styled.div` `; const MobileTitle = styled.span` - color: #484e59; font-size: 15px; font-weight: 700; `; diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/index.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/index.tsx index 21929d31..72cef552 100644 --- a/src/components/Dashboard/DashboardLeftSection/GraphSection/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/GraphSection/index.tsx @@ -73,6 +73,7 @@ const InnerContainer = styled.div` ${theme.response.tablet} { flex-direction: column; + gap: 20px; } `; diff --git a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/index.tsx b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/index.tsx index 37cbf3c2..be8320ba 100644 --- a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/index.tsx @@ -82,8 +82,6 @@ const Container = styled.div` display: flex; flex-direction: column; - - color: #404446; `; const Header = styled.div` @@ -138,6 +136,7 @@ const InnerContainer = styled.div` ${theme.response.tablet} { margin: 0px; + border-radius: 10px; } `; @@ -222,7 +221,7 @@ const LocationIcon = styled.img` `; const ReloadIcon = styled.img` - padding: 0px 3px 2px 0px; + padding-right: 3px; `; const BigLocationIcon = styled.img` @@ -280,7 +279,7 @@ const MobileUpdateAlarm = styled.span` padding: 5px 0px; align-self: flex-start; - display: flex; + display: none; align-items: center; color: #6c7072; @@ -292,4 +291,8 @@ const MobileUpdateAlarm = styled.span` padding-bottom: 0px; } + + ${theme.response.tablet} { + display: flex; + } `; diff --git a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/index.tsx b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/index.tsx index 474059a0..f67fb583 100644 --- a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/index.tsx @@ -56,6 +56,10 @@ const Container = styled.div` border-radius: 16px; background-color: #fafafb; + + ${theme.response.tablet} { + border-radius: 10px; + } `; const InnerContainer = styled.div` @@ -104,6 +108,10 @@ const InformationSection = styled.div` font-weight: 700; background-color: #ecf0fa; + + ${theme.response.tablet} { + padding-right: 20px; + } `; const InformationHeader = styled.div` diff --git a/src/components/Dashboard/DashboardRightSection/DailyReportSection/index.tsx b/src/components/Dashboard/DashboardRightSection/DailyReportSection/index.tsx index db8dbdda..c21399ae 100644 --- a/src/components/Dashboard/DashboardRightSection/DailyReportSection/index.tsx +++ b/src/components/Dashboard/DashboardRightSection/DailyReportSection/index.tsx @@ -40,6 +40,7 @@ const Container = styled.div` margin: 5px 10px; padding: 15px; + border-radius: 10px; background-color: #fafafb; } From caa115b8f712d4c01698454dba4feb451f8ec5de Mon Sep 17 00:00:00 2001 From: TeukHee Date: Wed, 24 Jan 2024 18:10:22 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EB=AA=A8=EB=B0=94=EC=9D=BC=ED=97=A4=EB=8D=94=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dashboard/DashboardRightSection/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Dashboard/DashboardRightSection/index.tsx b/src/components/Dashboard/DashboardRightSection/index.tsx index 47d3e6cb..23d663ad 100644 --- a/src/components/Dashboard/DashboardRightSection/index.tsx +++ b/src/components/Dashboard/DashboardRightSection/index.tsx @@ -9,12 +9,14 @@ import StatusErrorFallback from './CouponStatusSection/index.error'; import StatusSectionLoading from './CouponStatusSection/index.loading'; import DailyReportErrorFallback from './DailyReportSection/index.error'; import DailyReportLoading from './DailyReportSection/index.loading'; +import { MobileDashboardHeader } from '@components/common'; const DashboardRightSection = () => { const { reset } = useQueryErrorResetBoundary(); return ( + Date: Wed, 24 Jan 2024 21:44:12 +0900 Subject: [PATCH 8/8] =?UTF-8?q?design:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EB=A1=9C=EB=94=A9=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DownloadReport/index.loading.tsx | 19 +++++ .../GraphContainer/index.loading.tsx | 16 ++++ .../GraphSection/GraphContainer/index.tsx | 4 - .../LocalCouponUsage/index.loading.tsx | 24 ++++++ .../Top3Coupons/index.loading.tsx | 10 +++ .../CouponStatusSection/index.error.tsx | 82 +++++++++++++++++-- .../CouponStatusSection/index.loading.tsx | 48 +++++++++-- .../DailyReportSection/index.loading.tsx | 34 ++++++++ 8 files changed, 218 insertions(+), 19 deletions(-) diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/index.loading.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/DownloadReport/index.loading.tsx index 33f7c646..69ef742b 100644 --- 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 ( @@ -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/GraphContainer/index.loading.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/index.loading.tsx index 0bb2f265..671e5d5a 100644 --- 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 ( @@ -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); + } `; diff --git a/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/index.tsx b/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/index.tsx index 527e106b..8586a26d 100644 --- a/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/index.tsx +++ b/src/components/Dashboard/DashboardLeftSection/GraphSection/GraphContainer/index.tsx @@ -36,10 +36,6 @@ ChartJS.register( BarController ); -//HACK: 그래프 데이터 렌더링에 대한 테스트파일입니다. 실제 기능 구현에서는 해당 파일 다소 변경될 것 같습니다. - -//HACK 추후 utils에 적절한 폴더 생기면 옮길 예정 - const GraphContainer = () => { const headerSelectedState = useRecoilValue(headerAccommodationState); const { data } = useGetMonthReports(headerSelectedState.id); diff --git a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/index.loading.tsx b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/index.loading.tsx index 993866dc..699670fb 100644 --- a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/index.loading.tsx +++ b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/LocalCouponUsage/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 ( @@ -25,6 +27,16 @@ const Container = styled.div` justify-content: center; gap: 10px; + + ${theme.response.tablet} { + gap: 0px; + + border-radius: 10px; + + padding: 10px; + + background-color: #fafafb; + } `; const BaseSkeleton = styled(Skeleton)` @@ -53,6 +65,10 @@ const TitleLoading = styled(BaseSkeleton)` margin: 0; padding: 0; + + ${theme.response.tablet} { + height: 20px; + } `; const SubTitleLoading = styled(BaseSkeleton)` @@ -64,8 +80,16 @@ const SubTitleLoading = styled(BaseSkeleton)` display: flex; align-items: center; + + ${theme.response.tablet} { + height: 10px; + } `; const InnerContainer = styled(BaseSkeleton)` height: 180px; + + ${theme.response.tablet} { + height: 120px; + } `; diff --git a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/index.loading.tsx b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/index.loading.tsx index 1b849f85..1cda7fd8 100644 --- a/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/index.loading.tsx +++ b/src/components/Dashboard/DashboardLeftSection/LocalInformationSection/Top3Coupons/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 ( @@ -22,6 +24,10 @@ const Container = styled.div` border-radius: 16px; background-color: #fafafb; + + ${theme.response.tablet} { + height: 200px; + } `; const BaseSkeleton = styled(Skeleton)` @@ -53,4 +59,8 @@ const RankingSectionLoading = styled(BaseSkeleton)` flex: 1; background-color: #f2f4f5; + + ${theme.response.tablet} { + width: 40vw; + } `; diff --git a/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.error.tsx b/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.error.tsx index 14f05fb9..1ef046ef 100644 --- a/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.error.tsx +++ b/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.error.tsx @@ -1,14 +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 ( - - 이번 달 똑똑 현황 -
에러 발생 - - 다시 시도 + + 이번 달 똑똑 현황을 불러올 수 없습니다. + + + 다시 시도 하기 + ); }; @@ -16,6 +27,7 @@ const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => { export default ErrorFallback; const Container = styled.div` + width: 250px; height: 55%; min-height: 481px; @@ -29,12 +41,70 @@ const Container = styled.div` gap: 30px; background-color: white; + + ${theme.response.tablet} { + width: 100%; + height: auto; + min-height: auto; + + flex-direction: row; + } `; const ErrorMessage = styled.span` text-align: center; font-size: 18px; font-weight: 700; + + ${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: 15px; + text-align: center; + + transition: all 0.5s; + + &:hover { + color: gray; + } + + ${theme.response.tablet} { + margin-top: 10px; + + font-size: 10px; + } `; -const RetryButton = styled.button``; +const ReloadIcon = styled.img` + width: 25px; + height: 25px; + + margin-right: 10px; + + ${theme.response.tablet} { + width: 15px; + height: 15px; + } +`; + +const ErrorIcon = styled.img` + width: 60px; + height: 60px; + + ${theme.response.tablet} { + width: 40px; + height: 40px; + } +`; diff --git a/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.loading.tsx b/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.loading.tsx index c876798c..cff49dad 100644 --- a/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.loading.tsx +++ b/src/components/Dashboard/DashboardRightSection/CouponStatusSection/index.loading.tsx @@ -2,12 +2,16 @@ 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 (
- + + + ); @@ -29,13 +33,20 @@ const Container = styled.div` gap: 20px; background-color: white; + + ${theme.response.tablet} { + min-height: auto; + height: auto; + + padding: 10px; + + gap: 10px; + } `; const BaseSkeleton = styled(Skeleton)` width: 100%; - margin: none; - padding: none; border-radius: 12px; background-color: #f2f4f5; @@ -48,6 +59,23 @@ const Header = styled(BaseSkeleton)` flex: 2; border-radius: 12px; + + ${theme.response.tablet} { + border-radius: 8px; + } +`; + +const InnerContainer = styled.div` + width: 100%; + + display: flex; + flex-direction: column; + flex: 6; + + ${theme.response.tablet} { + flex-direction: row; + justify-content: space-between; + } `; const LoadingContent = styled(BaseSkeleton)` @@ -59,12 +87,14 @@ const LoadingContent = styled(BaseSkeleton)` display: flex; flex-direction: column; justify-content: center; -`; -const InnerContainer = styled.div` - width: 100%; + ${theme.response.tablet} { + width: 29vw; + height: 40px; - display: flex; - flex-direction: column; - flex: 6; + border-radius: 10px; + + flex-direction: row; + justify-content: space-between; + } `; diff --git a/src/components/Dashboard/DashboardRightSection/DailyReportSection/index.loading.tsx b/src/components/Dashboard/DashboardRightSection/DailyReportSection/index.loading.tsx index e770e17b..8d9cd741 100644 --- a/src/components/Dashboard/DashboardRightSection/DailyReportSection/index.loading.tsx +++ b/src/components/Dashboard/DashboardRightSection/DailyReportSection/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 ( @@ -34,6 +36,18 @@ const Container = styled.div` gap: 5px; background-color: white; + + ${theme.response.tablet} { + width: 100%; + min-height: auto; + + margin: 0px; + padding: 20px; + + gap: 0px; + + background-color: transparent; + } `; const BaseSkeleton = styled(Skeleton)` @@ -53,6 +67,12 @@ const Header = styled.div` flex-direction: column; flex: 1; gap: 10px; + + ${theme.response.tablet} { + width: 200px; + + flex: 0; + } `; const Title = styled(BaseSkeleton)` @@ -75,6 +95,12 @@ const InnerContainer = styled.div` align-items: center; justify-content: center; flex: 6; + + ${theme.response.tablet} { + min-height: auto; + + flex: 0; + } `; const SubContentLoading = styled(BaseSkeleton)` @@ -86,6 +112,10 @@ const SubContentLoading = styled(BaseSkeleton)` padding: none; margin: none; + + ${theme.response.tablet} { + display: none; + } `; const MainContentLoading = styled(BaseSkeleton)` @@ -94,4 +124,8 @@ const MainContentLoading = styled(BaseSkeleton)` padding: none; margin: none; + + ${theme.response.tablet} { + width: 90vw; + } `;