Merge remote-tracking branch 'origin/feature/add-lottie-component'

Author: MU-Software

apps/pyconkr-admin/src/components/layouts/admin_editor.tsx

@@ -23,6 +23,7 @@ import { ErrorBoundary, Suspense } from "@suspensive/react";
 import AjvDraft04 from "ajv-draft-04";
 import * as React from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import * as R from "remeda";
 
 import { addErrorSnackbar, addSnackbar } from "../../utils/snackbar";
 import { BackendAdminSignInGuard } from "../elements/admin_signin_guard";
@@ -61,22 +62,59 @@ const FileField: Field = (p) => (
   />
 );
 
+type ReadOnlyValueFieldStateType = {
+  loading: boolean;
+  blob: Blob | null;
+  blobText: string | null;
+  objectUrl: string | null;
+};
+
 const ReadOnlyValueField: React.FC<{
   name: string;
   value: unknown;
   uiSchema: UiSchema;
-}> = ({ name, value, uiSchema }) => {
-  if (uiSchema[name] && uiSchema[name]["ui:field"] === "file") {
+}> = Suspense.with({ fallback: <CircularProgress /> }, ({ name, value, uiSchema }) => {
+  const [fieldState, setFieldState] = React.useState<ReadOnlyValueFieldStateType>({
+    loading: true,
+    blob: null,
+    blobText: null,
+    objectUrl: null,
+  });
+
+  React.useEffect(() => {
+    (async () => {
+      if (!(R.isString(value) && value.startsWith("http") && uiSchema?.[name]["ui:field"] === "file")) {
+        setFieldState((ps) => ({ ...ps, loading: false }));
+        return;
+      }
+
+      const blob = await (await fetch(value)).blob();
+      const blobText = await blob.text();
+      const objectUrl = URL.createObjectURL(blob);
+      setFieldState((ps) => ({ ...ps, loading: false, blob, blobText, objectUrl }));
+    })();
+  }, [value, name, uiSchema]);
+
+  if (fieldState.loading) return <CircularProgress />;
+
+  if (uiSchema?.[name]?.["ui:field"] === "file" && fieldState.blob) {
     return (
       <Stack spacing={2} alignItems="flex-start">
-        <img src={value as string} alt={name} style={{ maxWidth: "100%", maxHeight: "600px", objectFit: "contain" }} />
+        {fieldState.blob.type.startsWith("image/") && fieldState.objectUrl && (
+          <img src={fieldState.objectUrl} alt={name} style={{ maxWidth: "600px", objectFit: "contain" }} />
+        )}
+        {fieldState.blob.type.startsWith("application/json") && fieldState.blobText && (
+          <Box sx={{ maxWidth: "600px", overflow: "auto" }}>
+            <Common.Components.LottieDebugPanel animationData={JSON.parse(fieldState.blobText)} />
+          </Box>
+        )}
         <a href={value as string}>링크</a>
       </Stack>
     );
   }
 
   return value as string;
-};
+});
 
 type InnerAdminEditorStateType = {
   tab: number;

apps/pyconkr-admin/src/components/pages/file/upload.tsx

@@ -73,8 +73,8 @@ const InnerPublicFileUploadPage: React.FC = () => {
       if (!file || file.size === 0) {
         addSnackbar("파일을 찾을 수 없거나, 파일 크기가 0입니다.", "error");
         return;
-      } else if (!file.type.startsWith("image/")) {
-        addSnackbar("이미지 파일만 업로드가 가능합니다.", "error");
+      } else if (!(file.type.startsWith("image/") || file.type === "application/json")) {
+        addSnackbar("이미지 또는 JSON 파일만 업로드가 가능합니다.", "error");
         return;
       }
 
@@ -116,13 +116,13 @@ const InnerPublicFileUploadPage: React.FC = () => {
         for (let i = 0; i < items.length; i++) {
           if (items[i].kind === "file") {
             const file = items[i].getAsFile();
-            if (!file || !file.size || !file.type.startsWith("image/")) continue;
+            if (!file || !file.size || !(file.type.startsWith("image/") || file.type === "application/json")) continue;
 
             handleFile(file);
             return;
           }
         }
-        addSnackbar("클립보드에 이미지 파일이 없습니다. 이미지 파일을 선택해주세요.", "error");
+        addSnackbar("클립보드에 이미지 또는 JSON 파일이 없습니다. 이미지 또는 JSON 파일을 선택해주세요.", "error");
       }
     },
     [handleFile]
@@ -196,7 +196,7 @@ const InnerPublicFileUploadPage: React.FC = () => {
         또는 <kbd>Ctrl</kbd>+<kbd>V</kbd>로 사진을 붙여넣어 주세요!
         <br />
         <ul>
-          <li>이미지 파일만 업로드가 가능합니다.</li>
+          <li>이미지와 JSON 파일만 업로드가 가능합니다.</li>
           <li>업로드 후에는 파일을 수정할 수 없습니다.</li>
           <li>파일은 공개적으로 접근 가능한 URL로 제공됩니다.</li>
         </ul>

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/dynamic_route.tsx

@@ -1,4 +1,4 @@
-import { CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Stack, Theme } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { AxiosError, AxiosResponse } from "axios";
 import * as React from "react";
@@ -12,17 +12,22 @@ import Utils from "../utils";
 import { ErrorFallback } from "./error_handler";
 import { MDXRenderer } from "./mdx";
 
-const InitialPageStyle: React.CSSProperties = {
-  width: "100%",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  flexDirection: "column",
-};
+const initialPageStyle: (additionalStyle: React.CSSProperties) => (theme: Theme) => React.CSSProperties =
+  (additionalStyle) => (theme) => ({
+    width: "100%",
+    marginTop: theme.spacing(8),
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    ...additionalStyle,
+  });
 
-const InitialSectionStyle: React.CSSProperties = {
-  width: "100%",
-};
+const initialSectionStyle: (additionalStyle: React.CSSProperties) => (theme: Theme) => React.CSSProperties =
+  (additionalStyle) => () => ({
+    width: "100%",
+    ...additionalStyle,
+  });
 
 const LoginRequired: React.FC = () => <>401 Login Required</>;
 const PermissionDenied: React.FC = () => <>403 Permission Denied</>;
@@ -57,15 +62,21 @@ export const PageRenderer: React.FC<{ id?: string }> = ErrorBoundary.with(
   Suspense.with({ fallback: <CircularProgress /> }, ({ id }) => {
     const backendClient = Hooks.BackendAPI.useBackendClient();
     const { data } = Hooks.BackendAPI.usePageQuery(backendClient, id || "");
+    const commonStackStyle = {
+      justifyContent: "flex-start",
+      alignItems: "center",
+    };
 
     return (
-      <div style={{ ...InitialPageStyle, ...Utils.parseCss(data.css) }}>
+      <Stack {...commonStackStyle} sx={initialPageStyle(Utils.parseCss(data.css))}>
         {data.sections.map((s) => (
-          <div style={{ ...InitialSectionStyle, ...Utils.parseCss(s.css) }} key={s.id}>
-            <MDXRenderer text={s.body} />
-          </div>
+          <Stack {...commonStackStyle} sx={initialSectionStyle(Utils.parseCss(s.css))} key={s.id}>
+            <Box sx={{ maxWidth: "1000px" }}>
+              <MDXRenderer text={s.body} />
+            </Box>
+          </Stack>
         ))}
-      </div>
+      </Stack>
     );
   })
 );

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>
+  );
+};

packages/common/src/components/mdx.tsx

@@ -22,6 +22,7 @@ import Hooks from "../hooks";
 import { ErrorFallback } from "./error_handler";
 import { rtrim } from "../utils/string";
 import { StyledDivider } from "./mdx_components/styled_divider";
+import { SubContentContainer } from "./mdx_components/sub_content_container";
 
 const REGISTERED_KEYWORDS = [
   "import",
@@ -46,12 +47,12 @@ const REGISTERED_KEYWORDS = [
 ];
 
 const CustomMDXComponents: MDXComponents = {
-  h1: (props) => <h1 {...props} />,
-  h2: (props) => <h2 {...props} />,
-  h3: (props) => <h3 {...props} />,
-  h4: (props) => <h4 {...props} />,
-  h5: (props) => <h5 {...props} />,
-  h6: (props) => <h6 {...props} />,
+  h1: (props) => <h1 style={{ margin: 0 }} {...props} />,
+  h2: (props) => <h2 style={{ margin: 0 }} {...props} />,
+  h3: (props) => <h3 style={{ margin: 0 }} {...props} />,
+  h4: (props) => <h4 style={{ margin: 0 }} {...props} />,
+  h5: (props) => <h5 style={{ margin: 0 }} {...props} />,
+  h6: (props) => <h6 style={{ margin: 0 }} {...props} />,
   strong: (props) => <strong {...props} />,
   hr: (props) => <StyledDivider {...props} />,
   em: (props) => <em {...props} />,
@@ -69,6 +70,7 @@ const CustomMDXComponents: MDXComponents = {
   tr: (props) => <TableRow {...props} />,
   th: (props) => <TableCell {...props} />,
   td: (props) => <TableCell {...props} />,
+  Content: (props) => <SubContentContainer {...props} />,
 };
 
 const lineFormatterForMDX = (line: string) => {

packages/common/src/components/mdx_components/sub_content_container.tsx

@@ -0,0 +1,6 @@
+import { Box } from "@mui/material";
+import * as React from "react";
+
+export const SubContentContainer: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <Box sx={(theme) => ({ px: theme.spacing(2), py: theme.spacing(4) })}>{children}</Box>
+);