feat: 후원사 API 연동

Author: MU-Software

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

@@ -1,121 +1,98 @@
-import styled from "@emotion/styled";
-import { useEffect, useState } from "react";
-
-import SponsorExample from "../../../assets/sponsorExample.svg?react";
-
-interface Sponsor {
-  id: number;
-  name: string;
-  Logo: React.ComponentType;
-}
-
-export default function Sponsor() {
-  const [sponsors, setSponsors] = useState<Sponsor[]>([]);
-
-  // 16개의 임시 스폰서 데이터 생성
-  useEffect(() => {
-    const fetchSponsors = () => {
-      const dummySponsors = Array(16)
-        .fill(null)
-        .map((_, index) => ({
-          id: index + 1,
-          name: `후원사 ${index + 1}`,
-          Logo: SponsorExample,
-        }));
-
-      setSponsors(dummySponsors);
-    };
-
-    fetchSponsors();
-  }, []);
-
-  return (
-    <SponsorSection aria-label="후원사 섹션">
-      <SponsorTitle as="h4" role="heading" aria-level={4}>
-        후원사 목록
-      </SponsorTitle>
-      <SponsorGrid role="list" aria-label="후원사 목록 그리드">
-        {sponsors.map((sponsor) => (
-          <SponsorItem key={sponsor.id} role="listitem">
-            <SponsorButton type="button" aria-label={`${sponsor.name} 상세 정보 보기`}>
-              <span className="sr-only">{sponsor.name}</span>
-              <sponsor.Logo aria-hidden="true" />
-            </SponsorButton>
-          </SponsorItem>
-        ))}
-      </SponsorGrid>
-    </SponsorSection>
-  );
-}
-
-const SponsorSection = styled.section`
-  width: 1067px;
-  margin: 0 auto;
-  margin-bottom: 140px;
-`;
-
-const SponsorTitle = styled.h4`
-  font-weight: 600;
-  font-size: 37px;
-  text-align: center;
-  margin: 0;
-`;
-
-const SponsorGrid = styled.div`
-  margin-top: 101px;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  column-gap: 35px;
-  row-gap: 75px;
-  justify-items: center;
-`;
-
-const SponsorItem = styled.div`
-  width: 240px;
-  height: 75px;
-`;
-
-const SponsorButton = styled.button`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  transition: transform 0.2s ease;
-
-  &:focus {
-    outline: 2px solid #007aff;
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: 2px solid #007aff;
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  &:hover {
-    // transform: scale(1.05);
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-`;
+import * as Common from "@frontend/common";
+import { CircularProgress, Divider, Stack, Typography, styled } from "@mui/material";
+import { ErrorBoundary, Suspense } from "@suspensive/react";
+import { Link } from "react-router-dom";
+
+import { useAppContext } from "../../../contexts/app_context";
+
+const LogoHeight: React.CSSProperties["height"] = "8rem";
+const LogoWidth: React.CSSProperties["width"] = "15rem";
+
+const SponsorContainer = styled(Stack)({
+  width: "100%",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+const SponsorSection = styled(Stack)({
+  margin: "8rem 8rem 4rem 8rem",
+  width: "100%",
+  maxWidth: "1300px",
+});
+
+const SponsorStack = styled(Stack)({
+  flexDirection: "row",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "0 1rem",
+  gap: "2rem",
+});
+
+const LogoImageContainer = styled(Stack)({
+  alignItems: "center",
+  justifyContent: "center",
+  alignContent: "stretch",
+  height: LogoHeight,
+  maxHeight: LogoHeight,
+  maxWidth: LogoWidth,
+});
+
+const LogoImage = styled("img")({
+  height: `calc(${LogoHeight} * 0.9)`, // 90% of LogoHeight
+  minHeight: LogoHeight,
+  minWidth: `calc(${LogoWidth} * 0.9)`, // 80% of LogoWidth
+  maxWidth: "100%",
+  maxHeight: "100%",
+  objectFit: "contain",
+});
+
+export const Sponsor: React.FC = ErrorBoundary.with(
+  {
+    fallback: (
+      <Typography variant="h6" color="error">
+        후원사 정보를 불러오는 중 문제가 발생했습니다,
+        <br />
+        잠시 후 다시 시도해 주세요.
+      </Typography>
+    ),
+  },
+  Suspense.with({ fallback: <CircularProgress /> }, () => {
+    const { siteMapNode } = useAppContext();
+    const backendAPIClient = Common.Hooks.BackendAPI.useBackendClient();
+    const { data: sponsorData } = Common.Hooks.BackendAPI.useSponsorQuery(backendAPIClient);
+
+    if (!siteMapNode) return <CircularProgress />;
+
+    const flatSiteMap = Common.Utils.buildFlatSiteMap(siteMapNode);
+    const flatSiteMapObj = flatSiteMap.reduce((a, i) => ({ ...a, [i.id]: i }), {} as Record<string, { route: string }>);
+
+    return (
+      <SponsorContainer>
+        <SponsorSection aria-label="후원사 섹션">
+          <Typography variant="h4" textAlign="center" children="후원사 목록" fontWeight="bold" area-level={4} />
+          <Stack spacing={4} sx={{ my: 4 }} aria-label="후원사 목록 그리드">
+            {sponsorData
+              .filter((t) => t.sponsors.length)
+              .map((sponsorTier, i, a) => (
+                <Stack spacing={6} key={sponsorTier.id} aria-label={`후원사 티어: ${sponsorTier.name}`}>
+                  <Typography variant="h5" key={sponsorTier.id} textAlign="center" fontWeight="bold" children={sponsorTier.name} area-level={5} />
+                  <SponsorStack>
+                    {sponsorTier.sponsors.map((sponsor) => {
+                      const sponsorImg = (
+                        <LogoImageContainer>
+                          <LogoImage src={sponsor.logo} alt={sponsor.name} loading="lazy" />
+                        </LogoImageContainer>
+                      );
+                      return sponsor.sitemap_id ? <Link to={flatSiteMapObj[sponsor.sitemap_id].route} children={sponsorImg} /> : sponsorImg;
+                    })}
+                  </SponsorStack>
+                  {i !== a.length - 1 && <Divider sx={{ m: "2rem" }} />}
+                </Stack>
+              ))}
+          </Stack>
+        </SponsorSection>
+      </SponsorContainer>
+    );
+  })
+);

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

@@ -4,7 +4,7 @@ import { Outlet } from "react-router-dom";
 
 import Footer from "./Footer";
 import Header from "./Header";
-import Sponsor from "./Sponsor";
+import { Sponsor } from "./Sponsor";
 import { useAppContext } from "../../contexts/app_context";
 
 export default function MainLayout() {