후원사 상세 페이지 생성

Author: constmoon

frontend/components/service/Sponsor/SponsorList.tsx

@@ -2,11 +2,8 @@ import { Link } from '../../core/SnsLink'
 import React from 'react'
 import styled from 'styled-components'
 import { ISponsorLevelItem, ISponsorList } from '../../../interfaces/ISponsor'
-import categoryList from '../Program/CategoryList'
-import Sponsor from '../../../pages/sponsor/list'
 import { useTranslation } from 'react-i18next'
 import { Heading3 } from '../../../assets/styles/typo'
-import sponsorLevel from '../../../locales/ko/sponsorLevel'
 import { DEFAULT_PROFILE_PATH } from '../../../data/constants/config'
 
 const SponsorLevel = styled.div`
@@ -75,7 +72,7 @@ const SponsorList = (props: { list: ISponsorList }) => {
                                 {item.list.map((sponsor) => (
                                     <SponsorItem key={sponsor.slug}>
                                         <Link
-                                            href={`/sponsor/list/${sponsor.slug}`}
+                                            href={`/sponsor/list/${sponsor.id}`}
                                         >
                                             <a>
                                                 <SponsorImage

frontend/interfaces/ISponsor.ts

@@ -1,4 +1,4 @@
-import { IApiSponsorListItem } from './api/IApiSponsor'
+import { IApiSponsorDetail, IApiSponsorListItem } from './api/IApiSponsor'
 
 export interface ISponsorListItem extends IApiSponsorListItem {}
 
@@ -11,3 +11,5 @@ export interface ISponsorLevelItem {
     name: string
     list: ISponsorListItem[]
 }
+
+export interface ISponsorDetail extends IApiSponsorDetail {}

frontend/interfaces/api/IApiSponsor.ts

@@ -8,3 +8,24 @@ export interface IApiSponsorListItem {
     logo_image: string | null
     id: number
 }
+
+export interface IApiSponsorDetail {
+    id: number
+    slug: string
+    name: string
+    level: number
+    desc: string
+    manager_name: string
+    manager_email: string
+    business_registration_number: string | null
+    business_registration_file: string | null
+    url: string | null
+    logo_image: string | null
+    virtual_booth_content: string
+    submitted: boolean
+    accepted: boolean
+    paid_at: string | null
+    exported: boolean
+    created_at: string
+    updated_at: string
+}

frontend/pages/api/sponsor.ts

@@ -2,8 +2,11 @@ import axios from 'axios'
 import { IContents } from '../../interfaces/IContents'
 import { IApiContents } from '../../interfaces/api/IApiContents'
 import { API_SERVER } from '../../data/constants/config'
-import { IApiSponsorListItem } from '../../interfaces/api/IApiSponsor'
-import { ISponsorList } from '../../interfaces/ISponsor'
+import {
+    IApiSponsorDetail,
+    IApiSponsorListItem
+} from '../../interfaces/api/IApiSponsor'
+import { ISponsorDetail, ISponsorList } from '../../interfaces/ISponsor'
 
 type SponsorDataEndPointType =
     | 'prospectus'
@@ -21,6 +24,15 @@ export const getSponsorList = async (): Promise<ISponsorList> => {
     }
 }
 
+export const getSponsorDetail = async (id: string): Promise<ISponsorDetail> => {
+    const response = await axios.get(`${API_SERVER}/sponsor/${id}`)
+    const data: IApiSponsorDetail = response.data
+
+    return {
+        ...data
+    }
+}
+
 export const getSponsorContentData = async (
     endPoint: SponsorDataEndPointType
 ): Promise<IContents> => {

frontend/pages/sponsor/list/[id].tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import styled from 'styled-components'
+import Linkify from 'react-linkify'
+import PageTitle from '../../../components/core/PageTitle'
+import { ISponsorDetail, ISponsorListItem } from '../../../interfaces/ISponsor'
+import { GetServerSideProps, GetServerSidePropsContext, NextPage } from 'next'
+import { getSponsorDetail } from '../../api/sponsor'
+import { LocalePage } from '../../../interfaces/PageProps'
+import { useTranslation } from 'react-i18next'
+import { media } from '../../../assets/styles/mixin'
+
+interface SponsorDetailProps extends LocalePage<ISponsorDetail> {
+    locale: string
+}
+
+const SponsorImage = styled.img`
+    display: block;
+    margin: 0 auto;
+    max-width: 400px;
+    margin-top: 4rem;
+    ${media.mobile(`
+        width: 100%;
+    `)}
+`
+const SponsorUrl = styled.a`
+    display: block;
+    margin-top: 2rem;
+    color: ${(props) => props.theme.colors.blue0};
+    &:hover {
+        text-decoration: underline;
+    }
+`
+const SponsorContent = styled.p`
+    white-space: pre-wrap;
+    margin-top: 6rem;
+    a {
+        color: ${(props) => props.theme.colors.blue0};
+    }
+    ${media.mobile(`
+        margin-top: 4rem;
+    `)}
+`
+
+const SponsorDetail: NextPage = (props: SponsorDetailProps) => {
+    const { t } = useTranslation()
+    const sponsor: ISponsorListItem = props[props.locale]
+
+    return (
+        <>
+            <PageTitle title={sponsor.name} />
+            <SponsorImage src={sponsor.logo_image} alt={sponsor.name} />
+            {!sponsor.url ?? (
+                <SponsorUrl href={sponsor.url}>{sponsor.url}</SponsorUrl>
+            )}
+            <SponsorContent>
+                <Linkify>{sponsor.desc}</Linkify>
+            </SponsorContent>
+        </>
+    )
+}
+
+export const getServerSideProps: GetServerSideProps = async (
+    context: GetServerSidePropsContext
+) => {
+    const { locale, params } = context
+    try {
+        const data = await getSponsorDetail(params?.id as string)
+
+        // TODO: Apply locale
+        return {
+            props: {
+                locale,
+                ko: data,
+                en: data
+            }
+        }
+    } catch (error) {
+        // TODO: Return custom error message
+        return {
+            notFound: true
+        }
+    }
+}
+
+export default SponsorDetail