// 기존 App.tsx - 모든 로직이 한 곳에  
export function App() {  
  // 상품, 장바구니, 쿠폰, 검색, 알림, 관리자 모드...  
  // 모든 상태와 로직이 여기에 집중!  
  const [products, setProducts] = useState(...);  
  const [cart, setCart] = useState(...);  
  const [coupons, setCoupons] = useState(...);  
  // ... 400줄의 거대한 컴포넌트  
}  

src/basic/  
├── domains/                    # 비즈니스 도메인 (기능별)  
│   ├── cart/                   # 장바구니 도메인  
│   │   ├── components/         # Cart 전용 컴포넌트  
│   │   ├── hooks/              # Cart 전용 훅  
│   │   ├── services/           # Cart 비즈니스 로직  
│   │   ├── types/              # Cart 타입  
│   │   └── utils/              # Cart 계산 함수  
│   ├── coupon/                 # 쿠폰 도메인  
│   └── product/                # 상품 도메인  
├── shared/                     # 공통 기능 (타입별)  
│   ├── components/ui/          # Button, Input 등  
│   ├── hooks/                  # 범용 훅  
│   └── utils/                  # 공통 유틸리티  
└── app/                        # 애플리케이션 레이어  

// 컴포넌트 분리 후 Props의 폭증  
<CartPage  
  addToCart={addToCart} // 1  
  applyCoupon={applyCoupon} // 2  
  calculateItemTotal={calculateItemTotal} // 3  
  cart={cart} // 4  
  completeOrder={completeOrder} // 5  
  coupons={coupons} // 6  
  debouncedSearchTerm={debouncedSearchTerm} // 7  
  formatPrice={formatPrice} // 8  
  getRemainingStock={getRemainingStock} // 9  
  products={products} // 10  
  removeFromCart={removeFromCart} // 11  
  selectedCoupon={selectedCoupon} // 12  
  updateQuantity={updateQuantity} // 13  
/>  

// Jotai의 간결함과 직관성  
export const productsAtom = atomWithStorage<ProductWithUI[]>("products", INITIAL_PRODUCTS);  
export const cartAtom = atomWithStorage<CartItem[]>("cart", []);  
export const couponsAtom = atomWithStorage<Coupon[]>("coupons", INITIAL_COUPONS);

// 파생 상태도 자연스럽게 표현 가능  
export const cartTotalAtom = atom((get) => {  
	const cart = get(cartAtom);  
	const selectedCoupon = get(selectedCouponAtom);  
	return calculateCartTotal(cart, selectedCoupon);  
});  

// domains/cart/store/atoms.ts  
export const cartAtom = atomWithStorage<CartItem[]>("cart", []);  
export const selectedCouponAtom = atom<Coupon | null>(null);

export const cartItemCountAtom = atom((get) => {  
	const cart = get(cartAtom);  
	return cart.reduce((sum, item) => sum + item.quantity, 0);  
});

export const cartTotalAtom = atom((get) => {  
	const cart = get(cartAtom);  
	const selectedCoupon = get(selectedCouponAtom);  
	return calculateCartTotal(cart, selectedCoupon);  
});  

// Before: 13개의 props  
<CartPage  
  addToCart={addToCart}  
  applyCoupon={applyCoupon}  
  // ... 11개 더  
/>

// After: 0개의 props!  
<CartPage />

// CartPage 내부에서 필요한 상태만 구독  
export function CartPage() {  
  const cart = useAtomValue(cartAtom);  
  const products = useAtomValue(productsAtom);  
  const { addToCart, removeFromCart } = useCartActions();

  return (  
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">  
      <ProductList />  
      <CartSummary />  
    </div>  
  );  
}  

// domains/cart/hooks/useCartAtom.ts  
export const useCartAtom = () => {  
	const [cart, setCart] = useAtom(cartAtom);  
	const cartTotal = useAtomValue(cartTotalAtom);  
	const itemCount = useAtomValue(cartItemCountAtom);

	return { cart, setCart, cartTotal, itemCount };  
};  

// domains/product/hooks/useProductForm.ts  
export const useProductForm = (initialProduct?: Product) => {  
	const [formData, setFormData] = useState({  
		name: initialProduct?.name || "",  
		price: initialProduct?.price || 0,  
		stock: initialProduct?.stock || 0  
	});

	const [errors, setErrors] = useState<Record<string, string>>({});

	return { formData, setFormData, errors, validate };  
};  

// domains/cart/index.ts  
export * from "./components";  
export * from "./hooks";  
export * from "./types";  
export * from "./utils";

// 사용 시  
import { CartItem, useCartActions, calculateCartTotal } from "../domains/cart";  

// domains/cart/index.ts에서  
export * from "./hooks/useCartAtom";

// domains/cart/hooks/useCartAtom.ts에서  
import { useCouponAtom } from "../../coupon"; // 순환 의존성 위험!  

shared/  
├── components/NotificationList.tsx    # 분산된 파일들  
├── hooks/useNotifications.ts          # 찾기 어려움  
├── store/notificationAtoms.ts  
└── types/notification.ts  

export const useAdminMode = () => {  
	const [isAdmin, setIsAdmin] = useAtom(adminModeAtom); // 내부 구현  
	const toggle = () => setIsAdmin((v) => !v);

	return { isAdmin, setIsAdmin, toggle }; // 인터페이스만 노출  
};