Feat[#THKV-118] : Navbar 리디자인

src/components/common/Icon/assets/Auto.tsx

@@ -1,8 +1,8 @@
 import { SVGProps } from 'react';
 
 const Auto = ({
-  width = 20,
-  height = 20,
+  width,
+  height,
   color,
   ...props
 }: SVGProps<SVGSVGElement> & { color?: string; className?: string }) => {
@@ -15,36 +15,13 @@ const Auto = ({
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
-      <g id='Iconly/Regular/Light/Activity'>
-        <g id='Activity'>
-          <path
-            id='Path_33966'
-            d='M7.24487 14.7816L10.238 10.8914L13.6522 13.5734L16.5813 9.79303'
-            stroke={color}
-            strokeWidth='1.5'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <circle
-            id='Ellipse_741'
-            cx='19.9954'
-            cy='4.20036'
-            r='1.9222'
-            stroke={color}
-            strokeWidth='1.5'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            id='Path'
-            d='M14.9245 3.12027H7.65679C4.64535 3.12027 2.77808 5.25299 2.77808 8.26443V16.3468C2.77808 19.3583 4.60874 21.4818 7.65679 21.4818H16.2609C19.2724 21.4818 21.1396 19.3583 21.1396 16.3468V9.30791'
-            stroke={color}
-            strokeWidth='1.5'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </g>
-      </g>
+      <path
+        d='M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.25736 4.00736 5.25 5.25 5.25H18.75C19.9926 5.25 21 6.25736 21 7.5V18.75M3 18.75C3 19.9926 4.00736 21 5.25 21H18.75C19.9926 21 21 19.9926 21 18.75M3 18.75V11.25C3 10.0074 4.00736 9 5.25 9H18.75C19.9926 9 21 10.0074 21 11.25V18.75'
+        stroke={color}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
     </svg>
   );
 };

src/components/common/Icon/assets/Calendar.tsx

@@ -16,72 +16,7 @@ const Calendar = ({
       {...props}
     >
       <path
-        d='M3.09265 9.40421H20.9166'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M16.4421 13.3097H16.4514'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M12.0046 13.3097H12.0139'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M7.55793 13.3097H7.5672'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M16.4421 17.1962H16.4514'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M12.0046 17.1962H12.0139'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M7.55793 17.1962H7.5672'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M16.0438 2V5.29078'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M7.96552 2V5.29078'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M16.2383 3.57922H7.77096C4.83427 3.57922 3 5.21516 3 8.22225V17.2719C3 20.3263 4.83427 22 7.77096 22H16.229C19.175 22 21 20.3546 21 17.3475V8.22225C21.0092 5.21516 19.1842 3.57922 16.2383 3.57922Z'
+        d='M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.25736 4.00736 5.25 5.25 5.25H18.75C19.9926 5.25 21 6.25736 21 7.5V18.75M3 18.75C3 19.9926 4.00736 21 5.25 21H18.75C19.9926 21 21 19.9926 21 18.75M3 18.75V11.25C3 10.0074 4.00736 9 5.25 9H18.75C19.9926 9 21 10.0074 21 11.25V18.75M12 12.75H12.0075V12.7575H12V12.75ZM12 15H12.0075V15.0075H12V15ZM12 17.25H12.0075V17.2575H12V17.25ZM9.75 15H9.7575V15.0075H9.75V15ZM9.75 17.25H9.7575V17.2575H9.75V17.25ZM7.5 15H7.5075V15.0075H7.5V15ZM7.5 17.25H7.5075V17.2575H7.5V17.25ZM14.25 12.75H14.2575V12.7575H14.25V12.75ZM14.25 15H14.2575V15.0075H14.25V15ZM14.25 17.25H14.2575V17.2575H14.25V17.25ZM16.5 12.75H16.5075V12.7575H16.5V12.75ZM16.5 15H16.5075V15.0075H16.5V15Z'
         stroke={color}
         strokeWidth='1.5'
         strokeLinecap='round'

src/components/common/Icon/assets/Chart.tsx

@@ -5,47 +5,18 @@ const Chart = ({ width, height, color, ...props }: SVGProps<SVGSVGElement>) => {
     <svg
       width={width}
       height={height}
-      viewBox='0 0 22 22'
+      viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
-      <g id='Chart'>
-        <path
-          id='Line_182'
-          d='M6.37145 9.20166V16.0618'
-          stroke={color}
-          strokeWidth='1.5'
-          strokeLinecap='round'
-          strokeLinejoin='round'
-        />
-        <path
-          id='Line_183'
-          d='M11.0381 5.91907V16.0618'
-          stroke={color}
-          strokeWidth='1.5'
-          strokeLinecap='round'
-          strokeLinejoin='round'
-        />
-        <path
-          id='Line_184'
-          d='M15.6285 12.8268V16.0618'
-          stroke={color}
-          strokeWidth='1.5'
-          strokeLinecap='round'
-          strokeLinejoin='round'
-        />
-        <path
-          id='Path'
-          fillRule='evenodd'
-          clipRule='evenodd'
-          d='M15.6857 1H6.31429C3.04762 1 1 3.31208 1 6.58516V15.4148C1 18.6879 3.0381 21 6.31429 21H15.6857C18.9619 21 21 18.6879 21 15.4148V6.58516C21 3.31208 18.9619 1 15.6857 1Z'
-          stroke={color}
-          strokeWidth='1.5'
-          strokeLinecap='round'
-          strokeLinejoin='round'
-        />
-      </g>
+      <path
+        d='M19.5 14.25V11.625C19.5 9.76104 17.989 8.25 16.125 8.25H14.625C14.0037 8.25 13.5 7.74632 13.5 7.125V5.625C13.5 3.76104 11.989 2.25 10.125 2.25H8.25M13.4812 15.7312L15 17.25M10.5 2.25H5.625C5.00368 2.25 4.5 2.75368 4.5 3.375V19.875C4.5 20.4963 5.00368 21 5.625 21H18.375C18.9963 21 19.5 20.4963 19.5 19.875V11.25C19.5 6.27944 15.4706 2.25 10.5 2.25ZM14.25 13.875C14.25 15.3247 13.0747 16.5 11.625 16.5C10.1753 16.5 9 15.3247 9 13.875C9 12.4253 10.1753 11.25 11.625 11.25C13.0747 11.25 14.25 12.4253 14.25 13.875Z'
+        stroke={color}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
     </svg>
   );
 };

src/components/common/Icon/assets/Dashboard.tsx

@@ -1,22 +1,43 @@
 import { SVGProps } from 'react';
 
 const Dashboard = ({
-  width = 20,
-  height = 20,
+  width,
+  height,
   color,
   ...props
 }: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       width={width}
       height={height}
-      viewBox='0 0 20 20'
+      viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M14.1667 11.6667V16.6667M11.6667 14.1667H16.6667M5.00004 8.33334H6.66671C7.58718 8.33334 8.33337 7.58715 8.33337 6.66668V5.00001C8.33337 4.07954 7.58718 3.33334 6.66671 3.33334H5.00004C4.07957 3.33334 3.33337 4.07954 3.33337 5.00001V6.66668C3.33337 7.58715 4.07957 8.33334 5.00004 8.33334ZM13.3334 8.33334H15C15.9205 8.33334 16.6667 7.58715 16.6667 6.66668V5.00001C16.6667 4.07954 15.9205 3.33334 15 3.33334H13.3334C12.4129 3.33334 11.6667 4.07954 11.6667 5.00001V6.66668C11.6667 7.58715 12.4129 8.33334 13.3334 8.33334ZM5.00004 16.6667H6.66671C7.58718 16.6667 8.33337 15.9205 8.33337 15V13.3333C8.33337 12.4129 7.58718 11.6667 6.66671 11.6667H5.00004C4.07957 11.6667 3.33337 12.4129 3.33337 13.3333V15C3.33337 15.9205 4.07957 16.6667 5.00004 16.6667Z'
+        d='M3.75 6C3.75 4.75736 4.75736 3.75 6 3.75H8.25C9.49264 3.75 10.5 4.75736 10.5 6V8.25C10.5 9.49264 9.49264 10.5 8.25 10.5H6C4.75736 10.5 3.75 9.49264 3.75 8.25V6Z'
+        stroke={color}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M3.75 15.75C3.75 14.5074 4.75736 13.5 6 13.5H8.25C9.49264 13.5 10.5 14.5074 10.5 15.75V18C10.5 19.2426 9.49264 20.25 8.25 20.25H6C4.75736 20.25 3.75 19.2426 3.75 18V15.75Z'
+        stroke={color}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M13.5 6C13.5 4.75736 14.5074 3.75 15.75 3.75H18C19.2426 3.75 20.25 4.75736 20.25 6V8.25C20.25 9.49264 19.2426 10.5 18 10.5H15.75C14.5074 10.5 13.5 9.49264 13.5 8.25V6Z'
+        stroke={color}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M13.5 15.75C13.5 14.5074 14.5074 13.5 15.75 13.5H18C19.2426 13.5 20.25 14.5074 20.25 15.75V18C20.25 19.2426 19.2426 20.25 18 20.25H15.75C14.5074 20.25 13.5 19.2426 13.5 18V15.75Z'
         stroke={color}
         strokeWidth='1.5'
         strokeLinecap='round'

src/components/common/Icon/assets/NavSearch.tsx

@@ -0,0 +1,29 @@
+import { SVGProps } from 'react';
+
+const NavSearch = ({
+  width,
+  height,
+  color,
+  ...props
+}: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M15.75 15.75L13.2615 13.2615M13.2615 13.2615C13.8722 12.6507 14.25 11.807 14.25 10.875C14.25 9.01104 12.739 7.5 10.875 7.5C9.01104 7.5 7.5 9.01104 7.5 10.875C7.5 12.739 9.01104 14.25 10.875 14.25C11.807 14.25 12.6507 13.8722 13.2615 13.2615ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z'
+        stroke={color}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default NavSearch;

src/components/common/Icon/assets/index.ts

@@ -1,31 +1,32 @@
 import ArrowDown from '@/components/common/Icon/assets/ArrowDown';
 import ArrowNext from '@/components/common/Icon/assets/ArrowNext';
+import ArrowNextBlock from '@/components/common/Icon/assets/ArrowNextBlock';
 import ArrowPrev from '@/components/common/Icon/assets/ArrowPrev';
+import ArrowPrevBlock from '@/components/common/Icon/assets/ArrowPrevBlock';
 import Arrowup from '@/components/common/Icon/assets/ArrowUp';
 import Auto from '@/components/common/Icon/assets/Auto';
 import Calendar from '@/components/common/Icon/assets/Calendar';
 import Chart from '@/components/common/Icon/assets/Chart';
+import CheckCircle from '@/components/common/Icon/assets/CheckCircle';
 import Danger from '@/components/common/Icon/assets/Danger';
 import Dashboard from '@/components/common/Icon/assets/Dashboard';
 import Edit from '@/components/common/Icon/assets/Edit';
 import Group from '@/components/common/Icon/assets/Group';
 import Hide from '@/components/common/Icon/assets/Hide';
 import Normal from '@/components/common/Icon/assets/Info';
+import InfoCircle from '@/components/common/Icon/assets/InfoCircle';
 import Logout from '@/components/common/Icon/assets/Logout';
+import NavSearch from '@/components/common/Icon/assets/NavSearch';
 import Plus from '@/components/common/Icon/assets/Plus';
 import Profile from '@/components/common/Icon/assets/Profile';
 import Search from '@/components/common/Icon/assets/Search';
 import Show from '@/components/common/Icon/assets/Show';
 import Time from '@/components/common/Icon/assets/Time';
 import TrendDown from '@/components/common/Icon/assets/TrendDown';
 import TrendUp from '@/components/common/Icon/assets/TrendUp';
+import WarnCircle from '@/components/common/Icon/assets/WarnCircle';
 import Xmark from '@/components/common/Icon/assets/Xmark';
 import { colors } from '@/styles/colors';
-import ArrowNextBlock from './ArrowNextBlock';
-import ArrowPrevBlock from './ArrowPrevBlock';
-import CheckCircle from './CheckCircle';
-import InfoCircle from './InfoCircle';
-import WarnCircle from './WarnCircle';
 
 type IconMapEntry = {
   type: 'fill' | 'stroke';
@@ -112,6 +113,10 @@ export const iconMap: Record<string, IconMapEntry> = {
     type: 'stroke',
     file: WarnCircle,
   },
+  navSearch: {
+    type: 'stroke',
+    file: NavSearch,
+  },
 };
 
 const COLOR_CLASSNAMES: ColorClassNames = {
@@ -157,6 +162,8 @@ export const COLORS = {
   warning: colors.red[500],
   black: colors.black[100],
   grey: colors.grey[200],
+  grey500: colors.grey[500],
+  green500: colors.green[500],
   //---
   // 기존 아이콘 색상
   white: colors.white[100],

src/components/common/NavMenu/NavMenu.variant.tsx

@@ -1,12 +1,12 @@
 import { cva } from 'class-variance-authority';
 
 export const navMenuVariants = cva(
-  'flex items-center gap-3 w-full px-4 py-3 text-sm bg-transparent h-11 rounded-full cursor-pointer hover:bg-green-100 active:bg-green-100',
+  'flex items-center gap-4 w-full px-6 py-4 bg-transparent h-14 cursor-pointer active:bg-grey-900',
   {
     variants: {
       isActive: {
-        true: 'bg-green-100 text-green-800 ',
-        false: 'text-gray-600',
+        true: 'bg-grey-900 text-green-500',
+        false: 'text-grey-500',
       },
     },
   },