chore(ui): UI 컴포넌트 스타일 번들링을 추가합니다. (#81)

Setaday · Nov 30, 2024 · d11a536 · d11a536
1 parent 3475022
commit d11a536
Show file tree

Hide file tree

Showing 9 changed files with 307 additions and 2,288 deletions.
diff --git a/.changeset/mighty-waves-own.md b/.changeset/mighty-waves-own.md
@@ -0,0 +1,5 @@
+---
+"@setaday/ui": patch
+---
+
+extract css bundle for ui components
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -21,6 +21,9 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.9",
     "typescript": "^5"
   }
 }
diff --git a/apps/mobile/tailwind.config.ts b/apps/mobile/tailwind.config.ts
@@ -1,5 +1,5 @@
 import { color, font } from "@setaday/design-token";
-import { PluginAPI } from "tailwindcss/types/config";
+import type { PluginAPI } from "tailwindcss/types/config";
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -15,7 +15,7 @@ module.exports = {
     },
   },
   plugins: [
-    function ({ addUtilities }: PluginAPI) {
+    ({ addUtilities }: PluginAPI) => {
       const newFontUtilities = {
         ".font-head1_b_22": {
           fontSize: font.head1_b_22.fontSize,

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -11,7 +11,7 @@
   "scripts": {
     "test": "vitest",
     "clean": "rm -rf dist",
-    "build": "pnpm clean && tsup",
+    "build": "pnpm clean && tsup && postcss styles/globals.css -o dist/styles.css",
     "generate:component": "turbo gen react-component",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -37,7 +37,8 @@
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.20",
     "jsdom": "^25.0.0",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
     "storybook": "^8.2.9",
     "tailwindcss": "^3.4.9",
     "tsup": "^8.2.4",

diff --git a/packages/ui/src/Button/Button.styles.ts b/packages/ui/src/Button/Button.styles.ts
@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 
-export const buttonVariants = cva(`text-white rounded-[0.8rem]`, {
+export const buttonVariants = cva("text-white rounded-[0.8rem]", {
   variants: {
     color: {
       default: "bg-key",
@@ -15,8 +15,8 @@ export const buttonVariants = cva(`text-white rounded-[0.8rem]`, {
       mobile_donate: "w-[20.2rem] h-[3.9rem]",
     },
     font: {
-      default: "text-title1_sb_16",
-      mobile_donate: "text-body9_sb_14",
+      default: "font-title1_sb_16",
+      mobile_donate: "font-body9_sb_14",
     },
     disabled: {
       true: "cursor-not-allowed",

diff --git a/packages/ui/src/TextField/TextField.tsx b/packages/ui/src/TextField/TextField.tsx
@@ -1,6 +1,6 @@
-import { textFieldVariants } from "./TextField.styles";
 import { cn } from "@setaday/util";
-import { type InputHTMLAttributes } from "react";
+import type { InputHTMLAttributes } from "react";
+import { textFieldVariants } from "./TextField.styles";
 
 interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   isError?: boolean;
@@ -15,7 +15,7 @@ const TextField = ({ isError = false, value, maxLength, inputSize, ...inputProps
       <input
         {...inputProps}
         value={value}
-        className="bg-gray-1 text-gray-6 text-body7_m_16 w-full focus:outline-none"
+        className="bg-gray-1 text-gray-6 font-body7_m_16 w-full focus:outline-none"
       />
       <span className="text-gray-2 text-body6_m_12">
         {value.length}/{maxLength}

diff --git a/packages/ui/styles/globals.css b/packages/ui/styles/globals.css
@@ -7,7 +7,7 @@ html {
   box-sizing: border-box;
 }
 
-*, *:before, *:after: {
+*, *:before, *:after {
   box-sizing: inherit;
 }
 

diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
@@ -1,14 +1,131 @@
 /** @type {import('tailwindcss').Config} */
 
 const { color, font } = require("@setaday/design-token");
+import type { PluginAPI } from "tailwindcss/types/config";
 
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx}", "./.storybook/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       colors: color,
       fontSize: font,
+      fontFamily: {
+        pretendard: ["Pretendard", "sans-serif"],
+        "dm-sans": ["DM Sans", "sans-serif"],
+      },
     },
   },
-  plugins: [],
+  plugins: [
+    ({ addUtilities }: PluginAPI) => {
+      const newFontUtilities = {
+        ".font-head1_b_22": {
+          fontSize: font.head1_b_22.fontSize,
+          fontWeight: font.head1_b_22.fontWeight,
+          fontFamily: font.head1_b_22.fontFamily,
+          lineHeight: font.head1_b_22.lineHeight,
+          letterSpacing: font.head1_b_22.letterSpacing,
+        },
+        ".font-body1_b_18": {
+          fontSize: font.body1_b_18.fontSize,
+          fontWeight: font.body1_b_18.fontWeight,
+          fontFamily: font.body1_b_18.fontFamily,
+          lineHeight: font.body1_b_18.lineHeight,
+          letterSpacing: font.body1_b_18.letterSpacing,
+        },
+        ".font-body2_b_16": {
+          fontSize: font.body2_b_16.fontSize,
+          fontWeight: font.body2_b_16.fontWeight,
+          fontFamily: font.body2_b_16.fontFamily,
+          lineHeight: font.body2_b_16.lineHeight,
+          letterSpacing: font.body2_b_16.letterSpacing,
+        },
+        ".font-body3_m_16": {
+          fontSize: font.body3_m_16.fontSize,
+          fontWeight: font.body3_m_16.fontWeight,
+          fontFamily: font.body3_m_16.fontFamily,
+          lineHeight: font.body3_m_16.lineHeight,
+          letterSpacing: font.body3_m_16.letterSpacing,
+        },
+        ".font-body4_r_16": {
+          fontSize: font.body4_r_16.fontSize,
+          fontWeight: font.body4_r_16.fontWeight,
+          fontFamily: font.body4_r_16.fontFamily,
+          lineHeight: font.body4_r_16.lineHeight,
+          letterSpacing: font.body4_r_16.letterSpacing,
+        },
+        ".font-body5_m_14": {
+          fontSize: font.body5_m_14.fontSize,
+          fontWeight: font.body5_m_14.fontWeight,
+          fontFamily: font.body5_m_14.fontFamily,
+          lineHeight: font.body5_m_14.lineHeight,
+          letterSpacing: font.body5_m_14.letterSpacing,
+        },
+        ".font-body6_m_12": {
+          fontSize: font.body6_m_12.fontSize,
+          fontWeight: font.body6_m_12.fontWeight,
+          fontFamily: font.body6_m_12.fontFamily,
+          lineHeight: font.body6_m_12.lineHeight,
+          letterSpacing: font.body6_m_12.letterSpacing,
+        },
+        ".font-button2_sb_20": {
+          fontSize: font.button2_sb_20.fontSize,
+          fontWeight: font.button2_sb_20.fontWeight,
+          fontFamily: font.button2_sb_20.fontFamily,
+          lineHeight: font.button2_sb_20.lineHeight,
+          letterSpacing: font.button2_sb_20.letterSpacing,
+        },
+        ".font-head2_sb_18": {
+          fontSize: font.head2_sb_18.fontSize,
+          fontWeight: font.head2_sb_18.fontWeight,
+          fontFamily: font.head2_sb_18.fontFamily,
+          lineHeight: font.head2_sb_18.lineHeight,
+          letterSpacing: font.head2_sb_18.letterSpacing,
+        },
+        ".font-button1_sb_18": {
+          fontSize: font.button1_sb_18.fontSize,
+          fontWeight: font.button1_sb_18.fontWeight,
+          fontFamily: font.button1_sb_18.fontFamily,
+          lineHeight: font.button1_sb_18.lineHeight,
+          letterSpacing: font.button1_sb_18.letterSpacing,
+        },
+        ".font-title1_sb_16": {
+          fontSize: font.title1_sb_16.fontSize,
+          fontWeight: font.title1_sb_16.fontWeight,
+          fontFamily: font.title1_sb_16.fontFamily,
+          lineHeight: font.title1_sb_16.lineHeight,
+          letterSpacing: font.title1_sb_16.letterSpacing,
+        },
+        ".font-body7_m_16": {
+          fontSize: font.body7_m_16.fontSize,
+          fontWeight: font.body7_m_16.fontWeight,
+          fontFamily: font.body7_m_16.fontFamily,
+          lineHeight: font.body7_m_16.lineHeight,
+          letterSpacing: font.body7_m_16.letterSpacing,
+        },
+        ".font-caption1_m_12": {
+          fontSize: font.caption1_m_12.fontSize,
+          fontWeight: font.caption1_m_12.fontWeight,
+          fontFamily: font.caption1_m_12.fontFamily,
+          lineHeight: font.caption1_m_12.lineHeight,
+          letterSpacing: font.caption1_m_12.letterSpacing,
+        },
+        ".font-body8_m_14": {
+          fontSize: font.body8_m_14.fontSize,
+          fontWeight: font.body8_m_14.fontWeight,
+          fontFamily: font.body8_m_14.fontFamily,
+          lineHeight: font.body8_m_14.lineHeight,
+          letterSpacing: font.body8_m_14.letterSpacing,
+        },
+        ".font-body9_sb_14": {
+          fontSize: font.body9_sb_14.fontSize,
+          fontWeight: font.body9_sb_14.fontWeight,
+          fontFamily: font.body9_sb_14.fontFamily,
+          lineHeight: font.body9_sb_14.lineHeight,
+          letterSpacing: font.body9_sb_14.letterSpacing,
+        },
+      };
+
+      addUtilities(newFontUtilities);
+    },
+  ],
 };