feat: 애니메이션 한번만 실행, state로 데이터 불러오기

TEAM-BEAT · Jul 13, 2024 · 0adc199 · 0adc199
1 parent bfcb5ae
commit 0adc199
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/src/pages/register/RegisterComplete.tsx b/src/pages/register/RegisterComplete.tsx
@@ -5,18 +5,21 @@ import Spacing from "@components/commons/spacing/Spacing";
 import Button from "@components/commons/button/Button";
 import { useNavigate } from "react-router-dom";
 import { REGISTER_RESPONSE } from "./constants";
+import { useState } from "react";
 
 const RegisterComplete = () => {
   const user = "메이커";
   const navigate = useNavigate();
-  const goGigsPage = () => navigate(`/gig/${REGISTER_RESPONSE.performanceId}`);
+  const [response, setResponse] = useState(REGISTER_RESPONSE);
+  const goGigsPage = () => navigate(`/gig/${response.performanceId}`);
 
   return (
     <>
       <S.RegisterCompleteLayout>
         <S.RegisterCompleteWrapper>
           <Lottie
             animationData={registerComplete}
+            loop={false}
             play={true}
             style={{ width: "150px", height: "150px", margin: "0 auto" }}
           />

diff --git a/vite.config.ts b/vite.config.ts
@@ -18,4 +18,7 @@ export default defineConfig({
   resolve: {
     extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
+  optimizeDeps: {
+    include: ["react-lottie-player"],
+  },
 });
diff --git a/yarn.lock b/yarn.lock
@@ -4849,13 +4849,15 @@ __metadata:
     husky: "npm:^8.0.0"
     jotai: "npm:^2.8.4"
     lint-staged: "npm:^15.2.7"
+    lottie-react: "npm:^2.4.0"
     postcss: "npm:^8.4.38"
     postcss-scss: "npm:^4.0.9"
     postcss-styled-syntax: "npm:^0.6.4"
     prettier: "npm:^3.3.2"
     prettier-linter-helpers: "npm:^1.0.0"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
+    react-lottie-player: "npm:^2.0.0"
     react-router-dom: "npm:^6.24.0"
     shelljs: "npm:^0.8.5"
     storybook: "npm:^8.1.11"
@@ -8447,6 +8449,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lottie-react@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "lottie-react@npm:2.4.0"
+  dependencies:
+    lottie-web: "npm:^5.10.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/5c0ef3f1832b21232fe6826cc021cd90bb0e3c9d63f1047031ce77a0992092f8712b6f3a6aeeaa0f410d918ca557df160b1c776399f69b498c560273767befe0
+  languageName: node
+  linkType: hard
+
+"lottie-web@npm:^5.10.2, lottie-web@npm:^5.12.2":
+  version: 5.12.2
+  resolution: "lottie-web@npm:5.12.2"
+  checksum: 10c0/0aeaf631b10a76afd025df70c2a1486543530708e07a316946c08e55891dac483ffbaf2bf3648ae0b9c54c733118a0a086fd150aa76f7848606214c67ad72c30
+  languageName: node
+  linkType: hard
+
 "loupe@npm:^2.3.6, loupe@npm:^2.3.7":
   version: 2.3.7
   resolution: "loupe@npm:2.3.7"
@@ -9814,6 +9835,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-lottie-player@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "react-lottie-player@npm:2.0.0"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.3"
+    lottie-web: "npm:^5.12.2"
+    rfdc: "npm:^1.3.0"
+  peerDependencies:
+    react: ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/a48361f441bf4230e85a40e803e1b747d50db283f851e34ec593dcc70faf87096e725cdc5f2f938c0552a0e2a5cbafb0aabe8fdbe508444fcaf1e265d5574057
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:^6.24.0":
   version: 6.24.1
   resolution: "react-router-dom@npm:6.24.1"
@@ -10162,7 +10196,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rfdc@npm:^1.4.1":
+"rfdc@npm:^1.3.0, rfdc@npm:^1.4.1":
   version: 1.4.1
   resolution: "rfdc@npm:1.4.1"
   checksum: 10c0/4614e4292356cafade0b6031527eea9bc90f2372a22c012313be1dcc69a3b90c7338158b414539be863fa95bfcb2ddcd0587be696841af4e6679d85e62c060c7
@@ -12001,4 +12035,4 @@ __metadata:
   resolution: "yocto-queue@npm:0.1.0"
   checksum: 10c0/dceb44c28578b31641e13695d200d34ec4ab3966a5729814d5445b194933c096b7ced71494ce53a0e8820685d1d010df8b2422e5bf2cdea7e469d97ffbea306f
   languageName: node
-  linkType: hard
+  linkType: hard