화면 레이아웃 구성

app/assets/images/svg/svg_logo.svg

@@ -0,0 +1,5 @@
+<svg width="189" height="189" viewBox="0 0 189 189" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M187.296 112.455C178.909 156.06 140.551 189 94.5 189C42.8066 189 0.807589 147.494 0.0114746 95.99C3.71633 92.1456 7.55581 88.7053 11.4659 85.6265C11.1579 88.5422 11 91.5027 11 94.5C11 140.616 48.3842 178 94.5 178C126.824 178 154.858 159.633 168.736 132.765C176.362 127.258 182.483 120.223 187.296 112.455ZM188.892 89.9371C185.31 93.8915 181.585 97.4466 177.777 100.643C177.925 98.6143 178 96.5659 178 94.5C178 48.3843 140.616 11 94.5 11C63.5437 11 36.5219 27.8457 22.1015 52.8701C14.5028 57.4406 8.23356 63.4529 3.13478 70.2708C13.8339 29.8192 50.6846 0 94.5 0C145.161 0 186.511 39.8653 188.892 89.9371Z" fill="#158078"/>
+<path d="M128 59C73.6 23 25 55.6667 7.5 76.5C7.5 76.5 44 50.0086 88.5 59C21 66 1.5 95.5 1.5 95.5L7.5 105.5L16 99.5C16 99.5 25 110 47.5 105.5C70 101 101.5 55 128 59Z" fill="#158078"/>
+<path d="M60 128.621C114.4 164.621 163 131.954 180.5 111.121C180.5 111.121 144 137.613 99.5 128.621C167 121.621 186.5 92.1211 186.5 92.1211L180.5 82.1211L172 88.1211C172 88.1211 163 77.6211 140.5 82.1211C118 86.6211 86.5 132.621 60 128.621Z" fill="#158078"/>
+</svg>

app/assets/stylesheets/application.tailwind.css

@@ -2,14 +2,14 @@
 
 @theme {
     --color-default: rgb(226, 232, 240);
-    --color-defaultSlate: rgb(100, 116, 139);
+    --color-default-slate: rgb(100, 116, 139);
-    --color-defaultSlateDark: rgb(71, 85, 105);
+    --color-default-slate-dark: rgb(71, 85, 105);
     --color-primary: rgb(66, 165, 245);
     --color-notice: rgb(19, 198, 154);
     --color-warning: rgb(255, 202, 40);
     --color-accept: rgb(121, 134, 203);
     --color-danger: rgb(239, 83, 80);
-    --color-tableBorder: rgb(203, 213, 225);
+    --color-table-border: rgb(203, 213, 225);
 
     --base-font-size: 0.85rem;
     --text-xs: calc(var(--base-font-size) * 0.75);
@@ -42,11 +42,11 @@
 
 @layer base {
     body {
-        @apply text-sm text-defaultSlateDark
+        @apply text-sm text-default-slate-dark
     }
 
     hr {
-        @apply border-tableBorder
+        @apply border-table-border
     }
 
     a.disabled {
@@ -58,33 +58,41 @@
     }
 
     .btn {
-        @apply justify-center rounded-xs bg-defaultSlate px-2 py-0.5 text-sm font-semibold leading-6 text-white
+        @apply justify-center rounded-md bg-default-slate px-4 py-2 text-sm font-semibold leading-6 text-white
         shadow-xs hover:opacity-80 cursor-pointer
     }
 
     .card {
-        @apply bg-white border border-tableBorder rounded-xs shadow-xs
+        @apply bg-white border border-table-border rounded-xs shadow-xs
     }
 
     /*Form*/
     .label-style {
-        @apply block my-1 font-bold text-defaultSlateDark
+        @apply block my-1 font-bold text-default-slate-dark
     }
 
     .select-style {
-        @apply block w-full h-8 px-3 py-1.5 border border-defaultSlate/50 rounded-xs
+        @apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs
     }
 
     .input-style {
-        @apply block w-full h-8 px-3 py-1.5 border border-defaultSlate/50 rounded-xs
+        @apply block w-full h-8 px-3 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-defaultSlate/50 rounded-xs
+        @apply block w-full pl-4 flex-1 py-1.5 ring-1 ring-inset ring-default-slate/50 rounded-xs
     }
 }
 
 @layer utilities {
+    .header {
+        @apply p-4 text-lg font-bold h-16 flex justify-between;
+    }
+
+    .side-bar {
+        @apply w-64 px-4 text-lg font-bold divide-y divide-default-slate-dark;
+    }
+
     .page-title {
         @apply text-xl font-bold;
     }
@@ -94,7 +102,7 @@
     }
 
     .form-title {
-        @apply text-center text-3xl font-bold tracking-tight text-defaultSlateDark
+        @apply text-center text-3xl font-bold tracking-tight text-default-slate-dark
     }
 
     .field {
@@ -107,15 +115,15 @@
 
     /*Menu*/
     .menu-group {
-        @apply py-2 px-4
+        @apply flex flex-row py-6 px-4 gap-x-4 justify-between items-center w-full
     }
 
-    .menu-group-title {
+    .menu-group-icon {
-        @apply py-1 text-sm text-defaultSlateDark font-medium
+        @apply py-1 text-sm text-default-slate-dark font-medium justify-center
     }
 
-    .menu-group-items {
+    .menu-group-name {
-        @apply p-1
+        @apply p-1 flex-1
     }
 
     .menu-group-items-title {
@@ -123,16 +131,16 @@
     }
 
     .copyright {
-        @apply text-defaultSlateDark text-center
+        @apply text-default-slate-dark text-center
     }
 
     /*Pagy*/
     .pagy {
-        @apply flex items-center justify-center space-x-1 font-semibold text-sm text-defaultSlate;
+        @apply flex items-center justify-center space-x-1 font-semibold text-sm text-default-slate;
     }
 
     .pagy a:not(.gap) {
-        @apply block rounded-xs px-2 py-1 border border-defaultSlate/50;
+        @apply block rounded-xs px-2 py-1 border border-default-slate/50;
     }
 
     .pagy a:not(.gap):hover {
@@ -140,11 +148,11 @@
     }
 
     .pagy a:not(.gap):not([href]) {
-        @apply text-defaultSlate/50 border border-defaultSlate/25 cursor-default
+        @apply text-default-slate/50 border border-default-slate/25 cursor-default
     }
 
     .pagy a:not(.gap).current {
-        @apply text-white bg-defaultSlate
+        @apply text-white bg-default-slate
     }
 
     .pagy a.gap {
@@ -161,15 +169,15 @@
 
     /*Base Table*/
     .base-table {
-        @apply min-w-full divide-y divide-tableBorder whitespace-nowrap
+        @apply min-w-full divide-y divide-table-border whitespace-nowrap border border-table-border
     }
 
     .base-table th {
-        @apply bg-default px-2 py-2 text-left font-semibold text-defaultSlateDark lg:table-cell
+        @apply bg-default px-2 py-2 text-left font-semibold text-default-slate-dark lg:table-cell
     }
 
     .base-table td {
-        @apply border-t border-tableBorder px-2 py-1 text-defaultSlate lg:table-cell whitespace-nowrap
+        @apply border-t border-table-border px-2 py-1 text-default-slate lg:table-cell whitespace-nowrap
     }
 }
 

app/views/layouts/application.html.erb

@@ -20,11 +20,19 @@
   <%# Includes all stylesheet files in app/assets/stylesheets %>
   <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
   <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
 </head>
 
-<body>
+<body class="h-screen overflow-hidden">
-<main class="m-4">
+<main class="flex flex-col h-full divide-y divide-border-table-border">
-  <%= yield %>
+  <%= render "partials/header" %>
+  <div class="flex flex-row flex-1 w-full divide-x divide-border-table-border overflow-hidden">
+    <%= render "partials/sidebar" %>
+    <div class="w-full h-full">
+      <%= yield %>
+    </div>
+  </div>
 </main>
 </body>
+
 </html>

app/views/modbus/index.html.erb

@@ -8,11 +8,26 @@
   </div>
 <% end %>
 
-<% @schedule.each do |s| %>
+<div class="flex flex-col h-full divide-y divide-border-table-border">
-  <div class="flex justify-items-center gap-x-2">
+  <div class="flex-1 overflow-y-auto p-4">
-    <div><%= s.hour %>시</div>
+    <table class="base-table">
-    <div><%= s.temperature %> °C</div>
+      <thead>
+      <tr>
+        <th>시간</th>
+        <th>온도</th>
+      </tr>
+      </thead>
+      <tbody>
+      <% @schedule.each do |s| %>
+        <tr>
+          <td><%= s.hour %>시</td>
+          <td><%= s.temperature %> °C</td>
+        </tr>
+      <% end %>
+      </tbody>
+    </table>
   </div>
-<% end %>
+  <div class="flex p-4">
-
+    <%= link_to "수정", "/modbus/schedule_edit", class: "btn bg-default-slate" %>
-<%= link_to "수정", "/modbus/schedule_edit", class: "btn btn-primary" %>
+  </div>
+</div>

app/views/modbus/schedule_edit.html.erb

@@ -1,14 +1,24 @@
-<%= form_with url: "/modbus/schedule_edit_update", method: :post do %>
+<%= form_with url: "/modbus/schedule_edit_update", method: :post, class: 'flex flex-col h-full divide-y divide-border-table-border' do %>
-  <% @schedule.each do |s| %>
+  <div class="flex-1 overflow-y-auto p-4">
-    <div class="flex justify-items-center gap-x-2 pb-2">
+    <table class="base-table">
-      <div><%= s.hour %>시</div>
+      <thead>
-      <div>
+      <tr>
-        <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "border px-2 py-1 rounded" %> °C
+        <th>시간</th>
-      </div>
+        <th>온도</th>
-    </div>
+      </tr>
-  <% end %>
+      </thead>
-
+      <tbody>
-  <div class="pt-4">
+      <% @schedule.each do |s| %>
-    <%= submit_tag "업데이트", class: "bg-blue-500 text-white px-4 py-2 rounded" %>
+        <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>
+        </tr>
+      <% end %>
+      </tbody>
+    </table>
   </div>
-<% end %>
+
+  <div class="flex p-4">
+    <%= submit_tag "업데이트", class: "btn bg-primary" %>
+  </div>
+<% end %>

app/views/partials/_header.html.erb

@@ -0,0 +1,10 @@
+<header class="flex header">
+  <div class="flex flex-row">
+    <%= 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 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" %>
+  </div>
+</header>

app/views/partials/_sidebar.html.erb

@@ -0,0 +1,42 @@
+<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>