# 상점형

<p align="center"><img src="https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2Ftag.svg_5feaa5b8-be50-4244-95fd-51cd35995c00?alt=media&#x26;token=8ef25263-ccbc-4884-a426-50ef5b9e6122" alt="" data-size="line"></p>

<h3 align="center"><strong>상점형 게시판</strong></h3>

<p align="center">아이템을 등록하고 판매/선물 가능<br>NPC설정 및, 가챠(뽑기)시스템을 포함한 게시판</p>

<p align="center"><sub><em>+</em></sub> <em> </em><sub><em><mark style="color:purple;">40,000₩</mark></em></sub></p>

<br>

<mark style="color:blue;">**\[1]**</mark> [#undefined-1](#undefined-1 "mention")

<mark style="color:blue;">**\[2]**</mark> [#npc](#npc "mention")

<mark style="color:blue;">**\[3]**</mark> [#undefined-3](#undefined-3 "mention")

<mark style="color:blue;">**\[4]**</mark> [#undefined-7](#undefined-7 "mention")

<h2 align="center">#1</h2>

<h3 align="center"><strong>아이템 추가/수정/삭제</strong></h3>

상점형 게시판 오른쪽 위의 \[**아이템 관리**] 버튼 클릭

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2Fdyc7z8DQybuEXSra1HdQ%2Fimage.png?alt=media&#x26;token=3db94a23-8f9d-4505-90db-04d6a009590a" alt=""><figcaption></figcaption></figure>

공통으로 쓰일 재화 단위, 재화의 이미지 설정이 가능합니다.\
상점 게시판에 노출되는 로고 이미지 설정이 가능합니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2F4tudjCUEEU2OKBmvYSPV%2Fimage.png?alt=media&#x26;token=e927f643-9e90-405e-9667-65661cf594d7" alt=""><figcaption></figcaption></figure>

각 아이템을 분류하는 카테고리 설정이 가능합니다.\
게시판에서는 탭으로 표시됩니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2Fct8ZXbw17b9LICzzhDX2%2Fimage.png?alt=media&#x26;token=3351a500-977d-4dbd-820a-9026ac06f7db" alt=""><figcaption></figcaption></figure>

본 기능인 **아이템 목록 관리** 입니다.\
오른쪽의 **\[아이템 추가]** 버튼 클릭 시, 정보값이 빈 아이템이 생성됩니다.\
아이템명, 이미지, 기타 설정을 지정한 후, **\[저장]** 버튼을 클릭합니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FYRlrGpN2Va5K1yv6TfiQ%2Fimage.png?alt=media&#x26;token=a50fedb2-f89f-4b89-9e0b-9894b6df1f3a" alt=""><figcaption></figcaption></figure>

> ### **아이템 기능 종류**
>
> * 기본 - 인벤토리 용, 단순한 이미지 입니다.
> * 스탯 보정 - 스탯을 빼고 더하는 기능을 가진 아이템 제작
>
> {% hint style="danger" %}
> 스탯 보정 아이템의 경우 '스탯/스킬 관리'기능이 없을 시 적용 되지 않습니다.
>
> ![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%209.26.59.png_a8e0b1d9-eddf-43f2-875c-17e1662ade8c?alt=media\&token=2e9e8627-265b-492e-bcac-adeeb27b3312)
> {% endhint %}
>
> * 유저 직접 아이템 등록 - 유저가 아이템을 만들 때 사용할 아이템입니다.
> * 마이룸 꾸미기 용 - 아이템 구매 시, 마이룸(스티커보드)에 아이템이 추가됩니다.&#x20;
>
> {% hint style="danger" %}
> 마이룸 꾸미기 아이템의 경우, 스티커보드 게시판이 없을 시 적용 되지 않습니다.
> {% endhint %}

**\[이벤트중]** 스위치를 활성화 하면 **이벤트 뱃지** 설정이 가능합니다.\
아이템 목록에서 뱃지가 추가됩니다.&#x20;

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2FFrame%2043.png_3d836d56-f19d-4bd4-89e7-190e0c87ffab?alt=media\&token=c950f422-07cb-41aa-be3b-04da15c53123)

<h2 align="center">#2</h2>

<h3 align="center"><strong>NPC 설정</strong></h3>

상점형 게시판 오른쪽 위의 \[**NPC 관리**] 버튼 클릭

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FwE3hCF3yKfUZcdccc7xn%2Fimage.png?alt=media&#x26;token=dfac4a74-a3ae-4fec-aedf-8875f298a5d9" alt=""><figcaption></figcaption></figure>

NPC는 한 명 등록 가능하며, 등록된 대사는 랜덤으로 출력됩니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2F2EmeZWIK8FlLzjVU5wI3%2Fimage.png?alt=media&#x26;token=11884d6d-3cfd-4156-b525-045cf2ec64e4" alt=""><figcaption></figcaption></figure>

<h2 align="center">#3</h2>

<h3 align="center"><strong>뽑기(가챠)시스템</strong></h3>

상점형 게시판 오른쪽 위의 \[**아이템 뽑기 관리**] 버튼 클릭

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FwE3hCF3yKfUZcdccc7xn%2Fimage.png?alt=media&#x26;token=dfac4a74-a3ae-4fec-aedf-8875f298a5d9" alt=""><figcaption></figcaption></figure>

**뽑기세트**를 관리할 수 있습니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FPooAWzcGi7eLUkMfZF2A%2Fimage.png?alt=media&#x26;token=4652157a-e457-46c4-a08a-66a1328c88aa" alt=""><figcaption></figcaption></figure>

### **\[뽑기 재료]**

1회 뽑기 도전 시, 소비되는 재료입니다.\
유저의 인벤토리에서 삭제되는 항목입니다.

### **\[랜덤 아이템]**

해당 뽑기 시스템을 통해 취득 가능한 항목입니다.\
아이템 / 스킬 을 넣을 수 있습니다.\
각 항목은 '중복 삽입'가능하며, 중복삽입으로 확률조정이 가능합니다.

{% hint style="info" %}
EX : 공격력 포션 2개 (40%) /곰인형2개 (40%) / 마법사의 고서 1개(20%)
{% endhint %}

각 아이템은 드롭다운으로 나열되며, 검색 선택 가능합니다.&#x20;

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FsvVdgN5K8maBCFhmeTrw%2Fimage.png?alt=media&#x26;token=ebd012a5-8ab4-4bde-bbce-3b17c96dc3f7" alt=""><figcaption></figcaption></figure>

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%209.33.55.png_c49fd3d4-b759-46ad-826c-3ca093913000?alt=media\&token=47aab07d-0915-4235-9bb6-a7053676ef9d)

### **\[뽑기 방법]**

배너의 뽑기 버튼을 클릭합니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FpIp1aLl9goZV17hva3DF%2Fimage.png?alt=media&#x26;token=b9424a75-0e89-4ec8-8e6c-57d268aadf1a" alt=""><figcaption></figcaption></figure>

자동으로 유저의 인벤토리 아이템/소지 금액과 비교해 구매 가능여부를 알 수 있습니다.

구매 가능 시 모습 > 버튼이 활성화 됩니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%209.41.12.png_f095c567-f171-4b84-81cb-b5708d2aa787?alt=media\&token=0e9b8d5c-8fe0-4262-a22e-e8cf419715ac)

<h2 align="center">#4</h2>

<h3 align="center"><strong>아이템 구매/선물</strong></h3>

원하는 아이템을 클릭합니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%209.42.29.png_6dbbda30-b3af-42d8-a158-ab7d921aab25?alt=media\&token=8805b7f1-37d6-4bc2-acc5-9bc8c15dc382)

구입할 캐릭터 및 수량을 입력하고 유저의 재화와 구매가격을 비교하며 구매할 수 있습니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%209.40.53.png_c1d1b439-7f56-40f0-967d-32dc35a60b14?alt=media\&token=aa6c8e1f-46b2-471e-bae4-a9eac07f5fb2)

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%209.40.58.png_d425e786-f374-443d-9a81-b5a7ed52fe69?alt=media\&token=db730087-556f-43a4-8b92-3f510f9b0664)

{% hint style="warning" %}
소지금보다 구매 품목의 가격이 높은 경우 **구매 불가** 표시가 뜹니다.&#x20;
{% endhint %}

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2F3lm0OyZ5J64MiTGO8v9x%2Fimage.png?alt=media&#x26;token=22fa331d-1c61-4ff1-87e7-21139bda93f0" alt=""><figcaption></figcaption></figure>

추가된 아이템은 캐릭터의 '**인벤토리**'창에 표시되며, **캐릭터 패널**에서 기능 별로 자동분류됩니다.&#x20;

{% hint style="danger" %}
**마이룸 / 스킬장비 / 펫** 아이템의 경우 목록에 해당되는 추가 기능이 있을 때만 활성화 됩니다.&#x20;
{% endhint %}

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FkPF2XZGTHdXNRtc1YvSP%2Fimage.png?alt=media&#x26;token=4f0a8c45-ce75-4766-8ef4-7b859d1a4a8b" alt=""><figcaption></figcaption></figure>

구매한아이템은 인벤토리에서 선물 또는 판매가 가능합니다.\
판매 가격은 '**구매 금액의 50%**'로 고정되며, \
**관리자**는 캐릭터의 인벤토리 창에서 원하는 아이템을 삭제할 수 있습니다.

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FGmXMH2NCuWCAh54glTMO%2Fimage.png?alt=media&#x26;token=adba14da-1993-4965-beb1-059389beb41a" alt=""><figcaption></figcaption></figure>

캐릭터의 페이지에서는 아래에서 확인 가능 합니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.32.12.png_81af93f3-f779-4d66-aa2e-05a1f8598784?alt=media\&token=c7405163-9958-43e3-bb71-a0f4feced1d5)

유저의 선물 메시지가 함께 포함되며, 판매가 가능합니다.&#x20;

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.32.21.png_c8d7d02f-d3af-4dd5-83e0-d29cd7614653?alt=media\&token=0b0ff3e8-daec-4aa8-b87c-fd38d38870ed)