헤더 타이머 추가

app/assets/stylesheets/application.tailwind.css

@@ -86,7 +86,7 @@
 
 @layer utilities {
     .header {
-        @apply p-4 text-lg font-bold h-16 flex justify-between;
+        @apply p-4 text-lg font-bold h-16 flex justify-between items-center;
     }
 
     .side-bar {

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
+  }
+}

app/views/partials/_header.html.erb

@@ -1,8 +1,9 @@
-<header class="flex header">
-  <div class="flex flex-row">
+<header class="flex header" data-controller="timer">
+  <div class="flex flex-row h-full">
     <%= image_tag "svg/svg_logo.svg", class: "w-16 h-auto" %>
     <div class="flex h-full items-center tracking-[0.5rem]">FARMITRY</div>
   </div>
+  <div data-timer-target="output" class="text-gray-600"></div>
   <div class="flex flex-row items-center gap-x-4">
     <i class="fa-solid fa-circle-user text-4xl text-default-slate-dark"></i>
     <%= link_to "로그아웃", '', class: "btn" %>