test

outsung · Jan 31, 2021 · bcac27a · bcac27a
1 parent 81e2b68
commit bcac27a
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 11 deletions.
diff --git a/src/pages/ConfirmEmail/index.tsx b/src/pages/ConfirmEmail/index.tsx
@@ -1,8 +1,66 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { useParams } from 'react-router-dom';
 
 import { confirmEmail } from '../../container/users';
 
+interface typingEffectProps {
+  check: boolean;
+}
+const TypingEffect = ({ check }: typingEffectProps) => {
+  const time = useRef(0);
+  const ref = useRef({} as HTMLHeadingElement);
+  const handleRef = useRef({} as NodeJS.Timeout);
+
+  const texts = ['...확인..', '되셨습니다..'];
+  const between = '.';
+  const speed = 500;
+
+  console.log('TypingEffect : ', check);
+
+  useEffect(() => {
+    clearTimeout(handleRef.current);
+
+    const typeWriter = () => {
+      console.log(`time: ${time.current}, check: ${check}`);
+
+      let step = -1;
+      if (texts[0].length > time.current) step = 0;
+      else if (!check) step = 1;
+      else step = 2;
+
+      let char = '';
+      switch (step) {
+        case 0:
+          char = texts[0].charAt(time.current);
+          time.current += 1;
+          break;
+        case 1:
+          char = between;
+          break;
+        case 2:
+          char = texts[1].charAt(time.current - texts[0].length);
+          time.current += 1;
+          break;
+        default:
+      }
+
+      console.log(`step: ${step}, char: ${char}`);
+
+      ref.current.innerHTML += char;
+      handleRef.current = setTimeout(typeWriter, speed);
+    };
+    typeWriter();
+  }, [check]);
+
+  return (
+    <>
+      <h1 ref={ref} style={{ fontSize: 100, color: '#FFFFFF' }}>
+        {}
+      </h1>
+    </>
+  );
+};
+
 const ConfirmEmail = () => {
   const [emailVerified, setEmailVerified] = useState(false);
   const { key } = useParams<{ key: string }>();
@@ -22,15 +80,53 @@ const ConfirmEmail = () => {
 
   return (
     <>
-      {emailVerified ? (
-        <>
-          <div>확인 되었습니다.</div>
-          <br />
-          <Link to="/">로그인하러가기</Link>
-        </>
-      ) : (
-        <div>확인 중 입니다.</div>
-      )}
+      <div style={{ overflow: 'hidden', width: '100vw', height: '100vh' }}>
+        <div
+          style={{
+            position: 'absolute',
+            width: '100vw',
+            height: '100vh',
+            zIndex: 1000,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <TypingEffect check={emailVerified} />
+        </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>
     </>
   );
 };

diff --git a/src/pages/Signup/SignupForm/index.tsx b/src/pages/Signup/SignupForm/index.tsx
@@ -59,6 +59,15 @@ function SignupForm() {
       signupBtn.current.classList.remove('on');
       return;
     }
+    if (
+      !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+        email,
+      )
+    ) {
+      alert('이메일 형식이 아닙니다.');
+      signupBtn.current.disabled = false;
+      signupBtn.current.classList.remove('on');
+    }
 
     const res = await callApi.post<signupReq, signupRes>('users/signup', {
       id: email,