# 이벤트 페이지 관리자
## **이벤트 페이지 :**
이벤트 페이지란 아래와 같이 인게임 화면의 우측 상단에 있는 확성기 모양의 아이콘을 통해 접근할 수 있는 이벤트 목록에 게시될 각각의 이벤트를 의미합니다. 이벤트 페이지는 이미 출시된 게임에만 등록할 수 있습니다.
각각의 이벤트 페이지는 아래 스크린샷과 같은 형태로 보여지게 되고, 게임을 플레이하는 유저가 각 이벤트에서 제시하는 조건을 달성할 시 해당 유저에게 등록해 놓은 아이템을 지급하게 됩니다.
화면 좌측 이벤트 페이지 목록에서 각각의 이벤트 페이지에 수령 가능한 보상이 있을 시 아래 스크린샷처럼 좌측에 주황색 체크 표시가 출력됩니다.
유저가 이벤트 페이지에 설정한 조건을 만족시켰는지 여부에 따라 아이템 셀(아이템을 지급받을 수 있는 박스)는 아래의 4가지 상태로 출력됩니다.
* 조건 미충족 : 추가 표시 없음 / 클릭(터치) 시 아이템 정보 조회
* 조건 충족 불가 : 불투명한 아이템 셀, 하얀 X 마크 / 클릭(터치) 시 아이템 정보 조회
* 조건 충족 - 수령 가능 : 주황색 아웃라인, 주황색 체크 마크 / 클릭(터치) 시 아이템 수령
* 조건 충족 - 이미 수령 : 불투명한 아이템셀, 하얀 체크 마크 / 클릭(터치) 시 아이템 정보 조회
## **이벤트 페이지 관리자 :**
펑크랜드 스튜디오에서 이벤트 페이지를 추가/수정, 커스터마이징 할 수 있는 관리 도구입니다. 아래 스크린샷의 경로로 접근할 수 있습니다.
해당 경로로 이벤트 페이지 관리자를 열게 되면 아래와 같은 창이 열리게 됩니다.
1. UI 추가 버튼 목록
* 이벤트 페이지를 꾸미거나 기간을 늘려 아이템 셀을 추가해야 할 경우에 이용합니다.
2. 페이지 목록 조회 및 추가/삭제
* 추가한 이벤트 페이지를 조회 및 선택할 수 있습니다.
* 페이지 삭제의 경우엔 기간이 종료된 이벤트에 한해 Delete 버튼을 눌러 삭제할 수 있습니다.
* 하단의 버튼을 눌러 원하는 템플릿을 선택하면 이벤트 페이지를 추가할 수 있습니다.
3. 페이지 구성 미리보기 및 UI 선택,이동, 크기 조절
* 구성한 페이지를 미리 볼 수 있는 영역입니다.
* 각 구성요소를 클릭 시 해당 요소를 선택하여 이동 및 크기 조절을 할 수 있습니다.
* 여러 요소가 중첩되있는 경우에 클릭 시 최하단(자식이 없는) UI가 우선적으로 선택되고 추가 클릭을 하게 되면 상위 UI를 선택할 수 있습니다.
4. 페이지 구성 요소(페이지 및 UI) 트리뷰
* 구성요소는 이벤트 페이지 자체(최상단) 및 페이지에 종속된 UI들로 이루어져 있습니다. 자세한 설명은 본 튜토리얼 하단 `이벤트 페이지 구성요소 및 커스터마이징` 파트에서 확인할 수 있습니다.
* 각 구성 요소의 부모/자식 관계를 파악할 수 있습니다. 5의 데이터 중 위치 및 크기와 관련된 데이터의 경우 %값을 쓰게 될 시 부모 UI의 위치 및 크기에 영향을 받습니다.
5. 선택한 구성 요소의 속성값 조회 및 편집
* 이벤트 페이지의 경우 이벤트 명(title), 활성화여부(activated), 아이템 라벨에 표시될 수령 조건의 포맷(itemLabelFormat), 이벤트 시작일(startDate), 이벤트 지속 기간(durationDay)를 편집할 수 있습니다.
* 이벤트 페이지가 아닌 구성요소들은 각각 위치를 조정할 수 있는 값 등을 편집할 수 있습니다.
## **이벤트 페이지 추가방법 :**
이벤트 페이지 관리자의 좌측 하단 `새 이벤트 페이지 추가` 버튼을 통해 신규 이벤트 페이지를 추가할 수 있습니다.
제작자 분들이 쉽게 이벤트 페이지를 추가하실 수 있도록 현재 아래 3가지의 템플릿을 제공하고 있습니다.
* 일일 보상 : 이벤트 시작일로부터 1일마다 보상을 수령 가능, 이미 지난 날짜의 보상 수령 불가
* 레벨 달성 보상 : 유저가 특정 레벨을 달성할 시 보상 수령 가능
* 누적 접속일 보상 : 이벤트 기간내에 유저가 누적해서 접속한 일수에 따라 보상 수령 가능
이벤트 페이지를 추가한 후 각각의 아이템 셀(붉은 선으로 표시된 영역)을 클릭하여 선택한 후 우측 주황색 선으로 표시된 영역에서 보상으로 아이템을 등록할 수 있습니다.
템플릿에 따라 필요한 아이템 셀에 아이템 등록을 완료하게 되면 이벤트 페이지 관리자 우측 하단의 업로드 버튼을 통해 추가한 페이지를 현재 서비스 중인 게임에 바로 적용시킬 수 있습니다.
## **이벤트 페이지 구성요소 및 커스터마이징:**
각각의 템플릿을 통해 이벤트 페이지를 만드는 경우, 모든 아이템 셀에 각 아이템만 등록해주면 바로 업로드가 가능합니다. 하지만, 각각의 게임에 맞게 이벤트명, 이벤트 설명 등의 구성요소를 설정해준다면 다른 게임과의 차별성, 게임에 대한 몰입감과 같은 부분에서 도움이 될 수 있습니다.
각 구성요소는 `3. 페이지 구성 미리보기 및 UI 선택,이동, 크기 조절` 과 `5. 선택한 구성 요소의 속성값 조회 및 편집` 을 통해 커스터마이징이 가능합니다.
1. 이벤트 페이지(Page)
* 이벤트 자체의 설정을 설정할 수 있습니다.
* 이벤트명(title) - 좌측에 표기되는 이벤트 목록 및 페이지 상단에 출력되는 이벤트 이름
* 활성화여부(activated) - 해당 이벤트 페이지의 활성화 여부입니다.\
false일 시 유저에게 해당 페이지가 보여지지 않습니다. 웹콘솔([nekoland.net/me](http://nekoland.net/me))의 `공지사항/이벤트 & 푸시` 메뉴에서도 해당 값을 실시간으로 수정 가능합니다.
* 아이템 라벨 포맷(itemLabelFormat) - 각 아이템 셀의 상단에 표기되는 아이템 수령을 위한 조건을 보여줄 방식입니다.\
`{0}` 부분에 각 아이템 셀에서 설정한 조건(레벨) 또는 이벤트 시작일부터 지난 일수가 표기됩니다.\
예시 : {0}레벨 → 1레벨 2레벨 3레벨 등등 / {0}번째 날 → 1번째 날 2번째 날 3번째 날 등등
* 이벤트 시작일(startDate) - 해당 이벤트가 실제 유저들에게 표시되기 시작하는 날짜입니다. 현재 시간보다 이전 날짜로는 설정할 수 없습니다.
* 이벤트 지속 기간(durationDay) - 해당 이벤트가 지속되는 기간(일수)입니다.\
날짜 기반 템플릿(일일 보상, 접속일 보상)의 경우 아이템 셀의 갯수가 지속기간보다 많을 수 없습니다. 일일보상의 경우 아이템 셀의 갯수와 지속기간이 일치해야 합니다.\
해당 기간이 만료되면 유저들에게 더이상 페이지가 보이지 않게 되고, 해당 페이지를 삭제 할 수 있습니다.
2. 아이템 박스(ItemBox)
* 지급할 아이템을 선택하고, 해당 아이템의 이미지가 출력되는 공간입니다.
* 아이템(item) - 우측의 `…` 을 눌러 아이템 선택창을 통해 아이템을 선택하거나 아이템 번호를 직접 입력해 지급할 보상을 선택할 수 있습니다.
* 아이템 수량(itemCount) - 아이템을 선택한 경우에 편집할 수 있게되고, 조건 충족시 선택할 아이템을 몇개 지급할 지 설정할 수 있습니다.
3. 아이템 라벨(ItemLabel)
* 아이템을 수령하기 위한 조건이 출력되는 공간입니다.
* 필요레벨(neededLevel) - 레벨 달성 보상 템플릿을 선택한 경우에만 편집할 수 있고, 아이템을 수령하기 위해 달성해야할 레벨을 설정할 수 있습니다.
4. 아이템 셀(Item Cell)
* 보상으로 주어질 아이템에 관한 UI들이 담기는 단위 UI입니다.
* 인덱스(index) - 수정할 수 없는 값으로, 이벤트 보상이 순차적으로 지급되야 할 경우(일일 보상, 접속일 보상 등) 해당 인덱스 순서에 따라 아이템 수령 조건이 충족됩니다.
* 아이템 박스와 아이템 라벨에서 설정할 수 있는 값들은 아이템 셀에서도 설정할 수 있습니다.
5. 레벨 라벨(LevelLabel) - 레벨 달성 보상 템플릿전용
* 유저의 현재 레벨을 출력해주는 공간입니다. 삭제할 수 있지만 따로 추가할 수는 없습니다.
* 이벤트 페이지의 `아이템 라벨 포맷`과 같은 방식으로 편집할 수 있습니다.
* 예시 : 현재 레벨 : {0} → 현재 레벨 : 22
6. 기간 라벨(PeriodLabel)
* 이벤트 페이지의 기간을 출력해주는 공간입니다. 삭제할 수 있지만 따로 추가할 수는 없습니다.
* `{0}` 부분에 이벤트 시작일 , `{1}` 부분에 이벤트 종료일이 표기됩니다.
* 시작일과 종료일은 `yyyy.MM.dd` 의 형식으로 출력됩니다. 예 : 2020.01.16
* 예시 : 시작일이 20년 1월 16일, 이벤트 기간이 7일인경우\
{0} 00시 부터 {1} 23시 59분까지 → 2020.01.16 00시 부터 2020.01.22 23시 59분까지
7. 텍스트박스(Text)
* 이벤트 페이지 관리자의 좌측 상단에서 자유롭게 추가/삭제 가능한 텍스트박스입니다.
* text - 실제 표기될 텍스트를 입력할 수 있습니다.
* textAlign - 텍스트가 기준 위치를 지정할 수 있습니다.
* 글씨크기(textSize) - 표기할 텍스트의 크기입니다. 미리보기에 출력되는 텍스트 크기와 실제 앱과 출력되는 크기에 약간의 차이가 있을 수 있습니다.
* 글씨색상(color) - 우측의 `…` 버튼을 통해 색상을 선택하거나 (A)R,G,B 의 형태로 직접 입력해 설정 할 수 있습니다. 직접 입력을 통해서만 투명도(A)값을 수정할 수 있습니다.
8. 이미지박스
* 이벤트 페이지 관리자의 좌측 상단에서 자유롭게 추가/삭제 가능한 이미지박스입니다.
* 이미지(image) - 우측의 `…` 버튼을 통해 프로젝트가 저장된 위치의 Pictures 폴더에 추가된 이미지 중 출력할 이미지를 선택할 수 있습니다.
9. 스크롤 영역 - 스크롤 패널(ScrollPanel)
* 실제 보여지게 되는 영역을 나타냅니다.
* 가로스크롤 사용부(horizontal) - 가로 스크롤링을 사용할지 여부입니다. 기본 값은 False입니다.
* 세로스크롤 사용여부(vertical) -세로 스크롤링을 사용할지 여부입니다. 기본 값은 False입니다.
* 배경색상(color) - 우측의 `…` 버튼을 통해 색상을 선택하거나 (A)R,G,B 의 형태로 직접 입력해 설정 할 수 있습니다. 직접 입력을 통해서만 투명도(A)값을 수정할 수 있습니다.
* 스크롤 미리보기(horizontalOffset / verticalOffeset) - 가로 또는 세로 스크롤링을 사용하도록 설정할 경우에 실제 스크롤 됐을 때의 상태를 미리 볼 수 있게 해주는 값입니다. 0%\~100% 까지의 값을 입력할 수 있습니다.
10. 스크롤 영역 - 컨텐츠 박스(Content)
* 아이템셀이 등록되고 추가되는 공간입니다. 이벤트 페이지에서 해당 영역에만 아이템 셀을 추가할 수 있습니다.
* 실제 스크롤 되는 영역을 나타냅니다.
* 정상적으로 스크롤이 되기 위해선 스크롤패널보다 크기를 크게 만들어 주고, 스크롤 패널의 horizontal 또는 vertical 값을 True로 설정해주어야 합니다.
11. 크기 및 위치 조정을 위한 공통 사항
* 이벤트 페이지 관리자 각 구성요소의 좌표계는 좌측 상단이 기준점(0,0)이고, 좌표값은 우측, 하단 방향으로 증가하는 방식입니다.\
예시 : (50, -30) → 기준점 기준 우측 50 위쪽 30
* x, y - 각 구성요소의 위치를 결정하는 값입니다. 부모 구성요소의 크기에 따라 변동되도록 % 값을 사용할 수 있습니다.
* width, height - 각 구성요소의 크기를 결정하는 값입니다. 부모 구성요소의 크기에 따라 변동되도록 % 값을 사용할 수 있습니다.
* anchor - 구성요소의 위치 값이 적용될 부모의 기준점을 설정할 수 있습니다.
* pivotX, pivotY - 각 구성요소의 위치 기준점을 결정하는 값입니다.\
0\~1 사이의 값을 가지고, 0이 좌측 끝, 상단 끝 1이 우측 끝, 하단 끝을 의미합니다.\
(0,0) 일경우 구성요소의 위치값이 구성요소의 좌측 상단이, (0.5,0.5)일 경우 구성요소의 정중앙이 기준이됩니다.
* 예시 : 구성요소를 부모의 정중앙에 위치시키고 싶을 경우 아래와 같은 방법들이 있습니다.
* anchor : MiddleCenter / pivotX : 0.5 / pivotY : 0.5 / x : 0 / y : 0
* anchor : MiddleLeft / pivotX : 0.5 / pivotY : 0.5 / x : 50% / y : 0
* anchor : TopLeft / pivotX : 0.5 / pivotY : 0.5 / x : 50% / y : 50%
* 예시 : 구성요소를 부모의 좌측상단에 위치시키고 싶을 경우 아래와 같은 방법이 있습니다.
* anchor : TopLeft / pivotX : 0 / pivotY : 0 / x : 0 / y : 0
* 예시 : 구성요소를 부모의 우측하단에 위치시키고 싶을 경우 아래와 같은 방법이 있습니다.
* anchor : BottomRight / pivotX : 1 / pivotY : 1 / x : 0 / y : 0
---
# Agent Instructions: 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://docs.punkland.io/punkland/punkland-studio/in-depthguide/eventpagemanager.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.