feat: GnB 및 Footer를 API에 연동

Author: MU-Software

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

@@ -1,56 +1,71 @@
-import styled from "@emotion/styled";
-import { useEffect, useState } from "react";
+import { Stack, styled } from "@mui/material";
+import * as React from "react";
+import { Link } from "react-router-dom";
+import * as R from "remeda";
 
-export default function BreadCrumb() {
-  const [breadcrumbInfo, setBreadcrumbInfo] = useState({
-    paths: [{ text: "홈", href: "/" }],
-    title: "파이콘 한국 행동강령(CoC)",
-  });
+import BackendAPISchemas from "../../../../../../packages/common/src/schemas/backendAPI";
 
-  useEffect(() => {
-    const mockPathInfo = {
-      paths: [
-        { text: "홈", href: "/" },
-        { text: "파이콘 한국", href: "/about" },
-      ],
-      title: "파이콘 한국 행동강령(CoC)",
-    };
-    setBreadcrumbInfo(mockPathInfo);
-  }, []);
+type BreadCrumbPropType = {
+  title: string;
+  parentSiteMaps: (BackendAPISchemas.NestedSiteMapSchema | undefined)[];
+};
 
+export const BreadCrumb: React.FC<BreadCrumbPropType> = ({ title, parentSiteMaps }) => {
+  let route = "/";
   return (
     <BreadCrumbContainer>
-      <BreadcrumbPathContainer>
-        {breadcrumbInfo.paths.map((item, index) => (
-          <span key={index}>
-            {index > 0 && <span className="separator">&gt;</span>}
-            <a href={item.href}>{item.text}</a>
-          </span>
-        ))}
+      <BreadcrumbPathContainer direction="row" alignItems="center">
+        {parentSiteMaps
+          .slice(1, -1)
+          .filter((routeInfo) => R.isNonNullish(routeInfo))
+          .map(({ route_code, name }, index) => {
+            route += `${route_code}/`;
+            return (
+              <span key={index}>
+                {index > 0 && <span className="separator">&gt;</span>}
+                <Link to={route} children={name} />
+              </span>
+            );
+          })}
       </BreadcrumbPathContainer>
-      <PageTitle>{breadcrumbInfo.title}</PageTitle>
+      <PageTitle>{title}</PageTitle>
     </BreadCrumbContainer>
   );
-}
+};
 
-const BreadCrumbContainer = styled.div`
-  width: 100%;
-  padding: 14px 117px;
-  background-color: rgba(255, 255, 255, 0.7);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45));
-  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-`;
+const BreadCrumbContainer = styled(Stack)(({ theme }) => ({
+  position: "fixed",
+
+  top: "3.625rem",
+  width: "100%",
+  height: "4.5rem",
+  background: "linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45))",
+  boxShadow: "0 1px 10px rgba(0, 0, 0, 0.1)",
+  backdropFilter: "blur(10px)",
+
+  gap: "0.25rem",
+  justifyContent: "center",
+  alignItems: "flex-start",
+
+  zIndex: theme.zIndex.appBar - 1,
+
+  paddingRight: "8rem",
+  paddingLeft: "8rem",
+
+  [theme.breakpoints.down("lg")]: {
+    paddingRight: "2rem",
+    paddingLeft: "2rem",
+  },
+  [theme.breakpoints.down("sm")]: {
+    paddingRight: "1rem",
+    paddingLeft: "1rem",
+  },
+}));
 
-const BreadcrumbPathContainer = styled.div`
+const BreadcrumbPathContainer = styled(Stack)`
   font-size: 9.75px;
   font-weight: 300;
   color: #000000;
-  display: flex;
-  align-items: center;
-  gap: 0;
 
   a {
     color: #000000;
@@ -67,7 +82,7 @@ const BreadcrumbPathContainer = styled.div`
   }
 `;
 
-const PageTitle = styled.h1`
+const PageTitle = styled("h1")`
   font-size: 27px;
   font-weight: 600;
   color: #000000;