feat(skip-link): 본문 바로가기 링크 추가 (#2)

본문 바로가기 링크를 추가하여 키보드 접근성을 높임

Resolved #2

Signed-off-by: chayeoi <chayeoikeem@gmail.com>

src/components/layout.tsx

@@ -2,9 +2,10 @@ import { css } from '@emotion/core'
 import { graphql, useStaticQuery } from 'gatsby'
 import React from 'react'
 
-import { HEADER_MIN_HEIGHT } from '../constants'
+import { CONTENT_LINK, HEADER_MIN_HEIGHT } from '../constants'
 import Footer from './footer'
 import Header from './header'
+import SkipLink from './skip-link'
 
 interface Props {
   children: React.ReactNode;
@@ -23,9 +24,10 @@ const Layout: React.FC<Props> = ({ children }) => {
 
   return (
     <div css={s.root}>
+      <SkipLink />
       <Header siteTitle={data.site.siteMetadata.title} />
       <div css={s.wrapper}>
-        <main css={s.main}>{children}</main>
+        <main id={CONTENT_LINK} css={s.main}>{children}</main>
         <Footer />
       </div>
     </div>

src/components/skip-link.tsx

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import { css, jsx, SerializedStyles } from '@emotion/core'
+
+import { CONTENT_LINK } from '../constants'
+import { Theme } from '../models/Theme'
+
+/**
+ * @
+ */
+const SkipLink: React.FC = props => (
+  <a css={s.root} href={`#${CONTENT_LINK}`} {...props}>
+    본문 바로가기
+  </a>
+)
+
+const s = {
+  root: (theme: Theme): SerializedStyles => css`
+    position: fixed;
+    z-index: 1000;
+    top: 24px;
+    left: 16px;
+    padding: 12px 16px;
+    border-radius: 2px;
+    font-size: 14px;
+    color: ${theme.palette.primary.contrastText};
+    background-color: ${theme.palette.primary.main};
+    transform-style: preserve-3d;
+    transform: perspective(800px) translateY(-100px) rotateX(-1turn);
+    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    :focus {
+      color: ${theme.palette.primary.contrastText};
+      transform: none;
+    }
+  `,
+}
+
+export default SkipLink

src/constants/index.ts

@@ -1,6 +1,7 @@
 export { default as ColorMode } from './color-mode'
 export { default as UtterancesTheme } from './utterances-theme'
 export * from './icons'
+export * from './link'
 export * from './media-types'
 export * from './palette'
 export * from './size'

src/constants/link.ts

@@ -0,0 +1 @@
+export const CONTENT_LINK = 'content'