✍️Today I Learned

📅 2025-09-18

• 인벤토리, 장비창 구현 계획

---

인벤토리, 장비창 구현 계획

1. 특정 키로 위젯 띄우기

어빌리티로 Push To Layer 사용

• 참고: GAB_ShowWidget_WhenInputPressed
• 경로: ShooterExplorer → Inventory Test
• 구현 방식: 어빌리티 시스템을 활용해 입력 처리와 UI 표시를 연결

// 어빌리티에서 PushContentToLayerForPlayer 사용
// AfterPush에서 위젯 비활성화 이벤트 바인딩

2. ESC로 위젯 닫기

Universal Actions 활용

• 참고: W_LyraGameMenu
• 데이터 테이블: DT_UniversalActions

위젯 설정:

• Is Back Handler: ✅ (ESC로 위젯 닫기)
• Is Back Action Displayed in Action Bar: ✅ (게임 메뉴에 표시)

용도별 설정:

• 인벤토리: Is Back Handler만 체크
• 게임 메뉴: Is Back Action Displayed in Action Bar도 체크 → Escape Menu에 위젯 추가

3. 인벤토리 그리드 구현

TileViewWidget 사용

// Event Construct에서 처리 (위젯이 매번 새로 생성되므로)
void UInventoryWidget::NativeConstruct()
{
    Super::NativeConstruct();
    
    // 전체 아이템 가져오기
    RefreshInventoryGrid();
}

void RefreshInventoryGrid()
{
    // 장착 중이 아닌 아이템만 표시
    for (const auto& Item : AllItems)
    {
        if (!Item.bIsEquipped)
        {
            InventoryTileView->AddItem(Item);
        }
    }
}

아이템 상태 관리

• 장착 여부 확인: bool bIsEquipped 변수 추가
• 필터링 로직: 장착 중 → 장비창, 미장착 → 인벤토리

4. 드래그 앤 드롭 시스템

기본 구조

// UDragDropOperation 상속 클래스 구현
class UItemDragDropOperation : public UDragDropOperation
{
    UPROPERTY()
    FInventoryItem ItemData;
    
    UPROPERTY()
    ESlotType SourceSlotType;
};

// 드래그 감지
FReply OnMouseButtonDown() override
{
    return FReply::Handled().DetectDrag(SharedThis(this), EKeys::LeftMouseButton);
}

// 드래그 시작
void OnDragDetected(const FPointerEvent& PointerEvent, UDragDropOperation*& Operation) override
{
    UItemDragDropOperation* DragOp = NewObject<UItemDragDropOperation>();
    DragOp->ItemData = MyItemData;
    Operation = DragOp;
}

// 드롭 처리
bool OnDrop(const FGeometry& MyGeometry, const FDragDropEvent& DragDropEvent, UDragDropOperation* Operation) override
{
    // 드롭 로직 처리
    return true;
}

5. 장비창 슬롯 시스템

슬롯 위젯 구조

// 스킬 슬롯과 유사한 구조
class UEquipmentSlotWidget : public UUserWidget
{
    UPROPERTY(EditAnywhere, BlueprintReadOnly)
    EEquipmentSlotType SlotType; // Helmet, Armor, Weapon 등
    
    UPROPERTY()
    FInventoryItem CurrentEquippedItem;
};

Enum으로 슬롯 타입 관리

UENUM(BlueprintType)
enum class EEquipmentSlotType : uint8
{
    None,
    Helmet,
    Armor,
    MainHand,
    OffHand,
    // ...
};

6. 장비 변경 프로세스 (이벤트 기반)

전체 플로우

sequenceDiagram
    participant I as 인벤토리 UI
    participant E as 장비창 UI
    participant EC as Equipment Component
    participant Other as 기타 UI들
    
    I->>E: 1. 드래그 앤 드롭
    E->>E: 2. 장비 변경 이벤트 브로드캐스트
    E->>EC: 3. Equipment Component가 이벤트 수신
    EC->>EC: 4. 실제 장착 처리
    EC->>Other: 5. 장비 변경 완료 브로드캐스트
    Other->>I: 6. 인벤토리 UI 갱신
    Other->>E: 7. 장비창 UI 갱신  
    Other->>Other: 8. 스탯 UI 갱신

코드 구현

// 1. 드래그 앤 드롭 완료 시
bool UEquipmentSlotWidget::OnDrop(UDragDropOperation* Operation)
{
    // 2. 장비 변경 요청 이벤트 브로드캐스트
    OnEquipmentChangeRequested.Broadcast(ItemData, MySlotType);
    return true;
}

// 3. Equipment Component에서 이벤트 수신
void UEquipmentComponent::HandleEquipmentChangeRequest(const FInventoryItem& Item, EEquipmentSlotType SlotType)
{
    // 4. 실제 장착 처리
    EquipItem(Item, SlotType);
    
    // 5. 장비 변경 완료 브로드캐스트
    OnEquipmentChanged.Broadcast(SlotType, Item);
}

// 6-8. 각 UI들에서 갱신 처리
void UInventoryWidget::OnEquipmentChanged()
{
    RefreshInventoryGrid(); // 장착된 아이템 필터링
}

void UEquipmentScreenWidget::OnEquipmentChanged()
{
    RefreshEquipmentSlots(); // 장비 슬롯 업데이트
}

void UStatsWidget::OnEquipmentChanged()
{
    UpdateCharacterStats(); // 스탯 재계산
}

핵심 포인트

1. 이벤트 기반 설계의 장점

• 디커플링: UI와 로직 완전 분리
• 확장성: 새로운 시스템 추가 용이
• 재사용성: 컴포넌트 독립적 사용 가능

2. UI 갱신 주의사항

• Drag & Drop ≠ 자동 UI 갱신
• 데이터 변경과 UI 갱신은 별개 프로세스
• 이벤트 시스템으로 연결 필요

3. 위젯 생명주기 고려

• 매번 새로 생성되는 위젯 → NativeConstruct에서 초기화
• 지속적 업데이트 필요 시 → 이벤트 구독 방식 사용

다음 단계

• 아이템 유효성 검사 (슬롯 타입 호환성)
• 드래그 중 시각적 피드백
• 네트워크 동기화 (멀티플레이어)
• 애니메이션 및 사운드 효과

---

💡 느낀 점 (What I Felt)

CommonUI와 Universal Actions 같은 언리얼의 기본 시스템들이 생각보다 강력하다는 걸
깨달았다. 직접 구현하려고 했던 ESC 처리나 레이어 관리 같은 것들이 이미 잘 만들어진
시스템으로 제공되고 있었다. 라이라 프로젝트를 더 자세히 뜯어봐야겠다.

---