Merge branch 'main' of https://github.com/EveryAnalytics/web-analytic…

…s-handbook into feature/6

# Conflicts:
#	src/theme/Root.js

.gitignore

@@ -19,3 +19,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#Ide
+.idea

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": true
   }

src/components/HomepageFeatures.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import mq from 'theme/mq';
 
 const FeatureList = [
   {
-    title: "DAU, GA... 먹는건가요?",
-    Svg: require("../../static/img/undraw_docusaurus_mountain.svg").default,
+    title: 'DAU, GA... 먹는건가요?',
+    Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
     description: (
       <>
         사용자 데이터 분석(Daily Active User, 전환율 측정 등)은 모던 웹
@@ -17,17 +17,17 @@ const FeatureList = [
     ),
   },
   {
-    title: "개발자에게 필요한 웹 분석 지식",
-    Svg: require("../../static/img/undraw_docusaurus_tree.svg").default,
+    title: '개발자에게 필요한 웹 분석 지식',
+    Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
     description: (
       <>
         여러분의 프로젝트에 웹 분석 툴을 연동하기 위해선 어떤 코드가 필요할까요?
       </>
     ),
   },
   {
-    title: "GA와 Amplitude를 한번에",
-    Svg: require("../../static/img/undraw_docusaurus_react.svg").default,
+    title: 'GA와 Amplitude를 한번에',
+    Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
     description: (
       <>
         react-analytics-provider 오픈소스를 통해 Google Analytics, Amplitude와
@@ -85,7 +85,7 @@ const FeatureDescription = styled.p``;
 const FeatureContainer = styled.div`
   ${mq()({
     flex: ['0 0 100%', '0 0 calc(4/12 * 100%)'],
-    maxWidth: ['100%', 'calc(4/12 * 100%)']
+    maxWidth: ['100%', 'calc(4/12 * 100%)'],
   })}
 `;
 

src/components/WikiTable/WikiTable.tsx

@@ -6,34 +6,24 @@ import words from '../../../wiki.json';
 import usePagination from '../../hooks/usePagination';
 
 export default function WikiTable() {
-  const {
-    onPrevious, 
-    onNext, 
-    currentPage, 
-    result,
-    isLastPage,
-    isFirstPage
-  } = usePagination({
-    source: words,
-    offset: 2
-  });
+  const { onPrevious, onNext, currentPage, result, isLastPage, isFirstPage } =
+    usePagination({
+      source: words,
+      offset: 2,
+    });
 
   return (
     <>
       <span>{currentPage}</span>
-      <button 
-        onClick={onPrevious} 
-        disabled={isFirstPage}>
+      <button onClick={onPrevious} disabled={isFirstPage}>
         Previous
       </button>
-      <button 
-        onClick={onNext} 
-        disabled={isLastPage}>
+      <button onClick={onNext} disabled={isLastPage}>
         Next
       </button>
       <table>
         <tbody>
-          {result.map((word) => (
+          {result.map(word => (
             <WikiTableRow key={word.name} {...word} />
           ))}
         </tbody>

src/hooks/usePagination.ts

@@ -1,10 +1,6 @@
 import { useEffect, useState } from 'react';
 
-const usePagination = ({
-  source = [],
-  initialPage = 1,
-  offset = 10
-}) => {
+const usePagination = ({ source = [], initialPage = 1, offset = 10 }) => {
   const minPage = 1;
   const maxPage = Math.ceil(source.length / offset);
 
@@ -14,17 +10,17 @@ const usePagination = ({
   useEffect(() => {
     const startIdx = (currentPage - 1) * offset;
     const endIdx = startIdx + offset;
-    
+
     setResult(source.slice(startIdx, endIdx));
   }, [currentPage]);
 
   const onPrevious = () => {
-    if(currentPage <= minPage) return;
+    if (currentPage <= minPage) return;
     setCurrentPage(currentPage - 1);
   };
 
   const onNext = () => {
-    if(currentPage >= maxPage) return;
+    if (currentPage >= maxPage) return;
     setCurrentPage(currentPage + 1);
   };
 
@@ -34,8 +30,8 @@ const usePagination = ({
     isLastPage: currentPage === maxPage,
     isFirstPage: currentPage === minPage,
     onPrevious,
-    onNext
+    onNext,
   };
 };
 
-export default usePagination;
+export default usePagination;

src/pages/index.js

@@ -1,16 +1,16 @@
-import React from "react";
-import clsx from "clsx";
-import Layout from "@theme/Layout";
-import Link from "@docusaurus/Link";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import styles from "./index.module.css";
-import HomepageFeatures from "components/HomepageFeatures";
-import Footer from "theme/Footer";
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import styles from './index.module.css';
+import HomepageFeatures from 'components/HomepageFeatures';
+import Footer from 'theme/Footer';
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
@@ -20,9 +20,9 @@ function HomepageHeader() {
             className="button button--secondary button--lg"
             to="/docs/handbook/intro"
             onClick={() => {
-              gtag("event", "핸드북 읽기 클릭", {
-                event_category: "메인페이지",
-                event_label: "라벨",
+              gtag('event', '핸드북 읽기 클릭', {
+                event_category: '메인페이지',
+                event_label: '라벨',
               });
             }}
           >
@@ -35,9 +35,9 @@ function HomepageHeader() {
             className="button button--secondary button--lg"
             to="/docs/react-analytics-provider/intro"
             onClick={() => {
-              gtag("event", "react-analytics-provider 클릭", {
-                event_category: "메인페이지",
-                event_label: "라벨",
+              gtag('event', 'react-analytics-provider 클릭', {
+                event_category: '메인페이지',
+                event_label: '라벨',
               });
             }}
           >

src/pages/wiki/index.js

@@ -1,8 +1,8 @@
-import React from "react";
-import Layout from "@theme/Layout";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import React from 'react';
+import Layout from '@theme/Layout';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-import WikiTable from '../../components/WikiTable'
+import WikiTable from '../../components/WikiTable';
 
 export default function Wiki() {
   const { siteConfig } = useDocusaurusContext();

src/theme/Footer/index.tsx

@@ -9,11 +9,11 @@ import React from 'react';
 import clsx from 'clsx';
 
 import Link from '@docusaurus/Link';
-import {FooterLinkItem, useThemeConfig} from '@docusaurus/theme-common';
+import { FooterLinkItem, useThemeConfig } from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import styles from './styles.module.css';
-import ThemedImage, {Props as ThemedImageProps} from '@theme/ThemedImage';
+import ThemedImage, { Props as ThemedImageProps } from '@theme/ThemedImage';
 import IconExternalLink from '@theme/IconExternalLink';
 
 function FooterLink({
@@ -24,7 +24,7 @@ function FooterLink({
   ...props
 }: FooterLinkItem) {
   const toUrl = useBaseUrl(to);
-  const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
+  const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true });
 
   return (
     <Link
@@ -36,7 +36,8 @@ function FooterLink({
         : {
             to: toUrl,
           })}
-      {...props}>
+      {...props}
+    >
       {href && !isInternalUrl(href) ? (
         <span>
           {label}
@@ -57,9 +58,9 @@ const FooterLogo = ({
 );
 
 function Footer(): JSX.Element | null {
-  const {footer} = useThemeConfig();
+  const { footer } = useThemeConfig();
 
-  const {copyright, links = [], logo = {}} = footer || {};
+  const { copyright, links = [], logo = {} } = footer || {};
   const sources = {
     light: useBaseUrl(logo.src),
     dark: useBaseUrl(logo.srcDark || logo.src),
@@ -73,7 +74,8 @@ function Footer(): JSX.Element | null {
     <footer
       className={clsx('footer', {
         'footer--dark': footer.style === 'dark',
-      })}>
+      })}
+    >
       <div className="container">
         {links && links.length > 0 && (
           <div className="row footer__links">

src/theme/mq.ts

@@ -4,18 +4,18 @@ type DeviceSize = 'm';
 
 type DeviceWidth = {
   [key in DeviceSize]: number;
-}
+};
 
 const deviceWidth: DeviceWidth = {
-  m: 1000
-}
+  m: 1000,
+};
 
 const mq = (breakpoints = deviceWidth): DynamicStyleFunction => {
   const mediaQueries: string[] = Object.values(breakpoints)
     .sort((curr: number, next: number) => curr - next)
     .map((breakpoint: number) => `@media(min-width: ${breakpoint}px)`);
 
-  return facepaint(mediaQueries, { overlap: true});
-}
+  return facepaint(mediaQueries, { overlap: true });
+};
 
 export default mq;

wiki.json

@@ -72,7 +72,7 @@
     "description": "고객이 제품에 참여하는(engage) 방식을 이해하는 데 사용하는 프로세스입니다. "
   },
   {
-    "name": "Session (세션)",
+    "name": "세션 (Session)",
     "description": "GA에서 Session은 사용자의 특정 활동 시간이며, 특정 시간안에서 사용자의 여러 상호작용의 집합입니다. (기본 설정 30분)"
   },
   {