# 투표하기

{% hint style="info" %}
고객이 선호하는 제품을 투표하고 그 결과를 보여주는 방법에 대해서 알아봅니다. **(이 기능은 아직 베타 기능이며 추후 변경될수 있습니다.)**
{% endhint %}

### 1️⃣ 투표하기 기능 만들기

* 템플릿 중에 "[레시피 투표 이벤트 템플릿](https://template-50898.waveon.me/)" 를 기반으로 설명하겠습니다.
* 이 템플릿은 4가지 메뉴에 투표를 하고 그 결과를 투표한 다음에 보여주는 템플릿 입니다.
* "닭가슴살 월남쌈" 의 "투표하기" 버튼을 클릭하고 우측 로직탭을 클릭 합니다. 템플릿에는 이미 로직이 적용 되어 있습니다. 

  <figure><img src="https://www.waveon.io/_ipx/f_webp/static/img/guide/voting-guide-logic-panel.png" alt=""><figcaption></figcaption></figure>
* "닭가슴살 월남쌈" 의 "투표하기" 버튼에 설정된 1번 로직에 대해서 설명 하겠습니다.

  * <mark style="color:blue;">Condition 1 의 "클릭 시"</mark> : 버튼이 클릭 되었을때 동작 합니다.
  * <mark style="color:blue;">Condition 2 의 "저장된 데이터 조건"</mark> : 기존 참여 여부를 판단 합니다. 만약 기존에 참여 했다면 "참여" 라는 데이터에 "YES" 라고 저장 되어 있습니다. (추후 설정)
  * <mark style="color:blue;">Result 1 의 "서버에 데이터 저장"</mark> : 투표한 내용을 서버에 저장 합니다. "num1" 에 1을 더한 값을 서버에 저장하고, "total" 에 1을 더한 값을 서버에 저장 합니다. "num1" 은 닭가슴살 월남쌈의 투표수이고, "total" 은 전체 투표수 입니다.
  * <mark style="color:blue;">Result 2 의 "서버에 데이터 저장"</mark> : 투표 여부를 서버에 저장 합니다. "AppUserData" 라는 곳에 저장하는 것에 주의해 주세요. "참여" 라는 항목에 "YES" 라고 저장 합니다. Condition 2 에서 씌였던 데이터 입니다.
  * <mark style="color:blue;">Result 3 의 "페이지로 이동"</mark> : 모든 데이터를 저장하였으니 이제 결과 페이지로 이동 합니다.

  <figure><img src="https://www.waveon.io/_ipx/f_webp/static/img/guide/voting-logic-1.png" alt=""><figcaption></figcaption></figure>
* "닭가슴살 월남쌈" 의 "투표하기" 버튼에 설정된 2번 로직에 대해서 설명 하겠습니다.

  * <mark style="color:blue;">Condition 1 의 "클릭 시"</mark> : 버튼이 클릭 되었을때 동작 합니다.
  * <mark style="color:blue;">Condition 2 의 "저장된 데이터 조건"</mark> : 투표에 참여를 이미 한 경우를 체크 합니다.
  * <mark style="color:blue;">Result 1 의 "팝업 실행하기"</mark> : 이미 투표를 했다는 팝업을 보여 줍니다.

  <figure><img src="https://www.waveon.io/_ipx/f_webp/static/img/guide/voting-logic-2.png" alt=""><figcaption></figcaption></figure>
* "닭가슴살 월남쌈" 의 "투표하기" 버튼에 설정된 3번 로직에 대해서 설명 하겠습니다.

  * <mark style="color:blue;">Condition 1 의 "화면 로드 직후"</mark> : 화면이 로드 되자마자 바로 수행 됩니다.
  * <mark style="color:blue;">Result 1 의 "서버에서 데이터 불러오기"</mark> : 투표한 여부를 서버에 저장된 데이터를 불러 옵니다. 1번 로직에서 투표를 완료 한 경우 "AppUserData" 에 "참여" 라는 항목에 "YES" 라고 데이터를 저장 하였습니다.

  <figure><img src="https://www.waveon.io/_ipx/f_webp/static/img/guide/voting-logic-3.png" alt=""><figcaption></figcaption></figure>
* 이제 다음 버튼인 "닭가슴살 샐러드" 의 "투표하기" 버튼을 클릭하고 우측 로직탭을 클릭 합니다. 템플릿에는 이미 로직이 적용 되어 있습니다. 여기에는 2개 로직만 적용 되어 있고 기본적으로 "닭가슴살 월남쌈" 의 "투표하기" 버튼과 거의 유사합니다.&#x20;

  <figure><img src="https://www.waveon.io/_ipx/f_webp/static/img/guide/voting-guide-logic-panel-salad.png" alt=""><figcaption></figcaption></figure>
* "닭가슴살 샐러드" 의 "투표하기" 버튼에 설정된 1번 로직에 대해서 설명 하겠습니다.

  * "닭가슴살 월남쌈" 에서 설정된 내용과 거의 대부분 동일합니다.
  * 다만 Result1 의 "서버에 데이터 저장" 에서 Data 1 이 "num1" 이 아닌 "num2" 라는 것에 주의해 주세요. 이는 "닭가슴살 샐러드" 의 투표수 입니다.

  <figure><img src="https://www.waveon.io/_ipx/f_webp/static/img/guide/voting-logic-4.png" alt=""><figcaption></figcaption></figure>
* "닭가슴살 샐러드" 의 "투표하기" 버튼에 설정된 2번 로직에 대해서 설명 하겠습니다.

  * "닭가슴살 월남쌈" 에서 설정된 내용과 완전히 동일합니다.

  <figure><img src="https://www.waveon.io/_ipx/f_webp/static/img/guide/voting-logic-5.png" alt=""><figcaption></figcaption></figure>
* 나머지 "투표하기" 버튼도 "닭가슴살 샐러드" 의 "투표하기" 와 동일합니다. 마찬가지로 "num1" 만 "num2", "num3" 등으로 변경되어 있는 것으로 확인할수 있습니다.

### 2️⃣ 투표하기 결과 출력

* "레시피 투표 이벤트 템플릿"의 "결과 페이지" 로 이동해 주세요. 팝업이 화면을 가리고 있으니 팝업을 숨김 처리해 주세요.&#x20;

  <figure><img src="https://www.waveon.io/_ipx/f_webp/static/img/guide/voting-guide-result.png" alt=""><figcaption></figcaption></figure>
* 텍스트를 클릭하고 우측 로직 패널을 확인해 주세요. 로직에 대해서 설명하면 아래와 같습니다.&#x20;

  * <mark style="color:blue;">Conditon 1 "화면 로드 직후"</mark> : 화면에 로드된 이후 바로 수행됩니다.
  * <mark style="color:blue;">Result 1 "서버에서 데이터 불러오기"</mark> : 서버에 저장된 투표수를 불러 옵니다. num1, num2, num3, num4, total 까지 각 투표 항목과 전체 투표수를 1번 스텝에서 저장 하였습니다.

  <figure><img src="https://www.waveon.io/_ipx/f_webp/static/img/guide/voting-guide-result-logic.png" alt=""><figcaption></figcaption></figure>
* 텍스트 내용에 ${num1} ${num2} ${num3} ${num4} ${total} 과 같이 쓰면 서버에 저장된 값을 표기할 수 있습니다.


---

# 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.waveon.io/quiz-deprecated/voting.md?ask=<question>
```

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.