feat(docs): Docs에 Prev, Next 버튼 추가 (#77)

* fix(ui-kit): Button 컴포넌트가 커스텀 className도 받을 수 있도록 수정

* feat(docs): Prev, Next 버튼 추가 (디자인 없음)

* 의미없는 콘솔 제거

* CODEOWNERS 추가

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @evan-moon @Junkim93

.github/workflows/alpha-release-docs.yml

@@ -5,7 +5,6 @@ on:
     branches:
       - master
       - alpha
-      - chore/docs-deploy
 
 jobs:
   alpha-release-ui-kit-docs:
@@ -40,8 +39,8 @@ jobs:
         run: yarn
       - name: Build
         run: yarn workspace lubycon-ui-kit-docs build
-        # env:
-          # GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES: true
+        env:
+          GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES: true
       - name: Publish
         run: yarn workspace lubycon-ui-kit-docs deploy
         env:

docs/gatsby-hooks/createPages.js

@@ -30,10 +30,17 @@ async function createPages({ actions, graphql, reporter }) {
   }
 
   const pages = query.data.allMdx.edges;
-  pages.forEach(({ node: page }) => {
+  pages.forEach(({ node: page }, index) => {
+    const previous = index === 0 ? null : pages[index - 1].node;
+    const next = index === pages.length - 1 ? null : pages[index + 1].node;
+
     createPage({
       path: page.fields.path,
       component: pageTemplate,
+      context: {
+        previous,
+        next,
+      },
     });
   });
 }

docs/src/content/testPage.mdx

@@ -0,0 +1,6 @@
+---
+title: Test Page
+order: 0
+---
+
+This is test page

docs/src/templates/page.tsx

@@ -1,7 +1,17 @@
-import React from 'react';
-import { graphql } from 'gatsby';
+import React, { PropsWithChildren } from 'react';
+import { graphql, Link } from 'gatsby';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import BasicLayout from 'components/BasicLayout';
+import { Button, Column, Row } from '@lubycon/ui-kit';
+
+interface DocsSummary {
+  fields: {
+    path: string;
+  };
+  frontmatter: {
+    title: string;
+  };
+}
 
 interface PageTemplateProps {
   data: {
@@ -12,20 +22,50 @@ interface PageTemplateProps {
       };
     };
   };
+  pageContext: {
+    previous: DocsSummary;
+    next: DocsSummary;
+  };
 }
 
-const PageTemplate = ({ data }: PageTemplateProps) => {
-  console.log(data);
+const PageTemplate = ({ data, pageContext }: PageTemplateProps) => {
+  console.log(pageContext);
+  const prevContents = pageContext.previous;
+  const nextContents = pageContext.next;
+
   return (
     <BasicLayout>
       <h1>{data.mdx.frontmatter.title}</h1>
       <MDXRenderer>{data.mdx.body}</MDXRenderer>
+      <Row css={{ display: 'flex', justifyContent: 'space-between', padding: 40 }}>
+        <Column xs={12} sm={3}>
+          {prevContents ? (
+            <NavigationButton to={prevContents.fields.path}>
+              👈 {prevContents.frontmatter.title}
+            </NavigationButton>
+          ) : null}
+        </Column>
+        <Column />
+        <Column xs={12} sm={3}>
+          {nextContents ? (
+            <NavigationButton to={nextContents.fields.path}>
+              {nextContents.frontmatter.title} 👉
+            </NavigationButton>
+          ) : null}
+        </Column>
+      </Row>
     </BasicLayout>
   );
 };
 
 export default PageTemplate;
 
+const NavigationButton = ({ to, children }: PropsWithChildren<{ to: string }>) => (
+  <Link to={to}>
+    <Button css={{ width: '100%' }}>{children}</Button>
+  </Link>
+);
+
 export const pageQuery = graphql`
   query($path: String!) {
     mdx(fields: { path: { eq: $path } }) {

ui-kit/src/components/Button/index.tsx

@@ -12,15 +12,26 @@ interface ButtonBaseProps {
 type ButtonProps = CombineElementProps<'button', ButtonBaseProps>;
 
 const Button = (
-  { size = 'small', disabled, style, type, htmlType, onClick, children, ...props }: ButtonProps,
+  {
+    size = 'small',
+    disabled,
+    style,
+    type,
+    htmlType,
+    onClick,
+    children,
+    className,
+    ...props
+  }: ButtonProps,
   ref: Ref<HTMLButtonElement>
 ) => {
   return (
     <button
       className={classnames(
         'lubycon-button',
         `lubycon-button--${size}`,
-        `lubycon-button--type-${type ?? 'default'}`
+        `lubycon-button--type-${type ?? 'default'}`,
+        className
       )}
       disabled={disabled}
       style={{ ...style }}