107 lines
2.7 KiB
Markdown
Executable File
107 lines
2.7 KiB
Markdown
Executable File
# StatusBadge
|
|
|
|
## 목적
|
|
|
|
상태 값을 간단한 UI 배지로 표현하는 컴포넌트입니다.
|
|
|
|
## 폴더 구조
|
|
|
|
```text
|
|
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
|
|
|
|
```ts
|
|
type StatusBadgeProps = {
|
|
label: string;
|
|
tone?: 'success' | 'warning' | 'error' | 'processing' | 'default';
|
|
};
|
|
```
|
|
|
|
## Plugin Input 예시
|
|
|
|
```ts
|
|
type StatusBadgePluginInput = {
|
|
text: string;
|
|
status?: 'ready' | 'working' | 'blocked' | 'done';
|
|
};
|
|
```
|
|
|
|
## 공통 Plugin 타입
|
|
|
|
```ts
|
|
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 합성
|
|
|
|
```ts
|
|
function plugins<TProps>(
|
|
props: TProps,
|
|
pluginList: ReadonlyArray<PropsPlugin<TProps>>,
|
|
): TProps
|
|
```
|
|
|
|
`plugins<T>(props, Plugin[])` 형태로 여러 props 플러그인을 순서대로 적용합니다.
|
|
|
|
## Plugin 구현 예시
|
|
|
|
```ts
|
|
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` 로 표준화
|
|
- 샘플 자동 수집 페이지 구성
|