feat(docs): UI Kit Docs 페이지 와꾸 추가 (#62)

* feat(docs): 대략적인 레이아웃 추가 * feat(docs): BasicLayout 추가 * Docs Ui Kit 버전 업 * feat(docs): 사이드 메뉴 대충 와꾸 잡음 * feat(docs): Getting Started 추가
Lubycon · Mar 26, 2021 · 2b81488 · 2b81488
1 parent cbeaf23
commit 2b81488
Show file tree

Hide file tree

Showing 25 changed files with 420 additions and 252 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.1.5",
+    "@lubycon/ui-kit": "^1.1.0-alpha.30",
     "gh-pages": "^3.1.0",
     "next": "latest",
     "normalize.css": "^8.0.1",

diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -1,4 +1,22 @@
-import App from 'next/app';
+import React from 'react';
+import { AppProps } from 'next/app';
+import { LubyconUIKitProvider } from '@lubycon/ui-kit';
+
 import 'normalize.css';
+import '@lubycon/ui-kit/css/lubycon-ui-kit.min.css';
+import Head from 'next/head';
 
-export default App;
+export default function LubyconUIKitDocsApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Head>
+        <title>Lubycon UI Kit</title>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      </Head>
+      <LubyconUIKitProvider>
+        <Component {...pageProps} />
+      </LubyconUIKitProvider>
+    </>
+  );
+}
diff --git a/docs/pages/_document.tsx b/docs/pages/_document.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
+
+class LubyconUIKitDocsDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
+  }
+
+  render() {
+    return (
+      <Html lang="ko">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default LubyconUIKitDocsDocument;
diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
diff --git a/docs/pages/api/.gitkeep b/docs/pages/api/.gitkeep
diff --git a/docs/pages/api/users/index.ts b/docs/pages/api/users/index.ts
diff --git a/docs/pages/getting-started.ts b/docs/pages/getting-started.ts
@@ -0,0 +1 @@
+export { default } from 'pages/GettingStartedPage';
diff --git a/docs/pages/index.ts b/docs/pages/index.ts
@@ -0,0 +1 @@
+export { default } from 'pages/HomePage';
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
diff --git a/docs/pages/users/[id].tsx b/docs/pages/users/[id].tsx
diff --git a/docs/pages/users/index.tsx b/docs/pages/users/index.tsx
diff --git a/docs/src/components/BasicLayout/index.tsx b/docs/src/components/BasicLayout/index.tsx
@@ -0,0 +1,66 @@
+import { Row, Column, Container } from '@lubycon/ui-kit';
+import GlobalHeader from 'components/GlobalHeader';
+import GlobalSidebar from 'components/GlobalSidebar';
+import React, { PropsWithChildren, useState, useEffect, useRef } from 'react';
+
+const BasicLayout = ({ children }: PropsWithChildren<unknown>) => {
+  const headerRef = useRef<HTMLElement>(null);
+  const [headerHeight, setHeaderHeight] = useState(0);
+
+  const contentsHeight = `calc(100vh - ${headerHeight}px)`;
+
+  useEffect(() => {
+    if (headerRef.current != null) {
+      const rect = headerRef.current.getBoundingClientRect();
+      setHeaderHeight(rect.height);
+    }
+  }, [headerRef.current]);
+
+  return (
+    <div>
+      <header
+        ref={headerRef}
+        css={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          zIndex: 100,
+        }}
+      >
+        <GlobalHeader />
+      </header>
+      <div
+        css={{
+          paddingTop: headerHeight,
+        }}
+      >
+        <Container>
+          <Row css={{ height: contentsHeight }}>
+            <Column
+              as="aside"
+              xs="auto"
+              css={{
+                width: 300,
+                overflowY: 'scroll',
+                height: '100%',
+              }}
+            >
+              <GlobalSidebar />
+            </Column>
+            <Column
+              css={{
+                overflowY: 'scroll',
+                height: '100%',
+              }}
+            >
+              {children}
+            </Column>
+          </Row>
+        </Container>
+      </div>
+    </div>
+  );
+};
+
+export default BasicLayout;
diff --git a/docs/src/components/GlobalHeader/index.tsx b/docs/src/components/GlobalHeader/index.tsx
@@ -1,37 +1,31 @@
 import React from 'react';
-import { useRouter } from 'next/router';
+import { Row, Column, Container } from '@lubycon/ui-kit';
+import Link from 'next/link';
+import { logoSrc } from 'constants/resources';
 
 const GlobalHeader = () => {
-  const router = useRouter();
-  const handleLogoClick = (e: MouseEvent) => {
-    e.preventDefault();
-    router.push('/');
-  };
-
   return (
     <nav
       css={{
         display: 'flex',
         width: '100%',
         justifyContent: 'center',
+        padding: '12px 0',
+        boxShadow: '0px 3px 5px rgba(0, 0, 0, 0.1)',
+        backgroundColor: '#ffffff',
       }}
     >
-      <div
-        css={{
-          display: 'flex',
-          width: 1200,
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          padding: '12px 0',
-        }}
-      >
-        <a href="/" onClick={handleLogoClick}>
-          <img
-            css={{ width: 100 }}
-            src="https://d2x9jxyr47nlkc.cloudfront.net/logo/logo-color.svg"
-          />
-        </a>
-      </div>
+      <Container>
+        <Row css={{ width: '100%' }}>
+          <Column>
+            <Link href="/">
+              <a>
+                <img css={{ width: 100 }} src={logoSrc} />
+              </a>
+            </Link>
+          </Column>
+        </Row>
+      </Container>
     </nav>
   );
 };

diff --git a/docs/src/components/GlobalSidebar/index.tsx b/docs/src/components/GlobalSidebar/index.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Menu, menu } from 'constants/menu';
+import Link from 'next/link';
+import { isLinkMenu } from 'utils/menu';
+import { colors, Text } from '@lubycon/ui-kit';
+import styled from '@emotion/styled';
+
+const StyledList = styled.ul`
+  margin: 0;
+  padding: 0;
+`;
+const StyledListItem = styled.li`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+
+const Item = ({ menu }: { menu: Menu }) => {
+  return isLinkMenu(menu) ? (
+    <Link href={menu.link}>
+      <Text as="a" css={{ cursor: 'pointer' }}>
+        {menu.title}
+      </Text>
+    </Link>
+  ) : (
+    <div>
+      <Text>{menu.title}</Text>
+      <StyledList>
+        {menu.children.map((childrenMenu, index) => (
+          <StyledListItem
+            key={index}
+            css={{
+              paddingLeft: 16,
+              borderLeft: `1px solid ${colors.gray20}`,
+              color: colors.gray70,
+            }}
+          >
+            <Item menu={childrenMenu} />
+          </StyledListItem>
+        ))}
+      </StyledList>
+    </div>
+  );
+};
+
+const GlobalSidebar = () => {
+  return (
+    <div css={{ boxShadow: '0px 3px 5px rgba(0, 0, 0, 0.1)', height: '100%', padding: 16 }}>
+      <StyledList>
+        {menu.map((item, index) => (
+          <StyledListItem key={index} css={{ marginBottom: 8 }}>
+            <Item menu={item} />
+          </StyledListItem>
+        ))}
+      </StyledList>
+    </div>
+  );
+};
+
+export default GlobalSidebar;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from 'pages/GettingStartedPage';