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 @@ -
-
+
+
<%= image_tag "svg/svg_logo.svg", class: "w-16 h-auto" %>
FARMITRY
+
<%= link_to "로그아웃", '', class: "btn" %>