feat: 후원사 컨텍스트 추가 및 App 컴포넌트에 통합

Author: y00eunji

apps/pyconkr/src/App.tsx

@@ -1,21 +1,27 @@
 import * as Common from "@frontend/common";
 import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { SponsorProvider } from "./contexts/SponsorContext";
 
 import MainLayout from "./components/layout";
 import { Test } from "./components/pages/test";
 import { IS_DEBUG_ENV } from "./consts/index.ts";
 
 export const App: React.FC = () => {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route element={<MainLayout />}>
-          {IS_DEBUG_ENV && <Route path="/debug" element={<Test />} />}
-          <Route path="/pages/:id" element={<Common.Components.PageIdParamRenderer />} />
-          <Route path="*" element={<Common.Components.RouteRenderer />} />
-        </Route>
-      </Routes>
-    </BrowserRouter>
+    <SponsorProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route element={<MainLayout />}>
+            {IS_DEBUG_ENV && <Route path="/debug" element={<Test />} />}
+            <Route
+              path="/pages/:id"
+              element={<Common.Components.PageIdParamRenderer />}
+            />
+            <Route path="*" element={<Common.Components.RouteRenderer />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </SponsorProvider>
   );
 };

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

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { useEffect, useState } from "react";
 import SponsorExample from "../../../assets/sponsorExample.svg?react";
+import { useSponsor } from "../../../contexts/SponsorContext";
 
 interface Sponsor {
   id: number;
@@ -10,6 +11,7 @@ interface Sponsor {
 
 export default function Sponsor() {
   const [sponsors, setSponsors] = useState<Sponsor[]>([]);
+  const { isVisible } = useSponsor();
 
   // 16개의 임시 스폰서 데이터 생성
   useEffect(() => {
@@ -28,6 +30,8 @@ export default function Sponsor() {
     fetchSponsors();
   }, []);
 
+  if (!isVisible) return null;
+
   return (
     <SponsorContainer>
       <SponsorTitle>후원사 목록</SponsorTitle>

apps/pyconkr/src/contexts/SponsorContext.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface SponsorContextType {
+  isVisible: boolean;
+  toggleVisibility: () => void;
+}
+
+const SponsorContext = createContext<SponsorContextType | undefined>(undefined);
+
+export function SponsorProvider({ children }: { children: ReactNode }) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const toggleVisibility = () => {
+    setIsVisible((prev) => !prev);
+  };
+
+  return (
+    <SponsorContext.Provider value={{ isVisible, toggleVisibility }}>
+      {children}
+    </SponsorContext.Provider>
+  );
+}
+
+export function useSponsor() {
+  const context = useContext(SponsorContext);
+  if (context === undefined) {
+    throw new Error("useSponsor must be used within a SponsorProvider");
+  }
+  return context;
+}