Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 로딩화면에 동아리 로고 추가 #12

Merged
merged 1 commit into from
Sep 4, 2024
Merged

feat: 로딩화면에 동아리 로고 추가 #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 47 additions & 38 deletions src/pages/ResultLoading.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
`;
48 changes: 26 additions & 22 deletions src/pages/ResultLoading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<LoadingContainer>
<TypingAnimation
texts={texts}
typingInterval={typingInterval}
deleteInterval={deleteInterval}
waitInterval={waitInterval}
/>
<EmojiAnimation />
</LoadingContainer>
);
return (
<LoadingContainer>
<DongariImage src={dongari} alt="동BTI 로고이미지" />
<TypingAnimation
texts={texts}
typingInterval={typingInterval}
deleteInterval={deleteInterval}
waitInterval={waitInterval}
/>
<EmojiAnimation />
</LoadingContainer>
);
};

export default ResultLoading;