OOP를 이용하여 kiosk 시스템 만들기

타입스크립트와 객체 지향 프로그래밍을 이용하여 햄버거 매장에서의 kiosk 시스템을 만들어 보았다.

관리자 사이드와 소비자 사이드를 나누어 작성해주었으며 관리자가 제품을 등록하면 소비자가 등록된 제품중에서 골라 주문을 넣을수 있도록 코드를 짯다.

 

관리자 사이드

interface Menu {
  ref: number;  // 등록된 제품들의 고유 id
  name: string;
  price: number;
}

class Register {
  private menu: Menu[] = [];
  static ref: number = 1; // 1부터 시작하여 제품마다 ref넘버를 순차적으로 부여
  public addMenu(key: string, value: number) {
    const newMenu: Menu = { ref: Register.ref, name: key, price: value };
    Register.ref++;  // 제품이 생성되면 ref 넘버를 +1 시켜주고 다음제품은 +1된 ref넘버를 갖음
    this.menu.push(newMenu);
  }
  public rmMenu(key: string) {
    const menus = this.menu.filter((menu) => menu.name !== key);
    this.menu = [...menus];
  }
  public getMenu(key?: string) {
    if (key) { // 제품이름을 받을경우와 아닐경우를 나눔
      const aMenu = this.menu.find((menu) => menu.name === key);
      return [aMenu];
    }
    return [...this.menu]; // array를 새로 만들어 리턴, 이유는 밑에 설명
  }
}

// 각각의 종류에 맞게 인스턴스 생성
const burger = new Register();
const drink = new Register();
const side = new Register();

먼저 interface를 이용하여 제품 등록에 쓰일 기본 양식을 만들어 주었으며 그 구성으로 "ref"는 제품의 고유 아이디, 그리고 각각의 이름과 가격이 된다.

 

class Register로 넘어오면 interface Menu의 타입을 가진 array의 menu라는 변수를 정의해주었고 ref 넘버는 기본 1부터 시작하여 메뉴가 등록됨에따라 +1씩 되도록 해주었다.

 

addMenu 메소드는 제품의 이름과 가격을 받고 미리 할당된 변수 ref를 이용하여 새 제품을 만든후 menu 어레이에 집어 넣어주는 방식을 사용했다.

 

rmMenu는 제품의 이름을 입력받으면 그 제품만을 제외한 다른 제품을 menu 어레이에 넣어주었다.

 

getMenu의 경우 제품 이름을 파라미터로 받을경우 해당제품만을 리턴해 주었고 그렇지 않을경우 모든 등록된 제품을 리턴해주었다. 

여기서 변수인 menu 어레이를 직접적으로 반환해 주게되면 menu에 등록된 제품들을 조작할수도 있기에 새로운 array를 만들어 그안에 menu의 아이템들을 넣어 리턴해 주었다.

 

 

소비자 사이드

interface myOrders extends Menu { // 위의 interface Menu를 상속시켜줌
  orderNumber: number;
}

class Order {
  static orderNumber: number = 1; // ref넘버와 마찬가지로 주문마다 순차적으로 부여
  private myOrder: myOrders[] = [];
  totalMenu() {
    return [burger.getMenu(), side.getMenu(), drink.getMenu()];
  } // 위에 생성된 burder, side, drink의 인스턴스에 등록된 제품들을 리턴
  
  menuSelect(key: string) {
    const aBurger = this.totalMenu()[0].find((menu) =>
      menu ? menu.name === key : null
    );
    const aSide = this.totalMenu()[1].find((menu) =>
      menu ? menu.name === key : null
    );
    const aDrink = this.totalMenu()[2].find((menu) =>
      menu ? menu.name === key : null
    );
    if (aBurger) {
      this.myOrder.push({ ...aBurger, orderNumber: Order.orderNumber });
    } else if (aSide) {
      this.myOrder.push({ ...aSide, orderNumber: Order.orderNumber });
    } else if (aDrink) {
      this.myOrder.push({ ...aDrink, orderNumber: Order.orderNumber });
    }
  }
  
  getMyOrder() {
    return this.myOrder;
  }
  
  rmOrder(key: string) {
    const newMenus = this.myOrder.filter((menu) => menu.name !== key);
    this.myOrder = [...newMenus];
  }
  
  confirmOrder() {
    const totalPrice = this.getMyOrder()
      .map((item) => item.price)  
      .reduce((a, b) => a + b, 0); // 각아이템들의 가격을 추출후 reduce를 사용하여 모든값을 합
    const order = { orderNumber: Order.orderNumber, totalPrice };
    Order.orderNumber++; // 제품 주문이 완료되면 다음손님을 위해 orderNumber를 +1 시켜줌
    return [...this.getMyOrder(), order]; // 선택된 제품들과 제품 총가격, 오더넘버를 리턴
  }
}

const newOrder = new Order();

소비자 사이드에서의 작동방식은 menuSelect()를 이용하여 제품을 myorder에 담으후 confirmOrder()를 이용하여 선택된 제품들과 제품들의 총가격, 오더넘버를 출력하는 방식이다.

 

menuSelect()에서 제품이름을 받아와 totalMenu()의 0번째 데이터 즉 burger 메뉴에서 조회, 마찬가지로 1번째 데이터인 side 메뉴 그리고 2번째 데이터인 drink메뉴에서 차례로 조회후 일치하는 값을 myOrder에 넣는 방식을 사용하였다. 이유는 마지막에 설명.

 

이렇게 메뉴를 모두 선택하고 나면 confirmOrder()를 통해 선택된 모든 제품들의 가격을 map과 reduce를 이용하여 더해주고 모든제품의 정보들, 제품들의 총가격, 오더넘버를 리턴해주며 다음손님을 위해 orderNumber를 +1 시켜주었다.

제품 주문의 시작때 오더넘버를 + 시켜주게되면 손님이 제품을 취소하게되면 다음 손님의 주문때에는 오더넘버가 건너 뛰게 되기 때문에 주문의 끝에 오더넘버를 + 시켜주었다.

 

메소드 totalOrder, getMyOrder를 통해 등록된 모든메뉴, 내가 선택한메뉴를 조회할수있고 rmOder를 통해 선택 취소도 가능하다. 

 

마무리

totalMenu()에서 하나의 array안에 버거, 사이드, 음료의 집합체 즉 array안에 3개의 array를 또 집어 넣어주었다 보니 menuSelect()에서 3번의 조회가 필요했다. 이렇게 해준 이유는 우리가 매장을 방문하여 직접 kiosk를 사용해보면 버거만을위한 메뉴, 사이드만을 위한 메뉴, 음료만을 위한메뉴 이렇게 각각의 종류에따라 조회가 가능하게끔 만들기위해 totalMenu()안에 3개의 array를 따로 저장해 주었다. 

 

위의 문제들을 모두 해결할 방법으로는 제품을 등록할때 각 객체에 해당하는 종류를 입력해준후 하나의 array로 관리하면 되겠지만 어떤 방식이 나은지는 아직 잘 모르겠다...