@newtil/components

Appearance

Prose — 본문 렌더링 ​

마크다운이나 WYSIWYG 에디터로 작성된 HTML 본문을 일관된 스타일로 표시합니다. 공지사항, 게시글, 블로그 등 읽기 콘텐츠의 표준 컴포넌트입니다.

@newtil/editor로 작성 → n-prose로 표시 구조를 이루며, 편집 화면과 보기 화면의 스타일이 동일하도록 설계되었습니다.

기본 사용 ​

html
<article class="n-prose" v-html="contentHtml"></article>

React/Next.js에서는 dangerouslySetInnerHTML을 사용합니다.

tsx
<article className="n-prose" dangerouslySetInnerHTML={{ __html: contentHtml }} />

공지사항 제목

본문 내용은 여기에 들어갑니다. 강조, 기울임, 링크가 모두 자연스럽게 표시됩니다.

세부 항목

  • 리스트 항목 하나
  • 리스트 항목 둘

인용문도 기본 스타일이 제공됩니다.

소스 코드 보기

타입 ​

타입설명
(기본)body 크기
prose:sm작은 본문 — 캡션, 설명문
prose:lg큰 본문 — 블로그, 레터

caption 크기의 본문. 보조 설명에 사용.

소스 코드 보기

body-lg 크기. 장문 읽기에 편함.

소스 코드 보기

지원 요소 ​

모든 요소는 디자인 토큰을 참조하며 다크모드에 자동 대응합니다.

제목 (h1~h6) ​

제목은 위·아래 여백 모두 있고, 위쪽 여백이 더 큽니다. 섹션 구분이 자연스럽게 이루어집니다.

h1 — heading-lg

h2 — heading-md

h3 — heading-sm

h4 — body-lg

h5 — body
h6 — body-sm / muted
소스 코드 보기

문장 (p) ​

문장은 아래쪽 여백만 있습니다 (제목 바로 아래에 붙을 수 있도록).

텍스트 강조 ​

굵은 글씨, 기울임, 밑줄, 취소선, 형광펜, 인라인 코드, 작은 글씨, Cmd + K 키 표시.

소스 코드 보기

링크 ​

secondary 색상 + 밑줄. hover/active 시 어두워집니다.

소스 코드 보기

리스트 ​

ul (disc), ol (decimal), 중첩 시 circle → square. li::marker 색도 토큰 기반.

  • 항목 1
  • 항목 2
    • 중첩 항목 (circle)
    • 중첩 항목 둘
      • 3단 중첩 (square)
  • 항목 3
소스 코드 보기

인용 (blockquote) ​

primary 색 왼쪽 보더 + --color-surface-1 배경. 내부 p 여러 개 지원.

좋은 디자인은 눈에 띄지 않는다.

— Dieter Rams

소스 코드 보기

코드 ​

인라인은 --color-surface-2 배경 + --color-danger 텍스트. pre는 --color-surface-inverse 배경.

인라인 code 와 블록 코드:

function hello(name) {
  console.log(`Hello, ${name}!`);
}
소스 코드 보기

이미지와 figure ​

max-width: 100%, height: auto로 반응형. figcaption 지원.

html
<figure>
  <img src="..." alt="..." />
  <figcaption>이미지 설명</figcaption>
</figure>

표 (간이) ​

마크다운 변환 결과의 표를 자연스럽게 표시합니다. 본격적인 데이터 표는 n-table 사용을 권장합니다.

패키지역할
@newtil/editor편집
@newtil/components표시
소스 코드 보기

가로줄, 키보드 표시 ​

구분선:

키 조합: Shift + Tab

소스 코드 보기

첫·마지막 요소 여백 ​

.n-prose > *:first-child는 margin-top: 0, *:last-child는 margin-bottom: 0 입니다. 컨테이너 여백과 이중으로 겹치지 않습니다.

html
<div style="padding: 2rem; background: #f0f0f0;">
  <article class="n-prose">
    <!-- 여기 h1 위쪽 여백 없음 -->
    <h1>제목</h1>
    <p>…</p>
    <!-- 여기 p 아래쪽 여백 없음 -->
  </article>
</div>

@newtil/editor와 짝 쓰기 ​

편집은 에디터로, 표시는 prose로. 같은 콘텐츠가 두 화면에서 동일하게 보입니다.

tsx
// 편집 화면
<NewtilEditor value={content} onChange={setContent} />

// 표시 화면
<article
  className="n-prose"
  dangerouslySetInnerHTML={{ __html: renderedHtml }}
/>

Copyright © 2026 newlecture