Merge branch 'add-program' into devdev

Author: constmoon

frontend/components/service/Program/CategoryListItem.tsx

@@ -40,6 +40,7 @@ const SpeakerProfile = styled.div`
     height: 6rem;
     background-image: url(${(props) => props.image});
     background-size: cover;
+    background-position: center;
     border-radius: 50%;
 `
 

frontend/components/service/Program/Speaker.tsx

@@ -33,9 +33,6 @@ const SpeakerName = styled.div`
 const SpeakerIntro = styled.p`
     margin-top: 0.8rem;
     white-space: pre-wrap;
-    a {
-        color: ${(props) => props.theme.colors.blue0};
-    }
 `
 
 const Speaker = (props: { item: ISpeaker }) => {

frontend/components/service/Sponsor/SponsorList.tsx

@@ -5,36 +5,28 @@ import { ISponsorLevelItem, ISponsorList } from '../../../interfaces/ISponsor'
 import { useTranslation } from 'react-i18next'
 import { Heading3 } from '../../../assets/styles/typo'
 import { DEFAULT_PROFILE_PATH } from '../../../data/constants/config'
+import { media } from '../../../assets/styles/mixin'
 
 const SponsorLevel = styled.div`
     margin-bottom: 6rem;
 `
 const SponsorGroup = styled.ul`
     display: flex;
     align-items: center;
-    margin: 0;
-    padding: 0;
-    margin-top: 3rem;
-    @media (max-width: 768px) {
+    flex-wrap: wrap;
+    flex: auto;
+    gap: 2rem;
+    ${media.mobile(`
         flex-direction: column;
-    }
+    `)}
 `
 
 const SponsorItem = styled.li`
-    min-height: 100px;
     max-width: 200px;
-    margin: 0;
-    padding: 0;
+    height: 200px;
     list-style: none;
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    & + & {
-        margin-left: 1.6rem;
-        @media (max-width: 768px) {
-            margin-left: 0;
-            margin-top: 2rem;
-        }
-    }
 `
 
 const SponsorImage = styled.img`

frontend/pages/program/talk-schedule.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import type { NextPage, GetServerSideProps } from 'next'
+import { useTranslation } from 'react-i18next'
+import { PageName } from '../../data/enums/PageName'
+import PageTitle from '../../components/core/PageTitle'
+import { PageProps } from '../../interfaces/PageProps'
+
+const TalkSchedule: NextPage = (props: PageProps) => {
+    const { t } = useTranslation()
+
+    return (
+        <div>
+            <PageTitle title={props.pageName} />
+            {t('label:preparing')}
+        </div>
+    )
+}
+
+export const getServerSideProps: GetServerSideProps = async () => {
+    return {
+        props: {
+            title: PageName.TalkSchedule
+        }
+    }
+}
+
+export default TalkSchedule

frontend/pages/program/talks/[id].tsx

@@ -9,13 +9,21 @@ import Speaker from '../../../components/service/Program/Speaker'
 import { DEFAULT_PROFILE_PATH } from '../../../data/constants/config'
 import styled from 'styled-components'
 import { Heading3 } from '../../../assets/styles/typo'
+import Linkify from 'react-linkify'
 
 interface TalkListDetailProps extends LocalePage<ITalkItem> {
     locale: string
 }
 
+const DetailContainer = styled.div`
+    a {
+        color: ${(props) => props.theme.colors.blue0};
+    }
+`
+
 const Description = styled.div`
     margin-top: 2rem;
+    white-space: pre-line;
 `
 
 const SpeakerContainer = styled.div`
@@ -33,7 +41,7 @@ const TalkListDetail: NextPage = (props: TalkListDetailProps) => {
     }
 
     return (
-        <>
+        <DetailContainer>
             <PageTitle title={item.title} />
             <div>
                 {t('label:category')}: {item.category}
@@ -49,15 +57,15 @@ const TalkListDetail: NextPage = (props: TalkListDetailProps) => {
             </div>
             <Description>
                 <Heading3 useGradient={true}>{t('label:description')}</Heading3>
-                {item.desc}
+                <Linkify>{item.desc}</Linkify>
             </Description>
             <SpeakerContainer>
                 <Heading3 useGradient={true}>
                     {t('label:speakerIntro')}
                 </Heading3>
                 <Speaker item={speaker} />
             </SpeakerContainer>
-        </>
+        </DetailContainer>
     )
 }