From 5e7e60694bdadd1c8f95e396e03d22a0458db5cc Mon Sep 17 00:00:00 2001
From: ROTO0504 <88580483+ROTO0504@users.noreply.github.com>
Date: Sat, 9 Nov 2024 22:31:17 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20bun=20run=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{logoanimation.json => logo.json}         |  0
 src/components/LogoAnimation.tsx              |  2 +-
 src/components/LottiePlayer.tsx               |  4 ++--
 src/routes/index.tsx                          | 23 +++++++++----------
 4 files changed, 14 insertions(+), 15 deletions(-)
 rename src/assets/animations/{logoanimation.json => logo.json} (100%)

diff --git a/src/assets/animations/logoanimation.json b/src/assets/animations/logo.json
similarity index 100%
rename from src/assets/animations/logoanimation.json
rename to src/assets/animations/logo.json
diff --git a/src/components/LogoAnimation.tsx b/src/components/LogoAnimation.tsx
index 38b9f63..3a51d2b 100644
--- a/src/components/LogoAnimation.tsx
+++ b/src/components/LogoAnimation.tsx
@@ -1,7 +1,7 @@
 import { VStack } from "panda/jsx";
 import { type ReactElement } from "react";
 import LottiePlayer from "./LottiePlayer";
-import logoAnimation from "@/assets/animations/logoAnimation.json";
+import logoAnimation from "@/assets/animations/logo.json";
 
 export function LogoAnimation(): ReactElement {
   return (
diff --git a/src/components/LottiePlayer.tsx b/src/components/LottiePlayer.tsx
index 8e508b0..04549fc 100644
--- a/src/components/LottiePlayer.tsx
+++ b/src/components/LottiePlayer.tsx
@@ -23,7 +23,7 @@ export default function LottiePlayer({
   const _stopAtEnd = stopAtEnd ?? false;
 
   useEffect(() => {
-    if (_stopAtEnd && lottieState) {
+    if (_stopAtEnd && lottieState != null) {
       const lastFrame = lottieState.totalFrames - 1;
 
       lottieState.addEventListener("complete", () => {
@@ -44,11 +44,11 @@ export default function LottiePlayer({
   return (
     <p.div h="100%" overflow="hidden" w="auto">
       <Player
+        loop={!_stopAtEnd}
         lottieRef={(instance) => {
           setLottieState(instance);
         }}
         onEvent={eventHandler}
-        loop={!_stopAtEnd}
         style={{
           height: "100%",
         }}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 8268686..a79af74 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -7,9 +7,9 @@ import headerLeft from "@/assets/svg/background/header-left.svg";
 import headerRight from "@/assets/svg/background/header-right.svg";
 import wakaba from "@/assets/svg/background/wakaba.svg";
 import wakabaIcon from "@/assets/svg/icon/wakaba.svg";
+import { LogoAnimation } from "@/components/LogoAnimation";
 import { Button } from "@/components/cva/Button";
 import { Expanded } from "@/components/cva/Expanded";
-import { LogoAnimation } from "@/components/LogoAnimation";
 
 export const Route = createFileRoute("/")({
   component: () => {
@@ -61,14 +61,13 @@ export const Route = createFileRoute("/")({
           backgroundColor="white"
           display="grid"
           duration="1000"
-          slideInX="-10"
           height={{
             base: "50vh",
             sm: "50vh",
-
             lg: "50vh",
             xl: "50vh",
           }}
+          slideInX="-10"
           style={{
             position: "relative",
             backgroundImage: `url("${headerLeft}")`,
@@ -79,8 +78,8 @@ export const Route = createFileRoute("/")({
         >
           <p.div
             fadeIn="8"
-            slideInX="20"
             position="relative"
+            slideInX="20"
             style={{
               position: "relative",
               backgroundImage: `url("${headerRight}")`,
@@ -90,16 +89,16 @@ export const Route = createFileRoute("/")({
             }}
           >
             <p.div
-              slideInX="-10"
-              placeItems="center"
-              m="0 auto"
+              bottom="0"
               height="100%"
-              verticalAlign="middle"
-              position="absolute"
               left="0"
-              right="0"
-              bottom="0"
+              m="0 auto"
               margin="auto"
+              placeItems="center"
+              position="absolute"
+              right="0"
+              slideInX="-10"
+              verticalAlign="middle"
             >
               <LogoAnimation />
             </p.div>
@@ -110,9 +109,9 @@ export const Route = createFileRoute("/")({
           ref={ref1}
           display="grid"
           fadeIn="2"
-          slideInX="100"
           height={{ base: "400px", sm: "600px", lg: "40vh", xl: "60vh" }}
           placeItems="center"
+          slideInX="100"
           style={{
             backgroundImage: `url("${wakabaIcon}"), url("${decorationRight}")`,
             backgroundSize: "auto 15%, auto 15%",