boottent-design

목차

• 소개
• 특징
• 시작하기
  • 설치
  • 프로젝트 설정
• 제작 및 배포

소개

• 부트텐트의 디자인 시스템 라이브러리입니다.

시작하기

설치

yarn add boottent-design@latest

또는

npm install boottent-design@latest

프로젝트 설정

boottent-design을 프로젝트에 적용하기 위해 Vite와 TailwindCSS 설정이 필요합니다.

1. React + TypeScript 프로젝트 생성

yarn create vite my-react-app --template react-ts
cd my-react-app
yarn

2. TailwindCSS 설정

Tailwind CSS와 관련된 패키지를 설치합니다:

yarn add -D tailwindcss postcss autoprefixer

3. TailwindCSS 설정 파일 생성

npx tailwindcss init -p

4. TailwindCSS 설정 파일 편집

tailwind.config.js 파일에 다음 내용을 추가합니다:

/** @type {import('tailwindcss').Config} */

const colors = require("tailwindcss/colors");
const defaultTheme = require("tailwindcss/defaultTheme");

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/boottent-design/**/*.{js,ts,jsx,tsx}", // boottent-design 적용 경로 추가
  ],
  theme: {
    screens: {
      xs: "480px",
      xxs: "360px",
      ...defaultTheme.screens,
    },
    colors: {
      ...colors,
      grey: {
        50: "#FCFEFF",
        100: "#F5F8FA",
        200: "#DDE2E6",
        300: "#D0D3D5",
        400: "#A2A3A4",
        500: "#737474",
        600: "#525252",
        700: "#404040",
        800: "#26282A",
        900: "#181919",
        950: "#0A0A0B",
      },
      main: {
        50: "#F8F8FF",
        100: "#ECECFF",
        200: "#D5D4FA",
        300: "#BEB6F7",
        400: "#A08DF2",
        500: "#8261ED",
        600: "#7344E3",
        700: "#6434D1",
        800: "#532FB1",
        900: "#462690",
        950: "#2A1662",
      },
      red: {
        ...colors.red,
        50: "#FEEFEE",
        300: "#FF4A56",
        400: "#E91927",
        500: "#C4131F",
      },
      pink: {
        ...colors.pink,
        50: "#FFEAFD",
        500: "#D2216C",
      },
      yellow: {
        ...colors.yellow,
        100: "#FFFAE2",
        300: "#FFED97",
        400: "#FFE55C",
        kakao: "#FEE500",
      },
      orange: {
        ...colors.orange,
        50: "#FFF2DD",
        500: "#F16815",
      },
      brown: {
        50: "#FEF6E2",
        500: "#C9600B",
      },
      lime: {
        ...colors.lime,
        50: "#FAFFE2",
        500: "#639A05",
      },
      green: {
        ...colors.green,
        50: "#F4FFEA",
        500: "#349613",
        naver: "#03C75A",
      },
      teal: {
        ...colors.teal,
        50: "#E3FFFA",
        500: "#248E93",
      },
      blue: {
        ...colors.blue,
        50: "#F0F8FF",
        100: "#E4F6FF",
        400: "#3A8AF1",
        500: "#2D60D4",
        600: "#4145AC",
      },
    },
    extend: {
      colors: {
        border: "var(--border)",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "var(--background)",
        foreground: "var(--foreground)",
        primary: {
          DEFAULT: "var(--primary)",
          foreground: "var(--primary-foreground)",
        },
        secondary: {
          DEFAULT: "var(--secondary)",
          foreground: "var(--secondary-foreground)",
        },
        destructive: {
          DEFAULT: "var(--destructive)",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "var(--muted)",
          foreground: "var(--muted-foreground)",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [],
};

postcss.config.js 파일에 다음 내용을 추가합니다:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

5. Tailwind CSS 스타일 임포트

src/index.css 혹은 main.css 파일을 생성하고 Tailwind CSS 지시문을 추가합니다:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: #ffffff;
    --foreground: #26282a;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: #7344e3;
    --primary-foreground: #ffffff;
    --secondary: #26282a;
    --secondary-foreground: #ffffff;
    --muted: #a2a3a4;
    --muted-foreground: #ffffff;
    --muted-border: #dde2e6;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --destructive: #e91927;
    --destructive-foreground: 210 20% 98%;
    --border: #dde2e6;
    --input: 220 13% 91%;
    --ring: 224 71.4% 4.1%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 210 20% 98%;
    --primary-foreground: 220.9 39.3% 11%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 216 12.2% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

그리고 src/main.tsx 파일에 main.css 파일을 임포트합니다:

// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./main.css"; // Tailwind CSS 파일 임포트

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

제작 및 배포

• 김동성 (Boottent Frontend-Developer)
• [email protected]