0.1.146 • Published 4 months ago

boottent-design v0.1.146

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

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)
  • kody@boottent.com
0.1.139

4 months ago

0.1.136

4 months ago

0.1.135

4 months ago

0.1.138

4 months ago

0.1.137

4 months ago

0.1.132

4 months ago

0.1.131

4 months ago

0.1.134

4 months ago

0.1.133

4 months ago

0.1.146

4 months ago

0.1.143

4 months ago

0.1.142

4 months ago

0.1.145

4 months ago

0.1.144

4 months ago

0.1.141

4 months ago

0.1.140

4 months ago

0.1.129

4 months ago

0.1.130

4 months ago

0.1.125

5 months ago

0.1.124

5 months ago

0.1.127

5 months ago

0.1.126

5 months ago

0.1.121

5 months ago

0.1.120

5 months ago

0.1.123

5 months ago

0.1.122

5 months ago

0.1.118

5 months ago

0.1.117

5 months ago

0.1.119

5 months ago

0.1.116

5 months ago

0.1.115

5 months ago

0.1.114

6 months ago

0.1.113

6 months ago

0.1.112

6 months ago

0.1.110

6 months ago

0.1.111

6 months ago

0.1.98

6 months ago

0.1.99

6 months ago

0.1.107

6 months ago

0.1.106

6 months ago

0.1.109

6 months ago

0.1.108

6 months ago

0.1.103

6 months ago

0.1.102

6 months ago

0.1.105

6 months ago

0.1.104

6 months ago

0.1.101

6 months ago

0.1.100

6 months ago

0.1.96

6 months ago

0.1.97

6 months ago

0.1.90

6 months ago

0.1.91

6 months ago

0.1.92

6 months ago

0.1.93

6 months ago

0.1.94

6 months ago

0.1.95

6 months ago

0.1.85

7 months ago

0.1.86

7 months ago

0.1.87

7 months ago

0.1.88

7 months ago

0.1.89

7 months ago

0.1.82

7 months ago

0.1.83

7 months ago

0.1.84

7 months ago

0.1.80

7 months ago

0.1.81

7 months ago

0.1.74

7 months ago

0.1.75

7 months ago

0.1.76

7 months ago

0.1.77

7 months ago

0.1.78

7 months ago

0.1.79

7 months ago

0.1.70

8 months ago

0.1.71

8 months ago

0.1.72

8 months ago

0.1.73

8 months ago

0.1.69

8 months ago

0.1.55

8 months ago

0.1.56

8 months ago

0.1.57

8 months ago

0.1.58

8 months ago

0.1.59

8 months ago

0.1.63

8 months ago

0.1.64

8 months ago

0.1.65

8 months ago

0.1.66

8 months ago

0.1.67

8 months ago

0.1.68

8 months ago

0.1.60

8 months ago

0.1.61

8 months ago

0.1.62

8 months ago

0.1.52

8 months ago

0.1.53

8 months ago

0.1.54

8 months ago

0.1.50

8 months ago

0.1.51

8 months ago

0.1.49

8 months ago

0.1.41

8 months ago

0.1.42

8 months ago

0.1.43

8 months ago

0.1.44

8 months ago

0.1.45

8 months ago

0.1.46

8 months ago

0.1.47

8 months ago

0.1.48

8 months ago

0.1.40

8 months ago

0.1.39

8 months ago

0.1.38

8 months ago

0.1.37

8 months ago

0.1.10

8 months ago

0.1.11

8 months ago

0.1.12

8 months ago

0.1.13

8 months ago

0.1.14

8 months ago

0.1.15

8 months ago

0.1.8

8 months ago

0.1.7

8 months ago

0.1.9

8 months ago

0.1.30

8 months ago

0.1.31

8 months ago

0.1.32

8 months ago

0.1.33

8 months ago

0.1.34

8 months ago

0.1.35

8 months ago

0.1.36

8 months ago

0.1.27

8 months ago

0.1.28

8 months ago

0.1.29

8 months ago

0.1.20

8 months ago

0.1.21

8 months ago

0.1.22

8 months ago

0.1.23

8 months ago

0.1.24

8 months ago

0.1.25

8 months ago

0.1.26

8 months ago

0.1.16

8 months ago

0.1.17

8 months ago

0.1.18

8 months ago

0.1.19

8 months ago

0.1.6

8 months ago

0.1.5

9 months ago

0.1.4

9 months ago

1.0.19

9 months ago

1.0.18

9 months ago

1.0.17

9 months ago

1.0.16

9 months ago

1.0.22

9 months ago

1.0.21

9 months ago

1.0.20

9 months ago

1.0.24

9 months ago

1.0.23

9 months ago

0.1.0

9 months ago

0.1.2

9 months ago

0.1.1

9 months ago

0.1.3

9 months ago

1.0.15

9 months ago

1.0.14

9 months ago

1.0.11

9 months ago

1.0.13

9 months ago

1.0.12

9 months ago

1.0.10

9 months ago

1.0.9

9 months ago

1.0.8

9 months ago

1.0.7

9 months ago

1.0.6

9 months ago

1.0.5

9 months ago

1.0.4

9 months ago

1.0.3

9 months ago

1.0.2

9 months ago

0.0.0

9 months ago

1.0.1

9 months ago

1.0.0

9 months ago

0.0.30

1 year ago

0.0.29

1 year ago

0.0.28

1 year ago

0.0.27

1 year ago

0.0.26

1 year ago

0.0.25

1 year ago

0.0.24

1 year ago

0.0.23

1 year ago

0.0.22

1 year ago

0.0.21

1 year ago

0.0.20

1 year ago

0.0.16

1 year ago

0.0.15

1 year ago

0.0.14

1 year ago

0.0.13

1 year ago

0.0.12

1 year ago

0.0.11

1 year ago

0.0.10

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago