디자인 템플릿 작업 시작

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);
+}