Merge pull request #59 from pythonkr/add-og

파이콘 한국 2022 날짜 정보 추가 및 sns 링크 연결

Author: constmoon

frontend/components/core/NavBar.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/router'
 import { media } from '../../assets/styles/mixin'
+import SnsLink from './SnsLink'
 
 const Container = styled.nav`
     ${media.mobile(`
@@ -174,6 +175,7 @@ const NavBar = (props: NavProps) => {
                         </LanguageChangeButton>
                     </ListItem>
                 )}
+                <SnsLink />
             </List>
         </Container>
     )

frontend/components/core/NavBarMobile.tsx

@@ -13,6 +13,7 @@ import {
     SubMenuToggleLabel,
     SubMenuToggleSpan
 } from './NavBar'
+import SnsLink from './SnsLink'
 
 const Container = styled.div`
     display: none;
@@ -252,6 +253,7 @@ const NavBarMobile = (props: NavProps) => {
                                 </LanguageChangeButton>
                             </ListItem>
                         )}
+                        <SnsLink />
                     </List>
                 </Navigation>
             )}

frontend/components/core/NavLink.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import Icon from '@mdi/react'
+import { mdiFacebook, mdiTwitter } from '@mdi/js'
+import styled from 'styled-components'
+import Resource from '../../data/constants/resources'
+import { media } from '../../assets/styles/mixin'
+
+const List = styled.ul`
+    display: flex;
+`
+const ListItem = styled.li`
+    padding: 0.4rem;
+    color: ${(props) => props.theme.colors.white};
+    ${media.mobile(`
+        padding: 1.3rem 0;
+    `)}
+    & + & {
+        ${media.mobile(`
+            padding-left: 1rem;
+        `)}
+    }
+`
+
+export const Link = styled.a`
+    display: flex;
+    cursor: pointer;
+`
+
+const SnsLink = () => {
+    return (
+        <List>
+            <ListItem>
+                <Link
+                    target="_blank"
+                    aria-label="Facebook Link"
+                    href={Resource.pyconkrFacebook}
+                >
+                    <Icon path={mdiFacebook} size={1} />
+                </Link>
+            </ListItem>
+            <ListItem>
+                <Link
+                    target="_blank"
+                    aria-label="Twitter Link"
+                    href={Resource.pyconkrTwitter}
+                >
+                    <Icon path={mdiTwitter} size={1} />
+                </Link>
+            </ListItem>
+        </List>
+    )
+}
+
+export default SnsLink

frontend/components/core/SnsLink.tsx

@@ -35,17 +35,25 @@ const Layout = (props: LayoutProps) => {
             ? `${t(`pageTitle:${props.pageName}`)} : ${t(`label:siteTitle`)}`
             : `${t(`label:siteTitle`)}`
 
+    const description = `${t(`label:pyconkrTitle`)}: ${t(`label:pyconkrDate`)}`
+
     // TODO: locale을 context로 관리
     return (
         <>
             <NextSeo
                 title={title}
-                description=""
+                description={description}
                 openGraph={{
                     type: 'website',
                     url: 'https://pycon.kr',
                     title: title,
-                    site_name: title
+                    site_name: title,
+                    description: description,
+                    images: [
+                        {
+                            url: `https://2022.pycon.kr/images/og-temp.jpg`
+                        }
+                    ]
                 }}
             />
             <NavBarMobile locale={props.locale} />

frontend/components/layout/Layout.tsx

@@ -58,7 +58,7 @@ const MainBackground = () => {
         <>
             <Container>
                 <Title>{t(`label:pyconkrTitle`)}</Title>
-                <BodyText>{t(`label:comingSoon`)}</BodyText>
+                <BodyText>{t(`label:pyconkrDate`)}</BodyText>
             </Container>
             <Background />
         </>

frontend/components/service/Home/Main.tsx

@@ -18,7 +18,9 @@ const Resources = {
 
         PYCONKR_2014_IMG:
             'https://live.staticflickr.com/3912/14958407280_c7e9e6717e_z.jpg'
-    }
+    },
+    pyconkrFacebook: 'https://www.facebook.com/pyconkorea',
+    pyconkrTwitter: 'https://twitter.com/PyConKR'
 }
 
 export default Resources

frontend/data/constants/resources.ts

@@ -2,7 +2,7 @@ export default {
     siteTitle: 'PyCon Korea 2022',
     preparing: 'Under Construction',
     pyconkrTitle: 'PYCON KOREA 2022',
-    comingSoon: 'Coming Soon',
+    pyconkrDate: 'October 1-2, 2022',
     about: {
         main: {
             title: 'About PyCon Korea',

frontend/locales/en/label.ts

@@ -2,7 +2,7 @@ export default {
     siteTitle: '파이콘 한국 2022',
     preparing: '준비 중입니다.',
     pyconkrTitle: 'PYCON KOREA 2022',
-    comingSoon: 'Coming Soon',
+    pyconkrDate: '2022년 10월 1일 ~ 10월 2일',
     about: {
         main: {
             title: '파이콘 한국이란',

frontend/locales/ko/label.ts

@@ -9,6 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@mdi/font": "^6.7.96",
+    "@mdi/js": "^6.7.96",
+    "@mdi/react": "^1.6.0",
     "@sls-next/serverless-component": "^3.7.0",
     "axios": "^0.27.2",
     "babel-plugin-styled-components": "^2.0.6",