페이지 레이아웃과 패널

GitLab 프론트엔드 개발에서 사용하는 페이지 레이아웃 및 패널(Static, Dynamic, AI) 구조와 컴포넌트 사용 방법을 설명합니다.

페이지는 세 가지 패널로 나뉩니다: **정적 패널(static panel)**은 페이지의 기본 컨텍스트입니다. 모든 표준 애플리케이션 페이지에서 자동으로 사용됩니다. 동적 패널(dynamic panel) (선택 사항)은 정적 패널의 컨텍스트 내에서 상세 정보를 표시하기 위한 패널입니다. 개별 기능이 Vue 애플리케이션을 이 패널에 마운트하여 컨텍스트에 맞는 콘텐츠를 표시합니다. AI 패널(AI panel) (접을 수 있음)은 지능형 기능을 위한 패널입니다. 페이지 구조에 대한 자세한 내용은 디자인 시스템 문서 를 참고하세요. 정적 패널 내에서 인덱스 레이아웃과 상세 레이아웃 컴포넌트는 페이지 제목, 알림, 콘텐츠 영역에 일관된 간격과 구조를 제공합니다. 패널 # 정적 패널 # Layouts::StaticPanelComponent ViewComponent는 메인 콘텐츠 영역을 감쌉니다. 모든 표준 애플리케이션 페이지에서 자동으로 사용됩니다. 새 페이지를 만들 때 명시적으로 적용할 필요가 없습니다. 동적 패널 # DynamicPanel Vue 컴포넌트는 동적 패널의 구조(헤더, 액션, 콘텐츠 영역 포함)를 정의합니다. mount-to="#contextual-panel-portal" prop과 append prop을 사용하여 MountingPortal 의 직접 자식으로 사용하세요. Props: Prop Type Default Description header String null 헤더 텍스트. header 슬롯이 제공되면 슬롯이 우선합니다. maximizeUrl String null 설정 시 해당 URL로 연결되는 최대화 버튼이 렌더링됩니다. 슬롯: Slot Description Default 패널 본문 메인 콘텐츠. header 커스텀 헤더 마크업. header prop보다 우선합니다. actions 패널 헤더 액션. 자세한 내용은 패널 액션을 참고하세요. footer 패널 푸터 콘텐츠. 이 슬롯에 콘텐츠가 있을 때만 푸터가 렌더링됩니다. 이벤트: Event Payload Description close None 닫기 버튼 클릭 시 발생합니다. maximize MouseEvent 최대화 버튼 클릭 시 발생합니다. 예시: <script> import DynamicPanel from '~/vue_shared/components/dynamic_panel.vue'; export default { components: { DynamicPanel }, methods: { onClose() { // handle close }, }, }; </script> <template> <mounting-portal mount-to="#contextual-panel-portal" append> <dynamic-panel header="Example" @close="onClose">  </dynamic-panel> </mounting-portal> &