Integrations Hub

쓰는 곳#

연동 관리 화면 — 메일·알림 채널, 외부 API 키, 데이터 소스 커넥터처럼 “여러 모듈을 등록하고, 각각의 연결 상태를 보며, 연결·구성·테스트하고, 사용량을 점검하는” 운영자 화면에 씁니다.

적용 현황#

기준서

완료

포털 적용

오너 콘솔 /admin의 이메일 연동 관리(제공자 행·상태 뱃지·테스트 발송·작업 메뉴)가 이 패턴의 도메인 특화 인스턴스

재사용 구현

포털 조합 데모 있음 — 패키지 API는 없음(패턴은 컴포넌트 조합)

배포 패키지

미포함(SearchField·Badge·IconTile·DropdownMenu·EmptyState 조합)

다음 조치

데이터 소스·웹훅 등 비-메일 커넥터로 반복 적용

구조#

정규 해부 — 위에서 아래로 항상 같은 순서입니다.

커맨드바

검색이 첫 요소. 모듈이 많으면 검색으로 좁힌다

카테고리 섹션

알림 채널·데이터 소스·외부 API처럼 묶되, 헤더가 모듈명보다 강하지 않게

연동 행

제공자 아이콘·이름·설명 — 카드 그리드가 아니라 스캔용 행/표

연결 상태

연결됨·키 필요·오류·미테스트를 뱃지로. 색만이 아니라 라벨로 전달

기본 액션

연결/구성이 행의 주요 액션. 테스트는 그 곁에 보조로

테스트 결과

헬스 테스트 성공/실패를 검증한 연동 바로 아래에 인라인으로

웹 규칙#

스캔 우선

모듈이 소수를 넘으면 list/table 구조로 — 상태·호출·성공률·마지막 사용·액션은 안정된 위치를 유지

주요 액션 노출

연결·구성·테스트는 행에 보이게. 저빈도 액션만 오버플로 메뉴로

구성 모달

자격증명 입력은 Modal + Input RULES를 따른다 — 비밀 값은 Input revealable(마스킹+표시 토글)

카테고리 위계

그룹 헤더는 모듈명보다 약한 톤. 그룹이 콘텐츠를 압도하지 않게

모바일 규칙#

검색 우선

검색이 여전히 첫 요소. 카테고리 필터는 접힘/BottomSheet

행→카드

모듈 행은 명확한 라벨을 단 스택 카드로 전환한다

액션 도달성

연결·테스트 액션은 카드 안에서 계속 보이고 닿을 수 있게(메뉴 깊이에 숨기지 않음)

사용량 접기

호출·성공률 같은 보조 수치는 접고 상태·주요 액션을 남긴다

상태#

연결됨(active)

성공 뱃지 + 사용량 수치. 주요 액션은 ‘구성’

키 필요(needs key)

중립 뱃지 + ‘연결’ 유도. 테스트는 실패로 안내

오류(failed)

오류 뱃지 + 테스트 실패 사유(자격증명·엔드포인트) 인라인

미테스트(untested)

중립 뱃지. 사용량은 대시(—)로 비워 둔다

검색 무결과(filtered-empty)

EmptyState로 키워드 재시도 안내

카테고리 접힘

빈 카테고리는 렌더하지 않고, 그룹 순서는 항상 고정

접근성#

• 각 연동 행의 작업 메뉴는 모듈명을 포함한 aria-label을 갖습니다(“지도 API 작업 메뉴”).
• 상태는 뱃지 라벨로 전달합니다 — 색만으로 상태를 표현하지 않습니다(비색 의존 금지).
• 헬스 테스트 결과는 role="status"로 스크린리더에 알립니다(검증한 행 곁에서).
• 사용량 수치는 dl(정의 목록)로 라벨↔값을 프로그램적으로 묶습니다.
• 카테고리 헤더는 문서 제목 위계를 지키고, 모듈명보다 약한 톤이되 별도 landmark로 그룹을 구분합니다.

사용 컴포넌트#

SearchField · Input(비밀 값 revealable) · Badge · IconTile · Button · DropdownMenu · Modal · EmptyState

검수 기준#

카드 그리드 금지

비교 가능한 모듈이 여럿이면 3열 카드 그리드가 아니라 행/표로 스캔되게

액션 정렬

연결·테스트 액션이 행마다 같은 위치에서 어긋나지 않음

카테고리 톤

카테고리 라벨이 모듈명보다 강한 톤이 아님

주요 액션 노출

기본 설정(연결·구성)이 말줄임 메뉴에 숨지 않음

상태 가시성

핵심 상태가 작은 메타 텍스트로만 표시되지 않고 뱃지로 드러남

참고 기준#

• Material Design 3 — Lists
• Apple Human Interface Guidelines — Managing accounts