Merge branch 'devdev'

constmoon · constmoon · commit dad060163eba · 2022-05-09T00:33:12.000+09:00
diff --git a/frontend/assets/styles/markdown.ts b/frontend/assets/styles/markdown.ts
@@ -1,14 +1,22 @@
 import styled from 'styled-components'
+import { media } from './mixin'
+import theme from './theme'
 
 const MarkdownStyle = styled.div`
-    h1 {
-        margin: 1.2rem 0 0.9rem;
+    h1,
+    h2,
+    h3,
+    h4 {
+        margin: 1.2rem 0 1rem;
     }
     h1 ~ h1 {
         margin: 4rem 0 1.2rem;
     }
-    h2 {
-        margin: 1.2rem 0 1rem;
+    h2:first-of-type {
+        margin-top: 2rem;
+    }
+    h2 ~ h2 {
+        margin: 3rem 0 1.2rem;
     }
     ul,
     li {
@@ -22,6 +30,34 @@ const MarkdownStyle = styled.div`
     a {
         text-decoration: underline;
     }
+    table {
+        border-collapse: collapse;
+        color: ${theme.colors.grey_33};
+        text-align: center;
+        overflow: auto;
+        display: block;
+        margin: 1.2rem 0;
+        ${media.mobile(`
+            margin-right: -1rem;
+        `)}
+    }
+    th {
+        padding: 0.3rem;
+        font-weight: bold;
+    }
+    tr {
+        border-bottom: solid 1px ${theme.colors.grey_d9};
+        height: 3rem;
+    }
+    tbody > tr:nth-of-type(odd) {
+        background-color: ${theme.colors.grey_f9};
+    }
+    tr > td:first-of-type {
+        font-weight: bold;
+    }
+    td {
+        padding: 0.6rem;
+    }
 `
 
 export default MarkdownStyle
diff --git a/frontend/assets/styles/theme.ts b/frontend/assets/styles/theme.ts
@@ -4,11 +4,12 @@ const Theme = {
         primary1: '#62599C',
         primary2: '#0070f3',
         black: '#000000',
-        white: '#FFFFFF',
-        grey0: '#FAFAFA',
-        grey1: '#999999',
-        grey2: '#666666',
-        grey3: '#333333'
+        white: '#ffffff',
+        grey_f9: '#f9f9f9',
+        grey_d9: '#d9d9d9',
+        grey_99: '#999999',
+        grey_66: '#666666',
+        grey_33: '#333333'
     },
     gradient:
         'linear-gradient(115deg, rgb(12, 0, 96), rgb(98, 89, 156), rgb(255, 247, 53))'
diff --git a/frontend/components/core/NavBar.tsx b/frontend/components/core/NavBar.tsx
@@ -63,7 +63,7 @@ export const SubMenuList = styled.ul`
     display: flex;
     flex-direction: column;
     background: ${(props) => props.theme.colors.white};
-    color: ${(props) => props.theme.colors.grey2};
+    color: ${(props) => props.theme.colors.grey_66};
     padding: 1rem 0;
     position: absolute;
     left: 0;
diff --git a/frontend/data/enums/PageName.ts b/frontend/data/enums/PageName.ts
@@ -6,6 +6,7 @@ export enum PageName {
     Contribute = 'Contribute',
     Sponsor = 'Sponsor',
     SponsorProspectus = 'SponsorProspectus',
+    SponsorBenefit = 'SponsorBenefit',
     SponsorTerms = 'SponsorTerms',
     CoC = 'CoC'
 }
diff --git a/frontend/interfaces/IContents.ts b/frontend/interfaces/IContents.ts
@@ -1,4 +1,4 @@
-export interface ISponsorTerms {
+export interface IContents {
     content: {
         ko: string
         en: string
diff --git a/frontend/interfaces/api/IApiContents.ts b/frontend/interfaces/api/IApiContents.ts
@@ -1,4 +1,4 @@
-export interface IApiSponsorTerms {
+export interface IApiContents {
     slug: string
     title: string
     content: string
diff --git a/frontend/locales/en/pageTitle.ts b/frontend/locales/en/pageTitle.ts
@@ -8,6 +8,7 @@ export default {
     [PageName.Contribute]: 'Contribution',
     [PageName.Sponsor]: 'Sponsor',
     [PageName.SponsorProspectus]: 'Prospectus',
+    [PageName.SponsorBenefit]: 'Benefit',
     [PageName.SponsorTerms]: 'Terms of Sponsor',
     [PageName.CoC]: 'CoC'
 }
diff --git a/frontend/locales/ko/pageTitle.ts b/frontend/locales/ko/pageTitle.ts
@@ -8,6 +8,7 @@ export default {
     [PageName.Contribute]: '기여하기',
     [PageName.Sponsor]: '후원하기',
     [PageName.SponsorProspectus]: '후원사 안내',
+    [PageName.SponsorBenefit]: '후원사 혜택',
     [PageName.SponsorTerms]: '후원사 약관',
     [PageName.CoC]: '행동 강령'
 }
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,12 +15,14 @@
     "env-cmd": "^10.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^21.6.14",
+    "ms": "^2.1.3",
     "next": "12.1.0",
     "next-seo": "^5.4.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "^11.16.1",
     "react-markdown": "^8.0.3",
+    "remark-gfm": "^3.0.1",
     "serverless": "^2.72.3",
     "styled-components": "^5.3.3"
   },
diff --git a/frontend/pages/api/sponsor.ts b/frontend/pages/api/sponsor.ts
@@ -1,12 +1,40 @@
 import axios from 'axios'
-import { ISponsorTerms } from '../../interfaces/ISponsor'
-import { IApiSponsorTerms } from '../../interfaces/api/IApiSponsor'
+import { IContents } from '../../interfaces/IContents'
+import { IApiContents } from '../../interfaces/api/IApiContents'
 
-export const getSponsorTerms = async (): Promise<ISponsorTerms> => {
+export const getSponsorProspectus = async (): Promise<IContents> => {
+    const response = await axios.get(
+        `https://api.2022.pycon.kr/api/content/prospectus`
+    )
+    const data: IApiContents = response.data
+
+    return {
+        content: {
+            ko: data.content,
+            en: data.eng_content
+        }
+    }
+}
+
+export const getSponsorBenefit = async (): Promise<IContents> => {
+    const response = await axios.get(
+        `https://api.2022.pycon.kr/api/content/sporsor-benefit`
+    )
+    const data: IApiContents = response.data
+
+    return {
+        content: {
+            ko: data.content,
+            en: data.eng_content
+        }
+    }
+}
+
+export const getSponsorTerms = async (): Promise<IContents> => {
     const response = await axios.get(
         `https://api.2022.pycon.kr/api/content/terms-of-sponsor`
     )
-    const data: IApiSponsorTerms = response.data
+    const data: IApiContents = response.data
 
     return {
         content: {
diff --git a/frontend/pages/sponsor/benefit.tsx b/frontend/pages/sponsor/benefit.tsx
@@ -0,0 +1,42 @@
+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 { getSponsorBenefit, getSponsorTerms } from '../api/sponsor'
+import ReactMarkdown from 'react-markdown'
+import HeadingComponents from '../../components/core/MarkdownHeadings'
+import MarkdownStyle from '../../assets/styles/markdown'
+
+interface SponsorBenefitPage extends SponsorPage {
+    locale: string
+}
+
+const SponsorBenefit: NextPage = (props: SponsorBenefitPage) => {
+    return (
+        <div>
+            <MarkdownStyle>
+                <ReactMarkdown components={HeadingComponents}>
+                    {props.content[props.locale]}
+                </ReactMarkdown>
+            </MarkdownStyle>
+        </div>
+    )
+}
+
+export const getServerSideProps: GetServerSideProps = async (
+    context: GetServerSidePropsContext
+) => {
+    const { locale } = context
+    const content = await getSponsorBenefit()
+
+    return {
+        props: {
+            title: PageName.SponsorBenefit,
+            locale,
+            ...content
+        }
+    }
+}
+
+export default SponsorBenefit
diff --git a/frontend/pages/sponsor/prospectus.tsx b/frontend/pages/sponsor/prospectus.tsx
@@ -1,25 +1,45 @@
 import React from 'react'
-import { GetServerSideProps, NextPage } from 'next'
-import { PageProps } from '../../interfaces/PageProps'
-import { useTranslation } from 'react-i18next'
+import { GetServerSideProps, GetServerSidePropsContext, NextPage } from 'next'
+import { SponsorPage } from '../../interfaces/PageProps'
 import { PageName } from '../../data/enums/PageName'
 import PageTitle from '../../components/core/PageTitle'
+import { getSponsorProspectus } from '../api/sponsor'
+import MarkdownStyle from '../../assets/styles/markdown'
+import ReactMarkdown from 'react-markdown'
+import HeadingComponents from '../../components/core/MarkdownHeadings'
+import remarkGfm from 'remark-gfm'
 
-const SponsorProspectus: NextPage = (props: PageProps) => {
-    const { t } = useTranslation()
+interface SponsorProspectusPage extends SponsorPage {
+    locale: string
+}
 
+const SponsorProspectus: NextPage = (props: SponsorProspectusPage) => {
     return (
         <>
             <PageTitle title={props.pageName} />
-            <div>{t('label:preparing')}</div>
+            <MarkdownStyle>
+                <ReactMarkdown
+                    components={HeadingComponents}
+                    remarkPlugins={[remarkGfm]}
+                >
+                    {props.content[props.locale]}
+                </ReactMarkdown>
+            </MarkdownStyle>
         </>
     )
 }
 
-export const getServerSideProps: GetServerSideProps = async () => {
+export const getServerSideProps: GetServerSideProps = async (
+    context: GetServerSidePropsContext
+) => {
+    const { locale } = context
+    const content = await getSponsorProspectus()
+
     return {
         props: {
-            title: PageName.SponsorProspectus
+            title: PageName.SponsorProspectus,
+            locale,
+            ...content
         }
     }
 }
diff --git a/frontend/routes/routes.ts b/frontend/routes/routes.ts
@@ -37,6 +37,10 @@ export const routes: RouteType[] = [
                 path: '/sponsor/prospectus',
                 name: PageName.SponsorProspectus
             },
+            {
+                path: '/sponsor/benefit',
+                name: PageName.SponsorBenefit
+            },
             {
                 path: '/sponsor/terms-of-sponsor',
                 name: PageName.SponsorTerms
diff --git a/frontend/yarn.lock b/frontend/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ export enum PageName {`
`6`	`6`	`Contribute = 'Contribute',`
`7`	`7`	`Sponsor = 'Sponsor',`
`8`	`8`	`SponsorProspectus = 'SponsorProspectus',`
	`9`	`+ SponsorBenefit = 'SponsorBenefit',`
`9`	`10`	`SponsorTerms = 'SponsorTerms',`
`10`	`11`	`CoC = 'CoC'`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-export interface ISponsorTerms {`
	`1`	`+export interface IContents {`
`2`	`2`	`content: {`
`3`	`3`	`ko: string`
`4`	`4`	`en: string`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-export interface IApiSponsorTerms {`
	`1`	`+export interface IApiContents {`
`2`	`2`	`slug: string`
`3`	`3`	`title: string`
`4`	`4`	`content: string`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ export default {`
`8`	`8`	`[PageName.Contribute]: 'Contribution',`
`9`	`9`	`[PageName.Sponsor]: 'Sponsor',`
`10`	`10`	`[PageName.SponsorProspectus]: 'Prospectus',`
	`11`	`+ [PageName.SponsorBenefit]: 'Benefit',`
`11`	`12`	`[PageName.SponsorTerms]: 'Terms of Sponsor',`
`12`	`13`	`[PageName.CoC]: 'CoC'`
`13`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ export default {`
`8`	`8`	`[PageName.Contribute]: '기여하기',`
`9`	`9`	`[PageName.Sponsor]: '후원하기',`
`10`	`10`	`[PageName.SponsorProspectus]: '후원사 안내',`
	`11`	`+ [PageName.SponsorBenefit]: '후원사 혜택',`
`11`	`12`	`[PageName.SponsorTerms]: '후원사 약관',`
`12`	`13`	`[PageName.CoC]: '행동 강령'`
`13`	`14`	`}`