reopt designreopt design
DocsExploreToolsPricingBuilder
Start
Overview
Start
Next.js 설치
Private install
Core Concepts
아키텍처
Composition Patterns
Accessibility
Keyboard Patterns
Styling
Theme System
Advanced Patterns
Build & Operate
Skills
AI Integration
CLI (opt surface add)
Dependency Graph
Tools
Canvas Catalog
Theme Builder
Form Builder
Templates
Templates
Releases
Release Notes
Oopt-ui
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

TeamMemberList

shell

팀원 목록 컴포넌트. 온라인 상태, 다양한 레이아웃(list, compact, avatars-only) 지원.

컴포넌트 의존 관계

깊이
▲ USED BY (1)▼ USES (1)task-dashboardTeamMemberListavatar
100%

리스트 레이아웃 (기본)

팀원

2/5 온라인

컴팩트 레이아웃

팀원

아바타만 표시

팀원

김이박최정

최대 표시 제한

팀원

2/5 온라인

테스트 커버리지

2026년 2월 4일

생성된 테스트 결과를 찾지 못했습니다.

TeamMemberList 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

TeamMemberList Props

Prop타입기본값설명
members*TeamMemberDef[]—팀원 배열. { id, name, email, avatar?, role?, status? }
titlestring"팀원"섹션 제목
layout"list" | "compact" | "avatars-only""list"레이아웃 모드
maxDisplaynumber—최대 표시 인원
onMemberClick(member: TeamMemberDef) => void—팀원 클릭 핸들러

Import

tsx
import { TeamMemberList } from "@reopt-ai/opt-ui";

키보드 동작

키동작
↑ ↓팀원 간 이동
Enter팀원 선택