Merge MARA-11 into develop (#1)

* feat: Typograpy, Color tailwind layer, theme 세팅

* chore: 불필요한 파일 제거

src/pages/index.tsx

@@ -1,15 +1,17 @@
-import { Inter } from 'next/font/google'
+import { type NextPage } from "next";
 
-const inter = Inter({ subsets: ['latin'] })
-
-export default function Home(): JSX.Element {
+const Home: NextPage = () => {
   return (
     <main
-      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
+      className={`flex min-h-screen justify-center items-center p-24 `}
     >
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        mara web
+      <div className="heading1-bold text-primary2">
+        mara
       </div>
+      <p className="body2-semibold text-point1">
+        web
+      </p>
     </main>
   )
 }
+export default Home;

src/styles/globals.css

@@ -1,27 +1,82 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff')
+    format('woff');
 }
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+@layer base {
+  html,
+  body {
+    font-family: Pretendard;
   }
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+@layer components {
+  .heading1-bold {
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: bold;
+  }
+  .heading2-bold {
+    font-size: 20px;
+    line-height: 26px;
+    font-weight: bold;
+  }
+  .heading2-semibold {
+    font-size: 20px;
+    line-height: 26px;
+    font-weight: 600;
+  }
+  .heading3-bold {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: bold;
+  }
+  .heading3-semibold {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 600;
+  }
+  .heading4-bold {
+    font-size: 16px;
+    line-height: 22px;
+    font-weight: bold;
+  }
+  .heading4-semibold {
+    font-size: 16px;
+    line-height: 22px;
+    font-weight: 600;
+  }
+  .body1-semibold {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 600;
+  }
+  .body1-medium {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500;
+  }
+  .body1-regular {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+  }
+  .body2-semibold {
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 600;
+  }
+  .body2-medium {
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 500;
+  }
+  .body2-regular {
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 400;
+  }
 }

tailwind.config.ts

@@ -1,21 +1,34 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/stories/*.{js,ts,jsx,tsx,mdx}'
+    './src/stories/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
-      }
-    }
+      colors: {
+        primary1: '#52C5A6',
+        primary2: '#3CAA8D',
+        primary3: '#0C5E5A',
+        point1: '#FFE377',
+        point2: '#FF8436',
+        point3: '#CA3F13',
+        gray1: '#F1F2F4',
+        gray2: '#E0E1E6',
+        gray3: '#CCCFD7',
+        gray4: '#B5B9C5',
+        gray5: '#9299AA',
+        gray6: '#6E768C',
+        gray7: '#4E5464',
+        gray8: '#363A45',
+        white: '#FFFFFF',
+        black: '#000000',
+      },
+    },
   },
-  plugins: []
-}
-export default config
+  plugins: [],
+};
+export default config;