> For the complete documentation index, see [llms.txt](/llms.txt)

# UI Kit을 사용하여 아이템 인벤토리 구현

조금 더 고급 튜토리얼에도 도전해 봅시다



## UI 구성

![img_1.png](img_1.png)

먼저 씬의 전체 모습을 보여드리겠습니다.

화면 상단에 인벤토리의 용량 사용 현황을 표시하고, 중앙에 보유 아이템 목록, 하단에 아이템을 입수하는 버튼을 배치했습니다.

## 컨텍스트

![img_2.png](img_2.png)

Context 배치에 대해 설명합니다.

A는 GS2-Inventory의 인벤토리 컨텍스트입니다.

B는 GS2-Inventory의 아이템 리스트 컨텍스트입니다.

C는 GS2-Inventory의 아이템 컨텍스트입니다.

D는 GS2-Exchange에서 무상으로 Potion을 입수하는 교환 레이트 컨텍스트입니다.

E는 GS2-Exchange에서 무상으로 Ether를 입수하는 교환 레이트 컨텍스트입니다.

## 구현 해설

### 인벤토리의 소비 용량 표시

![img_3.png](img_3.png) ![img_4.png](img_4.png)

InventoryWindow 노드에는 GS2-Inventory의 인벤토리를 지정한 컨텍스트와, Inventory의 정보를 취득하는 Fetcher가 지정되어 있습니다.

![img_5.png](img_5.png) ![img_6.png](img_6.png)

Text에는 Gs2InventoryInventoryLabel이 설정되어 있으며, `현재 소비 용량 / 최대 용량` 이라는 문자열을 텍스트 컴포넌트의 값에 반영하고 있습니다.

### 아이템 목록 취득

![img_7.png](img_7.png) ![img_8.png](img_8.png)

Gs2InventoryOwnItemSetFetcher로 인벤토리에 포함된 아이템 목록을 취득하고 있습니다.

Gs2InventoryOwnItemSetList에서 100개의 Item 노드를 복제하고,
각 Item 노드가 가진 Gs2InventoryOwnItemSetContext에 보유 중인 아이템의 정보를 컨텍스트 정보로 설정하고 있습니다.

### 아이템 표시

![img_9.png](img_9.png) ![img_10.png](img_10.png)

Item 노드는 Gs2InventoryOwnItemSetContext를 가지고 있지만, 여기에 ScriptableObject는 설정하지 않았습니다.
왜냐하면 Gs2InventoryItemSetList에 의해 값이 설정되기 때문입니다.

Fetcher에서 아이템 모델과 보유 정보를 각각 취득하고 있습니다.

![img_11.png](img_11.png) ![img_12.png](img_12.png)

Name에서는 Gs2InventoryItemModelLabel을 사용하여, 취득한 아이템 이름을 텍스트 컴포넌트에 반영하고 있습니다.

![img_13.png](img_13.png) ![img_14.png](img_14.png)

Count에서는 Gs2InventoryOwnItemSetLabel을 사용하여, 취득한 아이템의 보유 수량을 텍스트 컴포넌트에 반영하고 있습니다.

![img_17.png](img_17.png)

![img_15.png](img_15.png) ![img_16.png](img_16.png)

Use 노드 아래에는 Gs2InventoryItemSetConsumeAction 프리팹이 배치되어 있으며, 소비 수량을 1로 지정해 두었습니다.

소비되는 아이템의 종류는 컨텍스트에 의해 결정되며, 상위 계층에 존재하는 Item 노드에 지정된 아이템이 소비됩니다.

그리고 소비 처리가 성공한 경우, 자기 자신을 비활성화하도록 설정되어 있습니다.

![img_18.png](img_18.png) ![img_19.png](img_19.png)

Use 노드에는 버튼이 배치되어 있으며, 클릭 시 Gs2InventoryItemSetConsumeAction 프리팹을 활성화하도록 설정되어 있습니다.

이를 통해 버튼을 클릭하면 아이템이 1개 소비되는 동작이 됩니다.

### 아이템 입수

아이템을 입수하는 API는 게임 내에서 호출할 수 없으므로, 이번에는 GS2-Exchange에 각 아이템을 무상으로 입수할 수 있는 교환 레이트를 준비하고, 교환을 실행함으로써 아이템을 입수할 수 있도록 설정했습니다.

![img_22.png](img_22.png)

![img_23.png](img_23.png) ![img_24.png](img_24.png)

Acquire Potion 노드 아래에는 Gs2ExchangeExchangeExchangeAction 프리팹이 배치되어 있으며, 교환 수량을 1로 지정해 두었습니다.

그리고 교환 처리가 성공한 경우, 자기 자신을 비활성화하도록 설정되어 있습니다.

![img_20.png](img_20.png) ![img_21.png](img_21.png)

Acquire Potion 노드에는 교환 레이트 컨텍스트가 설정되어 있으며, 교환을 실행할 레이트를 지정하고 있습니다.

버튼 컴포넌트도 배치되어 있으며, 버튼을 클릭하면 Gs2ExchangeExchangeExchangeAction 프리팹을 활성화합니다.

Acquire Ether 노드도 유사한 설정이 되어 있으며, 설정된 교환 레이트가 Potion이 아니라 Ether를 얻을 수 있는 교환 레이트로 되어 있습니다.

## 동작 확인

![img_25.png](img_25.png)

기동하면 처음에는 아무 아이템도 보유하고 있지 않으므로 빈 목록과, 인벤토리의 소비 용량이 0/10 이라는 표시가 나타납니다.

Acquire Potion을 클릭해 봅니다.

![img_26.png](img_26.png)

1회 교환으로 포션을 10개 입수할 수 있는 교환 레이트이므로, 아이템 목록에 Potion이 10개 표시되었습니다.

다음으로 Acquire Ether를 클릭해 봅니다.

![img_27.png](img_27.png)

2번째 행이 추가되고, Ether가 늘어났습니다.

Potion을 다시 10회 교환해 봅니다.

![img_28.png](img_28.png)

Potion은 99개까지 스택할 수 있도록 설정되어 있어, 99개 스택과 11개 스택으로 나뉘었습니다.

99개 스택의 Use 버튼을 클릭하여 Potion을 소비해 봅니다.

![img_29.png](img_29.png)

98개가 됩니다.

다음으로 11개 스택의 Use 버튼을 클릭하여 Potion을 소비해 봅니다.

![img_30.png](img_30.png)

10개가 되었습니다.

## 마치며

노코드로 여기까지 할 수 있다는 것이 조금 놀랍지 않으셨나요?
UI Kit에 대한 해설은 아직 계속됩니다. 부디 이어지는 내용도 확인해 보시기 바랍니다.