Merge pull request #9 from pythonkr/feature/add-main-server-hooks

feat: backend API에 대한 환경 및 context 변수들 추가

Author: MU-Software

apps/pyconkr/src/App.tsx

@@ -3,13 +3,17 @@ import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import MainLayout from "./components/layout";
 import { Test } from "./components/pages/test";
+import { IS_DEBUG_ENV } from "./consts/index.ts";
+
+import * as Common from "@frontend/common";
 
 export const App: React.FC = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route element={<MainLayout />}>
-          <Route path="/" element={<Test />} />
+          { IS_DEBUG_ENV && <Route path="/debug" element={<Test />} /> }
+          <Route path="*" element={<Common.Components.DynamicRoutePage />} />
         </Route>
       </Routes>
     </BrowserRouter>

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

@@ -65,7 +65,7 @@ export default function Footer({
   ],
   icons = defaultIcons,
 }: FooterProps) {
-  const { sendEmail } = Common.Hooks.useEmail();
+  const { sendEmail } = Common.Hooks.Common.useEmail();
 
   return (
     <FooterContainer>

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/components/pages/test.tsx

@@ -2,10 +2,11 @@ import * as React from "react";
 
 import { Box, Button } from "@mui/material";
 
+import { BackendTestPage } from '../../debug/page/backend_test';
 import { MdiTestPage } from "../../debug/page/mdi_test";
 import { ShopTestPage } from "../../debug/page/shop_test";
 
-type SelectedTabType = "shop" | "mdi";
+type SelectedTabType = "shop" | "mdi" | "backend";
 
 export const Test: React.FC = () => {
   const [selectedTab, setSelectedTab] = React.useState<SelectedTabType>("mdi");
@@ -18,8 +19,12 @@ export const Test: React.FC = () => {
       <Button variant="contained" onClick={() => setSelectedTab("mdi")}>
         MDI Test
       </Button>
+      <Button variant="contained" onClick={() => setSelectedTab("backend")}>
+        Backend Test
+      </Button>
       {selectedTab === "shop" && <ShopTestPage />}
       {selectedTab === "mdi" && <MdiTestPage />}
+      {selectedTab === "backend" && <BackendTestPage />}
     </Box>
   );
 };

apps/pyconkr/src/consts/index.ts

@@ -0,0 +1 @@
+export const IS_DEBUG_ENV = import.meta.env.MODE === "development"

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import * as R from "remeda";
+
+import { Button, CircularProgress, MenuItem, Select, Stack } from '@mui/material';
+import { ErrorBoundary, Suspense } from '@suspensive/react';
+
+import * as Common from "@frontend/common";
+
+const SiteMapRenderer: React.FC = () => {
+  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();
+
+  return <Select inputRef={inputRef}>
+    {data.map((siteMap) => <MenuItem key={siteMap.id} value={siteMap.page}>{siteMap.name}</MenuItem>)}
+  </Select>
+}
+
+const SuspenseWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <ErrorBoundary fallback={Common.Components.ErrorFallback}>
+    <Suspense fallback={<CircularProgress />}>
+      {children}
+    </Suspense>
+  </ErrorBoundary>
+)
+
+export const BackendTestPage: React.FC = () => {
+  const inputRef = React.useRef<HTMLSelectElement>(null);
+  const [pageId, setPageId] = React.useState<string | null>(null);
+
+  return <Stack>
+    <br />
+    <SuspenseWrapper><SiteMapRenderer /></SuspenseWrapper>
+    <br />
+    <SuspenseWrapper><PageIdSelector inputRef={inputRef} /></SuspenseWrapper>
+    <br />
+    <Button variant="outlined" onClick={() => setPageId(inputRef.current?.value ?? null)}>페이지 렌더링</Button>
+    <br />
+    {R.isString(pageId) ? <SuspenseWrapper><Common.Components.PageRenderer id={pageId} /></SuspenseWrapper> : <>페이지를 선택해주세요.</>}
+  </Stack>
+}

apps/pyconkr/src/main.tsx

@@ -12,6 +12,7 @@ import * as Common from "@frontend/common";
 import * as Shop from "@frontend/shop";
 
 import { App } from "./App.tsx";
+import { IS_DEBUG_ENV } from './consts/index.ts';
 import { globalStyles, muiTheme } from "./styles/globalStyles.ts";
 
 const queryClient = new QueryClient({
@@ -35,8 +36,10 @@ const queryClient = new QueryClient({
 });
 
 const CommonOptions: Common.Contexts.ContextOptions = {
-  debug: import.meta.env.MODE === "development",
+  debug: IS_DEBUG_ENV,
   baseUrl: '.',
+  backendApiDomain: import.meta.env.VITE_PYCONKR_BACKEND_API_DOMAIN,
+  backendApiTimeout: 10000,
 };
 
 const ShopOptions: Shop.Contexts.ContextOptions = {

apps/pyconkr/vite-env.d.ts

@@ -11,6 +11,7 @@ interface ViteTypeOptions {
 }
 
 interface ImportMetaEnv {
+  readonly VITE_PYCONKR_BACKEND_API_DOMAIN: string;
   readonly VITE_PYCONKR_SHOP_API_DOMAIN: string;
   readonly VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME: string;
   readonly VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID: string;

dotenv/.env.development

@@ -1,3 +1,4 @@
+VITE_PYCONKR_BACKEND_API_DOMAIN=https://rest-api.dev.pycon.kr
 VITE_PYCONKR_SHOP_API_DOMAIN=https://shop-api.dev.pycon.kr
 VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME=DEBUG_csrftoken
 VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID=imp80859147

dotenv/.env.production

@@ -1,3 +1,4 @@
+VITE_PYCONKR_BACKEND_API_DOMAIN=https://rest-api.pycon.kr
 VITE_PYCONKR_SHOP_API_DOMAIN=https://shop-api.pycon.kr
 VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME=csrftoken
 VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID=imp96676915