From 1ac6e5cf57f6365777f7eff7326da73d849693f5 Mon Sep 17 00:00:00 2001
From: Park Byung Eun <geekdev@naver.com>
Date: Thu, 21 Jul 2022 15:05:19 +0900
Subject: [PATCH] bug fix

---
 src/app/modules/user/main/main.component.html | 141 ++++++++++++++----
 src/app/modules/user/main/main.module.ts      |   2 +
 2 files changed, 116 insertions(+), 27 deletions(-)

diff --git a/src/app/modules/user/main/main.component.html b/src/app/modules/user/main/main.component.html
index 93e2c9a..0451519 100644
--- a/src/app/modules/user/main/main.component.html
+++ b/src/app/modules/user/main/main.component.html
@@ -72,34 +72,121 @@
     </div>
 
     <div>
-      <!-- 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>
+      <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">
+                <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>
-              </a>
-            </ng-container>
-          </div>
-        </div>
-      </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"
diff --git a/src/app/modules/user/main/main.module.ts b/src/app/modules/user/main/main.module.ts
index 240bf6e..35b1523 100644
--- a/src/app/modules/user/main/main.module.ts
+++ b/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,
   ],