개인 후원자 목록 반영

Author: constmoon

frontend/components/service/Home/PersonListItem.tsx

@@ -47,7 +47,7 @@ const PersonListItem = (props: { item: IPerson }) => {
 
     return (
         <PersonContainer>
-            <PersonProfile image={item.image || DEFAULT_PROFILE_PATH} />
+            <PersonProfile image={item?.image || DEFAULT_PROFILE_PATH} />
             <PersonInfo>
                 <PersonName>{item.name}</PersonName>
                 <PersonIntro>

frontend/interfaces/IProgram.ts

@@ -17,7 +17,7 @@ export interface ITalkList {
 }
 
 export interface IPerson {
-    image: string
+    image?: string
     name: string
     introduction: string
 }

frontend/interfaces/api/IApiSponsor.ts

@@ -29,3 +29,8 @@ export interface IApiSponsorDetail {
     created_at: string
     updated_at: string
 }
+
+export interface IPatrons {
+    name: string
+    message: string
+}

frontend/locales/en/label.ts

@@ -66,5 +66,8 @@ export default {
     organizingTeamInfo:
         "PyCon Korea Organizing Team is an open community of Pythonistas recruiting new members every year. PyCon Korea Organizing Team was first organized in 2014 and we're preparing our 8th PyCon in Korea.",
     staffList: 'PyCon Korea Organizing Team (Ordered alphabetically in Korean)',
-    staffListInfo: 'PyCon Korea 2020 is being prepared by the following people.'
+    staffListInfo:
+        'PyCon Korea 2020 is being prepared by the following people.',
+    patronInfo:
+        'Meet PyCon Korea 2022 individual sponsors. Thanks for your support.'
 }

frontend/locales/ko/label.ts

@@ -73,5 +73,7 @@ export default {
     organizingTeamInfo:
         '파이콘 한국 준비위원회는 2014년 조직되어, 올해 아홉 번째 한국에서의 파이콘 행사를 준비하고 있습니다. 준비위원회는 매년 신규 멤버를 모집하는 파이콘을 사랑하는 사람들의 열린 모임입니다.',
     staffList: '준비위원회 명단(가나다순)',
-    staffListInfo: '파이콘 한국 2020는 다음과 같은 사람들이 준비하고 있습니다.'
+    staffListInfo: '파이콘 한국 2020는 다음과 같은 사람들이 준비하고 있습니다.',
+    patronInfo:
+        '파이콘 한국 2022를 후원해주신 개인 후원자 분들의 명단입니다. 후원해주셔서 감사합니다.'
 }

frontend/locales/ko/pageTitle.ts

@@ -17,7 +17,7 @@ export default {
     [PageName.CfpGuide]: '발표안 작성 가이드',
     [PageName.Sponsor]: '후원하기',
     [PageName.SponsorList]: '후원사 목록',
-    [PageName.SponsorPatrons]: '개인 후원자',
+    [PageName.SponsorPatrons]: '개인 후원자 목록',
     [PageName.SponsorProspectus]: '후원사 안내',
     [PageName.SponsorJoin]: '후원사로 참여하기',
     [PageName.SponsorBenefit]: '후원사 혜택 설명',

frontend/pages/api/sponsor.ts

@@ -4,7 +4,8 @@ import { IApiContents } from '../../interfaces/api/IApiContents'
 import { API_SERVER } from '../../data/constants/config'
 import {
     IApiSponsorDetail,
-    IApiSponsorListItem
+    IApiSponsorListItem,
+    IPatrons
 } from '../../interfaces/api/IApiSponsor'
 import { ISponsorDetail, ISponsorList } from '../../interfaces/ISponsor'
 
@@ -46,3 +47,8 @@ export const getSponsorContentData = async (
         }
     }
 }
+
+export const getPatronData = async (): Promise<IPatrons[]> => {
+    const response = await axios.get(`${API_SERVER}/sponsor/personal`)
+    return response.data
+}

frontend/pages/sponsor/patrons.tsx

@@ -4,22 +4,47 @@ import { useTranslation } from 'react-i18next'
 import { PageName } from '../../data/enums/PageName'
 import PageTitle from '../../components/core/PageTitle'
 import { PageProps } from '../../interfaces/PageProps'
+import PersonListItem from '../../components/service/Home/PersonListItem'
+import { IPatrons } from '../../interfaces/api/IApiSponsor'
+import { getPatronData } from '../api/sponsor'
+import { IPerson } from '../../interfaces/IProgram'
+import { Heading3 } from '../../assets/styles/typo'
+import styled from 'styled-components'
 
-const Patrons: NextPage = (props: PageProps) => {
+const PageInfo = styled.div`
+    margin: 2rem 0 3rem;
+`
+
+interface PatronsProps extends PageProps {
+    list: IPerson[]
+}
+
+const Patrons: NextPage = (props: PatronsProps) => {
     const { t } = useTranslation()
 
     return (
         <div>
             <PageTitle title={props.pageName} />
-            {t('label:preparing')}
+            <PageInfo>{t('label:patronInfo')}</PageInfo>
+            {props.list.map((item, index) => (
+                <PersonListItem key={`patron-${index}`} item={item} />
+            ))}
         </div>
     )
 }
 
 export const getServerSideProps: GetServerSideProps = async () => {
+    const list: IPatrons[] = await getPatronData()
+
+    const formattedList: IPerson[] = list.map((item) => ({
+        name: item.name,
+        introduction: item.message
+    }))
+
     return {
         props: {
-            title: PageName.SponsorPatrons
+            title: PageName.SponsorPatrons,
+            list: formattedList
         }
     }
 }