Add Clock Component

src/app/pages/main/main.html

@@ -33,4 +33,6 @@
       </div>
     </div>
   </section>
+
+  <section id="clock"><clock></clock></section>
 </div>

src/app/pages/main/main.scss

@@ -20,3 +20,8 @@ section#dropdown-test {
 .test-container {
   max-width: 100%;
 }
+
+#clock {
+  padding-top: 48px;
+  padding-bottom: 48px;
+}

src/app/pages/main/main.ts

@@ -1,21 +1,22 @@
 import { Component, signal } from '@angular/core';
 import { Switch } from '../../components/switch/switch';
 import { Dropdown, DropdownOption } from '../../components/dropdown/dropdown';
+import { Clock } from '../../components/clock/clock';
 
 @Component({
   selector: 'app-main-page',
   standalone: true,
-  imports: [Switch, Dropdown],
+  imports: [Switch, Dropdown, Clock],
   templateUrl: './main.html',
-  styleUrl: './main.scss'
+  styleUrl: './main.scss',
 })
 export class MainPage {
   isToggled = signal(false);
 
   dropdownOptions: DropdownOption[] = [
-    { label: 'English', value: "EN" },
-    { label: '한국어', value: "KR" },
-    { label: '日本語', value: "JP" },
+    { label: 'English', value: 'EN' },
+    { label: '한국어', value: 'KR' },
+    { label: '日本語', value: 'JP' },
   ];
 
   selectedDropdownValue = signal<any>(null);