feat : 후원사 목록 마크업

Author: y00eunji

apps/pyconkr/src/assets/sponsorExample.svg

@@ -0,0 +1,73 @@
+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 (
+    <SponsorContainer>
+      <SponsorTitle>후원사 목록</SponsorTitle>
+      <SponsorGrid>
+        {sponsors.map((sponsor) => (
+          <SponsorItem key={sponsor.id}>
+            <sponsor.Logo />
+          </SponsorItem>
+        ))}
+      </SponsorGrid>
+    </SponsorContainer>
+  );
+}
+
+const SponsorContainer = styled.div`
+  width: 1067px;
+  margin: 0 auto;
+  margin-bottom: 140px;
+`;
+
+const SponsorTitle = styled.h5`
+  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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

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

@@ -3,6 +3,7 @@ import { Outlet } from "react-router-dom";
 
 import Footer from "./Footer";
 import Header from "./Header";
+import Sponsor from "./Sponsor";
 
 export default function MainLayout() {
   return (
@@ -11,6 +12,7 @@ export default function MainLayout() {
       <MainContent>
         <Outlet />
       </MainContent>
+      <Sponsor />
       <Footer />
     </LayoutContainer>
   );

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

@@ -23,17 +23,27 @@ const TabList: { [key in SelectedTabType]: React.ReactNode } = {
 };
 
 export const Test: React.FC = () => {
-  const [selectedTab, setSelectedTab] = React.useState<SelectedTabType>(getTabFromLocalStorage());
-  const selectTab = (tab: SelectedTabType) => setSelectedTab(setTabToLocalStorage(tab));
+  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)}>
+    <Button
+      variant={selectedTab === tab ? "contained" : "outlined"}
+      onClick={() => selectTab(tab)}
+    >
       {tab} Test
     </Button>
   );
 
   return (
     <Stack>
-      <Stack direction="row" spacing={2} sx={{ width: "100%", justifyContent: "center" }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ width: "100%", justifyContent: "center" }}
+      >
         {Object.keys(TabList).map((tab) => (
           <TabButton key={tab} tab={tab as SelectedTabType} />
         ))}