boottent-design 0.1.227 → 0.1.230

package/README.md

@@ -6,7 +6,9 @@
 - [특징](#특징)
 - [시작하기](#시작하기)
   - [설치](#설치)
-  - [프로젝트 설정](#프로젝트-설정)
+  - [빠른 사용법 (Tailwind 설정 불필요)](#빠른-사용법-tailwind-설정-불필요)
+  - [성능 권장 import](#성능-권장-import)
+  - [모듈 import 경로](#모듈-import-경로)
 - [제작 및 배포](#제작-및-배포)
 
 ## 소개
@@ -27,289 +29,67 @@ yarn add boottent-design@latest
 npm install boottent-design@latest
 ```
 
-### 프로젝트 설정
+### 빠른 사용법 (Tailwind 설정 불필요)
 
-boottent-design을 프로젝트에 적용하기 위해 Vite와 TailwindCSS 설정이 필요합니다.
+Tailwind를 직접 설치하거나 `tailwind.config`를 수정하지 않아도 됩니다.
+라이브러리에서 미리 빌드된 CSS를 함께 제공하므로, 아래 2단계만 하면 동작합니다.
 
-#### 1. React + TypeScript 프로젝트 생성
+1. 앱 엔트리에서 스타일 1회 임포트
 
-```sh
-yarn create vite my-react-app --template react-ts
-cd my-react-app
-yarn
-```
-
-#### 2. TailwindCSS 설정
-
-Tailwind CSS와 관련된 패키지를 설치합니다:
-
-```sh
-yarn add -D tailwindcss postcss autoprefixer
-```
-
-#### 3. TailwindCSS 설정 파일 생성
+```tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "boottent-design/styles.css";
 
-```sh
-npx tailwindcss init -p
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
 ```
 
-#### 4. TailwindCSS 설정 파일 편집
-
-tailwind.config.js 파일에 다음 내용을 추가합니다:
+2. 필요한 모듈 import 후 바로 사용
 
-```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 파일에 다음 내용을 추가합니다:
+```tsx
+import { Button } from "boottent-design/ui/button";
 
-```js
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
+export function Sample() {
+  return <Button>확인</Button>;
+}
 ```
 
-#### 5. Tailwind CSS 스타일 임포트
+### 성능 권장 import
 
-src/index.css 혹은 main.css 파일을 생성하고 Tailwind CSS 지시문을 추가합니다:
+소비자 앱 빌드 시간을 줄이려면 배럴 import보다 deep import를 권장합니다.
 
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+- 권장: `import { Button } from "boottent-design/ui/button"`
+- 비권장(대량 사용 시 빌드 시간 증가 가능): `import { Button } from "boottent-design/ui"`
 
-@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;
-  }
+`boottent-design/ui`는 기존 호환성을 위해 유지되지만, 성능 관점에서는 `ui/*` 경로 사용을 권장합니다.
 
-  .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%;
-  }
-}
+```tsx
+import { Button } from "boottent-design/ui";
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+export function Sample() {
+  return <Button>확인</Button>;
 }
 ```
 
-그리고 src/main.tsx 파일에 main.css 파일을 임포트합니다:
+### 모듈 import 경로
 
-```tsx
-// src/main.tsx
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./main.css"; // Tailwind CSS 파일 임포트
+- `boottent-design/ui`
+- `boottent-design/components`
+- `boottent-design/provider`
+- `boottent-design/hooks`
+- `boottent-design/tokens`
+- `boottent-design/utils`
+- `boottent-design/types`
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
-```
+### 참고
+
+- 기존처럼 소비자 프로젝트에서 Tailwind를 직접 운영해도 됩니다.
+- 다만 `boottent-design`을 사용하기 위해 Tailwind 설정이 필수는 아닙니다.
 
 ## 제작 및 배포
 

package/dist/common-BDxfDP0R.cjs

@@ -0,0 +1 @@
+"use strict";const a=require("clsx"),u=require("tailwind-merge"),f=(...e)=>u.twMerge(a(e));function l(e){const r=!e||e.includes("utm_source")?"":"utm_source=boottent&utm_medium=referral",n=e&&e.includes("?")?"&":"?";return`${e}${n}${r}`}const m=e=>{const t={};return e.split(";").forEach(r=>{const[n,s]=r.split(":").map(c=>c.trim());if(n&&s){const c=n.replace(/-([a-z])/g,(g,i)=>i.toUpperCase());t[c]=s}}),t},o=e=>{const t=e.trim().split(" ");return t.length===3&&t[1]==="00:00"?`${t[0]} ${t[2]}`:t.length===2?`${t[0]} ${t[1]??"00:00"}`:e};function p(e){e=o(e);const t=24*60*60*1e3,r=new Date;r.setHours(0,0,0,0);const n=new Date(e);n.setHours(0,0,0,0);const s=n.getTime()-r.getTime();return Math.round(s/t)}exports.addUTMtoUrl=l;exports.cn=f;exports.getDaysDifference=p;exports.parseDateString=o;exports.parseInlineStyle=m;

package/dist/common-BIhdwzSy.js

@@ -0,0 +1,36 @@
+import a from "clsx";
+import { twMerge as i } from "tailwind-merge";
+const l = (...e) => i(a(e));
+function g(e) {
+  const n = !e || e.includes("utm_source") ? "" : "utm_source=boottent&utm_medium=referral", r = e && e.includes("?") ? "&" : "?";
+  return `${e}${r}${n}`;
+}
+const D = (e) => {
+  const t = {};
+  return e.split(";").forEach((n) => {
+    const [r, s] = n.split(":").map((o) => o.trim());
+    if (r && s) {
+      const o = r.replace(/-([a-z])/g, (u, c) => c.toUpperCase());
+      t[o] = s;
+    }
+  }), t;
+}, m = (e) => {
+  const t = e.trim().split(" ");
+  return t.length === 3 && t[1] === "00:00" ? `${t[0]} ${t[2]}` : t.length === 2 ? `${t[0]} ${t[1] ?? "00:00"}` : e;
+};
+function $(e) {
+  e = m(e);
+  const t = 24 * 60 * 60 * 1e3, n = /* @__PURE__ */ new Date();
+  n.setHours(0, 0, 0, 0);
+  const r = new Date(e);
+  r.setHours(0, 0, 0, 0);
+  const s = r.getTime() - n.getTime();
+  return Math.round(s / t);
+}
+export {
+  g as a,
+  m as b,
+  l as c,
+  $ as g,
+  D as p
+};