Design

Components

실제로 쓰이는 것만 있으니, 새 UI 는 유틸을 다시 조합하지 말고 여기서 고릅니다.

텍스트

제목 스케일은 Heading 이, 구역 이름은 SectionLabel 이 소유합니다.

Heading level={1|2|3}

제목 1

제목 2

제목 3

SectionLabel · size='sm' | 'base'

관련 글

주제

2026

DateText · <time> + tabular-nums
CodeLabel
omb-gray-4

링크·이동

크기는 호출부가 정합니다 — 컴포넌트는 font-size 를 상속합니다.

TextLink · 내부 / external
본문 속 내부 링크 와 외부 링크.
RouteLinkButton · type='back' | 'move'
홈검색
SectionHeader · 섹션명 + 모두 보기
연재모두 보기
TagList · → /search?tag=

목록

행 모양(PostRowItem)은 도메인 타입이 아니라 href·title·date 원시 props 입니다 — 그래서 이 패키지가 도메인을 몰라도 됩니다.

PostRow
PostList · heading + divided

관련 글

PostList · 비었을 때 (emptyText 없으면 침묵)

아직 글이 없습니다.

PostNav · prev / next

글 속 도식

코드블록 흐름도를 글의 일부처럼 읽히게 만드는 MDX 후보 컴포넌트입니다.

FlowDiagram · Stateful Session
Stateful Session

Cookie에는 식별자만 있고, 실제 로그인 상태는 서버 저장소에 있습니다.

  1. Browsersession_id=abc123

    브라우저는 의미 없는 식별자만 보관한다.

  2. Server

    session_id로 실제 세션을 조회한다.

  3. Redis / DBabc123 -> user

    로그인 상태는 서버 저장소에 있다.

입력·토글

상태를 가진 것들은 client 컴포넌트입니다. 실물 동작은 검색 페이지에서 확인할 수 있습니다.

  • · SearchField — 밑줄 한 줄, 포커스 시 밑줄이 진해집니다
  • · TagToggle — 켜짐을 언더라인으로, aria-pressed 로 전달
  • · IconButton — 아이콘은 작아도 클릭 영역은 넉넉하게(-m-2 p-2), aria-label 필수
  • · ThemeToggle · Entrance · SearchablePostList · ForceGraphCanvas