complete ConfirmEmail page

outsung · Jan 31, 2021 · abc8638 · abc8638
1 parent 5ae96ce
commit abc8638
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 47 deletions.
diff --git a/src/pages/ConfirmEmail/index.tsx b/src/pages/ConfirmEmail/index.tsx
@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { Link, useParams } from 'react-router-dom';
 
+import { ConfirmEmailPage, ContentsBox, Filter, SlothVideo } from './style';
+
 import { confirmEmail } from '../../container/users';
 
 interface typingEffectProps {
@@ -62,6 +64,19 @@ const TypingEffect = ({ check, callback }: typingEffectProps) => {
   );
 };
 
+const BackgroundGif = () => (
+  <SlothVideo loop autoPlay muted>
+    <source
+      src="https://thumbs.gfycat.com/AdventurousPointlessGull-mobile.webm"
+      type="video/webm"
+    />
+    <source
+      src="https://thumbs.gfycat.com/AdventurousPointlessGull-mobile.mp4"
+      type="video/mp4"
+    />
+  </SlothVideo>
+);
+
 const ConfirmEmail = () => {
   const [btnVisible, setBtnVisible] = useState(false);
   const [emailVerified, setEmailVerified] = useState(false);
@@ -82,19 +97,8 @@ const ConfirmEmail = () => {
 
   return (
     <>
-      <div style={{ overflow: 'hidden', width: '100vw', height: '100vh' }}>
-        <div
-          style={{
-            position: 'absolute',
-            width: '100vw',
-            height: '100vh',
-            zIndex: 1000,
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
+      <ConfirmEmailPage>
+        <ContentsBox>
           <TypingEffect
             check={emailVerified}
             callback={() => {
@@ -115,40 +119,12 @@ const ConfirmEmail = () => {
           ) : (
             <></>
           )}
-        </div>
-        <video
-          style={{
-            position: 'relative',
-            height: 'calc(100vh + 36%)',
-            top: '-18%',
-          }}
-          loop
-          autoPlay
-          muted
-        >
-          <source
-            id="webmSource"
-            src="https://thumbs.gfycat.com/AdventurousPointlessGull-mobile.webm"
-            type="video/webm"
-          />
-          <source
-            id="mp4Source"
-            src="https://thumbs.gfycat.com/AdventurousPointlessGull-mobile.mp4"
-            type="video/mp4"
-          />
-        </video>
-        <div
-          style={{
-            backgroundColor: 'rgba(0,0,0,0.7)',
-            width: '100vw',
-            height: '100vh',
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            zIndex: 100,
-          }}
-        />
-      </div>
+        </ContentsBox>
+
+        <BackgroundGif />
+
+        <Filter opacity={btnVisible ? 0.8 : 0.7} />
+      </ConfirmEmailPage>
     </>
   );
 };

diff --git a/src/pages/ConfirmEmail/style.ts b/src/pages/ConfirmEmail/style.ts
@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+
+export const ConfirmEmailPage = styled.div`
+  width: 100vw;
+  height: 100vh;
+
+  overflow: hidden;
+`;
+
+export const ContentsBox = styled.div`
+  position: absolute;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 100vw;
+  height: 100vh;
+
+  z-index: 1000;
+`;
+
+export const Filter = styled.div<{ opacity: number }>`
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100vw;
+  height: 100vh;
+
+  background-color: ${(props) => `rgba(0, 0, 0, ${props.opacity})`};
+
+  z-index: 100;
+`;
+
+export const SlothVideo = styled.video`
+  position: relative;
+  top: -18%;
+
+  height: calc(100vh + 36%);
+`;