Add Clock Component

src/app/components/clock/clock.html

@@ -0,0 +1,4 @@
+<div class="clock-container">
+  <div class="clock-date">{{ dateString() }}</div>
+  <div class="clock-time">{{ timeString() }}</div>
+</div>

src/app/components/clock/clock.scss

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.clock-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  font-family: inherit;
+  gap: 4px;
+  width: 100%;
+}
+
+.clock-date {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: #333;
+}
+
+.clock-time {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #000;
+}

src/app/components/clock/clock.ts

@@ -0,0 +1,48 @@
+import { Component, signal, computed, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'clock',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './clock.html',
+  styleUrl: './clock.scss',
+})
+export class Clock implements OnInit, OnDestroy {
+  private timer: any;
+  currentTime = signal(new Date());
+
+  dateString = computed(() => {
+    const d = this.currentTime();
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  });
+
+  timeString = computed(() => {
+    const d = this.currentTime();
+    let hours = d.getHours();
+    const minutes = String(d.getMinutes()).padStart(2, '0');
+    const seconds = String(d.getSeconds()).padStart(2, '0');
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+
+    hours = hours % 12;
+    hours = hours ? hours : 12; // 0 should be 12
+    const hoursStr = String(hours).padStart(2, '0');
+
+    return `${hoursStr}:${minutes}:${seconds} ${ampm}`;
+  });
+
+  ngOnInit() {
+    this.timer = setInterval(() => {
+      this.currentTime.set(new Date());
+    }, 1000);
+  }
+
+  ngOnDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  }
+}

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);