[3팀 여진석] Chapter 1-1. 프레임워크 없이 SPA 만들기

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ on:
   workflow_dispatch:
 
 jobs:
-  unit:
+  hard-basic:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -23,12 +23,31 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: 'pnpm'
+          cache: "pnpm"
+      - run: |
+          pnpm install
+          pnpm run test:hard:basic
+  hard-advanced:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
       - name: Install dependencies
         run: |
           pnpm install
-          pnpm run test
-  e2e:
+          npx playwright install --with-deps
+          pnpm run test:hard:advanced
+  easy-basic:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
@@ -42,9 +61,31 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: 'pnpm'
+          cache: "pnpm"
       - name: Install dependencies
         run: |
           pnpm install
           npx playwright install --with-deps
-          pnpm run test:e2e
+          pnpm run test:easy:basic
+  easy-advanced:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+      - name: Install dependencies
+        run: |
+          pnpm install
+          npx playwright install --with-deps
+          pnpm run test:easy:advanced
+
+#

.github/workflows/deploy.yml

@@ -0,0 +1,38 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+        env:
+          NODE_ENV: production
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        if: github.ref == 'refs/heads/main'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

componet.ts

@@ -0,0 +1,67 @@
+export abstract class Component<P extends object = {}, S extends object = {}> {
+  public isMounted = false;
+
+  el: HTMLElement;
+
+  parentEl?: HTMLElement;
+
+  protected _state: S;
+
+  get state(): S {
+    return this._state;
+  }
+
+  set state(newState: S) {
+    this._state = newState;
+    this.update();
+  }
+
+  protected _props: P;
+
+  constructor(props?: P, initialState?: S) {
+    this._props = props ?? ({} as P);
+    this._state = initialState ?? ({} as S); // state 초기화 추가
+    this.el = this.render();
+  }
+
+  get props(): P {
+    return this._props;
+  }
+
+  abstract render(): HTMLElement;
+
+  update() {
+    const newEl = this.render();
+    this.el.replaceWith(newEl);
+    this.el = newEl;
+    this.onUpdate();
+  }
+
+  mount(target: HTMLElement) {
+    if (this.isMounted) {
+      return;
+    }
+    this.parentEl = target;
+
+    this.parentEl.appendChild(this.el);
+    this.isMounted = true;
+    this.componentDidMount();
+  }
+
+  unmount() {
+    if (!this.isMounted) {
+      return;
+    }
+
+    this.componentWillUnmount();
+
+    this.el.remove();
+
+    this.isMounted = false;
+  }
+
+  onUpdate() {}
+
+  componentDidMount() {}
+  componentWillUnmount() {}
+}