본문으로 건너뛰기

접근정책 자동완성 · 로그인 UX — 실브라우저 QA 가이드

이 문서는 #1640(접근 정책 Catalog/Schema/Table 자동완성 cascading combobox)와 #1957(로그인 페이지 UX 개선)을 AKS prod(gend.genon.ai)에서 실제 브라우저로 검증한 단계별 가이드입니다. 모든 화면은 실 워크스페이스 사용자 토큰으로, 실 Trino 카탈로그를 시드 데이터로 사용해 캡처했습니다. (#2204 QA 하드닝)

검증 방식: headless Chromium(Playwright) + Keycloak password-grant 토큰 주입. API 우회 없이 UI 상호작용으로 수행.

A. 로그인 페이지 UX (#1957)​

A-1. 초기 렌더 — Google 버튼 · 넓어진 카드 · Footer​

/login 진입 화면. 검증 항목:

  • Google 계정으로 로그인 버튼 — 흰 배경 + 옅은 회색 테두리 + 4-색 G 아이콘 (Google Sign-In 브랜딩)
  • 카드 폭 max-w-md (이전 max-w-sm 대비 확장)
  • 카드 외부 하단 Footer: GenD v0.2.0 · 약관 · 개인정보처리방침 (빌드 버전은 vite define __APP_VERSION__)

로그인 페이지 초기 렌더 — Google 버튼·넓은 카드·Footer

A-2. 시나리오 — 자격증명 입력​

이메일(이메일 또는 사용자명) + 비밀번호 인라인 입력 (Keycloak Direct Access Grant).

자격증명 입력

A-3. 실패 메시지 — actionable + 비밀번호 찾기 CTA​

오답 비밀번호로 로그인 시도 시: 사유별 actionable 한국어 메시지 "잘못된 이메일 또는 비밀번호입니다." + "비밀번호를 잊으셨나요?" 강조 링크(비밀번호 재설정 진입)가 표시됩니다.

  • 분류 코드: invalid_credentials / account_disabled(비활성) / network(5xx·미응답) → i18n auth.errors.*
  • 토큰 에러 응답이 null/배열이어도 크래시 없이 graceful 분류 (회귀 테스트 auth.directGrant.test.ts)

로그인 실패 — actionable 메시지 + 비밀번호 찾기 CTA

B. 접근 정책 Catalog/Schema/Table 자동완성 (#1640)​

B-1. 접근 정책 페이지​

/admin/policies — 행·열 정책 / Trino 접근 규칙 / 쿼리 리소스 그룹 관리.

접근 정책 페이지

B-2. 정책 생성 모달 — combobox 화​

정책 생성 클릭 → Catalog/Schema/Table 입력이 plain <Input> 이 아닌 자동완성 combobox(선택 또는 입력...)로 제공됩니다. 목록에 없는 값도 자유 입력 가능(freeform).

정책 생성 모달 — Catalog/Schema/Table combobox

B-3. Catalog 드롭다운 — 실 Trino 카탈로그 로드​

Catalog combobox 클릭 시 지연 fetch(GET /catalog/catalogs)로 실 Trino 카탈로그가 옵션으로 채워집니다 (시드 데이터): gendpg · hive · iceberg · nessie · sourcedb · system · tpcds · tpch.

Catalog 드롭다운 — 실 Trino 카탈로그

B-4. substring 필터​

타이핑 시 case-insensitive substring 필터링. (목록에 없는 값을 입력하면 Use "<입력값>" 자유입력 커밋 행이 노출됨.)

Catalog substring 필터

B-5. Schema cascade​

Catalog 선택(gendpg) → Schema combobox가 cascade 로 해당 카탈로그의 스키마를 로드(GET /catalog/gendpg/schemas): information_schema · pg_catalog · public. 카탈로그를 바꾸면 이전 스키마/테이블 옵션은 즉시 초기화되어 stale 목록이 노출되지 않습니다 (회귀 테스트 PoliciesPage.test.tsx).

Schema cascade — gendpg 의 스키마 로드

검증 결과 요약​

기능항목결과
#1957Google 버튼 브랜딩 / 카드 max-w-md / Footer(버전·약관·개인정보)✅ live
#1957오답 시 actionable 실패 메시지 + 비밀번호 찾기 CTA✅ live
#1640Catalog combobox 실 Trino 카탈로그 로드 (8종)✅ live
#1640substring 필터 + freeform 입력✅ live
#1640Catalog→Schema cascade + 옵션 즉시 초기화✅ live

회귀 가드: ui/src/lib/auth.directGrant.test.ts(6), ui/src/components/admin/PoliciesPage.test.tsx cascade·clear-options.