podo-ui 0.4.2 → 0.4.5

package/AI-GUIDE.md

@@ -0,0 +1,775 @@
+# Podo UI - AI Assistant Guide
+
+> **For AI Assistants Only**: This guide provides essential information for AI assistants working with the Podo UI library. This document is distributed with the NPM package.
+
+---
+
+## Package Overview
+
+**Podo UI** is a hybrid SCSS-first design system with minimal React components.
+
+- **Philosophy**: 97% CSS classes, 3% React components
+- **Distribution**: NPM package with SCSS files and compiled React components
+- **Main exports**: `/dist` (React), `/scss` (SCSS source), `/global.scss`, `/mixin.scss`
+
+---
+
+## Package Structure (NPM Distribution)
+
+```
+podo-ui/
+├── dist/                    # Compiled React components (TypeScript → JavaScript)
+│   ├── index.js            # Main entry point
+│   ├── index.d.ts          # TypeScript definitions
+│   └── react/
+│       ├── atom/           # Atomic components
+│       │   ├── input.js
+│       │   ├── textarea.js
+│       │   ├── editor.js
+│       │   └── editor-view.js
+│       └── molecule/       # Molecular components
+│           ├── field.js
+│           └── pagination.js
+├── scss/                    # SCSS source files (DO NOT MODIFY)
+│   ├── button/
+│   ├── color/
+│   ├── form/
+│   ├── icon/
+│   ├── layout/
+│   ├── molecule/
+│   └── typo/
+├── global.scss              # Global styles entry point
+├── mixin.scss               # SCSS functions and mixins
+├── vite-fonts.scss          # Vite-specific font paths
+└── README.md                # User documentation
+```
+
+---
+
+## Import Patterns
+
+### ✅ Correct Import Methods
+
+```typescript
+// Named imports (recommended)
+import { Input, Textarea, Editor, EditorView, Field, Pagination } from 'podo-ui';
+
+// Direct imports (legacy, still supported)
+import Input from 'podo-ui/react/atom/input';
+import Field from 'podo-ui/react/molecule/field';
+```
+
+### ❌ Incorrect Import Methods
+
+```typescript
+// DON'T: Import from dist directly
+import Input from 'podo-ui/dist/react/atom/input';
+
+// DON'T: Import from source files (not in NPM package)
+import Input from 'podo-ui/react/atom/input.tsx';
+```
+
+---
+
+## SCSS Usage
+
+### Global SCSS Import
+
+```typescript
+// main.tsx or App.tsx
+import 'podo-ui/global.scss';
+
+// If using Vite bundler
+import 'podo-ui/vite-fonts.scss';
+```
+
+### SCSS Module Usage
+
+```scss
+// component.module.scss
+@use 'podo-ui/mixin' as *;
+
+.myComponent {
+  // Design tokens (ALWAYS use these, not hardcoded values)
+  padding: s(5);                    // Spacing: s(0-13)
+  background: color(primary-base);   // Color: color(semantic-variant)
+  border-radius: r(4);               // Radius: r(1-full)
+
+  @include p1;                       // Typography: @include display1~7, p1~5
+}
+```
+
+### Available Design Tokens
+
+#### Spacing Function: `s(0-13)`
+```
+0: 0px     1: 2px     2: 4px     3: 8px     4: 12px
+5: 16px    6: 24px    7: 32px    8: 40px    9: 48px
+10: 64px   11: 80px   12: 96px   13: 160px
+```
+
+#### Color Function: `color(semantic-variant)`
+```
+Semantics: primary, default, default-deep, info, link, success, warning, danger
+Variants: base, hover, pressed, focus, fill, reverse, outline
+
+Examples:
+  color(primary-base)
+  color(danger-hover)
+  color(success-fill)
+```
+
+#### Radius Function: `r(value)`
+```
+Values: 1, 2, 3, 4, full
+```
+
+#### Typography Mixins
+```
+Display: @include display1; @include display2; ... @include display7;
+Paragraph: @include p1; @include p2; @include p3; @include p4; @include p5;
+Semibold variants: @include p1-semibold; @include p2-semibold; etc.
+```
+
+---
+
+## React Components API
+
+### Input Component
+
+```tsx
+import { Input } from 'podo-ui';
+import { z } from 'zod';
+
+const emailSchema = z.string().email();
+
+<Input
+  value={value}
+  onChange={setValue}
+  placeholder="Enter email"
+  validator={emailSchema}      // Optional: Zod validator
+  withIcon="mail"              // Optional: icon name
+  unit="원"                    // Optional: unit display
+/>
+```
+
+**Props:**
+- `value`: string
+- `onChange`: (value: string) => void
+- `placeholder`: string (optional)
+- `validator`: Zod schema (optional)
+- `withIcon`: string (optional) - icon name from icon system
+- `unit`: string (optional) - display unit (e.g., "원", "kg")
+- `disabled`: boolean (optional)
+
+### Textarea Component
+
+```tsx
+import { Textarea } from 'podo-ui';
+
+<Textarea
+  value={value}
+  onChange={setValue}
+  placeholder="Enter description"
+  validator={schema}           // Optional: Zod validator
+/>
+```
+
+**Props:** Similar to Input, without `withIcon` and `unit`
+
+### Editor Component (WYSIWYG)
+
+```tsx
+import { Editor } from 'podo-ui';
+
+<Editor
+  value={htmlContent}
+  onChange={setHtmlContent}
+  height="400px"               // Or "contents" for auto-height
+  placeholder="Enter content"
+  validator={schema}           // Optional: Zod validator
+/>
+```
+
+**Props:**
+- `value`: string (HTML content)
+- `onChange`: (html: string) => void
+- `height`: string | "contents" (optional, default: "400px")
+- `placeholder`: string (optional)
+- `validator`: Zod schema (optional)
+
+**Features:**
+- Rich text formatting (bold, italic, underline, strikethrough)
+- Headers (H1-H6), paragraphs, blockquotes
+- Text alignment, font, size, color
+- Image upload and editing
+- YouTube video embedding
+- Resizable
+
+### EditorView Component (Read-only)
+
+```tsx
+import { EditorView } from 'podo-ui';
+
+<EditorView value={htmlContent} />
+```
+
+**Props:**
+- `value`: string (HTML content from Editor)
+
+**Purpose:** Display HTML content generated by Editor component in read-only mode.
+
+### Field Component (Form Field Wrapper)
+
+```tsx
+import { Field, Input } from 'podo-ui';
+
+<Field
+  label="Email"
+  required
+  helper="Enter a valid email address"
+  validator={emailSchema}
+  value={email}
+>
+  <Input value={email} onChange={setEmail} />
+</Field>
+```
+
+**Props:**
+- `label`: string
+- `required`: boolean (optional) - shows asterisk
+- `helper`: string (optional) - helper text
+- `validator`: Zod schema (optional)
+- `value`: string (optional) - for validation display
+- `children`: ReactNode - input component
+
+### Pagination Component
+
+```tsx
+import { Pagination } from 'podo-ui';
+
+<Pagination
+  currentPage={currentPage}
+  totalPages={10}
+  onPageChange={setCurrentPage}
+/>
+```
+
+**Props:**
+- `currentPage`: number
+- `totalPages`: number
+- `onPageChange`: (page: number) => void
+
+---
+
+## CSS Classes (Utility Classes)
+
+### Button Classes
+
+```html
+<!-- Semantic variants -->
+<button class="primary">Primary</button>
+<button class="default">Default</button>
+<button class="info">Info</button>
+<button class="success">Success</button>
+<button class="warning">Warning</button>
+<button class="danger">Danger</button>
+<button class="link">Link</button>
+
+<!-- Sizes -->
+<button class="primary small">Small</button>
+<button class="primary large">Large</button>
+```
+
+### Form Elements
+
+```html
+<!-- Input -->
+<input type="text" placeholder="Text input" />
+
+<!-- Textarea -->
+<textarea placeholder="Textarea"></textarea>
+
+<!-- Select -->
+<select>
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
+
+<!-- Checkbox -->
+<label>
+  <input type="checkbox" />
+  Checkbox label
+</label>
+
+<!-- Radio -->
+<label>
+  <input type="radio" name="group" />
+  Radio label
+</label>
+
+<!-- Toggle -->
+<label>
+  <input type="checkbox" role="switch" />
+  Toggle switch
+</label>
+```
+
+### Grid System
+
+```html
+<!-- Auto-wrapping grid -->
+<div class="grid">
+  <div class="w-4">Column 1 (4/12)</div>
+  <div class="w-8">Column 2 (8/12)</div>
+</div>
+
+<!-- Fixed column grid -->
+<div class="grid-fix-3">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</div>
+
+<!-- Width utilities -->
+<div class="w-6">50% width (6/12)</div>
+<div class="w-200px">200px width</div>
+```
+
+**Grid columns:**
+- PC: 12 columns
+- Tablet: 6 columns
+- Mobile: 4 columns
+
+**Width classes:**
+- `.w-1` to `.w-12` (column-based)
+- `.w-1_4`, `.w-2_6`, etc. (fraction-based)
+- `.w-{n}px` (0-5000, pixel-based)
+
+### Spacing Utilities
+
+```html
+<!-- Padding -->
+<div class="p-5">Padding 16px all sides</div>
+<div class="p-t-3">Padding-top 8px</div>
+<div class="p-l-4 p-r-4">Padding left/right 12px</div>
+
+<!-- Margin -->
+<div class="m-6">Margin 24px all sides</div>
+<div class="m-b-7">Margin-bottom 32px</div>
+```
+
+**Pattern:** `{property}-{direction?}-{value}`
+- Property: `p` (padding), `m` (margin)
+- Direction: `t` (top), `b` (bottom), `l` (left), `r` (right), `x` (horizontal), `y` (vertical), or omit for all
+- Value: 0-13 (see spacing scale above)
+
+### Border Radius Utilities
+
+```html
+<div class="r-2">Small radius</div>
+<div class="r-4">Medium radius</div>
+<div class="r-full">Full rounded (pill shape)</div>
+```
+
+### Icon System
+
+```html
+<i class="icon-star"></i>
+<i class="icon-heart-fill"></i>
+<i class="icon-check"></i>
+<i class="icon-x"></i>
+```
+
+**Complete Icon List (117 icons):**
+
+```
+// Basic Actions
+icon-plus                    icon-minus                   icon-close
+icon-check                   icon-check-small             icon-cancel
+icon-edit                    icon-save                    icon-delete
+icon-trash                   icon-refresh
+
+// Arrows
+icon-arrow-up                icon-arrow-down              icon-arrow-left
+icon-arrow-right             icon-arrow-dropdown          icon-arrow-dropdown-up
+icon-arrow-dropdown-left     icon-arrow-dropdown-right
+
+// Expand/Collapse
+icon-expand-up               icon-expand-down             icon-expand-left
+icon-expand-right            icon-expand-up-double        icon-expand-down-double
+icon-expand-left-double      icon-expand-right-double
+
+// Navigation
+icon-home                    icon-menu                    icon-search
+icon-more                    icon-more-horizontal         icon-map
+icon-compass                 icon-gps
+
+// Communication
+icon-mail                    icon-email                   icon-phone
+icon-phone-stroke            icon-dm                      icon-share
+icon-notification            icon-notification-stroke
+
+// User & Social
+icon-user                    icon-user-stroke             icon-counselor
+icon-facebook                icon-naver                   icon-insta
+icon-tiktok                  icon-apple                   icon-google
+icon-youtube                 icon-kakao                   icon-x
+
+// Files & Documents
+icon-file                    icon-paper                   icon-clip
+icon-upload                  icon-download                icon-upload-cloud
+icon-import                  icon-export                  icon-excel
+icon-img                     icon-print
+
+// UI Elements
+icon-star                    icon-star-fill               icon-favorite
+icon-favorite-fill           icon-ellipse                 icon-ellipse-stroke
+icon-tag                     icon-flag                    icon-flag-finish
+icon-pin                     icon-link                    icon-link-alt
+icon-new-window              icon-calendar                icon-time
+icon-show                    icon-hidden                  icon-lock
+icon-unlock                  icon-drag                    icon-handle
+
+// Status & Feedback
+icon-check-circle-stroke     icon-check-circle-fill       icon-info
+icon-warning                 icon-danger                  icon-danger-fill
+icon-help                    icon-fordid
+
+// Business & Commerce
+icon-card                    icon-briefcase               icon-receipt
+icon-coin                    icon-currency                icon-car
+icon-chart                   icon-chart-bar               icon-pyramid-chart
+
+// Tools & Settings
+icon-setting                 icon-setting-stroke          icon-zoom-in
+icon-zoom-out                icon-hand                    icon-global
+
+// Technical/Specialized
+icon-layers                  icon-ruler                   icon-contour
+icon-temperature             icon-turbine                 icon-pressure
+icon-exchange-horizontally   icon-exchange-vertical
+```
+
+**Usage Pattern:**
+- Class name format: `icon-{name}`
+- All icons are from a custom icon font
+- Icons inherit font-size and color from parent element
+- Use filled variants (e.g., `icon-star-fill`) for solid icons
+- Use stroke variants (e.g., `icon-user-stroke`) for outline icons
+
+**Styling Icons:**
+
+```html
+<!-- Size control via font-size -->
+<i class="icon-star" style="font-size: 24px;"></i>
+
+<!-- Color control via color -->
+<i class="icon-heart-fill" style="color: red;"></i>
+
+<!-- Using with SCSS -->
+<style>
+.my-icon {
+  font-size: s(6); /* 24px */
+  color: color(primary-base);
+}
+</style>
+<i class="icon-check my-icon"></i>
+```
+
+---
+
+## Theme System
+
+### Dark Mode Toggle
+
+```html
+<!-- Light mode -->
+<html data-color-mode="light">
+
+<!-- Dark mode -->
+<html data-color-mode="dark">
+
+<!-- Auto (follows system preference) -->
+<html data-color-mode="">
+```
+
+### Color Tone (Optional)
+
+```html
+<!-- Default tone -->
+<html data-color-tone="">
+
+<!-- Warm tone -->
+<html data-color-tone="warm">
+```
+
+---
+
+## Common Mistakes to Avoid
+
+### ❌ Mistake 1: Hardcoded Values in SCSS
+
+```scss
+// BAD
+.component {
+  padding: 16px;
+  background: #007bff;
+  border-radius: 8px;
+}
+
+// GOOD
+@use 'podo-ui/mixin' as *;
+
+.component {
+  padding: s(5);
+  background: color(primary-base);
+  border-radius: r(4);
+}
+```
+
+### ❌ Mistake 2: Modifying Distributed Files
+
+```bash
+# BAD - Don't modify files in node_modules
+Edit: node_modules/podo-ui/dist/react/atom/input.js
+Edit: node_modules/podo-ui/scss/button/layout.scss
+
+# GOOD - Override with your own styles
+Create: src/styles/custom-button.module.scss
+```
+
+### ❌ Mistake 3: Incorrect Import Paths
+
+```typescript
+// BAD
+import { Input } from 'podo-ui/dist/index';
+import Input from 'podo-ui/react/atom/input.tsx';
+
+// GOOD
+import { Input } from 'podo-ui';
+```
+
+### ❌ Mistake 4: Missing SCSS Import
+
+```tsx
+// BAD - Using components without importing global styles
+import { Input } from 'podo-ui';
+
+function App() {
+  return <Input value="" onChange={() => {}} />;
+}
+
+// GOOD - Import global styles first
+import 'podo-ui/global.scss';
+import { Input } from 'podo-ui';
+
+function App() {
+  return <Input value="" onChange={() => {}} />;
+}
+```
+
+---
+
+## Vite-Specific Configuration
+
+When using **Vite** bundler, import the font path fix:
+
+```typescript
+// main.tsx (Vite projects only)
+import 'podo-ui/global.scss';
+import 'podo-ui/vite-fonts.scss'; // Required for Vite
+```
+
+**Why?** Vite has different font path resolution. This file corrects the paths for icon font and Pretendard font.
+
+**Not needed for:** Next.js, Create React App, or other bundlers.
+
+---
+
+## TypeScript Support
+
+All React components include TypeScript definitions:
+
+```typescript
+import { Input, Field, Editor } from 'podo-ui';
+import type { InputProps, FieldProps, EditorProps } from 'podo-ui';
+```
+
+Type definitions are located at:
+- `podo-ui/dist/index.d.ts`
+- `podo-ui/dist/react/atom/*.d.ts`
+- `podo-ui/dist/react/molecule/*.d.ts`
+
+---
+
+## Validation with Zod
+
+All input components support Zod schema validation:
+
+```typescript
+import { Input } from 'podo-ui';
+import { z } from 'zod';
+
+const schema = z.string()
+  .min(2, 'Minimum 2 characters')
+  .max(50, 'Maximum 50 characters')
+  .email('Invalid email format');
+
+<Input
+  value={email}
+  onChange={setEmail}
+  validator={schema}
+/>
+```
+
+**Visual feedback:**
+- ✅ Valid input: green border
+- ❌ Invalid input: red border
+- Error message displayed below input
+
+---
+
+## Framework Compatibility
+
+### React / Next.js
+
+```typescript
+import 'podo-ui/global.scss';
+import { Input, Editor, Field } from 'podo-ui';
+```
+
+### Vite + React
+
+```typescript
+import 'podo-ui/global.scss';
+import 'podo-ui/vite-fonts.scss'; // Important!
+import { Input, Editor, Field } from 'podo-ui';
+```
+
+### Vue / Angular / Vanilla JS
+
+Use CSS classes only. React components are React-specific and won't work in other frameworks.
+
+```html
+<!-- Works in any framework -->
+<button class="primary">Click me</button>
+<input type="text" placeholder="Email" />
+<div class="grid">
+  <div class="w-6">Column 1</div>
+  <div class="w-6">Column 2</div>
+</div>
+```
+
+---
+
+## Performance Considerations
+
+### Tree Shaking
+
+Named imports support tree shaking:
+
+```typescript
+// Only Input code is included in bundle
+import { Input } from 'podo-ui';
+```
+
+### CSS Size
+
+Global CSS is ~50KB minified. Consider:
+- Importing only needed SCSS modules if building custom bundle
+- Using PurgeCSS to remove unused classes in production
+
+---
+
+## Debugging Checklist
+
+### Styles not appearing?
+
+```
+□ Did you import 'podo-ui/global.scss'?
+□ For Vite: Did you import 'podo-ui/vite-fonts.scss'?
+□ Are you using correct class names?
+□ Check browser console for CSS loading errors
+```
+
+### React components not working?
+
+```
+□ Is React version ≥18?
+□ Did you import from 'podo-ui' correctly?
+□ For Editor: Is it a client component (Next.js)?
+□ Check browser console for JavaScript errors
+```
+
+### TypeScript errors?
+
+```
+□ Are type definitions installed (should be automatic)?
+□ Try restarting TypeScript server
+□ Check that you're importing from correct paths
+```
+
+---
+
+## Quick Reference
+
+### Essential Imports
+
+```typescript
+// Global styles (required)
+import 'podo-ui/global.scss';
+
+// Vite users only
+import 'podo-ui/vite-fonts.scss';
+
+// React components
+import { Input, Textarea, Editor, EditorView, Field, Pagination } from 'podo-ui';
+```
+
+### Essential Design Tokens
+
+```scss
+@use 'podo-ui/mixin' as *;
+
+.component {
+  padding: s(5);              // Spacing
+  color: color(primary-base); // Color
+  border-radius: r(4);        // Radius
+  @include p1;                // Typography
+}
+```
+
+### Essential CSS Classes
+
+```html
+<button class="primary">Button</button>
+<div class="grid">
+  <div class="w-6">50%</div>
+  <div class="w-6">50%</div>
+</div>
+<div class="p-5 m-t-4">Padding 16px, margin-top 12px</div>
+```
+
+---
+
+## Support
+
+- **Documentation**: https://podoui.com
+- **GitHub**: https://github.com/hada0127/podo-ui
+- **Issues**: https://github.com/hada0127/podo-ui/issues
+
+---
+
+## Summary
+
+**For AI Assistants:**
+1. **Always** use design tokens (s, color, r) in SCSS, never hardcoded values
+2. **Always** import 'podo-ui/global.scss' before using any components or classes
+3. **Vite users** must also import 'podo-ui/vite-fonts.scss'
+4. **Import components** using named imports from 'podo-ui'
+5. **Never modify** files in node_modules/podo-ui
+6. **Use CSS classes** for framework-agnostic styling
+7. **Use React components** only when validation or complex interaction is needed
+
+This library prioritizes CSS-first design with minimal JavaScript, ensuring maximum compatibility and performance.

package/README.md

@@ -0,0 +1,66 @@
+# Podo UI
+
+> Modern SCSS Module-based Design System
+
+English | [한국어](./README.ko.md)
+
+## Installation
+
+```bash
+npm install podo-ui
+```
+
+## Quick Start
+
+### Apply Global SCSS
+
+```typescript
+// main.tsx
+import 'podo-ui/global.scss';
+import 'podo-ui/vite-fonts.scss'; // When using Vite
+```
+
+### Use in SCSS Modules
+
+```scss
+// component.module.scss
+@use 'podo-ui/mixin' as *;
+
+.myComponent {
+  color: color(primary);
+  margin: s(4);
+  border-radius: r(2);
+}
+```
+
+### React Components
+
+```tsx
+// Import individual components using named imports
+import { Input, Textarea, Editor, EditorView, Field, Pagination } from 'podo-ui';
+
+// Or import components directly (legacy method)
+import Input from 'podo-ui/react/atom/input';
+import Field from 'podo-ui/react/molecule/field';
+```
+
+## Key Features
+
+- CSS class-based design system
+- Responsive grid system (PC 12, Tablet 6, Mobile 4)
+- Color system with dark mode support
+- React components (Input, Textarea, Editor, Field)
+
+## Documentation
+
+For detailed usage, please refer to the [official documentation](https://podoui.com).
+
+## Links
+
+- [Official Documentation](https://podoui.com)
+- [GitHub Repository](https://github.com/hada0127/podo-ui)
+- [Report Issues](https://github.com/hada0127/podo-ui/issues)
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.4.2",
+  "version": "0.4.5",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",
@@ -21,7 +21,8 @@
     "global.d.ts",
     "mixin.scss",
     "vite-fonts.scss",
-    "README.md"
+    "README.md",
+    "AI-GUIDE.md"
   ],
   "exports": {
     ".": {

package/scss/typo/font-family.scss

@@ -1,80 +1,62 @@
 @font-face {
   font-family: 'Pretendard';
   font-weight: 900;
-  src:
-    local('Pretendard Black'),
-    url(./font/Pretendard-Black.woff2) format('woff2');
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Pretendard';
   font-weight: 800;
-  src:
-    local('Pretendard ExtraBold'),
-    url(./font/Pretendard-ExtraBold.woff2) format('woff2');
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Pretendard';
   font-weight: 700;
-  src:
-    local('Pretendard Bold'),
-    url(./font/Pretendard-Bold.woff2) format('woff2');
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Pretendard';
   font-weight: 600;
-  src:
-    local('Pretendard SemiBold'),
-    url(./font/Pretendard-SemiBold.woff2) format('woff2');
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Pretendard';
   font-weight: 500;
-  src:
-    local('Pretendard Medium'),
-    url(./font/Pretendard-Medium.woff2) format('woff2');
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Pretendard';
   font-weight: 400;
-  src:
-    local('Pretendard Regular'),
-    url(./font/Pretendard-Regular.woff2) format('woff2');
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Pretendard';
   font-weight: 300;
-  src:
-    local('Pretendard Light'),
-    url(./font/Pretendard-Light.woff2) format('woff2');
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Pretendard';
   font-weight: 200;
-  src:
-    local('Pretendard ExtraLight'),
-    url(./font/Pretendard-ExtraLight.woff2) format('woff2');
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Pretendard';
   font-weight: 100;
-  src:
-    local('Pretendard Thin'),
-    url(./font/Pretendard-Thin.woff2) format('woff2');
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
   font-display: swap;
 }

package/readme.md

@@ -1,64 +0,0 @@
-# Podo UI
-
-> SCSS Module 기반 디자인 시스템
-
-## 설치
-
-```bash
-npm install podo-ui
-```
-
-## 빠른 시작
-
-### Global SCSS 적용
-
-```typescript
-// main.tsx
-import 'podo-ui/global.scss';
-import 'podo-ui/vite-fonts.scss'; // Vite 사용 시
-```
-
-### SCSS Module에서 사용
-
-```scss
-// component.module.scss
-@use 'podo-ui/mixin' as *;
-
-.myComponent {
-  color: color(primary);
-  margin: s(4);
-  border-radius: r(2);
-}
-```
-
-### React 컴포넌트
-
-```tsx
-// Named imports로 개별 컴포넌트 가져오기
-import { Input, Textarea, Editor, EditorView, Field, Pagination } from 'podo-ui';
-
-// 또는 개별 컴포넌트 직접 import (레거시 방식)
-import Input from 'podo-ui/react/atom/input';
-import Field from 'podo-ui/react/molecule/field';
-```
-
-## 주요 기능
-
-- CSS 클래스 기반 디자인 시스템
-- 반응형 그리드 시스템 (PC 12, Tablet 6, Mobile 4)
-- 색상 시스템 및 다크 모드 지원
-- React 컴포넌트 제공 (Input, Textarea, Editor, Field)
-
-## 문서
-
-상세한 사용법은 [공식 설명서](https://podoui.com)를 참고하세요.
-
-## 링크
-
-- [공식 설명서](https://podoui.com)
-- [GitHub 저장소](https://github.com/hada0127/podo-ui)
-- [이슈 제보](https://github.com/hada0127/podo-ui/issues)
-
-## 라이선스
-
-MIT