RxPopover

버튼이나 아이콘 가까이에 짧은 정보와 명령을 표시하는 팝오버 구성요소입니다. 사용자 계정 메뉴, 행 보조 명령과 간단한 설명처럼 호출 지점과 시각적으로 연결되어야 하는 내용에 사용합니다.

콘텐츠 구조

현재 구성요소의 ChildContent는 호출 요소 영역에, TitleContent는 열렸을 때 표시할 팝오버 내용에 사용됩니다. 이름만 보고 반대로 배치하지 말고 실제 렌더링 구조에 맞춰 작성합니다.

주요 항목

기본 사용

<RxPopOver ID="account-menu" AlignX="right" AlignY="bottom">
    <ChildContent>
        <button type="button" aria-label="사용자 메뉴">...</button>
    </ChildContent>
    <TitleContent>
        <AccountSummary />
    </TitleContent>
</RxPopOver>

사용자 메뉴는 아이콘 아래에 붙도록 세로 정렬을 bottom으로 두고, 화면 오른쪽에서는 팝오버가 뷰포트 밖으로 나가지 않도록 가로 정렬을 맞춥니다.

열기와 닫기

일반적으로 호출 요소의 상호작용으로 열리지만, 업무 이벤트에서 제어해야 하면 Show()와 Hide()를 사용합니다. 메뉴 명령을 선택하거나 로그아웃을 시작하면 먼저 팝오버를 닫아 중복 실행을 방지합니다.

내용 작성

팝오버에는 현재 사용자의 이름, 계정, 테마와 로그아웃처럼 짧고 즉시 실행할 수 있는 항목을 넣습니다. 복잡한 사용자 관리, 권한 편집과 여러 단계 폼은 별도 관리 화면에서 처리합니다.

접근성과 포커스

호출 요소는 실제 button을 사용하고 접근성 이름과 열림 상태를 제공합니다. 팝오버가 열리면 키보드로 내부 명령에 이동할 수 있어야 하며, Escape 또는 외부 클릭으로 닫은 뒤 호출 요소로 포커스가 돌아가는지 확인합니다.

사용 구분

화면을 가리는 상세 편집은 RwSlideItemViewer나 RxDrawer, 사용자의 결정을 기다리는 확인은 RwConfirmWindow를 사용합니다. 팝오버는 호출 요소 주변의 짧은 맥락과 명령에 한정합니다.

문제 확인

• 반복 렌더링되는 목록에서는 ID가 중복되지 않게 합니다.
• 스크롤 후에도 팝오버가 호출 요소에 붙어 있는지 확인합니다.
• 작은 화면과 브라우저 확대에서 내용이 잘리지 않도록 합니다.
• 비로그인·로그인 상태가 바뀌면 열린 팝오버의 내용도 즉시 갱신합니다.