feat(ux): implement sprint 11 user experience module

src/app/components/product-card/product-card.component.html

@@ -9,16 +9,19 @@
         <span class="stock-badge" [class.out]="item.remainings === 'out'">{{ item.remainings }}</span>
       }
 
-      @if (showFavoritePlaceholder || showComparePlaceholder || showQuickViewPlaceholder) {
+      @if (showFavoriteControl() || showCompareControl() || showShareAction || showQuickViewPlaceholder) {
         <div class="product-actions-overlay">
-          @if (showFavoritePlaceholder) {
-            <button type="button" (click)="onFavoritePlaceholder($event)">Fav</button>
+          @if (showFavoriteControl()) {
+            <button type="button" class="product-action-btn product-action-favorite" [class.active]="isFavorite" (click)="onFavoritePlaceholder($event)">❤</button>
           }
-          @if (showComparePlaceholder) {
-            <button type="button" (click)="onComparePlaceholder($event)">Compare</button>
+          @if (showCompareControl()) {
+            <button type="button" class="product-action-btn" [class.active]="isCompared" (click)="onComparePlaceholder($event)">⇄</button>
+          }
+          @if (showShareAction) {
+            <button type="button" class="product-action-btn" (click)="onShare($event)">↗</button>
           }
           @if (showQuickViewPlaceholder) {
-            <button type="button" (click)="onQuickViewPlaceholder($event)">Quick</button>
+            <button type="button" class="product-action-btn" (click)="onQuickViewPlaceholder($event)">○</button>
           }
         </div>
       }

src/app/components/product-card/product-card.component.scss

@@ -90,16 +90,46 @@
   gap: 6px;
 }
 
-.product-actions-overlay button {
-  min-height: 24px;
+.product-action-btn {
+  width: 30px;
+  height: 30px;
   border: 1px solid rgba(30, 60, 56, 0.15);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.95);
   color: #1e3c38;
-  font-size: 0.72rem;
+  font-size: 0.9rem;
   font-weight: 700;
-  padding: 0 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
+  transition: transform 0.18s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.product-action-btn:hover {
+  transform: translateY(-1px);
+  border-color: #497671;
+}
+
+.product-action-btn.active {
+  border-color: #497671;
+  color: #497671;
+}
+
+.product-action-favorite.active {
+  animation: favorite-pulse 280ms ease-out;
+}
+
+@keyframes favorite-pulse {
+  0% {
+    transform: scale(0.9);
+  }
+  60% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 
 .product-badges-overlay {

src/app/components/product-card/product-card.component.ts

@@ -28,6 +28,11 @@ export class ProductCardComponent {
   @Input() showFavoritePlaceholder = false;
   @Input() showComparePlaceholder = false;
   @Input() showQuickViewPlaceholder = false;
+  @Input() showFavoriteAction = false;
+  @Input() showCompareAction = false;
+  @Input() showShareAction = false;
+  @Input() isFavorite = false;
+  @Input() isCompared = false;
 
   @Output() addToCart = new EventEmitter<{ itemID: number; event: Event }>();
   @Output() preview = new EventEmitter<number>();
@@ -35,6 +40,9 @@ export class ProductCardComponent {
   @Output() favoritePlaceholder = new EventEmitter<number>();
   @Output() comparePlaceholder = new EventEmitter<number>();
   @Output() quickViewPlaceholder = new EventEmitter<number>();
+  @Output() favoriteToggled = new EventEmitter<number>();
+  @Output() compareToggled = new EventEmitter<number>();
+  @Output() shareRequested = new EventEmitter<number>();
 
   readonly getMainImage = getMainImage;
   readonly getDiscountedPrice = getDiscountedPrice;
@@ -52,12 +60,14 @@ export class ProductCardComponent {
     event.preventDefault();
     event.stopPropagation();
     this.favoritePlaceholder.emit(this.item.itemID);
+    this.favoriteToggled.emit(this.item.itemID);
   }
 
   onComparePlaceholder(event: Event): void {
     event.preventDefault();
     event.stopPropagation();
     this.comparePlaceholder.emit(this.item.itemID);
+    this.compareToggled.emit(this.item.itemID);
   }
 
   onQuickViewPlaceholder(event: Event): void {
@@ -65,4 +75,18 @@ export class ProductCardComponent {
     event.stopPropagation();
     this.quickViewPlaceholder.emit(this.item.itemID);
   }
+
+  onShare(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.shareRequested.emit(this.item.itemID);
+  }
+
+  showFavoriteControl(): boolean {
+    return this.showFavoriteAction || this.showFavoritePlaceholder;
+  }
+
+  showCompareControl(): boolean {
+    return this.showCompareAction || this.showComparePlaceholder;
+  }
 }