[Nextra] FileTree, Steps, Mermaid사용

Nextra에서 FileTree, Steps, Mermaid사용

---

FileTree 컴포넌트의 사용방법

import { FileTree } from "nextra-theme-docs";

<FileTree>
  <FileTree.Folder name="pages" defaultOpen>
    <FileTree.File name="_meta.json" />
    <FileTree.File name="목록1.mdx" />
    <FileTree.File name="목록2.mdx" />
    <FileTree.File name="목록3.mdx" />
  </FileTree.Folder>
</FileTree>

출력결과

FileTree 컴포넌트 출력값

---

Steps 컴포넌트의 사용방법

import { Steps } from "nextra-theme-docs";
 
<Steps>

### Step1

Step1의 내용이다.

### Step2

Step2의 내용이다.

</Steps>

출력결과

Steps 컴포넌트 출력값

---

Mermaid

```mermaid
graph TD;
subgraph AA [Consumers]
A[Mobile app];
B[Web app];
C[Node.js client];
end
subgraph BB [Services]
E[REST API];
F[GraphQL API];
G[SOAP API];
end
Z[GraphQL API];
A --> Z;
B --> Z;
C --> Z;
Z --> E;
Z --> F;
Z --> G;
```

출력결과

Mermaid 출력값