전역 상태 설계 — 상태를 어디에 두어야 하는가

// ❌ 전역에 둘 필요가 없는 상태
const useGlobalStore = create((set) => ({
  isModalOpen: false,        // 특정 페이지에서만 사용
  searchInput: '',           // 검색 바에서만 사용
  tooltipVisible: false,     // 특정 컴포넌트에서만 사용
}));

// ✅ 사용하는 곳에 가까이
function SearchBar() {
  const [input, setInput] = useState(''); // 여기서만 사용
  return <input value={input} onChange={e => setInput(e.target.value)} />;
}

function ProductModal() {
  const [isOpen, setIsOpen] = useState(false); // 여기서만 사용
  return (/* ... */);
}

이 상태를 사용하는 컴포넌트가 하나인가?
├── 예 → 해당 컴포넌트에 useState
└── 아니오
    ├── 형제 또는 가까운 조상-자손 관계인가?
    │   ├── 예 → Lifting State Up (상태 끌어올리기)
    │   └── 아니오
    │       ├── 서버에서 온 데이터인가?
    │       │   ├── 예 → TanStack Query / SWR
    │       │   └── 아니오
    │       │       ├── URL에 반영되어야 하나?
    │       │       │   ├── 예 → useSearchParams / URL 상태
    │       │       │   └── 아니오 → 전역 상태 (Zustand / Redux / Context)
    │       │       └──
    │       └──
    └──

function ProductPage() {
  // 필터와 목록이 같은 상태를 공유
  const [filter, setFilter] = useState('all');

  return (
    <div>
      <FilterBar filter={filter} onFilterChange={setFilter} />
      <ProductList filter={filter} />
    </div>
  );
}

// ❌ App에서 관리할 필요 없는 상태
function App() {
  const [color, setColor] = useState('red');
  return (
    <div>
      <Header />
      <ColorPicker color={color} onChange={setColor} />
      <Content />
    </div>
  );
}

// ✅ 상태를 사용하는 컴포넌트로 내리기
function App() {
  return (
    <div>
      <Header />
      <ColorPicker /> {/* 내부에서 state 관리 */}
      <Content />
    </div>
  );
}

// 전역이 적합한 예시들
const useAuthStore = create((set) => ({
  user: null,          // 거의 모든 곳에서 참조
  isAuthenticated: false,
}));

const useCartStore = create((set) => ({
  items: [],           // 헤더, 장바구니 페이지, 결제 페이지에서 사용
  total: 0,
}));

function App() {
  return (
    // 서버 상태: TanStack Query
    <QueryClientProvider client={queryClient}>
      {/* 라우팅 + URL 상태 */}
      <BrowserRouter>
        <Routes>
          <Route path="/products" element={<ProductPage />} />
        </Routes>
      </BrowserRouter>
    </QueryClientProvider>
  );
}

// Zustand: 클라이언트 전역 상태
const useUIStore = create((set) => ({
  sidebarOpen: true,
  toggleSidebar: () => set(s => ({ sidebarOpen: !s.sidebarOpen })),
}));

function ProductPage() {
  // URL 상태: 검색, 필터, 페이지
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category') || 'all';

  // 서버 상태: 상품 데이터
  const { data: products } = useQuery({
    queryKey: ['products', category],
    queryFn: () => fetchProducts(category),
  });

  // 로컬 상태: 이 페이지에서만 사용
  const [selectedId, setSelectedId] = useState(null);

  // 전역 클라이언트 상태
  const sidebarOpen = useUIStore(s => s.sidebarOpen);

  return (/* ... */);
}

// ❌ 모달 열림 상태까지 전역으로?
const useStore = create((set) => ({
  isDeleteModalOpen: false,
  isEditModalOpen: false,
  deleteTargetId: null,
  editFormData: {},
  // ... 수십 개의 UI 상태
}));

// ❌ Redux에 서버 데이터 저장
dispatch(setUsers(fetchedUsers));
// 동기화 문제, 캐시 관리를 직접 해야 함

// ✅ TanStack Query가 캐시를 관리
const { data: users } = useQuery({ queryKey: ['users'], queryFn: fetchUsers });

// ❌ props 3-4단계 전달이 싫어서 전역?
// → 먼저 컴포넌트 합성(children)을 시도

// ✅ 합성으로 해결
function Page() {
  const [user, setUser] = useState(null);
  return (
    <Layout>
      <Sidebar>
        <UserProfile user={user} /> {/* 직접 전달 */}
      </Sidebar>
    </Layout>
  );
}