StatusBadge

목적

상태 값을 간단한 UI 배지로 표현하는 컴포넌트입니다.

폴더 구조

src/components/status-badge
├─ plugins/
│  ├─ index.ts
│  └─ status-badge.plugin.ts
├─ samples/
│  └─ Sample.tsx
├─ types/
│  ├─ index.ts
│  └─ status-badge.ts
├─ StatusBadgeUI.tsx
└─ index.ts

구성 원칙

StatusBadgeUI.tsx: 실제 UI 렌더링
types/: props, plugin input 타입 관리
plugins/: 외부 입력 변환, props 후처리, 커링 플러그인 관리
samples/Sample.tsx: 대표 샘플

공통 플러그인 제네릭은 src/types/component-plugin.ts 에서 관리합니다.

기본 Props

type StatusBadgeProps = {
  label: string;
  tone?: 'success' | 'warning' | 'error' | 'processing' | 'default';
};

Plugin Input 예시

type StatusBadgePluginInput = {
  text: string;
  status?: 'ready' | 'working' | 'blocked' | 'done';
};

공통 Plugin 타입

type PropsPlugin<TProps> = (props: TProps) => TProps;

type ComponentPlugin<TInput, TProps = TInput> = (input: TInput) => TProps;

type ComponentPluginFactory<TArgs extends unknown[] = [], TInput = unknown, TProps = TInput> =
  (...args: TArgs) => ComponentPlugin<TInput, TProps>;

PropsPlugin<TProps> 는 질문하신 plugin<T>(T props) => T 형태를 직접 표현합니다.
ComponentPlugin 과 ComponentPluginFactory 는 입력 타입과 UI props 타입이 다르거나, 커링이 필요한 경우까지 확장하기 위한 타입입니다.

여러 Plugin 합성

function plugins<TProps>(
  props: TProps,
  pluginList: ReadonlyArray<PropsPlugin<TProps>>,
): TProps

plugins<T>(props, Plugin[]) 형태로 여러 props 플러그인을 순서대로 적용합니다.

Plugin 구현 예시

const mapStatusBadgeInputToProps: ComponentPlugin<
  StatusBadgePluginInput,
  StatusBadgeProps
> = (input) => ({
  label: input.text,
  tone: input.status ? statusToneMap[input.status] : 'default',
});

const createStatusBadgeTonePlugin: ComponentPluginFactory<
  [options?: StatusBadgePluginOptions],
  StatusBadgeProps
> = (options) => (props) => ({
  ...props,
  tone: props.tone === 'default' ? options?.fallbackTone ?? 'default' : props.tone,
});

Sample 활용 목적

API 게시판에서 예제 UI 노출
문서 페이지에서 동작 방식 설명
QA 시 컴포넌트 빠른 확인

확장 방향

map input -> props 와 props -> props 플러그인 체인을 조합
plugins(props, pluginList) 로 여러 후처리 플러그인 적용
기본형은 PropsPlugin<TProps> 로, 확장형은 ComponentPluginFactory 로 표준화
샘플 자동 수집 페이지 구성

2.7 KiB Executable File Raw Blame History