feat: 경로에 따라 페이지를 렌더링하는 Component 추가

Author: MU-Software

apps/pyconkr/src/components/layout/index.tsx

@@ -55,6 +55,11 @@ const LayoutContainer = styled.div`
 
 const MainContent = styled.main`
   flex: 1;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 `;
 
 export default function MainLayout() {

apps/pyconkr/src/debug/page/backend_test.tsx

@@ -7,32 +7,15 @@ import { ErrorBoundary, Suspense } from '@suspensive/react';
 import * as Common from "@frontend/common";
 
 const SiteMapRenderer: React.FC = () => {
-  const { data } = Common.Hooks.BackendAPI.useNestedSiteMapQuery();
-  return <pre style={{ whiteSpace: "pre-wrap" }}>{JSON.stringify(data, null, 2)}</pre>
-};
-
-const parseCss = (t: unknown): React.CSSProperties => R.isString(t) && !R.isEmpty(t) && JSON.parse(t)
-
-const PageRenderer: React.FC<{ id: string }> = ({ id }) => {
-  const { data } = Common.Hooks.BackendAPI.usePageQuery(id);
-
-  return <div style={parseCss(data.css)}>
-    {
-      data.sections.map(
-        (s) => <div style={parseCss(s.css)} key={s.id}>
-          <Common.Components.MDXRenderer text={s.body} />
-        </div>
-      )
-    }
-  </div>
+  const { data } = Common.Hooks.BackendAPI.useFlattenSiteMapQuery();
+  return <pre style={{ whiteSpace: "pre-wrap" }}>{JSON.stringify(Common.Utils.buildNestedSiteMap(data), null, 2)}</pre>
 };
 
 const PageIdSelector: React.FC<{ inputRef: React.Ref<HTMLSelectElement> }> = ({ inputRef }) => {
   const { data } = Common.Hooks.BackendAPI.useFlattenSiteMapQuery();
-  const pageIdList = data.map((sitemap) => sitemap.page);
 
   return <Select inputRef={inputRef}>
-    {pageIdList.map((pageId) => <MenuItem key={pageId} value={pageId}>{pageId}</MenuItem>)}
+    {data.map((siteMap) => <MenuItem key={siteMap.id} value={siteMap.page}>{siteMap.name}</MenuItem>)}
   </Select>
 }
 
@@ -56,6 +39,6 @@ export const BackendTestPage: React.FC = () => {
     <br />
     <Button variant="outlined" onClick={() => setPageId(inputRef.current?.value ?? null)}>페이지 렌더링</Button>
     <br />
-    {R.isString(pageId) ? <SuspenseWrapper><PageRenderer id={pageId} /></SuspenseWrapper> : <>페이지를 선택해주세요.</>}
+    {R.isString(pageId) ? <SuspenseWrapper><Common.Components.PageRenderer id={pageId} /></SuspenseWrapper> : <>페이지를 선택해주세요.</>}
   </Stack>
 }

packages/common/src/components/dynamic_route.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { useLocation } from 'react-router-dom';
+import * as R from "remeda";
+
+import { CircularProgress } from '@mui/material';
+import { ErrorBoundary, Suspense } from '@suspensive/react';
+
+import styled from '@emotion/styled';
+import Components from '../components';
+import Hooks from "../hooks";
+import Schemas from "../schemas";
+import Utils from '../utils';
+
+const InitialPageStyle: React.CSSProperties = {
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+}
+
+const InitialSectionStyle: React.CSSProperties = {
+  width: '100%',
+}
+
+export const PageRenderer: React.FC<{ id: string }> = ({ id }) => {
+  const { data } = Hooks.BackendAPI.usePageQuery(id);
+
+  return <div style={{ ...InitialPageStyle, ...Utils.parseCss(data.css) }}>
+    {
+      data.sections.map(
+        (s) => <div style={{ ...InitialSectionStyle, ...Utils.parseCss(s.css) }} key={s.id}>
+          <Components.MDXRenderer text={s.body} />
+        </div>
+      )
+    }
+  </div>
+};
+
+const AsyncDynamicRoutePage: React.FC = () => {
+  const location = useLocation();
+  const { data } = Hooks.BackendAPI.useFlattenSiteMapQuery();
+  const nestedSiteMap = Utils.buildNestedSiteMap(data);
+
+  const currentRouteCodes = ['', ...location.pathname.split('/').filter((code) => !R.isEmpty(code))];
+
+  let currentSitemap: Schemas.NestedSiteMapSchema | null | undefined = nestedSiteMap[currentRouteCodes[0]];
+  if (currentSitemap === undefined) {
+    return <>404 Not Found</>;
+  }
+
+  for (const routeCode of currentRouteCodes.slice(1)) {
+    if ((currentSitemap = currentSitemap.children[routeCode]) === undefined) {
+      break;
+    }
+  }
+
+  return R.isNullish(currentSitemap)
+    ? <>404 Not Found</>
+    : <PageRenderer id={currentSitemap.page} />
+}
+
+const FullPage = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`
+
+export const DynamicRoutePage: React.FC = () => <FullPage>
+  <ErrorBoundary fallback={Components.ErrorFallback}>
+    <Suspense fallback={<CircularProgress />}>
+      <AsyncDynamicRoutePage />
+    </Suspense>
+  </ErrorBoundary>
+</FullPage>;

packages/common/src/components/index.ts

@@ -1,10 +1,16 @@
 import { CommonContextProvider as CommonContextProviderComponent } from './common_context';
+import {
+  DynamicRoutePage as DynamicRoutePageComponent,
+  PageRenderer as PageRendererComponent,
+} from './dynamic_route';
 import { ErrorFallback as ErrorFallbackComponent } from './error_handler';
 import { MDXRenderer as MDXRendererComponent } from "./mdx";
 import { PythonKorea as PythonKoreaComponent } from './pythonkorea';
 
 namespace Components {
   export const CommonContextProvider = CommonContextProviderComponent;
+  export const DynamicRoutePage = DynamicRoutePageComponent;
+  export const PageRenderer = PageRendererComponent;
   export const MDXRenderer = MDXRendererComponent;
   export const PythonKorea = PythonKoreaComponent;
   export const ErrorFallback = ErrorFallbackComponent;