API 키 관리

키 목록, 상태 표시, 행 동작, 삭제 확인을 한 화면에 담은 사례예요. 새 컴포넌트 없이 Core 조합만으로 만들었어요.

화면

목록은 Table, 상태는 subtle Badge, 행 동작은 ghost 아이콘 버튼 하나로 모았어요. primary 버튼은 머리글의 "API 키 만들기" 하나예요.

키는 만든 직후 한 번만 보여 줘요.

이름 바꾸기와 삭제는 행 끝의 메뉴로 모았어요. 삭제는 메뉴 맨 아래 구분선 뒤에 두고, 실행 전에 AlertDialog로 결과를 알려요. 끝나면 Toast로 결과를 짧게 알려요.

1. 행 끝 메뉴에서 삭제를 골라요

이름 바꾸기

키 복사

삭제

2. AlertDialog로 결과를 알리고 확인받아요

API 키를 삭제할까요?

이 키로 보내는 요청이 바로 실패해요. 삭제하면 되돌릴 수 없어요.

3. 끝나면 Toast로 결과를 알려요

API 키를 삭제했어요

staging 키로 보내는 요청은 이제 실패해요.

상태는 subtle Badge로목록에서는 subtle만 써요. solid는 꼭 눈에 띄어야 하는 한 곳에만 써서, 표가 알록달록해지지 않게 했어요.
행마다 버튼을 늘어놓지 않기행 끝에 동작 버튼을 여러 개 두면 표가 버튼으로 덮여요. 아이콘 버튼 하나(aria-label "더 보기")와 Menu로 묶었어요.
삭제는 두 번 확인메뉴에서 바로 지우지 않고 AlertDialog로 결과를 먼저 알려요. 바깥을 눌러도 닫히지 않고, 확인 버튼 문구는 동작 이름 그대로 "삭제"예요.
숫자는 오른쪽 정렬 + mono요청 수 열은 align="end"라 고정폭 글자로 자리가 맞아요.

로딩은 같은 표 배치의 Skeleton, 빈 상태는 EmptyState("API 키가 없어요"), 에러는 ErrorState("API 키를 불러오지 못했어요")로 그렸어요. 자세한 규칙은 Guidelines › 데이터 화면의 4가지 상태에 있어요.