// src/pages/posts/{mdx.frontmatter__slug}.tsx

export const query = graphql`
  query ($id: String) {
    mdx(id: { eq: $id }) {
      frontmatter {
        # ...
      }
      excerpt
      # ...
      tableOfContents # 이렇게 추가해주자.
    }
  }
`;

// mdx.tableOfContents
{
  items: [
    { url: "#1-개요", title: "1. 개요" },
    {
      url: "#2-구현",
      title: "2. 구현",
      items: [
        {
          url: "#21-개발-환경에서만-보이는-임시글-디렉토리-환경-설정",
          title: "2.1. 개발 환경에서만 보이는 임시글 디렉토리 환경 설정",
        },
        {
          url: "#22-임시글-목록-페이지-구현",
          title: "2.2. 임시글 목록 페이지 구현",
        },
        {
          url: "#23-임시글-링크를-메뉴에-추가",
          title: "2.3. 임시글 링크를 메뉴에 추가",
        },
        { url: "#24-상세-코드", title: "2.4. 상세 코드" },
      ],
    },
    { url: "#3-다음", title: "3. 다음" },
    { url: "#4-참고", title: "4. 참고" },
  ],
};

// src/components/TableOfContents.tsx

// ...

function TableOfContents({ data, slug }: TableOfContentsProps) {
  return (
    <Container>
      {data.map((item, i) => (
        <li key={i}>
          <Link to={`/posts/${slug}/${item.url}`}>{item.title}</Link>
          {!!item.items && <TableOfContents data={item.items} slug={slug} />}
        </li>
      ))}
    </Container>
  );
}

// ...

export default TableOfContents;

// src/pages/posts/{mdx.frontmatter__slug}.tsx

function PostDetailPage({ data, children }: PageProps<PostDetailPageData>) {
  // data.mdx.tableOfContents 로 접근 가능하다.
  const { /* ... */, tableOfContents } = data.mdx;

  // ...

  return (
    <Layout>
      {/* ... */}

      {/* 본문 바로 위에 목차를 위치시켰다. */}
      <TableOfContents data={tableOfContents.items} slug={slug} />

      <PostContent>{children}</PostContent>

      {/* ... */}
    </Layout>
  );
}

// data.mdx.tableOfContents
{
  items: [
    { url: "#1-개요", title: "1. 개요" },
    {
      url: "#2-구현",
      title: "2. 구현",
      items: [
        { url: "#21-ga-에-프로젝트-추가", title: "2.1. GA 에 프로젝트 추가" },
        {
          url: "#22-gatsby-plugin-google-gtag-플러그인-적용",
          title: " 플러그인 적용", // 제목이 url 과 너무 다르다!
        },
        { url: "#23-참고", title: "2.3. 참고" },
      ],
    },
    { url: "#3-다음", title: "3. 다음" },
    { url: "#4-참고", title: "4. 참고" },
  ],
};

## 2.2. `gatsby-plugin-google-gtag` 플러그인 적용

npm install gatsby-remark-autolink-headers # 같이 설치해줘야 한다.
npm install gatsby-remark-table-of-contents

// gatsby-config.ts

const config: GatsbyConfig = {
  // ...
  plugins: [
    // ...
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        // ...
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-table-of-contents",
            options: {
              fromHeading: 1,
              tight: true,
            },
          },
          "gatsby-remark-autolink-headers",
          // ...
        ],
      },
    },
  ],
};

# 버전을 5로 지정하는 이유는 버전 6 부터 ESM only 이기 때문이다.
# gatsby 는 플러그인에 ESM 을 지원하지 않는다.
npm install mdast-util-toc@5

// plugins/gatsby-remark-toc/index.js
// - `.ts` 가 아니라 `.js` 로 만든 이유는 본래 플러그인도 `.js` 라서 타입이 지정되어 있지 않기 때문이다.
//   타입은 나중에 개선할 때 추가하도록 하겠다.

const util = require("mdast-util-toc");

const transformer = (markdownAST, pluginOptions) => {
  const prefs = {
    tight: true,
    fromHeading: 1,
    toHeading: 6,
    className: "toc",
    ordered: false,
  };

  // 목차를 위한 빈 마크다운 AST 를 만든다.
  const tocMarkdownAST = {
    ...markdownAST,
    children: [],
  };

  // - 원본 마크다운으로부터 제목만 추려서 `tocMarkdownAST` 에 넣자.
  // - 여기서 굳이 제목만 추리는 이유는
  //   `node.depth >= prefs.fromHeading` 이 조건을 적용하기 위해서로 보인다.
  //   해당 조건이 필요 없다면 markdownAST 를 그대로 `mdast-util-toc` 에
  //   넣어도 될 것 같다.
  markdownAST.children.forEach((node) => {
    if (node.type === "heading" && node.depth >= prefs.fromHeading) {
      tocMarkdownAST.children.push(node);
    }
  });

  // `mdast-util-toc` 로 목차를 위한 마크다운 AST 를 만든다.
  const result = util(tocMarkdownAST, {
    maxDepth: prefs.toHeading,
    tight: prefs.tight,
    ordered: prefs.ordered,
    skip: Array.isArray(prefs.exclude)
      ? prefs.exclude.join("|")
      : prefs.exclude,
  });

  if (result.map) {
    // - 마크다운 원문 맨 앞에 목차를 끼워넣는다.
    // - 본래 플러그인은 마크다운 본문 내에 ` ```toc ` 영역을 찾아서
    //   해당 영역에 목차를 끼워넣지만
    //   나는 ` ```toc ` 를 쓰지 않아도 무조건 목차를 추가할 예정이라서
    //   해당 로직은 제거했다.
    markdownAST.children = [
      // - 이렇게 하면 목차를 `<div class='toc'></div>` 로 한 번 감싸주고,
      //   `### 목차`를 목차 앞에 추가해준다.
      // - 이런 과정이 다 필요없고 목차만 넣고 싶다면
      //   아래 객체 대신 `result.map` 을 직접 넣어주면 된다.
      {
        type: "parent",
        children: [
          {
            type: "heading",
            depth: 3,
            children: [{ type: "text", value: "목차" }],
          },
          result.map,
        ],
        data: {
          hProperties: { className: "toc" },
        },
      },
      ...markdownAST.children,
    ];
  }

  return markdownAST;
};

module.exports = ({ markdownAST }, pluginOptions) => {
  return transformer(markdownAST, pluginOptions);
};

// plugins/gatsby-remark-toc/package.js
{
  "name": "gatsby-remark-toc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

// gatsby-config.ts

// ...

const config: GatsbyConfig = {
  // ...
  plugins: [
    // ...
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        // ...
        gatsbyRemarkPlugins: [
          "gatsby-remark-toc",
          "gatsby-remark-autolink-headers",
          // ...
        ],
      },
    },
  ],
};

// src/components/MdxContent.tsx
// 마크다운 본문을 감싸고 있는 컴포넌트다.

import styled from "../themes";

const MdxContent = styled.div`
  /* ... */

  /*
    입맛에 맞게 스타일 지정을 해주자
  */
  .toc {
    margin: 0 16px 16px;
    padding: 16px 0 0 16px;
    background-color: #1a1a1a;
    > h3 {
      margin: 0;
      font-size: 1.125rem;
    }
    > ul {
      position: relative;
      margin: 0;
      padding: 8px 0 16px 20px;

      font-size: 1rem;
      list-style: none;

      a {
        color: #dddddd;
      }

      ul {
        list-style: none;
        padding-left: 30px;
      }
    }
  }

  /* ... */
`;

export default MdxContent;

// plugins/gatsby-remark-toc/index.js

// ...

const transformer = (markdownAST /*, pluginOptions*/) => {
  // ...

  if (result.map) {
    markdownAST.children = [
      // 마크다운 본문인 markdownAST 을 목차인 result.map 보다 앞으로 가져온다.
      // 그냥 앞으로 가져오는 게 아니라 <div class="md"></div> 로 감싸준다.
      {
        type: "parent",
        children: markdownAST.children,
        data: {
          hProperties: { className: "md" },
        },
      },
      // 목차는 이제 본문보다 뒤에 위치시킨다.
      {
        type: "parent",
        children: [
          {
            type: "heading",
            depth: 3,
            children: [{ type: "text", value: "목차" }],
          },
          result.map,
        ],
        data: {
          hProperties: { className: "toc" },
        },
      },
    ];
  }

  //...
};

// ...

// src/components/MdxContent.tsx

const MdxContent = styled.div`
  // ...

  // 마크다운 본문 전체를 감싸고 있던 컴포넌트는 flex 박스로 만든다.
  display: flex;
  flex-direction: column;

  // 마크다운 본문은 order 를 1 로 설정하고,
  // 목차는 order 를 0 으로 설정해준다.
  // 이러면 목차가 마크다운 본문보다 앞으로 이동하게 된다.
  > .md {
    order: 1;
  }
  > .toc {
    order: 0;

    // ...
  }
  // ...
`;

export default MdxContent;