feat: text & theme tailwind setting

services/one-app/src/app/(site)/login/_component/SocialLoginButton.tsx

@@ -21,9 +21,9 @@ export const SocialLoginButton: React.FC<SocialLoginButtonProps> = ({
 }) => (
   <button
     onClick={onLogin}
-    className={`flex items-center justify-center gap-2 w-full h-[50px] rounded-md text-black ${bgColor}`}
+    className={`flex items-center justify-center gap-2 w-full h-[50px] rounded-md ${bgColor}`}
   >
     <Icon />
-    <span className="text-base font-semibold">{`${social}로 계속하기`}</span>
+    <span className="text-16sb">{`${social}로 계속하기`}</span>
   </button>
 );

services/one-app/src/constants/colors.ts

@@ -0,0 +1,48 @@
+module.exports = {
+  primary: {
+    primary: '#00BAF6',
+    primary_pressed: '#009ED1',
+    primary_hover: '#80DDFB',
+  },
+  secondary: {
+    secondary: '#D0EEFF',
+    secondary_pressed: '#B8E5FF',
+    secondary_hover: '#E2F5FF',
+  },
+  subway: {
+    s1: '#2A3E91',
+    s2: '#60B157',
+    s3: '#FE8A39',
+    s4: '#509DD8',
+    s5: '#7F41D8',
+    s6: '#A95523',
+    s7: '#727719',
+    s8: '#D2386E',
+    s9: '#D1A946',
+    airport: '#82B5E0', // 공항
+    gyeongui: '#8CC2A7', // 경의중앙
+    gyeongchun: '#4FAC7F', // 경춘
+    suinBundang: '#E1AB3A', // 수인분당
+    sinBundang: '#BC2A38', // 신분당
+    gyeonggang: '#3C74EA', // 경강
+    seohae: '#98C255', // 서해
+    incheon1: '#7899CB', // 인천1
+    incheon2: '#E9AD54', // 인천2
+    everline: '#89C07A', // 에버라인
+    uijeongbu: '#C5C03E', // 의정부
+    wuisinseol: '#8CC2A7', // 우이신설
+    gimpoGold: '#907227', // 김포골드
+    sinlim: '#5367A0', // 신림
+  },
+  gray: {
+    10: '#F2F2F2',
+    20: '#E3E3E3',
+    30: '#CFCFCF',
+    40: '#ADADAD',
+    50: '#676767',
+    60: '#575757',
+    70: '#474747',
+    80: '#373737',
+  },
+  black: '#272727',
+};

services/one-app/src/styles/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

services/one-app/tailwind.config.ts

@@ -1,28 +1,106 @@
 import type { Config } from 'tailwindcss';
 
+const colors = require('./src/constants/colors');
+
 const config: Config = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './src/app/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
       fontFamily: {
         sans: ['var(--font-pretendard)'],
       },
-    },
-    screens: {
-      sm: { raw: '(max-width: 411px)' },
-      md: { raw: '(min-width: 412px) and (max-width: 531px)' },
-      lg: { raw: '(min-width: 532px)' },
-      xl: { raw: '(min-width: 600px)' },
-      pc: { raw: '(min-width: 990px)' },
+      colors: {
+        ...colors,
+      },
+      fontWeight: {
+        regular: '400',
+        medium: '500',
+        semiBold: '600',
+        bold: '700',
+      },
+      screens: {
+        sm: { raw: '(max-width: 411px)' },
+        md: { raw: '(min-width: 412px) and (max-width: 531px)' },
+        lg: { raw: '(min-width: 532px)' },
+        xl: { raw: '(min-width: 600px)' },
+        pc: { raw: '(min-width: 990px)' },
+      },
+      fontSize: ({ theme }) => ({
+        '20b': [
+          '20px',
+          {
+            lineHeight: '25px',
+            fontWeight: theme('fontWeight.bold'),
+          },
+        ],
+        '18b': [
+          '18px',
+          {
+            lineHeight: '23px',
+            fontWeight: theme('fontWeight.bold'),
+          },
+        ],
+        '16b': [
+          '16px',
+          {
+            lineHeight: '21px',
+            fontWeight: theme('fontWeight.bold'),
+          },
+        ],
+        '16sb': [
+          '16px',
+          {
+            lineHeight: '21px',
+            fontWeight: theme('fontWeight.semiBold'),
+          },
+        ],
+        '14b': [
+          '14px',
+          {
+            lineHeight: '19px',
+            fontWeight: theme('fontWeight.bold'),
+          },
+        ],
+        '14sb': [
+          '14px',
+          {
+            lineHeight: '19px',
+            fontWeight: theme('fontWeight.semiBold'),
+          },
+        ],
+        '14m': [
+          '14px',
+          {
+            lineHeight: '19px',
+            fontWeight: theme('fontWeight.medium'),
+          },
+        ],
+        '14r': [
+          '14px',
+          {
+            lineHeight: '19px',
+            fontWeight: theme('fontWeight.regular'),
+          },
+        ],
+        '12r': [
+          '12px',
+          {
+            lineHeight: '16px',
+            fontWeight: theme('fontWeight.regular'),
+          },
+        ],
+        '11r': [
+          '11px',
+          {
+            lineHeight: '13px',
+            fontWeight: theme('fontWeight.regular'),
+          },
+        ],
+      }),
     },
   },
   plugins: [],