Skip to content

Commit 718a39d

Browse files
constmoonconstmoon
committed
후원사 목록 페이지 생성
1 parent e351285 commit 718a39d

File tree

25 files changed

+285
-30
lines changed

25 files changed

+285
-30
lines changed

‎frontend/assets/styles/typo.ts‎

Lines changed: 5 additions & 0 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;
@@ -21,6 +22,10 @@ const Heading2 = styled.h2`
2122
const Heading3 = styled.h3`
2223
font-size: 1.6rem;
2324
line-height: 1.3;
25+
margin: 1.4rem 0;
26+
${media.mobile(`
27+
margin: 1rem 0;
28+
`)}
2429
${(props) => {
2530
if (props.useGradient) {
2631
return `background: ${props.theme.gradient_violet};

‎frontend/components/layout/Layout.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ 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 LayoutSponsorList from './LayoutSponsorList'
67

78
interface LayoutProps {
89
locale: string
910
pageName: string
11+
hideSponsor: boolean
1012
children: ReactNode
1113
}
1214

@@ -36,7 +38,10 @@ const Layout = (props: LayoutProps) => {
3638
<NavBarMobile locale={props.locale} />
3739
<NavBar locale={props.locale} />
3840
<Container>
39-
<Body>{props.children}</Body>
41+
<Body>
42+
{props.children}
43+
{props.hideSponsor ?? <LayoutSponsorList />}
44+
</Body>
4045
</Container>
4146
</Background>
4247
)

‎frontend/components/layout/LayoutSponsorList.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
import { Heading3 } from '../../assets/styles/typo'
3+
import styled from 'styled-components'
4+
5+
const Container = styled.div`
6+
margin-top: 8rem;
7+
`
8+
9+
const LayoutSponsorList = () => {
10+
return (
11+
<Container>
12+
<Heading3 useGradient={true}>후원사 목록</Heading3>
13+
</Container>
14+
)
15+
}
16+
17+
export default LayoutSponsorList

‎frontend/components/service/Program/CategoryList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const CategoryBlock = styled.ul`
1111
`
1212

1313
const CategoryList = (props: { list: ITalkList }) => {
14-
const categoryList: ICategoryListItem[] = []
14+
const categoryList: { [key: string]: ICategoryListItem } = {}
1515

1616
props.list.list.forEach((talk) => {
1717
if (!categoryList.hasOwnProperty(talk.category)) {

‎frontend/components/service/Sponsor/SponsorList.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { Link } from '../../core/SnsLink'
2+
import React from 'react'
3+
import styled from 'styled-components'
4+
import { ISponsorLevelItem, ISponsorList } from '../../../interfaces/ISponsor'
5+
import categoryList from '../Program/CategoryList'
6+
import Sponsor from '../../../pages/sponsor/list'
7+
import { useTranslation } from 'react-i18next'
8+
import { Heading3 } from '../../../assets/styles/typo'
9+
import sponsorLevel from '../../../locales/ko/sponsorLevel'
10+
import { DEFAULT_PROFILE_PATH } from '../../../data/constants/config'
11+
12+
const SponsorLevel = styled.div`
13+
margin-bottom: 6rem;
14+
`
15+
const SponsorGroup = styled.ul`
16+
display: flex;
17+
align-items: center;
18+
margin: 0;
19+
padding: 0;
20+
margin-top: 3rem;
21+
@media (max-width: 768px) {
22+
flex-direction: column;
23+
}
24+
`
25+
26+
const SponsorItem = styled.li`
27+
min-height: 100px;
28+
max-width: 200px;
29+
margin: 0;
30+
padding: 0;
31+
list-style: none;
32+
display: flex;
33+
align-items: center;
34+
& + & {
35+
margin-left: 1.6rem;
36+
@media (max-width: 768px) {
37+
margin-left: 0;
38+
margin-top: 2rem;
39+
}
40+
}
41+
`
42+
43+
const SponsorImage = styled.img`
44+
width: 100%;
45+
display: inline-block;
46+
vertical-align: top;
47+
`
48+
49+
const SponsorList = (props: { list: ISponsorList }) => {
50+
const { t } = useTranslation()
51+
const sponsorList: { [key: string]: ISponsorLevelItem } = {}
52+
53+
props.list.list.forEach((sponsor) => {
54+
const key = `LEVEL_${sponsor.level}`
55+
if (!sponsorList.hasOwnProperty(key)) {
56+
sponsorList[key] = {
57+
value: sponsor.level,
58+
name: t(`sponsorLevel:${key}`),
59+
list: []
60+
}
61+
}
62+
sponsorList[key].list.push(sponsor)
63+
})
64+
65+
return (
66+
<>
67+
{Object.keys(sponsorList)
68+
.sort()
69+
.map((key) => {
70+
const item = sponsorList[key]
71+
return (
72+
<SponsorLevel key={key}>
73+
<Heading3 useGradient={true}>{item.name}</Heading3>
74+
<SponsorGroup>
75+
{item.list.map((sponsor) => (
76+
<SponsorItem key={sponsor.slug}>
77+
<Link
78+
href={`/sponsor/list/${sponsor.slug}`}
79+
>
80+
<a>
81+
<SponsorImage
82+
src={
83+
sponsor.logo_image ??
84+
DEFAULT_PROFILE_PATH
85+
}
86+
alt={sponsor.name}
87+
/>
88+
</a>
89+
</Link>
90+
</SponsorItem>
91+
))}
92+
</SponsorGroup>
93+
</SponsorLevel>
94+
)
95+
})}
96+
</>
97+
)
98+
}
99+
100+
export default SponsorList

‎frontend/data/enums/PageName.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export enum PageName {
1111
Cfp = 'Cfp',
1212
CfpGuide = 'CfpGuide',
1313
Sponsor = 'Sponsor',
14+
SponsorList = 'SponsorList',
1415
SponsorProspectus = 'SponsorProspectus',
1516
SponsorJoin = 'SponsorJoin',
1617
SponsorBenefit = 'SponsorBenefit',

‎frontend/data/enums/SponsorLevel.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export enum SponsorLevel {
2+
LEVEL_1 = 'LEVEL_1',
3+
LEVEL_2 = 'LEVEL_2',
4+
LEVEL_3 = 'LEVEL_3',
5+
LEVEL_4 = 'LEVEL_4',
6+
LEVEL_5 = 'LEVEL_5'
7+
}

‎frontend/interfaces/ISponsor.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { IApiSponsorListItem } from './api/IApiSponsor'
2+
3+
export interface ISponsorListItem extends IApiSponsorListItem {}
4+
5+
export interface ISponsorList {
6+
list: ISponsorListItem[]
7+
}
8+
9+
export interface ISponsorLevelItem {
10+
value: number
11+
name: string
12+
list: ISponsorListItem[]
13+
}

‎frontend/interfaces/api/IApiSponsor.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export interface IApiSponsorListItem {
2+
slug: string
3+
name: string
4+
level: number
5+
desc: string
6+
eng_desc: string | null
7+
url: string | null
8+
logo_image: string | null
9+
id: number
10+
}

‎frontend/locales/en/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import error from './error'
22
import pageTitle from './pageTitle'
33
import label from './label'
44
import contentDescription from './contentDescription'
5+
import sponsorLevel from './sponsorLevel'
56

67
export default {
78
error,
89
pageTitle,
910
label,
10-
contentDescription
11+
contentDescription,
12+
sponsorLevel
1113
}

0 commit comments

Comments
 (0)