ai-code-app/docs/components/component-addition-suggestions.md

신규 컴포넌트 후보 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, 적용 위치, 확장 포인트를 함께 기록