파일명에 배지 추가하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

DevOps

대상자

Fumadocs 프로젝트를 사용하는 개발자, TypeScript/JSX 기반의 문서 시스템 구축자

핵심 요약

• frontmatterSchema 확장으로 new 프로퍼티 추가 (z.boolean().default(false))
• lib/source.ts → lib/source.tsx 파일명 변경 후 JSX 지원
• attachFile 함수에서 new: true 조건 시 파일명 레이블 추가
• new: true 프론트메터 사용 예시 포함

섹션별 세부 요약

1. 프론트메터 스키마 확장

• source.config.ts 파일에 new: boolean 속성 추가
• frontmatterSchema.extend 사용하여 기본값 false 설정
• defineDocs 함수 내 schema 프로퍼티에 확장된 스키마 적용

2. 소스 파일 수정

• lib/source.ts 파일명을 lib/source.tsx로 변경 (JSX 지원)
• loader 함수 내 attachFile 메서드 정의
• file.data.data.new 값이 true일 경우 node.name에 JSX 레이블 추가

3. 프론트메터 사용 예시

• new: true 프로퍼티를 frontmatter에 추가
• 예시:

```yaml

title: "File Upload"

description: "Animated and interactive file upload component."

new: true

```

• 결과: 파일명 뒤에 배지가 추가된 상태로 표시

결론

• new 프로퍼티를 사용하여 파일명 배지 추가 가능
• JSX 지원을 위해 .tsx 확장자 사용 필수
• attachFile 함수 내 조건문으로 레이블 동적 생성
• 문서 버전 관리 및 중요성 표시에 유용한 기능