Skip to content

Commit 4ebcec7

Browse files
constmoonconstmoon
committed
Merge branch 'add-program' into devdev
2 parents 167e39c + 36b45dc commit 4ebcec7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1540
-505
lines changed

‎frontend/assets/styles/global.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,11 @@ textarea {
2323

2424
body {
2525
line-height: 1.45;
26+
color: #fff;
27+
background-color: #100F0F;
28+
}
29+
30+
a {
31+
color: inherit;
32+
text-decoration: none;
2633
}

‎frontend/assets/styles/markdown.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@ const MarkdownStyle = styled.div`
5555
font-weight: bold;
5656
}
5757
tr {
58-
border-bottom: solid 1px ${theme.colors.grey_d9};
58+
border-bottom: solid 1px ${theme.colors.white};
59+
background-color: ${theme.colors.grey_e9};
5960
height: 3rem;
6061
}
6162
tbody > tr:nth-of-type(odd) {

‎frontend/assets/styles/mixin.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const media = {
22
mobile: (content: string) => `
3-
@media (max-width: 1080px) {
3+
@media (max-width: 768px) {
44
${content}
55
}
66
`

‎frontend/assets/styles/theme.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,23 @@ const Theme = {
22
colors: {
33
primary0: '#1F1A24',
44
primary1: '#62599C',
5-
primary2: '#0070f3',
6-
violet0: '#4c0097', // TODO: temporary color
5+
blue0: '#0070f3',
6+
violet0: '#7B61FF',
7+
violet1: '#A163FF',
8+
violet2: '#C5C5F2',
9+
violet3: '#F4F5FE',
10+
yellow0: '#EEC371',
711
black: '#000000',
12+
black_10: '#100F0F',
813
white: '#ffffff',
914
grey_f9: '#f9f9f9',
15+
grey_e9: '#e9e9e9',
1016
grey_d9: '#d9d9d9',
1117
grey_99: '#999999',
1218
grey_66: '#666666',
1319
grey_33: '#333333'
1420
},
15-
gradient:
16-
'linear-gradient(115deg, rgb(12, 0, 96), rgb(98, 89, 156), rgb(255, 247, 53))'
21+
gradient_violet: `linear-gradient(96.32deg, #9884fc 0%, #C5C5F2 100%)`
1722
}
1823

1924
export default Theme

‎frontend/assets/styles/typo.ts‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import styled from 'styled-components'
22
import theme from './theme'
3+
import { media } from './mixin'
34

45
const Heading1 = styled.h1`
56
font-size: 2.4rem;
@@ -9,16 +10,34 @@ const Heading1 = styled.h1`
910
const Heading2 = styled.h2`
1011
font-size: 1.9rem;
1112
line-height: 1.3;
13+
${(props) => {
14+
if (props.useGradient) {
15+
return `background: ${props.theme.gradient_violet};
16+
-webkit-background-clip: text;
17+
-webkit-text-fill-color: transparent;`
18+
}
19+
}}
1220
`
1321

1422
const Heading3 = styled.h3`
15-
font-size: 1.5rem;
23+
font-size: 1.6rem;
1624
line-height: 1.3;
25+
margin: 1.4rem 0;
26+
${media.mobile(`
27+
margin: 1rem 0;
28+
`)}
29+
${(props) => {
30+
if (props.useGradient) {
31+
return `background: ${props.theme.gradient_violet};
32+
-webkit-background-clip: text;
33+
-webkit-text-fill-color: transparent;`
34+
}
35+
}}
1736
`
1837

1938
const Heading4 = styled.h4`
20-
font-size: 1.25rem;
21-
line-height: 1.3;
39+
font-size: 1.1rem;
40+
line-height: 1.4;
2241
`
2342

2443
const Paragraph = styled.p`
@@ -30,7 +49,7 @@ const Caption = styled.div`
3049
`
3150

3251
const ColorLink = styled.a`
33-
color: ${theme.colors.primary2};
52+
color: ${theme.colors.blue0};
3453
`
3554

3655
export { Heading1, Heading2, Heading3, Heading4, Paragraph, Caption, ColorLink }

‎frontend/components/core/NavBar.tsx‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,47 @@
1-
import React, { useState } from 'react'
1+
import React, { useState, useEffect } from 'react'
22
import { routes, RouteType } from '../../routes/routes'
33
import styled from 'styled-components'
44
import { useTranslation } from 'react-i18next'
55
import { useRouter } from 'next/router'
6+
import Image from 'next/image'
67
import { media } from '../../assets/styles/mixin'
78
import SnsLink from './SnsLink'
9+
import PyconLogoWhite from '../../public/images/pyconkr_2022_logo_white.png'
10+
import Link from 'next/link'
811

912
const Container = styled.nav`
13+
display: flex;
14+
justify-content: space-between;
15+
position: fixed;
16+
top: 0;
17+
left: 0;
18+
right: 0;
19+
z-index: 10;
20+
background: ${(props) =>
21+
`linear-gradient(to bottom, ${props.theme.colors.black_10}, transparent)`};
1022
${media.mobile(`
1123
display: none;
1224
`)}
13-
${(props) => {
14-
if (props.isTransparent) {
15-
return `background: transparent;`
16-
}
17-
return `background-image: ${props.theme.gradient};`
18-
}}
25+
`
26+
27+
const HomeLink = styled.a`
28+
display: block;
29+
padding: 1.3rem;
1930
`
2031

2132
const List = styled.ul`
22-
width: 1080px;
23-
margin: 0 auto;
2433
display: flex;
2534
align-items: center;
2635
justify-content: space-between;
36+
margin-right: 1.5rem;
2737
`
2838
const ListItem = styled.li<{ active?: boolean }>`
29-
padding: 1.3rem;
39+
padding: 0 1.3rem;
3040
font-weight: ${(props) => (props.active ? 'bold' : 'normal')};
3141
color: ${(props) => props.theme.colors.white};
3242
position: relative;
3343
`
34-
export const Link = styled.a`
44+
export const BlockLink = styled(Link)`
3545
display: block;
3646
cursor: pointer;
3747
`
@@ -69,7 +79,7 @@ export const SubMenuList = styled.ul`
6979
position: absolute;
7080
left: 0;
7181
right: 0;
72-
top: 3.4rem;
82+
top: 2.5rem;
7383
width: 13rem;
7484
border: 1px solid rgba(0, 0, 0, 0.15);
7585
border-radius: 4px;
@@ -122,8 +132,20 @@ const NavBar = (props: NavProps) => {
122132
router.push(router.asPath, undefined, { locale: lang })
123133
}
124134

135+
useEffect(() => {
136+
setOpenedSubMenu('')
137+
}, [router.pathname])
138+
125139
return (
126140
<Container isTransparent={isHome}>
141+
<HomeLink href="/">
142+
<Image
143+
src={PyconLogoWhite}
144+
alt="Pycon Korea 2022"
145+
width={140}
146+
height={40}
147+
/>
148+
</HomeLink>
127149
<List>
128150
{routes.map((route, index) => {
129151
return route.subMenu ? (
@@ -143,18 +165,18 @@ const NavBar = (props: NavProps) => {
143165
<SubMenuList>
144166
{route.subMenu.map((subMenu, index) => (
145167
<SubMenuListItem key={index}>
146-
<Link href={getPath(subMenu.path)}>
168+
<BlockLink href={getPath(subMenu.path)}>
147169
{t(`pageTitle:${subMenu.name}`)}
148-
</Link>
170+
</BlockLink>
149171
</SubMenuListItem>
150172
))}
151173
</SubMenuList>
152174
</ListItem>
153175
) : (
154176
<ListItem key={index} active={isActive(route)}>
155-
<Link href={getPath(route.path)}>
177+
<BlockLink href={getPath(route.path)}>
156178
{t(`pageTitle:${route.name}`)}
157-
</Link>
179+
</BlockLink>
158180
</ListItem>
159181
)
160182
})}

‎frontend/components/core/NavBarMobile.tsx‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import React, { useState, useEffect } from 'react'
1+
import React, { useEffect, useState } from 'react'
22
import { routes, RouteType } from '../../routes/routes'
33
import styled from 'styled-components'
44
import { useTranslation } from 'react-i18next'
55
import { useRouter } from 'next/router'
66
import { media } from '../../assets/styles/mixin'
77
import {
8-
Link,
98
SubMenuList,
109
SubMenuListItem,
1110
SubMenuToggleCheckbox,
@@ -14,6 +13,9 @@ import {
1413
SubMenuToggleSpan
1514
} from './NavBar'
1615
import SnsLink from './SnsLink'
16+
import PyconLogoWhite from '../../public/images/pyconkr_2022_logo_white.png'
17+
import Image from 'next/image'
18+
import Link from 'next/link'
1719

1820
const Container = styled.div`
1921
display: none;
@@ -29,9 +31,18 @@ const Container = styled.div`
2931
if (props.isTransparent) {
3032
return `background: transparent;`
3133
}
32-
return `background-image: ${props.theme.gradient};`
34+
return `background: ${props.theme.black_10};`
3335
}}
3436
`
37+
export const BlockLink = styled(Link)`
38+
display: block;
39+
cursor: pointer;
40+
`
41+
42+
const HomeLink = styled.a`
43+
display: block;
44+
padding: 1.3rem;
45+
`
3546

3647
const ToggleMenu = styled.input`
3748
display: none;
@@ -181,8 +192,20 @@ const NavBarMobile = (props: NavProps) => {
181192
router.push(router.asPath, undefined, { locale: lang })
182193
}
183194

195+
useEffect(() => {
196+
setIsMenuOpen(false)
197+
}, [router.pathname])
198+
184199
return (
185200
<Container isTransparent={isHome}>
201+
<HomeLink href="/">
202+
<Image
203+
src={PyconLogoWhite}
204+
alt="Pycon Korea 2022"
205+
width={140}
206+
height={40}
207+
/>
208+
</HomeLink>
186209
<ToggleMenu
187210
type="checkbox"
188211
id="menu-btn"
@@ -217,22 +240,22 @@ const NavBarMobile = (props: NavProps) => {
217240
<MobileSubMenuList>
218241
{route.subMenu.map((subMenu, index) => (
219242
<MobileSubMenuListItem key={index}>
220-
<Link
243+
<BlockLink
221244
href={getPath(subMenu.path)}
222245
>
223246
{t(
224247
`pageTitle:${subMenu.name}`
225248
)}
226-
</Link>
249+
</BlockLink>
227250
</MobileSubMenuListItem>
228251
))}
229252
</MobileSubMenuList>
230253
</ListItem>
231254
) : (
232255
<ListItem key={index} active={isActive(route)}>
233-
<Link href={getPath(route.path)}>
256+
<BlockLink href={getPath(route.path)}>
234257
{t(`pageTitle:${route.name}`)}
235-
</Link>
258+
</BlockLink>
236259
</ListItem>
237260
)
238261
})}

‎frontend/components/core/PageTitle.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,12 @@ interface PageTitleProps {
1212
}
1313

1414
const PageTitle = (props: PageTitleProps) => {
15-
const { t } = useTranslation()
15+
const { t, i18n } = useTranslation()
16+
const title = i18n.exists(`pageTitle:${props.title}`)
17+
? t(`pageTitle:${props.title}`)
18+
: props.title
1619

17-
return <Title>{t(`pageTitle:${props.title}`)}</Title>
20+
return <Title>{title}</Title>
1821
}
1922

2023
export default PageTitle

‎frontend/components/layout/Layout.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,47 @@ import NavBar from '../core/NavBar'
33
import NavBarMobile from '../core/NavBarMobile'
44
import styled from 'styled-components'
55
import { media } from '../../assets/styles/mixin'
6-
import { NextSeo } from 'next-seo'
7-
import { useTranslation } from 'react-i18next'
6+
import LayoutSponsorList from './LayoutSponsorList'
87

98
interface LayoutProps {
109
locale: string
1110
pageName: string
11+
hideSponsor: boolean
1212
children: ReactNode
1313
}
1414

1515
const Container = styled.div`
16-
width: 1080px;
16+
width: 768px;
1717
margin: 0 auto;
1818
${media.mobile(`
1919
width: 100%;
2020
`)}
2121
`
2222
const Body = styled.div`
23-
margin: 3.5rem 0 6rem;
23+
padding: 6rem 0;
2424
${media.mobile(`
25-
margin: 6rem 0;
26-
padding: 0 1.25rem;
25+
margin: 0;
26+
padding: 6rem 1.25rem 5rem;
2727
`)}
2828
`
2929

30+
export const Background = styled.div`
31+
background-color: ${(props) => props.theme.colors.black_10};
32+
`
33+
3034
const Layout = (props: LayoutProps) => {
3135
// TODO: locale을 context로 관리
3236
return (
33-
<>
37+
<Background>
3438
<NavBarMobile locale={props.locale} />
3539
<NavBar locale={props.locale} />
3640
<Container>
37-
<Body>{props.children}</Body>
41+
<Body>
42+
{props.children}
43+
{props.hideSponsor ?? <LayoutSponsorList />}
44+
</Body>
3845
</Container>
39-
</>
46+
</Background>
4047
)
4148
}
4249

0 commit comments

Comments
 (0)