@pisodev/test-component-library 2.0.2 → 2.1.2

package/components/theme/ThemeContext.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+import { Theme, ThemeMode } from './colors.types';
+import { lightTheme } from './colors';
+
+export interface ThemeContextType {
+  theme: Theme;
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: lightTheme,
+  mode: 'light',
+  setMode: () => {},
+});

package/components/theme/ThemeProvider.native.tsx

@@ -0,0 +1,36 @@
+import React, { useState, ReactNode } from 'react';
+import { useColorScheme } from 'react-native';
+import { ThemeContext } from './ThemeContext';
+import { ThemeMode } from './colors.types';
+import { lightTheme, darkTheme } from './colors';
+
+export interface ThemeProviderProps {
+  children: ReactNode;
+  initialMode?: ThemeMode;
+  followSystem?: boolean;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  initialMode,
+  followSystem = true,
+}) => {
+  const systemColorScheme = useColorScheme();
+  const [manualMode, setManualMode] = useState<ThemeMode | null>(
+    initialMode || null
+  );
+
+  const mode =
+    manualMode || (followSystem && systemColorScheme) || 'light';
+  const theme = mode === 'light' ? lightTheme : darkTheme;
+
+  const setMode = (newMode: ThemeMode) => {
+    setManualMode(newMode);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, mode, setMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/components/theme/ThemeProvider.web.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, ReactNode } from 'react';
+import { ThemeContext } from './ThemeContext';
+import { ThemeMode } from './colors.types';
+import { lightTheme, darkTheme } from './colors';
+
+export interface ThemeProviderProps {
+  children: ReactNode;
+  initialMode?: ThemeMode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  initialMode = 'light',
+}) => {
+  const [mode, setMode] = useState<ThemeMode>(initialMode);
+  const theme = mode === 'light' ? lightTheme : darkTheme;
+
+  useEffect(() => {
+    // HTML 클래스 업데이트
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(mode);
+
+    // CSS Variables 업데이트
+    const root = document.documentElement;
+
+    // Gray colors
+    root.style.setProperty('--gray-50', theme.colors.gray[50]);
+    root.style.setProperty('--gray-100', theme.colors.gray[100]);
+    root.style.setProperty('--gray-200', theme.colors.gray[200]);
+    root.style.setProperty('--gray-400', theme.colors.gray[400]);
+    root.style.setProperty('--gray-600', theme.colors.gray[600]);
+    root.style.setProperty('--gray-800', theme.colors.gray[800]);
+    root.style.setProperty('--gray-900', theme.colors.gray[900]);
+
+    // Green colors
+    root.style.setProperty('--green-400', theme.colors.green[400]);
+    root.style.setProperty('--green-500', theme.colors.green[500]);
+    root.style.setProperty('--green-600', theme.colors.green[600]);
+
+    // Blue colors
+    root.style.setProperty('--blue-400', theme.colors.blue[400]);
+    root.style.setProperty('--blue-500', theme.colors.blue[500]);
+    root.style.setProperty('--blue-600', theme.colors.blue[600]);
+
+    // Red colors
+    root.style.setProperty('--red-400', theme.colors.red[400]);
+    root.style.setProperty('--red-500', theme.colors.red[500]);
+    root.style.setProperty('--red-600', theme.colors.red[600]);
+
+    // Semantic colors
+    root.style.setProperty('--color-info', theme.semantic.info);
+    root.style.setProperty('--color-success', theme.semantic.success);
+    root.style.setProperty('--color-error', theme.semantic.error);
+    root.style.setProperty('--color-warning', theme.semantic.warning);
+
+    // Paper colors
+    root.style.setProperty('--paper-default', theme.paper.default);
+    root.style.setProperty('--paper-neutral', theme.paper.neutral);
+    root.style.setProperty('--paper-dialog', theme.paper.dialog);
+  }, [mode, theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, mode, setMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/components/theme/colors.ts

@@ -0,0 +1,81 @@
+import { Theme } from './colors.types';
+
+export const lightTheme: Theme = {
+  colors: {
+    gray: {
+      50: '#F6F8FA',
+      100: '#EEF0F2',
+      200: '#E6E8EA',
+      400: '#CED0D2',
+      600: '#86888A',
+      800: '#2C2E30',
+      900: '#0C0E10',
+    },
+    green: {
+      400: '#18C792',
+      500: '#16B383',
+      600: '#12976F',
+    },
+    blue: {
+      400: '#1473FF',
+      500: '#1267E6',
+      600: '#0F57C2',
+    },
+    red: {
+      400: '#EB4242',
+      500: '#D43B3B',
+      600: '#B33232',
+    },
+  },
+  semantic: {
+    info: '#1473FF',
+    success: '#18C792',
+    error: '#EB4242',
+    warning: '#F0B800',
+  },
+  paper: {
+    default: '#FFFFFF',
+    neutral: '#F6F8FA',
+    dialog: '#FFFFFF',
+  },
+};
+
+export const darkTheme: Theme = {
+  colors: {
+    gray: {
+      50: '#1A1C1E',
+      100: '#282A2C',
+      200: '#36383A',
+      400: '#525456',
+      600: '#888A8C',
+      800: '#CCCED0',
+      900: '#FFFFFF',
+    },
+    green: {
+      400: '#1EEEAF',
+      500: '#54F2C2',
+      600: '#73F4CD',
+    },
+    blue: {
+      400: '#1473FF',
+      500: '#4C95FF',
+      600: '#6DA8FF',
+    },
+    red: {
+      400: '#FF4848',
+      500: '#FF7474',
+      600: '#FF8E8E',
+    },
+  },
+  semantic: {
+    info: '#1473FF',
+    success: '#1EEEAF',
+    error: '#FF4848',
+    warning: '#FFC400',
+  },
+  paper: {
+    default: '#0C0E10',
+    neutral: '#0C0E10',
+    dialog: '#1A1C1E',
+  },
+};

package/components/theme/colors.types.ts

@@ -0,0 +1,48 @@
+// 간소화된 컬러 타입 (예시용)
+export interface ColorScale {
+  gray: {
+    50: string;
+    100: string;
+    200: string;
+    400: string;
+    600: string;
+    800: string;
+    900: string;
+  };
+  green: {
+    400: string;
+    500: string;
+    600: string;
+  };
+  blue: {
+    400: string;
+    500: string;
+    600: string;
+  };
+  red: {
+    400: string;
+    500: string;
+    600: string;
+  };
+}
+
+export interface SemanticColors {
+  info: string;
+  success: string;
+  error: string;
+  warning: string;
+}
+
+export interface PaperColors {
+  default: string;
+  neutral: string;
+  dialog: string;
+}
+
+export interface Theme {
+  colors: ColorScale;
+  semantic: SemanticColors;
+  paper: PaperColors;
+}
+
+export type ThemeMode = 'light' | 'dark';

package/components/theme/index.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider } from './ThemeProvider.native';
+export { useTheme } from './useTheme';
+export { lightTheme, darkTheme } from './colors';
+export type { Theme, ThemeMode, ColorScale, SemanticColors, PaperColors } from './colors.types';

package/components/theme/index.web.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider } from './ThemeProvider.web';
+export { useTheme } from './useTheme';
+export { lightTheme, darkTheme } from './colors';
+export type { Theme, ThemeMode, ColorScale, SemanticColors, PaperColors } from './colors.types';

package/components/theme/useTheme.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ThemeContext } from './ThemeContext';
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+
+  return context;
+};

package/dist/theme/ThemeContext.d.ts

@@ -0,0 +1,7 @@
+import { Theme, ThemeMode } from './colors.types';
+export interface ThemeContextType {
+    theme: Theme;
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+}
+export declare const ThemeContext: import("react").Context<ThemeContextType>;

package/dist/theme/ThemeProvider.native.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { ThemeMode } from './colors.types';
+export interface ThemeProviderProps {
+    children: ReactNode;
+    initialMode?: ThemeMode;
+    followSystem?: boolean;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/dist/theme/ThemeProvider.web.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+import { ThemeMode } from './colors.types';
+export interface ThemeProviderProps {
+    children: ReactNode;
+    initialMode?: ThemeMode;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/dist/theme/colors.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from './colors.types';
+export declare const lightTheme: Theme;
+export declare const darkTheme: Theme;

package/dist/theme/colors.types.d.ts

@@ -0,0 +1,43 @@
+export interface ColorScale {
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        400: string;
+        600: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        400: string;
+        500: string;
+        600: string;
+    };
+    blue: {
+        400: string;
+        500: string;
+        600: string;
+    };
+    red: {
+        400: string;
+        500: string;
+        600: string;
+    };
+}
+export interface SemanticColors {
+    info: string;
+    success: string;
+    error: string;
+    warning: string;
+}
+export interface PaperColors {
+    default: string;
+    neutral: string;
+    dialog: string;
+}
+export interface Theme {
+    colors: ColorScale;
+    semantic: SemanticColors;
+    paper: PaperColors;
+}
+export type ThemeMode = 'light' | 'dark';

package/dist/theme/index.d.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider } from './ThemeProvider.native';
+export { useTheme } from './useTheme';
+export { lightTheme, darkTheme } from './colors';
+export type { Theme, ThemeMode, ColorScale, SemanticColors, PaperColors } from './colors.types';

package/dist/theme/index.web.d.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider } from './ThemeProvider.web';
+export { useTheme } from './useTheme';
+export { lightTheme, darkTheme } from './colors';
+export type { Theme, ThemeMode, ColorScale, SemanticColors, PaperColors } from './colors.types';

package/dist/theme/useTheme.d.ts

@@ -0,0 +1 @@
+export declare const useTheme: () => import("./ThemeContext").ThemeContextType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisodev/test-component-library",
-  "version": "2.0.2",
+  "version": "2.1.2",
   "description": "웹과 React Native를 위한 컴포넌트 라이브러리",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -51,6 +51,7 @@
     "rollup": "^4.54.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "postcss": "^8.4.49",
     "sass": "^1.97.1",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3"

package/components/README.md

@@ -1,195 +0,0 @@
-# 컴포넌트 가이드
-
-## 컴포넌트 타입
-
-### 1. 크로스 플랫폼 컴포넌트 (웹 + RN 모두 지원)
-
-```
-ComponentName/
-├── ComponentName.types.ts        # 공유 타입
-├── ComponentName.web.tsx         # 웹 구현
-├── ComponentName.native.tsx      # RN 구현
-├── index.ts                      # export
-└── README.md
-```
-
-**예시**: Anchor, Button, Card
-
-**index.ts**:
-```typescript
-export { ComponentName } from './ComponentName';
-export type { ComponentNameProps } from './ComponentName.types';
-```
-
----
-
-### 2. 웹 전용 컴포넌트
-
-```
-WebOnlyComponent/
-├── WebOnlyComponent.types.ts     # 타입
-├── WebOnlyComponent.tsx          # 웹 구현 (.web.tsx 아님!)
-├── WebOnlyComponent.module.scss  # 스타일
-├── index.ts                      # export
-└── README.md
-```
-
-**예시**: Table, Tooltip, Dropdown
-
-**index.ts**:
-```typescript
-export { WebOnlyComponent } from './WebOnlyComponent';
-export type { WebOnlyComponentProps } from './WebOnlyComponent.types';
-```
-
-**중요**: RN에서 import 시 에러 방지를 위한 처리
-
-**Option 1 - 타입만 제공**:
-```typescript
-// index.native.ts (별도 파일)
-import { WebOnlyComponentProps } from './WebOnlyComponent.types';
-
-export const WebOnlyComponent = () => {
-  if (__DEV__) {
-    console.warn('WebOnlyComponent is not available on React Native');
-  }
-  return null;
-};
-
-export type { WebOnlyComponentProps };
-```
-
-**Option 2 - 완전히 제외**:
-```typescript
-// components/index.ts에서
-export * from './Anchor';
-export * from './Button';
-
-// 조건부 export (빌드 설정에서 처리)
-if (typeof window !== 'undefined') {
-  export * from './WebOnlyComponent';
-}
-```
-
----
-
-### 3. React Native 전용 컴포넌트
-
-```
-NativeOnlyComponent/
-├── NativeOnlyComponent.types.ts  # 타입
-├── NativeOnlyComponent.tsx       # RN 구현 (.native.tsx 아님!)
-├── index.ts                      # export
-└── README.md
-```
-
-**예시**: MapView, Camera, BiometricAuth
-
-**index.ts**:
-```typescript
-export { NativeOnlyComponent } from './NativeOnlyComponent';
-export type { NativeOnlyComponentProps } from './NativeOnlyComponent.types';
-```
-
-**웹에서 import 시 에러 방지**:
-
-**index.web.ts (별도 파일)**:
-```typescript
-import { NativeOnlyComponentProps } from './NativeOnlyComponent.types';
-
-export const NativeOnlyComponent = () => {
-  if (process.env.NODE_ENV === 'development') {
-    console.warn('NativeOnlyComponent is only available on React Native');
-  }
-  return null;
-};
-
-export type { NativeOnlyComponentProps };
-```
-
----
-
-## 실전 예시
-
-### 예시 1: Tooltip (웹 전용)
-
-DOM API를 사용하므로 RN에서 불가능
-
-```
-Tooltip/
-├── Tooltip.types.ts
-├── Tooltip.tsx                   # 웹 구현
-├── Tooltip.module.scss
-├── index.ts                      # 웹용 export
-├── index.native.ts               # RN용 - null 반환 또는 대안
-└── README.md
-```
-
-**index.native.ts**:
-```typescript
-import { TooltipProps } from './Tooltip.types';
-
-// RN에서는 React Native의 Tooltip 사용 권장
-export const Tooltip: React.FC<TooltipProps> = ({ children }) => {
-  return <>{children}</>;  // 툴팁 없이 children만 렌더
-};
-
-export type { TooltipProps };
-```
-
-### 예시 2: DatePicker (플랫폼별 구현 차이가 큼)
-
-웹과 RN에서 완전히 다른 API 사용
-
-```
-DatePicker/
-├── DatePicker.types.ts           # 공통 props만
-├── DatePicker.web.tsx            # HTML input type="date"
-├── DatePicker.native.tsx         # @react-native-community/datetimepicker
-├── index.ts
-└── README.md
-```
-
-### 예시 3: MapView (RN 전용)
-
-react-native-maps 사용
-
-```
-MapView/
-├── MapView.types.ts
-├── MapView.tsx                   # RN 구현
-├── index.ts                      # RN export
-├── index.web.ts                  # 웹에서는 에러 또는 대안
-└── README.md
-```
-
-**index.web.ts**:
-```typescript
-export const MapView = () => {
-  throw new Error(
-    'MapView is only available on React Native. Use a web map library like react-leaflet instead.'
-  );
-};
-```
-
----
-
-## 권장 사항
-
-### 플랫폼 전용 컴포넌트를 만들기 전에
-
-1. **정말 플랫폼 전용이 필요한가?**
-   - 대부분의 UI 컴포넌트는 크로스 플랫폼 가능
-   - 로직만 분리하고 렌더링만 다르게 할 수 있는지 검토
-
-2. **대안 제공**
-   - 웹 전용: RN에서는 null 반환 + 경고
-   - RN 전용: 웹에서는 에러 throw + 대안 라이브러리 제안
-
-3. **문서화**
-   - README.md에 플랫폼 제한 명시
-   - 대안 라이브러리/방법 제시
-
-4. **TypeScript 타입은 공유**
-   - Props 타입은 양쪽에서 사용 가능하도록
-   - 개발자 경험(DX) 향상