추상 팩토리 abstract factory 패턴 - 자바스크립트 예제

// Abstract Product A: Button
class Button {
  paint() {
    throw new Error("paint() must be implemented.");
  }
}

// Concrete Product A1: LightButton
class LightButton extends Button {
  paint() {
    console.log("🎨 라이트 테마 버튼을 그립니다. ☀️");
  }
}

// Concrete Product A2: DarkButton
class DarkButton extends Button {
  paint() {
    console.log("🎨 다크 테마 버튼을 그립니다. 🌙");
  }
}

// Abstract Product B: Checkbox
class Checkbox {
  paint() {
    throw new Error("paint() must be implemented.");
  }
}

// Concrete Product B1: LightCheckbox
class LightCheckbox extends Checkbox {
  paint() {
    console.log("✅ 라이트 테마 체크박스를 그립니다. ☀️");
  }
}

// Concrete Product B2: DarkCheckbox
class DarkCheckbox extends Checkbox {
  paint() {
    console.log("✅ 다크 테마 체크박스를 그립니다. 🌙");
  }
}

// Abstract Factory
class GUIFactory {
  createButton() {
    throw new Error("createButton() must be implemented.");
  }
  createCheckbox() {
    throw new Error("createCheckbox() must be implemented.");
  }
}

// Concrete Factory 1: LightThemeFactory
class LightThemeFactory extends GUIFactory {
  createButton() {
    return new LightButton();
  }
  createCheckbox() {
    return new LightCheckbox();
  }
}

// Concrete Factory 2: DarkThemeFactory
class DarkThemeFactory extends GUIFactory {
  createButton() {
    return new DarkButton();
  }
  createCheckbox() {
    return new DarkCheckbox();
  }
}

// Client Code 🎯
function renderUI(factory) {
  const button = factory.createButton();
  const checkbox = factory.createCheckbox();
  button.paint();
  checkbox.paint();
}

// 라이트 테마로 UI 렌더링 ☀️
console.log("--- 라이트 모드 UI ---");
const lightFactory = new LightThemeFactory();
renderUI(lightFactory);
// 🎨 라이트 테마 버튼을 그립니다. ☀️
// ✅ 라이트 테마 체크박스를 그립니다. ☀️

// 다크 테마로 UI 렌더링 🌙
console.log("\n--- 다크 모드 UI ---");
const darkFactory = new DarkThemeFactory();
renderUI(darkFactory);
// 🎨 다크 테마 버튼을 그립니다. 🌙
// ✅ 다크 테마 체크박스를 그립니다. 🌙