class Controller{
    constructor() {
        this.ACardList = new CardList();
        this.BCardList = new CardList();
    }

    addCard(card) {
        this.ACardList.addCard(cardInfo);
    }

    moveAtoB(cardInfo) {
        this.ACardList.remove(cardInfo);
        this.BCardList.add(cardInfo);
    }
}


class CardList {
    constructor() {
        this.cardList = [];
    }

    addCard(cardInfo) {
        this.cardList.add(new Card(cardInfo));
    }

    removeCard(cardInfo) {
        // 리스트에서 일치하는 거 List에서 삭제
    }
}

class Card {
    constructor(cardInfo) {
        this.cardInfo = cardInfo ;
    }

    addBtnEvent() {
        // card UI 에 버튼이 있습니다
        const btn = document.querySelector("btn");
        btn.addEventListener("click", (event) => {
            // Controller 안에 있는 moveAtoB(this.cardInfo)를 호출해서
            // aList => bList 로 옮기고 싶습니다..
        });
    }
}

제 나름대로 구조를 생각했는데, 안되네요..

Controller 라는 중개 매개체(?)를 가지고, Card UI는 Button 이 있고, AList에 담겨 있는데, Button을 누르면 BList로 옮기고 싶습니다..

가능한 구조일까요..?