[Refactor/#444] lottie 라이브러리 변경 및 build chunks 분리

package.json

@@ -33,7 +33,7 @@
     "axios": "^1.6.5",
     "emotion-reset": "^3.0.1",
     "history": "^5.3.0",
-    "lottie-react": "^2.4.0",
+    "lottie-web": "^5.12.2",
     "quill-divider": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -61,6 +61,7 @@
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "3.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
+    "source-map-explorer": "^2.5.3",
     "stylelint": "^16.1.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",

src/pages/groupFeed/carousel/EachArticle.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import Lottie from 'lottie-react';
 import { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import LoadingLottie from '../../../assets/gifs/loading.json';
+import Loading from '../../loading/Loading';
 import {
   GroupChatIc,
   GroupCuriousIc,
@@ -112,7 +111,7 @@ const EachArticle = (props: EachProfilePropTypes) => {
                 </div>
               )),
           )}
-          {isFetchingNextPage && <Lottie animationData={LoadingLottie} />}
+          {isFetchingNextPage && <Loading />}
         </>
       )}
     </ArticlePostWrapper>

src/pages/groupFeed/components/GroupTodayWriteStyle.tsx

@@ -19,7 +19,6 @@ const GroupTodayWriteStyle = (props: GroupTodayWriteStylePropTypes) => {
   const navigate = useNavigate();
 
   const { todayInfo, isMember, groupId } = props;
-  console.log(todayInfo, 'in');
 
   const handleNavigatePostPage = () => {
     navigate(`/post/${groupId}/post`);

src/pages/loading/Loading.tsx

@@ -1,11 +1,29 @@
+import { useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
-import Lottie from 'lottie-react';
+
+import * as lottie from 'lottie-web/build/player/lottie_light';
+type LettiePlayer = typeof lottie.default;
+const lottiePlayer = lottie as any as LettiePlayer;
 import LoadingLottie from '../../assets/gifs/loading.json';
 
 const Loading = () => {
+  const spinnerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const animation = lottiePlayer.loadAnimation({
+      container: spinnerRef.current as Element,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: LoadingLottie,
+    });
+
+    return () => animation.destroy();
+  }, []);
+
   return (
     <SpinnerWrapper>
-      <Lottie animationData={LoadingLottie} />
+      <Spinner ref={spinnerRef} />
     </SpinnerWrapper>
   );
 };
@@ -19,3 +37,11 @@ const SpinnerWrapper = styled.div`
   width: 100%;
   height: 100vh;
 `;
+
+const Spinner = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 8.4rem;
+  height: 8.4rem;
+`;

vite.config.ts

@@ -1,6 +1,7 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { defineConfig, type PluginOption } from 'vite';
 import svgr from 'vite-plugin-svgr';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -20,5 +21,16 @@ export default defineConfig({
       },
     }),
     svgr(),
+    visualizer() as PluginOption,
   ],
+  build: {
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom', 'react-router-dom'],
+        },
+      },
+    },
+  },
 });