From 3329317f2769841295a49d4626c7c7dab65ad5f8 Mon Sep 17 00:00:00 2001
From: EngiBeerHub <engibeer0422@gmail.com>
Date: Mon, 9 Oct 2023 15:20:56 +0900
Subject: [PATCH 1/7] [feature/9] ADD: BeerDetailComponent

---
 src/app/app.module.ts                         |  2 ++
 .../beer-detail/beer-detail.component.html    |  1 +
 .../beer-detail/beer-detail.component.scss    |  0
 .../beer-detail/beer-detail.component.spec.ts | 21 +++++++++++++++++++
 .../beer-detail/beer-detail.component.ts      |  7 +++++++
 5 files changed, 31 insertions(+)
 create mode 100644 src/app/components/pages/beer-detail/beer-detail.component.html
 create mode 100644 src/app/components/pages/beer-detail/beer-detail.component.scss
 create mode 100644 src/app/components/pages/beer-detail/beer-detail.component.spec.ts
 create mode 100644 src/app/components/pages/beer-detail/beer-detail.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 697268f..43278eb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { BeerCardComponent } from './components/presentationals/beer-card/beer-card.component';
 import { RandomBeerComponent } from './components/containers/random-beer/random-beer.component';
 import { BeerListComponent } from './components/containers/beer-list/beer-list.component';
+import { BeerDetailComponent } from './components/pages/beer-detail/beer-detail.component';
 
 @NgModule({
   declarations: [
@@ -28,6 +29,7 @@ import { BeerListComponent } from './components/containers/beer-list/beer-list.c
     BeerCardComponent,
     RandomBeerComponent,
     BeerListComponent,
+    BeerDetailComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.html b/src/app/components/pages/beer-detail/beer-detail.component.html
new file mode 100644
index 0000000..fd9463a
--- /dev/null
+++ b/src/app/components/pages/beer-detail/beer-detail.component.html
@@ -0,0 +1 @@
+<p>detail works!</p>
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.scss b/src/app/components/pages/beer-detail/beer-detail.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.spec.ts b/src/app/components/pages/beer-detail/beer-detail.component.spec.ts
new file mode 100644
index 0000000..29fbd6e
--- /dev/null
+++ b/src/app/components/pages/beer-detail/beer-detail.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BeerDetailComponent } from './beer-detail.component';
+
+describe('DetailComponent', () => {
+  let component: BeerDetailComponent;
+  let fixture: ComponentFixture<BeerDetailComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BeerDetailComponent],
+    });
+    fixture = TestBed.createComponent(BeerDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.ts b/src/app/components/pages/beer-detail/beer-detail.component.ts
new file mode 100644
index 0000000..cae6a37
--- /dev/null
+++ b/src/app/components/pages/beer-detail/beer-detail.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './beer-detail.component.html',
+  styleUrls: ['./beer-detail.component.scss'],
+})
+export class BeerDetailComponent {}

From 70e01e45458a068c1706fc542c4abe9f410fea52 Mon Sep 17 00:00:00 2001
From: EngiBeerHub <engibeer0422@gmail.com>
Date: Mon, 9 Oct 2023 15:53:19 +0900
Subject: [PATCH 2/7] [feature/9] fixed routing setting

---
 src/app/app-routing.module.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 7cece57..df3c7c1 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { TopPageComponent } from './components/pages/top/top-page.component';
+import { BeerDetailComponent } from './components/pages/beer-detail/beer-detail.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: '/top', pathMatch: 'prefix' },
+  { path: '', redirectTo: '/top', pathMatch: 'full' },
   { path: 'top', component: TopPageComponent },
+  { path: 'detail', component: BeerDetailComponent },
 ];
 
 @NgModule({

From 96435be414861570f76a3d33b2c3853bf6cdf8be Mon Sep 17 00:00:00 2001
From: EngiBeerHub <engibeer0422@gmail.com>
Date: Mon, 9 Oct 2023 16:59:19 +0900
Subject: [PATCH 3/7] [feature/9] ADD: refactored routing structure

---
 src/app/app-routing.module.ts                 | 13 +++++++++---
 src/app/app.module.ts                         |  2 ++
 .../random-beer/random-beer.component.html    |  1 +
 .../random-beer/random-beer.component.scss    |  1 +
 .../random-beer/random-beer.component.ts      | 10 ++++++++-
 .../components/pages/home/home.component.html |  9 ++++++++
 .../components/pages/home/home.component.scss | 18 ++++++++++++++++
 .../pages/home/home.component.spec.ts         | 21 +++++++++++++++++++
 .../components/pages/home/home.component.ts   |  7 +++++++
 .../pages/top/top-page.component.html         | 11 ++--------
 .../pages/top/top-page.component.scss         | 16 --------------
 11 files changed, 80 insertions(+), 29 deletions(-)
 create mode 100644 src/app/components/pages/home/home.component.html
 create mode 100644 src/app/components/pages/home/home.component.scss
 create mode 100644 src/app/components/pages/home/home.component.spec.ts
 create mode 100644 src/app/components/pages/home/home.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index df3c7c1..3d8a1a2 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,11 +2,18 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { TopPageComponent } from './components/pages/top/top-page.component';
 import { BeerDetailComponent } from './components/pages/beer-detail/beer-detail.component';
+import { HomeComponent } from './components/pages/home/home.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: '/top', pathMatch: 'full' },
-  { path: 'top', component: TopPageComponent },
-  { path: 'detail', component: BeerDetailComponent },
+  {
+    path: '',
+    component: TopPageComponent,
+    children: [
+      { path: '', redirectTo: '/home', pathMatch: 'full' },
+      { path: 'home', component: HomeComponent },
+      { path: 'detail', component: BeerDetailComponent },
+    ],
+  },
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 43278eb..23c85a7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,6 +21,7 @@ import { BeerCardComponent } from './components/presentationals/beer-card/beer-c
 import { RandomBeerComponent } from './components/containers/random-beer/random-beer.component';
 import { BeerListComponent } from './components/containers/beer-list/beer-list.component';
 import { BeerDetailComponent } from './components/pages/beer-detail/beer-detail.component';
+import { HomeComponent } from './components/pages/home/home.component';
 
 @NgModule({
   declarations: [
@@ -30,6 +31,7 @@ import { BeerDetailComponent } from './components/pages/beer-detail/beer-detail.
     RandomBeerComponent,
     BeerListComponent,
     BeerDetailComponent,
+    HomeComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/containers/random-beer/random-beer.component.html b/src/app/components/containers/random-beer/random-beer.component.html
index 8ca327e..9a99327 100644
--- a/src/app/components/containers/random-beer/random-beer.component.html
+++ b/src/app/components/containers/random-beer/random-beer.component.html
@@ -7,5 +7,6 @@
     [beer]="beer"
     [imageUrl]="imageUrl"
     [error]="error"
+    (click)="onClickCard()"
   ></app-beer-card>
 </ng-template>
diff --git a/src/app/components/containers/random-beer/random-beer.component.scss b/src/app/components/containers/random-beer/random-beer.component.scss
index a106375..668c51e 100644
--- a/src/app/components/containers/random-beer/random-beer.component.scss
+++ b/src/app/components/containers/random-beer/random-beer.component.scss
@@ -13,5 +13,6 @@
   app-beer-card {
     margin-top: 8px;
     max-width: 936px;
+    cursor: pointer;
   }
 }
diff --git a/src/app/components/containers/random-beer/random-beer.component.ts b/src/app/components/containers/random-beer/random-beer.component.ts
index 54c9dca..a8dc665 100644
--- a/src/app/components/containers/random-beer/random-beer.component.ts
+++ b/src/app/components/containers/random-beer/random-beer.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { Beer } from 'src/app/models/beer';
 import { BeerService } from 'src/app/services/beer.service';
 
@@ -14,7 +15,10 @@ export class RandomBeerComponent implements OnInit {
   imageUrl?: string;
   readonly altImageUrl = 'https://images.punkapi.com/v2/keg.png';
 
-  constructor(private beerService: BeerService) {}
+  constructor(
+    private beerService: BeerService,
+    private router: Router,
+  ) {}
 
   ngOnInit(): void {
     // start loading to show spinner
@@ -37,4 +41,8 @@ export class RandomBeerComponent implements OnInit {
       complete: () => console.log('getRandomBeer completed.'),
     });
   }
+
+  onClickCard() {
+    this.router.navigate(['/detail']);
+  }
 }
diff --git a/src/app/components/pages/home/home.component.html b/src/app/components/pages/home/home.component.html
new file mode 100644
index 0000000..c2fe0d4
--- /dev/null
+++ b/src/app/components/pages/home/home.component.html
@@ -0,0 +1,9 @@
+<div class="main-content">
+  <h1>Today's Beer</h1>
+
+  <app-random-beer></app-random-beer>
+
+  <h1>All Beers</h1>
+
+  <app-beer-list></app-beer-list>
+</div>
diff --git a/src/app/components/pages/home/home.component.scss b/src/app/components/pages/home/home.component.scss
new file mode 100644
index 0000000..8fbe35a
--- /dev/null
+++ b/src/app/components/pages/home/home.component.scss
@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+@import '../../../../styles.scss';
+
+.main-content {
+  max-width: 1400px;
+  margin: 0 auto;
+
+  h1 {
+    font-size: 32px;
+    margin-top: 24px;
+    margin-left: 8px;
+    color: mat.get-color-from-palette($primary);
+  }
+}
+
+app-random-beer {
+  margin: 0 8px;
+}
diff --git a/src/app/components/pages/home/home.component.spec.ts b/src/app/components/pages/home/home.component.spec.ts
new file mode 100644
index 0000000..ba1b4a3
--- /dev/null
+++ b/src/app/components/pages/home/home.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [HomeComponent]
+    });
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/pages/home/home.component.ts b/src/app/components/pages/home/home.component.ts
new file mode 100644
index 0000000..eee9413
--- /dev/null
+++ b/src/app/components/pages/home/home.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss'],
+})
+export class HomeComponent {}
diff --git a/src/app/components/pages/top/top-page.component.html b/src/app/components/pages/top/top-page.component.html
index d68aecd..773f558 100644
--- a/src/app/components/pages/top/top-page.component.html
+++ b/src/app/components/pages/top/top-page.component.html
@@ -9,13 +9,6 @@
 </header>
 
 <main>
-  <div class="main-content">
-    <h1>Today's Beer</h1>
-
-    <app-random-beer></app-random-beer>
-
-    <h1>All Beers</h1>
-
-    <app-beer-list></app-beer-list>
-  </div>
+  <!-- child router -->
+  <router-outlet></router-outlet>
 </main>
diff --git a/src/app/components/pages/top/top-page.component.scss b/src/app/components/pages/top/top-page.component.scss
index a03471b..a97c2c0 100644
--- a/src/app/components/pages/top/top-page.component.scss
+++ b/src/app/components/pages/top/top-page.component.scss
@@ -19,20 +19,4 @@ main {
   // make only main content scrollable
   // height: calc(100% - 64px);
   // overflow-y: scroll;
-
-  .main-content {
-    max-width: 1400px;
-    margin: 0 auto;
-
-    h1 {
-      font-size: 32px;
-      margin-top: 24px;
-      margin-left: 8px;
-      color: mat.get-color-from-palette($primary);
-    }
-  }
-
-  app-random-beer {
-    margin: 0 8px;
-  }
 }

From 36086bba6d0f3ad4e43a48e9c0d1ecc4e7291cf9 Mon Sep 17 00:00:00 2001
From: EngiBeerHub <engibeer0422@gmail.com>
Date: Mon, 9 Oct 2023 17:59:41 +0900
Subject: [PATCH 4/7] [feature/9] ADD: pass beer from home to detail

---
 .../random-beer/random-beer.component.html    |  2 +-
 .../random-beer/random-beer.component.ts      |  8 +++++--
 .../beer-detail/beer-detail.component.html    |  2 +-
 .../beer-detail/beer-detail.component.ts      | 21 +++++++++++++++++--
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/app/components/containers/random-beer/random-beer.component.html b/src/app/components/containers/random-beer/random-beer.component.html
index 9a99327..551852c 100644
--- a/src/app/components/containers/random-beer/random-beer.component.html
+++ b/src/app/components/containers/random-beer/random-beer.component.html
@@ -7,6 +7,6 @@
     [beer]="beer"
     [imageUrl]="imageUrl"
     [error]="error"
-    (click)="onClickCard()"
+    (click)="onClickCard(beer!)"
   ></app-beer-card>
 </ng-template>
diff --git a/src/app/components/containers/random-beer/random-beer.component.ts b/src/app/components/containers/random-beer/random-beer.component.ts
index a8dc665..33e732e 100644
--- a/src/app/components/containers/random-beer/random-beer.component.ts
+++ b/src/app/components/containers/random-beer/random-beer.component.ts
@@ -42,7 +42,11 @@ export class RandomBeerComponent implements OnInit {
     });
   }
 
-  onClickCard() {
-    this.router.navigate(['/detail']);
+  /**
+   * Handle clicking card
+   * @param beer shown beer
+   */
+  onClickCard(beer: Beer) {
+    this.router.navigate(['/detail'], { state: { beer: beer } });
   }
 }
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.html b/src/app/components/pages/beer-detail/beer-detail.component.html
index fd9463a..fc844e6 100644
--- a/src/app/components/pages/beer-detail/beer-detail.component.html
+++ b/src/app/components/pages/beer-detail/beer-detail.component.html
@@ -1 +1 @@
-<p>detail works!</p>
+<p>{{ beer?.name }}</p>
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.ts b/src/app/components/pages/beer-detail/beer-detail.component.ts
index cae6a37..fe5bf5d 100644
--- a/src/app/components/pages/beer-detail/beer-detail.component.ts
+++ b/src/app/components/pages/beer-detail/beer-detail.component.ts
@@ -1,7 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Beer } from 'src/app/models/beer';
 
 @Component({
   templateUrl: './beer-detail.component.html',
   styleUrls: ['./beer-detail.component.scss'],
 })
-export class BeerDetailComponent {}
+export class BeerDetailComponent implements OnInit {
+  beer?: Beer;
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.beer = (history.state as BeerState).beer;
+  }
+}
+
+/**
+ * state passed from parent component
+ */
+export interface BeerState {
+  beer: Beer;
+}

From 63fe56b686073b0a58189ae5279d156a0a61a4bc Mon Sep 17 00:00:00 2001
From: EngiBeerHub <engibeer0422@gmail.com>
Date: Mon, 9 Oct 2023 18:58:50 +0900
Subject: [PATCH 5/7] [feature/9] WIP: refactoring structures

---
 .../containers/beer-list/beer-list.component.html |  7 +------
 .../containers/beer-list/beer-list.component.scss |  3 ++-
 .../containers/beer-list/beer-list.component.ts   |  1 +
 .../random-beer/random-beer.component.scss        |  1 +
 .../pages/beer-detail/beer-detail.component.html  |  8 +++++++-
 .../pages/beer-detail/beer-detail.component.ts    |  3 ++-
 src/app/components/pages/home/home.component.scss | 15 +++++----------
 .../components/pages/top/top-page.component.html  |  6 ++++--
 .../components/pages/top/top-page.component.scss  |  5 +++++
 .../beer-card/beer-card.component.html            |  4 +++-
 .../beer-card/beer-card.component.scss            |  2 +-
 11 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/app/components/containers/beer-list/beer-list.component.html b/src/app/components/containers/beer-list/beer-list.component.html
index 6f55baf..c46093d 100644
--- a/src/app/components/containers/beer-list/beer-list.component.html
+++ b/src/app/components/containers/beer-list/beer-list.component.html
@@ -41,13 +41,8 @@
   >
     <mat-grid-tile *ngFor="let beer of displayedBeers">
       <app-beer-card
-        class="beer-card"
         [beer]="beer"
-        [imageUrl]="
-          beer.image_url
-            ? beer.image_url
-            : 'https://images.punkapi.com/v2/keg.png'
-        "
+        [imageUrl]="beer.image_url ? beer.image_url : altImageUrl"
       ></app-beer-card>
     </mat-grid-tile>
   </mat-grid-list>
diff --git a/src/app/components/containers/beer-list/beer-list.component.scss b/src/app/components/containers/beer-list/beer-list.component.scss
index 844830a..9478623 100644
--- a/src/app/components/containers/beer-list/beer-list.component.scss
+++ b/src/app/components/containers/beer-list/beer-list.component.scss
@@ -17,9 +17,10 @@ mat-chip-listbox {
   align-items: center;
 }
 
-.beer-card {
+app-beer-card {
   // necessary to show outline of cards when using guttersize
   margin: 0 8px;
+  height: 456px;
 }
 
 mat-paginator {
diff --git a/src/app/components/containers/beer-list/beer-list.component.ts b/src/app/components/containers/beer-list/beer-list.component.ts
index 27fff4f..f98453c 100644
--- a/src/app/components/containers/beer-list/beer-list.component.ts
+++ b/src/app/components/containers/beer-list/beer-list.component.ts
@@ -27,6 +27,7 @@ export class BeerListComponent implements OnInit {
   filteredBeers?: Beer[]; // Beers filtered by chip
   displayedBeers?: Beer[]; // Beers displayed filtered and paged
   isLoading?: boolean; // show spinner when true
+  altImageUrl = 'https://images.punkapi.com/v2/keg.png';
 
   /** Paginator */
   @ViewChild('paginator') paginator!: MatPaginator;
diff --git a/src/app/components/containers/random-beer/random-beer.component.scss b/src/app/components/containers/random-beer/random-beer.component.scss
index 668c51e..f1c7992 100644
--- a/src/app/components/containers/random-beer/random-beer.component.scss
+++ b/src/app/components/containers/random-beer/random-beer.component.scss
@@ -11,6 +11,7 @@
   }
 
   app-beer-card {
+    height: 456px;
     margin-top: 8px;
     max-width: 936px;
     cursor: pointer;
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.html b/src/app/components/pages/beer-detail/beer-detail.component.html
index fc844e6..b4a49b6 100644
--- a/src/app/components/pages/beer-detail/beer-detail.component.html
+++ b/src/app/components/pages/beer-detail/beer-detail.component.html
@@ -1 +1,7 @@
-<p>{{ beer?.name }}</p>
+<app-beer-card
+  [beer]="beer"
+  [imageUrl]="beer.image_url ? beer.image_url : altImageUrl"
+></app-beer-card>
+
+<h1>First Brewed</h1>
+<span>{{ beer.first_brewed }}</span>
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.ts b/src/app/components/pages/beer-detail/beer-detail.component.ts
index fe5bf5d..fe9bf9e 100644
--- a/src/app/components/pages/beer-detail/beer-detail.component.ts
+++ b/src/app/components/pages/beer-detail/beer-detail.component.ts
@@ -7,7 +7,8 @@ import { Beer } from 'src/app/models/beer';
   styleUrls: ['./beer-detail.component.scss'],
 })
 export class BeerDetailComponent implements OnInit {
-  beer?: Beer;
+  beer!: Beer;
+  altImageUrl = 'https://images.punkapi.com/v2/keg.png';
 
   constructor(private router: Router) {}
 
diff --git a/src/app/components/pages/home/home.component.scss b/src/app/components/pages/home/home.component.scss
index 8fbe35a..bfda772 100644
--- a/src/app/components/pages/home/home.component.scss
+++ b/src/app/components/pages/home/home.component.scss
@@ -1,16 +1,11 @@
 @use '@angular/material' as mat;
 @import '../../../../styles.scss';
 
-.main-content {
-  max-width: 1400px;
-  margin: 0 auto;
-
-  h1 {
-    font-size: 32px;
-    margin-top: 24px;
-    margin-left: 8px;
-    color: mat.get-color-from-palette($primary);
-  }
+h1 {
+  font-size: 32px;
+  margin-top: 24px;
+  margin-left: 8px;
+  color: mat.get-color-from-palette($primary);
 }
 
 app-random-beer {
diff --git a/src/app/components/pages/top/top-page.component.html b/src/app/components/pages/top/top-page.component.html
index 773f558..0a7f04e 100644
--- a/src/app/components/pages/top/top-page.component.html
+++ b/src/app/components/pages/top/top-page.component.html
@@ -9,6 +9,8 @@
 </header>
 
 <main>
-  <!-- child router -->
-  <router-outlet></router-outlet>
+  <div class="main-content">
+    <!-- child router -->
+    <router-outlet></router-outlet>
+  </div>
 </main>
diff --git a/src/app/components/pages/top/top-page.component.scss b/src/app/components/pages/top/top-page.component.scss
index a97c2c0..a3e06cd 100644
--- a/src/app/components/pages/top/top-page.component.scss
+++ b/src/app/components/pages/top/top-page.component.scss
@@ -19,4 +19,9 @@ main {
   // make only main content scrollable
   // height: calc(100% - 64px);
   // overflow-y: scroll;
+
+  .main-content {
+    max-width: 1400px;
+    margin: 0 auto;
+  }
 }
diff --git a/src/app/components/presentationals/beer-card/beer-card.component.html b/src/app/components/presentationals/beer-card/beer-card.component.html
index c568ef5..b1de9e3 100644
--- a/src/app/components/presentationals/beer-card/beer-card.component.html
+++ b/src/app/components/presentationals/beer-card/beer-card.component.html
@@ -14,7 +14,9 @@
 
       <mat-card-title>{{ beer?.name }}</mat-card-title>
 
-      <mat-card-subtitle>{{ beer?.tagline }}</mat-card-subtitle>
+      <mat-card-subtitle
+        >{{ beer?.tagline }}({{ beer?.abv }}%)</mat-card-subtitle
+      >
     </mat-card-header>
 
     <mat-card-content>
diff --git a/src/app/components/presentationals/beer-card/beer-card.component.scss b/src/app/components/presentationals/beer-card/beer-card.component.scss
index 105ce5f..c732952 100644
--- a/src/app/components/presentationals/beer-card/beer-card.component.scss
+++ b/src/app/components/presentationals/beer-card/beer-card.component.scss
@@ -3,7 +3,7 @@
 }
 
 mat-card {
-  height: 456px;
+  min-height: 456px;
 }
 
 .avatar {

From 447ddc7999d72c1536a11acf672db94477027eec Mon Sep 17 00:00:00 2001
From: EngiBeerHub <engibeer0422@gmail.com>
Date: Mon, 9 Oct 2023 23:29:16 +0900
Subject: [PATCH 6/7] [feature/9] ADD: detail data

---
 src/app/app.module.ts                         |  4 +
 .../beer-detail/beer-detail.component.html    | 80 +++++++++++++++++--
 .../beer-detail/beer-detail.component.scss    |  8 ++
 .../beer-detail/beer-detail.component.ts      |  2 +
 .../pages/top/top-page.component.html         |  2 +-
 .../pages/top/top-page.component.scss         |  1 +
 .../pages/top/top-page.component.ts           |  8 +-
 7 files changed, 97 insertions(+), 8 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 23c85a7..e92c3d5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -17,6 +17,8 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
 import { BeerCardComponent } from './components/presentationals/beer-card/beer-card.component';
 import { RandomBeerComponent } from './components/containers/random-beer/random-beer.component';
 import { BeerListComponent } from './components/containers/beer-list/beer-list.component';
@@ -50,6 +52,8 @@ import { HomeComponent } from './components/pages/home/home.component';
     MatPaginatorModule,
     MatInputModule,
     MatButtonModule,
+    MatDividerModule,
+    MatListModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.html b/src/app/components/pages/beer-detail/beer-detail.component.html
index b4a49b6..44a87cc 100644
--- a/src/app/components/pages/beer-detail/beer-detail.component.html
+++ b/src/app/components/pages/beer-detail/beer-detail.component.html
@@ -1,7 +1,75 @@
-<app-beer-card
-  [beer]="beer"
-  [imageUrl]="beer.image_url ? beer.image_url : altImageUrl"
-></app-beer-card>
+<div class="container">
+  <app-beer-card
+    class="beer-card"
+    [beer]="beer"
+    [imageUrl]="beer.image_url ? beer.image_url : altImageUrl"
+  ></app-beer-card>
 
-<h1>First Brewed</h1>
-<span>{{ beer.first_brewed }}</span>
+  <mat-list>
+    <mat-list-item>
+      <span matListItemTitle>First Brewed</span>
+      <span>{{ beer.first_brewed }}</span>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+
+    <mat-list-item>
+      <span matListItemTitle>Ph</span>
+      <span>{{ beer.ph }}</span>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+
+    <mat-list-item>
+      <span matListItemTitle>Contributed By</span>
+      <span>{{ beer.contributed_by }}</span>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+
+    <!-- TODO: change lines according to responsive breakpoints -->
+    <mat-list-item lines="3">
+      <span matListItemTitle>Brewers Tips</span>
+      <span>{{ beer.brewers_tips }}</span>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+
+    <mat-list-item lines="3">
+      <span matListItemTitle>Food Pairing</span>
+      <span>{{ foodPairings }}</span>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+
+    <div mat-subheader>
+      Ingredients
+
+      <div mat-subheader>
+        Malt
+        <div *ngFor="let malt of beer.ingredients.malt">
+          <mat-list-item>
+            <span matListItemTitle>{{ malt.name }}</span>
+            <span>{{ malt.amount.value }}{{ malt.amount.unit }}</span>
+          </mat-list-item>
+          <mat-divider></mat-divider>
+        </div>
+      </div>
+
+      <div mat-subheader>
+        Hops
+        <div *ngFor="let hop of beer.ingredients.hops">
+          <mat-list-item>
+            <span matListItemTitle>{{ hop.name }}</span>
+            <span
+              >{{ hop.amount.value }}{{ hop.amount.unit }}, {{ hop.attribute }},
+              added at {{ hop.add }}</span
+            >
+          </mat-list-item>
+          <mat-divider></mat-divider>
+        </div>
+      </div>
+
+      <mat-list-item>
+        <span matListItemTitle>Yeast</span>
+        <span>{{ beer.ingredients.yeast }}</span>
+      </mat-list-item>
+      <mat-divider></mat-divider>
+    </div>
+  </mat-list>
+</div>
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.scss b/src/app/components/pages/beer-detail/beer-detail.component.scss
index e69de29..8bd65f7 100644
--- a/src/app/components/pages/beer-detail/beer-detail.component.scss
+++ b/src/app/components/pages/beer-detail/beer-detail.component.scss
@@ -0,0 +1,8 @@
+.container {
+  margin-top: -8px;
+  padding: 0 8px;
+
+  mat-list {
+    max-width: 100%;
+  }
+}
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.ts b/src/app/components/pages/beer-detail/beer-detail.component.ts
index fe9bf9e..0e1e100 100644
--- a/src/app/components/pages/beer-detail/beer-detail.component.ts
+++ b/src/app/components/pages/beer-detail/beer-detail.component.ts
@@ -9,11 +9,13 @@ import { Beer } from 'src/app/models/beer';
 export class BeerDetailComponent implements OnInit {
   beer!: Beer;
   altImageUrl = 'https://images.punkapi.com/v2/keg.png';
+  foodPairings!: string;
 
   constructor(private router: Router) {}
 
   ngOnInit(): void {
     this.beer = (history.state as BeerState).beer;
+    this.foodPairings = this.beer.food_pairing.join(', ');
   }
 }
 
diff --git a/src/app/components/pages/top/top-page.component.html b/src/app/components/pages/top/top-page.component.html
index 0a7f04e..87cd4d8 100644
--- a/src/app/components/pages/top/top-page.component.html
+++ b/src/app/components/pages/top/top-page.component.html
@@ -3,7 +3,7 @@
     <mat-icon>sports_bar</mat-icon>
 
     <div class="title-toolbar">
-      <span>Ever Beer</span>
+      <span (click)="onClickTitle()">Ever Beer</span>
     </div>
   </mat-toolbar>
 </header>
diff --git a/src/app/components/pages/top/top-page.component.scss b/src/app/components/pages/top/top-page.component.scss
index a3e06cd..1599058 100644
--- a/src/app/components/pages/top/top-page.component.scss
+++ b/src/app/components/pages/top/top-page.component.scss
@@ -11,6 +11,7 @@ mat-toolbar {
 
   .title-toolbar {
     margin-left: 8px;
+    cursor: pointer;
   }
 }
 
diff --git a/src/app/components/pages/top/top-page.component.ts b/src/app/components/pages/top/top-page.component.ts
index ae4c199..6ef9eae 100644
--- a/src/app/components/pages/top/top-page.component.ts
+++ b/src/app/components/pages/top/top-page.component.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   templateUrl: './top-page.component.html',
   styleUrls: ['./top-page.component.scss'],
 })
-export class TopPageComponent {}
+export class TopPageComponent {
+  constructor(private router: Router) {}
+  onClickTitle() {
+    this.router.navigate(['']);
+  }
+}

From d7dc745510905520a3e7b6d925fb6b6ffc4dd7a6 Mon Sep 17 00:00:00 2001
From: EngiBeerHub <engibeer0422@gmail.com>
Date: Sat, 14 Oct 2023 20:03:59 +0900
Subject: [PATCH 7/7] [feature/9] ADD: detail view

---
 src/app/app-routing.module.ts                          |  6 +++++-
 .../containers/beer-list/beer-list.component.html      |  1 +
 .../containers/beer-list/beer-list.component.scss      |  1 +
 .../containers/beer-list/beer-list.component.ts        | 10 ++++++++++
 .../pages/beer-detail/beer-detail.component.html       |  5 ++---
 .../pages/beer-detail/beer-detail.component.ts         |  1 +
 6 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 3d8a1a2..085349e 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -17,7 +17,11 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [
+    RouterModule.forRoot(routes, {
+      scrollPositionRestoration: 'top',
+    }),
+  ],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}
diff --git a/src/app/components/containers/beer-list/beer-list.component.html b/src/app/components/containers/beer-list/beer-list.component.html
index c46093d..495cedc 100644
--- a/src/app/components/containers/beer-list/beer-list.component.html
+++ b/src/app/components/containers/beer-list/beer-list.component.html
@@ -43,6 +43,7 @@
       <app-beer-card
         [beer]="beer"
         [imageUrl]="beer.image_url ? beer.image_url : altImageUrl"
+        (click)="onClickCard(beer!)"
       ></app-beer-card>
     </mat-grid-tile>
   </mat-grid-list>
diff --git a/src/app/components/containers/beer-list/beer-list.component.scss b/src/app/components/containers/beer-list/beer-list.component.scss
index 9478623..b94a7bb 100644
--- a/src/app/components/containers/beer-list/beer-list.component.scss
+++ b/src/app/components/containers/beer-list/beer-list.component.scss
@@ -21,6 +21,7 @@ app-beer-card {
   // necessary to show outline of cards when using guttersize
   margin: 0 8px;
   height: 456px;
+  cursor: pointer;
 }
 
 mat-paginator {
diff --git a/src/app/components/containers/beer-list/beer-list.component.ts b/src/app/components/containers/beer-list/beer-list.component.ts
index f98453c..ced1ba7 100644
--- a/src/app/components/containers/beer-list/beer-list.component.ts
+++ b/src/app/components/containers/beer-list/beer-list.component.ts
@@ -7,6 +7,7 @@ import {
 } from '@angular/material/chips';
 import { ThemePalette } from '@angular/material/core';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { Router } from '@angular/router';
 import { Beer } from 'src/app/models/beer';
 import { BeerService } from 'src/app/services/beer.service';
 
@@ -70,6 +71,7 @@ export class BeerListComponent implements OnInit {
   constructor(
     private beerService: BeerService,
     private breakpointObserver: BreakpointObserver,
+    private router: Router,
   ) {}
 
   ngOnInit(): void {
@@ -216,4 +218,12 @@ export class BeerListComponent implements OnInit {
     // coordinate pagination accordingly
     this.resetPagination();
   }
+
+  /**
+   * Handle clicking card
+   * @param beer shown beer
+   */
+  onClickCard(beer: Beer) {
+    this.router.navigate(['/detail'], { state: { beer: beer } });
+  }
 }
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.html b/src/app/components/pages/beer-detail/beer-detail.component.html
index 44a87cc..19e1169 100644
--- a/src/app/components/pages/beer-detail/beer-detail.component.html
+++ b/src/app/components/pages/beer-detail/beer-detail.component.html
@@ -24,14 +24,13 @@
     </mat-list-item>
     <mat-divider></mat-divider>
 
-    <!-- TODO: change lines according to responsive breakpoints -->
-    <mat-list-item lines="3">
+    <mat-list-item [lines]="matListItemLine">
       <span matListItemTitle>Brewers Tips</span>
       <span>{{ beer.brewers_tips }}</span>
     </mat-list-item>
     <mat-divider></mat-divider>
 
-    <mat-list-item lines="3">
+    <mat-list-item [lines]="matListItemLine">
       <span matListItemTitle>Food Pairing</span>
       <span>{{ foodPairings }}</span>
     </mat-list-item>
diff --git a/src/app/components/pages/beer-detail/beer-detail.component.ts b/src/app/components/pages/beer-detail/beer-detail.component.ts
index 0e1e100..a468aa3 100644
--- a/src/app/components/pages/beer-detail/beer-detail.component.ts
+++ b/src/app/components/pages/beer-detail/beer-detail.component.ts
@@ -10,6 +10,7 @@ export class BeerDetailComponent implements OnInit {
   beer!: Beer;
   altImageUrl = 'https://images.punkapi.com/v2/keg.png';
   foodPairings!: string;
+  matListItemLine = 3; // pc default lines
 
   constructor(private router: Router) {}