Angular 11 Shopping mall Basic (2)

Angular 11 쇼핑몰 구축: 결제, 배송, 서버 포함

이 가이드는 Angular 11, Tailwind CSS, Express.js, MySQL을 사용하여 간단한 쇼핑몰을 구축하는 방법을 단계별로 안내합니다.

1. 프로젝트 설정:

• Angular 프로젝트 생성:

  ng new my-shopping-mall --style=scss --routing
  cd my-shopping-mall

• Tailwind CSS 설치:

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p

• Express 서버 프로젝트 생성:

  mkdir server
  cd server
  npm init -y
  npm install express mysql2 body-parser cors

2. Tailwind CSS 구성:

• tailwind.config.js 파일에서 content 속성에 Angular 컴포넌트 경로 추가:

  module.exports = {
    content: [
      "./src/**/*.{html,ts,css,scss,sass,less,styl}",
      "./projects/**/*.{html,ts,css,scss,sass,less,styl}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  };

• styles.scss 파일에 Tailwind directives 추가:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

3. Angular 컴포넌트 생성:

• 제품 목록 (ProductListComponent):

  ng generate component product-list

• 제품 상세 정보 (ProductDetailComponent):

  ng generate component product-detail

• 장바구니 (CartComponent):

  ng generate component cart

• 결제 (CheckoutComponent):

  ng generate component checkout

4. Angular 서비스 생성:

• 제품 서비스 (ProductService):

  ng generate service product

• 장바구니 서비스 (CartService):

  ng generate service cart

5. MySQL 데이터베이스 설정:

• MySQL 서버에 my_shopping_mall 데이터베이스 생성
• products 테이블 생성:

  CREATE TABLE products (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    price DECIMAL(10,2) NOT NULL,
    description TEXT,
    imageUrl VARCHAR(255)
  );

• products 테이블에 제품 데이터 추가

6. Express 서버 구축:

• server/index.js 파일 생성:
• const express = require('express'); const mysql = require('mysql2'); const bodyParser = require('body-parser'); const cors = require('cors'); const app = express(); const port = 3000; // MySQL 연결 설정 const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'password', database: 'my_shopping_mall' }); connection.connect((err) => { if (err) throw err; console.log('MySQL Connected!'); }); app.use(bodyParser.json()); app.use(cors()); // API 엔드포인트 app.get('/api/products', (req, res) => { connection.query('SELECT * FROM products', (err, results) => { if (err) throw err; res.json(results); }); }); // 추가 API 엔드포인트 (제품 상세 정보, 장바구니, 결제) app.listen(port, () => { console.log(`Server listening at http://localhost:${port}`); });

7. Angular 서비스 구현:

• product.service.ts:
• import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; interface Product { id: number; name: string; price: number; description: string; imageUrl: string; } @Injectable({ providedIn: 'root' }) export class ProductService { private apiUrl = 'http://localhost:3000/api/products'; constructor(private http: HttpClient) { } getProducts(): Observable<Product[]> { return this.http.get<Product[]>(this.apiUrl); } // getProduct(id: number): Observable<Product> { ... } }
• cart.service.ts:
• import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; interface CartItem { product: any; quantity: number; } @Injectable({ providedIn: 'root' }) export class CartService { private cartItems: CartItem[] = []; private cartItemsSubject = new BehaviorSubject<CartItem[]>(this.cartItems); cartItems$ = this.cartItemsSubject.asObservable(); constructor() { } addToCart(product: any, quantity: number): void { // 장바구니 로직 구현 } // removeFromCart(product: any): void { ... } // clearCart(): void { ... } // getCartTotal(): number { ... } }

8. Angular 컴포넌트 구현:

• product-list.component.ts:
• import { Component, OnInit } from '@angular/core'; import { ProductService } from '../product.service'; import { CartService } from '../cart.service'; @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', styleUrls: ['./product-list.component.scss'] }) export class ProductListComponent implements OnInit { products: any[] = []; constructor( private productService: ProductService, private cartService: CartService ) { } ngOnInit(): void { this.productService.getProducts().subscribe(products => { this.products = products; }); } addToCart(product: any): void { this.cartService.addToCart(product, 1); } }
• product-list.component.html:
• <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> <div *ngFor="let product of products" class="border rounded-lg p-4"> <img [src]="product.imageUrl" alt="{{ product.name }}" class="w-full h-48 object-cover rounded-md"> <h3 class="text-lg font-medium">{{ product.name }}</h3> <p class="text-gray-600">{{ product.price | currency }}</p> <button (click)="addToCart(product)" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> 장바구니 담기 </button> </div> </div>
• 다른 컴포넌트 (product-detail, cart, checkout)도 유사하게 구현.

9. 라우팅 설정:

• app-routing.module.ts:
• import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ProductListComponent } from './product-list/product-list.component'; import { ProductDetailComponent } from './product-detail/product-detail.component'; import { CartComponent } from './cart/cart.component'; import { CheckoutComponent } from './checkout/checkout.component'; const routes: Routes = [ { path: '', component: ProductListComponent }, { path: 'products/:id', component: ProductDetailComponent }, { path: 'cart', component: CartComponent }, { path: 'checkout', component: CheckoutComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

10. 결제 및 배송 기능 구현:

• 결제 기능은 Stripe, PayPal 등의 외부 결제 서비스와 통합하여 구현 가능.
• 배송 기능은 직접 구현하거나 외부 배송 API와 통합하여 구현 가능.

참고:

• 이 가이드는 간단한 쇼핑몰 구축을 위한 기본적인 단계만 제공합니다.
• 실제 쇼핑몰 구축에는 더 많은 기능과 복잡한 로직이 필요할 수 있습니다.

This is a guide to get you started. You'll need to fill in the details and implement the specific features you need for your shopping mall.