[Refactor] lottie-react 재도입 및 patch를 이용한 번들 사이즈 감소

README.md

@@ -13,7 +13,7 @@
 <img src="https://img.shields.io/badge/Tanstack%20Query-FF4154?style=flat-square&logo=react-query&logoColor=white" alt="Tanstack Query Badge"/></a>
 <img src="https://img.shields.io/badge/React--hook--form-EC5990?style=flat-square&logo=react-hook-form&logoColor=white" alt="React-hook-form Badge"/></a>
 <img src="https://img.shields.io/badge/Date--fns-3D7DCA?style=flat-square&logo=date-fns&logoColor=white" alt="Date-fns Badge"/></a>
-<img src="https://img.shields.io/badge/Lottie--web-4F8DF5?style=flat-square&logo=lottie&logoColor=white" alt="Lottie-web Badge"/></a>
+<img src="https://img.shields.io/badge/Lottie--react-4F8DF5?style=flat-square&logo=lottie-react&logoColor=white" alt="Lottie-react Badge"/></a>
 <img src="https://img.shields.io/badge/Cloudflare-F38020?style=flat-square&logo=cloudflare&logoColor=white" alt="Cloudflare Badge"/></a>
 <img src="https://img.shields.io/badge/Firebase-FFCA28?style=flat-square&logo=firebase&logoColor=white" alt="Firebase Badge"/></a>
 <img src="https://img.shields.io/badge/Amplitude-FF9D00?style=flat-square&logo=amplitude&logoColor=white" alt="Amplitude Badge"/></a>

package.json

@@ -13,7 +13,8 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "test": "vitest",
-    "supportedBrowsers": "echo \"export default $(browserslist-useragent-regexp --allowHigherVersions);\" > ./src/views/UnsupportedPage/supportedBrowsers.ts"
+    "supportedBrowsers": "echo \"export default $(browserslist-useragent-regexp --allowHigherVersions);\" > ./src/views/UnsupportedPage/supportedBrowsers.ts",
+    "postinstall": "patch-package"
   },
   "browserslist": [
     "> 0.3%",
@@ -39,8 +40,10 @@
     "axios": "^1.6.8",
     "date-fns": "^3.6.0",
     "firebase": "^10.12.4",
-    "lottie-web": "^5.12.2",
+    "lottie-react": "^2.4.0",
     "nanoid": "^5.0.7",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
     "react": "^18.2.0",
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.2.0",

patches/lottie-react+2.4.0.patch

@@ -0,0 +1,12 @@
+diff --git a/node_modules/lottie-react/build/index.es.js b/node_modules/lottie-react/build/index.es.js
+index a2d9d48..1f08a0b 100644
+--- a/node_modules/lottie-react/build/index.es.js
++++ b/node_modules/lottie-react/build/index.es.js
+@@ -1,5 +1,5 @@
+-import lottie from 'lottie-web';
+-export { default as LottiePlayer } from 'lottie-web';
++import lottie from "lottie-web/build/player/lottie_light";
++export { default as LottiePlayer } from 'lottie-web/build/player/lottie_light';
+ import React, { useState, useRef, useEffect } from 'react';
+
+ function _iterableToArrayLimit(arr, i) {

src/views/loadings/BigLoding/index.tsx

@@ -1,5 +1,5 @@
 import { container, loadingText, wrapper } from './style.css';
-import Lottie from '../Lottie';
+import Lottie from 'lottie-react';
 import mainLoading from '../lotties/mainLoading.json';
 
 const BigLoading = () => {

src/views/loadings/ButtonLoading/index.tsx

@@ -1,4 +1,4 @@
-import Lottie from '../Lottie';
+import Lottie from 'lottie-react';
 import buttonLoadingWhite from '../lotties/buttonLoadingWhite.json';
 
 const ButtonLoading = ({ width, height = 28 }: { width: number | undefined; height?: number }) => {