(BCRM#G0936) 포틀릿 레이아웃 컴포넌트 사용 가이드

page no.  138182700

1. 기능 설명
   1. 포틀릿 레이아웃은 하나의 보고서 안에 여러 보고서를 격자(그리드) 형태로 배치하여 대시보드를 만드는 컴포넌트입니다.
      각 셀에 다른 AUD 보고서를 임베드하여 한 화면에서 여러 정보를 동시에 확인할 수 있습니다.

   2. 기본 용어

      용어	설명
      그리드	행과 열로 나뉜 격자 구조 (예: 4×4 = 4행 4열, 총 16칸)
      셀	그리드의 각 칸. (셀 하나에 보고서 하나를 배치)
      포틀릿	셀에 배치된 보고서를 가리키는 말.

      --

   3. 주요 기능

      분류	기능
      그리드 구성	1×1 ~ 4×4 행/열 자유 조정, 셀 간격 조정, 행/열 추가·삭제
      셀 조작	셀 병합/분할, 드래그 앤 드롭으로 위치 교체·이동, 셀 모서리 드래그로 크기 변경
      보고서 배치	빈 셀의 + 버튼으로 신규 추가, 셀 메뉴의 "교체"로 다른 보고서로 변경
      셀 액션	확대(전체화면), 교체(다른 보고서로), 갱신(자동 새로고침 주기), 제거
      개인화	사용자별 레이아웃 저장/복원 — 같은 대시보드를 사람마다 다르게 구성 가능
      모드 전환	View 모드(보기 전용) / Edit 모드(편집) 토글
      자동 갱신	셀별 갱신 주기 설정 (1분 / 5분 / 10분 / 30분 / 1시간)

      --

   4. 주요 옵션 

      그룹	옵션	기본 값	설명
      Layout	Columns	4	초기 그리드 열 수 (1~4)
      Layout	Rows	4	초기 그리드 행 수 (1~4)
      Layout	Gap	10	셀 간격 (px)
      Interaction	EditMode	true	편집 모드 활성화
      Interaction	ShowToolbar	true	상단 툴바 표시
      Interaction	ShowCloseButton	true	셀 제거 버튼 표시
      Interaction	AutoSaveDelay	1	자동 저장 지연 (초)

      ※ Data 그룹 옵션(GridName, CardListName, IdField~ContentField)은 외부 DataGrid 연동용으로, 일반 사용 시에는 기본값 그대로 두면 됩니다.
      --

2. 사용 방법
   1. 포틀릿 레이아웃 컴포넌트 배치
      
      1. AUD Designer를 엽니다.
         
         --
      2. 상단 도구 패널에서 UI Bot > Container > External Component를 클릭하면 화면에 External Component가 배치됩니다.
         
         --
      3. 배치된 External Component를 오른쪽 클릭하여 Context Menu를 열고 컴포넌트 선택 메뉴를 클릭합니다.
         
         --
      4. 컴포넌트 선택 팝업의 목록에서 포틀릿 레이아웃을 선택합니다. 원하는 레이아웃 형태(행/열 등)로 옵션을 지정한 뒤 확인 버튼을 누르면, 배치된 External Component가 포틀릿 레이아웃 컴포넌트로 전환됩니다.
         
         
         --
      5. AUD Designer 상단의 실행 버튼을 누르면 포틀릿 레이아웃 컴포넌트가 활성화되어 사용할 수 있습니다.
         
         --
         
      6. 보고서를 저장합니다. AUD Designer의 저장 기능으로 보고서를 저장해야 이후 개인화 저장 기능이 정상 동작합니다.
         
         
         
   2. 그리드 크기 조정
      1. Edit 모드 상단 툴바에서 그리드 크기를 조정할 수 있습니다.
         
         

         1. 툴바 구성: 그리드 피커 · 행 추가 · 행 삭제 · 열 추가 · 열 삭제 · 셀 병합 · 셀 분할 · 초기화 · 저장 · 기본 · (우측) 전체 / 배치 / 빈칸 정보

            도구	동작
            그리드 피커 (예: 4 × 4)	클릭하면 격자 미리보기가 열려 행×열을 시각적으로 선택
            행 추가 / 행 삭제	행 단위로 추가하거나 마지막 행 삭제
            열 추가 / 열 삭제	열 단위로 추가하거나 마지막 열 삭제
            초기화	저장된 개인화를 지우고 원본 보고서의 레이아웃으로 복원
            저장	현재 레이아웃을 사용자 개인화로 저장
            기본	(배지) 현재 원본 레이아웃을 사용 중일 때 표시. 개인화 저장 시 "개인화됨"으로 변경
            (우측 정보 표시)	전체 N칸 · 배치 N개 · 빈칸 N개 — 현재 그리드 상태 요약

            --

   3. 포틀릿 레이아웃 컴포넌트 내 셀에 보고서 배치
      1. 빈 셀 가운데의 + 버튼을 클릭합니다.
         
      2. 보고서 선택 팝업이 열립니다.
         
         
         
      3. 좌측 트리에서 폴더를 펼쳐 원하는 보고서를 선택합니다 (상단 검색창으로 빠르게 찾을 수 있습니다).
         --
      4. 우측 영역에서 미리보기를 확인한 뒤 우상단 선택 버튼을 클릭합니다.
      5. 셀에 선택한 보고서가 표시됩니다.
         
   4. 셀 병합 / 분할
      1. 툴바의 셀 병합 / 셀 분할 버튼을 사용합니다.
         
         1. 병합할 셀들을 Ctrl + 클릭(또는 드래그)으로 다중 선택합니다.
            
         2. 선택한 셀이 사각형 영역을 이루면 툴바의 셀 병합 버튼이 활성화되며, 셀 병합 버튼을 클릭하면 하나의 큰 셀로 합쳐집니다.
            
            
         3. 병합된 셀을 선택한 후 셀 분할 버튼을 누르면 원래 셀들로 다시 나뉩니다.
            
            ※ 참고: 이미 병합된 셀은 다른 셀(또는 다른 병합된 셀)과 다시 병합할 수 없습니다. 병합된 셀의 영역을 더 키우고 싶다면 셀 크기 변경(리사이즈) 기능으로 영역을 확장하세요.
   5. 셀 이동 / 교체 (드래그 앤 드롭)
      1. 셀을 마우스로 끌어 다른 위치에 놓을 수 있습니다.
         
         1. 옮기려는 셀을 마우스로 누른 채 드래그합니다.
            
         2. 원하는 위치의 셀에 놓으면 동작이 결정됩니다.
            1. 빈 셀에 놓은 경우: 셀이 그 위치로 이동합니다.
               
            2. 다른 보고서가 있는 셀에 놓은 경우: 두 셀의 위치가 서로 교체됩니다. 이때 교체 확인 창이 표시되며, 확인을 눌러야 적용됩니다.
               
   6. 셀 크기 변경 (리사이즈)

      1. 셀의 오른쪽 하단 모서리를 드래그하여 크기를 변경할 수 있습니다.

         1. 크기를 바꾸려는 셀의 오른쪽 하단 모서리에 마우스를 올립니다.
            
         2. 마우스를 누른 채 원하는 크기까지 드래그합니다 (드래그 중 영역이 미리보기로 표시됨).
            
         3. 마우스를 놓으면 셀이 드래그한 영역만큼 확장되어 인접 셀들과 자동으로 병합됩니다.
            
         4. 다시 분할하려면 해당 셀을 선택한 뒤 툴바의 셀 분할 버튼을 누릅니다.
            
   7. 셀 메뉴 (⋮ 버튼)

      1. 보고서가 배치된 셀의 우상단에 나타나는 ⋮ 버튼을 클릭하면 액션 메뉴가 표시됩니다. 빈 셀에는 ⋮ 버튼이 표시되지 않으며, 보고서를 먼저 배치(2-3)해야 사용할 수 있습니다.
         
         

         메뉴	동작
         확대	포틀릿을 전체화면 모달로 크게 보기
         교체	다른 보고서로 교체 (보고서 선택 팝업)
         갱신	자동 새로고침 주기 설정 (중지 → 1분 → 5분 → 10분 → 30분 → 1시간 순환)
         제거	셀에서 보고서 제거 (셀은 빈 상태로 남음)

         --

   8. 보고서 선택 팝업
      

      1. 빈 셀의+ 버튼이나 셀 메뉴의 교체를 클릭하면 동일한 보고서 선택 팝업이 열립니다.
         
         --

      2. 팝업 구성

         영역	설명
         헤더 (상단)	팝업 제목 · 우측에 선택 버튼과 닫기(✕) 버튼
         좌측 패널	검색창 + 폴더/보고서 트리
         우측 패널	선택한 보고서의 미리보기

         --

      3. 사용 방법
         1. 좌측 트리에서 폴더를 펼치고 원하는 보고서를 클릭합니다.
         2. 트리 상단의 검색창에 보고서명을 입력하면 빠르게 찾을 수 있습니다.
         3. 선택한 보고서의 미리보기가 우측 영역에 표시됩니다.
         4. 우상단 선택 버튼을 클릭하면 셀에 적용됩니다 (보고서를 선택하기 전에는 비활성화 상태).
         5. 닫기(✕) 버튼이나 팝업 밖을 클릭하면 적용 없이 닫힙니다.
      4. 참고사항
         1. 목록에는 본인 계정에 읽기 권한이 있는 SC 타입 보고서만 표시됩니다 
   9. 개인화 — 나만의 레이아웃 저장
      1. 같은 대시보드를 사람마다 다르게 구성할 수 있습니다.
         사전 조건: 개인화 저장은 보고서가 먼저 저장된 상태에서만 가능합니다. 새로 만들어 저장하지 않은 보고서에서는 개인화 저장이 동작하지 않으므로, 
         AUD Designer에서 보고서를 먼저 저장한 후 사용하세요.
         1. View 모드에서 하단 레이아웃 편집 클릭 → Edit 모드 진입
         2. 자유롭게 셀 이동, 보고서 교체, 크기 조정
         3. 툴바의 저장 버튼 클릭 → 자신의 레이아웃이 DB에 저장됨
         4. 다음 로그인 시 저장된 개인 레이아웃이 자동으로 로드됨
         5. 툴바의 초기화 버튼 → 기본 레이아웃(원본)으로 되돌리기
      2. 상단 배지로 현재 상태 확인:
         1. ● 개인화됨 (파란 배지) — 본인의 저장된 레이아웃 사용 중
         2. ○ 기본 (회색 배지) — 원본 레이아웃 사용 중 (저장 이력 없음)
   10. View 모드 / Edit 모드

       1. 일반 사용자가 보고서를 열었을 때는 View 모드(보기 전용)로 표시됩니다. 개인화나 추가 편집이 필요할 때 Edit 모드로 전환하여 사용합니다.

          모드	진입 방법	동작
          View 모드	보고서를 열었을 때 기본 모드	보기 전용. 툴바와 셀 메뉴 등이 숨겨집니다. 화면 하단에 마우스를 올리면 "레이아웃 편집" 버튼이 나타납니다
          Edit 모드	View 모드에서 "레이아웃 편집" 버튼 클릭	편집 가능. 툴바와 셀 메뉴가 표시되어 그리드/셀 조작이 가능합니다

          --

   11.