발표 상세에 enum locale 추가, 헤더 여백 변경

Author: constmoon

frontend/components/service/Program/Speaker.tsx

@@ -5,6 +5,7 @@ import Linkify from 'react-linkify'
 
 const SpeakerContainer = styled.div`
     display: flex;
+    align-items: flex-start;
     ${media.mobile(`
         display: block;
     `)}
@@ -31,8 +32,9 @@ const SpeakerName = styled.div`
 `
 const SpeakerIntro = styled.p`
     margin-top: 0.8rem;
+    white-space: pre-wrap;
     a {
-        color: ${(props) => props.theme.colors.blue0}
+        color: ${(props) => props.theme.colors.blue0};
     }
 `
 

frontend/data/enums/TalkDuration.ts

@@ -0,0 +1,4 @@
+export enum TalkDuration {
+    S = 'S',
+    L = 'L'
+}

frontend/data/enums/TalkLanguage.ts

@@ -0,0 +1,4 @@
+export enum TalkLanguage {
+    ko = 'ko',
+    en = 'en'
+}

frontend/locales/en/enumeration.ts

@@ -0,0 +1,13 @@
+import { TalkDuration } from '../../data/enums/TalkDuration'
+import { TalkLanguage } from '../../data/enums/TalkLanguage'
+
+export default {
+    TalkDuration: {
+        [TalkDuration.S]: '15min',
+        [TalkDuration.L]: '30min'
+    },
+    TalkLanguage: {
+        [TalkLanguage.ko]: 'Korean',
+        [TalkLanguage.en]: 'English'
+    }
+}

frontend/locales/en/index.ts

@@ -3,11 +3,13 @@ import pageTitle from './pageTitle'
 import label from './label'
 import contentDescription from './contentDescription'
 import sponsorLevel from './sponsorLevel'
+import enumeration from './enumeration'
 
 export default {
     error,
     pageTitle,
     label,
     contentDescription,
-    sponsorLevel
+    sponsorLevel,
+    enum: enumeration
 }

frontend/locales/ko/enumeration.ts

@@ -0,0 +1,13 @@
+import { TalkDuration } from '../../data/enums/TalkDuration'
+import { TalkLanguage } from '../../data/enums/TalkLanguage'
+
+export default {
+    TalkDuration: {
+        [TalkDuration.S]: '15분',
+        [TalkDuration.L]: '30분'
+    },
+    TalkLanguage: {
+        [TalkLanguage.ko]: '한국어',
+        [TalkLanguage.en]: '영어'
+    }
+}

frontend/locales/ko/index.ts

@@ -3,11 +3,13 @@ import pageTitle from './pageTitle'
 import label from './label'
 import contentDescription from './contentDescription'
 import sponsorLevel from './sponsorLevel'
+import enumeration from './enumeration'
 
 export default {
     error,
     pageTitle,
     label,
     contentDescription,
-    sponsorLevel
+    sponsorLevel,
+    enum: enumeration
 }

frontend/locales/ko/label.ts

@@ -41,4 +41,6 @@ export default {
     difficulty: '난이도',
     duration: '발표 시간',
     language: '언어',
+    description: '설명',
+    speakerIntro: '발표자 소개'
 }

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

@@ -14,13 +14,13 @@ interface TalkListDetailProps extends LocalePage<ITalkItem> {
     locale: string
 }
 
-const SpeakerContainer = styled.div`
-    margin-top: 4rem;
-`
 const Description = styled.div`
-    margin-top: 1rem;
+    margin-top: 2rem;
 `
 
+const SpeakerContainer = styled.div`
+    margin-top: 4rem;
+`
 
 const TalkListDetail: NextPage = (props: TalkListDetailProps) => {
     const { t } = useTranslation()
@@ -38,15 +38,23 @@ const TalkListDetail: NextPage = (props: TalkListDetailProps) => {
             <div>
                 {t('label:category')}: {item.category}
             </div>
-            <div>{t('label:difficulty')}: {item.difficulty}</div>
-            <div>{t('label:duration')}: {item.duration}</div>
-            <div>{t('label:language')}: {item.language}</div>
+            <div>
+                {t('label:difficulty')}: {item.difficulty}
+            </div>
+            <div>
+                {t('label:duration')}: {t(`enum:TalkDuration.${item.duration}`)}
+            </div>
+            <div>
+                {t('label:language')}: {t(`enum:TalkLanguage.${item.language}`)}
+            </div>
             <Description>
-                <Heading3 useGradient={true}>설명</Heading3>
+                <Heading3 useGradient={true}>{t('label:description')}</Heading3>
                 {item.desc}
             </Description>
             <SpeakerContainer>
-                <Heading3 useGradient={true}>발표자 소개</Heading3>
+                <Heading3 useGradient={true}>
+                    {t('label:speakerIntro')}
+                </Heading3>
                 <Speaker item={speaker} />
             </SpeakerContainer>
         </>