[Refactor] 번들 크기 개선 - 1

package.json

@@ -22,7 +22,7 @@
     "axios": "^1.6.8",
     "date-fns": "^3.6.0",
     "firebase": "^10.12.4",
-    "lottie-react": "^2.4.0",
+    "lottie-web": "^5.12.2",
     "nanoid": "^5.0.7",
     "react": "^18.2.0",
     "react-daum-postcode": "^3.1.3",
@@ -49,6 +49,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "prettier": "^3.2.5",
+    "rollup-plugin-visualizer": "^5.12.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

src/views/loadings/BigLoding/index.tsx

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

src/views/loadings/ButtonLoading/index.tsx

@@ -1,9 +1,8 @@
-import Lottie from 'lottie-react';
-
+import Lottie from '../Lottie';
 import buttonLoadingWhite from '../lotties/buttonLoadingWhite.json';
 
 const ButtonLoading = ({ width, height = 28 }: { width: number | undefined; height?: number }) => {
-  return <Lottie animationData={buttonLoadingWhite} style={{ width: width, height }} />;
+  return <Lottie animationData={buttonLoadingWhite} style={{ width, height }} />;
 };
 
 export default ButtonLoading;

src/views/loadings/Lottie/index.tsx

@@ -0,0 +1,45 @@
+import { type AnimationConfigWithData, type AnimationItem } from 'lottie-web';
+import lottie from 'lottie-web/build/player/lottie_light';
+import { type CSSProperties, useEffect, useRef } from 'react';
+
+const Lottie = ({ animationData, style }: { animationData: unknown; style?: CSSProperties }) => {
+  const animationInstanceRef = useRef<AnimationItem>();
+  const animationContainer = useRef<HTMLDivElement>(null);
+
+  const loadAnimation = () => {
+    // Return if the container ref is null
+    if (!animationContainer.current) {
+      return;
+    }
+
+    // Destroy any previous instance
+    animationInstanceRef.current?.destroy();
+
+    // Build the animation configuration
+    const config: AnimationConfigWithData = {
+      animationData,
+      container: animationContainer.current,
+    };
+
+    // Save the animation instance
+    animationInstanceRef.current = lottie.loadAnimation(config);
+
+    // Return a function that will clean up
+    return () => {
+      animationInstanceRef.current?.destroy();
+      animationInstanceRef.current = undefined;
+    };
+  };
+
+  useEffect(() => {
+    const onUnmount = loadAnimation();
+
+    // Clean up on unmount
+    return () => onUnmount?.();
+    // eslint-disable-next-line
+  }, [animationData]);
+
+  return <div ref={animationContainer} style={style} />;
+};
+
+export default Lottie;

src/views/loadings/SmallLoading/index.tsx

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