From 02ed944df5d1876cdfcf39107965fd601f64a71c Mon Sep 17 00:00:00 2001
From: soo yeon <80268199+sypaik-dev@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:24:37 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=95=A0=EB=8B=88=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=ED=99=94=20=EB=B0=8F=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SplashPage/SplashPage.jsx | 35 ++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/pages/SplashPage/SplashPage.jsx b/src/pages/SplashPage/SplashPage.jsx
index a1973dd..813d32f 100644
--- a/src/pages/SplashPage/SplashPage.jsx
+++ b/src/pages/SplashPage/SplashPage.jsx
@@ -1,16 +1,18 @@
 import React from 'react';
+import styled from 'styled-components';
 import { useRecoilValue } from 'recoil';
-import SnsLoginPage from '../LoginPage/SnsLoginPage/SnsLoginPage';
 import { isDarkModeState } from '../../atoms/StylesAtom';
 import SplashLogo from '../../assets/images/full-logo.svg';
 import SplashDark from '../../assets/images/login-logo-dark.svg'
 import SplashTitle from '../../assets/images/main-title.svg';
 import SplashTitleDark from '../../assets/images/main-title-dark.svg'
-import { Container, Main, Logo, Title } from './SplashPageStyle';
+import SnsLoginPage from '../LoginPage/SnsLoginPage/SnsLoginPage';
+import { fadeIn, zoomIn } from '../../styles/Animation';
 
-const SplashPage = ({ theme }) => {
+const SplashPage = () => {
   const [isLoading, setIsLoading] = React.useState(true);
   const isDarkMode = useRecoilValue(isDarkModeState);
+
   React.useEffect(() => {
     const timer = setTimeout(() => {
       setIsLoading(false);
@@ -34,3 +36,30 @@ const SplashPage = ({ theme }) => {
 };
 
 export default SplashPage;
+
+export const Container = styled.div`
+`
+const Main = styled.main`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const Logo = styled.img`
+  display: block;
+  width: 20rem;
+  height: 20rem;
+  margin-bottom: 3rem;
+  animation: ${fadeIn} 1s ease-in-out forwards;
+`;
+
+const Title = styled.img`
+  width: 13rem;
+  height: 4rem;
+  opacity: 0;
+  animation: ${fadeIn} 1s ease-in-out forwards, ${zoomIn} 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s forwards;
+`;