From 3705b8f67e62c5fa3463c856f00037a6f8e81adb Mon Sep 17 00:00:00 2001
From: kiyeong <kjr07145@gmail.com>
Date: Mon, 18 Nov 2024 21:17:06 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=B4=EC=8A=A4=ED=84=B0=EC=97=90?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Main/MainPage.tsx | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/Main/MainPage.tsx b/src/Main/MainPage.tsx
index 04ee334..54196d0 100644
--- a/src/Main/MainPage.tsx
+++ b/src/Main/MainPage.tsx
@@ -8,6 +8,7 @@ import {
   Center,
   Text,
   Spinner,
+  keyframes,
 } from "@chakra-ui/react";
 import api from "../api/interceptor"; // interceptor.ts에서 설정한 API 인스턴스 가져오기
 
@@ -27,11 +28,20 @@ type Content = {
   description: string;
 };
 
+const glitchKeyframes = keyframes`
+  0% { transform: translate(0, 0); }
+  20% { transform: translate(-5px, 5px); }
+  40% { transform: translate(5px, -5px); }
+  60% { transform: translate(-3px, 3px); }
+  80% { transform: translate(3px, -3px); }
+  100% { transform: translate(0, 0); }
+`;
+
 function MainPage(): JSX.Element {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
   const [randomContents, setRandomContents] = useState<Content[] | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [redirectCountdown, setRedirectCountdown] = useState<number>(10); // 5초 카운트다운
+  const [redirectCountdown, setRedirectCountdown] = useState<number>(10); // 10초 카운트다운
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -81,7 +91,12 @@ function MainPage(): JSX.Element {
   };
 
   return (
-    <Center minHeight="100vh" bg="gray.50" padding={4}>
+    <Center
+      minHeight="100vh"
+      bg={isLoggedIn ? "gray.50" : "black"}
+      padding={4}
+      animation={isLoggedIn ? undefined : `${glitchKeyframes} 0.1s infinite`}
+    >
       {isLoggedIn ? (
         <VStack
           spacing={6}
@@ -138,12 +153,16 @@ function MainPage(): JSX.Element {
           </Box>
         </VStack>
       ) : (
-        <Box textAlign="center">
-          <Text fontSize="xl" fontWeight="bold" mb={2}>
-            로그인하여 서비스를 이용해보세요!
+        <Box
+          textAlign="center"
+          animation={`${glitchKeyframes} 0.1s infinite`}
+          color="white"
+        >
+          <Text fontSize={["lg", "xl", "3xl"]} fontWeight="bold" mb={2}>
+            🤬올바른 경로로 접속하지 않았습니다.
           </Text>
-          <Text fontSize="lg" color="red.500">
-            {redirectCountdown}초 뒤 당신은 사망합니다
+          <Text fontSize={["md", "lg", "2xl"]} color="red.500">
+            {redirectCountdown}초 뒤 당신은 사망합니다.
           </Text>
         </Box>
       )}