docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거

Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를
Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류.

- 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로
  자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거,
  동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거.
- 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming,
  Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business,
  Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로,
  나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는
  title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백).
  원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지.
- 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서.
- 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는
  지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지.
- Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경.
- 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.

10_Wiki/Topic_Programming/Coding/React_State_Library_Comparison.md

@@ -0,0 +1,161 @@
+---
+id: react-state-library-comparison
+title: 상태 라이브러리 비교 — Zustand / Jotai / Redux Toolkit
+category: Coding
+status: draft
+source_trust_level: B
+verification_status: conceptual
+created_at: 2026-05-09
+updated_at: 2026-05-09
+tags: [react, state, zustand, jotai, redux, vibe-coding]
+tech_stack: { language: "TypeScript / React", applicable_to: ["Frontend"] }
+applied_in: []
+aliases: [Zustand, Jotai, Redux Toolkit, Valtio, state management, store]
+---
+
+# 상태 라이브러리 비교
+
+> Server state = TanStack Query. **Client-only UI state** = Zustand 디폴트, 원자 단위 derive 많으면 Jotai, 큰 팀 + DevTools = Redux Toolkit. Context = 가벼운 prop drilling 만.
+
+## 📖 핵심 개념
+- Zustand: 단일 store, hook 기반, 가장 간단.
+- Jotai: 원자 단위, derive (computed) 강력.
+- Redux Toolkit: 전통, slice/reducer/devtools.
+- Valtio: proxy mutate 스타일.
+- Context: React 내장, re-render 비용 큼.
+
+## 💻 코드 패턴
+
+### Zustand
+```ts
+import { create } from 'zustand';
+
+interface CartStore {
+  items: Item[];
+  add: (i: Item) => void;
+  remove: (id: string) => void;
+  total: () => number;
+}
+
+export const useCart = create<CartStore>((set, get) => ({
+  items: [],
+  add: (i) => set(s => ({ items: [...s.items, i] })),
+  remove: (id) => set(s => ({ items: s.items.filter(x => x.id !== id) })),
+  total: () => get().items.reduce((s, i) => s + i.price, 0),
+}));
+
+// 사용
+const items = useCart(s => s.items); // selective subscribe
+const add = useCart(s => s.add);
+```
+
+### Zustand + persist
+```ts
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+const useAuth = create(persist<AuthStore>(
+  (set) => ({ token: null, login: (t) => set({ token: t }) }),
+  { name: 'auth', storage: createJSONStorage(() => localStorage) }
+));
+```
+
+### Jotai
+```ts
+import { atom, useAtom, useAtomValue } from 'jotai';
+
+const cartAtom = atom<Item[]>([]);
+const totalAtom = atom((get) => get(cartAtom).reduce((s, i) => s + i.price, 0));
+
+function Cart() {
+  const [items, setItems] = useAtom(cartAtom);
+  const total = useAtomValue(totalAtom); // 자동 derive
+  return <p>{items.length} items, {total}</p>;
+}
+```
+
+### Redux Toolkit
+```ts
+import { createSlice, configureStore } from '@reduxjs/toolkit';
+
+const cart = createSlice({
+  name: 'cart',
+  initialState: { items: [] as Item[] },
+  reducers: {
+    add: (s, a: PayloadAction<Item>) => { s.items.push(a.payload); },
+    remove: (s, a: PayloadAction<string>) => {
+      s.items = s.items.filter(x => x.id !== a.payload);
+    },
+  },
+});
+
+export const store = configureStore({ reducer: { cart: cart.reducer } });
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+```
+
+```tsx
+// hooks.ts
+import { useDispatch, useSelector } from 'react-redux';
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
+
+// component
+const items = useAppSelector(s => s.cart.items);
+const dispatch = useAppDispatch();
+dispatch(cart.actions.add(item));
+```
+
+### Valtio (mutate 스타일)
+```ts
+import { proxy, useSnapshot } from 'valtio';
+
+const state = proxy({ count: 0 });
+state.count++;  // OK
+
+function Counter() {
+  const snap = useSnapshot(state);
+  return <p>{snap.count}</p>;
+}
+```
+
+### Context (가벼운 케이스)
+```tsx
+const Theme = createContext<'light' | 'dark'>('light');
+
+function App() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  return <Theme.Provider value={theme}><Page /></Theme.Provider>;
+}
+```
+
+⚠️ value 가 자주 바뀌면 모든 consumer 재렌더 → Zustand/Jotai 가 나음.
+
+## 🤔 의사결정 기준
+| 상황 | 추천 |
+|---|---|
+| Server data | TanStack Query |
+| 작은 UI state (toggle, modal) | useState |
+| 글로벌 client state | Zustand |
+| Computed state 많음 | Jotai |
+| 큰 팀 / DevTools / time-travel | Redux Toolkit |
+| Mutate 친화 | Valtio |
+| Provider tree 만 | Context |
+| RSC + Next 14 | useState + URL state + Query |
+
+## ❌ 안티패턴
+- **모든 state 글로벌**: 컴포넌트 캡슐화 깨짐. 가능한 local.
+- **Server data 를 Zustand 에 복사**: 동기화 지옥. Query 만.
+- **Context 자주 변경**: 모든 자식 재렌더.
+- **Redux 한 슬라이스 안 큰 객체 매 변경**: 모든 selector 재계산.
+- **Persist 모든 store**: 비밀 / 임시 까지 저장.
+- **Selector 안에 객체 새로 만듦**: 매번 새 reference — re-render. shallow 또는 reselect.
+- **Selectors 간 derive 깊음**: Jotai / reselect.
+
+## 🤖 LLM 활용 힌트
+- Server = Query, Client = Zustand 디폴트.
+- Computed 필요 시 Jotai.
+- Devtools 강력 = Redux Toolkit.
+
+## 🔗 관련 문서
+- [[React_TanStack_Query_Advanced]]
+- [[React_Context_API_Misuse]]