Merge branch 'develop_mh'

app/assets/stylesheets/application.tailwind.css

@@ -12,9 +12,10 @@
     --color-table-border: rgb(130, 144, 158);
 
     /* theme */
+    --color-logo-color: rgb(21, 128, 120);
     --color-base-background: rgb(39, 44, 56);
     --color-base-secondary: rgb(55, 61, 71);
-    --color-base-text: rgb(152, 158, 172);
+    --color-base-text: rgb(255, 255, 255);
     --color-base-border: rgb(77, 84, 102);
 
     --base-font-size: 0.85rem;
@@ -48,13 +49,23 @@
 
 @layer base {
     body {
-        @apply text-sm text-default-slate-dark
+        @apply bg-base-background text-base-text font-['Pretendard-Regular']
     }
 
     hr {
         @apply border-table-border
     }
 
+    .background-pattern {
+        background-image: repeating-linear-gradient(
+            -45deg,
+            rgba(255, 255, 255, 0.01) 0,
+            rgba(255, 255, 255, 0.01) 24px,
+            transparent 1px,
+            transparent 36px
+        );
+    }
+
     a.disabled {
         @apply pointer-events-none cursor-not-allowed opacity-50
     }
@@ -64,7 +75,7 @@
     }
 
     .btn {
-        @apply justify-center rounded-md bg-default-slate px-4 py-2 text-sm font-semibold leading-6 text-white
+        @apply justify-center rounded-md bg-default-slate px-4 py-2 font-semibold leading-6 text-white
         shadow-xs hover:opacity-80 cursor-pointer
     }
 
@@ -78,16 +89,29 @@
     }
 
     .select-style {
-        @apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs
+        @apply block w-full px-2 py-1.5 border border-default-slate/50 rounded-xs text-base-background appearance-none
+    }
+
+    .select-style option {
+        color: theme('colors.base-background');
     }
 
     .input-style {
-        @apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs
+        @apply block w-full px-2 py-1.5 border border-default-slate/50 rounded-xs
     }
 
     .textarea-style {
         @apply block w-full pl-4 flex-1 py-1.5 ring-1 ring-inset ring-default-slate/50 rounded-xs
     }
+
+    /*Toggle Button*/
+    .toggle_style {
+        @apply w-14 h-8 bg-danger rounded-full peer-checked:bg-notice transition-all duration-300
+    }
+
+    .toggle_btn {
+        @apply absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-all duration-300 peer-checked:translate-x-full shadow-sm
+    }
 }
 
 @layer utilities {
@@ -96,11 +120,12 @@
     }
 
     .side-bar {
-        @apply w-[16rem] px-4 text-lg font-bold divide-y divide-base-border;
+        /*@apply w-[16rem] pl-4 text-lg font-bold divide-y divide-base-border;*/
+        @apply w-[16rem] pl-4 pr-4 lg:pr-0 text-lg font-bold;
     }
 
     .content {
-        @apply rounded-lg bg-base-secondary;
+        @apply lg:rounded-lg bg-base-secondary;
     }
 
     .page-title {
@@ -125,7 +150,15 @@
 
     /*Menu*/
     .menu-group {
-        @apply flex flex-row py-6 px-4 gap-x-4 justify-between items-center w-full
+        @apply flex flex-row py-2 px-4 my-4 gap-x-4 justify-between items-center w-full
+    }
+
+    .menu-group-active {
+        @apply bg-base-secondary text-white rounded-md;
+    }
+
+    .menu-group:hover {
+        @apply bg-base-secondary text-white transition-colors rounded-md;
     }
 
     .menu-group-icon {
@@ -144,6 +177,11 @@
         @apply text-default-slate-dark text-center
     }
 
+    /*Dashboard*/
+    .dashboard-group {
+        @apply rounded-md bg-base-background h-32 p-4 flex flex-col justify-between cursor-pointer
+    }
+
     /*Pagy*/
     .pagy {
         @apply flex items-center justify-center space-x-1 font-semibold text-sm text-default-slate;
@@ -183,7 +221,7 @@
     }
 
     .base-table th {
-        @apply bg-base-text px-2 py-2 text-left font-bold lg:table-cell
+        @apply bg-base-background px-2 py-2 text-left font-bold lg:table-cell
     }
 
     .base-table td {
@@ -221,3 +259,28 @@
 ::-webkit-scrollbar-thumb:hover {
     background-color: rgba(100, 100, 100, 0.6);
 }
+
+.input-style::-webkit-outer-spin-button,
+.input-style::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.input-style[type="number"] {
+    -moz-appearance: textfield;
+}
+
+/*Fonts*/
+@font-face {
+    font-family: 'GongGothicMedium';
+    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Pretendard-Regular';
+    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}

app/controllers/schedules_controller.rb

@@ -49,7 +49,7 @@ class SchedulesController < ApplicationController
   def schedule_edit_update
     error_messages = []
 
-    params[:schedule].each do |id, attributes|
+    params[:schedule]&.each do |id, attributes|
       schedule = Schedule.find_by(id: id)
       next unless schedule
 

app/javascript/controllers/index.js

@@ -10,5 +10,8 @@ application.register("hello", HelloController)
 import ModalsController from "./modals_controller"
 application.register("modals", ModalsController)
 
+import SidebarController from "./sidebar_controller"
+application.register("sidebar", SidebarController)
+
 import TimerController from "./timer_controller"
 application.register("timer", TimerController)

app/javascript/controllers/sidebar_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu", "overlay"]
+
+  toggle() {
+    this.menuTarget.classList.toggle("-translate-x-full")
+    this.overlayTarget.classList.toggle("hidden")
+  }
+
+  close() {
+    this.menuTarget.classList.add("-translate-x-full")
+    this.overlayTarget.classList.add("hidden")
+  }
+}

app/views/layouts/application.html.erb

@@ -23,20 +23,20 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
 </head>
 
-<body class="h-screen overflow-hidden bg-base-background text-base-text min-w-[400px] overflow-x-auto">
+<body class="background-pattern min-h-screen min-w-full overflow-x-auto h-full whitespace-nowrap">
 <%= turbo_frame_tag :modals %>
-<main class="flex flex-col h-full">
+<main class="flex flex-col h-full" data-controller="sidebar">
   <%= render "partials/header" %>
-  <div class="flex flex-row flex-1 w-full overflow-hidden">
+  <div class="flex flex-row flex-1 w-full">
     <%= render "partials/sidebar" %>
-    <div class="flex-1 h-full pb-4 pr-4">
+    <div class="flex-1 h-full pb-0 px-0 lg:pb-4 lg:px-4">
       <div class="flex-1 h-full content">
         <% if flash[:notice] %>
-          <div class="m-4 rounded px-4 py-2 bg-accept text-white">
+          <div class="rounded-tl-md rounded-tr-md px-4 py-2 bg-accept text-white">
             <%= raw flash[:notice] %>
           </div>
         <% elsif flash[:alert] %>
-          <div class="m-4 rounded px-4 py-2 bg-danger text-white">
+          <div class="rounded-tl-md rounded-tr-md px-4 py-2 bg-danger text-white">
             <%= raw flash[:alert] %>
           </div>
         <% end %>

app/views/partials/_header.html.erb

@@ -1,9 +1,14 @@
-<header class="flex header" data-controller="timer">
-  <div class="flex flex-row h-full">
-    <%= image_tag "svg/svg_logo.svg", class: "w-fit h-auto mr-4" %>
+<header class="flex header justify-between items-center" data-controller="timer">
+  <div class="flex flex-row h-full items-center">
+    <%= image_tag "svg/svg_logo.svg", class: "w-auto h-8 mr-4" %>
     <%= link_to root_path do %>
-      <div class="flex h-full items-center tracking-[0.5rem]">FARMITRY</div>
+      <div class="flex h-full items-center tracking-[0.5rem]"><span class="text-logo-color">FARM</span>ITRY</div>
     <% end %>
   </div>
-  <div data-timer-target="output"></div>
+
+  <div data-timer-target="output" class="hidden lg:block"></div>
+
+  <button data-action="click->sidebar#toggle" class="block lg:hidden p-2 cursor-pointer">
+    <i class="fa-solid fa-bars text-2xl"></i>
+  </button>
 </header>

app/views/partials/_modals_open.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag :modals do %>
-  <div class="relative z-40" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+  <div class="relative z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
     <!--
       Background backdrop, show/hide based on modal state.
 
@@ -10,9 +10,9 @@
         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 id="modals-backdrop" class="fixed inset-0 bg-base-background 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="fixed inset-0 z-50 w-screen overflow-y-auto py-4">
       <div class="flex min-h-full items-center justify-center text-center sm:items-center">
         <!--
           Modal panel, show/hide based on modal state.
@@ -24,7 +24,7 @@
             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 id="modals-panel" class="p-4 space-y-4 z-50 relative transform overflow-hidden rounded-md bg-base-secondary 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>

app/views/partials/_sidebar.html.erb

@@ -1,25 +1,28 @@
-<nav class="side-bar overflow-y-auto">
-  <div class="menu-group">
+<div data-sidebar-target="overlay" data-action="click->sidebar#close" class="fixed inset-0 bg-black/50 z-40 hidden lg:hidden"></div>
+<nav class="side-bar overflow-y-auto transition-transform lg:translate-x-0 -translate-x-full bg-base-background lg:bg-transparent fixed lg:relative top-0 left-0 h-full z-40" data-sidebar-target="menu">
+  <%= link_to root_path, class: "menu-group #{'menu-group-active' if current_page?(root_path)}" do %>
     <div class="menu-group-icon">
-      <i class="fa-solid fa-house text-base-text/30 text-4xl"></i>
+      <i class="fa-solid fa-chart-line text-base-text text-4xl"></i>
     </div>
     <div class="menu-group-name">
-      HOME
-    </div>
+      현황
     </div>
+  <% end %>
+  <hr >
   <% @controllers.each do |c| %>
-    <%= link_to view_schedule_path(c.id), class: "menu-group" do %>
+    <%= link_to view_schedule_path(c.id), class: "menu-group #{'menu-group-active' if current_page?(view_schedule_path(c.id))}" do %>
       <div class="menu-group-icon">
-        <i class="fa-solid fa-temperature-high text-base-text/30 text-4xl"></i>
+        <i class="fa-solid fa-temperature-high text-base-text text-4xl"></i>
       </div>
       <div class="menu-group-name">
         <%= c.name %>
       </div>
     <% end %>
+    <hr >
   <% end %>
   <div class="menu-group">
     <div class="menu-group-icon">
-      <i class="fa-solid fa-gear text-base-text/30 text-4xl"></i>
+      <i class="fa-solid fa-gear text-base-text text-4xl"></i>
     </div>
     <div class="menu-group-name">
       설청

app/views/partials/modals/_add_schedule.html.erb

@@ -1,13 +1,13 @@
-<%= form_with model: @schedule, method: :post, data: { turbo: false }, class: 'flex flex-col h-full divide-y divide-border-table-border' do |form| %>
+<%= form_with model: @schedule, method: :post, data: { turbo: false }, class: 'flex flex-col h-full space-y-4' do |form| %>
   <%= form.hidden_field :controller_id, value: params[:id] %>
-  <div class="flex-1 p-4">
-    <span class="text-2xl font-bold"><%= Controller.find(params[:id]).name %> 컨트롤러</span>
+  <div class="flex-1 text-white space-y-4">
+    <div class="text-2xl font-bold leading-10"><%= Controller.find(params[:id]).name %> 컨트롤러</div>
     <table class="base-table">
       <thead>
       <tr>
         <th>시간</th>
         <th>분</th>
-        <th>사용여부</th>
+        <th>ON/OFF</th>
         <th>온도</th>
       </tr>
       </thead>
@@ -17,7 +17,7 @@
           <%= form.select :hour,
                           options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, @schedule.hour),
                           {},
-                          class: "input-style" %>
+                          class: "select-style text-white" %>
         </td>
         <td>
           <%= form.number_field :minute,
@@ -35,7 +35,7 @@
     </table>
   </div>
 
-  <div class="flex p-4">
+  <div class="flex">
     <%= submit_tag "추가", class: "btn bg-primary" %>
   </div>
 <% end %>

app/views/schedules/index.html.erb

@@ -1 +1,159 @@
-<div>MAIN</div>
+<div class="flex-1 grid grid-cols-2 lg:grid-cols-4 gap-4 p-4">
+  <!-- 실내온도 -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-between h-full">
+      <div class="text-xl">실내온도</div>
+      <div class="flex flex-row justify-between items-baseline w-full">
+        <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
+        <div class="items-baseline text-right w-full">
+          <span class="text-4xl font-['GongGothicMedium'] font-light">15.5</span>
+          <span class="text-2xl">°C</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 실내습도 -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-between h-full">
+      <div class="text-xl">실내습도</div>
+      <div class="flex flex-row justify-between items-baseline w-full">
+        <i class="fa-solid fa-droplet text-base-text/80 text-4xl text-left w-full"></i>
+        <div class="items-baseline text-right w-full"><span class="text-4xl font-['GongGothicMedium']">60</span> <span class="text-2xl">%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- CO2 -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-between h-full">
+      <div><span class="text-xl">CO</span><span class="text-sm">2</span></div>
+      <div class="flex flex-row justify-between items-baseline w-full">
+        <div class="size-10 bg-base-text/80 rounded-full text-base-background flex flex-col justify-center">
+          <div class="flex flex-row justify-center items-baseline">
+            <span class="text-xl">CO</span><span class="text-sm">2</span>
+          </div>
+        </div>
+        <div class="items-baseline text-right"><span class="text-4xl font-['GongGothicMedium']">60</span> <span class="text-2xl">%</span></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">1</div>
+
+  <!-- Fan -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-between h-full">
+      <div class="text-xl">FAN</div>
+      <div class="flex flex-row justify-between items-baseline w-full">
+        <i class="fa-solid fa-fan text-base-text/80 text-4xl text-left w-full"></i>
+        <div class="items-baseline text-right w-full"><span class="text-4xl font-['GongGothicMedium']">60</span> <span class="text-2xl">%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 공조기 -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-between h-full">
+      <div class="text-xl">공조기</div>
+      <div class="flex flex-row justify-between items-baseline w-full">
+        <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
+        <div class="items-baseline text-right w-full"><span class="text-4xl font-['GongGothicMedium']">15.5</span>
+          <span class="text-2xl">°C</span></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- LED -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-between h-full">
+      <div class="text-xl">LED</div>
+      <div class="flex flex-row justify-between items-baseline w-full">
+        <i class="fa-solid fa-lightbulb text-base-text/80 text-4xl text-left w-full"></i>
+        <div class="items-baseline text-right w-full"><span class="text-4xl font-['GongGothicMedium']">60</span> <span class="text-2xl">%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">1</div>
+
+  <!-- pH -->
+  <div class="dashboard-group">
+    <div class="flex justify-between items-baseline">
+      <div class="text-4xl">pH</div>
+      <div class="text-3xl font-['GongGothicMedium']">7.1</div>
+    </div>
+    <div class="flex justify-between items-baseline">
+      <div class="text-2xl">
+        6.0 ~ 6.0
+      </div>
+      <div><i class="fa-solid fa-gear text-base-text/30 text-2xl"></i></div>
+    </div>
+  </div>
+
+  <!-- EC -->
+  <div class="dashboard-group">
+    <div class="flex justify-between items-baseline">
+      <div class="text-4xl">EC</div>
+      <div class="text-3xl font-['GongGothicMedium']">0.1</div>
+    </div>
+    <div class="flex justify-between items-baseline">
+      <div class="text-2xl">
+        0 ~ 1
+      </div>
+      <div><i class="fa-solid fa-gear text-base-text/30 text-2xl"></i></div>
+    </div>
+  </div>
+
+  <!-- 양액온도 -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-between h-full">
+      <div class="text-xl">양액온도</div>
+      <div class="flex flex-row justify-between items-baseline w-full">
+        <!--        <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>-->
+        <div class="items-baseline text-right w-full"><span class="text-4xl font-['GongGothicMedium']">20.96</span>
+          <span class="text-2xl">°C</span></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">1</div>
+
+  <!-- none -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-center space-y-4 h-full">
+      <i class="fa-solid fa-recycle text-base-text/80 text-5xl text-center w-full"></i>
+      <div class="text-xl text-center">자동화</div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-center space-y-4 h-full">
+      <i class="fa-solid fa-rotate-right text-base-text/80 text-5xl text-center w-full"></i>
+      <div class="text-xl text-center">초기화</div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-center space-y-4 h-full">
+      <i class="fa-solid fa-circle-pause text-base-text/80 text-5xl text-center w-full"></i>
+      <div class="text-xl text-center">긴급 정지</div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-center space-y-4 h-full">
+      <i class="fa-solid fa-faucet-drip text-base-text/80 text-5xl text-center w-full"></i>
+      <div class="text-xl text-center">1회 급수 설정</div>
+    </div>
+  </div>
+</div>

app/views/schedules/schedule_edit.html.erb

@@ -1,45 +1,68 @@
-<div class="flex flex-col h-full text-white overflow-y-auto ">
+<div class="flex flex-col h-full text-white overflow-y-auto">
   <div class="flex flex-col flex-1 divide-y divide-base-border">
-    <%= form_with url: schedule_edit_update_schedules_path, method: :post, class: 'flex flex-col h-full divide-y divide-border-base-border p-4' do %>
+    <%= form_with url: schedule_edit_update_schedules_path, method: :post, class: 'flex flex-col h-full' do %>
       <%= hidden_field_tag :controller_id, params[:id] %>
-      <div class="space-y-4">
-        <div class="flex justify-between">
-          <div class="text-2xl font-bold"><%= @controller.name %> 컨트롤러</div>
+      <div class="divide-y divide-base-border">
+        <div class="flex justify-between p-4">
+          <div class="text-2xl font-bold leading-10"><%= @controller.name %> 컨트롤러</div>
           <%= submit_tag "업데이트", class: "btn bg-primary" %>
         </div>
-        <table class="base-table">
-          <thead>
-          <tr>
-            <th>시간</th>
-            <th>분</th>
-            <th>사용여부</th>
-            <th>온도</th>
-            <th>삭제</th>
-          </tr>
-          </thead>
-          <tbody>
+        <ul class="divide-y divide-base-border whitespace-nowrap h-full relative">
+          <% if @schedule.present? %>
             <% @schedule.each do |s| %>
-            <tr>
-              <td>
+              <li class="flex justify-between items-stretch px-4 py-2 space-x-4 h-full relative">
+                <div class="flex items-center space-x-4 basis-3/5 h-full">
+                  <!-- 시간 -->
+                  <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                    <div class="text-white text-left w-full lg:w-auto">시간</div>
+                    <div class="text-xl flex items-center space-x-1 w-full h-full">
                       <%= select_tag "schedule[#{s.id}][hour]",
                                      options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
-                               class: "input-style" %>
-              </td>
-              <td><%= number_field_tag "schedule[#{s.id}][minute]", s.minute, min: 0, max: 59, step: 1, inputmode: "decimal", class: "input-style" %></td>
-              <td><%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1 %></td>
-              <td><%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "input-style" %></td>
-              <td>
-                <%= link_to "삭제", schedule_path(s),
-                            data: {
-                              turbo_method: :delete,
-                              turbo_confirm: "정말 삭제하시겠습니까?"
-                            },
-                            class: "btn bg-danger text-sm" %>
-              </td>
-            </tr>
+                                     class: "select-style text-white min-w-[60px]" %>
+                      <div>:</div>
+                      <%= number_field_tag "schedule[#{s.id}][minute]",
+                                           s.minute, min: 0, max: 59, step: 1, inputmode: "decimal",
+                                           class: "input-style min-w-[60px]" %>
+                    </div>
+                  </div>
+
+                  <!-- 온도 -->
+                  <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                    <div class="text-white text-left w-full lg:w-auto">온도 (°C)</div>
+                    <div class="text-xl flex items-center">
+                      <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, min: -99, max: 99, step: "0.1", inputmode: "decimal", class: "input-style min-w-[68px]" %>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="flex items-center space-x-4 basis-2/5 justify-end h-full">
+                <!-- 사용 여부 -->
+                  <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full">
+                    <div class="text-white">ON/OFF</div>
+                    <label class="relative inline-flex items-center cursor-pointer h-full">
+                      <%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1, class: "sr-only peer" %>
+                      <div class="toggle_style"></div>
+                      <div class="toggle_btn"></div>
+                    </label>
+                  </div>
+
+                  <!-- 삭제 -->
+                  <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full relative">
+                    <div class="text-white">&nbsp;</div>
+                    <%= link_to schedule_path(s),
+                                data: { turbo_method: :delete, turbo_confirm: "정말 삭제하시겠습니까?" },
+                                class: "btn bg-danger text-sm flex items-center px-2 py-0 my-1.5 lg:px-4 lg:py-1.5 lg:my-0" do %>
+                      <div class="hidden lg:block">삭제</div>
+                      <div class="block lg:hidden"><i class="fa-solid fa-xmark"></i></div>
                     <% end %>
-          </tbody>
-        </table>
+                  </div>
+                </div>
+              </li>
+            <% end %>
+          <% else %>
+            <li class="text-center p-4 w-full">저장된 스케줄이 없습니다.</li>
+          <% end %>
+        </ul>
       </div>
     <% end %>
     <div class="flex p-4 space-x-4">

app/views/schedules/view.html.erb

@@ -1,30 +1,74 @@
 <div class="flex flex-col h-full divide-y divide-base-border text-white">
-  <div class="flex flex-col flex-1 p-4 space-y-4 overflow-y-hidden">
-    <div class="overflow-y-auto space-y-4">
-      <div class="flex justify-between">
-        <div class="text-2xl font-bold"><%= @controller.name %> 컨트롤러</div>
+  <div class="flex flex-col flex-1 space-y-4 overflow-y-hidden">
+    <div class="overflow-y-auto divide-y divide-base-border">
+      <div class="flex justify-between p-4">
+        <div class="text-2xl font-bold leading-10"><%= @controller.name %> 컨트롤러</div>
         <%= link_to "수정", schedule_edit_schedule_path(@controller.id), class: "btn bg-default-slate" %>
       </div>
-      <table class="base-table">
-        <thead>
-        <tr>
-          <th>시간</th>
-          <th>분</th>
-          <th>사용여부</th>
-          <th>온도</th>
-        </tr>
-        </thead>
-        <tbody>
+      <ul class="divide-y divide-base-border">
+        <% if @schedule.present? %>
           <% @schedule.each do |s| %>
-          <tr>
-            <td><%= s.hour %>시</td>
-            <td><%= s.minute %>분</td>
-            <td><%= s.is_active %></td>
-            <td><%= s.temperature %> °C</td>
-          </tr>
+            <li class="flex justify-between items-center px-4 py-2 space-x-4">
+              <div class="flex items-center space-x-6">
+                <!-- 시간 -->
+                <div class="flex flex-col lg:flex-row items-baseline space-x-2">
+                  <div class="text-white">시간</div>
+                  <div class="text-3xl flex items-baseline space-x-1">
+                    <div class="text-center w-[36px]"><%= s.hour.to_s.rjust(2, '0') %></div>
+                    <div>:</div>
+                    <div class="text-center w-[36px]"><%= s.minute.to_s.rjust(2, '0') %></div>
+                  </div>
+                </div>
+
+                <!-- 온도 -->
+                <div class="flex flex-col lg:flex-row items-baseline space-x-4">
+                  <div class="text-white">온도</div>
+                  <div class="text-3xl flex items-end space-x-2">
+                    <div class="text-left w-[50px]"><%= s.temperature %></div>
+                    <div class="text-white text-base leading-7">°C</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 사용 여부 -->
+              <div class="flex flex-col lg:flex-row items-baseline space-x-0 lg:space-x-4 items-end">
+                <div class="text-white mb-1">ON/OFF</div>
+                <div class="text-3xl w-8 mr-0">
+                  <%#= s.is_active %>
+                  <% if s.is_active %>
+                    <i class="fa-solid fa-check text-notice"></i>
+                  <% else %>
+                    <i class="fa-solid fa-xmark text-danger"></i>
                   <% end %>
-        </tbody>
-      </table>
+                </div>
+              </div>
+            </li>
+          <% end %>
+        <% else %>
+          <li class="text-center p-4 w-full">저장된 스케줄이 없습니다.</li>
+        <% end %>
+      </ul>
+
+      <!--      <table class="base-table">-->
+      <!--        <thead>-->
+      <!--        <tr>-->
+      <!--          <th>시간</th>-->
+      <!--          <th>분</th>-->
+      <!--          <th>사용여부</th>-->
+      <!--          <th>온도</th>-->
+      <!--        </tr>-->
+      <!--        </thead>-->
+      <!--        <tbody>-->
+      <%# @schedule.each do |s| %>
+      <!--          <tr>-->
+      <!--            <td><%#= s.hour %>시</td>-->
+      <!--            <td><%#= s.minute %>분</td>-->
+      <!--            <td><%#= s.is_active %></td>-->
+      <!--            <td><%#= s.temperature %> °C</td>-->
+      <!--          </tr>-->
+      <%# end %>
+      <!--        </tbody>-->
+      <!--      </table>-->
     </div>
   </div>
 </div>