Merge pull request #39 from lagohalttae/refactor/#38-jungkyun-refactor

Refactor/#38 jungkyun refactor
lagohalttae · Aug 25, 2022 · a605792 · a605792
2 parents f3978a1 + c8e053f
commit a605792
Show file tree

Hide file tree

Showing 7 changed files with 249 additions and 229 deletions.
diff --git a/src/components/calculation/index.tsx b/src/components/calculation/index.tsx
@@ -131,9 +131,9 @@ const SmilePepeImage = styled.img`
   width: 30vw;
   bottom: 0vh;
 
-  @media (max-width: 1023px) {
+  /* @media (max-width: 1023px) {
     display: none;
-  }
+  } */
   @media (max-width: 480px) {
     display: block;
     height: 50vh;
@@ -215,7 +215,7 @@ export function Calculation() {
     <Wrapper>
       <Container onSubmit={handleSubmit}>
         <InputContainer>
-          <Fade direction="up">
+          <Fade direction="up" triggerOnce>
             <InputBox>
               <PriceInput
                 placeholder="가격을 입력해주세요."
@@ -236,20 +236,20 @@ export function Calculation() {
             ''
           )}
         </InputContainer>
-        <Fade direction="up" delay={500}>
+        <Fade direction="up" delay={500} triggerOnce>
           <DateBox>
             <LowDate>{dateToString(new Date(coinPrice?.minPrice?.atMillis))}</LowDate>에 풀매수해서
           </DateBox>
         </Fade>
-        <Fade direction="up" delay={1000}>
+        <Fade direction="up" delay={1000} triggerOnce>
           <DateBox>
             <HighDate>{dateToString(new Date(coinPrice?.maxPrice?.atMillis))}</HighDate>에 풀매도
             했다면..?
           </DateBox>
         </Fade>
         {!calculateButton.isClicked ? (
           <ButtonBox>
-            <Fade direction="up" delay={1500}>
+            <Fade direction="up" delay={1500} triggerOnce>
               <HappyButton onClick={handleCalculateWithClick} onKeyUp={handleCalculateWithEnter}>
                 행복회로 ON
               </HappyButton>

diff --git a/src/components/common/ViewportTypography.tsx b/src/components/common/ViewportTypography.tsx
@@ -1,7 +1,7 @@
 import styled, { DefaultTheme } from 'styled-components';
 
 type ViewportTypographyProps = {
-  size?: '2' | '4' | '6' | '10';
+  size?: '2' | '3' | '5' | '4' | '6' | '10';
   weight?: '400' | '500' | '600' | '700' | '900';
   color?: string;
   marginBottom?: number;

diff --git a/src/components/mainTitle/index.tsx b/src/components/mainTitle/index.tsx
@@ -14,6 +14,9 @@ import downarrow from '../../assets/images/downarrow.svg';
 
 const S = {
   Container: styled.div`
+    height: 100vh;
+  `,
+  TextContainer: styled.div`
     position: absolute;
     top: 25vh;
     left: 5vw;
@@ -27,9 +30,9 @@ const S = {
     @media (max-width: 1439px) {
       right: -27%;
     }
-    @media (max-width: 1023px) {
+    /* @media (max-width: 1023px) {
       display: none;
-    }
+    } */
   `,
   SelectCoinContainer: styled.div`
     margin-top: 3vh;
@@ -223,19 +226,19 @@ function SelectCoinContainer() {
 
 function MainTitle(): any {
   return (
-    <>
-      <S.Container>
+    <S.Container>
+      <S.TextContainer>
         <Fade delay={1000} direction="up" triggerOnce>
           <ViewportTypography size="6" weight="700" color={GreenColor}>
             라고 할 때
           </ViewportTypography>
         </Fade>
         <SelectCoinContainer />
-      </S.Container>
+      </S.TextContainer>
       <Slide triggerOnce direction="right" duration={1000}>
         <S.PepeImage src={pepeImage} alt="pepe" />
       </Slide>
-    </>
+    </S.Container>
   );
 }