발표 목록 및 상세 페이지 스타일 수정

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/pages/program/talks/[id].tsx

@@ -9,11 +9,18 @@ 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;
@@ -34,7 +41,7 @@ const TalkListDetail: NextPage = (props: TalkListDetailProps) => {
     }
 
     return (
-        <>
+        <DetailContainer>
             <PageTitle title={item.title} />
             <div>
                 {t('label:category')}: {item.category}
@@ -50,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>
     )
 }