Merge remote-tracking branch 'origin/feature/sponsor'

Author: MU-Software

.prettierrc

@@ -2,8 +2,8 @@
   "semi": true,
   "singleQuote": false,
   "tabWidth": 2,
-  "printWidth": 80,
+  "printWidth": 120,
   "trailingComma": "es5",
   "arrowParens": "always",
   "endOfLine": "auto"
-} 
+}

apps/pyconkr/src/App.tsx

@@ -1,21 +1,39 @@
 import * as Common from "@frontend/common";
 import React from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes, useLocation } 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 = () => {
+// 스폰서를 표시할 페이지 경로 설정
+const SPONSOR_VISIBLE_PATHS = ["/"];
+
+const AppContent = () => {
+  const location = useLocation();
+  const shouldShowSponsor = SPONSOR_VISIBLE_PATHS.includes(location.pathname);
+
   return (
-    <BrowserRouter>
+    <SponsorProvider initialVisibility={shouldShowSponsor}>
       <Routes>
         <Route element={<MainLayout />}>
           {IS_DEBUG_ENV && <Route path="/debug" element={<Test />} />}
-          <Route path="/pages/:id" element={<Common.Components.PageIdParamRenderer />} />
+          <Route
+            path="/pages/:id"
+            element={<Common.Components.PageIdParamRenderer />}
+          />
           <Route path="*" element={<Common.Components.RouteRenderer />} />
         </Route>
       </Routes>
+    </SponsorProvider>
+  );
+};
+
+export const App: React.FC = () => {
+  return (
+    <BrowserRouter>
+      <AppContent />
     </BrowserRouter>
   );
 };

apps/pyconkr/src/assets/sponsorExample.svg

@@ -60,7 +60,15 @@ const menus = [
 ];
 
 export default function Nav() {
-  const { hoveredMenu, focusedMenu, menuRefs, setHoveredMenu, setFocusedMenu, handleKeyDown, handleBlur } = useMenu();
+  const {
+    hoveredMenu,
+    focusedMenu,
+    menuRefs,
+    setHoveredMenu,
+    setFocusedMenu,
+    handleKeyDown,
+    handleBlur,
+  } = useMenu();
 
   const [isSubMenuHovered, setIsSubMenuHovered] = useState(false);
   const [hoveredSubItem, setHoveredSubItem] = useState<string | null>(null);
@@ -73,12 +81,17 @@ export default function Nav() {
   }, [hoveredMenu, focusedMenu]);
 
   const showSubmenu = !!hoveredMenu || !!focusedMenu || isSubMenuHovered;
-  const activeMenu = hoveredMenu || focusedMenu || (isSubMenuHovered ? lastActiveMenuRef.current : null);
+  const activeMenu =
+    hoveredMenu ||
+    focusedMenu ||
+    (isSubMenuHovered ? lastActiveMenuRef.current : null);
   const currentMenu = menus.find((menu) => menu.text === activeMenu);
 
   const hasActiveThirdLevel = useMemo(() => {
     if (!hoveredSubItem || !currentMenu) return false;
-    const activeSubItem = currentMenu.subMenu.find((item) => item.text === hoveredSubItem);
+    const activeSubItem = currentMenu.subMenu.find(
+      (item) => item.text === hoveredSubItem
+    );
     return activeSubItem?.subMenu && activeSubItem.subMenu.length > 0;
   }, [currentMenu, hoveredSubItem]);
 
@@ -123,7 +136,9 @@ export default function Nav() {
                       <SecondLevelItem
                         key={subItem.text}
                         onMouseEnter={() => setHoveredSubItem(subItem.text)}
-                        className={hoveredSubItem === subItem.text ? "active" : ""}
+                        className={
+                          hoveredSubItem === subItem.text ? "active" : ""
+                        }
                       >
                         <a href={subItem.href} tabIndex={0}>
                           {subItem.text}
@@ -146,7 +161,8 @@ export default function Nav() {
                     }}
                   >
                     {currentMenu.subMenu.map((subItem) => {
-                      const hasThirdLevel = subItem.subMenu && subItem.subMenu.length > 0;
+                      const hasThirdLevel =
+                        subItem.subMenu && subItem.subMenu.length > 0;
                       const isActive = hoveredSubItem === subItem.text;
 
                       if (!hasThirdLevel || !isActive) return null;
@@ -186,14 +202,16 @@ const NavSubContainer = styled.div`
   height: auto;
   min-height: 150px;
   background-color: rgba(255, 255, 255, 0.7);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45));
+  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);
   position: fixed;
   left: 0;
   top: 60px;
   z-index: 1500;
   display: flex;
-  justify-content: center;
   padding-top: 34px;
   padding-bottom: 34px;
   overflow-y: auto;
@@ -205,7 +223,7 @@ const SubMenuWrapper = styled.div`
   max-width: 1200px;
   width: 100%;
   height: auto;
-  padding-left: 118px;
+  padding-left: 114px;
   box-sizing: border-box;
 `;
 

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

@@ -0,0 +1,127 @@
+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;
+  name: string;
+  Logo: React.ComponentType;
+}
+
+export default function Sponsor() {
+  const [sponsors, setSponsors] = useState<Sponsor[]>([]);
+  const { isVisible } = useSponsor();
+
+  // 16개의 임시 스폰서 데이터 생성
+  useEffect(() => {
+    const fetchSponsors = () => {
+      const dummySponsors = Array(16)
+        .fill(null)
+        .map((_, index) => ({
+          id: index + 1,
+          name: `후원사 ${index + 1}`,
+          Logo: SponsorExample,
+        }));
+
+      setSponsors(dummySponsors);
+    };
+
+    fetchSponsors();
+  }, []);
+
+  if (!isVisible) return null;
+
+  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;
+  }
+`;

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

@@ -27,17 +27,32 @@ 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 (
+<<<<<<< HEAD
     <Stack sx={{ width: "100%", height: "100%", minHeight: "100%", flexGrow: 1, py: 2 }} spacing={2}>
       <Stack direction="row" spacing={2} sx={{ width: "100%", justifyContent: "center" }}>
+=======
+    <Stack>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ width: "100%", justifyContent: "center" }}
+      >
+>>>>>>> origin/feature/sponsor
         {Object.keys(TabList).map((tab) => (
           <TabButton key={tab} tab={tab as SelectedTabType} />
         ))}

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

@@ -0,0 +1,34 @@
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface SponsorContextType {
+  isVisible: boolean;
+  setIsVisible: (value: boolean) => void;
+}
+
+const SponsorContext = createContext<SponsorContextType | undefined>(undefined);
+
+interface SponsorProviderProps {
+  children: ReactNode;
+  initialVisibility?: boolean;
+}
+
+export function SponsorProvider({
+  children,
+  initialVisibility = false,
+}: SponsorProviderProps) {
+  const [isVisible, setIsVisible] = useState(initialVisibility);
+
+  return (
+    <SponsorContext.Provider value={{ isVisible, setIsVisible }}>
+      {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;
+}