Skip to content

Commit 0eeae88

Browse files
jungmirjungmir
committed
Feat: 폭스터 세션 페이지 추가
1 parent 0979981 commit 0eeae88

File tree

9 files changed

+128
-29
lines changed

9 files changed

+128
-29
lines changed

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

736 KB
Loading

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

833 KB
Loading

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

608 KB
Loading

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

606 KB
Loading

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

763 KB
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
@@ -97,6 +97,10 @@ const Menus: MenuType = {
9797
},
9898
],
9999
},
100+
poster: {
101+
name: "포스터 세션",
102+
path: "/poster-session"
103+
},
100104
sponsoring: {
101105
name: "후원하기",
102106
sub: [

‎src/pages/PosterSession/index.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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+
</p>
35+
<h1>{t("미리보는 포스터 세션")}</h1>
36+
<Swiper
37+
slidesPerView={isMobile ? 1 : 3}
38+
scrollbar={true}
39+
spaceBetween={20}
40+
modules={[Scrollbar]}
41+
loop={true}
42+
>
43+
<SwiperSlide>
44+
<SampleImage src="/images/poster-session/posterSession1.jpg" alt="포스터 세션 예시 1" />
45+
</SwiperSlide>
46+
<SwiperSlide>
47+
<SampleImage src="/images/poster-session/posterSession2.jpg" alt="포스터 세션 예시 2" />
48+
</SwiperSlide>
49+
<SwiperSlide>
50+
<SampleImage src="/images/poster-session/posterSession3.jpg" alt="포스터 세션 예시 3" />
51+
</SwiperSlide>
52+
<SwiperSlide>
53+
<SampleImage src="/images/poster-session/posterSession4.jpg" alt="포스터 세션 예시 4" />
54+
</SwiperSlide>
55+
<SwiperSlide>
56+
<SampleImage src="/images/poster-session/posterSession5.jpg" alt="포스터 세션 예시 5" />
57+
</SwiperSlide>
58+
</Swiper>
59+
<Grid></Grid>
60+
</Page>
61+
);
62+
};
63+
64+
export default PosterSession;
65+
66+
const SampleImage = styled.img`
67+
max-width: 75%;
68+
border-radius: 1rem;
69+
`;
70+
71+
const Grid = styled.div`
72+
display: grid;
73+
width: 100%;
74+
grid-gap: 1.5rem;
75+
margin-top: 2.5rem;
76+
grid-template-columns: repeat(2, 1fr);
77+
78+
@media only screen and (max-width: 810px) {
79+
grid-template-columns: repeat(1, 1fr);
80+
}
81+
`;

‎src/routes.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import TermsOfService from "pages/TermsOfService";
1818
import Health from "./pages/About/health";
1919
import SponsorDetailPage from "pages/Sponsor/SponsorDetail";
2020
import PatronList from "pages/Sponsor/patron";
21+
import PosterSession from "pages/PosterSession";
2122

2223
const Router = () => {
2324
return (
@@ -28,6 +29,7 @@ const Router = () => {
2829
<Route path="/about/pyconkr2024" element={<Pyconkr2024 />} />
2930
<Route path="/about/coc" element={<Coc />} />
3031
<Route path="/about/health" element={<Health />} />
32+
<Route path="/poster-session" element={<PosterSession />} />
3133
<Route path="/sponsoring/sponsor/prospectus" element={<SponsorPage />} />
3234
<Route path="/sponsoring/sponsor/:id" element={<SponsorDetailPage />} />
3335
<Route path="/sponsoring/patron" element={<PatronList />} />

0 commit comments

Comments
 (0)