디자인 템플릿 작업 시작

2025-04-23 03:45:57 +09:00 · 2025-04-23 03:45:57 +09:00 · a9b0fe80e4
parent fbf93e80ae
commit a9b0fe80e4
15 changed files with 206 additions and 4 deletions
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -130,6 +130,7 @@ GEM
      tzinfo
    ffi (1.17.2-aarch64-linux-gnu)
    ffi (1.17.2-arm64-darwin)
+    ffi (1.17.2-x86_64-linux-gnu)
    foreman (0.88.1)
    fugit (1.11.1)
      et-orbi (~> 1, >= 1.2.11)
@ -195,6 +196,8 @@ GEM
      racc (~> 1.4)
    nokogiri (1.18.7-arm64-darwin)
      racc (~> 1.4)
+    nokogiri (1.18.7-x86_64-linux-gnu)
+      racc (~> 1.4)
    ostruct (0.6.1)
    parallel (1.27.0)
    parser (3.3.8.0)
@ -322,6 +325,7 @@ GEM
      thor (~> 1.3.1)
    sqlite3 (2.6.0-aarch64-linux-gnu)
    sqlite3 (2.6.0-arm64-darwin)
+    sqlite3 (2.6.0-x86_64-linux-gnu)
    sshkit (1.24.0)
      base64
      logger
@ -336,6 +340,7 @@ 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)
@ -365,6 +370,7 @@ PLATFORMS
  aarch64-linux
  aarch64-linux-gnu
  arm64-darwin-24
+  x86_64-linux

 DEPENDENCIES
  amazing_print
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@ -11,6 +11,12 @@
    --color-danger: rgb(239, 83, 80);
    --color-table-border: rgb(203, 213, 225);

+    /* theme */
+    --color-base-background: rgb(39, 44, 56);
+    --color-base-secondary: rgb(55, 61, 71);
+    --color-base-text: rgb(152, 158, 172);
+    --color-base-border: rgb(77, 84, 102);
+
    --base-font-size: 0.85rem;
    --text-xs: calc(var(--base-font-size) * 0.75);
    --text-xs--line-height: calc(1 / var(--text-xs));
@ -90,7 +96,11 @@
    }

    .side-bar {
-        @apply w-64 px-4 text-lg font-bold divide-y divide-default-slate-dark;
+        @apply w-[16rem] px-4 text-lg font-bold divide-y divide-base-border;
+    }
+
+    .content {
+        @apply rounded-lg bg-base-secondary;
    }

    .page-title {
@ -119,7 +129,7 @@
    }

    .menu-group-icon {
-        @apply py-1 text-sm text-default-slate-dark font-medium justify-center
+        @apply py-1 text-sm font-medium justify-center
    }

    .menu-group-name {
@ -190,3 +200,23 @@
        @apply text-lg font-bold;
    }
 }
+
+/* 기본 스크롤바 스타일 */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: rgba(21, 21, 21, 0.4);
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(100, 100, 100, 0.6);
+}
--- a/app/controllers/device_controller.rb
+++ b/app/controllers/device_controller.rb
@ -0,0 +1,2 @@
+class DeviceController < ApplicationController
+end
--- a/app/controllers/web_controller.rb
+++ b/app/controllers/web_controller.rb
@ -0,0 +1,2 @@
+class WebController < ApplicationController
+end
--- a/app/helpers/device_helper.rb
+++ b/app/helpers/device_helper.rb
@ -0,0 +1,2 @@
+module DeviceHelper
+end
--- a/app/helpers/web_helper.rb
+++ b/app/helpers/web_helper.rb
@ -0,0 +1,2 @@
+module WebHelper
+end
--- a/app/views/device/index.html.erb
+++ b/app/views/device/index.html.erb
@ -0,0 +1 @@
+<div class="p-4">DEVICE</div>
--- a/app/views/layouts/device.html.erb
+++ b/app/views/layouts/device.html.erb
@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title><%= content_for(:title) || "Farmitry Hvac" %></title>
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
+  <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
+
+  <link rel="icon" href="/icon.png" type="image/png">
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/icon.png">
+
+  <%# 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 class="h-screen overflow-hidden bg-base-background text-base-text min-w-[400px] overflow-x-auto">
+<%= turbo_frame_tag :modals %>
+<main class="flex flex-col h-full">
+  <%= render "partials/header" %>
+  <div class="flex flex-row flex-1 w-full overflow-hidden">
+    <%= render "partials/sidebar" %>
+    <div class="flex-1 h-full pb-4 pr-4">
+      <div class="flex-1 h-full content">
+        <% if flash[:notice] %>
+          <div class="m-4 rounded 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">
+            <%= raw flash[:alert] %>
+          </div>
+        <% end %>
+        <%= yield %>
+      </div>
+    </div>
+  </div>
+</main>
+</body>
+
+</html>
--- a/app/views/layouts/web.html.erb
+++ b/app/views/layouts/web.html.erb
@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title><%= content_for(:title) || "Farmitry Hvac" %></title>
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
+  <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
+
+  <link rel="icon" href="/icon.png" type="image/png">
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/icon.png">
+
+  <%# 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>
+<%= 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">
+    <div class="w-full h-full">
+      <% if flash[:notice] %>
+        <div class="m-4 rounded 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">
+          <%= raw flash[:alert] %>
+        </div>
+      <% end %>
+      <%= yield %>
+    </div>
+  </div>
+</main>
+</body>
+
+</html>
--- a/app/views/partials/_header.html.erb
+++ b/app/views/partials/_header.html.erb
@ -1,9 +1,9 @@
 <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" %>
+    <%= image_tag "svg/svg_logo.svg", class: "w-fit h-auto mr-4" %>
    <%= link_to root_path do %>
      <div class="flex h-full items-center tracking-[0.5rem]">FARMITRY</div>
    <% end %>
  </div>
-  <div data-timer-target="output" class="text-gray-600"></div>
+  <div data-timer-target="output"></div>
 </header>
--- a/app/views/partials/_sidebar.html.erb
+++ b/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-base-text/30 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-base-text/30 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-base-text/30 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-base-text/30 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-base-text/30 text-4xl"></i>
+    </div>
+    <div class="menu-group-name">
+      설청
+    </div>
+  </div>
+</nav>
--- a/app/views/web/index.html.erb
+++ b/app/views/web/index.html.erb
@ -0,0 +1 @@
+<div>WEB</div>
--- a/config/routes.rb
+++ b/config/routes.rb
@ -33,4 +33,7 @@ Rails.application.routes.draw do
      post :open
    end
  end
+
+  resources :device
+  resources :web
 end
--- a/test/controllers/device_controller_test.rb
+++ b/test/controllers/device_controller_test.rb
@ -0,0 +1,7 @@
+require "test_helper"
+
+class DeviceControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end
--- a/test/controllers/web_controller_test.rb
+++ b/test/controllers/web_controller_test.rb
@ -0,0 +1,7 @@
+require "test_helper"
+
+class WebControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end