chore: 컴포넌트 테스트 페이지 추가

Author: MU-Software

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

@@ -2,12 +2,13 @@ import { Button, Stack } from "@mui/material";
 import * as React from "react";
 
 import { BackendTestPage } from "../../debug/page/backend_test";
+import { ComponentTestPage } from "../../debug/page/component_test";
 import { MapTestPage } from "../../debug/page/map_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" | "map";
+type SelectedTabType = "shop" | "mdi" | "backend" | "map" | "component";
 
 const getTabFromLocalStorage = (): SelectedTabType =>
   (localStorage.getItem(LOCAL_STORAGE_KEY) as SelectedTabType) || "shop";
@@ -22,6 +23,7 @@ const TabList: { [key in SelectedTabType]: React.ReactNode } = {
   mdi: <MdiTestPage />,
   backend: <BackendTestPage />,
   map: <MapTestPage />,
+  component: <ComponentTestPage />,
 };
 
 export const Test: React.FC = () => {

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

@@ -0,0 +1,85 @@
+import * as Common from "@frontend/common";
+import { Chip, Stack, Table, TableBody, TableCell, TableRow } from "@mui/material";
+import * as React from "react";
+
+const HighlightedChip: React.FC<{ label: string }> = ({ label }) => (
+  <Chip
+    label={label}
+    sx={(theme) => ({
+      borderColor: theme.palette.highlight.light,
+      backgroundColor: theme.palette.highlight.main,
+      color: "#fff",
+      fontWeight: 600,
+    })}
+  />
+);
+
+export const ComponentTestPage: React.FC = () => {
+  return (
+    <Stack direction="column" spacing={2} sx={{ p: 2 }}>
+      <Common.Components.MDX.PrimaryStyledDetails summary="자가용 이용시">
+        모든 자동차의 출입은 동국대 정문으로만 가능
+        <Table>
+          <TableBody>
+            <TableRow>
+              <TableCell>
+                <HighlightedChip label="분당방면" />
+              </TableCell>
+              <TableCell>한남대교 → 남산국립극장 400m 전방 → 동국대 정문</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <HighlightedChip label="강남방면" />
+              </TableCell>
+              <TableCell>동호대교 → 장충체육관 앞 사거리에서 좌회전 300m 전방 → 동국대 정문</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <HighlightedChip label="용산방면" />
+              </TableCell>
+              <TableCell>남산 2호터널 통과 후 좌회전 100m 전방 → 동국대 정문</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <HighlightedChip label="동대문방면" />
+              </TableCell>
+              <TableCell>장충사거리 200m 전방 → 동국대 정문</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </Common.Components.MDX.PrimaryStyledDetails>
+
+      <Common.Components.MDX.SecondaryStyledDetails summary="자가용 이용시">
+        모든 자동차의 출입은 동국대 정문으로만 가능
+        <Table>
+          <TableBody>
+            <TableRow>
+              <TableCell>
+                <HighlightedChip label="분당방면" />
+              </TableCell>
+              <TableCell>한남대교 → 남산국립극장 400m 전방 → 동국대 정문</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <HighlightedChip label="강남방면" />
+              </TableCell>
+              <TableCell>동호대교 → 장충체육관 앞 사거리에서 좌회전 300m 전방 → 동국대 정문</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <HighlightedChip label="용산방면" />
+              </TableCell>
+              <TableCell>남산 2호터널 통과 후 좌회전 100m 전방 → 동국대 정문</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <HighlightedChip label="동대문방면" />
+              </TableCell>
+              <TableCell>장충사거리 200m 전방 → 동국대 정문</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </Common.Components.MDX.SecondaryStyledDetails>
+    </Stack>
+  );
+};