131 lines
6.2 KiB
Markdown
Executable File
131 lines
6.2 KiB
Markdown
Executable File
# 신규 컴포넌트 후보 2차 정리
|
|
|
|
## 신규 컴포넌트 후보 7차 제안
|
|
|
|
### 목적
|
|
|
|
현재 `release` 브랜치 기준으로 기존 컴포넌트와 겹치지 않는 신규 공통 컴포넌트 후보를 제안합니다.
|
|
|
|
이 글은 검토용 plan 게시판 작성만 수행하며, 자동화 접수는 하지 않고 미접수 상태로 유지합니다.
|
|
|
|
### release 기준 확인
|
|
|
|
- 이미 존재: Dashboard Report Card, Progress/MultiProgress, Search Command, Popup/Select/CheckCombo 입력, Markdown Preview, Previewer/Codex Diff, Status Badge, Window, DataListTable, EmbeddedMap, TextMemo/GPS/API 샘플 위젯
|
|
- 제안 방향: Plan/Board/History 화면에서 반복될 가능성이 높지만 아직 공통 컴포넌트로 분리되지 않은 조합형 UI
|
|
|
|
### 신규 후보
|
|
|
|
#### 1. Query Filter Builder UI
|
|
|
|
복수 조건 필터를 행 단위로 추가하고 저장할 수 있는 필터 빌더 컴포넌트입니다.
|
|
|
|
- 적용 위치: Plan Board 고급 필터, History 검색, Board 검색
|
|
- 주요 props: `fields`, `operators`, `value`, `onChange`, `presets`, `compact`
|
|
- 기대 효과: 화면마다 흩어질 수 있는 필터 조건 UI를 일관된 패턴으로 정리
|
|
|
|
#### 2. Timeline Activity Feed UI
|
|
|
|
작업 상태 변경, 접수, release/main 반영, 오류 이벤트를 시간순으로 보여주는 활동 피드 컴포넌트입니다.
|
|
|
|
- 적용 위치: Plan 상세, History 상세, 자동화 실행 이력
|
|
- 주요 props: `items`, `groupByDate`, `statusResolver`, `dense`, `renderMeta`
|
|
- 기대 효과: 로그성 텍스트를 추적 가능한 UI로 전환하고 최근 변경 맥락을 빠르게 파악
|
|
|
|
#### 3. Evidence Attachment Strip UI
|
|
|
|
스크린샷, diff, 로그, 링크 같은 증빙 자료를 한 줄 카드 목록으로 노출하는 첨부 스트립 컴포넌트입니다.
|
|
|
|
- 적용 위치: Plan 검증 증빙, Preview 결과, History 상세
|
|
- 주요 props: `attachments`, `onPreview`, `onDownload`, `maxVisible`, `variant`
|
|
- 기대 효과: 증빙 자료 표시와 미리보기 진입점을 공통화
|
|
|
|
### 우선순위 제안
|
|
|
|
1. Query Filter Builder UI
|
|
2. Timeline Activity Feed UI
|
|
3. Evidence Attachment Strip UI
|
|
|
|
우선 1번을 먼저 검토하는 것이 좋습니다. Plan Board와 History에서 필터 조건이 계속 늘어날 가능성이 높아 재사용 효과가 가장 큽니다.
|
|
|
|
## 목적
|
|
|
|
기존에 개발 완료된 `FormField`, `StateKit`, `DataListTable`과 이미 개발 접수된 `Action Toolbar UI`, `Detail Inspector Panel`, `Timeline / Activity Log UI`, `Confirm Dialog UI`, `Notification Toast / Action Feedback UI`, `Date Range Input`, `File Attachment List`, `Component Usage Doc Card`, `Split Pane Layout`은 이번 후보에서 제외합니다.
|
|
|
|
이번 문서는 현재 코드베이스와 기존 Board/Plan 접수 이력에 없는 신규 공통 컴포넌트만 다시 추려 이후 Plan 후속 작업 후보를 만드는 목적입니다.
|
|
|
|
## 제외 기준
|
|
|
|
- 이미 구현 완료된 공통 컴포넌트는 중복 후보로 다시 올리지 않음
|
|
- 이미 Board/Plan에서 개발 접수된 컴포넌트는 신규 후보에서 제외
|
|
- 앱 전용 화면 조합보다 여러 기능에서 재사용 가능한 공통 UI를 우선 선정
|
|
|
|
## 신규 후보
|
|
|
|
### 1. Drawer / Side Sheet UI
|
|
|
|
본문 흐름을 끊지 않고 우측 또는 하단에서 보조 편집 화면을 여는 컴포넌트입니다.
|
|
|
|
- 적용 위치: Plan 상세 보조 편집, 설정 화면, 모바일 상세 패널
|
|
- 주요 props: `open`, `placement`, `width`, `title`, `footer`, `onClose`
|
|
- 기대 효과: 전체 화면 전환 없이 보조 작업을 열고 닫는 패턴을 공통화
|
|
|
|
### 2. Description List / Key Value Summary UI
|
|
|
|
상세 정보 화면에서 라벨과 값을 읽기 전용으로 정리하는 컴포넌트입니다.
|
|
|
|
- 적용 위치: Plan 메타 정보, 방문 이력 상세, 앱 설정 요약
|
|
- 주요 props: `items`, `columns`, `size`, `labelWidth`, `copyable`
|
|
- 기대 효과: 상세 화면마다 반복되는 메타 정보 레이아웃을 줄임
|
|
|
|
### 3. Stepper / Process Flow UI
|
|
|
|
등록, 작업중, `release` 반영, `main` 반영 같은 단계를 순서형으로 보여주는 컴포넌트입니다.
|
|
|
|
- 적용 위치: Plan 상태 흐름, 배포 진행 표시, 자동화 단계 요약
|
|
- 주요 props: `steps`, `current`, `status`, `direction`, `compact`
|
|
- 기대 효과: 텍스트 상태 나열보다 현재 단계와 다음 단계를 직관적으로 전달
|
|
|
|
### 4. Tag Input UI
|
|
|
|
여러 키워드나 라벨을 직접 추가하고 삭제하는 입력 컴포넌트입니다.
|
|
|
|
- 적용 위치: Board 태그, 검색 조건 저장, 증적 분류, 빠른 필터 조합
|
|
- 주요 props: `value`, `suggestions`, `maxTags`, `allowCustom`, `onChange`
|
|
- 기대 효과: 다중 조건 입력을 `select`와 별도로 다뤄 반복 필터 구성이 쉬워짐
|
|
|
|
### 5. Breadcrumb / Context Path UI
|
|
|
|
현재 위치와 상위 경로를 짧게 보여주는 탐색 보조 컴포넌트입니다.
|
|
|
|
- 적용 위치: Docs 상세, Components 샘플 상세, History 상세 진입 경로
|
|
- 주요 props: `items`, `separator`, `compact`, `onNavigate`
|
|
- 기대 효과: 깊은 메뉴 구조에서 현재 위치 파악과 상위 이동 비용을 낮춤
|
|
|
|
### 6. Property Grid UI
|
|
|
|
설정값이나 옵션 목록을 2열 또는 다열로 배치해 빠르게 편집하는 설정형 컴포넌트입니다.
|
|
|
|
- 적용 위치: 앱 설정, 자동화 설정, 위젯 옵션 편집
|
|
- 주요 props: `sections`, `fields`, `columns`, `readonly`, `onChange`
|
|
- 기대 효과: 설정 폼을 긴 세로 나열 대신 밀도 있게 구성 가능
|
|
|
|
## 권장 진행 순서
|
|
|
|
1. `Description List / Key Value Summary UI`
|
|
2. `Stepper / Process Flow UI`
|
|
3. `Drawer / Side Sheet UI`
|
|
4. `Tag Input UI`
|
|
5. `Property Grid UI`
|
|
6. `Breadcrumb / Context Path UI`
|
|
|
|
## 검증 기준
|
|
|
|
- 모바일 폭에서 `drawer`, `stepper`, `property grid`가 가로 넘침 없이 동작하는지 확인
|
|
- Plan 상세와 설정 화면에 붙였을 때 기존 `antd` 기본 컴포넌트 조합보다 반복 코드가 줄어드는지 확인
|
|
- 읽기 전용 화면과 편집 화면에서 같은 컴포넌트를 무리 없이 재사용할 수 있는지 확인
|
|
|
|
## 메모
|
|
|
|
- 다음 후보 구현 시에는 `samples/BaseSample.tsx`, `samples/Sample.tsx`, 필요 시 `plugins/*.plugin.ts`를 같은 묶음으로 준비
|
|
- Docs 문서에는 목적, 주요 props, 적용 위치, 확장 포인트를 함께 기록
|