refactor : tailwind 커스텀 컬러 키퍼 테마로 통일

#844
KEEPER31337 · Dec 10, 2023 · 31e0686 · 31e0686
1 parent d1d5bf1
commit 31e0686
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 55 deletions.
diff --git a/src/constants/keeperTheme.ts b/src/constants/keeperTheme.ts
@@ -5,6 +5,7 @@ export const KEEPER_COLOR = {
   pointBlue: '#4CEEF9',
   subGray: '#575E69',
   subRed: '#EF4444',
+  subOrange: '#FFA500',
 };
 
 export const SIDEBAR_WIDTH = 240;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,64 +1,63 @@
 /** @type {import('tailwindcss').Config} */
+import { KEEPER_COLOR } from './src/constants/keeperTheme';
 
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    extend: {
-      colors: {
-        mainBlack: '#131316',
-        middleBlack: '#18181C',
-        subBlack: '#26262C',
-        pointBlue: '#4CEEF9',
-        subGray: '#575E69',
-        subRed: '#EF4444',
-        subOrange: '#FFA500',
-      },
-      fontFamily: {
-        base: 'IBM Plex Sans KR, system-ui, sans-serif',
-        orbitron: '"Orbitron", sans-serif',
-      },
-      fontSize: {
-        h1: '28px',
-        h3: '20px',
-        paragraph: '14px',
-        small: '10px',
-      },
-      spacing: {
-        header: '66px',
-        sidebar: '240px',
-      },
-      maxWidth: {
-        container: '1080px',
-      },
-      minWidth: {
-        sidebar: '240px',
-      },
-      backgroundImage: {
-        galaxy: "url('/public/img/background_galaxy.png')",
-      },
-      keyframes: {
-        typing: {
-          '0%': {
-            width: '0%',
-            visibility: 'hidden',
-          },
-          '100%': {
-            width: '100%',
-          },
+export const content = ['./src/**/*.{js,jsx,ts,tsx}'];
+export const theme = {
+  extend: {
+    colors: {
+      mainBlack: KEEPER_COLOR.mainBlack,
+      middleBlack: KEEPER_COLOR.middleBlack,
+      subBlack: KEEPER_COLOR.subBlack,
+      pointBlue: KEEPER_COLOR.pointBlue,
+      subGray: KEEPER_COLOR.subGray,
+      subRed: KEEPER_COLOR.subRed,
+      subOrange: KEEPER_COLOR.subOrange,
+    },
+    fontFamily: {
+      base: 'IBM Plex Sans KR, system-ui, sans-serif',
+      orbitron: '"Orbitron", sans-serif',
+    },
+    fontSize: {
+      h1: '28px',
+      h3: '20px',
+      paragraph: '14px',
+      small: '10px',
+    },
+    spacing: {
+      header: '66px',
+      sidebar: '240px',
+    },
+    maxWidth: {
+      container: '1080px',
+    },
+    minWidth: {
+      sidebar: '240px',
+    },
+    backgroundImage: {
+      galaxy: "url('/public/img/background_galaxy.png')",
+    },
+    keyframes: {
+      typing: {
+        '0%': {
+          width: '0%',
+          visibility: 'hidden',
         },
-        blink: {
-          '50%': {
-            borderColor: 'transparent',
-          },
-          '100%': {
-            borderColor: 'white',
-          },
+        '100%': {
+          width: '100%',
         },
       },
-      animation: {
-        typing: 'typing 2s steps(25), blink',
+      blink: {
+        '50%': {
+          borderColor: 'transparent',
+        },
+        '100%': {
+          borderColor: 'white',
+        },
       },
     },
+    animation: {
+      typing: 'typing 2s steps(25), blink',
+    },
   },
-  plugins: [],
 };
+export const plugins = [];