Merge pull request EveryAnalytics#24 from EveryAnalytics/feat/23/add-…

…base-wiki-table

[용어사전] 최소한의 ui-kit 구현

src/components/WikiTable/WikiTable.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import WikiTableRow from './WikiTableRow';
+
+import words from '../../../wiki.json';
+
+export default function WikiTable() {
+  return (
+    <table>
+      <tbody>
+        {words.map((word) => (
+          <WikiTableRow key={word.name} {...word} />
+        ))}
+      </tbody>
+    </table>
+  );
+}

src/components/WikiTable/WikiTableRow.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { WikiWord } from '../../types';
+
+export default function WikiTableRow({ name, description }: WikiWord) {
+  return (
+    <tr>
+      <td>{name}</td>
+      <td>{description}</td>
+    </tr>
+  );
+}

src/components/WikiTable/index.ts

@@ -0,0 +1,3 @@
+import WikiTable from './WikiTable';
+
+export default WikiTable;

src/pages/wiki/index.js

@@ -2,6 +2,8 @@ import React from "react";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
+import WikiTable from '../../components/WikiTable'
+
 export default function Wiki() {
   const { siteConfig } = useDocusaurusContext();
   return (
@@ -11,8 +13,7 @@ export default function Wiki() {
     >
       <main>
         <h1>용어사전</h1>
-        <p>아래와 같은 느낌으로 리액트로 만들어요</p>
-        <img src="https://user-images.githubusercontent.com/3839771/128228797-9d69ad4a-81a2-48c2-a486-03f0dff7896d.png" />
+        <WikiTable />
       </main>
     </Layout>
   );

src/types/WikiWord.ts

@@ -0,0 +1,4 @@
+export type WikiWord = {
+  name: string;
+  description: string;
+};

src/types/index.ts

@@ -0,0 +1 @@
+export * from './WikiWord';

tsconfig.json

@@ -1,10 +1,8 @@
 {
-    "extends": "@tsconfig/docusaurus/tsconfig.json",
-    "include": ["src/"],
-    "compilerOptions": {
-        "types": [
-            "node",
-            "@emotion/react/types/css-prop"
-        ]
-    }
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "include": ["src/"],
+  "compilerOptions": {
+    "types": ["node", "@emotion/react/types/css-prop"],
+    "resolveJsonModule": true
+  }
 }

wiki.json

@@ -0,0 +1,10 @@
+[
+  {
+    "name": "타이밍 (Timing)",
+    "description": "사이트 내에서 함수 실행, AJAX 요청, 웹 리소스 로드 등에 걸린 시간"
+  },
+  {
+    "name": "세그먼트 (Segment)",
+    "description": "애널리틱스 데이터의 하위 집합. 즉, 데이터를 세분화하기 위한 수단입니다."
+  }
+]