헤더 타이머 추가

app/javascript/controllers/index.js

@@ -6,3 +6,6 @@ import { application } from "./application"
 
 import HelloController from "./hello_controller"
 application.register("hello", HelloController)
+
+import TimerController from "./timer_controller"
+application.register("timer", TimerController)

app/javascript/controllers/timer_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="timer"
+export default class extends Controller {
+  static targets = ["output"]
+
+  connect() {
+    this.updateTime()
+    this.interval = setInterval(() => this.updateTime(), 1000)
+  }
+
+  disconnect() {
+    clearInterval(this.interval)
+  }
+
+  updateTime() {
+    const now = new Date()
+    const formatted = `${now.getFullYear()}년 ${String(now.getMonth() + 1).padStart(2, '0')}월 ${String(now.getDate()).padStart(2, '0')}일 ` +
+      `${String(now.getHours()).padStart(2, '0')}시 ${String(now.getMinutes()).padStart(2, '0')}분 ${String(now.getSeconds()).padStart(2, '0')}초`
+    this.outputTarget.textContent = formatted
+  }
+}