Merge pull request #84 from KUSITMS-29th-TEAM-D/develop

fix: define 테스트 모바일 뷰 오류 수정
KUSITMS-29th-TEAM-D · Jun 7, 2024 · 8a967c0 · 8a967c0
2 parents 2cf3251 + 26ead2b
commit 8a967c0
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 7 deletions.
diff --git 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 (
     <ViewContainer>
       <StyledContainer>
@@ -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
@@ -91,7 +91,7 @@ export const TestSection = ({
               )}
             </StyledButtonContainer>
             <StyledExplanation>
-              종료하기를 누르면 해당 단계부터 이어서 검사를 진행할 수 있어요!
+              {'종료하기를 누르면 해당 단계부터\n이어서 검사를 진행할 수 있어요!'}
             </StyledExplanation>
           </div>
           <ToastMessage />
@@ -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
@@ -14,7 +14,7 @@ export const TestSectionTitle = ({ steps, currentStep }: TestSectionTitleProps)
         <div className="title">
           <span>{steps.indexOf(currentStep)}</span> / {steps.length - 1}
         </div>
-        <ProgressBar $currentStep={steps.indexOf(currentStep) + 1} $totalSteps={steps.length} />
+        <ProgressBar $currentStep={steps.indexOf(currentStep)} $totalSteps={steps.length - 1} />
       </StyledProgressBar>
       <StyledTitle>
         <div className="title">나에게 해당되는 키워드는 무엇인가요?</div>

diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,4 @@
+export const setScreenSize = () => {
+  const vh = window.innerHeight * 0.01;
+  document.documentElement.style.setProperty('--vh', `${vh}px`);
+};