From c976e6c4d34c9deecdf94c1de0253ba28bdcb755 Mon Sep 17 00:00:00 2001 From: aaminha Date: Sat, 8 Jun 2024 04:15:25 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20define=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B7=B0=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DefineStartPage/DefineMobileView.tsx | 9 ++++- src/components/DefineTestPage/TestSection.tsx | 33 ++++++++++++++++--- .../DefineTestPage/TestSectionTitle.tsx | 2 +- .../DefineTestPage/ToastMessage.tsx | 4 +++ src/pages/LoadingPage.tsx | 2 ++ src/styles/theme/device.ts | 2 +- src/utils/setScreenSize.ts | 4 +++ 7 files changed, 49 insertions(+), 7 deletions(-) create mode 100644 src/utils/setScreenSize.ts diff --git a/src/components/DefineStartPage/DefineMobileView.tsx b/src/components/DefineStartPage/DefineMobileView.tsx index ff16e65..836b772 100644 --- a/src/components/DefineStartPage/DefineMobileView.tsx +++ b/src/components/DefineStartPage/DefineMobileView.tsx @@ -1,9 +1,16 @@ +import { useEffect } from 'react'; + import { styled } from 'styled-components'; import backgroundImg from '@/assets/backgrounds/defineBackground.png'; import { PlainButton } from '@/components/common/Button/PlainButton'; +import { setScreenSize } from '@/utils/setScreenSize'; export const DefineMobileView = ({ onNext }: { onNext: () => void }) => { + useEffect(() => { + setScreenSize(); + }, []); + return ( @@ -121,7 +128,7 @@ const ViewContainer = styled.div` justify-content: center; align-items: center; width: 100%; - height: 100vh; + height: calc(var(--vh, 1vh) * 100); min-height: 700px; background-image: url(${backgroundImg}); background-size: cover; diff --git a/src/components/DefineTestPage/TestSection.tsx b/src/components/DefineTestPage/TestSection.tsx index f8df128..44825da 100644 --- a/src/components/DefineTestPage/TestSection.tsx +++ b/src/components/DefineTestPage/TestSection.tsx @@ -91,7 +91,7 @@ export const TestSection = ({ )} - 종료하기를 누르면 해당 단계부터 이어서 검사를 진행할 수 있어요! + {'종료하기를 누르면 해당 단계부터\n이어서 검사를 진행할 수 있어요!'} @@ -113,20 +113,35 @@ const StyledContainer = styled.div` padding: 24px; padding-top: 100px; + @media ${({ theme }) => theme.device.tablet} { + padding: 24px; + padding-top: 100px; + } + @media ${({ theme }) => theme.device.mobile} { + padding: 20px; + padding-top: 96px; + } + //zoom: 1.25; + + background:; `; const StyledContentContainer = styled.div` display: flex; flex-direction: column; - width: 552px; + width: 632px; height: 100%; max-height: 800px; flex: 1; - @media ${({ theme }) => theme.device.desktop} { - width: 632px; + @media ${({ theme }) => theme.device.tablet} { + width: 552px; + } + + @media ${({ theme }) => theme.device.mobile} { + width: 100%; } `; @@ -135,6 +150,7 @@ const StyledStepContainer = styled.div` display: flex; flex-direction: column; justify-content: space-between; + gap: 70px; position: relative; `; @@ -176,4 +192,13 @@ const StyledExplanation = styled.div` margin-top: 15px; text-align: center; + + @media ${({ theme }) => theme.device.tablet} { + ${({ theme }) => theme.font.mobile.label1m}; + } + + @media ${({ theme }) => theme.device.mobile} { + ${({ theme }) => theme.font.mobile.label1m}; + white-space: pre-line; + } `; diff --git a/src/components/DefineTestPage/TestSectionTitle.tsx b/src/components/DefineTestPage/TestSectionTitle.tsx index 1840fd6..e06867a 100644 --- a/src/components/DefineTestPage/TestSectionTitle.tsx +++ b/src/components/DefineTestPage/TestSectionTitle.tsx @@ -14,7 +14,7 @@ export const TestSectionTitle = ({ steps, currentStep }: TestSectionTitleProps)
{steps.indexOf(currentStep)} / {steps.length - 1}
- +
나에게 해당되는 키워드는 무엇인가요?
diff --git a/src/components/DefineTestPage/ToastMessage.tsx b/src/components/DefineTestPage/ToastMessage.tsx index ef0348b..db77e26 100644 --- a/src/components/DefineTestPage/ToastMessage.tsx +++ b/src/components/DefineTestPage/ToastMessage.tsx @@ -61,6 +61,10 @@ const StyledContainer = styled.div` position: absolute; left: 0; bottom: 100px; + + @media ${({ theme }) => theme.device.mobile} { + bottom: 120px; + } `; const StyledText = styled.div` diff --git a/src/pages/LoadingPage.tsx b/src/pages/LoadingPage.tsx index bdd81cf..15332cd 100644 --- a/src/pages/LoadingPage.tsx +++ b/src/pages/LoadingPage.tsx @@ -6,6 +6,7 @@ import styled, { keyframes } from 'styled-components'; import { ReactComponent as Logo } from '@/assets/logos/logo3d.svg'; import { loadingHandlerState } from '@/recoil/loadingHandlerState'; import { loadingState } from '@/recoil/loadingState'; +import { setScreenSize } from '@/utils/setScreenSize'; export const LoadingPage = () => { const [progress, setProgress] = useState(0); @@ -14,6 +15,7 @@ export const LoadingPage = () => { const interval = loading.speed; useEffect(() => { + setScreenSize(); const timer = setInterval(() => { setProgress((prev) => { const next = prev + 1; diff --git a/src/styles/theme/device.ts b/src/styles/theme/device.ts index 5ff7bed..27592a8 100644 --- a/src/styles/theme/device.ts +++ b/src/styles/theme/device.ts @@ -5,7 +5,7 @@ export const deviceSizes = { }; export const device = { - mobile: `screen and (min-width: ${deviceSizes.mobile}px) and (max-width: ${deviceSizes.tablet}px)`, + mobile: `screen and (max-width: ${deviceSizes.tablet}px)`, tablet: `screen and (min-width: ${deviceSizes.tablet}px) and (max-width: ${deviceSizes.desktop}px)`, desktop: `screen and (min-width: ${deviceSizes.desktop}px)`, }; diff --git a/src/utils/setScreenSize.ts b/src/utils/setScreenSize.ts new file mode 100644 index 0000000..77537a3 --- /dev/null +++ b/src/utils/setScreenSize.ts @@ -0,0 +1,4 @@ +export const setScreenSize = () => { + const vh = window.innerHeight * 0.01; + document.documentElement.style.setProperty('--vh', `${vh}px`); +};