05. 튜토리얼 정리와 메뉴 구성

1. 기본 튜토리얼 삭제

위치	삭제한 것
docs/	tutorial-basics/, tutorial-extras/, 기본 intro.md
최상위	blog/ 전체
src/pages/	index.js, index.module.css, markdown-page.md
src/components/	HomepageFeatures/

src/css/custom.css 와 static/ 은 남겨 둔다.

2. docusaurus.config.js 변경

  presets: [
    [
      'classic',
      ({
        docs: {
          routeBasePath: '/',          // 문서를 사이트 첫 화면으로
          sidebarPath: './sidebars.js',
          showLastUpdateTime: true,    // 문서 하단에 마지막 수정일 표시
        },
        blog: false,                   // 블로그 끄기
        theme: {
          customCss: './src/css/custom.css',
        },
      }),
    ],
  ],

상단 메뉴(navbar):

        items: [
          {type: 'docSidebar', sidebarId: 'securitySidebar', position: 'left', label: 'Security'},
          {type: 'docSidebar', sidebarId: 'itSidebar', position: 'left', label: 'IT'},
          {
            href: 'https://github.com/InseokJeon-Sec/SecureNomad',
            label: 'GitHub',
            position: 'right',
          },
        ],

3. sidebars.js

docs 아래 폴더 하나가 사이드바 하나가 되도록 연결한다.

sidebars.js

const sidebars = {
  securitySidebar: [{type: 'autogenerated', dirName: 'security'}],
  itSidebar: [{type: 'autogenerated', dirName: 'it'}],
};

export default sidebars;

4. 현재 문서 구조

docs/
├── intro.md                         # 첫 화면 (slug: /)
├── security/
│   └── overview.md
└── it/
    ├── overview.md
    └── docusaurus-setup/            # IT > Docusaurus Setup
        ├── _category_.json
        ├── 01-environment.md
        ├── 02-create-project.md
        ├── 03-github-repository.md
        ├── 04-github-pages-deploy.md
        ├── 05-site-structure.md
        └── troubleshooting/
            ├── _category_.json
            └── 01 ~ 08 에러별 문서

5. 구조 규칙

상단 메뉴(navbar)   ← docusaurus.config.js + sidebars.js
  └ 사이드바        ← docs 아래 최상위 폴더 (security, it)
      └ 카테고리    ← 하위 폴더 (접히는 메뉴)
          └ 문서    ← .md 파일

카테고리 이름 / 순서: _category_.json

docs/it/docusaurus-setup/_category_.json

{
  "label": "Docusaurus Setup",
  "position": 2,
  "collapsed": false,
  "link": {
    "type": "generated-index",
    "description": "구축 과정 기록"
  }
}

항목	의미
label	메뉴에 보이는 이름
position	순서 (작을수록 위)
collapsed	처음에 접힘 여부
link.generated-index	카테고리 클릭 시 하위 문서 목록 페이지 자동 생성

문서 이름 / 순서: front matter

---
title: XSS (Cross-Site Scripting)
sidebar_label: XSS
sidebar_position: 1
---

상단 메뉴 추가 방법

1. docs/새폴더/ 에 문서를 최소 1개 만든다 (비어 있으면 빌드 에러)
2. sidebars.js 에 새Sidebar: [{type: 'autogenerated', dirName: '새폴더'}],
3. config navbar.items 에 {type: 'docSidebar', sidebarId: '새Sidebar', position: 'left', label: '메뉴명'},

:::tip 이름 규칙

• 폴더·파일 이름은 영문 소문자 + 하이픈 (URL이 된다)
• 화면에 보이는 이름은 label, title, sidebar_label 로 지정
• 파일 앞의 숫자(01-)는 정렬용이며 URL에서는 자동으로 빠진다
• 폴더를 옮기면 URL이 바뀌므로 고정하고 싶은 문서는 front matter에 slug 지정 :::

6. 문서 업데이트 루틴

npm start          # 작성하면서 미리보기 (localhost:3000)
npm run build      # push 전 에러 확인

이후 GitHub Desktop에서 Commit to main → Push origin. 2~3분 뒤 사이트에 반영된다.