podo-ui 0.1.38 → 0.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",
@@ -17,8 +17,7 @@
     "./global.scss": "./global.scss",
     "./mixin.scss": "./mixin.scss",
     "./system.scss": "./system.scss",
-    "./react": "./react.ts",
-    "./vite-plugin": "./vite-plugin.js"
+    "./react": "./react.ts"
   },
   "scripts": {
     "dev": "next dev",

package/readme.md

@@ -38,32 +38,28 @@ import 'podo-ui/global.scss';
 }
 ```
 
-### 3. Vite 프로젝트 설정 (필수)
+### 3. Vite 프로젝트 설정 (선택)
 
-⚠️ **Vite를 사용하는 경우 플러그인을 추가해야 합니다!**
-
-Vite에서 SCSS import 경로와 폰트 파일을 올바르게 처리하려면 플러그인이 필요합니다:
+⚠️ **Vite에서 `@use 'podo-ui/mixin'`이 작동하지 않는다면 아래 설정을 추가하세요:**
 
 ```javascript
 // vite.config.js
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { podoUiVitePlugin } from 'podo-ui/vite-plugin';
+import path from 'path';
 
 export default defineConfig({
-  plugins: [
-    react(),
-    podoUiVitePlugin() // podo-ui 플러그인 추가
-  ]
+  plugins: [react()],
+  resolve: {
+    alias: {
+      'podo-ui/mixin': path.resolve(__dirname, 'node_modules/podo-ui/mixin.scss'),
+      'podo-ui/system': path.resolve(__dirname, 'node_modules/podo-ui/system.scss'),
+    }
+  }
 });
 ```
 
-이 플러그인은 다음을 자동으로 처리합니다:
-- `@use 'podo-ui/mixin'` 같은 SCSS import 경로 해석
-- 아이콘 폰트 (icon.woff) 경로 처리
-- Pretendard 폰트 (woff2) 경로 처리
-
-**Next.js나 CRA 등 다른 번들러는 플러그인 없이 사용 가능합니다.**
+**대부분의 경우 추가 설정 없이 바로 사용 가능합니다.**
 
 ---
 

package/scss/icon/icon.scss

@@ -3,7 +3,7 @@
 
 @font-face {
   font-family: 'podo-ui-icon';
-  src: url('./font/icon.woff') format('woff');
+  src: url('~/podo-ui/scss/icon/font/icon.woff') format('woff');
   font-display: swap;
 }
 :root {

package/scss/typo/font-family.scss

@@ -3,7 +3,7 @@
   font-weight: 900;
   src:
     local('Pretendard Black'),
-    url(./font/Pretendard-Black.woff2) format('woff2');
+    url(~/podo-ui/scss/typo/font/Pretendard-Black.woff2) format('woff2');
   font-display: swap;
 }
 
@@ -12,7 +12,7 @@
   font-weight: 800;
   src:
     local('Pretendard ExtraBold'),
-    url(./font/Pretendard-ExtraBold.woff2) format('woff2');
+    url(~/podo-ui/scss/typo/font/Pretendard-ExtraBold.woff2) format('woff2');
   font-display: swap;
 }
 
@@ -21,7 +21,7 @@
   font-weight: 700;
   src:
     local('Pretendard Bold'),
-    url(./font/Pretendard-Bold.woff2) format('woff2');
+    url(~/podo-ui/scss/typo/font/Pretendard-Bold.woff2) format('woff2');
   font-display: swap;
 }
 
@@ -30,7 +30,7 @@
   font-weight: 600;
   src:
     local('Pretendard SemiBold'),
-    url(./font/Pretendard-SemiBold.woff2) format('woff2');
+    url(~/podo-ui/scss/typo/font/Pretendard-SemiBold.woff2) format('woff2');
   font-display: swap;
 }
 
@@ -39,7 +39,7 @@
   font-weight: 500;
   src:
     local('Pretendard Medium'),
-    url(./font/Pretendard-Medium.woff2) format('woff2');
+    url(~/podo-ui/scss/typo/font/Pretendard-Medium.woff2) format('woff2');
   font-display: swap;
 }
 
@@ -48,7 +48,7 @@
   font-weight: 400;
   src:
     local('Pretendard Regular'),
-    url(./font/Pretendard-Regular.woff2) format('woff2');
+    url(~/podo-ui/scss/typo/font/Pretendard-Regular.woff2) format('woff2');
   font-display: swap;
 }
 
@@ -57,7 +57,7 @@
   font-weight: 300;
   src:
     local('Pretendard Light'),
-    url(./font/Pretendard-Light.woff2) format('woff2');
+    url(~/podo-ui/scss/typo/font/Pretendard-Light.woff2) format('woff2');
   font-display: swap;
 }
 
@@ -66,7 +66,7 @@
   font-weight: 200;
   src:
     local('Pretendard ExtraLight'),
-    url(./font/Pretendard-ExtraLight.woff2) format('woff2');
+    url(~/podo-ui/scss/typo/font/Pretendard-ExtraLight.woff2) format('woff2');
   font-display: swap;
 }
 
@@ -75,6 +75,6 @@
   font-weight: 100;
   src:
     local('Pretendard Thin'),
-    url(./font/Pretendard-Thin.woff2) format('woff2');
+    url(~/podo-ui/scss/typo/font/Pretendard-Thin.woff2) format('woff2');
   font-display: swap;
 }

package/vite-plugin.d.ts

@@ -1,19 +0,0 @@
-import type { Plugin } from 'vite';
-
-/**
- * Vite plugin for podo-ui icon fonts
- * Resolves icon font path issues in Vite projects
- *
- * @example
- * ```js
- * // vite.config.js
- * import { podoUiVitePlugin } from 'podo-ui/vite-plugin';
- *
- * export default {
- *   plugins: [podoUiVitePlugin()]
- * }
- * ```
- */
-export function podoUiVitePlugin(): Plugin;
-
-export default podoUiVitePlugin;

package/vite-plugin.js

@@ -1,153 +0,0 @@
-import { readFileSync } from 'fs';
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-/**
- * Vite plugin for podo-ui icon fonts
- * Resolves icon font path issues in Vite projects
- */
-export function podoUiVitePlugin() {
-  return {
-    name: 'vite-plugin-podo-ui',
-
-    // Add configuration for SCSS imports and fonts
-    config(userConfig, { command }) {
-      return {
-        resolve: {
-          alias: {
-            'podo-ui/mixin': join(__dirname, 'mixin.scss'),
-            'podo-ui/system': join(__dirname, 'system.scss'),
-            'podo-ui/global.scss': join(__dirname, 'global.scss'),
-          }
-        }
-      };
-    },
-
-    // Resolve Sass @use statements
-    resolveId(source, importer, options) {
-      // Only intercept podo-ui imports
-      if (source === 'podo-ui/mixin' || source === 'podo-ui/mixin.scss') {
-        return join(__dirname, 'mixin.scss');
-      }
-      if (source === 'podo-ui/system' || source === 'podo-ui/system.scss') {
-        return join(__dirname, 'system.scss');
-      }
-      if (source === 'podo-ui/global.scss' || source === 'podo-ui/global') {
-        return join(__dirname, 'global.scss');
-      }
-      // Let Vite handle everything else
-      return null;
-    },
-
-    // Load hook to handle the font file
-    load(id) {
-      // Check if it's requesting the icon font
-      if (id.includes('podo-ui/scss/icon/font/icon.woff')) {
-        const fontPath = join(__dirname, 'scss/icon/font/icon.woff');
-        try {
-          const buffer = readFileSync(fontPath);
-          return buffer;
-        } catch (error) {
-          console.warn('[podo-ui] Failed to load icon font:', error.message);
-        }
-      }
-    },
-
-    // Transform hook to fix font URLs in SCSS/CSS
-    transform(code, id) {
-      // Only process SCSS/CSS files from podo-ui
-      if (!id.includes('podo-ui') || !id.match(/\.(scss|css)$/)) {
-        return null;
-      }
-
-      let transformedCode = code;
-      let hasChanges = false;
-
-      // Fix relative font paths in icon.scss
-      if (id.includes('icon/icon.scss')) {
-        const fontPath = join(__dirname, 'scss/icon/font/icon.woff');
-        transformedCode = transformedCode.replace(
-          /url\(['"]?\.\/font\/icon\.woff['"]?\)/g,
-          () => {
-            hasChanges = true;
-            return `url('${fontPath}')`;
-          }
-        );
-      }
-
-      // Fix relative font paths in font-family.scss (Pretendard fonts)
-      if (id.includes('typo/font-family.scss')) {
-        const fontFiles = [
-          'Pretendard-Black.woff2',
-          'Pretendard-ExtraBold.woff2',
-          'Pretendard-Bold.woff2',
-          'Pretendard-SemiBold.woff2',
-          'Pretendard-Medium.woff2',
-          'Pretendard-Regular.woff2',
-          'Pretendard-Light.woff2',
-          'Pretendard-ExtraLight.woff2',
-          'Pretendard-Thin.woff2'
-        ];
-
-        fontFiles.forEach(fontFile => {
-          const fontPath = join(__dirname, `scss/typo/font/${fontFile}`);
-          const regex = new RegExp(`url\\(['"]?\\.\/font\/${fontFile}['"]?\\)`, 'g');
-          transformedCode = transformedCode.replace(regex, () => {
-            hasChanges = true;
-            return `url('${fontPath}')`;
-          });
-        });
-      }
-
-      if (hasChanges) {
-        return {
-          code: transformedCode,
-          map: null
-        };
-      }
-
-      return null;
-    },
-
-    // Serve the font files in dev mode
-    configureServer(server) {
-      server.middlewares.use((req, res, next) => {
-        // Serve icon font
-        if (req.url?.includes('/podo-ui-icon.woff')) {
-          const fontPath = join(__dirname, 'scss/icon/font/icon.woff');
-          try {
-            const buffer = readFileSync(fontPath);
-            res.setHeader('Content-Type', 'font/woff');
-            res.setHeader('Cache-Control', 'public, max-age=31536000');
-            res.end(buffer);
-            return;
-          } catch (error) {
-            console.warn('[podo-ui] Failed to serve icon font:', error.message);
-          }
-        }
-
-        // Serve Pretendard fonts
-        if (req.url?.includes('/Pretendard-') && req.url?.includes('.woff2')) {
-          const fontFileName = req.url.split('/').pop();
-          const fontPath = join(__dirname, 'scss/typo/font', fontFileName);
-          try {
-            const buffer = readFileSync(fontPath);
-            res.setHeader('Content-Type', 'font/woff2');
-            res.setHeader('Cache-Control', 'public, max-age=31536000');
-            res.end(buffer);
-            return;
-          } catch (error) {
-            console.warn('[podo-ui] Failed to serve Pretendard font:', error.message);
-          }
-        }
-
-        next();
-      });
-    }
-  };
-}
-
-export default podoUiVitePlugin;