@hua-labs/i18n-core 1.0.0 → 2.0.0

package/dist/core/debug-tools.js

@@ -31,17 +31,17 @@ export function createDebugTools() {
                 const key = element.getAttribute('data-i18n-key');
                 if (key) {
                     const tooltip = document.createElement('div');
-                    tooltip.style.cssText = `
-            position: absolute;
-            background: #333;
-            color: white;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10000;
-            pointer-events: none;
-            opacity: 0;
-            transition: opacity 0.2s;
+                    tooltip.style.cssText = `
+            position: absolute;
+            background: #333;
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            z-index: 10000;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.2s;
           `;
                     tooltip.textContent = `Key: ${key}`;
                     element.addEventListener('mouseenter', () => {
@@ -129,64 +129,64 @@ export function createDebugTools() {
 function createDevToolsPanel() {
     const panel = document.createElement('div');
     panel.id = 'hua-i18n-devtools';
-    panel.style.cssText = `
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    width: 300px;
-    max-height: 500px;
-    background: #1e1e1e;
-    color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
-    z-index: 10000;
-    font-family: 'Monaco', 'Menlo', monospace;
-    font-size: 12px;
-    overflow: hidden;
+    panel.style.cssText = `
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    width: 300px;
+    max-height: 500px;
+    background: #1e1e1e;
+    color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+    z-index: 10000;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 12px;
+    overflow: hidden;
   `;
     const header = document.createElement('div');
-    header.style.cssText = `
-    background: #2d2d2d;
-    padding: 12px;
-    border-bottom: 1px solid #444;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    header.style.cssText = `
+    background: #2d2d2d;
+    padding: 12px;
+    border-bottom: 1px solid #444;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   `;
-    header.innerHTML = `
-    <span style="font-weight: bold;">HUA i18n Debug</span>
-    <button id="close-devtools" style="background: none; border: none; color: #fff; cursor: pointer; font-size: 16px;">×</button>
+    header.innerHTML = `
+    <span style="font-weight: bold;">HUA i18n Debug</span>
+    <button id="close-devtools" style="background: none; border: none; color: #fff; cursor: pointer; font-size: 16px;">×</button>
   `;
     const content = document.createElement('div');
-    content.style.cssText = `
-    padding: 12px;
-    max-height: 400px;
-    overflow-y: auto;
+    content.style.cssText = `
+    padding: 12px;
+    max-height: 400px;
+    overflow-y: auto;
   `;
     // 성능 메트릭
     const metricsSection = document.createElement('div');
-    metricsSection.innerHTML = `
-    <h4 style="margin: 0 0 8px 0; color: #4fc3f7;">Performance</h4>
-    <div>Translations: <span id="translation-count">0</span></div>
-    <div>Cache Hits: <span id="cache-hits">0</span></div>
-    <div>Cache Misses: <span id="cache-misses">0</span></div>
-    <div>Hit Rate: <span id="hit-rate">0%</span></div>
+    metricsSection.innerHTML = `
+    <h4 style="margin: 0 0 8px 0; color: #4fc3f7;">Performance</h4>
+    <div>Translations: <span id="translation-count">0</span></div>
+    <div>Cache Hits: <span id="cache-hits">0</span></div>
+    <div>Cache Misses: <span id="cache-misses">0</span></div>
+    <div>Hit Rate: <span id="hit-rate">0%</span></div>
   `;
     // 현재 언어 정보
     const languageSection = document.createElement('div');
     languageSection.style.marginTop = '16px';
-    languageSection.innerHTML = `
-    <h4 style="margin: 0 0 8px 0; color: #4fc3f7;">Current Language</h4>
-    <div>Language: <span id="current-language">ko</span></div>
-    <div>Fallback: <span id="fallback-language">en</span></div>
+    languageSection.innerHTML = `
+    <h4 style="margin: 0 0 8px 0; color: #4fc3f7;">Current Language</h4>
+    <div>Language: <span id="current-language">ko</span></div>
+    <div>Fallback: <span id="fallback-language">en</span></div>
   `;
     // 액션 버튼들
     const actionsSection = document.createElement('div');
     actionsSection.style.marginTop = '16px';
-    actionsSection.innerHTML = `
-    <h4 style="margin: 0 0 8px 0; color: #4fc3f7;">Actions</h4>
-    <button id="highlight-missing" style="background: #4fc3f7; border: none; color: #000; padding: 4px 8px; border-radius: 4px; cursor: pointer; margin-right: 8px;">Highlight Missing</button>
-    <button id="show-keys" style="background: #4fc3f7; border: none; color: #000; padding: 4px 8px; border-radius: 4px; cursor: pointer;">Show Keys</button>
+    actionsSection.innerHTML = `
+    <h4 style="margin: 0 0 8px 0; color: #4fc3f7;">Actions</h4>
+    <button id="highlight-missing" style="background: #4fc3f7; border: none; color: #000; padding: 4px 8px; border-radius: 4px; cursor: pointer; margin-right: 8px;">Highlight Missing</button>
+    <button id="show-keys" style="background: #4fc3f7; border: none; color: #000; padding: 4px 8px; border-radius: 4px; cursor: pointer;">Show Keys</button>
   `;
     content.appendChild(metricsSection);
     content.appendChild(languageSection);

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hua-labs/i18n-core",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "HUA Labs - Core i18n functionality with SSR/CSR support and state management integration",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/MissingKeyOverlay.tsx

@@ -1,223 +1,223 @@
-import React, { useEffect, useState } from 'react';
-
-interface MissingKeyOverlayProps {
-  enabled?: boolean;
-  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-  style?: React.CSSProperties;
-}
-
-interface MissingKey {
-  key: string;
-  namespace?: string;
-  language: string;
-  timestamp: number;
-  component?: string;
-}
-
-/**
- * 개발 모드에서 누락된 번역 키를 화면에 표시하는 오버레이
- * Lingui 스타일의 디버그 모드
- */
-export const MissingKeyOverlay: React.FC<MissingKeyOverlayProps> = ({
-  enabled = process.env.NODE_ENV === 'development',
-  position = 'top-right',
-  style
-}) => {
-  const [missingKeys, setMissingKeys] = useState<MissingKey[]>([]);
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    // 누락된 키 이벤트 리스너
-    const handleMissingKey = (event: CustomEvent<MissingKey>) => {
-      setMissingKeys(prev => [...prev, event.detail]);
-      setIsVisible(true);
-    };
-
-    // 전역 이벤트 리스너 등록
-    window.addEventListener('i18n:missing-key', handleMissingKey as EventListener);
-
-    return () => {
-      window.removeEventListener('i18n:missing-key', handleMissingKey as EventListener);
-    };
-  }, [enabled]);
-
-  if (!enabled || !isVisible) return null;
-
-  const positionStyles = {
-    'top-right': { top: 20, right: 20 },
-    'top-left': { top: 20, left: 20 },
-    'bottom-right': { bottom: 20, right: 20 },
-    'bottom-left': { bottom: 20, left: 20 }
-  };
-
-  const overlayStyle: React.CSSProperties = {
-    position: 'fixed',
-    zIndex: 9999,
-    backgroundColor: 'rgba(255, 0, 0, 0.9)',
-    color: 'white',
-    padding: '12px 16px',
-    borderRadius: '8px',
-    fontFamily: 'monospace',
-    fontSize: '12px',
-    maxWidth: '400px',
-    maxHeight: '300px',
-    overflow: 'auto',
-    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
-    border: '2px solid #ff4444',
-    ...positionStyles[position],
-    ...style
-  };
-
-  const keyStyle: React.CSSProperties = {
-    marginBottom: '8px',
-    padding: '4px 8px',
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderRadius: '4px',
-    borderLeft: '3px solid #ff8888'
-  };
-
-  const headerStyle: React.CSSProperties = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: '12px',
-    paddingBottom: '8px',
-    borderBottom: '1px solid rgba(255, 255, 255, 0.3)'
-  };
-
-  const closeButtonStyle: React.CSSProperties = {
-    background: 'none',
-    border: 'none',
-    color: 'white',
-    cursor: 'pointer',
-    fontSize: '16px',
-    padding: '0',
-    width: '20px',
-    height: '20px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  };
-
-  const clearButtonStyle: React.CSSProperties = {
-    background: 'rgba(255, 255, 255, 0.2)',
-    border: 'none',
-    color: 'white',
-    cursor: 'pointer',
-    padding: '4px 8px',
-    borderRadius: '4px',
-    fontSize: '10px',
-    marginLeft: '8px'
-  };
-
-  const handleClose = () => {
-    setIsVisible(false);
-  };
-
-  const handleClear = () => {
-    setMissingKeys([]);
-  };
-
-  const formatTime = (timestamp: number) => {
-    return new Date(timestamp).toLocaleTimeString();
-  };
-
-  return (
-    <div style={overlayStyle}>
-      <div style={headerStyle}>
-        <div>
-          <strong>🚨 Missing Translation Keys</strong>
-          <span style={{ fontSize: '10px', marginLeft: '8px' }}>
-            ({missingKeys.length})
-          </span>
-        </div>
-        <div>
-          <button style={clearButtonStyle} onClick={handleClear}>
-            Clear
-          </button>
-          <button style={closeButtonStyle} onClick={handleClose}>
-            ×
-          </button>
-        </div>
-      </div>
-      
-      <div>
-        {missingKeys.slice(-10).reverse().map((key, index) => (
-          <div key={`${key.key}-${key.timestamp}`} style={keyStyle}>
-            <div style={{ fontWeight: 'bold', color: '#ffcccc' }}>
-              {key.key}
-            </div>
-            <div style={{ fontSize: '10px', marginTop: '2px' }}>
-              <span>Lang: {key.language}</span>
-              {key.namespace && <span style={{ marginLeft: '8px' }}>NS: {key.namespace}</span>}
-              <span style={{ marginLeft: '8px' }}>Time: {formatTime(key.timestamp)}</span>
-            </div>
-            {key.component && (
-              <div style={{ fontSize: '10px', color: '#ffaaaa', marginTop: '2px' }}>
-                Component: {key.component}
-              </div>
-            )}
-          </div>
-        ))}
-        
-        {missingKeys.length > 10 && (
-          <div style={{ fontSize: '10px', textAlign: 'center', marginTop: '8px' }}>
-            ... and {missingKeys.length - 10} more
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-/**
- * 누락된 키를 오버레이에 표시하는 유틸리티 함수
- */
-export const reportMissingKey = (key: string, options: {
-  namespace?: string;
-  language: string;
-  component?: string;
-}) => {
-  if (process.env.NODE_ENV === 'development') {
-    const missingKey: MissingKey = {
-      key,
-      namespace: options.namespace,
-      language: options.language,
-      timestamp: Date.now(),
-      component: options.component
-    };
-
-    // 커스텀 이벤트 발생
-    window.dispatchEvent(new CustomEvent('i18n:missing-key', {
-      detail: missingKey
-    }));
-
-    // 콘솔에도 로그
-    console.warn(`Missing translation key: ${key}`, {
-      namespace: options.namespace,
-      language: options.language,
-      component: options.component
-    });
-  }
-};
-
-/**
- * 누락된 키 오버레이를 자동으로 활성화하는 훅
- */
-export const useMissingKeyOverlay = (enabled = true) => {
-  const [showOverlay, setShowOverlay] = useState(enabled);
-
-  useEffect(() => {
-    if (enabled && process.env.NODE_ENV === 'development') {
-      setShowOverlay(true);
-    }
-  }, [enabled]);
-
-  return {
-    showOverlay,
-    setShowOverlay,
-    reportMissingKey
-  };
+import React, { useEffect, useState } from 'react';
+
+interface MissingKeyOverlayProps {
+  enabled?: boolean;
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  style?: React.CSSProperties;
+}
+
+interface MissingKey {
+  key: string;
+  namespace?: string;
+  language: string;
+  timestamp: number;
+  component?: string;
+}
+
+/**
+ * 개발 모드에서 누락된 번역 키를 화면에 표시하는 오버레이
+ * Lingui 스타일의 디버그 모드
+ */
+export const MissingKeyOverlay: React.FC<MissingKeyOverlayProps> = ({
+  enabled = process.env.NODE_ENV === 'development',
+  position = 'top-right',
+  style
+}) => {
+  const [missingKeys, setMissingKeys] = useState<MissingKey[]>([]);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    // 누락된 키 이벤트 리스너
+    const handleMissingKey = (event: CustomEvent<MissingKey>) => {
+      setMissingKeys(prev => [...prev, event.detail]);
+      setIsVisible(true);
+    };
+
+    // 전역 이벤트 리스너 등록
+    window.addEventListener('i18n:missing-key', handleMissingKey as EventListener);
+
+    return () => {
+      window.removeEventListener('i18n:missing-key', handleMissingKey as EventListener);
+    };
+  }, [enabled]);
+
+  if (!enabled || !isVisible) return null;
+
+  const positionStyles = {
+    'top-right': { top: 20, right: 20 },
+    'top-left': { top: 20, left: 20 },
+    'bottom-right': { bottom: 20, right: 20 },
+    'bottom-left': { bottom: 20, left: 20 }
+  };
+
+  const overlayStyle: React.CSSProperties = {
+    position: 'fixed',
+    zIndex: 9999,
+    backgroundColor: 'rgba(255, 0, 0, 0.9)',
+    color: 'white',
+    padding: '12px 16px',
+    borderRadius: '8px',
+    fontFamily: 'monospace',
+    fontSize: '12px',
+    maxWidth: '400px',
+    maxHeight: '300px',
+    overflow: 'auto',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+    border: '2px solid #ff4444',
+    ...positionStyles[position],
+    ...style
+  };
+
+  const keyStyle: React.CSSProperties = {
+    marginBottom: '8px',
+    padding: '4px 8px',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    borderRadius: '4px',
+    borderLeft: '3px solid #ff8888'
+  };
+
+  const headerStyle: React.CSSProperties = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '12px',
+    paddingBottom: '8px',
+    borderBottom: '1px solid rgba(255, 255, 255, 0.3)'
+  };
+
+  const closeButtonStyle: React.CSSProperties = {
+    background: 'none',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    fontSize: '16px',
+    padding: '0',
+    width: '20px',
+    height: '20px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  const clearButtonStyle: React.CSSProperties = {
+    background: 'rgba(255, 255, 255, 0.2)',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    padding: '4px 8px',
+    borderRadius: '4px',
+    fontSize: '10px',
+    marginLeft: '8px'
+  };
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  const handleClear = () => {
+    setMissingKeys([]);
+  };
+
+  const formatTime = (timestamp: number) => {
+    return new Date(timestamp).toLocaleTimeString();
+  };
+
+  return (
+    <div style={overlayStyle}>
+      <div style={headerStyle}>
+        <div>
+          <strong>🚨 Missing Translation Keys</strong>
+          <span style={{ fontSize: '10px', marginLeft: '8px' }}>
+            ({missingKeys.length})
+          </span>
+        </div>
+        <div>
+          <button style={clearButtonStyle} onClick={handleClear}>
+            Clear
+          </button>
+          <button style={closeButtonStyle} onClick={handleClose}>
+            ×
+          </button>
+        </div>
+      </div>
+      
+      <div>
+        {missingKeys.slice(-10).reverse().map((key, index) => (
+          <div key={`${key.key}-${key.timestamp}`} style={keyStyle}>
+            <div style={{ fontWeight: 'bold', color: '#ffcccc' }}>
+              {key.key}
+            </div>
+            <div style={{ fontSize: '10px', marginTop: '2px' }}>
+              <span>Lang: {key.language}</span>
+              {key.namespace && <span style={{ marginLeft: '8px' }}>NS: {key.namespace}</span>}
+              <span style={{ marginLeft: '8px' }}>Time: {formatTime(key.timestamp)}</span>
+            </div>
+            {key.component && (
+              <div style={{ fontSize: '10px', color: '#ffaaaa', marginTop: '2px' }}>
+                Component: {key.component}
+              </div>
+            )}
+          </div>
+        ))}
+        
+        {missingKeys.length > 10 && (
+          <div style={{ fontSize: '10px', textAlign: 'center', marginTop: '8px' }}>
+            ... and {missingKeys.length - 10} more
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 누락된 키를 오버레이에 표시하는 유틸리티 함수
+ */
+export const reportMissingKey = (key: string, options: {
+  namespace?: string;
+  language: string;
+  component?: string;
+}) => {
+  if (process.env.NODE_ENV === 'development') {
+    const missingKey: MissingKey = {
+      key,
+      namespace: options.namespace,
+      language: options.language,
+      timestamp: Date.now(),
+      component: options.component
+    };
+
+    // 커스텀 이벤트 발생
+    window.dispatchEvent(new CustomEvent('i18n:missing-key', {
+      detail: missingKey
+    }));
+
+    // 콘솔에도 로그
+    console.warn(`Missing translation key: ${key}`, {
+      namespace: options.namespace,
+      language: options.language,
+      component: options.component
+    });
+  }
+};
+
+/**
+ * 누락된 키 오버레이를 자동으로 활성화하는 훅
+ */
+export const useMissingKeyOverlay = (enabled = true) => {
+  const [showOverlay, setShowOverlay] = useState(enabled);
+
+  useEffect(() => {
+    if (enabled && process.env.NODE_ENV === 'development') {
+      setShowOverlay(true);
+    }
+  }, [enabled]);
+
+  return {
+    showOverlay,
+    setShowOverlay,
+    reportMissingKey
+  };
 };