diff --git a/public/images/poster-session/posterSession1.jpg b/public/images/poster-session/posterSession1.jpg new file mode 100644 index 0000000..fef4eea Binary files /dev/null and b/public/images/poster-session/posterSession1.jpg differ diff --git a/public/images/poster-session/posterSession2.jpg b/public/images/poster-session/posterSession2.jpg new file mode 100644 index 0000000..6f5ad4e Binary files /dev/null and b/public/images/poster-session/posterSession2.jpg differ diff --git a/public/images/poster-session/posterSession3.jpg b/public/images/poster-session/posterSession3.jpg new file mode 100644 index 0000000..da0c048 Binary files /dev/null and b/public/images/poster-session/posterSession3.jpg differ diff --git a/public/images/poster-session/posterSession4.jpg b/public/images/poster-session/posterSession4.jpg new file mode 100644 index 0000000..dceabda Binary files /dev/null and b/public/images/poster-session/posterSession4.jpg differ diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx index 907c782..e00047f 100644 --- a/src/components/Nav/index.tsx +++ b/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 ( @@ -35,23 +35,27 @@ const Nav = () => { {Object.entries(MenuRoutes).map(([path, menu]) => ( {t(menu.name)} - { - menu.sub && + {menu.sub && ( + {menu.sub.map((subMenu) => ( - + {t(subMenu.name)} ))} - } + )} ))} - ) -} + ); +}; -export default Nav +export default Nav; const Container = styled.div` display: flex; @@ -59,7 +63,7 @@ const Container = styled.div` 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; } } -` +`; diff --git a/src/components/Nav/menus.ts b/src/components/Nav/menus.ts index cc1fa31..5aac818 100644 --- a/src/components/Nav/menus.ts +++ b/src/components/Nav/menus.ts @@ -100,6 +100,10 @@ const Menus: MenuType = { }, ], }, + poster: { + name: "포스터 세션", + path: "/poster-session" + }, sponsoring: { name: "후원하기", sub: [ diff --git a/src/pages/PosterSession/index.tsx b/src/pages/PosterSession/index.tsx new file mode 100644 index 0000000..d91b34a --- /dev/null +++ b/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 ( + +

{t("포스터 세션이란?")}

+

+ {t( + "발표자들의 포스터를 특정 장소에 계속 설치해 두고, 지정된 시간에는 컨퍼런스 참석자들과 발표자들이 포스터에 대해 자유롭게 의견을 교류하는 자리입니다." + )} +

+

{t("언제 진행하나요?")}

+

+ {t("포스터 세션은 토~일 2일 운영됩니다.")} +
+ {t("오후 세션 시작 30분 전 점심시간 / 매 쉬는 시간마다 포스터 세션이 운영됩니다.")} +

+

{t("포스터 세션 신청하기")}

+

+ {t("신청 링크: ")} + {registerFormUrl} +
+ {t("신청 기한: ")} {t("2024년 10월 18일 (금) 23:59분 까지")} +

+

{t("미리보는 포스터 세션")}

+ + + + + + + + + + + + + + + +
+ ); +}; + +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); + } +`; diff --git a/src/routes.tsx b/src/routes.tsx index ffbd07a..7655a3f 100644 --- a/src/routes.tsx +++ b/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 = () => { } /> } /> } /> + } /> } /> } /> } />