🧱 강의 9B : 제품 관리 (Angular)

Source: Dev.to

소개

이 모듈은 전체 CRUD 작업과 프런트엔드 인터페이스와 백엔드 API 간의 원활한 통합을 포함한 완전한 제품 관리 기능을 구축하는 데 중점을 둡니다. 사용자는 제품을 효율적으로 생성, 업데이트, 조회 및 삭제할 수 있으며, 시스템 전반에 걸쳐 부드럽고 반응성이 뛰어난 경험을 유지할 수 있습니다.

관리자는 다음을 수행할 수 있습니다:

• 제품 관리
• 이미 구축한 백엔드 API와 통신

다루는 주제

• Auth Guard
• 제품에 대한 전체 CRUD 페이지
• Product Service
• Product Route
• App Routes 업데이트
• 메뉴 업데이트

Auth Guard

Path: src/app/services/authguard/auth-guard.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AuthApiService } from '../api/auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService {
  constructor(
    private authService: AuthApiService,
    private router: Router
  ) {}

  canActivate(): boolean {
    const token = this.authService.getToken();
    const refreshToken = this.authService.getRefreshToken();

    // If no token and no refresh token, redirect to login
    if (!token && !refreshToken) {
      this.router.navigate(['/auth/login']);
      return false;
    }

    // If no token but refresh token exists, try to refresh
    if (!token && refreshToken) {
      this.attemptTokenRefresh(refreshToken);
      return false; // Wait for refresh attempt
    }

    // If token exists, user is authenticated
    if (token) {
      return true;
    }

    return false;
  }

  private attemptTokenRefresh(refreshToken: string): void {
    this.authService.refresh({ token: '', refreshToken }).subscribe({
      next: () => {
        // Token refreshed successfully, reload current route
        this.router.navigate([this.router.url]);
      },
      error: () => {
        // Refresh failed, redirect to login
        this.authService.logout();
        this.router.navigate(['/auth/login']);
      }
    });
  }
}

PrimeNG을 사용한 UI 페이지

제품 기능을 위해 다음 세 파일을 생성합니다:

• src/app/features/products/product/product.html
• src/app/features/products/product/product.scss (빈 파일)
• src/app/features/products/product/product.ts

product.html

<div class="card">
  <p-toolbar>
    <ng-template pTemplate="left">
      <button pButton label="Manage Products" class="p-button-success"></button>
    </ng-template>
  </p-toolbar>

  <p-table #dt [value]="products" [paginator]="true" [rows]="10" responsiveLayout="scroll">
    <ng-template pTemplate="header">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Description</th>
        <th>Price</th>
        <th>Stock</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
      <tr>
        <td>{{ product.id }}</td>
        <td>{{ product.name }}</td>
        <td>{{ product.description }}</td>
        <td>{{ product.price | currency: 'USD' }}</td>
        <td>{{ product.stock }}</td>
      </tr>
    </ng-template>
  </p-table>

  <p-dialog header="Add Product" [(visible)]="displayDialog" [modal]="true" [responsive]="true">
    <div class="p-fluid">
      <div class="p-field">
        <label for="name">Name</label>
        <input id="name" type="text" pInputText [(ngModel)]="product.name" required />
        <small class="p-error">Name is required.</small>
      </div>

      <div class="p-field">
        <label for="description">Description</label>
        <textarea id="description" pInputTextarea [(ngModel)]="product.description"></textarea>
      </div>

      <div class="p-field">
        <label for="price">Price</label>
        <input id="price" type="number" pInputText [(ngModel)]="product.price" />
      </div>

      <div class="p-field">
        <label for="stock">Stock</label>
        <input id="stock" type="number" pInputText [(ngModel)]="product.stock" />
      </div>
    </div>
  </p-dialog>
</div>

product.scss

product.ts

import { Component, OnInit, signal, ViewChild } from '@angular/core';
import { ConfirmationService, MessageService } from 'primeng/api';
import { Table, TableModule } from 'primeng/table';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ButtonModule } from 'primeng/button';
import { RippleModule } from 'primeng/ripple';
import { ToastModule } from 'primeng/toast';
import { ToolbarModule } from 'primeng/toolbar';
import { RatingModule } from 'primeng/rating';
import { InputTextModule } from 'primeng/inputtext';
import { TextareaModule } from 'primeng/textarea';
import { SelectModule } from 'primeng/select';
import { Radi