podo-ui 0.1.31 → 0.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",
@@ -12,6 +12,14 @@
     "url": "https://github.com/hada0127/podo-ui/issues"
   },
   "homepage": "https://github.com/hada0127/podo-ui#readme",
+  "exports": {
+    ".": "./index.html",
+    "./global.scss": "./global.scss",
+    "./mixin.scss": "./mixin.scss",
+    "./system.scss": "./system.scss",
+    "./react": "./react.ts",
+    "./vite-plugin": "./vite-plugin.js"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",

package/readme.md

@@ -38,6 +38,28 @@ import 'podo-ui/global.scss';
 }
 ```
 
+### 3. Vite 프로젝트 설정 (필수)
+
+⚠️ **Vite를 사용하는 경우 플러그인 설치가 필요합니다!**
+
+Vite에서 아이콘 폰트가 올바르게 로드되도록 플러그인을 추가해야 합니다:
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { podoUiVitePlugin } from 'podo-ui/vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    podoUiVitePlugin() // podo-ui 플러그인 추가
+  ]
+});
+```
+
+**Next.js나 CRA 등 다른 번들러는 플러그인 없이 사용 가능합니다.**
+
 ---
 
 ## 컴포넌트

package/scss/icon/function.scss

@@ -1,5 +1,6 @@
+@use 'sass:map';
 @use './icon-name' as *;
 
 @function icon($key) {
-  @return '#{map-get($icon-name, $key)}';
+  @return '#{map.get($icon-name, $key)}';
 }

package/scss/layout/bg-elevation.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../color/function' as *;
 /*
   Shadow
@@ -12,7 +13,7 @@ $shadow: (
 );
 
 @function shadow($key) {
-  @return map-get($shadow, $key);
+  @return map.get($shadow, $key);
 }
 
 @each $key, $value in $shadow {

package/scss/layout/border.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 /*
   Border
 */
@@ -10,7 +12,7 @@ $border: (
 );
 
 @function border($key) {
-  @return map-get($border, $key);
+  @return map.get($border, $key);
 }
 
 @each $key, $value in $border {

package/scss/layout/radius.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 /*
   Radius
 */
@@ -13,7 +15,7 @@ $r: (
   full: 9999px,
 );
 @function r($key) {
-  @return map-get($r, $key);
+  @return map.get($r, $key);
 }
 
 @each $key, $value in $r {

package/scss/layout/spacing.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 /*
   Spacing
 */
@@ -19,7 +21,7 @@ $spacing: (
 );
 
 @function s($key) {
-  @return map-get($spacing, $key);
+  @return map.get($spacing, $key);
 }
 
 @each $key, $value in $spacing {

package/vite-plugin.d.ts

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,130 @@
+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() {
+  let config;
+
+  return {
+    name: 'vite-plugin-podo-ui',
+
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+
+    // 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;