style: Design System globals.css에 적용 및 Noto Sans 글꼴 root Layout에 적용

src/app/(auth)/[username]/page.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <main className="flex min-h-screen flex-col items-center justify-between p-24">마이 페이지</main>;
+}

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Noto_Sans_KR } from 'next/font/google';
 import '../styles/globals.css';
 import ReactQueryProviders from '@/utils/react-query-provider';
 
+// Noto sans 폰트 적용
 const notoSansKr = Noto_Sans_KR({
   preload: false,
   weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],

src/app/page.tsx

@@ -3,6 +3,7 @@ export default function Home() {
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       main
       <p>dev 브랜치 자동 배포 테스트용 텍스트입니다..!</p>
+      <p className="font-light">test</p>
     </main>
   );
 }

src/styles/globals.css

@@ -4,9 +4,16 @@
 
 @layer base {
   :root {
-    --primary: 85 52 218;
-    --primary-light: 241 239 253;
-    --red: 214 23 58;
+    --primary-900: #c80011;
+    --primary-800: #d8001e;
+    --primary-700: #e40026;
+    --primary-600: #f6002b;
+    --primary-500: #ff002b;
+    --primary-400: #ff2049;
+    --primary-300: #f35c6e;
+    --primary-200: #f98d97;
+    --primary-100: #ffc7d2;
+    --primary-50: #ffe9ee;
     --green: 122 197 85;
     --green-light: 231 247 219;
     --purple: 118 13 222;
@@ -16,24 +23,30 @@
     --blue: 118 165 234;
     --blue-light: 29 155 240;
     --blue-hover-light: 26 140 216;
-    --pink: 232 118 234;
-    --pink-light: 247 219 240;
     --black: #040404;
     --white: #fff;
-    --gray-1: 250 250 250;
-    --gray-2: 238 238 238;
-    --gray-3: 217 217 217;
-    --gray-4: 159 166 178;
-    --gray-5: 120 116 134;
-    --gray-6: 75 75 75;
-    --gray-7: 51 50 54;
-    --WHITE: 255 255 255;
+    --gray-50: #f5f5f5;
+    --gray-100: #eaeaea;
+    --gray-200: #dbdbdb;
+    --gray-300: #c6c6c6;
+    --gray-400: #a0a0a0;
+    --gray-500: #7e7e7e;
+    --gray-600: #585858;
+    --gray-700: #454545;
+    --gray-800: #282828;
   }
 
   :root[data-theme='dark'] {
-    --primary: 85 52 218;
-    --primary-light: 241 239 253;
-    --red: 214 23 58;
+    --primary-900: #c80011;
+    --primary-800: #d8001e;
+    --primary-700: #e40026;
+    --primary-600: #f6002b;
+    --primary-500: #ff002b;
+    --primary-400: #ff2049;
+    --primary-300: #f35c6e;
+    --primary-200: #f98d97;
+    --primary-100: #ffc7d2;
+    --primary-50: #ffe9ee;
     --green: 122 197 85;
     --green-light: 241 207 255;
     --purple: 118 13 222;
@@ -42,18 +55,17 @@
     --orange-light: 249 238 227;
     --blue: 118 165 234;
     --blue-light: 219 230 247;
-    --pink: 232 118 234;
-    --pink-light: 247 219 240;
-    --black: 255 255 255;
-    --white: 23 23 23;
-    --gray-1: 51 50 54;
-    --gray-2: 75 75 75;
-    --gray-3: 120 116 134;
-    --gray-4: 159 166 178;
-    --gray-5: 217 217 217;
-    --gray-6: 238 238 238;
-    --gray-7: 250 250 250;
-    --WHITE: 255 255 255;
+    --black: #fff;
+    --white: #040404;
+    --gray-50: #282828;
+    --gray-100: #454545;
+    --gray-200: #585858;
+    --gray-300: #7e7e7e;
+    --gray-400: #a0a0a0;
+    --gray-500: #c6c6c6;
+    --gray-600: #dbdbdb;
+    --gray-700: #eaeaea;
+    --gray-800: #f5f5f5;
   }
 
   * {

tailwind.config.ts

@@ -13,18 +13,6 @@ const PX_ENTRIES_10 = createPxEntries(10);
 const PX_ENTRIES_100 = createPxEntries(100);
 const PX_ENTRIES_1000 = createPxEntries(1000);
 
-/* type AccType = Record<string, string>;
-
-const range = (start: number, end: number): number[] => {
-  let array = [];
-  for (let i = start; i <= end; ++i) {
-    array.push(i);
-  }
-  return array;
-};
-
-const pxToRem = (px: number, base = 16) => `${px / base}rem`; */
-
 const config: Config = {
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
@@ -37,23 +25,31 @@ const config: Config = {
     // spacing values are inherited by the 'padding', 'margin', 'height', 'maxHeight', 'flex-basis', 'gap', 'inset', 'space', 'translate', 'scrollMargin', 'scrollPadding', and 'textIndent'.
     spacing: PX_ENTRIES_1000,
     fontWeight: {
-      light: '400',
-      normal: '500',
+      light: '300',
+      DEFAULT: '400',
+      medium: '500',
       bold: '700',
     },
     borderRadius: {
-      sm: '0.25rem',
-      md: '0.375rem',
-      lg: '0.5rem',
+      sm: '0.5rem', // 추후 수정 가능
+      md: '1.5rem', // 추후 수정 가능
+      lg: '2rem', // 추후 수정 가능
       full: '9999px',
     },
     colors: {
       transparent: 'transparent',
       primary: {
-        DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
-        light: 'rgb(var(--primary-light) / <alpha-value>)',
+        DEFAULT: 'var(--primary-400)',
+        1: 'var(--primary-50)',
+        2: 'var(--primary-100)',
+        3: 'var(--primary-200)',
+        4: 'var(--primary-300)',
+        5: 'var(--primary-500)',
+        6: 'var(--primary-600)',
+        7: 'var(--primary-700)',
+        8: 'var(--primary-800)',
+        9: 'var(--primary-900)',
       },
-      red: 'rgb(var(--red) / <alpha-value>)',
       green: {
         DEFAULT: 'rgb(var(--green) / <alpha-value>)',
         light: 'rgb(var(--green-light) / <alpha-value>)',
@@ -71,20 +67,18 @@ const config: Config = {
         light: 'rgb(var(--blue-light) / <alpha-value>)',
         hoverLight: 'rgb(var(--blue-hover-light) / <alpha-value>)',
       },
-      pink: {
-        DEFAULT: 'rgb(var(--pink) / <alpha-value>)',
-        light: 'rgb(var(--pink-light) / <alpha-value>)',
-      },
       black: 'var(--black)',
       white: 'var(--white)',
       gray: {
-        1: 'rgb(var(--gray-1) / <alpha-value>)',
-        2: 'rgb(var(--gray-2) / <alpha-value>)',
-        3: 'rgb(var(--gray-3) / <alpha-value>)',
-        4: 'rgb(var(--gray-4) / <alpha-value>)',
-        5: 'rgb(var(--gray-5) / <alpha-value>)',
-        6: 'rgb(var(--gray-6) / <alpha-value>)',
-        7: 'rgb(var(--gray-7) / <alpha-value>)',
+        1: 'var(--gray-50)',
+        2: 'var(--gray-100)',
+        3: 'var(--gray-200)',
+        4: 'var(--gray-300)',
+        5: 'var(--gray-400)',
+        6: 'var(--gray-500)',
+        7: 'var(--gray-600)',
+        8: 'var(--gray-700)',
+        9: 'var(--gray-800)',
       },
     },
     screens: {