Integration Rendering Smoke Test — 통합 렌더링 점검
이 문서는 빌드 또는 배포 후 한 페이지에서 사이트의 주요 MDX 요소가 정상적으로 렌더되는지 빠르게 점검하기 위해 작성된 통합 스모크 테스트입니다. 각 섹션은 중복을 제거하고 대표 요소만 포함하여 실제 운영 글과 혼합되지 않도록 구성되어 있습니다.
1. 타이포그래피와 헤딩
1.1 H3 예시
짧은 한 문장과 긴 문단을 함께 배치하여 줄바꿈, 행간, 다국어(한/영) 렌더링을 확인합니다. 인라인 코드(npm run build)와 강조(굵은 텍스트 / 기울임 텍스트)가 제대로 보이는지 확인하세요.
다음은 긴 한글 문단 예시입니다. 이 문단은 모바일과 데스크톱에서 줄바꿈과 단어 분리(하이픈 처리 포함), 문단 여백 및 타이포그래피를 점검하기 위해 일부러 길게 작성되었습니다. 문장 연결이 자연스러운지, 작은 화면에서 가독성이 유지되는지, 단어가 급격히 잘리는지 등을 반드시 확인하세요.
2. 인용문과 목록
인용문 예시: 이 인용구는 블록인용의 스타일(여백, 폰트, 인덴트)을 확인하기 위한 항목입니다.
- 순서 없는 목록 항목 A
- 순서 없는 목록 항목 B
- 중첩 목록 B.1
- 중첩 목록 B.2
- 순서 있는 목록 1
- 순서 있는 목록 2
- 순서 있는 목록 3
- 완료된 작업 예시
- 미완료 작업 예시
3. 표 (Markdown / HTML)
아래는 Markdown 표의 대표 예시입니다.
| 이름 | 타입 | 비고 |
|---|---|---|
| alpha | int | 기본 숫자 셀 |
| beta | string | 줄바꿈 테스트용 |
아래는 raw HTML 표로 렌더링 일관성을 확인합니다.
| 항목 | 값 |
|---|---|
| throughput | 1,200 req/s |
| latency | 12.3 ms |
4. 코드 블록 (언어별 대표)
Shell (bash)
# 빠른 확인용 명령 (예시)
echo "smoke test"
Python
# 간단한 피보나치 예시
from typing import Iterator
def fib(n: int) -> Iterator[int]:
a, b = 0, 1
for _ in range(n):
yield a
a, b = b, a + b
print(list(fib(6)))
JavaScript
// 간단한 비동기 fetch 예시
async function fetchData(url) {
const r = await fetch(url);
return r.json();
}
TypeScript
export function sum(a: number, b: number): number {
return a + b;
}
JSON
{ "feature": "smoke", "count": 3 }
긴 한 줄 (wrap/scroll 테스트)
this_is_a_very_long_line_example = "this_is_a_very_long_command_that_should_wrap_or_scroll_properly_without_breaking_layout_or_causing_horizontal_scroll_issues"
5. 이미지·Figure·Picture
다음은 마크다운 이미지 예시입니다.
다음은 figure와 figcaption 예시입니다.
아래는 picture 요소 예시입니다(반응형 소스 테스트).
6. 인터랙티브(Details) 및 Callout 대체
상세(Details) 영역 — 클릭해서 펼쳐보기
이 영역은 접기/펼치기 UI가 정상 동작하는지 확인하기 위한 섹션입니다. 내부에는 인라인 코드와 작은 코드 블록, 목록을 포함합니다.
- 세부 항목 A
- 세부 항목 B
echo "details 내용 표시됨"
Callout (주의): 이 박스는 Callout 스타일을 확인하기 위한 안전한 대체 요소입니다. 사이트에서 실제 Callout 컴포넌트를 제공하면 해당 컴포넌트로 대체해 주세요.
7. 링크 예시
- 외부 링크: OpenClaw 문서
- 내부 링크: 샘플 포스트
7.1 파일 트리 예시 (텍스트 코드 블록)
src/
components/
Callout.tsx
CodeBlock.tsx
pages/
index.tsx
8. Protected 설정 예시 (코드블록으로만 표기)
아래는 보호된 게시물의 frontmatter 예시입니다. 주의: 이 코드는 예시일 뿐이며 실제로 이 문서의 frontmatter를 변경하지 마십시오.
---
# 예시용 frontmatter (실제 적용 금지)
title: "Protected example (test)"
protected: true
passwordKey: "TEST_POST_KEY"
---
9. 최종 점검 체크리스트 (한글)
- 코드 블록이 언어별 하이라이팅으로 표시되는가?
- 이미지와 figure 캡션이 정상적으로 보이는가?
- details/summary와 callout(대체 박스)이 상호작용 가능한가?
- Markdown 표와 HTML 표가 동일한 디자인 규칙으로 렌더되는가?
- 긴 한 줄 코드에서 가로 스크롤 또는 줄바꿈 동작이 적절한가?
끝.
