diff --git a/src/pages/ResultLoading.style.ts b/src/pages/ResultLoading.style.ts index 40b0606..daa522c 100644 --- a/src/pages/ResultLoading.style.ts +++ b/src/pages/ResultLoading.style.ts @@ -1,52 +1,61 @@ import styled from "@emotion/styled"; +export const DongariImage = styled('img')` + width: 125px; + height: 125px; + margin-bottom: 55px; +`; + export const LoadingContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; `; export const ZoomAnimation = styled.div` - font-size: 50px; - animation: zoom 1s infinite; - @keyframes zoom { - 0%, 100% { - transform: scale(1); + font-size: 50px; + animation: zoom 1s infinite; + @keyframes zoom { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } } - 50% { - transform: scale(1.2); - } - } `; export const TypingText = styled.div<{ isCursorBlinking: boolean }>` - font-size: 24px; - margin-bottom: 20px; - display: inline-flex; - align-items: center; - position: relative; - min-height: 1.5em; + font-size: 24px; + margin-bottom: 20px; + display: inline-flex; + align-items: center; + position: relative; + min-height: 1.5em; - &::after { - content: ""; - display: inline-block; - width: 2px; - height: 1em; - background-color: black; - position: absolute; - right: -8px; - bottom: 7px; - animation: ${({ isCursorBlinking }) => (isCursorBlinking ? 'blink 0.7s steps(1) infinite' : 'none')}; - } - - @keyframes blink { - 0%, 50% { - opacity: 1; + &::after { + content: ""; + display: inline-block; + width: 2px; + height: 1em; + background-color: black; + position: absolute; + right: -8px; + bottom: 7px; + animation: ${({ isCursorBlinking }) => (isCursorBlinking ? "blink 0.7s steps(1) infinite" : "none")}; } - 51%, 100% { - opacity: 0; + + @keyframes blink { + 0%, + 50% { + opacity: 1; + } + 51%, + 100% { + opacity: 0; + } } - } `; diff --git a/src/pages/ResultLoading.tsx b/src/pages/ResultLoading.tsx index 659f913..fc4d807 100644 --- a/src/pages/ResultLoading.tsx +++ b/src/pages/ResultLoading.tsx @@ -1,31 +1,35 @@ import React from "react"; -import TypingAnimation from "../components/display/TypingAnimation"; + +import dongari from "@/assets/images/dongari.png"; + import EmojiAnimation from "../components/display/EmojiAnimation"; -import { LoadingContainer } from "./ResultLoading.style"; +import TypingAnimation from "../components/display/TypingAnimation"; +import { LoadingContainer, DongariImage } from "./ResultLoading.style"; const ResultLoading: React.FC = () => { - const texts = [ - "당신의 취향을 분석하는 중...", - "잠시만 기다려 주세요...", - "취향 분석 중...", - "동아리 운명 분석 중... ", - ]; + const texts = [ + "당신의 취향을 분석하는 중...", + "잠시만 기다려 주세요...", + "취향 분석 중...", + "동아리 운명 분석 중... ", + ]; - const typingInterval = 30; - const deleteInterval = 10; - const waitInterval = 1500; + const typingInterval = 30; + const deleteInterval = 10; + const waitInterval = 1500; - return ( - - - - - ); + return ( + + + + + + ); }; export default ResultLoading;