매 페이지마다 후원사 목록 불러오도록 변경

constmoon · constmoon · commit 312cdf0426c6 · 2022-09-25T18:56:20.000+09:00
diff --git a/frontend/assets/styles/typo.ts b/frontend/assets/styles/typo.ts
@@ -10,6 +10,7 @@ const Heading1 = styled.h1`
 const Heading2 = styled.h2`
     font-size: 1.9rem;
     line-height: 1.3;
+    margin: 1.4rem 0 2rem;
     ${(props) => {
         if (props.useGradient) {
             return `background: ${props.theme.gradient_violet};
diff --git a/frontend/components/layout/Layout.tsx b/frontend/components/layout/Layout.tsx
@@ -4,6 +4,7 @@ import NavBarMobile from '../core/NavBarMobile'
 import styled from 'styled-components'
 import { media } from '../../assets/styles/mixin'
 import LayoutSponsorList from './LayoutSponsorList'
+import { ISponsorList } from '../../interfaces/ISponsor'
 
 interface LayoutProps {
     locale: string
@@ -31,7 +32,7 @@ export const Background = styled.div`
     background-color: ${(props) => props.theme.colors.black_10};
 `
 
-const Layout = (props: LayoutProps) => {
+const Layout = (props: LayoutProps & { sponsorList?: ISponsorList }) => {
     // TODO: locale을 context로 관리
     return (
         <Background>
@@ -40,7 +41,9 @@ const Layout = (props: LayoutProps) => {
             <Container>
                 <Body>
                     {props.children}
-                    {props.hideSponsor ?? <LayoutSponsorList />}
+                    {!props.hideSponsor && (
+                        <LayoutSponsorList list={props.sponsorList} />
+                    )}
                 </Body>
             </Container>
         </Background>
diff --git a/frontend/components/layout/LayoutSponsorList.tsx b/frontend/components/layout/LayoutSponsorList.tsx
@@ -1,15 +1,21 @@
 import React from 'react'
-import { Heading3 } from '../../assets/styles/typo'
+import { Heading2 } from '../../assets/styles/typo'
 import styled from 'styled-components'
+import { useTranslation } from 'react-i18next'
+import SponsorList from '../service/Sponsor/SponsorList'
+import { ISponsorList } from '../../interfaces/ISponsor'
 
 const Container = styled.div`
     margin-top: 8rem;
 `
 
-const LayoutSponsorList = () => {
+const LayoutSponsorList = (props: { list: ISponsorList }) => {
+    const { t } = useTranslation()
+
     return (
         <Container>
-            <Heading3 useGradient={true}>후원사 목록</Heading3>
+            <Heading2 useGradient={true}>{t('label:sponsorList')}</Heading2>
+            <SponsorList list={props.list} useGradientTitle={false} />
         </Container>
     )
 }
diff --git a/frontend/components/service/Sponsor/SponsorList.tsx b/frontend/components/service/Sponsor/SponsorList.tsx
@@ -16,9 +16,6 @@ const SponsorGroup = styled.ul`
     flex-wrap: wrap;
     flex: auto;
     gap: 2rem;
-    ${media.mobile(`
-        flex-direction: column;
-    `)}
 `
 
 const SponsorItem = styled.li`
@@ -29,6 +26,10 @@ const SponsorItem = styled.li`
     list-style: none;
     display: inline-flex;
     align-items: center;
+    ${media.mobile(`
+        width: 140px;
+        height: 140px;
+    `)}
 `
 
 const SponsorLink = styled.a`
@@ -42,11 +43,15 @@ const SponsorImage = styled.img`
     vertical-align: top;
 `
 
-const SponsorList = (props: { list: ISponsorList }) => {
+const SponsorList = (props: {
+    list: ISponsorList
+    useGradientTitle: boolean
+}) => {
     const { t } = useTranslation()
     const theme = useTheme()
     const sponsorList: { [key: string]: ISponsorLevelItem } = {}
     const blackBackgroundId = [3]
+    const useGradient = props.useGradientTitle ?? true
 
     props.list.list.forEach((sponsor) => {
         const key = `LEVEL_${sponsor.level}`
@@ -75,7 +80,9 @@ const SponsorList = (props: { list: ISponsorList }) => {
                     const item = sponsorList[key]
                     return (
                         <SponsorLevel key={key}>
-                            <Heading3 useGradient={true}>{item.name}</Heading3>
+                            <Heading3 useGradient={useGradient}>
+                                {item.name}
+                            </Heading3>
                             <SponsorGroup>
                                 {item.list.map((sponsor) => (
                                     <SponsorItem
diff --git a/frontend/locales/ko/label.ts b/frontend/locales/ko/label.ts
@@ -54,5 +54,5 @@ export default {
     eventDetail: '행사 상세',
     aboutEvent:
         '파이콘 한국은 한국의 파이썬 개발자들이 지식을 공유하고 만남을 갖기 위한 장입니다.\n파이콘 한국 2022은 온라인과 오프라인 동시에 진행됩니다.',
-    officialFacebook: '공식 페이스북(https://www.facebook.com)'
+    sponsorList: '후원사 목록'
 }
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -8,21 +8,24 @@ import '../assets/styles/global.css'
 import Theme from '../assets/styles/theme'
 import { NextSeo } from 'next-seo'
 import Head from 'next/head'
+import { getSponsorList } from './api/sponsor'
+import { ISponsorList } from '../interfaces/ISponsor'
 
 const App = ({
     Component,
     pageProps,
     locale,
-    router
-}: AppProps & { locale: string }) => {
+    router,
+    sponsorList
+}: AppProps & { locale: string; sponsorList: ISponsorList }) => {
     const i18n = React.useMemo(() => createI18n({ locale }), [locale])
     const { t } = useTranslation()
     const { pathname } = router
 
     const pageName = pageProps?.title ?? ''
     const description = `${t(`label:pyconkrTitle`)}: ${t(`label:pyconkrDate`)}`
 
-    const hideSponsor = pathname === '/sponsor'
+    const hideSponsor = pathname.includes('/sponsor')
 
     const getPageTitle = (): string => {
         if (i18n.exists(`pageTitle:${pageName}`)) {
@@ -61,6 +64,7 @@ const App = ({
                         locale={locale}
                         pageName={pageName}
                         hideSponsor={hideSponsor}
+                        sponsorList={sponsorList}
                     >
                         <Component pageName={pageName} {...pageProps} />
                     </Layout>
@@ -72,7 +76,12 @@ const App = ({
 
 App.getInitialProps = async ({ ctx }: AppContext) => {
     const { locale } = ctx
-    return { locale }
+    const data = await getSponsorList()
+
+    return {
+        locale,
+        sponsorList: data
+    }
 }
 
 export default App

Original file line number	Diff line number	Diff line change
`@@ -54,5 +54,5 @@ export default {`
`54`	`54`	`eventDetail: '행사 상세',`
`55`	`55`	`aboutEvent:`
`56`	`56`	`'파이콘 한국은 한국의 파이썬 개발자들이 지식을 공유하고 만남을 갖기 위한 장입니다.\n파이콘 한국 2022은 온라인과 오프라인 동시에 진행됩니다.',`
`57`		`- officialFacebook: '공식 페이스북(https://www.facebook.com)'`
	`57`	`+ sponsorList: '후원사 목록'`
`58`	`58`	`}`