From 578f41c212c47839ec163b86eb35b08bc06968e1 Mon Sep 17 00:00:00 2001
From: ming <ryokowantu@dalsoft.co.kr>
Date: Thu, 17 Apr 2025 04:51:57 +0900
Subject: [PATCH] =?UTF-8?q?=ED=97=A4=EB=8D=94=20=ED=83=80=EC=9D=B4?=
 =?UTF-8?q?=EB=A8=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stylesheets/application.tailwind.css      |  2 +-
 app/javascript/controllers/index.js           |  3 +++
 .../controllers/timer_controller.js           | 22 +++++++++++++++++++
 app/views/partials/_header.html.erb           |  5 +++--
 4 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 app/javascript/controllers/timer_controller.js

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 98585c8..c8fcea5 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/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 {
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index d0685d3..e7ee40d 100644
--- a/app/javascript/controllers/index.js
+++ b/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)
diff --git a/app/javascript/controllers/timer_controller.js b/app/javascript/controllers/timer_controller.js
new file mode 100644
index 0000000..bde4917
--- /dev/null
+++ b/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
+  }
+}
diff --git a/app/views/partials/_header.html.erb b/app/views/partials/_header.html.erb
index 2f5359a..0306ecc 100644
--- a/app/views/partials/_header.html.erb
+++ b/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" %>