이미지 추가, cart 추가

src/app/scene/scene.component.html

@@ -37,3 +37,5 @@
     </div>
   </div>
 </div>
+
+<router-outlet />

src/app/scene/scene.component.ts

@@ -4,11 +4,11 @@ import { FormsModule } from '@angular/forms';
 import Swiper from 'swiper';
 import { Navigation, Pagination, Mousewheel } from 'swiper/modules';
 import { API } from '../AxiosRestApi';
-import { Router } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
 @Component({
   selector: 'main-coupang',
   standalone: true,
-  imports: [FormsModule, CommonModule],
+  imports: [FormsModule, CommonModule, RouterOutlet],
   templateUrl: './scene.component.html',
   styleUrl: './scene.component.css',
 })
@@ -92,11 +92,13 @@ export class scene implements OnInit {
                 const result = this.startX - lastX;
                 if (result > 100) {
                   //left
-                  alert('left');
+                  this.router.navigate(['cart']);
                 } else if (result <= -100) {
                   //right
-                  console.log('right');
-                  this.router.navigate(['/cart']);
+                  if (this.swiper) {
+                    const id = this.slides[this.swiper.activeIndex].id;
+                    this.api.addCart(1, id);
+                  }
                 }
                 this.startX = 0;
                 const sceneElement = document.querySelector(

src/app/AxiosRestApi.ts

@@ -40,4 +40,20 @@ export class API {
         console.log(e);
       });
   };
+  public getCart = (usrId: number) => {
+    let usrLink = this.link.concat('/cart/').concat(usrId.toString());
+    return axios.get(usrLink, {
+      headers: {
+        'Content-Type': `application/json`,
+        'ngrok-skip-browser-warning': '69420',
+      },
+    });
+  };
+  public addCart = (usrId: number, prodId: number) => {
+    let usrLink = this.link.concat('/cart');
+    return axios.post(usrLink, {
+      user_id: usrId,
+      product_id: prodId,
+    });
+  };
 }

src/app/app.component.html

@@ -1,5 +1,3 @@
 <main class="main">
-  <main-coupang></main-coupang>
+  <router-outlet />
 </main>
-
-<router-outlet />

src/app/app.component.ts

@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
 import { scene } from './scene/scene.component';
+import { CartComponent } from './cart/cart.component';
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, scene],
+  imports: [RouterOutlet, scene, CartComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
-export class AppComponent {}
+export class AppComponent {
+  constructor(private router: Router) {
+    this.router.navigate(['scene']);
+  }
+}

src/app/app.module.ts

@@ -2,10 +2,11 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { scene } from './scene/scene.component';
+import { CartComponent } from './cart/cart.component';
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
+  declarations: [AppComponent, CartComponent, scene],
+  imports: [BrowserModule, CartComponent, scene],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/app.routes.ts

@@ -1,8 +1,9 @@
 import { Routes } from '@angular/router';
 import { AppComponent } from './app.component';
-import { BasketComponent } from './basket/basket.component';
-
+import { CartComponent } from './cart/cart.component';
+import { scene } from './\bscene/scene.component';
 export const routes: Routes = [
   { path: '', component: AppComponent },
-  { path: 'cart', component: BasketComponent },
+  { path: 'scene', component: scene },
+  { path: 'cart', component: CartComponent },
 ];