feat: 어드민용 Lottie 플레이어 추가

Author: MU-Software

package.json

@@ -47,6 +47,7 @@
     "notistack": "^3.0.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-lottie": "^1.2.10",
     "react-router-dom": "^7.6.0",
     "remark-gfm": "^4.0.1",
     "remeda": "^2.21.5"
@@ -65,6 +66,7 @@
     "@types/node": "^22.15.18",
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.1.5",
+    "@types/react-lottie": "^1.2.10",
     "@typescript-eslint/parser": "^8.32.1",
     "@vitejs/plugin-react": "^4.4.1",
     "csstype": "^3.1.3",

packages/common/src/components/index.ts

@@ -6,6 +6,7 @@ import {
   RouteRenderer as RouteRendererComponent,
 } from "./dynamic_route";
 import { ErrorFallback as ErrorFallbackComponent } from "./error_handler";
+import { LottieDebugPanel as LottieDebugPanelComponent } from "./lottie";
 import { MDXRenderer as MDXRendererComponent } from "./mdx";
 import type { MapPropType as MapComponentPropType } from "./mdx_components/map";
 import { Map as MapComponent } from "./mdx_components/map";
@@ -25,6 +26,7 @@ namespace Components {
   export const MDXEditor = MDXEditorComponent;
   export const MDXRenderer = MDXRendererComponent;
   export const PythonKorea = PythonKoreaComponent;
+  export const LottieDebugPanel = LottieDebugPanelComponent;
   export const ErrorFallback = ErrorFallbackComponent;
 
   export namespace MDX {

packages/common/src/components/lottie.tsx

@@ -0,0 +1,52 @@
+import { Pause, PlayArrow, Stop } from "@mui/icons-material";
+import { Box, FormControlLabel, IconButton, Stack, Switch } from "@mui/material";
+import * as React from "react";
+import Lottie from "react-lottie";
+
+type PlayState = "playing" | "paused" | "stopped";
+
+type LottiePlayerStateType = {
+  loop: boolean;
+  isStopped: boolean;
+  isPaused: boolean;
+};
+
+export const LottieDebugPanel: React.FC<{ animationData: unknown }> = ({ animationData }) => {
+  const [playerState, setPlayerState] = React.useState<LottiePlayerStateType>({
+    loop: true,
+    isStopped: false,
+    isPaused: false,
+  });
+
+  const toggleLoop = () => setPlayerState((ps) => ({ ...ps, loop: !ps.loop }));
+  const setPlayState = (playState: PlayState) => {
+    if (playState === "playing") setPlayerState((ps) => ({ ...ps, isStopped: false, isPaused: false }));
+    if (playState === "paused") setPlayerState((ps) => ({ ...ps, isStopped: false, isPaused: true }));
+    if (playState === "stopped") setPlayerState((ps) => ({ ...ps, isStopped: true, isPaused: true }));
+  };
+
+  const stop = () => setPlayState("stopped");
+  const togglePause = () => setPlayState(playerState.isPaused ? "playing" : "paused");
+
+  return (
+    <Stack direction="column">
+      <Box>
+        <Lottie
+          isStopped={playerState.isStopped}
+          isPaused={playerState.isPaused}
+          options={{
+            animationData,
+            loop: playerState.loop,
+            autoplay: true,
+            rendererSettings: { preserveAspectRatio: "xMidYMid slice" },
+          }}
+        />
+      </Box>
+      <Stack direction="row" spacing={2}>
+        <IconButton onClick={togglePause} children={playerState.isPaused ? <PlayArrow /> : <Pause />} />
+        <IconButton onClick={stop} children={<Stop />} />
+        <FormControlLabel control={<Switch checked={playerState.loop} onChange={toggleLoop} />} label="반복 재생" />
+      </Stack>
+    </Stack>
+  );
+};