@nextlevel_korea/design-system 1.1.2 → 1.1.3

package/README.md

@@ -25,6 +25,185 @@ function App() {
 }
 ```
 
+## ⚠️ 중요: 스타일 적용 방법
+
+이 라이브러리를 사용할 때 **반드시 스타일을 import**해야 합니다:
+
+### 방법 1: CSS 파일 직접 import (권장)
+
+```tsx
+import { Header } from '@nextlevel_korea/design-system';
+import '@nextlevel_korea/design-system/styles'; // 이 줄이 필수입니다!
+
+function App() {
+  return <Header logo="https://example.com/logo.png" />;
+}
+```
+
+### 방법 2: 전역 CSS 파일에서 import
+
+```css
+/* styles.css */
+@import '@nextlevel_korea/design-system/styles';
+```
+
+### 방법 3: Next.js에서 사용
+
+```tsx
+// pages/_app.tsx 또는 app/layout.tsx
+import '@nextlevel_korea/design-system/styles';
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+```
+
+### 방법 4: Vite에서 사용
+
+```tsx
+// main.tsx
+import '@nextlevel_korea/design-system/styles';
+import { Header } from '@nextlevel_korea/design-system';
+```
+
+## 🔧 문제 해결
+
+### 스타일이 적용되지 않는 경우
+
+#### 1. 스타일 import 확인
+
+가장 일반적인 문제는 스타일을 import하지 않는 것입니다:
+
+```tsx
+// ❌ 잘못된 사용법
+import { Header } from '@nextlevel_korea/design-system';
+// 스타일 import가 없음!
+
+// ✅ 올바른 사용법
+import { Header } from '@nextlevel_korea/design-system';
+import '@nextlevel_korea/design-system/styles'; // 필수!
+```
+
+#### 2. Tailwind CSS 충돌 해결
+
+프로젝트에 Tailwind CSS가 이미 설치되어 있는 경우:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@nextlevel_korea/design-system/dist/**/*.js', // 이 줄 추가
+  ],
+  // 라이브러리의 커스텀 색상을 추가
+  theme: {
+    extend: {
+      colors: {
+        success: '#22c55e',
+        warning: '#eab308',
+        danger: '#ef4444',
+        info: '#0ea5e9',
+        muted: '#6b7280',
+      },
+    },
+  },
+};
+```
+
+#### 3. CSS 우선순위 문제
+
+다른 CSS가 라이브러리 스타일을 덮어쓰는 경우:
+
+```css
+/* styles.css */
+/* 라이브러리 스타일을 먼저 import */
+@import '@nextlevel_korea/design-system/styles';
+
+/* 그 다음에 프로젝트 스타일 */
+@import './your-styles.css';
+```
+
+#### 4. 번들러 설정 확인
+
+**Vite에서 사용 시:**
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  optimizeDeps: {
+    include: ['@nextlevel_korea/design-system'],
+  },
+});
+```
+
+**Webpack에서 사용 시:**
+
+```js
+// webpack.config.js
+module.exports = {
+  resolve: {
+    alias: {
+      '@nextlevel_korea/design-system': require.resolve(
+        '@nextlevel_korea/design-system'
+      ),
+    },
+  },
+};
+```
+
+#### 5. TypeScript 설정 확인
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  }
+}
+```
+
+### 일반적인 오류와 해결책
+
+#### 오류: "Cannot resolve module '@nextlevel_korea/design-system/styles'"
+
+```bash
+# 패키지 재설치
+npm uninstall @nextlevel_korea/design-system
+npm install @nextlevel_korea/design-system
+```
+
+#### 오류: "Module not found"
+
+```bash
+# node_modules 삭제 후 재설치
+rm -rf node_modules package-lock.json
+npm install
+```
+
+#### 스타일이 일부만 적용되는 경우
+
+Tailwind CSS의 purge 설정을 확인하세요:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@nextlevel_korea/design-system/dist/**/*.js',
+  ],
+  // safelist 추가 (필요한 경우)
+  safelist: [
+    'text-success',
+    'text-warning',
+    'text-danger',
+    'text-info',
+    'text-muted',
+  ],
+};
+```
+
 ## 📖 Storybook 문서
 
 우리 디자인 시스템을 탐색하고 이해하는 가장 좋은 방법은 인터랙티브 Storybook 문서를 통하는 것입니다.
@@ -65,15 +244,29 @@ npm run storybook
 커스터마이징 가능한 로고가 있는 유연한 헤더 컴포넌트입니다.
 
 ```tsx
-import { Header } from '@nextlevel/design-system';
+import { Header } from '@nextlevel_korea/design-system';
+import '@nextlevel_korea/design-system/styles'; // 필수!
 
 // 기본 사용법
-<Header logo="https://example.com/logo.png" />;
+<Header logo="https://example.com/logo.png" title="My App" />
+
+// 로고만 있는 헤더
+<Header logo="https://example.com/logo.png" />
+
+// 제목만 있는 헤더
+<Header title="My Application" />
 ```
 
 **Props:**
 
-- `logo` (string) - 로고 이미지 URL
+- `logo` (string, optional) - 로고 이미지 URL
+- `title` (string, optional) - 헤더 제목
+
+**스타일 클래스:**
+
+- `flex items-center justify-between` - 기본 레이아웃
+- `h-8` - 로고 높이
+- `text-xl text-success font-bold` - 제목 스타일
 
 **Storybook 예제:**
 
@@ -214,3 +407,85 @@ MIT 라이선스 - 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세
 ---
 
 NextLevel 팀이 ❤️로 만들었습니다
+
+## 📝 완전한 사용 예제
+
+### React + Vite 프로젝트
+
+```tsx
+// src/App.tsx
+import { Header } from '@nextlevel_korea/design-system';
+import '@nextlevel_korea/design-system/styles';
+
+function App() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header
+        logo="https://via.placeholder.com/150x50/2563eb/ffffff?text=LOGO"
+        title="My Awesome App"
+      />
+      <main className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold text-gray-900">Welcome to My App</h1>
+      </main>
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Next.js 프로젝트
+
+```tsx
+// app/layout.tsx
+import '@nextlevel_korea/design-system/styles';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+```tsx
+// app/page.tsx
+import { Header } from '@nextlevel_korea/design-system';
+
+export default function Home() {
+  return (
+    <div>
+      <Header logo="/logo.png" title="Next.js App" />
+      <main>
+        <h1>Welcome to Next.js!</h1>
+      </main>
+    </div>
+  );
+}
+```
+
+### Create React App
+
+```tsx
+// src/App.js
+import { Header } from '@nextlevel_korea/design-system';
+import '@nextlevel_korea/design-system/styles';
+
+function App() {
+  return (
+    <div className="App">
+      <Header logo="https://example.com/logo.png" title="React App" />
+      <header className="App-header">
+        <p>Edit src/App.js and save to reload.</p>
+      </header>
+    </div>
+  );
+}
+
+export default App;
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextlevel_korea/design-system",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "type": "module",
   "description": "A modern React design system built with TypeScript and Tailwind CSS - The NextLevel Design System",
   "keywords": [