GoF 디자인 패턴: 구조 패턴(2) - 컴포지트, 브릿지, 플라이웨이트 | 🚀정처기 실기 대비 문제 + 자바스크립트 예시

// Component: 공통 인터페이스
class FileSystemComponent {
  constructor(name) {
    this.name = name;
  }

  // 모든 컴포넌트가 공통으로 가질 작업
  display(indent = "") {
    throw new Error("display() 메서드는 반드시 구현되어야 합니다.");
  }

  // Composite 객체에서만 의미 있는 메서드들
  add(component) {
    throw new Error("이 객체에는 자식을 추가할 수 없습니다.");
  }

  remove(component) {
    throw new Error("이 객체에서는 자식을 제거할 수 없습니다.");
  }
}

// Leaf: 개별 파일
class File extends FileSystemComponent {
  constructor(name, size) {
    super(name);
    this.size = size;
  }

  display(indent = "") {
    console.log(`${indent}- ${this.name} (${this.size}KB)`);
  }
}

// Composite: 폴더
class Folder extends FileSystemComponent {
  constructor(name) {
    super(name);
    this.children = [];
  }

  add(component) {
    this.children.push(component);
  }

  remove(component) {
    const index = this.children.indexOf(component);
    if (index > -1) {
      this.children.splice(index, 1);
    }
  }

  display(indent = "") {
    console.log(`${indent}+ ${this.name}`);
    // 자식들에게 재귀적으로 display 호출
    this.children.forEach((child) => {
      child.display(indent + "  ");
    });
  }
}

// 클라이언트 코드
const root = new Folder("root");
const documents = new Folder("문서");
const music = new Folder("음악");

const file1 = new File("이력서.docx", 120);
const file2 = new File("프로젝트_계획.pdf", 340);
const song1 = new File("아이유 - 밤편지.mp3", 4500);

documents.add(file1);
documents.add(file2);
music.add(song1);

root.add(documents);
root.add(music);
root.add(new File("중요한_파일.txt", 50));

// 전체 파일 시스템 구조 출력
root.display();

+ root
  + 문서
    - 이력서.docx (120KB)
    - 프로젝트_계획.pdf (340KB)
  + 음악
    - 아이유 - 밤편지.mp3 (4500KB)
  - 중요한_파일.txt (50KB)

// Implementor: 테마 인터페이스
class Theme {
  getColor() {
    throw new Error("getColor() 메서드는 반드시 구현되어야 합니다.");
  }
}

// ConcreteImplementor A: 라이트 테마
class LightTheme extends Theme {
  getColor() {
    return "White";
  }
}

// ConcreteImplementor B: 다크 테마
class DarkTheme extends Theme {
  getColor() {
    return "Black";
  }
}

// Abstraction: UI 요소 추상 클래스
class UIComponent {
  constructor(theme) {
    this.theme = theme;
  }

  render() {
    throw new Error("render() 메서드는 반드시 구현되어야 합니다.");
  }
}

// RefinedAbstraction A: 버튼
class Button extends UIComponent {
  render() {
    console.log(`버튼을 렌더링합니다. (배경색: ${this.theme.getColor()})`);
  }
}

// RefinedAbstraction B: 토글 스위치
class Toggle extends UIComponent {
  render() {
    console.log(
      `토글 스위치를 렌더링합니다. (배경색: ${this.theme.getColor()})`
    );
  }
}

// 클라이언트 코드
const lightTheme = new LightTheme();
const darkTheme = new DarkTheme();

// 라이트 테마를 사용하는 UI 요소들
const lightButton = new Button(lightTheme);
const lightToggle = new Toggle(lightTheme);

lightButton.render(); // 출력: 버튼을 렌더링합니다. (배경색: White)
lightToggle.render(); // 출력: 토글 스위치를 렌더링합니다. (배경색: White)

// 다크 테마를 사용하는 UI 요소들
const darkButton = new Button(darkTheme);
const darkToggle = new Toggle(darkTheme);

darkButton.render(); // 출력: 버튼을 렌더링합니다. (배경색: Black)
darkToggle.render(); // 출력: 토글 스위치를 렌더링합니다. (배경색: Black)

// Flyweight: 공유될 나무 모델
class TreeModel {
  constructor(mesh, texture) {
    // 내재적 상태 (공유 가능, 불변)
    this.mesh = mesh; // 3D 모델 데이터
    this.texture = texture; // 표면 질감 데이터
    console.log(
      `[모델 로딩] ${this.mesh}와 ${this.texture}를 로드했습니다. (메모리 소모 큼)`
    );
  }

  // 외재적 상태를 받아 화면에 그리는 메서드
  draw(x, y, scale) {
    console.log(
      `(${x}, ${y}) 위치에 ${scale} 크기로 '${this.mesh}' 나무를 그립니다.`
    );
  }
}

// FlyweightFactory: 나무 모델 팩토리
class TreeModelFactory {
  constructor() {
    this.models = {};
  }

  getModel(mesh, texture) {
    const key = `${mesh}-${texture}`;
    if (!this.models[key]) {
      this.models[key] = new TreeModel(mesh, texture);
    } else {
      console.log(`[팩토리] 기존 모델 재사용: ${key}`);
    }
    return this.models[key];
  }

  getModelCount() {
    return Object.keys(this.models).length;
  }
}

// Client: 게임 엔진
class Forest {
  constructor() {
    this.trees = [];
    this.factory = new TreeModelFactory();
  }

  // 숲에 나무 심기
  plantTree(x, y, scale, mesh, texture) {
    const model = this.factory.getModel(mesh, texture);
    // 외재적 상태와 공유 모델을 함께 저장
    this.trees.push({ x, y, scale, model });
  }

  // 숲 전체를 그리기
  render() {
    this.trees.forEach(tree => {
      tree.model.draw(tree.x, tree.y, tree.scale);
    });
  }
}

// 실행
const forest = new Forest();

console.log("--- 숲 생성 시작 ---");
forest.plantTree(10, 20, 1.0, "소나무", "pine_texture.png");
forest.plantTree(50, 80, 1.2, "참나무", "oak_texture.png");
forest.plantTree(100, 30, 1.0, "소나무", "pine_texture.png");
forest.plantTree(200, 150, 1.1, "소나무", "pine_texture.png");
console.log("--- 숲 생성 완료 ---");

console.log("
--- 숲 렌더링 시작 ---");
forest.render();
console.log("--- 숲 렌더링 완료 ---");


console.log(`
총 생성된 나무 모델 객체 수: ${forest.factory.getModelCount()}`);

--- 숲 생성 시작 ---
[모델 로딩] 소나무와 pine_texture.png를 로드했습니다. (메모리 소모 큼)
[모델 로딩] 참나무와 oak_texture.png를 로드했습니다. (메모리 소모 큼)
[팩토리] 기존 모델 재사용: 소나무-pine_texture.png
[팩토리] 기존 모델 재사용: 소나무-pine_texture.png
--- 숲 생성 완료 ---

--- 숲 렌더링 시작 ---
(10, 20) 위치에 1 크기로 '소나무' 나무를 그립니다.
(50, 80) 위치에 1.2 크기로 '참나무' 나무를 그립니다.
(100, 30) 위치에 1 크기로 '소나무' 나무를 그립니다.
(200, 150) 위치에 1.1 크기로 '소나무' 나무를 그립니다.
--- 숲 렌더링 완료 ---

총 생성된 나무 모델 객체 수: 2