React Provider Pattern

// 1단계: Context 생성 및 타입 정의
interface MyContextType {
  state: string;
  setState: (value: string) => void;
}

const MyContext = createContext<MyContextType | undefined>(undefined);

// 2단계: Provider 컴포넌트 구현
export function MyProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState<string>('initial');

  // 최적화: 값이 변경될 때만 새 객체 생성
  const value = useMemo(() => ({
    state,
    setState
  }), [state]);

  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
}

// 3단계: Custom Hook으로 사용성 개선
export function useMyContext(): MyContextType {
  const context = useContext(MyContext);

  // Provider 외부에서 사용 시 명확한 에러 메시지
  if (context === undefined) {
    throw new Error('useMyContext는 MyProvider 내부에서만 사용할 수 있습니다');
  }

  return context;
}

// 4단계: 사용
function App() {
  return (
    <MyProvider>
      <ChildComponent />
    </MyProvider>
  );
}

function ChildComponent() {
  const { state, setState } = useMyContext();
  return <div>{state}</div>;
}

// types.ts
interface ThemeColors {
  primary: string;
  secondary: string;
  background: string;
  surface: string;
  text: string;
  textSecondary: string;
  border: string;
  error: string;
  success: string;
}

interface ThemeContextType {
  theme: 'light' | 'dark';
  colors: ThemeColors;
  toggleTheme: () => void;
  setTheme: (theme: 'light' | 'dark') => void;
}

// ThemeProvider.tsx
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

const lightTheme: ThemeColors = {
  primary: '#007bff',
  secondary: '#6c757d',
  background: '#ffffff',
  surface: '#f8f9fa',
  text: '#212529',
  textSecondary: '#6c757d',
  border: '#dee2e6',
  error: '#dc3545',
  success: '#28a745'
};

const darkTheme: ThemeColors = {
  primary: '#4dabf7',
  secondary: '#adb5bd',
  background: '#1a1a1a',
  surface: '#2d2d2d',
  text: '#f8f9fa',
  textSecondary: '#adb5bd',
  border: '#495057',
  error: '#ff6b6b',
  success: '#51cf66'
};

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setThemeState] = useState<'light' | 'dark'>('light');

  // 시스템 테마 감지
  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;

    if (savedTheme) {
      setThemeState(savedTheme);
    } else if (mediaQuery.matches) {
      setThemeState('dark');
    }

    // 시스템 테마 변경 감지
    const handler = (e: MediaQueryListEvent) => {
      if (!localStorage.getItem('theme')) {
        setThemeState(e.matches ? 'dark' : 'light');
      }
    };

    mediaQuery.addEventListener('change', handler);
    return () => mediaQuery.removeEventListener('change', handler);
  }, []);

  // 로컬 스토리지 및 DOM 동기화
  useEffect(() => {
    localStorage.setItem('theme', theme);
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.style.colorScheme = theme;
  }, [theme]);

  const toggleTheme = useCallback(() => {
    setThemeState(prev => prev === 'light' ? 'dark' : 'light');
  }, []);

  const setTheme = useCallback((newTheme: 'light' | 'dark') => {
    setThemeState(newTheme);
  }, []);

  const value = useMemo<ThemeContextType>(() => ({
    theme,
    colors: theme === 'light' ? lightTheme : darkTheme,
    toggleTheme,
    setTheme
  }), [theme, toggleTheme, setTheme]);

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme(): ThemeContextType {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme은 ThemeProvider 내부에서만 사용할 수 있습니다');
  }
  return context;
}

// 사용 예시
function Header() {
  const { theme, colors, toggleTheme } = useTheme();

  return (
    <header style={{
      backgroundColor: colors.surface,
      color: colors.text,
      borderBottom: `1px solid ${colors.border}`
    }}>
      <h1>My App</h1>
      <button onClick={toggleTheme}>
        {theme === 'light' ? '🌙 다크' : '☀️ 라이트'} 모드
      </button>
    </header>
  );
}

function Card({ children }: { children: React.ReactNode }) {
  const { colors } = useTheme();

  return (
    <div style={{
      backgroundColor: colors.surface,
      color: colors.text,
      border: `1px solid ${colors.border}`,
      borderRadius: '8px',
      padding: '16px'
    }}>
      {children}
    </div>
  );
}

// types.ts
interface User {
  id: string;
  email: string;
  name: string;
  avatar?: string;
  role: 'admin' | 'user' | 'guest';
  permissions: string[];
}

interface AuthContextType {
  user: User | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => Promise<void>;
  register: (data: RegisterData) => Promise<void>;
  updateProfile: (data: Partial<User>) => Promise<void>;
  hasPermission: (permission: string) => boolean;
  hasRole: (role: string) => boolean;
}

// AuthProvider.tsx
const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  // 초기 인증 상태 확인
  useEffect(() => {
    const initAuth = async () => {
      const token = localStorage.getItem('auth_token');
      if (!token) {
        setIsLoading(false);
        return;
      }

      try {
        const response = await fetch('/api/auth/me', {
          headers: { 'Authorization': `Bearer ${token}` }
        });

        if (response.ok) {
          const userData = await response.json();
          setUser(userData);
        } else {
          localStorage.removeItem('auth_token');
        }
      } catch (error) {
        console.error('인증 확인 실패:', error);
        localStorage.removeItem('auth_token');
      } finally {
        setIsLoading(false);
      }
    };

    initAuth();
  }, []);

  // 토큰 자동 갱신
  useEffect(() => {
    if (!user) return;

    const refreshInterval = setInterval(async () => {
      try {
        const token = localStorage.getItem('auth_token');
        const response = await fetch('/api/auth/refresh', {
          method: 'POST',
          headers: { 'Authorization': `Bearer ${token}` }
        });

        if (response.ok) {
          const { token: newToken } = await response.json();
          localStorage.setItem('auth_token', newToken);
        }
      } catch (error) {
        console.error('토큰 갱신 실패:', error);
      }
    }, 14 * 60 * 1000); // 14분마다 갱신

    return () => clearInterval(refreshInterval);
  }, [user]);

  const login = useCallback(async (email: string, password: string) => {
    setIsLoading(true);
    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });

      if (!response.ok) {
        throw new Error('로그인에 실패했습니다');
      }

      const { user: userData, token } = await response.json();

      localStorage.setItem('auth_token', token);
      setUser(userData);
    } catch (error) {
      throw error;
    } finally {
      setIsLoading(false);
    }
  }, []);

  const logout = useCallback(async () => {
    try {
      await fetch('/api/auth/logout', { method: 'POST' });
    } catch (error) {
      console.error('로그아웃 요청 실패:', error);
    } finally {
      setUser(null);
      localStorage.removeItem('auth_token');
    }
  }, []);

  const register = useCallback(async (data: RegisterData) => {
    setIsLoading(true);
    try {
      const response = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });

      if (!response.ok) {
        throw new Error('회원가입에 실패했습니다');
      }

      const { user: userData, token } = await response.json();

      localStorage.setItem('auth_token', token);
      setUser(userData);
    } catch (error) {
      throw error;
    } finally {
      setIsLoading(false);
    }
  }, []);

  const updateProfile = useCallback(async (data: Partial<User>) => {
    if (!user) throw new Error('로그인이 필요합니다');

    try {
      const token = localStorage.getItem('auth_token');
      const response = await fetch('/api/auth/profile', {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(data)
      });

      if (!response.ok) {
        throw new Error('프로필 업데이트에 실패했습니다');
      }

      const updatedUser = await response.json();
      setUser(updatedUser);
    } catch (error) {
      throw error;
    }
  }, [user]);

  const hasPermission = useCallback((permission: string) => {
    if (!user) return false;
    return user.permissions.includes(permission) || user.role === 'admin';
  }, [user]);

  const hasRole = useCallback((role: string) => {
    if (!user) return false;
    return user.role === role;
  }, [user]);

  const value = useMemo<AuthContextType>(() => ({
    user,
    isAuthenticated: !!user,
    isLoading,
    login,
    logout,
    register,
    updateProfile,
    hasPermission,
    hasRole
  }), [user, isLoading, login, logout, register, updateProfile, hasPermission, hasRole]);

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth(): AuthContextType {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth는 AuthProvider 내부에서만 사용할 수 있습니다');
  }
  return context;
}

// 보호된 라우트 컴포넌트
export function ProtectedRoute({
  children,
  requiredRole,
  requiredPermission
}: {
  children: React.ReactNode;
  requiredRole?: string;
  requiredPermission?: string;
}) {
  const { isAuthenticated, isLoading, hasRole, hasPermission } = useAuth();

  if (isLoading) {
    return <LoadingSpinner />;
  }

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  if (requiredRole && !hasRole(requiredRole)) {
    return <Navigate to="/forbidden" replace />;
  }

  if (requiredPermission && !hasPermission(requiredPermission)) {
    return <Navigate to="/forbidden" replace />;
  }

  return <>{children}</>;
}

// 사용 예시
function UserProfile() {
  const { user, logout, updateProfile } = useAuth();
  const [isEditing, setIsEditing] = useState(false);
  const [formData, setFormData] = useState({ name: user?.name || '' });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      await updateProfile(formData);
      setIsEditing(false);
    } catch (error) {
      alert('프로필 업데이트에 실패했습니다');
    }
  };

  return (
    <div>
      <h2>{user?.name}님의 프로필</h2>
      {isEditing ? (
        <form onSubmit={handleSubmit}>
          <input
            value={formData.name}
            onChange={e => setFormData({ ...formData, name: e.target.value })}
          />
          <button type="submit">저장</button>
          <button onClick={() => setIsEditing(false)}>취소</button>
        </form>
      ) : (
        <>
          <p>이메일: {user?.email}</p>
          <p>역할: {user?.role}</p>
          <button onClick={() => setIsEditing(true)}>프로필 수정</button>
          <button onClick={logout}>로그아웃</button>
        </>
      )}
    </div>
  );
}

function AdminPanel() {
  const { hasRole } = useAuth();

  if (!hasRole('admin')) {
    return <div>접근 권한이 없습니다</div>;
  }

  return <div>관리자 패널</div>;
}

// types.ts
type SupportedLanguage = 'ko' | 'en' | 'ja' | 'zh';

interface Translation {
  [key: string]: string | Translation;
}

interface I18nContextType {
  language: SupportedLanguage;
  setLanguage: (lang: SupportedLanguage) => void;
  t: (key: string, params?: Record<string, string | number>) => string;
  formatDate: (date: Date) => string;
  formatNumber: (num: number) => string;
  formatCurrency: (amount: number, currency?: string) => string;
}

// translations.ts
const translations: Record<SupportedLanguage, Translation> = {
  ko: {
    common: {
      welcome: '환영합니다',
      hello: '안녕하세요, {{name}}님',
      loading: '로딩 중...',
      error: '오류가 발생했습니다'
    },
    auth: {
      login: '로그인',
      logout: '로그아웃',
      email: '이메일',
      password: '비밀번호'
    },
    cart: {
      addToCart: '장바구니에 추가',
      items: '{{count}}개 상품',
      total: '총 금액'
    }
  },
  en: {
    common: {
      welcome: 'Welcome',
      hello: 'Hello, {{name}}',
      loading: 'Loading...',
      error: 'An error occurred'
    },
    auth: {
      login: 'Login',
      logout: 'Logout',
      email: 'Email',
      password: 'Password'
    },
    cart: {
      addToCart: 'Add to Cart',
      items: '{{count}} items',
      total: 'Total'
    }
  },
  ja: {
    common: {
      welcome: 'ようこそ',
      hello: 'こんにちは、{{name}}さん',
      loading: '読み込み中...',
      error: 'エラーが発生しました'
    },
    auth: {
      login: 'ログイン',
      logout: 'ログアウト',
      email: 'メール',
      password: 'パスワード'
    },
    cart: {
      addToCart: 'カートに追加',
      items: '{{count}}個の商品',
      total: '合計'
    }
  },
  zh: {
    common: {
      welcome: '欢迎',
      hello: '你好，{{name}}',
      loading: '加载中...',
      error: '发生错误'
    },
    auth: {
      login: '登录',
      logout: '登出',
      email: '邮箱',
      password: '密码'
    },
    cart: {
      addToCart: '加入购物车',
      items: '{{count}}件商品',
      total: '总计'
    }
  }
};

// I18nProvider.tsx
const I18nContext = createContext<I18nContextType | undefined>(undefined);

export function I18nProvider({ children }: { children: React.ReactNode }) {
  const [language, setLanguageState] = useState<SupportedLanguage>('ko');

  // 초기 언어 감지
  useEffect(() => {
    const savedLanguage = localStorage.getItem('language') as SupportedLanguage;
    if (savedLanguage && translations[savedLanguage]) {
      setLanguageState(savedLanguage);
      return;
    }

    // 브라우저 언어 감지
    const browserLang = navigator.language.split('-')[0] as SupportedLanguage;
    if (translations[browserLang]) {
      setLanguageState(browserLang);
    }
  }, []);

  // 언어 변경 시 저장
  useEffect(() => {
    localStorage.setItem('language', language);
    document.documentElement.lang = language;
  }, [language]);

  const setLanguage = useCallback((lang: SupportedLanguage) => {
    if (translations[lang]) {
      setLanguageState(lang);
    }
  }, []);

  // 번역 함수
  const t = useCallback((key: string, params?: Record<string, string | number>): string => {
    const keys = key.split('.');
    let value: any = translations[language];

    for (const k of keys) {
      if (value && typeof value === 'object') {
        value = value[k];
      } else {
        return key; // 키를 찾지 못하면 키 자체 반환
      }
    }

    if (typeof value !== 'string') {
      return key;
    }

    // 파라미터 치환
    if (params) {
      return value.replace(/\{\{(\w+)\}\}/g, (_, param) =>
        String(params[param] ?? '')
      );
    }

    return value;
  }, [language]);

  // 날짜 포매팅
  const formatDate = useCallback((date: Date): string => {
    return new Intl.DateTimeFormat(language, {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    }).format(date);
  }, [language]);

  // 숫자 포매팅
  const formatNumber = useCallback((num: number): string => {
    return new Intl.NumberFormat(language).format(num);
  }, [language]);

  // 통화 포매팅
  const formatCurrency = useCallback((amount: number, currency = 'USD'): string => {
    return new Intl.NumberFormat(language, {
      style: 'currency',
      currency: currency
    }).format(amount);
  }, [language]);

  const value = useMemo<I18nContextType>(() => ({
    language,
    setLanguage,
    t,
    formatDate,
    formatNumber,
    formatCurrency
  }), [language, setLanguage, t, formatDate, formatNumber, formatCurrency]);

  return (
    <I18nContext.Provider value={value}>
      {children}
    </I18nContext.Provider>
  );
}

export function useI18n(): I18nContextType {
  const context = useContext(I18nContext);
  if (!context) {
    throw new Error('useI18n은 I18nProvider 내부에서만 사용할 수 있습니다');
  }
  return context;
}

// 사용 예시
function LanguageSwitcher() {
  const { language, setLanguage } = useI18n();

  return (
    <select value={language} onChange={e => setLanguage(e.target.value as SupportedLanguage)}>
      <option value="ko">한국어</option>
      <option value="en">English</option>
      <option value="ja">日本語</option>
      <option value="zh">中文</option>
    </select>
  );
}

function WelcomeMessage() {
  const { t } = useI18n();
  const userName = 'John';

  return (
    <div>
      <h1>{t('common.welcome')}</h1>
      <p>{t('common.hello', { name: userName })}</p>
    </div>
  );
}

function ProductPrice({ price }: { price: number }) {
  const { formatCurrency } = useI18n();

  return (
    <span className="price">
      {formatCurrency(price, 'USD')}
    </span>
  );
}

function OrderDate({ date }: { date: Date }) {
  const { formatDate } = useI18n();

  return (
    <span className="date">
      {formatDate(date)}
    </span>
  );
}

// types.ts
interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
  image: string;
  stock: number;
  options?: Record<string, string>;
}

interface CartContextType {
  items: CartItem[];
  totalItems: number;
  totalPrice: number;
  subtotal: number;
  tax: number;
  shipping: number;
  addItem: (item: Omit<CartItem, 'quantity'>, quantity?: number) => void;
  removeItem: (id: string) => void;
  updateQuantity: (id: string, quantity: number) => void;
  clearCart: () => void;
  applyDiscount: (code: string) => Promise<void>;
  discount: number;
  isInCart: (id: string) => boolean;
  getItemQuantity: (id: string) => number;
}

// CartProvider.tsx
const CartContext = createContext<CartContextType | undefined>(undefined);

const TAX_RATE = 0.1; // 10% 세금
const FREE_SHIPPING_THRESHOLD = 50000; // 5만원 이상 무료배송
const SHIPPING_COST = 3000;

export function CartProvider({ children }: { children: React.ReactNode }) {
  const [items, setItems] = useState<CartItem[]>([]);
  const [discount, setDiscount] = useState(0);

  // 로컬 스토리지 동기화
  useEffect(() => {
    const savedCart = localStorage.getItem('cart');
    if (savedCart) {
      try {
        const parsedCart = JSON.parse(savedCart);
        setItems(parsedCart);
      } catch (error) {
        console.error('장바구니 데이터 로드 실패:', error);
        localStorage.removeItem('cart');
      }
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('cart', JSON.stringify(items));
  }, [items]);

  // 아이템 추가
  const addItem = useCallback((newItem: Omit<CartItem, 'quantity'>, quantity = 1) => {
    setItems(prevItems => {
      const existingItem = prevItems.find(item => item.id === newItem.id);

      if (existingItem) {
        // 재고 확인
        const newQuantity = existingItem.quantity + quantity;
        if (newQuantity > existingItem.stock) {
          alert(`재고가 부족합니다. 최대 ${existingItem.stock}개까지 구매 가능합니다.`);
          return prevItems;
        }

        return prevItems.map(item =>
          item.id === newItem.id
            ? { ...item, quantity: newQuantity }
            : item
        );
      }

      // 새 아이템 추가
      if (quantity > newItem.stock) {
        alert(`재고가 부족합니다. 최대 ${newItem.stock}개까지 구매 가능합니다.`);
        return prevItems;
      }

      return [...prevItems, { ...newItem, quantity }];
    });
  }, []);

  // 아이템 제거
  const removeItem = useCallback((id: string) => {
    setItems(prevItems => prevItems.filter(item => item.id !== id));
  }, []);

  // 수량 업데이트
  const updateQuantity = useCallback((id: string, quantity: number) => {
    if (quantity <= 0) {
      removeItem(id);
      return;
    }

    setItems(prevItems =>
      prevItems.map(item => {
        if (item.id === id) {
          if (quantity > item.stock) {
            alert(`재고가 부족합니다. 최대 ${item.stock}개까지 구매 가능합니다.`);
            return item;
          }
          return { ...item, quantity };
        }
        return item;
      })
    );
  }, [removeItem]);

  // 장바구니 비우기
  const clearCart = useCallback(() => {
    if (confirm('장바구니를 비우시겠습니까?')) {
      setItems([]);
      setDiscount(0);
    }
  }, []);

  // 할인 코드 적용
  const applyDiscount = useCallback(async (code: string) => {
    try {
      const response = await fetch('/api/discount/validate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code })
      });

      if (response.ok) {
        const { discountPercent } = await response.json();
        setDiscount(discountPercent);
      } else {
        throw new Error('유효하지 않은 할인 코드입니다');
      }
    } catch (error) {
      throw error;
    }
  }, []);

  // 계산된 값들
  const totalItems = useMemo(() =>
    items.reduce((total, item) => total + item.quantity, 0)
  , [items]);

  const subtotal = useMemo(() =>
    items.reduce((total, item) => total + (item.price * item.quantity), 0)
  , [items]);

  const discountAmount = useMemo(() =>
    subtotal * (discount / 100)
  , [subtotal, discount]);

  const afterDiscount = useMemo(() =>
    subtotal - discountAmount
  , [subtotal, discountAmount]);

  const tax = useMemo(() =>
    Math.floor(afterDiscount * TAX_RATE)
  , [afterDiscount]);

  const shipping = useMemo(() =>
    afterDiscount >= FREE_SHIPPING_THRESHOLD ? 0 : SHIPPING_COST
  , [afterDiscount]);

  const totalPrice = useMemo(() =>
    afterDiscount + tax + shipping
  , [afterDiscount, tax, shipping]);

  // 유틸리티 함수들
  const isInCart = useCallback((id: string) => {
    return items.some(item => item.id === id);
  }, [items]);

  const getItemQuantity = useCallback((id: string) => {
    const item = items.find(item => item.id === id);
    return item ? item.quantity : 0;
  }, [items]);

  const value = useMemo<CartContextType>(() => ({
    items,
    totalItems,
    totalPrice,
    subtotal,
    tax,
    shipping,
    discount: discountAmount,
    addItem,
    removeItem,
    updateQuantity,
    clearCart,
    applyDiscount,
    isInCart,
    getItemQuantity
  }), [
    items, totalItems, totalPrice, subtotal, tax, shipping, discountAmount,
    addItem, removeItem, updateQuantity, clearCart, applyDiscount, isInCart, getItemQuantity
  ]);

  return (
    <CartContext.Provider value={value}>
      {children}
    </CartContext.Provider>
  );
}

export function useCart(): CartContextType {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error('useCart는 CartProvider 내부에서만 사용할 수 있습니다');
  }
  return context;
}

// 사용 예시
function ProductCard({ product }: { product: Product }) {
  const { addItem, isInCart, getItemQuantity } = useCart();
  const [quantity, setQuantity] = useState(1);

  const handleAddToCart = () => {
    addItem({
      id: product.id,
      name: product.name,
      price: product.price,
      image: product.image,
      stock: product.stock
    }, quantity);
  };

  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p className="price">${product.price.toLocaleString()}</p>
      <p className="stock">재고: {product.stock}개</p>

      <div className="quantity-selector">
        <button onClick={() => setQuantity(Math.max(1, quantity - 1))}>-</button>
        <input type="number" value={quantity} onChange={e => setQuantity(parseInt(e.target.value) || 1)} />
        <button onClick={() => setQuantity(Math.min(product.stock, quantity + 1))}>+</button>
      </div>

      <button onClick={handleAddToCart}>
        {isInCart(product.id)
          ? `장바구니에 ${getItemQuantity(product.id)}개 담김`
          : '장바구니에 추가'
        }
      </button>
    </div>
  );
}

function CartSummary() {
  const { totalItems, subtotal, discount, tax, shipping, totalPrice } = useCart();

  return (
    <div className="cart-summary">
      <h3>주문 요약</h3>
      <div className="summary-row">
        <span>상품 금액 ({totalItems}개)</span>
        <span>${subtotal.toLocaleString()}</span>
      </div>
      {discount > 0 && (
        <div className="summary-row discount">
          <span>할인</span>
          <span>-${discount.toLocaleString()}</span>
        </div>
      )}
      <div className="summary-row">
        <span>세금</span>
        <span>${tax.toLocaleString()}</span>
      </div>
      <div className="summary-row">
        <span>배송비</span>
        <span>{shipping === 0 ? '무료' : `$${shipping.toLocaleString()}`}</span>
      </div>
      {subtotal < FREE_SHIPPING_THRESHOLD && (
        <p className="free-shipping-notice">
          ${(FREE_SHIPPING_THRESHOLD - subtotal).toLocaleString()} 더 구매하시면 무료배송!
        </p>
      )}
      <div className="summary-row total">
        <strong>총 결제 금액</strong>
        <strong>${totalPrice.toLocaleString()}</strong>
      </div>
    </div>
  );
}

function CartBadge() {
  const { totalItems } = useCart();

  return (
    <button className="cart-button">
      🛒 장바구니
      {totalItems > 0 && (
        <span className="badge">{totalItems}</span>
      )}
    </button>
  );
}

// types.ts
interface Notification {
  id: string;
  type: 'success' | 'error' | 'warning' | 'info';
  message: string;
  duration?: number;
  action?: {
    label: string;
    onClick: () => void;
  };
}

interface NotificationContextType {
  notifications: Notification[];
  success: (message: string, duration?: number) => void;
  error: (message: string, duration?: number) => void;
  warning: (message: string, duration?: number) => void;
  info: (message: string, duration?: number) => void;
  remove: (id: string) => void;
  notify: (notification: Omit<Notification, 'id'>) => void;
}

// NotificationProvider.tsx
const NotificationContext = createContext<NotificationContextType | undefined>(undefined);

export function NotificationProvider({ children }: { children: React.ReactNode }) {
  const [notifications, setNotifications] = useState<Notification[]>([]);

  // 알림 추가
  const notify = useCallback((notification: Omit<Notification, 'id'>) => {
    const id = `notification-${Date.now()}-${Math.random()}`;
    const newNotification: Notification = {
      ...notification,
      id,
      duration: notification.duration ?? 3000
    };

    setNotifications(prev => [...prev, newNotification]);

    // 자동 제거
    if (newNotification.duration > 0) {
      setTimeout(() => {
        remove(id);
      }, newNotification.duration);
    }

    return id;
  }, []);

  // 알림 제거
  const remove = useCallback((id: string) => {
    setNotifications(prev => prev.filter(n => n.id !== id));
  }, []);

  // 편의 함수들
  const success = useCallback((message: string, duration?: number) => {
    notify({ type: 'success', message, duration });
  }, [notify]);

  const error = useCallback((message: string, duration?: number) => {
    notify({ type: 'error', message, duration });
  }, [notify]);

  const warning = useCallback((message: string, duration?: number) => {
    notify({ type: 'warning', message, duration });
  }, [notify]);

  const info = useCallback((message: string, duration?: number) => {
    notify({ type: 'info', message, duration });
  }, [notify]);

  const value = useMemo<NotificationContextType>(() => ({
    notifications,
    success,
    error,
    warning,
    info,
    remove,
    notify
  }), [notifications, success, error, warning, info, remove, notify]);

  return (
    <NotificationContext.Provider value={value}>
      {children}
      <NotificationContainer />
    </NotificationContext.Provider>
  );
}

// 알림 컨테이너 컴포넌트
function NotificationContainer() {
  const { notifications, remove } = useNotification();

  return (
    <div className="notification-container">
      {notifications.map(notification => (
        <NotificationItem
          key={notification.id}
          notification={notification}
          onClose={() => remove(notification.id)}
        />
      ))}
    </div>
  );
}

function NotificationItem({
  notification,
  onClose
}: {
  notification: Notification;
  onClose: () => void;
}) {
  const icons = {
    success: '✓',
    error: '✕',
    warning: '⚠',
    info: 'ℹ'
  };

  return (
    <div className={`notification notification-${notification.type}`}>
      <span className="notification-icon">{icons[notification.type]}</span>
      <span className="notification-message">{notification.message}</span>
      {notification.action && (
        <button
          className="notification-action"
          onClick={notification.action.onClick}
        >
          {notification.action.label}
        </button>
      )}
      <button className="notification-close" onClick={onClose}>✕</button>
    </div>
  );
}

export function useNotification(): NotificationContextType {
  const context = useContext(NotificationContext);
  if (!context) {
    throw new Error('useNotification은 NotificationProvider 내부에서만 사용할 수 있습니다');
  }
  return context;
}

// 사용 예시
function LoginForm() {
  const { success, error } = useNotification();
  const { login } = useAuth();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      await login(email, password);
      success('로그인에 성공했습니다!');
    } catch (err) {
      error('로그인에 실패했습니다. 다시 시도해주세요.');
    }
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

function DeleteButton({ itemId }: { itemId: string }) {
  const { notify, success, error } = useNotification();

  const handleDelete = async () => {
    // Undo 기능이 있는 알림
    notify({
      type: 'warning',
      message: '정말 삭제하시겠습니까?',
      duration: 5000,
      action: {
        label: '삭제',
        onClick: async () => {
          try {
            await deleteItem(itemId);
            success('삭제되었습니다');
          } catch (err) {
            error('삭제에 실패했습니다');
          }
        }
      }
    });
  };

  return <button onClick={handleDelete}>삭제</button>;
}

// types.ts
interface Modal {
  id: string;
  component: React.ComponentType<any>;
  props?: Record<string, any>;
}

interface ModalContextType {
  openModal: (component: React.ComponentType<any>, props?: Record<string, any>) => string;
  closeModal: (id: string) => void;
  closeAllModals: () => void;
}

// ModalProvider.tsx
const ModalContext = createContext<ModalContextType | undefined>(undefined);

export function ModalProvider({ children }: { children: React.ReactNode }) {
  const [modals, setModals] = useState<Modal[]>([]);

  const openModal = useCallback((component: React.ComponentType<any>, props?: Record<string, any>) => {
    const id = `modal-${Date.now()}-${Math.random()}`;
    const newModal: Modal = { id, component, props };

    setModals(prev => [...prev, newModal]);

    // Body 스크롤 막기
    document.body.style.overflow = 'hidden';

    return id;
  }, []);

  const closeModal = useCallback((id: string) => {
    setModals(prev => {
      const filtered = prev.filter(m => m.id !== id);

      // 모든 모달이 닫히면 스크롤 복원
      if (filtered.length === 0) {
        document.body.style.overflow = '';
      }

      return filtered;
    });
  }, []);

  const closeAllModals = useCallback(() => {
    setModals([]);
    document.body.style.overflow = '';
  }, []);

  const value = useMemo<ModalContextType>(() => ({
    openModal,
    closeModal,
    closeAllModals
  }), [openModal, closeModal, closeAllModals]);

  return (
    <ModalContext.Provider value={value}>
      {children}
      <ModalContainer modals={modals} closeModal={closeModal} />
    </ModalContext.Provider>
  );
}

function ModalContainer({ modals, closeModal }: { modals: Modal[]; closeModal: (id: string) => void }) {
  if (modals.length === 0) return null;

  return (
    <div className="modal-overlay">
      {modals.map(modal => {
        const Component = modal.component;
        return (
          <div key={modal.id} className="modal">
            <Component {...modal.props} onClose={() => closeModal(modal.id)} />
          </div>
        );
      })}
    </div>
  );
}

export function useModal(): ModalContextType {
  const context = useContext(ModalContext);
  if (!context) {
    throw new Error('useModal은 ModalProvider 내부에서만 사용할 수 있습니다');
  }
  return context;
}

// 사용 예시
function ConfirmModal({
  title,
  message,
  onConfirm,
  onClose
}: {
  title: string;
  message: string;
  onConfirm: () => void;
  onClose: () => void;
}) {
  return (
    <div className="confirm-modal">
      <h2>{title}</h2>
      <p>{message}</p>
      <div className="buttons">
        <button onClick={() => { onConfirm(); onClose(); }}>확인</button>
        <button onClick={onClose}>취소</button>
      </div>
    </div>
  );
}

function DeleteButton({ itemId }: { itemId: string }) {
  const { openModal } = useModal();

  const handleDelete = () => {
    openModal(ConfirmModal, {
      title: '삭제 확인',
      message: '정말 삭제하시겠습니까?',
      onConfirm: async () => {
        await deleteItem(itemId);
      }
    });
  };

  return <button onClick={handleDelete}>삭제</button>;
}

// 1. 순차적 중첩 (가독성 좋음, 순서 명확)
function App() {
  return (
    <ThemeProvider>
      <I18nProvider>
        <AuthProvider>
          <NotificationProvider>
            <ModalProvider>
              <CartProvider>
                <Router>
                  <Routes>
                    <Route path="/" element={<HomePage />} />
                    <Route path="/products" element={<ProductsPage />} />
                    <Route path="/cart" element={<CartPage />} />
                  </Routes>
                </Router>
              </CartProvider>
            </ModalProvider>
          </NotificationProvider>
        </AuthProvider>
      </I18nProvider>
    </ThemeProvider>
  );
}

// 2. Provider Composer 패턴 (깔끔함, 동적 조합 가능)
function composeProviders(...providers: React.ComponentType<{ children: React.ReactNode }>[]) {
  return ({ children }: { children: React.ReactNode }) =>
    providers.reduceRight((acc, Provider) => <Provider>{acc}</Provider>, children);
}

const AppProviders = composeProviders(
  ThemeProvider,
  I18nProvider,
  AuthProvider,
  NotificationProvider,
  ModalProvider,
  CartProvider
);

function App() {
  return (
    <AppProviders>
      <Router>
        <Routes>...</Routes>
      </Router>
    </AppProviders>
  );
}

// 3. 조건부 Provider (동적 구성)
function App() {
  const isAuthenticated = useAuth();

  return (
    <ThemeProvider>
      <I18nProvider>
        <AuthProvider>
          <NotificationProvider>
            {isAuthenticated ? (
              <CartProvider>
                <ModalProvider>
                  <AuthenticatedApp />
                </ModalProvider>
              </CartProvider>
            ) : (
              <PublicApp />
            )}
          </NotificationProvider>
        </AuthProvider>
      </I18nProvider>
    </ThemeProvider>
  );
}

// ❌ 나쁜 예: 매 렌더링마다 새 객체 생성
function BadProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');

  // 렌더링마다 새 객체 생성 → 모든 소비자 리렌더링!
  const value = {
    user,
    setUser,
    theme,
    setTheme
  };

  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

// ✅ 좋은 예: useMemo로 최적화
function GoodProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');

  // 의존성이 변경될 때만 새 객체 생성
  const value = useMemo(() => ({
    user,
    setUser,
    theme,
    setTheme
  }), [user, theme]); // setUser, setTheme은 안정적이므로 생략 가능

  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}