🎨[Design] UI 대공사 시작 - sidebar

client/src/components/Footer/Footer.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 class Footer extends Component {
   render() {
     return (
-      <footer className="px-0 px-lg-3 bg-base-200 w-full h-20 pt-6 fixed bottom-0">
+      <footer className="px-0 px-lg-3 w-full h-20 pt-6 bottom-0">
         <nav>
           <p className="copyright text-center">
             HANIUM-GONGANTS © 2022 COPYRIGHT

client/src/components/Navbars/AdminNavbar.js

@@ -81,32 +81,20 @@ function Header() {
   };
 
   return (
-    <div class="drawer-content flex flex-col">
-      <div class="w-full navbar bg-base-200 drop-shadow-lg">
-        {/* <div class="flex-none lg:hidden">
-          <label for="my-drawer-3" class="btn btn-square btn-ghost">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              class="inline-block w-6 h-6 stroke-current"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M4 6h16M4 12h16M4 18h16"
-              ></path>
-            </svg>
-          </label>
-        </div> */}
-        <div class="flex-1 px-2 mx-2">
+    <div className="flex flex-col shadow-none bg-white">
+      <div className="w-full navbar bg-white shadow-none">
+        <div className="flex-1 px-2 mx-2">
           <a href="/">
             <img src={GongImg} style={{ width: '30px', float: 'left' }} />
-            GongAnts
+            <span
+              className="mx-1"
+              style={{ fontFamily: 'GmarketSansMedium', fontWeight: '700' }}
+            >
+              GongAnts
+            </span>
           </a>
         </div>
-        <div class="flex-none hidden lg:block">
+        <div className="flex-none hidden lg:block">
           <span>
             <label for="notification-modal" className="modal-button">
               <NotificationsNoneIcon

client/src/components/Sidebar/Sidebar.js

@@ -2,16 +2,20 @@ import React, { Component } from 'react';
 import { useLocation, NavLink } from 'react-router-dom';
 
 import { Nav } from 'react-bootstrap';
+import { groundColor, whiteColor } from 'styles/color';
 
 function Sidebar({ color, image, routes }) {
   const location = useLocation();
   const activeRoute = (routeName) => {
     return location.pathname.indexOf(routeName) > -1 ? 'active' : '';
   };
   return (
-    <div>
-      <label for="my-drawer-2" class="drawer-overlay"></label>
-      <ul class="menu p-4 w-80 bg-base-100" style={{ height: '50vh' }}>
+    <div
+      className="w-full min-h-screen"
+      style={{ backgroundColor: groundColor }}
+    >
+      {/* <label for="my-drawer-2" class="drawer-overlay"></label> */}
+      <ul className="p-4 w-72" style={{ height: '50vh' }}>
         {routes.map((prop, key) => {
           if (!prop.redirect)
             return (
@@ -22,6 +26,14 @@ function Sidebar({ color, image, routes }) {
                     : activeRoute(prop.layout + prop.path)
                 }
                 key={key}
+                style={{
+                  width: '250px',
+                  backgroundColor: whiteColor,
+                  height: '65px',
+                  marginTop: '16px',
+                  borderRadius: '50px',
+                  padding: '20px 25px',
+                }}
               >
                 <NavLink to={prop.layout + prop.path} className="nav-link">
                   <i className={prop.icon} />

client/src/layouts/Home/Admin.js

@@ -56,14 +56,11 @@ function Admin() {
 
   return (
     <>
-      <div className="wrapper relative">
-        <div
-          className="drawer"
-          style={{ boxShadow: '6px 4px 5px 3px #EAEEF1', padding: '0' }}
-        >
+      <div className="wrapper">
+        <div className="z-10 relative">
           <AdminNavbar />
         </div>
-        <div className="flex h-max mt-2" ref={mainPanel}>
+        <div className="flex h-max mt-2 absolute" ref={mainPanel}>
           <div className="flex-initial h-max">
             <Sidebar
               color={color}

client/src/styles/color.js

@@ -1,6 +1,6 @@
-export const mainColor = "#560DF8";
-export const baseColor = "#B2CAD5";
-export const pointColor = "#2F6578";
-export const serveColor = "#3E9BBB";
-
-export const whiteColor = "#FFFFFF";
+export const mainColor = '#560DF8';
+export const baseColor = '#B2CAD5';
+export const pointColor = '#2F6578';
+export const serveColor = '#3E9BBB';
+export const groundColor = '#404756';
+export const whiteColor = '#FFFFFF';

client/src/styles/global.css

@@ -4,4 +4,11 @@
 
 @import "tailwindcss/base";
 @import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import "tailwindcss/utilities";
+
+@font-face {
+    font-family: 'GmarketSansMedium';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}

client/src/views/Dashboard.js

@@ -11,8 +11,11 @@ function Dashboard() {
 
   return (
     <>
-      <div className="mt-5">
-        <RoomTable userName={userName} />
+      <div
+        className="pt-5 min-h-screen z-0"
+        style={{ backgroundColor: '#404756' }}
+      >
+        {/* <RoomTable userName={userName} /> */}
         <TodoList />
         <FriendsList />
       </div>