불필요한 코드 정리 및 modal 추가

This commit is contained in:
RubyOn 2025-04-18 07:13:56 +09:00
parent 8041453c5e
commit 4a3d0313a2
17 changed files with 147 additions and 74 deletions

View File

@ -53,6 +53,7 @@
<orderEntry type="library" scope="PROVIDED" name="builder (v3.3.0, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="bundler (v2.6.6, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="capybara (v3.40.0, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="ccutrer-serialport (v1.1.0, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="concurrent-ruby (v1.3.5, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="connection_pool (v2.5.0, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="crass (v1.0.6, rbenv: 3.4.2) [gem]" level="application" />
@ -66,6 +67,7 @@
<orderEntry type="library" scope="PROVIDED" name="erb_lint (v0.9.0, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="erubi (v1.13.1, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="et-orbi (v1.2.11, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="ffi (v1.17.2, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="foreman (v0.88.1, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="fugit (v1.11.1, rbenv: 3.4.2) [gem]" level="application" />
<orderEntry type="library" scope="PROVIDED" name="globalid (v1.2.1, rbenv: 3.4.2) [gem]" level="application" />

View File

@ -129,6 +129,7 @@ GEM
et-orbi (1.2.11)
tzinfo
ffi (1.17.2-aarch64-linux-gnu)
ffi (1.17.2-arm64-darwin)
foreman (0.88.1)
fugit (1.11.1)
et-orbi (~> 1, >= 1.2.11)
@ -192,18 +193,8 @@ GEM
nio4r (2.7.4)
nokogiri (1.18.7-aarch64-linux-gnu)
racc (~> 1.4)
nokogiri (1.18.7-aarch64-linux-musl)
racc (~> 1.4)
nokogiri (1.18.7-arm-linux-gnu)
racc (~> 1.4)
nokogiri (1.18.7-arm-linux-musl)
racc (~> 1.4)
nokogiri (1.18.7-arm64-darwin)
racc (~> 1.4)
nokogiri (1.18.7-x86_64-linux-gnu)
racc (~> 1.4)
nokogiri (1.18.7-x86_64-linux-musl)
racc (~> 1.4)
ostruct (0.6.1)
parallel (1.27.0)
parser (3.3.8.0)
@ -328,12 +319,7 @@ GEM
railties (>= 7.1)
thor (~> 1.3.1)
sqlite3 (2.6.0-aarch64-linux-gnu)
sqlite3 (2.6.0-aarch64-linux-musl)
sqlite3 (2.6.0-arm-linux-gnu)
sqlite3 (2.6.0-arm-linux-musl)
sqlite3 (2.6.0-arm64-darwin)
sqlite3 (2.6.0-x86_64-linux-gnu)
sqlite3 (2.6.0-x86_64-linux-musl)
sshkit (1.24.0)
base64
logger
@ -348,7 +334,6 @@ GEM
thruster (0.1.12)
thruster (0.1.12-aarch64-linux)
thruster (0.1.12-arm64-darwin)
thruster (0.1.12-x86_64-linux)
timeout (0.4.3)
turbo-rails (2.0.13)
actionpack (>= 7.1.0)
@ -377,13 +362,7 @@ GEM
PLATFORMS
aarch64-linux
aarch64-linux-gnu
aarch64-linux-musl
arm-linux-gnu
arm-linux-musl
arm64-darwin-24
x86_64-linux
x86_64-linux-gnu
x86_64-linux-musl
DEPENDENCIES
amazing_print

View File

@ -0,0 +1,5 @@
class ModalsController < ApplicationController
def open
render partial: "partials/modals_open", locals: { type: params[:type], close_button: params[:close_button] }
end
end

View File

@ -0,0 +1,2 @@
module ModalsHelper
end

View File

@ -7,5 +7,8 @@ import { application } from "./application"
import HelloController from "./hello_controller"
application.register("hello", HelloController)
import ModalsController from "./modals_controller"
application.register("modals", ModalsController)
import TimerController from "./timer_controller"
application.register("timer", TimerController)

View File

@ -0,0 +1,55 @@
import { Controller } from "@hotwired/stimulus"
import { useClickOutside } from 'stimulus-use'
// Connects to data-controller="modals"
export default class extends Controller {
connect() {
// useClickOutside(this)
this.boundHandleKeydown = this.handleKeydown.bind(this)
document.addEventListener("keydown", this.boundHandleKeydown)
window.addEventListener('modals:close', this.close.bind(this))
const panelElement = document.getElementById("modals-panel")
const backdropElement = document.getElementById("modals-backdrop")
if (panelElement && backdropElement) {
setTimeout(() => {
panelElement.classList.remove('opacity-0', 'translate-y-4', 'sm:scale-95')
panelElement.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100')
backdropElement.classList.remove('opacity-0')
backdropElement.classList.add('opacity-75')
}, 10) // 애니메이션이 바로 시작되도록 약간의 지연 추가
}
}
disconnect() {
document.removeEventListener('keydown', this.boundHandleKeydown)
}
handleKeydown(event) {
if (event.key === "Escape") {
this.close()
}
}
close(event) {
const panelElement = document.getElementById("modals-panel")
const backdropElement = document.getElementById("modals-backdrop")
if (panelElement && backdropElement) {
panelElement.classList.remove("opacity-100", "translate-y-0", "sm:scale-100")
panelElement.classList.add("opacity-0", "translate-y-4", "sm:scale-95")
backdropElement.classList.remove("opacity-75")
backdropElement.classList.add("opacity-0")
setTimeout(() => {
const modalsFrame = document.querySelector("turbo-frame#modals")
if (modalsFrame) {
modalsFrame.innerHTML = ""
window.location.reload()
}
}, 300) // 닫힘 애니메이션 시간과 동일하게 300ms 지연 후 모달 제거
}
}
}

View File

@ -1,4 +1,4 @@
import { Controller } from "@hotwired/stimulus"
import {Controller} from "@hotwired/stimulus"
// Connects to data-controller="timer"
export default class extends Controller {
@ -15,8 +15,7 @@ export default class extends Controller {
updateTime() {
const now = new Date()
const formatted = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}` +
this.outputTarget.textContent = `${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
}
}

View File

@ -24,10 +24,10 @@
</head>
<body class="h-screen">
<%= turbo_frame_tag :modals %>
<main class="flex flex-col h-full divide-y divide-border-table-border">
<%= render "partials/header" %>
<div class="flex flex-row flex-1 w-full divide-x divide-border-table-border">
<%#= render "partials/sidebar" %>
<div class="w-full h-full">
<%= yield %>
</div>

View File

@ -11,7 +11,9 @@
<% @schedule.each do |s| %>
<tr>
<td><%= s.hour %>시</td>
<td><%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "border px-2 py-1 rounded" %> °C</td>
<td><%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "border px-2 py-1 rounded" %>
°C
</td>
</tr>
<% end %>
</tbody>
@ -22,3 +24,11 @@
<%= submit_tag "업데이트", class: "btn bg-primary" %>
</div>
<% end %>
<div class="flex p-4">
<%= button_to "추가하기", open_modals_path(type: "add_schedule"),
class: "btn btn-default",
data: {
turbo_method: :post,
turbo_frame: "modals"
} %>
</div>

View File

@ -4,8 +4,4 @@
<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 leading-10"></i>-->
<%#= link_to "로그아웃", '', class: "btn" %>
<!-- </div>-->
</header>

View File

@ -0,0 +1,44 @@
<%= turbo_frame_tag :modals do %>
<div class="relative z-40" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!--
Background backdrop, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
<div id="modals-backdrop" class="fixed inset-0 bg-default-slate-dark transition-opacity opacity-0 ease-out duration-500" aria-hidden="true"></div>
<div class="fixed inset-0 z-40 w-screen overflow-y-auto py-8">
<div class="flex min-h-full items-center justify-center text-center sm:items-center">
<!--
Modal panel, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
To: "opacity-100 translate-y-0 sm:scale-100"
Leaving: "ease-in duration-200"
From: "opacity-100 translate-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-->
<div id="modals-panel" class="p-4 space-y-4 z-40 relative transform overflow-hidden rounded-md bg-white text-left shadow-xl transition-all w-full max-w-full mx-2 sm:mx-10 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 ease-out duration-500" data-controller="modals" data-action="modals:click:outside->modals#close">
<div>
<%= render "partials/modals/#{type}" %>
</div>
<% if close_button != "false" %>
<%= button_tag type: 'button',
data: {
action: 'modals#close'
},
class: 'inline-flex btn w-full' do %>
<div class="items-center"><i class="fa-solid fa-square-caret-down"></i> 닫기</div>
<% end %>
<% end %>
</div>
</div>
</div>
</div>
<% end %>

View File

@ -1,42 +0,0 @@
<nav class="side-bar overflow-y-auto">
<div class="menu-group">
<div class="menu-group-icon">
<i class="fa-solid fa-house text-default-slate-dark text-4xl"></i>
</div>
<div class="menu-group-name">
HOME
</div>
</div>
<div class="menu-group">
<div class="menu-group-icon">
<i class="fa-solid fa-temperature-high text-default-slate-dark text-4xl"></i>
</div>
<div class="menu-group-name">
메뉴 2
</div>
</div>
<div class="menu-group">
<div class="menu-group-icon">
<i class="fa-solid fa-fan text-default-slate-dark text-4xl"></i>
</div>
<div class="menu-group-name">
메뉴 3
</div>
</div>
<div class="menu-group">
<div class="menu-group-icon">
<i class="fa-solid fa-arrows-spin text-default-slate-dark text-4xl"></i>
</div>
<div class="menu-group-name">
메뉴 4
</div>
</div>
<div class="menu-group">
<div class="menu-group-icon">
<i class="fa-solid fa-gear text-default-slate-dark text-4xl"></i>
</div>
<div class="menu-group-name">
설청
</div>
</div>
</nav>

View File

@ -0,0 +1 @@
스케쥴 추가

View File

@ -20,4 +20,10 @@ Rails.application.routes.draw do
post "schedule_edit_update"
end
end
resources :modals do
collection do
post :open
end
end
end

View File

@ -12,6 +12,7 @@
"@hotwired/stimulus": "^3.2.2",
"@hotwired/turbo-rails": "^8.0.13",
"@tailwindcss/cli": "^4.1.4",
"tailwindcss": "^4.1.4"
"tailwindcss": "^4.1.4",
"stimulus-use": "^0.52.2"
}
}

View File

@ -0,0 +1,7 @@
require "test_helper"
class ModalsControllerTest < ActionDispatch::IntegrationTest
# test "the truth" do
# assert true
# end
end

View File

@ -571,6 +571,11 @@ picomatch@^2.3.1:
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
stimulus-use@^0.52.2:
version "0.52.3"
resolved "https://registry.yarnpkg.com/stimulus-use/-/stimulus-use-0.52.3.tgz#d6f35fa93277274957a2ed98a7b04b4d702cb1d6"
integrity sha512-stZ5dID6FUrGCR/ChWUa0FT5Z8iqkzT6lputOAb50eF+Ayg7RzJj4U/HoRlp2NV333QfvoRidru9HLbom4hZVw==
tailwindcss@4.1.4, tailwindcss@^4.1.4:
version "4.1.4"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.1.4.tgz#27b3c910c6f1a47f4540451f3faf7cdd6d977a69"