feat: add ExampleBadge component for per-example test status

- Add ExampleBadge component with pass/fail/pending status
- Support clickable link to GitHub test file with line number
- Register component in MDXComponents for MDX usage
- Apply example badge to what-is-t-ruby.md as demo

Usage: <ExampleBadge status="pass" testFile="spec/.../file_spec.rb" line={23} />

Author: yhk1038

i18n/ko/docusaurus-plugin-content-docs/current/introduction/what-is-t-ruby.md

@@ -4,6 +4,8 @@ title: T-Ruby란?
 description: T-Ruby 소개 - Ruby를 위한 TypeScript 스타일 타입 시스템
 ---
 
+<DocsBadge />
+
 # T-Ruby란?
 
 T-Ruby는 Ruby에 TypeScript 스타일의 타입 문법을 도입하는 새로운 접근 방식입니다. TypeScript가 JavaScript에 하는 역할을 Ruby에도 가져옵니다.
@@ -12,7 +14,9 @@ T-Ruby는 Ruby에 TypeScript 스타일의 타입 문법을 도입하는 새로
 
 TypeScript가 JavaScript에 타입 안전성을 추가하듯이, T-Ruby는 Ruby에 동일한 기능을 제공합니다. `.trb` 파일에 타입 주석이 포함된 Ruby 코드를 작성하면, T-Ruby가 이를 순수한 Ruby 코드와 RBS 타입 정의로 컴파일합니다.
 
-```ruby
+<ExampleBadge status="pass" testFile="spec/docs_site/pages/introduction/what_is_t_ruby_spec.rb" line={23} />
+
+```trb
 # 입력: hello.trb
 def greet(name: String): String
   "안녕하세요, #{name}!"
@@ -30,7 +34,7 @@ end
 user = find_user(123)
 ```
 
-```ruby
+```rbs
 # 출력: hello.rbs (RBS 타입 정의)
 def greet: (String) -> String
 ```
@@ -41,7 +45,9 @@ def greet: (String) -> String
 
 T-Ruby의 타입 문법은 TypeScript에서 직접 영감을 받았습니다. TypeScript를 사용해본 경험이 있다면, T-Ruby도 바로 이해할 수 있습니다.
 
-```ruby
+<ExampleBadge status="pass" testFile="spec/docs_site/pages/introduction/what_is_t_ruby_spec.rb" line={35} />
+
+```trb
 # Union 타입
 id: String | Integer = "user-123"
 

src/components/ExampleBadge/index.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { BadgeCheck, X, ExternalLink } from 'lucide-react';
+
+interface ExampleBadgeProps {
+  /** 테스트 통과 여부 */
+  status: 'pass' | 'fail' | 'pending';
+  /** 테스트 파일 경로 (예: spec/docs_site/pages/introduction/what_is_t_ruby_spec.rb) */
+  testFile?: string;
+  /** 테스트 파일 내 라인 번호 */
+  line?: number;
+  /** 예제 ID 또는 설명 (선택) */
+  id?: string;
+}
+
+const GITHUB_REPO = 'https://github.com/type-ruby/t-ruby/blob/main';
+
+export const ExampleBadge: React.FC<ExampleBadgeProps> = ({
+  status,
+  testFile,
+  line,
+  id
+}) => {
+  const statusConfig = {
+    pass: {
+      icon: <BadgeCheck size={12} />,
+      text: 'Verified',
+      bgColor: 'rgba(34, 197, 94, 0.1)',
+      textColor: '#16a34a',
+      borderColor: 'rgba(34, 197, 94, 0.2)',
+    },
+    fail: {
+      icon: <X size={12} />,
+      text: 'Failed',
+      bgColor: 'rgba(239, 68, 68, 0.1)',
+      textColor: '#dc2626',
+      borderColor: 'rgba(239, 68, 68, 0.2)',
+    },
+    pending: {
+      icon: <BadgeCheck size={12} style={{ opacity: 0.5 }} />,
+      text: 'Pending',
+      bgColor: 'rgba(156, 163, 175, 0.1)',
+      textColor: '#6b7280',
+      borderColor: 'rgba(156, 163, 175, 0.2)',
+    },
+  };
+
+  const config = statusConfig[status];
+  const testUrl = testFile
+    ? `${GITHUB_REPO}/${testFile}${line ? `#L${line}` : ''}`
+    : undefined;
+
+  const badge = (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '3px',
+        padding: '2px 6px',
+        borderRadius: '3px',
+        fontSize: '10px',
+        fontWeight: 500,
+        backgroundColor: config.bgColor,
+        color: config.textColor,
+        border: `1px solid ${config.borderColor}`,
+        cursor: testUrl ? 'pointer' : 'default',
+        textDecoration: 'none',
+        transition: 'opacity 0.2s',
+      }}
+      title={testUrl ? `View test: ${testFile}${line ? `:${line}` : ''}` : undefined}
+    >
+      {config.icon}
+      <span>{config.text}</span>
+      {testUrl && <ExternalLink size={9} style={{ marginLeft: 1, opacity: 0.7 }} />}
+    </span>
+  );
+
+  if (testUrl) {
+    return (
+      <a
+        href={testUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ textDecoration: 'none' }}
+      >
+        {badge}
+      </a>
+    );
+  }
+
+  return badge;
+};
+
+export default ExampleBadge;

src/theme/MDXComponents.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import MDXComponents from '@theme-original/MDXComponents';
+import { DocsBadge } from '@site/src/components/DocsBadge';
+import { VerifiedBadge } from '@site/src/components/VerifiedBadge';
+import { ExampleBadge } from '@site/src/components/ExampleBadge';
+
+export default {
+  ...MDXComponents,
+  DocsBadge,
+  VerifiedBadge,
+  ExampleBadge,
+};