> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/ui-ux/undefined-3/ui.md).
# 팝업 UI 가이드
팝업은 작업 공간에서 데이터 조회 혹은 특정 작업을 처리하기 위해 사용합니다.
팝업창 내에서 추가로 생성되는 화면 구성은 작업 공간 화면의 영역과 동일합니다.
윈도우 팝업창은 업무 화면과 동일한 처리가 필요한 경우 \[저장]과 같은 액션 버튼을 제공하여 사용합니다.
***
## 팝업 사이즈
윈도우 팝업의 사이즈는 다음 3가지를 지원합니다.
* 최소 사이즈 : 500px\* 600px
* 기본 사이즈 : 600px\*800px
* 최대 사이즈 : 화면 비율 90%
* 트리팝업 사이즈 : 380px\*560px
## 팝업 내 그리드 사용
1. 팝업에서 조회 조건 입력 후 \[조회] 버튼 클릭 시 하단 그리드에 데이터를 나타냅니다.
2. 팝업 그리드 내 스크롤을 지원하며 화면 스크롤은 서치박스를 제외하고 고정 데이터 영역만 스크롤 할수 있도록 합니다.
3. 그리드에서 원하는 데이터 행을 더블 클릭 시 데이터를 부모창에서 보여주고 팝업은 닫힘 처리 됩니다.
4. 그리드에서 원하는 데이터 행을 선택 후 \[확인] 버튼을 클릭 시 데이터는 부모창에서 보여주고 팝업은 닫힘 처리 됩니다.
5. \[닫기] 버튼을 클릭하면 팝업이 닫힘 처리 됩니다.
## 팝업의 종류
3가지 유형의 팝업을 제공하고 있습니다.
### 윈도우 팝업
부모 창에서 호출 된 팝업 중 브라우저 밖에서 새로운 작업 공간이 생성되어 관련 작업을 처리 할 수 있는 팝업입니다. 작업 유형에 따라 Model 또는 Modaless 두 가지로 처리 할 수 있습니다. 사이즈는 최소 300px\*500px를 지원하며 최대 사이즈는 화면의 90%를 넘지 않아야 합니다.
### 모달 팝업
팝업창의 CUD작업과 같이 입력 값이 부모 화면에 영향을 미치는 경우에 사용하며, 팝업 화면 종료 후 부모 화면 제어가 가능한 팝업 유형입니다.
### 레이어 팝업
레이어 팝업은 단순 정보제공을 위해 사용하는 비 기능성 팝업 유형입니다.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/ui-ux/undefined-3/ui.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
