Merge branch 'main' of https://github.com/pythonkr/pyconkr-web-2022 into devdev

constmoon · constmoon · commit a6bfaeebe791 · 2022-06-13T04:12:34.000+09:00
diff --git a/frontend/assets/styles/markdown.ts b/frontend/assets/styles/markdown.ts
@@ -18,16 +18,20 @@ const MarkdownStyle = styled.div`
     h2 ~ h2 {
         margin: 3rem 0 1.2rem;
     }
+    ol,
+    ul {
+        margin-left: 2rem;
+    }
     ul,
     li {
-        margin: 0.3rem 0.6rem;
         padding: 0;
+        line-height: 1.6;
     }
     ol li {
-        list-style: numeric;
+        list-style: decimal !important;
     }
     ul li {
-        list-style: circle;
+        list-style: disc !important;
     }
     hr {
         margin: 1rem 0;
@@ -63,6 +67,9 @@ const MarkdownStyle = styled.div`
     td {
         padding: 0.6rem;
     }
+    p {
+        margin-top: 1rem;
+    }
 `
 
 export default MarkdownStyle
diff --git a/frontend/assets/styles/theme.ts b/frontend/assets/styles/theme.ts
@@ -3,6 +3,7 @@ const Theme = {
         primary0: '#1F1A24',
         primary1: '#62599C',
         primary2: '#0070f3',
+        violet0: '#4c0097', // TODO: temporary color
         black: '#000000',
         white: '#ffffff',
         grey_f9: '#f9f9f9',
diff --git a/frontend/components/core/MarkdownLinks.tsx b/frontend/components/core/MarkdownLinks.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const LinkRenderer = (props) => {
+    return (
+        <a href={props.href} target="_blank" rel="noreferrer">
+            {props.children}
+        </a>
+    )
+}
+
+export default LinkRenderer
diff --git a/frontend/components/core/NavBar.tsx b/frontend/components/core/NavBar.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/router'
 import { media } from '../../assets/styles/mixin'
+import SnsLink from './SnsLink'
 
 const Container = styled.nav`
     ${media.mobile(`
@@ -174,6 +175,7 @@ const NavBar = (props: NavProps) => {
                         </LanguageChangeButton>
                     </ListItem>
                 )}
+                <SnsLink />
             </List>
         </Container>
     )
diff --git a/frontend/components/core/NavBarMobile.tsx b/frontend/components/core/NavBarMobile.tsx
@@ -13,6 +13,7 @@ import {
     SubMenuToggleLabel,
     SubMenuToggleSpan
 } from './NavBar'
+import SnsLink from './SnsLink'
 
 const Container = styled.div`
     display: none;
@@ -252,6 +253,7 @@ const NavBarMobile = (props: NavProps) => {
                                 </LanguageChangeButton>
                             </ListItem>
                         )}
+                        <SnsLink />
                     </List>
                 </Navigation>
             )}
diff --git a/frontend/components/core/NavLink.tsx b/frontend/components/core/NavLink.tsx
diff --git a/frontend/components/core/SnsLink.tsx b/frontend/components/core/SnsLink.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import Icon from '@mdi/react'
+import { mdiFacebook, mdiTwitter } from '@mdi/js'
+import styled from 'styled-components'
+import Resource from '../../data/constants/resources'
+import { media } from '../../assets/styles/mixin'
+
+const List = styled.ul`
+    display: flex;
+`
+const ListItem = styled.li`
+    padding: 0.4rem;
+    color: ${(props) => props.theme.colors.white};
+    ${media.mobile(`
+        padding: 1.3rem 0;
+    `)}
+    & + & {
+        ${media.mobile(`
+            padding-left: 1rem;
+        `)}
+    }
+`
+
+export const Link = styled.a`
+    display: flex;
+    cursor: pointer;
+`
+
+const SnsLink = () => {
+    return (
+        <List>
+            <ListItem>
+                <Link
+                    target="_blank"
+                    aria-label="Facebook Link"
+                    href={Resource.pyconkrFacebook}
+                >
+                    <Icon path={mdiFacebook} size={1} />
+                </Link>
+            </ListItem>
+            <ListItem>
+                <Link
+                    target="_blank"
+                    aria-label="Twitter Link"
+                    href={Resource.pyconkrTwitter}
+                >
+                    <Icon path={mdiTwitter} size={1} />
+                </Link>
+            </ListItem>
+        </List>
+    )
+}
+
+export default SnsLink
diff --git a/frontend/components/layout/Layout.tsx b/frontend/components/layout/Layout.tsx
@@ -28,26 +28,9 @@ const Body = styled.div`
 `
 
 const Layout = (props: LayoutProps) => {
-    const { t } = useTranslation()
-
-    const title =
-        props.pageName !== ''
-            ? `${t(`pageTitle:${props.pageName}`)} : ${t(`label:siteTitle`)}`
-            : `${t(`label:siteTitle`)}`
-
     // TODO: locale을 context로 관리
     return (
         <>
-            <NextSeo
-                title={title}
-                description=""
-                openGraph={{
-                    type: 'website',
-                    url: 'https://pycon.kr',
-                    title: title,
-                    site_name: title
-                }}
-            />
             <NavBarMobile locale={props.locale} />
             <NavBar locale={props.locale} />
             <Container>
diff --git a/frontend/components/service/Home/Main.tsx b/frontend/components/service/Home/Main.tsx
@@ -58,7 +58,7 @@ const MainBackground = () => {
         <>
             <Container>
                 <Title>{t(`label:pyconkrTitle`)}</Title>
-                <BodyText>{t(`label:comingSoon`)}</BodyText>
+                <BodyText>{t(`label:pyconkrDate`)}</BodyText>
             </Container>
             <Background />
         </>
diff --git a/frontend/data/constants/resources.ts b/frontend/data/constants/resources.ts
@@ -18,7 +18,9 @@ const Resources = {
 
         PYCONKR_2014_IMG:
             'https://live.staticflickr.com/3912/14958407280_c7e9e6717e_z.jpg'
-    }
+    },
+    pyconkrFacebook: 'https://www.facebook.com/pyconkorea',
+    pyconkrTwitter: 'https://twitter.com/PyConKR'
 }
 
 export default Resources
diff --git a/frontend/data/enums/PageName.ts b/frontend/data/enums/PageName.ts
@@ -4,6 +4,8 @@ export enum PageName {
     Pyconkr2022 = 'Pyconkr2022',
     PreviousPyconkr = 'PreviousPyconkr',
     Contribute = 'Contribute',
+    Cfp = 'Cfp',
+    CfpGuide = 'CfpGuide',
     Sponsor = 'Sponsor',
     SponsorProspectus = 'SponsorProspectus',
     SponsorJoin = 'SponsorJoin',
diff --git a/frontend/locales/en/label.ts b/frontend/locales/en/label.ts
@@ -2,7 +2,7 @@ export default {
     siteTitle: 'PyCon Korea 2022',
     preparing: 'Under Construction',
     pyconkrTitle: 'PYCON KOREA 2022',
-    comingSoon: 'Coming Soon',
+    pyconkrDate: 'October 1-2, 2022',
     about: {
         main: {
             title: 'About PyCon Korea',
diff --git a/frontend/locales/en/pageTitle.ts b/frontend/locales/en/pageTitle.ts
@@ -6,6 +6,8 @@ export default {
     [PageName.Pyconkr2022]: 'Pycon Korea 2022',
     [PageName.PreviousPyconkr]: 'Previous PyCon Korea',
     [PageName.Contribute]: 'Contribution',
+    [PageName.Cfp]: 'Call for Proposal',
+    [PageName.CfpGuide]: 'How to Submit a Proposal',
     [PageName.Sponsor]: 'Sponsor',
     [PageName.SponsorProspectus]: 'Prospectus',
     [PageName.SponsorJoin]: 'Join as Sponsor',
diff --git a/frontend/locales/ko/label.ts b/frontend/locales/ko/label.ts
@@ -2,7 +2,7 @@ export default {
     siteTitle: '파이콘 한국 2022',
     preparing: '준비 중입니다.',
     pyconkrTitle: 'PYCON KOREA 2022',
-    comingSoon: 'Coming Soon',
+    pyconkrDate: '2022년 10월 1일 ~ 10월 2일',
     about: {
         main: {
             title: '파이콘 한국이란',
diff --git a/frontend/locales/ko/pageTitle.ts b/frontend/locales/ko/pageTitle.ts
@@ -6,6 +6,8 @@ export default {
     [PageName.Pyconkr2022]: '파이콘 한국 2022',
     [PageName.PreviousPyconkr]: '지난 파이콘 한국',
     [PageName.Contribute]: '기여하기',
+    [PageName.Cfp]: '발표 제안하기',
+    [PageName.CfpGuide]: '발표안 작성 가이드',
     [PageName.Sponsor]: '후원하기',
     [PageName.SponsorProspectus]: '후원사 안내',
     [PageName.SponsorJoin]: '후원사로 참여하기',
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,6 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@mdi/font": "^6.7.96",
+    "@mdi/js": "^6.7.96",
+    "@mdi/react": "^1.6.0",
     "@sls-next/serverless-component": "^3.7.0",
     "axios": "^0.27.2",
     "babel-plugin-styled-components": "^2.0.6",
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -7,6 +7,7 @@ import { I18nextProvider, useTranslation } from 'react-i18next'
 import { ThemeProvider } from 'styled-components'
 import '../assets/styles/global.css'
 import Theme from '../assets/styles/theme'
+import { NextSeo } from 'next-seo'
 
 const App = ({
     Component,
@@ -17,11 +18,32 @@ const App = ({
     const { t } = useTranslation()
 
     const pageName = pageProps?.title ?? ''
+    const pageTitle =
+        pageName !== ''
+            ? `${t(`pageTitle:${pageName}`)} : ${t(`label:siteTitle`)}`
+            : `${t(`label:siteTitle`)}`
+    const description = `${t(`label:pyconkrTitle`)}: ${t(`label:pyconkrDate`)}`
 
     return (
         <>
             <I18nextProvider i18n={i18n}>
                 <ThemeProvider theme={Theme}>
+                    <NextSeo
+                        title={pageTitle}
+                        description={description}
+                        openGraph={{
+                            type: 'website',
+                            url: 'https://pycon.kr',
+                            title: pageTitle,
+                            site_name: pageTitle,
+                            description: description,
+                            images: [
+                                {
+                                    url: `https://2022.pycon.kr/images/og-temp.jpg`
+                                }
+                            ]
+                        }}
+                    />
                     <Layout locale={locale} pageName={pageName}>
                         <Component pageName={pageName} {...pageProps} />
                     </Layout>
diff --git a/frontend/pages/api/contribute.ts b/frontend/pages/api/contribute.ts
@@ -0,0 +1,31 @@
+import axios from 'axios'
+import { IContents } from '../../interfaces/IContents'
+import { IApiContents } from '../../interfaces/api/IApiContents'
+
+export const getCfp = async (): Promise<IContents> => {
+    const response = await axios.get(
+        `https://api.2022.pycon.kr/api/content/cfp`
+    )
+    const data: IApiContents = response.data
+
+    return {
+        content: {
+            ko: data.content,
+            en: data.eng_content
+        }
+    }
+}
+
+export const getCfpGuide = async (): Promise<IContents> => {
+    const response = await axios.get(
+        `https://api.2022.pycon.kr/api/content/cfp-guide`
+    )
+    const data: IApiContents = response.data
+
+    return {
+        content: {
+            ko: data.content,
+            en: data.eng_content
+        }
+    }
+}
diff --git a/frontend/pages/contribute/cfp/guide.tsx b/frontend/pages/contribute/cfp/guide.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import type { NextPage, GetServerSideProps } from 'next'
+import { PageName } from '../../../data/enums/PageName'
+import { SponsorPage } from '../../../interfaces/PageProps'
+import { GetServerSidePropsContext } from 'next'
+import { getCfpGuide } from '../../api/contribute'
+import ReactMarkdown from 'react-markdown'
+import HeadingComponents from '../../../components/core/MarkdownHeadings'
+import MarkdownStyle from '../../../assets/styles/markdown'
+import PageTitle from '../../../components/core/PageTitle'
+import remarkGfm from 'remark-gfm'
+import styled from 'styled-components'
+
+interface SponsorSponsorFaqPage extends SponsorPage {
+    locale: string
+}
+
+const CfpGuideStyle = styled.div`
+    ol {
+        margin-top: 1.4rem;
+    }
+    a {
+        display: block;
+    }
+`
+
+const SponsorFaq: NextPage = (props: SponsorSponsorFaqPage) => {
+    return (
+        <div>
+            <PageTitle title={props.pageName} />
+            <MarkdownStyle>
+                <CfpGuideStyle>
+                    <ReactMarkdown
+                        components={HeadingComponents}
+                        remarkPlugins={[remarkGfm]}
+                    >
+                        {props.content[props.locale]}
+                    </ReactMarkdown>
+                </CfpGuideStyle>
+            </MarkdownStyle>
+        </div>
+    )
+}
+
+export const getServerSideProps: GetServerSideProps = async (
+    context: GetServerSidePropsContext
+) => {
+    const { locale } = context
+    const content = await getCfpGuide()
+
+    return {
+        props: {
+            title: PageName.CfpGuide,
+            locale,
+            ...content
+        }
+    }
+}
+
+export default SponsorFaq
diff --git a/frontend/pages/contribute/cfp/index.tsx b/frontend/pages/contribute/cfp/index.tsx
diff --git a/frontend/pages/sponsor/join.tsx b/frontend/pages/sponsor/join.tsx
diff --git a/frontend/public/images/og-temp.jpg b/frontend/public/images/og-temp.jpg
diff --git a/frontend/routes/routes.ts b/frontend/routes/routes.ts
diff --git a/frontend/yarn.lock b/frontend/yarn.lock

Original file line number	Diff line number	Diff line change
@@ -18,16 +18,20 @@ const MarkdownStyle = styled.div`
`18`	`18`	`h2 ~ h2 {`
`19`	`19`	`margin: 3rem 0 1.2rem;`
`20`	`20`	`}`
	`21`	`+ ol,`
	`22`	`+ ul {`
	`23`	`+ margin-left: 2rem;`
	`24`	`+ }`
`21`	`25`	`ul,`
`22`	`26`	`li {`
`23`		`- margin: 0.3rem 0.6rem;`
`24`	`27`	`padding: 0;`
	`28`	`+ line-height: 1.6;`
`25`	`29`	`}`
`26`	`30`	`ol li {`
`27`		`- list-style: numeric;`
	`31`	`+ list-style: decimal !important;`
`28`	`32`	`}`
`29`	`33`	`ul li {`
`30`		`- list-style: circle;`
	`34`	`+ list-style: disc !important;`
`31`	`35`	`}`
`32`	`36`	`hr {`
`33`	`37`	`margin: 1rem 0;`
@@ -63,6 +67,9 @@ const MarkdownStyle = styled.div`
`63`	`67`	`td {`
`64`	`68`	`padding: 0.6rem;`
`65`	`69`	`}`
	`70`	`+ p {`
	`71`	`+ margin-top: 1rem;`
	`72`	`+ }`
`66`	`73`	`
`67`	`74`
`68`	`75`	`export default MarkdownStyle`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,9 @@ const Resources = {`
`18`	`18`
`19`	`19`	`PYCONKR_2014_IMG:`
`20`	`20`	`'https://live.staticflickr.com/3912/14958407280_c7e9e6717e_z.jpg'`
`21`		`- }`
	`21`	`+ },`
	`22`	`+ pyconkrFacebook: 'https://www.facebook.com/pyconkorea',`
	`23`	`+ pyconkrTwitter: 'https://twitter.com/PyConKR'`
`22`	`24`	`}`
`23`	`25`
`24`	`26`	`export default Resources`