Chore/#10 set config by theme

apps/service/.storybook/preview.ts

@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react";
-import "@/index.css";
+import "@/styles/index.css";
 
 const preview: Preview = {
   parameters: {

apps/service/src/App.tsx

@@ -1,6 +1,8 @@
 function App() {
   return (
-    <div className="bg-blue-to-purple text-heading-banner-title">hello</div>
+    <div className="bg-gradient-blue-purple text-heading-banner-title">
+      hello
+    </div>
   );
 }
 

apps/service/src/styles/colors.css

@@ -4,13 +4,17 @@
 @theme {
   --color-neutral-black: oklch(0 0 0);
   --color-neutral-white: oklch(1 0 0);
+  --color-neutral-50: oklch(0.96 0.006 236.45);
+  --color-neutral-100: oklch(0.93 0.0059 239.82);
+  --color-neutral-500: oklch(0.6 0.03 239);
+  --color-neutral-950: oklch(0.15 0.02 240);
   --color-primary-blue: oklch(0.47 0.2985 264.26);
+  --color-primary-purple: oklch(0.6 0.25 328);
+  --color-primary-violetblue: oklch(0.75 0.1 270);
+  --color-primary-babyblue: oklch(0.9 0.05 240);
+  --color-primary-bluegray: oklch(0.92 0.03 240);
+  --color-primary-cobaltblue: oklch(0.85 0.1 230);
+  --color-primary-berrypurple: oklch(0.5928 0.2446 265.26);
+  --color-background-lightblue: oklch(0.9358 0.0304 265.33);
   --color-lightblue: oklch(0.94 0.0304 265.33);
-
-  --color-blue-purple-from: oklch(0.47 0.2985 264.26);
-  --color-blue-purple-to: oklch(0.59 0.299256 307.9);
-}
-
-.bg-blue-to-purple {
-  @apply bg-gradient-to-r from-blue-purple-from to-blue-purple-to;
 }

apps/service/src/styles/index.css

@@ -1,6 +1,8 @@
 @import "tailwindcss";
-@import "./text-styles.css";
 @import "./colors.css";
+@import "./text-styles.css";
+@import "./spacing.css";
+@config "../../tailwind.config.js";
 
 /* https://tailwindcss.com/docs/functions-and-directives */
 /* https://v2.tailwindcss.com/docs/gradient-color-stops */

apps/service/src/styles/spacing.css

@@ -0,0 +1,29 @@
+@theme {
+  --spacing-0: 0px;
+  --spacing-100: 4px;
+  --spacing-200: 8px;
+  --spacing-300: 12px;
+  --spacing-400: 16px;
+  --spacing-500: 20px;
+  --spacing-600: 24px;
+  --spacing-700: 28px;
+  --spacing-800: 32px;
+  --spacing-900: 36px;
+  --spacing-1000: 40px;
+  --spacing-1100: 44px;
+  --spacing-1200: 48px;
+  --spacing-1300: 52px;
+  --spacing-1400: 56px;
+  --spacing-1500: 60px;
+  --spacing-1600: 64px;
+  --spacing-1700: 68px;
+  --spacing-1800: 72px;
+  --spacing-1900: 76px;
+  --spacing-2000: 80px;
+  --spacing-2500: 112px;
+  --spacing-2900: 140px;
+  --spacing-3000: 180px;
+  --spacing-4000: 200px;
+  --spacing-5000: 240px;
+  --spacing-6000: 360px;
+}

apps/service/src/styles/text-styles.css

@@ -1,124 +1,149 @@
-/* src/styles/text-style.css */
+@theme {
+  --text-heading-banner-title: 88px;
+  --text-heading-banner-title--line-height: 100px;
+  --text-heading-banner-title--font-weight: 700;
 
-.text-heading-banner-title {
-  @apply text-[88px] leading-[100px] font-bold;
-}
+  --text-heading-banner-title-2: 80px;
+  --text-heading-banner-title-2--line-height: 90px;
+  --text-heading-banner-title-2--font-weight: 700;
 
-.text-heading-banner-title-2 {
-  @apply text-[80px] leading-[90px] font-bold;
-}
+  --text-heading-banner-title-3: 72px;
+  --text-heading-banner-title-3--line-height: 80px;
+  --text-heading-banner-title-3--font-weight: 700;
 
-.text-heading-banner-title-3 {
-  @apply text-[72px] leading-[80px] font-bold;
-}
+  --text-heading-1-bold: 48px;
+  --text-heading-1-bold--line-height: 70px;
+  --text-heading-1-bold--font-weight: 700;
 
-.text-heading-1-bold {
-  @apply text-[48px] leading-[70px] font-bold;
-}
-.text-heading-1-semibold {
-  @apply text-[48px] leading-[70px] font-semibold;
-}
-.text-heading-1-medium {
-  @apply text-[48px] leading-[70px] font-medium;
-}
-.text-heading-1-regular {
-  @apply text-[48px] leading-[70px] font-normal;
-}
+  --text-heading-1-semibold: 48px;
+  --text-heading-1-semibold--line-height: 70px;
+  --text-heading-1-semibold--font-weight: 600;
 
-.text-heading-2-bold {
-  @apply text-[44px] leading-[70px] font-bold;
-}
-.text-heading-2-semibold {
-  @apply text-[44px] leading-[70px] font-semibold;
-}
-.text-heading-2-medium {
-  @apply text-[44px] leading-[70px] font-medium;
-}
-.text-heading-2-regular {
-  @apply text-[44px] leading-[70px] font-normal;
-}
+  --text-heading-1-medium: 48px;
+  --text-heading-1-medium--line-height: 70px;
+  --text-heading-1-medium--font-weight: 500;
 
-.text-heading-3-bold {
-  @apply text-[40px] leading-[70px] font-bold;
-}
-.text-heading-3-semibold {
-  @apply text-[40px] leading-[70px] font-semibold;
-}
-.text-heading-3-medium {
-  @apply text-[40px] leading-[70px] font-medium;
-}
-.text-heading-3-regular {
-  @apply text-[40px] leading-[70px] font-normal;
-}
+  --text-heading-1-regular: 48px;
+  --text-heading-1-regular--line-height: 70px;
+  --text-heading-1-regular--font-weight: 400;
 
-.text-body-1-bold {
-  @apply text-[36px] leading-[54px] font-bold;
-}
-.text-body-1-semibold {
-  @apply text-[36px] leading-[54px] font-semibold;
-}
-.text-body-1-medium {
-  @apply text-[36px] leading-[54px] font-medium;
-}
-.text-body-1-regular {
-  @apply text-[36px] leading-[54px] font-normal;
-}
+  --text-heading-2-bold: 44px;
+  --text-heading-2-bold--line-height: 70px;
+  --text-heading-2-bold--font-weight: 700;
 
-.text-body-2-bold {
-  @apply text-[32px] leading-[54px] font-bold;
-}
-.text-body-2-semibold {
-  @apply text-[32px] leading-[54px] font-semibold;
-}
-.text-body-2-medium {
-  @apply text-[32px] leading-[54px] font-medium;
-}
-.text-body-2-regular {
-  @apply text-[32px] leading-[54px] font-normal;
-}
+  --text-heading-2-semibold: 44px;
+  --text-heading-2-semibold--line-height: 70px;
+  --text-heading-2-semibold--font-weight: 600;
 
-.text-body-3-bold {
-  @apply text-[28px] leading-[54px] font-bold;
-}
-.text-body-3-semibold {
-  @apply text-[28px] leading-[54px] font-semibold;
-}
-.text-body-3-medium {
-  @apply text-[28px] leading-[54px] font-medium;
-}
-.text-body-3-regular {
-  @apply text-[28px] leading-[54px] font-normal;
-}
+  --text-heading-2-medium: 44px;
+  --text-heading-2-medium--line-height: 70px;
+  --text-heading-2-medium--font-weight: 500;
 
-.text-detail-1-bold {
-  @apply text-[24px] leading-[36px] font-bold;
-}
-.text-detail-1-semibold {
-  @apply text-[24px] leading-[36px] font-semibold;
-}
-.text-detail-1-medium {
-  @apply text-[24px] leading-[36px] font-medium;
-}
-.text-detail-1-regular {
-  @apply text-[24px] leading-[36px] font-normal;
-}
+  --text-heading-2-regular: 44px;
+  --text-heading-2-regular--line-height: 70px;
+  --text-heading-2-regular--font-weight: 400;
 
-.text-detail-2-bold {
-  @apply text-[20px] leading-[32px] font-bold;
-}
-.text-detail-2-semibold {
-  @apply text-[20px] leading-[32px] font-semibold;
-}
-.text-detail-2-medium {
-  @apply text-[20px] leading-[32px] font-medium;
-}
-.text-detail-2-regular {
-  @apply text-[20px] leading-[32px] font-normal;
-}
+  --text-heading-3-bold: 40px;
+  --text-heading-3-bold--line-height: 70px;
+  --text-heading-3-bold--font-weight: 700;
 
-.text-detail-3-semibold {
-  @apply text-[16px] leading-[20px] font-semibold;
-}
-.text-detail-3-regular {
-  @apply text-[16px] leading-[20px] font-normal;
+  --text-heading-3-semibold: 40px;
+  --text-heading-3-semibold--line-height: 70px;
+  --text-heading-3-semibold--font-weight: 600;
+
+  --text-heading-3-medium: 40px;
+  --text-heading-3-medium--line-height: 70px;
+  --text-heading-3-medium--font-weight: 500;
+
+  --text-heading-3-regular: 40px;
+  --text-heading-3-regular--line-height: 70px;
+  --text-heading-3-regular--font-weight: 400;
+
+  --text-body-1-bold: 36px;
+  --text-body-1-bold--line-height: 54px;
+  --text-body-1-bold--font-weight: 700;
+
+  --text-body-1-semibold: 36px;
+  --text-body-1-semibold--line-height: 54px;
+  --text-body-1-semibold--font-weight: 600;
+
+  --text-body-1-medium: 36px;
+  --text-body-1-medium--line-height: 54px;
+  --text-body-1-medium--font-weight: 500;
+
+  --text-body-1-regular: 36px;
+  --text-body-1-regular--line-height: 54px;
+  --text-body-1-regular--font-weight: 400;
+
+  --text-body-2-bold: 32px;
+  --text-body-2-bold--line-height: 54px;
+  --text-body-2-bold--font-weight: 700;
+
+  --text-body-2-semibold: 32px;
+  --text-body-2-semibold--line-height: 54px;
+  --text-body-2-semibold--font-weight: 600;
+
+  --text-body-2-medium: 32px;
+  --text-body-2-medium--line-height: 54px;
+  --text-body-2-medium--font-weight: 500;
+
+  --text-body-2-regular: 32px;
+  --text-body-2-regular--line-height: 54px;
+  --text-body-2-regular--font-weight: 400;
+
+  --text-body-3-bold: 28px;
+  --text-body-3-bold--line-height: 54px;
+  --text-body-3-bold--font-weight: 700;
+
+  --text-body-3-semibold: 28px;
+  --text-body-3-semibold--line-height: 54px;
+  --text-body-3-semibold--font-weight: 600;
+
+  --text-body-3-medium: 28px;
+  --text-body-3-medium--line-height: 54px;
+  --text-body-3-medium--font-weight: 500;
+
+  --text-body-3-regular: 28px;
+  --text-body-3-regular--line-height: 54px;
+  --text-body-3-regular--font-weight: 400;
+
+  --text-detail-1-bold: 24px;
+  --text-detail-1-bold--line-height: 36px;
+  --text-detail-1-bold--font-weight: 700;
+
+  --text-detail-1-semibold: 24px;
+  --text-detail-1-semibold--line-height: 36px;
+  --text-detail-1-semibold--font-weight: 600;
+
+  --text-detail-1-medium: 24px;
+  --text-detail-1-medium--line-height: 36px;
+  --text-detail-1-medium--font-weight: 500;
+
+  --text-detail-1-regular: 24px;
+  --text-detail-1-regular--line-height: 36px;
+  --text-detail-1-regular--font-weight: 400;
+
+  --text-detail-2-bold: 20px;
+  --text-detail-2-bold--line-height: 32px;
+  --text-detail-2-bold--font-weight: 700;
+
+  --text-detail-2-semibold: 20px;
+  --text-detail-2-semibold--line-height: 32px;
+  --text-detail-2-semibold--font-weight: 600;
+
+  --text-detail-2-medium: 20px;
+  --text-detail-2-medium--line-height: 32px;
+  --text-detail-2-medium--font-weight: 500;
+
+  --text-detail-2-regular: 20px;
+  --text-detail-2-regular--line-height: 32px;
+  --text-detail-2-regular--font-weight: 400;
+
+  --text-detail-3-semibold: 16px;
+  --text-detail-3-semibold--line-height: 20px;
+  --text-detail-3-semibold--font-weight: 600;
+
+  --text-detail-3-regular: 16px;
+  --text-detail-3-regular--line-height: 20px;
+  --text-detail-3-regular--font-weight: 400;
 }

apps/service/tailwind.config.js

@@ -0,0 +1,34 @@
+/** @type {import('tailwindcss').Config} */
+
+(
+  module.exports = {
+    content: ["./src/**/*.{js,ts,jsx,tsx}"],
+    theme: {
+      extend: {
+        backgroundImage: {
+          //그림 배경 정의
+          "new-car-intro": "url('@/assets/images/newCarIntroBg.webp')",
+          "join-event-main": "url('@/assets/images/joinEventMainBg.webp')",
+          "miniquiz-paper": "url('@/assets/images/miniQuizBg.webp')",
+          // 그라데이션 색상 정의
+          "gradient-blue-purple":
+            "linear-gradient(90deg, #0128FF 0%, #AD00FF 100%)",
+          "gradient-cobaltblue-white":
+            "linear-gradient(90deg, #C5F0FF 0%, #FFF 100%)",
+          "gradient-violetblue-cobaltblue":
+            "linear-gradient(90deg, #8285F6 0%, #C5F0FF 100%)",
+          "gradient-lightblue-white":
+            "linear-gradient(90deg, #E0EAFF 0%, #FFF 100%)",
+          "gradient-cobaltblue-white-opposite":
+            "linear-gradient(270deg, #C5F0FF 0%, #FFF 100%)",
+          "gradient-lightblue-white-vertical":
+            "linear-gradient(180deg, #E0EAFF 0%, #FFF 100%)",
+          "gradient-cobaltblue-white-vertical":
+            "linear-gradient(180deg, #C5F0FF 0%, #FFF 100%)",
+          carCard: "linear-gradient(180deg, #C5F0FF 0%, #FFF 99.95%)",
+          toolBoxCard: "linear-gradient(180deg, #E0EAFF 0%, #FFF 99.95%)",
+        },
+      },
+    },
+  }
+);