bug fix

src/app/modules/user/main/main.component.html

@@ -72,6 +72,10 @@
     </div>
 
     <div>
+      <mat-tab-group class="sm:px-2" [animationDuration]="'0'">
+        <!-- Home -->
+        <mat-tab label="라이브카지노">
+          <ng-template matTabContent>
             <!-- Cards -->
             <div class="flex justify-center mt-10 sm:mt-20">
               <div class="w-full max-w-sm md:max-w-7xl">
@@ -92,14 +96,97 @@
                         [src]="'assets/images/beteran/' + component.id + '.jpg'"
                       />
                       <div class="py-4 px-5">
-                  <div class="text-xl font-semibold">{{ component.name }}</div>
+                        <div class="text-xl font-semibold">
-                  <div class="mt-1 text-secondary">{{ component.summary }}</div>
+                          {{ component.name }}
+                        </div>
+                        <div class="mt-1 text-secondary">
+                          {{ component.summary }}
+                        </div>
                       </div>
                     </a>
                   </ng-container>
                 </div>
               </div>
             </div>
+          </ng-template>
+        </mat-tab>
+
+        <!-- Budget -->
+        <mat-tab label="호텔카지노">
+          <ng-template matTabContent>
+            <!-- Cards -->
+            <div class="flex justify-center mt-10 sm:mt-20">
+              <div class="w-full max-w-sm md:max-w-7xl">
+                <div
+                  class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-16 mt-8"
+                >
+                  <ng-container *ngFor="let component of components">
+                    <a
+                      class="flex flex-col rounded-2xl shadow overflow-hidden bg-card hover:shadow-xl transition-shadow duration-200 ease-in-out"
+                      [href]="
+                        'https://material.angular.io/components/' + component.id
+                      "
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <img
+                        class="w-full object-cover border-b"
+                        [src]="'assets/images/beteran/' + component.id + '.jpg'"
+                      />
+                      <div class="py-4 px-5">
+                        <div class="text-xl font-semibold">
+                          {{ component.name }}
+                        </div>
+                        <div class="mt-1 text-secondary">
+                          {{ component.summary }}
+                        </div>
+                      </div>
+                    </a>
+                  </ng-container>
+                </div>
+              </div>
+            </div>
+          </ng-template>
+        </mat-tab>
+
+        <!-- Team -->
+        <mat-tab label="슬롯게임">
+          <ng-template matTabContent>
+            <!-- Cards -->
+            <div class="flex justify-center mt-10 sm:mt-20">
+              <div class="w-full max-w-sm md:max-w-7xl">
+                <div
+                  class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-16 mt-8"
+                >
+                  <ng-container *ngFor="let component of components">
+                    <a
+                      class="flex flex-col rounded-2xl shadow overflow-hidden bg-card hover:shadow-xl transition-shadow duration-200 ease-in-out"
+                      [href]="
+                        'https://material.angular.io/components/' + component.id
+                      "
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <img
+                        class="w-full object-cover border-b"
+                        [src]="'assets/images/beteran/' + component.id + '.jpg'"
+                      />
+                      <div class="py-4 px-5">
+                        <div class="text-xl font-semibold">
+                          {{ component.name }}
+                        </div>
+                        <div class="mt-1 text-secondary">
+                          {{ component.summary }}
+                        </div>
+                      </div>
+                    </a>
+                  </ng-container>
+                </div>
+              </div>
+            </div>
+          </ng-template>
+        </mat-tab>
+      </mat-tab-group>
     </div>
     <div
       class="flex flex-col items-center px-6 py-10 sm:px-16 sm:pt-18 sm:pb-20 bg-white dark:bg-gray-800 sm:mt-20"

src/app/modules/user/main/main.module.ts

@@ -3,6 +3,7 @@ import { Route, RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTabsModule } from '@angular/material/tabs';
 
 import { FuseCardModule } from '@fuse/components/card';
 import { SharedModule } from 'app/shared/shared.module';
@@ -23,6 +24,7 @@ const mainRoutes: Route[] = [
     MatButtonModule,
     MatIconModule,
     MatFormFieldModule,
+    MatTabsModule,
     FuseCardModule,
     SharedModule,
   ],