chore: 디버깅 페이지 레이아웃 수정

Author: MU-Software

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

@@ -56,10 +56,17 @@ const LayoutContainer = styled.div`
 const MainContent = styled.main`
   flex: 1;
 
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
+  > * {
+    flex-grow: 1;
+  }
 `;
 
 export default function MainLayout() {

apps/pyconkr/src/components/pages/test.tsx

@@ -1,30 +1,36 @@
 import * as React from "react";
 
-import { Box, Button } from "@mui/material";
+import { Button, Stack } from "@mui/material";
 
 import { BackendTestPage } from '../../debug/page/backend_test';
 import { MdiTestPage } from "../../debug/page/mdi_test";
 import { ShopTestPage } from "../../debug/page/shop_test";
 
+const LOCAL_STORAGE_KEY = "selectedTab";
 type SelectedTabType = "shop" | "mdi" | "backend";
 
+const getTabFromLocalStorage = (): SelectedTabType => localStorage.getItem(LOCAL_STORAGE_KEY) as SelectedTabType || "shop";
+
+const setTabToLocalStorage = (tab: SelectedTabType) => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, tab);
+  return tab;
+};
+
+const TabList: { [key in SelectedTabType]: React.ReactNode } = {
+  shop: <ShopTestPage />,
+  mdi: <MdiTestPage />,
+  backend: <BackendTestPage />,
+};
+
 export const Test: React.FC = () => {
-  const [selectedTab, setSelectedTab] = React.useState<SelectedTabType>("mdi");
-
-  return (
-    <Box>
-      <Button variant="contained" onClick={() => setSelectedTab("shop")}>
-        Shop Test
-      </Button>
-      <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>
-  );
+  const [selectedTab, setSelectedTab] = React.useState<SelectedTabType>(getTabFromLocalStorage());
+  const selectTab = (tab: SelectedTabType) => setSelectedTab(setTabToLocalStorage(tab));
+  const TabButton: React.FC<{ tab: SelectedTabType }> = ({ tab }) => <Button variant={selectedTab === tab ? "contained" : "outlined"} onClick={() => selectTab(tab)}>{tab} Test</Button>;
+
+  return <Stack>
+    <Stack direction="row" spacing={2} sx={{ width: "100%", justifyContent: "center" }}>
+      {Object.keys(TabList).map((tab) => <TabButton key={tab} tab={tab as SelectedTabType} />)}
+    </Stack>
+    {TabList[selectedTab]}
+  </Stack>;
 };