Merge pull request #191 from YAPP-Github/dev

Release 0.1.9
YAPP-Github · Jul 28, 2022 · 7773fa8 · 7773fa8
2 parents 396851d + 88f52a3
commit 7773fa8
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/src/components/base/MultiRangeSlider.tsx b/src/components/base/MultiRangeSlider.tsx
@@ -103,6 +103,7 @@ const MultiRangeSlider = ({ initValue, min, max, onChange }: MultiRangeSliderPro
 };
 
 const Container = styled.div`
+  position: relative;
   height: 50px;
   display: flex;
   align-items: center;

diff --git a/src/components/base/SimpleRangeSlider.tsx b/src/components/base/SimpleRangeSlider.tsx
@@ -88,6 +88,7 @@ const SimpleRangeSlider = ({ min, max, initValue, isStep5 = false, onChange }: S
 };
 
 const Container = styled.div`
+  position: relative;
   height: 50px;
   display: flex;
   align-items: center;

diff --git a/src/components/domain/survey/SurveyTemplate.tsx b/src/components/domain/survey/SurveyTemplate.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import React, { MouseEventHandler, ReactNode } from 'react';
 import { Button } from '@/components/base';
 import ProgressBar, { ProgressBarProps } from '@/components/base/ProgressBar';
+import { palette } from '@/lib/styles/palette';
 
 interface SurveyTemplateProps extends Partial<ProgressBarProps> {
   children: ReactNode;
@@ -28,7 +29,7 @@ const SurveyTemplate = ({
       <HeaderWrapper>
         <Logo to="/">외딴썸</Logo>
       </HeaderWrapper>
-      {children}
+      <ContentsWrapper>{children}</ContentsWrapper>
       <NavigationWrapper>
         {hasProgressBar && <ProgressBar currStep={currStep} totalStep={totalStep} />}
         {!disabledFooter && (
@@ -73,10 +74,17 @@ export const Logo = styled(Link)`
   color: rgba(0, 0, 0, 0.8);
 `;
 
+const ContentsWrapper = styled.div`
+  overflow: scroll;
+  height: calc(100% - 56px - 117px - 38px - 20px);
+`;
+
 const NavigationWrapper = styled.div`
+  background-color: ${palette.backgroundColor};
   position: absolute;
   width: 100%;
   bottom: 38px;
+  z-index: 1000;
 `;
 
 const ButtonWrapper = styled.div`

diff --git a/src/pages/AuthMail.tsx b/src/pages/AuthMail.tsx
@@ -81,10 +81,8 @@ export const StyledButton = styled(Button)`
 `;
 
 export const FormWrapper = styled.div`
-  position: absolute;
   width: 100%;
   top: 40%;
-  transform: translateY(-50%);
   margin-top: 65px;
 `;