Merge pull request #30 from gw-lim/feat/design-system

✨ feat: 디자인 시스템 적용

app/globals.css

@@ -3,7 +3,71 @@
 @tailwind utilities;
 
 @layer base {
+  :root {
+    --white-black: 255 255 255;
+    --black-white: 0 0 0;
+    --white-white: 255 255 255;
+    --gray-50: 241 242 243;
+    --gray-100: 224 226 230;
+    --gray-200: 210 213 218;
+    --gray-300: 193 197 204;
+    --gray-400: 160 165 177;
+    --gray-500: 126 134 149;
+    --gray-600: 99 106 121;
+    --gray-700: 73 79 90;
+    --gray-800: 50 54 62;
+    --gray-900: 28 30 34;
+    --sub-pink: 255 80 170;
+    --sub-blue: 51 101 250;
+    --sub-purple: 160 85 255;
+    --sub-yellow: 255 160 18;
+    --sub-skyblue: 40 198 255;
+    --sub-scarlet: 255 103 55;
+    --main-purple: 130 101 248;
+    --red: 246 61 61;
+    --blue: 57 160 255;
+  }
+
+  :root[data-theme="dark"] {
+    --white-black: 255 255 255;
+    --black-white: 0 0 0;
+    --white-white: 255 255 255;
+    --gray-50: 241 242 243;
+    --gray-100: 224 226 230;
+    --gray-200: 210 213 218;
+    --gray-300: 193 197 204;
+    --gray-400: 160 165 177;
+    --gray-500: 126 134 149;
+    --gray-600: 99 106 121;
+    --gray-700: 73 79 90;
+    --gray-800: 50 54 62;
+    --gray-900: 28 30 34;
+    --sub-pink: 255 80 170;
+    --sub-blue: 51 101 250;
+    --sub-purple: 160 85 255;
+    --sub-yellow: 255 160 18;
+    --sub-skyblue: 40 198 255;
+    --sub-scarlet: 255 103 55;
+    --main-purple: 130 101 248;
+    --red: 246 61 61;
+    --blue: 57 160 255;
+  }
+
   :root {
     font-size: 62.5%;
   }
+
+  body {
+    @apply text-black-white;
+  }
+}
+
+@layer utilities {
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+
+  .absolute-center {
+    @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
+  }
 }

public/font/pretendard/font.css

@@ -1,71 +1,35 @@
 @font-face {
-  font-family: 'Pretendard';
-  font-weight: 900;
-  font-display: fallback;
-  src: local('Pretendard Black'),
-    url('./Pretendard-Black.subset.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 800;
-  font-display: fallback;
-  src: local('Pretendard ExtraBold'),
-    url('./Pretendard-ExtraBold.subset.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Pretendard';
+  font-family: "Pretendard";
   font-weight: 700;
   font-display: fallback;
-  src: local('Pretendard Bold'),
-    url('./Pretendard-Bold.subset.woff2') format('woff2');
+  src:
+    local("Pretendard Bold"),
+    url("./Pretendard-Bold.subset.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Pretendard';
+  font-family: "Pretendard";
   font-weight: 600;
   font-display: fallback;
-  src: local('Pretendard SemiBold'),
-    url('./Pretendard-SemiBold.subset.woff2') format('woff2');
+  src:
+    local("Pretendard SemiBold"),
+    url("./Pretendard-SemiBold.subset.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Pretendard';
+  font-family: "Pretendard";
   font-weight: 500;
   font-display: fallback;
-  src: local('Pretendard Medium'),
-    url('./Pretendard-Medium.subset.woff2') format('woff2');
+  src:
+    local("Pretendard Medium"),
+    url("./Pretendard-Medium.subset.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'Pretendard';
+  font-family: "Pretendard";
   font-weight: 400;
   font-display: fallback;
-  src: local('Pretendard Regular'),
-    url('./Pretendard-Regular.subset.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 300;
-  font-display: fallback;
-  src: local('Pretendard Light'),
-    url('./Pretendard-Light.subset.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 200;
-  font-display: fallback;
-  src: local('Pretendard ExtraLight'),
-    url('./Pretendard-ExtraLight.subset.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 100;
-  font-display: fallback;
-  src: local('Pretendard Thin'),
-    url('./Pretendard-Thin.subset.woff2') format('woff2');
+  src:
+    local("Pretendard Regular"),
+    url("./Pretendard-Regular.subset.woff2") format("woff2");
 }

tailwind.config.ts

@@ -25,34 +25,56 @@ const config: Config = {
       popup: "999",
       floating: "1000",
     },
+    colors: {
+      transparent: "transparent",
+      "white-black": "rgb(var(--white-black) / <alpha-value>)",
+      "black-white": "rgb(var(--black-white) / <alpha-value>)",
+      "white-white": "rgb(var(--white-white) / <alpha-value>)",
+      gray: {
+        50: "rgb(var(--gray-50) / <alpha-value>)",
+        100: "rgb(var(--gray-100) / <alpha-value>)",
+        200: "rgb(var(--gray-200) / <alpha-value>)",
+        300: "rgb(var(--gray-300) / <alpha-value>)",
+        400: "rgb(var(--gray-400) / <alpha-value>)",
+        500: "rgb(var(--gray-500) / <alpha-value>)",
+        600: "rgb(var(--gray-600) / <alpha-value>)",
+        700: "rgb(var(--gray-700) / <alpha-value>)",
+        800: "rgb(var(--gray-800) / <alpha-value>)",
+        900: "rgb(var(--gray-900) / <alpha-value>)",
+      },
+      sub: {
+        pink: { DEFAULT: "rgb(var(--sub-pink) / <alpha-value>)", bg: "rgb(var(--sub-pink) / 0.12)" },
+        blue: { DEFAULT: "rgb(var(--sub-blue) / <alpha-value>)", bg: "rgb(var(--sub-blue) / 0.12)" },
+        purple: { DEFAULT: "rgb(var(--sub-purple) / <alpha-value>)", bg: "rgb(var(--sub-purple) / 0.12)" },
+        yellow: { DEFAULT: "rgb(var(--sub-yellow) / <alpha-value>)", bg: "rgb(var(--sub-yellow) / 0.12)" },
+        skyblue: { DEFAULT: "rgb(var(--sub-skyblue) / <alpha-value>)", bg: "rgb(var(--sub-skyblue) / 0.12)" },
+        scarlet: { DEFAULT: "rgb(var(--sub-scarlet) / <alpha-value>)", bg: "rgb(var(--sub-scarlet) / 0.12)" },
+      },
+      main: {
+        purple: "rgb(var(--main-purple) / <alpha-value>)",
+      },
+      red: "rgb(var(--red) / <alpha-value>)",
+      blue: "rgb(var(--blue) / <alpha-value>)",
+    },
     fontFamily: {
       sans: ["Pretendard", "Arial"],
     },
     fontSize: {
       12: "1.2rem",
       14: "1.4rem",
       16: "1.6rem",
-      18: "1.8rem",
       20: "2.0rem",
-      24: "2.4rem",
-      32: "3.2rem",
-      64: "6.4rem",
     },
     fontWeight: {
-      100: "100",
-      200: "200",
-      300: "300",
       400: "400",
       500: "500",
       600: "600",
       700: "700",
-      800: "800",
-      900: "900",
     },
     borderRadius: {
-      sm: "0.5rem",
-      md: "1rem",
-      lg: "1.5rem",
+      sm: "1.2rem",
+      md: "1.6rem",
+      lg: "2rem",
       full: "9999px",
     },
     spacing: PX_ENTRIES,
@@ -68,7 +90,6 @@ const config: Config = {
       },
     },
   },
-
   plugins: [require("tailwind-scrollbar-hide")],
 };
 export default config;