refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조

에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게
[공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류.
문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인).

- Topic_Programming → Domain_Programming (내부 구조 보존)
- Topic_Graphic → Domain_Design
- Topic_Business → Domain_Product
- Topic_General → Domain_General
- _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning),
  Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing)
- 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서)
- 빈 폴더 정리 (memory/procedures)
- 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

10_Wiki/Topics/Domain_Programming/Frontend/Prop Drilling.md

@@ -0,0 +1,187 @@
+---
+id: wiki-2026-0508-prop-drilling
+title: Prop Drilling
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Props Drilling, Props Threading]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.9
+verification_status: applied
+tags: [frontend, react, prop-drilling, state-management, antipattern]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: TypeScript
+  framework: React
+---
+
+# Prop Drilling
+
+## 매 한 줄
+> **"매 props 의 깊은 component tree 통과"**. 매 parent 가 grandchild 에 data 전달하기 위해 매 intermediate component 가 props 의 단순 forward. 2026 React 19+ 매 Server Component / Context / Zustand 의 5가지 해결책으로 회피.
+
+## 매 핵심
+
+### 매 문제
+- Intermediate component 의 매 props type 의 noise.
+- Refactoring 의 매 cost — 새 prop 추가 시 매 layer 수정.
+- Type drift: 매 layer 마다 prop spread, original type 잃음.
+
+### 매 5가지 해결
+1. **Component Composition** (children prop): 매 first choice.
+2. **React Context**: 매 theme, auth, locale — 매 cross-cutting concern.
+3. **State Management Library**: 매 Zustand, Jotai, Redux Toolkit.
+4. **React Server Components** (RSC): 매 server-side data fetching, props 의 root level resolve.
+5. **Custom Hook + Module-level store**: 매 small project.
+
+### 매 응용
+1. Theme propagation: 매 Context.
+2. Auth user: 매 Context + custom hook (`useUser()`).
+3. Form state: 매 react-hook-form, TanStack Form.
+4. Server data: 매 RSC 또는 TanStack Query.
+
+## 💻 패턴
+
+### Anti: 매 prop drilling
+```tsx
+// App → Layout → Sidebar → UserMenu 매 user 4 level 통과
+function App() {
+  const user = useAuth();
+  return <Layout user={user} />;
+}
+function Layout({ user }: { user: User }) {
+  return <Sidebar user={user} />;
+}
+function Sidebar({ user }: { user: User }) {
+  return <UserMenu user={user} />;
+}
+function UserMenu({ user }: { user: User }) {
+  return <div>{user.name}</div>;
+}
+```
+
+### 해결 1: Composition
+```tsx
+function App() {
+  const user = useAuth();
+  return (
+    <Layout sidebar={<Sidebar><UserMenu user={user} /></Sidebar>} />
+  );
+}
+function Layout({ sidebar }: { sidebar: ReactNode }) {
+  return <div>{sidebar}</div>;
+}
+```
+
+### 해결 2: Context
+```tsx
+const UserContext = createContext<User | null>(null);
+
+function App() {
+  const user = useAuth();
+  return (
+    <UserContext.Provider value={user}>
+      <Layout />
+    </UserContext.Provider>
+  );
+}
+
+function UserMenu() {
+  const user = useContext(UserContext);
+  return <div>{user?.name}</div>;
+}
+
+// Custom hook for safety
+function useUser() {
+  const user = useContext(UserContext);
+  if (!user) throw new Error('useUser must be inside UserProvider');
+  return user;
+}
+```
+
+### 해결 3: Zustand
+```tsx
+import { create } from 'zustand';
+
+const useUserStore = create<{ user: User | null; setUser: (u: User) => void }>((set) => ({
+  user: null,
+  setUser: (user) => set({ user }),
+}));
+
+function UserMenu() {
+  const user = useUserStore((s) => s.user);
+  return <div>{user?.name}</div>;
+}
+```
+
+### 해결 4: React Server Component (Next.js 16)
+```tsx
+// app/layout.tsx (server component)
+async function Layout({ children }: { children: ReactNode }) {
+  const user = await getUser(); // server-side
+  return (
+    <div>
+      <Sidebar user={user} />
+      {children}
+    </div>
+  );
+}
+```
+
+### 해결 5: Custom hook + module store
+```tsx
+// 매 simple, no library
+let _user: User | null = null;
+const listeners = new Set<() => void>();
+
+export function useUser() {
+  return useSyncExternalStore(
+    (cb) => { listeners.add(cb); return () => listeners.delete(cb); },
+    () => _user,
+  );
+}
+export function setUser(u: User) {
+  _user = u;
+  listeners.forEach((l) => l());
+}
+```
+
+## 매 결정 기준
+| 상황 | 해결 |
+|---|---|
+| 1-2 level only | 그냥 props (drilling 아님) |
+| Cross-cutting (theme, auth, locale) | Context |
+| Frequently-changing state shared | Zustand / Jotai |
+| Server-fetched data | RSC + TanStack Query |
+| Complex slot-based UI | Composition (children) |
+| Nested form | react-hook-form FormProvider |
+
+**기본값**: 매 Composition 우선 → 매 Context (cross-cutting) → 매 Zustand (frequently-changing client state).
+
+## 🔗 Graph
+- 부모: [[React]]
+- 변형: [[Zustand]] · [[Jotai]] · [[Redux_Toolkit]]
+- Adjacent: [[Render_Props]]
+
+## 🤖 LLM 활용
+**언제**: refactor stage 매 component tree 의 prop forwarding 발견 시.
+**언제 X**: 매 1-2 level 의 props — 매 over-engineering 의 risk.
+
+## ❌ 안티패턴
+- **Context 남용**: 매 every shared state — re-render storm.
+- **Single global Context**: 매 split context for performance (theme separate from user).
+- **Redux for everything**: 매 server state 매 TanStack Query 가 적합.
+- **Spread `{...props}` 의 chain**: type 의 erosion + unused prop forward.
+
+## 🧪 검증 / 중복
+- Verified (React 19 docs, Kent C. Dodds blog, Zustand 5).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — 5가지 해결 + RSC 추가 |