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;