Merge pull request #27 from info-dsm/#25-CreateLoadingPage&ErrorPage

UPDATE :: Update file location

src/components/common/error/index.jsx

@@ -1,8 +1,107 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import styled, { keyframes } from "styled-components";
+
 const ErrorPage = () => {
+  const arr = Array.from({ length: 3 }, () => {
+    return "404";
+  });
+
   return (
-    <>
-      <div>에러입니다</div>
-    </>
+    <MainDiv>
+      <Title>
+        {arr.map((t, i) => (
+          <Text index={i}>{t}</Text>
+        ))}
+      </Title>
+      <Description>PAGE NOT FOUND</Description>
+      <Link to={"/"}>
+        <Button>GO BACK HOME</Button>
+      </Link>
+    </MainDiv>
   );
 };
 export default ErrorPage;
+
+const MainDiv = styled.div`
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  background: linear-gradient(#7243ff, #ab91f8);
+  color: #fff;
+  font-weight: 600;
+`;
+
+const glitch = keyframes`
+  0% {
+    opacity: 0;
+    font-family: Arial;
+  };
+  60% {
+    opacity: 0.5;
+    font-style: oblique;
+  }
+  80% {
+    transform: none;
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0.8;
+    text-shadow: none;
+  }`;
+
+const Title = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+`;
+
+const Text = styled.span`
+  position: absolute;
+  top: 223px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-weight: bold;
+  font-size: 200px;
+  opacity: 0;
+  animation: ${glitch} .8s calc(${(props) => props.index} * 150ms + 0.5s)
+    forwards;
+`;
+
+const FadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+
+const Description = styled.div`
+  font-size: 40px;
+  position: absolute;
+  top: 479px;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  animation: ${FadeIn} 0.8s forwards linear;
+  animation-delay: 1.8s;
+`;
+
+const Button = styled.button`
+  cursor: pointer;
+  background-color: #fff;
+  border: none;
+  width: 400px;
+  height: 63px;
+  color: #ab91f8;
+  border-radius: 12px;
+  font-size: 20px;
+  font-weight: 700;
+  position: absolute;
+  top: 606px;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  animation: ${FadeIn} 0.8s forwards linear;
+  animation-delay: 2.3s;
+`;

src/components/common/loading/index.jsx

@@ -1,8 +1,87 @@
+import React from "react";
+import styled, { keyframes } from "styled-components";
+
 const LoadingPage = () => {
+  const str = ["L", "O", "A", "D", "I", "N", "G"];
+  const arr = Array.from({ length: str.length }, () => {
+    return "•";
+  });
   return (
-    <>
-      <div>로딩중입니다..</div>
-    </>
+    <MainDiv>
+      <DotContainer>
+        {arr.map((str, i) => (
+          <Dot delay={i * 0.4 - 2.7}>{str}</Dot>
+        ))}
+      </DotContainer>
+      {str.map((item, i) => (
+        <Text gap={i * 52} delay={i * 0.4 - 2.2}>
+          <>{item}</>
+        </Text>
+      ))}
+    </MainDiv>
   );
 };
 export default LoadingPage;
+
+const MainDiv = styled.div`
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  background: linear-gradient(#7243ff, #ab91f8);
+  color: #fff;
+  font-weight: 600;
+`;
+
+const MoveText = keyframes`
+    0% {
+        transform: translateY(6px);
+    }
+
+    8% {
+        transform: translateY(0px);
+    }
+`;
+
+const Text = styled.div`
+  position: absolute;
+  width: calc(100% - 286px);
+  left: calc(${(props) => props.gap}px);
+  /* transform: translateX(calc(-10% - ${(props) => props.gap}px)); */
+  font-size: 40px;
+  letter-spacing: 27px;
+
+  display: flex;
+  justify-content: center;
+  bottom: 45.2%;
+  animation: ${MoveText} 2.7s ease-in-out infinite;
+  animation-direction: alternate-reverse;
+  animation-delay: ${(props) => props.delay}s;
+`;
+
+const MoveDot = keyframes`
+    0% {
+        transform: translateY(-30px);
+    }
+
+    14% {
+        transform: translateY(0px);
+    }
+`;
+
+const Dot = styled.div`
+  font-size: 115px;
+  animation: ${MoveDot} 2.7s ease-in infinite;
+  animation-direction: alternate-reverse;
+  animation-delay: ${(props) => props.delay}s;
+`;
+
+const DotContainer = styled.div`
+  display: inline-flex;
+
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 52.2%;
+  height: 100px;
+  gap: 4px;
+`;