feat(shared/styles, web): 디자인 토큰 값 변경, home일 경우만 saved로 링크 이동으로 수정 (#52)

* feat(web/components/Layout): pathname이 home일 경우 saved로 가도록 추가

* feat(shared/styles/theme.css.ts): 수정된 디자인 컬러 토큰 반영

apps/web/src/components/Layout/index.tsx

@@ -1,15 +1,18 @@
 import { useEffect } from 'react';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { PATH } from '@/constants';
 import { Header, NavBar } from './components';
 import Wrapper from '../Wrapper';
 
 export default function Layout() {
+  const { pathname } = useLocation();
   const navigate = useNavigate();
 
   useEffect(() => {
-    navigate(PATH.SAVED_LINK, { replace: true });
-  }, [navigate]);
+    if (pathname === PATH.HOME) {
+      navigate(PATH.SAVED_LINK, { replace: true });
+    }
+  }, [navigate, pathname]);
 
   return (
     <>

packages/shared/styles/src/theme.css.ts

@@ -13,20 +13,20 @@ export const vars = createGlobalThemeContract({
     archiveMint: 'color-archive-mint',
     archivePink: 'color-archive-pink',
     archivePurple: 'color-archive-purple',
-    gray50: 'color-gray-50',
     gray100: 'color-gray-100',
-    gray150: 'color-gray-150',
     gray200: 'color-gray-200',
-    gray250: 'color-gray-250',
     gray300: 'color-gray-300',
-    gray350: 'color-gray-350',
     gray400: 'color-gray-400',
-    gray450: 'color-gray-450',
     gray500: 'color-gray-500',
-    gray550: 'color-gray-550',
-    system50: 'color-system-50',
+    gray600: 'color-gray-600',
+    gray700: 'color-gray-700',
+    gray800: 'color-gray-800',
+    gray900: 'color-gray-900',
+    gray1000: 'color-gray-1000',
+    gray1100: 'color-gray-1100',
     system100: 'color-system-100',
-    system150: 'color-system-150',
+    system200: 'color-system-200',
+    system300: 'color-system-300',
   },
 });
 
@@ -40,19 +40,19 @@ createGlobalTheme(':root', vars, {
     archiveMint: '#6af4b4',
     archivePink: '#ff8fb8',
     archivePurple: '#9570ff',
-    gray50: '#fafbfd',
-    gray100: '#f4f6f9',
-    gray150: '#edf0f4',
-    gray200: '#d4dbe5',
-    gray250: '#b5bfce',
-    gray300: '#9ea9ba',
-    gray350: '#838fa2',
-    gray400: '#697588',
-    gray450: '#4d5769',
-    gray500: '#303a4b',
-    gray550: '#1d2333',
-    system50: '#ffd7d7',
-    system100: '#ff8484',
-    system150: '#ff4747',
+    gray100: '#fafbfd',
+    gray200: '#f4f6f9',
+    gray300: '#edf0f4',
+    gray400: '#d4dbe5',
+    gray500: '#b5bfce',
+    gray600: '#9ea9ba',
+    gray700: '#838fa2',
+    gray800: '#697588',
+    gray900: '#4d5769',
+    gray1000: '#303a4b',
+    gray1100: '#1d2333',
+    system100: '#ffd7d7',
+    system200: '#ff8484',
+    system300: '#ff4747',
   },
 });