From 92e07840841709c3b22138ce13e6df066adcea43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4DELTA?= <controld3785@gmail.com>
Date: Fri, 20 Mar 2026 08:25:29 +0900
Subject: [PATCH] Add Clock Component

---
 src/app/components/clock/clock.html |  4 +++
 src/app/components/clock/clock.scss | 26 ++++++++++++++++
 src/app/components/clock/clock.ts   | 48 +++++++++++++++++++++++++++++
 src/app/pages/main/main.html        |  2 ++
 src/app/pages/main/main.scss        |  5 +++
 src/app/pages/main/main.ts          | 11 ++++---
 6 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 src/app/components/clock/clock.html
 create mode 100644 src/app/components/clock/clock.scss
 create mode 100644 src/app/components/clock/clock.ts

diff --git a/src/app/components/clock/clock.html b/src/app/components/clock/clock.html
new file mode 100644
index 0000000..b38fdbf
--- /dev/null
+++ b/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>
diff --git a/src/app/components/clock/clock.scss b/src/app/components/clock/clock.scss
new file mode 100644
index 0000000..4df5bd6
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/components/clock/clock.ts b/src/app/components/clock/clock.ts
new file mode 100644
index 0000000..8521366
--- /dev/null
+++ b/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);
+    }
+  }
+}
diff --git a/src/app/pages/main/main.html b/src/app/pages/main/main.html
index dfb081a..4fb4dd2 100644
--- a/src/app/pages/main/main.html
+++ b/src/app/pages/main/main.html
@@ -33,4 +33,6 @@
       </div>
     </div>
   </section>
+
+  <section id="clock"><clock></clock></section>
 </div>
diff --git a/src/app/pages/main/main.scss b/src/app/pages/main/main.scss
index 5d5ce55..9d3630c 100644
--- a/src/app/pages/main/main.scss
+++ b/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;
+}
diff --git a/src/app/pages/main/main.ts b/src/app/pages/main/main.ts
index cc275c4..0ec1a0e 100644
--- a/src/app/pages/main/main.ts
+++ b/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);