Merge pull request #103 from YAPP-Github/feat/login-lottie

Author: Seojunhwan

package.json

@@ -27,10 +27,11 @@
     "@vanilla-extract/css": "^1.17.2",
     "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/recipes": "^0.5.7",
-    "framer-motion": "^12.23.9",
     "es-toolkit": "^1.39.7",
+    "framer-motion": "^12.23.9",
     "iron-session": "^8.0.4",
     "ky": "1.7.5",
+    "lottie-react": "^2.4.1",
     "next": "15.3.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

pnpm-lock.yaml

@@ -1,9 +1,13 @@
 "use client";
 
+import Lottie from "lottie-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 
 import { useLoginMutation } from "@/app/(auth)/_api/auth/auth.queries";
+import loginSpinner from "@/assets/login-spinner.json";
+import { VStack } from "@/components/ui/Stack";
+import { Text } from "@/components/ui/Text";
 
 export default function AuthCallbackPage() {
   const router = useRouter();
@@ -38,5 +42,33 @@ export default function AuthCallbackPage() {
     }
   }, [code, login, router, next]);
 
-  return <div>로그인 중입니다...</div>;
+  return (
+    <VStack
+      gap={12}
+      align='center'
+      justify='center'
+      style={{ minHeight: "100dvh" }}
+    >
+      <Lottie animationData={loginSpinner} style={{ width: 76, height: 76 }} />
+
+      <VStack gap={4} align='center'>
+        <Text
+          as='h1'
+          typo='title2Md'
+          color='text.normal'
+          style={{ fontWeight: 700, textAlign: "center" }}
+        >
+          로그인 중입니다..
+        </Text>
+        <Text
+          as='p'
+          typo='body2Md'
+          color='text.alternative'
+          style={{ textAlign: "center" }}
+        >
+          잠시만 기다려 주세요
+        </Text>
+      </VStack>
+    </VStack>
+  );
 }