포스터 세션 페이지 추가

src/components/Nav/index.tsx

@@ -1,29 +1,29 @@
-import Hamburger from "hamburger-react"
-import React, { useState } from "react"
-import { useDispatch } from "react-redux"
-import { useNavigate } from "react-router"
-import styled from "styled-components"
+import Hamburger from "hamburger-react";
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router";
+import styled from "styled-components";
 
-import { Slogan as SloganSvg } from "assets/icons"
-import useIsMobile from "utils/hooks/useIsMobile"
-import useTranslation from "utils/hooks/useTranslation"
-import MenuRoutes, { MenuElementType } from "./menus"
+import { Slogan as SloganSvg } from "assets/icons";
+import useIsMobile from "utils/hooks/useIsMobile";
+import useTranslation from "utils/hooks/useTranslation";
+import MenuRoutes, { MenuElementType } from "./menus";
 
 const Nav = () => {
-  const navigate = useNavigate()
-  const dispatch = useDispatch()
-  const isMobile = useIsMobile()
-  const [openMenu, setOpenMenu] = useState(false)
-  const t = useTranslation()
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const isMobile = useIsMobile();
+  const [openMenu, setOpenMenu] = useState(false);
+  const t = useTranslation();
 
   const menuOnClickHandler = (menu: MenuElementType) => () => {
     if (menu.path) {
-      navigate(menu.path)
-      setOpenMenu(false)
+      navigate(menu.path);
+      setOpenMenu(false);
     } else if (menu.onClick) {
-      menu.onClick?.({ setOpenMenu, dispatch, navigate })
+      menu.onClick?.({ setOpenMenu, dispatch, navigate });
     }
-  }
+  };
 
   return (
     <Container className="nav-bar">
@@ -35,31 +35,35 @@ const Nav = () => {
         {Object.entries(MenuRoutes).map(([path, menu]) => (
           <Menu className="menu-item" key={path}>
             <span onClick={menuOnClickHandler(menu)}>{t(menu.name)}</span>
-            {
-              menu.sub && <SubMenus className="sub-menu">
+            {menu.sub && (
+              <SubMenus className="sub-menu">
                 {menu.sub.map((subMenu) => (
-                  <SubMenu className="sub-menu-item" key={subMenu.name} onClick={menuOnClickHandler(subMenu)}>
+                  <SubMenu
+                    className="sub-menu-item"
+                    key={subMenu.name}
+                    onClick={menuOnClickHandler(subMenu)}
+                  >
                     {t(subMenu.name)}
                   </SubMenu>
                 ))}
               </SubMenus>
-            }
+            )}
           </Menu>
         ))}
       </div>
     </Container>
-  )
-}
+  );
+};
 
-export default Nav
+export default Nav;
 
 const Container = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   background-color: #141414;
-`
+`;
 
 const SubMenus = styled.div`
   display: none;
@@ -70,7 +74,7 @@ const SubMenus = styled.div`
 
   font-size: initial;
   font-weight: initial;
-`
+`;
 
 const SubMenu = styled.div`
   cursor: pointer;
@@ -86,17 +90,25 @@ const SubMenu = styled.div`
   &:hover {
     color: #b0a8fe;
   }
-`
+`;
 
 const Menu = styled.div`
   position: relative;
   cursor: pointer;
   user-select: none;
 
+  @media only screen and (min-width: 810px) {
+    & + & {
+      border-left: 1px solid;
+      height: 1rem;
+      padding-left: 0.5rem;
+    }
+  }
+
   &:hover {
     color: #b0a8fe;
     & > ${SubMenus} {
       display: initial;
     }
   }
-`
+`;

src/components/Nav/menus.ts

@@ -100,6 +100,10 @@ const Menus: MenuType = {
       },
     ],
   },
+  poster: {
+    name: "포스터 세션",
+    path: "/poster-session"
+  },
   sponsoring: {
     name: "후원하기",
     sub: [

src/pages/PosterSession/index.tsx

@@ -0,0 +1,79 @@
+import Page from "components/common/Page";
+import React from "react";
+import useTranslation from "utils/hooks/useTranslation";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/scrollbar";
+import { Scrollbar } from "swiper/modules";
+import useIsMobile from "utils/hooks/useIsMobile";
+import styled from "styled-components";
+
+const PosterSession = () => {
+  const t = useTranslation();
+  const isMobile = useIsMobile();
+  const registerFormUrl = "https://forms.gle/yjhuUZHR9tR3AR7d9";
+
+  return (
+    <Page>
+      <h1>{t("포스터 세션이란?")}</h1>
+      <p>
+        {t(
+          "발표자들의 포스터를 특정 장소에 계속 설치해 두고, 지정된 시간에는 컨퍼런스 참석자들과 발표자들이 포스터에 대해 자유롭게 의견을 교류하는 자리입니다."
+        )}
+      </p>
+      <h1>{t("언제 진행하나요?")}</h1>
+      <p>
+        {t("포스터 세션은 토~일 2일 운영됩니다.")}
+        <br />
+        {t("오후 세션 시작 30분 전 점심시간 / 매 쉬는 시간마다 포스터 세션이 운영됩니다.")}
+      </p>
+      <h1>{t("포스터 세션 신청하기")}</h1>
+      <p>
+        {t("신청 링크: ")}
+        <a href={registerFormUrl}>{registerFormUrl}</a>
+        <br />
+        {t("신청 기한: ")} {t("2024년 10월 18일 (금) 23:59분 까지")}
+      </p>
+      <h1>{t("미리보는 포스터 세션")}</h1>
+      <Swiper
+        slidesPerView={isMobile ? 1 : 3}
+        scrollbar={true}
+        spaceBetween={20}
+        modules={[Scrollbar]}
+        loop={true}
+      >
+        <SwiperSlide>
+          <SampleImage src="/images/poster-session/posterSession4.jpg" alt="포스터 세션 예시 4" />
+        </SwiperSlide>
+        <SwiperSlide>
+          <SampleImage src="/images/poster-session/posterSession1.jpg" alt="포스터 세션 예시 1" />
+        </SwiperSlide>
+        <SwiperSlide>
+          <SampleImage src="/images/poster-session/posterSession2.jpg" alt="포스터 세션 예시 2" />
+        </SwiperSlide>
+        <SwiperSlide>
+          <SampleImage src="/images/poster-session/posterSession3.jpg" alt="포스터 세션 예시 3" />
+        </SwiperSlide>
+      </Swiper>
+      <Grid></Grid>
+    </Page>
+  );
+};
+
+export default PosterSession;
+
+const SampleImage = styled.img`
+  border-radius: 1rem;
+`;
+
+const Grid = styled.div`
+  display: grid;
+  width: 100%;
+  grid-gap: 1.5rem;
+  margin-top: 2.5rem;
+  grid-template-columns: repeat(2, 1fr);
+
+  @media only screen and (max-width: 810px) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`;

src/routes.tsx

@@ -1,24 +1,25 @@
 import React from "react"
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"
 
-import Footer from "components/Footer"
-import Nav from "components/Nav"
-import { DialogCollection } from "dialogs"
-import Coc from "pages/About/coc"
-import { HowToGetThere } from "pages/About/howToGetThere"
-import Pyconkr2024 from "pages/About/pyconkr2024"
-import Cfp from "pages/Contribution/cfp"
-import Home from "pages/Home"
-import NotFound from "pages/NotFound"
-import PrivacyPolicy from "pages/PrivacyPolicy"
-import { SessionDetailPage } from "pages/Session/detail"
-import { SessionListPage } from "pages/Session/list"
-import { SessionTimeTablePage } from "pages/Session/timetable"
-import SponsorPage from "pages/Sponsor"
-import SponsorDetailPage from "pages/Sponsor/SponsorDetail"
-import PatronList from "pages/Sponsor/patron"
-import TermsOfService from "pages/TermsOfService"
-import Health from "./pages/About/health"
+import Footer from "components/Footer";
+import Nav from "components/Nav";
+import { DialogCollection } from "dialogs";
+import Coc from "pages/About/coc";
+import Pyconkr2024 from "pages/About/pyconkr2024";
+import Cfp from "pages/Contribution/cfp";
+import Home from "pages/Home";
+import NotFound from "pages/NotFound";
+import PrivacyPolicy from "pages/PrivacyPolicy";
+import { SessionDetailPage } from "pages/Session/detail";
+import { SessionListPage } from "pages/Session/list";
+import { SessionTimeTablePage } from "pages/Session/timetable";
+import SponsorPage from "pages/Sponsor";
+import TermsOfService from "pages/TermsOfService";
+import Health from "./pages/About/health";
+import SponsorDetailPage from "pages/Sponsor/SponsorDetail";
+import PatronList from "pages/Sponsor/patron";
+import PosterSession from "pages/PosterSession";
+import { HowToGetThere } from "pages/About/howToGetThere";
 
 const Router = () => {
   return (
@@ -29,6 +30,7 @@ const Router = () => {
         <Route path="/about/pyconkr2024" element={<Pyconkr2024 />} />
         <Route path="/about/coc" element={<Coc />} />
         <Route path="/about/health" element={<Health />} />
+        <Route path="/poster-session" element={<PosterSession />} />
         <Route path="/about/place" element={<HowToGetThere />} />
         <Route path="/sponsoring/sponsor/prospectus" element={<SponsorPage />} />
         <Route path="/sponsoring/sponsor/:id" element={<SponsorDetailPage />} />