Skip to content

Commit 7b62dbc

Browse files
jungmirjungmir
authored
Merge pull request #44 from pythonkr/feature/poster-session
포스터 세션 페이지 추가
2 parents 0ee1a56 + 961726d commit 7b62dbc

File tree

8 files changed

+144
-47
lines changed

8 files changed

+144
-47
lines changed

‎public/images/poster-session/posterSession1.jpg‎

5.77 MB
Loading

‎public/images/poster-session/posterSession2.jpg‎

12.4 MB
Loading

‎public/images/poster-session/posterSession3.jpg‎

2.52 MB
Loading

‎public/images/poster-session/posterSession4.jpg‎

9.58 MB
Loading

‎src/components/Nav/index.tsx‎

Lines changed: 41 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
import Hamburger from "hamburger-react"
2-
import React, { useState } from "react"
3-
import { useDispatch } from "react-redux"
4-
import { useNavigate } from "react-router"
5-
import styled from "styled-components"
1+
import Hamburger from "hamburger-react";
2+
import React, { useState } from "react";
3+
import { useDispatch } from "react-redux";
4+
import { useNavigate } from "react-router";
5+
import styled from "styled-components";
66

7-
import { Slogan as SloganSvg } from "assets/icons"
8-
import useIsMobile from "utils/hooks/useIsMobile"
9-
import useTranslation from "utils/hooks/useTranslation"
10-
import MenuRoutes, { MenuElementType } from "./menus"
7+
import { Slogan as SloganSvg } from "assets/icons";
8+
import useIsMobile from "utils/hooks/useIsMobile";
9+
import useTranslation from "utils/hooks/useTranslation";
10+
import MenuRoutes, { MenuElementType } from "./menus";
1111

1212
const Nav = () => {
13-
const navigate = useNavigate()
14-
const dispatch = useDispatch()
15-
const isMobile = useIsMobile()
16-
const [openMenu, setOpenMenu] = useState(false)
17-
const t = useTranslation()
13+
const navigate = useNavigate();
14+
const dispatch = useDispatch();
15+
const isMobile = useIsMobile();
16+
const [openMenu, setOpenMenu] = useState(false);
17+
const t = useTranslation();
1818

1919
const menuOnClickHandler = (menu: MenuElementType) => () => {
2020
if (menu.path) {
21-
navigate(menu.path)
22-
setOpenMenu(false)
21+
navigate(menu.path);
22+
setOpenMenu(false);
2323
} else if (menu.onClick) {
24-
menu.onClick?.({ setOpenMenu, dispatch, navigate })
24+
menu.onClick?.({ setOpenMenu, dispatch, navigate });
2525
}
26-
}
26+
};
2727

2828
return (
2929
<Container className="nav-bar">
@@ -35,31 +35,35 @@ const Nav = () => {
3535
{Object.entries(MenuRoutes).map(([path, menu]) => (
3636
<Menu className="menu-item" key={path}>
3737
<span onClick={menuOnClickHandler(menu)}>{t(menu.name)}</span>
38-
{
39-
menu.sub && <SubMenus className="sub-menu">
38+
{menu.sub && (
39+
<SubMenus className="sub-menu">
4040
{menu.sub.map((subMenu) => (
41-
<SubMenu className="sub-menu-item" key={subMenu.name} onClick={menuOnClickHandler(subMenu)}>
41+
<SubMenu
42+
className="sub-menu-item"
43+
key={subMenu.name}
44+
onClick={menuOnClickHandler(subMenu)}
45+
>
4246
{t(subMenu.name)}
4347
</SubMenu>
4448
))}
4549
</SubMenus>
46-
}
50+
)}
4751
</Menu>
4852
))}
4953
</div>
5054
</Container>
51-
)
52-
}
55+
);
56+
};
5357

54-
export default Nav
58+
export default Nav;
5559

5660
const Container = styled.div`
5761
display: flex;
5862
justify-content: space-between;
5963
align-items: center;
6064
6165
background-color: #141414;
62-
`
66+
`;
6367

6468
const SubMenus = styled.div`
6569
display: none;
@@ -70,7 +74,7 @@ const SubMenus = styled.div`
7074
7175
font-size: initial;
7276
font-weight: initial;
73-
`
77+
`;
7478

7579
const SubMenu = styled.div`
7680
cursor: pointer;
@@ -86,17 +90,25 @@ const SubMenu = styled.div`
8690
&:hover {
8791
color: #b0a8fe;
8892
}
89-
`
93+
`;
9094

9195
const Menu = styled.div`
9296
position: relative;
9397
cursor: pointer;
9498
user-select: none;
9599
100+
@media only screen and (min-width: 810px) {
101+
& + & {
102+
border-left: 1px solid;
103+
height: 1rem;
104+
padding-left: 0.5rem;
105+
}
106+
}
107+
96108
&:hover {
97109
color: #b0a8fe;
98110
& > ${SubMenus} {
99111
display: initial;
100112
}
101113
}
102-
`
114+
`;

‎src/components/Nav/menus.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,10 @@ const Menus: MenuType = {
100100
},
101101
],
102102
},
103+
poster: {
104+
name: "포스터 세션",
105+
path: "/poster-session"
106+
},
103107
sponsoring: {
104108
name: "후원하기",
105109
sub: [

‎src/pages/PosterSession/index.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import Page from "components/common/Page";
2+
import React from "react";
3+
import useTranslation from "utils/hooks/useTranslation";
4+
import { Swiper, SwiperSlide } from "swiper/react";
5+
import "swiper/css";
6+
import "swiper/css/scrollbar";
7+
import { Scrollbar } from "swiper/modules";
8+
import useIsMobile from "utils/hooks/useIsMobile";
9+
import styled from "styled-components";
10+
11+
const PosterSession = () => {
12+
const t = useTranslation();
13+
const isMobile = useIsMobile();
14+
const registerFormUrl = "https://forms.gle/yjhuUZHR9tR3AR7d9";
15+
16+
return (
17+
<Page>
18+
<h1>{t("포스터 세션이란?")}</h1>
19+
<p>
20+
{t(
21+
"발표자들의 포스터를 특정 장소에 계속 설치해 두고, 지정된 시간에는 컨퍼런스 참석자들과 발표자들이 포스터에 대해 자유롭게 의견을 교류하는 자리입니다."
22+
)}
23+
</p>
24+
<h1>{t("언제 진행하나요?")}</h1>
25+
<p>
26+
{t("포스터 세션은 토~일 2일 운영됩니다.")}
27+
<br />
28+
{t("오후 세션 시작 30분 전 점심시간 / 매 쉬는 시간마다 포스터 세션이 운영됩니다.")}
29+
</p>
30+
<h1>{t("포스터 세션 신청하기")}</h1>
31+
<p>
32+
{t("신청 링크: ")}
33+
<a href={registerFormUrl}>{registerFormUrl}</a>
34+
<br />
35+
{t("신청 기한: ")} {t("2024년 10월 18일 (금) 23:59분 까지")}
36+
</p>
37+
<h1>{t("미리보는 포스터 세션")}</h1>
38+
<Swiper
39+
slidesPerView={isMobile ? 1 : 3}
40+
scrollbar={true}
41+
spaceBetween={20}
42+
modules={[Scrollbar]}
43+
loop={true}
44+
>
45+
<SwiperSlide>
46+
<SampleImage src="/images/poster-session/posterSession4.jpg" alt="포스터 세션 예시 4" />
47+
</SwiperSlide>
48+
<SwiperSlide>
49+
<SampleImage src="/images/poster-session/posterSession1.jpg" alt="포스터 세션 예시 1" />
50+
</SwiperSlide>
51+
<SwiperSlide>
52+
<SampleImage src="/images/poster-session/posterSession2.jpg" alt="포스터 세션 예시 2" />
53+
</SwiperSlide>
54+
<SwiperSlide>
55+
<SampleImage src="/images/poster-session/posterSession3.jpg" alt="포스터 세션 예시 3" />
56+
</SwiperSlide>
57+
</Swiper>
58+
<Grid></Grid>
59+
</Page>
60+
);
61+
};
62+
63+
export default PosterSession;
64+
65+
const SampleImage = styled.img`
66+
border-radius: 1rem;
67+
`;
68+
69+
const Grid = styled.div`
70+
display: grid;
71+
width: 100%;
72+
grid-gap: 1.5rem;
73+
margin-top: 2.5rem;
74+
grid-template-columns: repeat(2, 1fr);
75+
76+
@media only screen and (max-width: 810px) {
77+
grid-template-columns: repeat(1, 1fr);
78+
}
79+
`;

‎src/routes.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
import React from "react"
22
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"
33

4-
import Footer from "components/Footer"
5-
import Nav from "components/Nav"
6-
import { DialogCollection } from "dialogs"
7-
import Coc from "pages/About/coc"
8-
import { HowToGetThere } from "pages/About/howToGetThere"
9-
import Pyconkr2024 from "pages/About/pyconkr2024"
10-
import Cfp from "pages/Contribution/cfp"
11-
import Home from "pages/Home"
12-
import NotFound from "pages/NotFound"
13-
import PrivacyPolicy from "pages/PrivacyPolicy"
14-
import { SessionDetailPage } from "pages/Session/detail"
15-
import { SessionListPage } from "pages/Session/list"
16-
import { SessionTimeTablePage } from "pages/Session/timetable"
17-
import SponsorPage from "pages/Sponsor"
18-
import SponsorDetailPage from "pages/Sponsor/SponsorDetail"
19-
import PatronList from "pages/Sponsor/patron"
20-
import TermsOfService from "pages/TermsOfService"
21-
import Health from "./pages/About/health"
4+
import Footer from "components/Footer";
5+
import Nav from "components/Nav";
6+
import { DialogCollection } from "dialogs";
7+
import Coc from "pages/About/coc";
8+
import Pyconkr2024 from "pages/About/pyconkr2024";
9+
import Cfp from "pages/Contribution/cfp";
10+
import Home from "pages/Home";
11+
import NotFound from "pages/NotFound";
12+
import PrivacyPolicy from "pages/PrivacyPolicy";
13+
import { SessionDetailPage } from "pages/Session/detail";
14+
import { SessionListPage } from "pages/Session/list";
15+
import { SessionTimeTablePage } from "pages/Session/timetable";
16+
import SponsorPage from "pages/Sponsor";
17+
import TermsOfService from "pages/TermsOfService";
18+
import Health from "./pages/About/health";
19+
import SponsorDetailPage from "pages/Sponsor/SponsorDetail";
20+
import PatronList from "pages/Sponsor/patron";
21+
import PosterSession from "pages/PosterSession";
22+
import { HowToGetThere } from "pages/About/howToGetThere";
2223

2324
const Router = () => {
2425
return (
@@ -29,6 +30,7 @@ const Router = () => {
2930
<Route path="/about/pyconkr2024" element={<Pyconkr2024 />} />
3031
<Route path="/about/coc" element={<Coc />} />
3132
<Route path="/about/health" element={<Health />} />
33+
<Route path="/poster-session" element={<PosterSession />} />
3234
<Route path="/about/place" element={<HowToGetThere />} />
3335
<Route path="/sponsoring/sponsor/prospectus" element={<SponsorPage />} />
3436
<Route path="/sponsoring/sponsor/:id" element={<SponsorDetailPage />} />

0 commit comments

Comments
 (0)