boottent-design v0.1.146
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
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago